@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,"Helvetica Neue",Arial,sans-serif;color:#e8e7e2;background:#111816;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.48}a{color:#d7a66e;text-decoration:none}a:hover{text-decoration:underline}
.app{min-height:100vh;display:flex;flex-direction:column}.topbar{height:66px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #313a35;background:#17211d;gap:18px}.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.14em;font-size:15px;white-space:nowrap}.brand small{display:block;font-size:8px;letter-spacing:.24em;color:#a3ada6;margin-top:1px}.brand-mark{background:#b27b45;color:#19211c;padding:7px 11px;border-radius:5px;font-size:16px;letter-spacing:0}.top-center{display:flex;align-items:center;gap:10px;color:#9eaaa0;font-size:11px}.chapter{color:#d5c7ae;font-weight:800;letter-spacing:.14em}.status-dot,.live-label i{display:inline-block;width:6px;height:6px;background:#9fbd81;border-radius:50%}.top-actions{display:flex;align-items:center;gap:12px}.ghost{background:none;color:#d3d5ce;border:1px solid #536058;border-radius:6px;padding:8px 11px;font-size:11px}.ghost:hover{border-color:#c5a079}.score{padding:9px 13px;border-radius:6px;background:#293b2d;color:#bddd9d;font-weight:800;font-size:11px}
.layout{display:grid;grid-template-columns:300px minmax(400px,1fr) 282px;min-height:540px;flex:1}.panel{background:#1d2822;padding:26px 22px}.lesson{border-right:1px solid #334139;display:flex;flex-direction:column}.eyebrow{font-size:10px;font-weight:800;color:#ba8d5a;letter-spacing:.17em;margin:0}.lesson h1{font-size:25px;line-height:1.2;letter-spacing:-.04em;margin:22px 0 12px}.lesson h1 em{color:#c9a67f;font-style:normal}.intro{font-size:12px;line-height:1.75;color:#bbc3b8;margin:0 0 30px}.steps{display:grid;gap:7px}.step{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:12px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aeb8aa}.step:hover{background:#29372d}.step.active{background:#344134;border-color:#6d7b61;color:white}.step>b{display:grid;place-items:center;flex:0 0 29px;height:29px;border:1px solid #849080;border-radius:50%;font-size:10px}.step.active>b{background:#d5aa73;color:#192119;border-color:#d5aa73}.step span{font-size:12px;font-weight:800;flex:1}.step small{display:block;font-size:10px;color:#a8b3a4;font-weight:500;margin-top:2px}.step i{font-size:17px;color:#b4ca95;font-style:normal}.mission-card{margin-top:24px;padding:17px;background:#29362c;border-left:2px solid #ba8d5a;min-height:140px}.mission-card b{font-size:12px}.mission-card p{font-size:11px;line-height:1.7;color:#c9d0c4;margin:9px 0 0}.footnote{margin-top:auto;padding-top:25px;font-size:10px;line-height:1.6;color:#879588}
.viewport{position:relative;background:#d6d3cd;overflow:hidden;min-height:520px}.viewport iframe{display:block;width:100%;height:100%;border:0}.scene-top,.view-bottom{position:absolute;z-index:3;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:8px}.scene-top{top:16px;color:#29332d;font-size:10px}.live-label{background:#1e2b24;color:#e7e5d8;padding:9px 12px;border-radius:4px;font-size:9px;letter-spacing:.14em;font-weight:800}.live-label i{margin-right:5px}.view-bottom{bottom:17px;color:#4c554b;font-size:9px;font-weight:800;letter-spacing:.12em}.view-btn{pointer-events:auto;border:1px solid #879184;background:#edf0e9db;color:#253127;border-radius:5px;padding:8px 10px;font-size:10px;font-weight:700}.view-btn:hover{background:#fff}.loading{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#3c493e;background:#d6d3cd;font-size:12px}.loading.hidden{display:none}
.inspector{border-left:1px solid #334139;display:flex;flex-direction:column}.inspector-title{display:flex;justify-content:space-between;align-items:center;gap:6px}.inspector-title #partIndex{font-size:10px;color:#899588}.inspector-content{padding-top:30px}.part-icon{font-size:27px;width:48px;height:48px;border:1px solid #6f795e;display:grid;place-items:center;color:#dbbc91;background:#354333;border-radius:8px;margin-bottom:18px}.inspector h2{font-size:23px;letter-spacing:-.05em;margin:0 0 11px}.inspector .part-role{font-size:12px;font-weight:700;color:#d4af81;margin:0 0 15px}.inspector .part-copy{font-size:12px;line-height:1.8;color:#c1cbbd;margin:0 0 20px}.micro-card{background:#344239;padding:12px;border-radius:6px;color:#e5e3d6;font-size:11px;line-height:1.6}.micro-card b{display:block;color:#adc695;font-size:9px;letter-spacing:.14em;margin-bottom:4px}.source-box{margin-top:auto;padding-top:20px;border-top:1px solid #405044;font-size:10px;line-height:1.6;color:#a4b09f}.source-box b{color:#d2d9cd}.source-box p{margin:5px 0}
.control-deck{background:#17211d;border-top:1px solid #3c493e;padding:17px 25px 20px;min-height:213px}.deck-heading{display:flex;justify-content:space-between;align-items:center}.deck-heading h2{font-size:16px;margin:4px 0 0;letter-spacing:-.03em}.machine-state{font-size:11px;color:#c2cebb}.deck-content{margin-top:17px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.part-button,.action-button,.choice-button,.jog-button{border-radius:5px;border:1px solid #647366;background:#2d3d31;color:#e7e9df;padding:11px 12px;font-size:11px;font-weight:700}.part-button:hover,.choice-button:hover,.jog-button:hover{border-color:#c8aa82;background:#3b4d3e}.part-button.selected,.choice-button.selected{background:#a87948;color:#142018;border-color:#d4aa73}.part-button.done{border-color:#8aa985;color:#bfdda8}.part-button.wrong{border-color:#b76356;background:#563a32}.action-button{background:#c08b52;color:#1a2119;border-color:#d9aa74}.action-button:hover{background:#dda866}.action-button.secondary{background:transparent;color:#e4d5bb}.feedback{height:28px;margin-top:12px;color:#b7c6b1;font-size:11px}.feedback.error{color:#f1b3a5}.feedback.success{color:#b8df9b}.jog-group{display:flex;align-items:center;gap:6px;margin-right:8px;padding:6px 9px;background:#26352b;border-radius:6px}.jog-group label{font-size:11px;font-weight:800;color:#d0bd97;min-width:45px}.jog-group output{font-size:12px;font-variant-numeric:tabular-nums;min-width:65px;text-align:center}.jog-button{padding:7px 9px;font-size:15px}.target{font-size:11px;color:#d6d6c7;padding:10px 13px;background:#334238;border-radius:5px}.quiz-row{display:flex;gap:8px;flex-wrap:wrap}.progress-bar{height:5px;background:#415143;width:180px;border-radius:4px;overflow:hidden}.progress-bar>span{display:block;height:100%;background:#c99b60;width:0%;transition:width .2s}.complete-banner{color:#c4e2a7;font-size:15px;font-weight:800}
@media(max-width:1100px){.layout{grid-template-columns:270px minmax(370px,1fr)}.inspector{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:220px}.inspector-title{grid-column:1/-1}.inspector-content{padding-top:4px}.source-box{padding:0 0 0 20px;border-top:0;border-left:1px solid #405044}.lesson h1{font-size:22px}}
@media(max-width:750px){.topbar{padding:0 13px}.top-center{display:none}.layout{display:flex;flex-direction:column}.lesson{padding:18px;min-height:auto}.lesson h1{margin:12px 0;font-size:23px}.intro{margin-bottom:15px}.steps{grid-template-columns:repeat(3,1fr)}.step{gap:6px;padding:7px}.step>b{display:none}.step span{font-size:10px}.step small{font-size:8px}.step i{display:none}.mission-card{margin-top:14px;min-height:auto;padding:12px}.footnote{padding-top:12px}.viewport{height:410px;min-height:410px}.scene-top>span:last-child{display:none}.inspector{display:block;padding:18px}.inspector-content{padding-top:12px}.source-box{border-left:0;border-top:1px solid #405044;padding:10px 0 0}.control-deck{padding:15px}.deck-content{max-height:220px;overflow:auto}.part-button{padding:8px;font-size:10px}}
.tool-workflow{width:100%;display:grid;gap:12px}.job-picker,.tool-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.tool-picker{grid-template-columns:repeat(6,minmax(0,1fr))}.job-card,.tool-card{border:1px solid #4d6052;border-radius:7px;background:#25362b;color:#e6e9df;text-align:left;padding:11px 14px;font:inherit}.job-card b,.tool-card b{font-size:12px;display:block}.job-card small,.tool-card small{font-size:10px;color:#acbcaa;display:block;margin-top:5px}.job-card.selected,.tool-card.selected{border-color:#d7aa74;background:#3d4937}.tool-card{display:flex;align-items:center;gap:15px}.tool-card svg{width:32px;height:55px;flex-shrink:0;stroke:#dfc59d;fill:#879788;stroke-width:2}.tool-card:hover,.job-card:hover{background:#354936}.tool-actions,.tool-running{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.tool-caption{color:#a0af9e;font-size:10px}.tool-running strong{font-size:13px;min-width:230px}.tool-drawing{width:76px;height:105px;margin-bottom:15px;border-radius:9px;background:linear-gradient(150deg,#344739,#17241c);border:1px solid #6c8065;padding:5px}.tool-drawing svg{height:100%;width:100%;fill:#b3bfb1;stroke:#e3c89f;stroke-width:1.5}.feedback{height:auto;min-height:28px;line-height:1.65;max-width:1100px}.inspector-content{padding-top:20px}.layout{min-height:570px}.step{padding:10px}.mission-card{margin-top:14px;min-height:110px}
@media(max-width:750px){.job-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-content{max-height:none}.steps{grid-template-columns:repeat(4,1fr)}.tool-card{padding:8px;gap:8px}.tool-card b{font-size:10px}.view-bottom{font-size:8px}.view-bottom>span{max-width:55%}}

/* Motion controls remain beside the machine, without quiz gates or hidden messages. */
.controls-visible .viewport{display:flex;flex-direction:column;min-height:580px}
.controls-visible .viewport iframe{flex:1;min-height:300px;height:0}
.controls-visible .view-bottom{display:none}
.controls-visible .control-deck{flex-shrink:0;min-height:0;padding:14px 18px}
.controls-visible .deck-content{margin-top:12px}
.controls-visible .deck-heading{gap:10px;flex-wrap:wrap}
.controls-visible .jog-group{flex:1 1 200px;justify-content:space-between;margin:0}
.controls-visible .jog-group label{font-size:11px}
.controls-visible .jog-button{min-width:38px;min-height:40px}
.controls-visible .feedback{margin:8px 0 0;min-height:20px}
.try-motion{margin-top:12px;width:100%}
@media(min-width:1101px){.controls-visible .layout{height:calc(100dvh - 66px);min-height:650px;flex:none}.controls-visible .panel{overflow:auto}.controls-visible .viewport{min-height:0}}
@media(min-width:751px) and (max-width:1100px){.controls-visible .inspector{display:none}.controls-visible .layout{height:calc(100dvh - 66px);min-height:650px;flex:none}.controls-visible .lesson{overflow:auto}.controls-visible .viewport{min-height:0}}
@media(max-width:750px){.controls-visible .lesson h1,.controls-visible .intro,.controls-visible .footnote,.controls-visible .mission-card,.controls-visible .inspector{display:none}.controls-visible .lesson{padding:12px}.controls-visible .steps{margin-top:10px}.controls-visible .viewport{height:auto;min-height:680px}.controls-visible .viewport iframe{min-height:320px}.controls-visible .control-deck{padding:12px}.controls-visible .jog-group{flex-basis:100%}}

/* One workspace: the controls belong to every stage, including recognition and tools. */
.copilot{flex:none;display:flex;align-items:center;gap:12px;background:#314237;color:#f2e8d7;padding:11px 16px;border-bottom:1px solid #6c795f;font-size:12px;line-height:1.5;min-height:58px;z-index:4}
.copilot b{font-size:9px;letter-spacing:.14em;color:#e0b17e;border-right:1px solid #82917b;padding-right:12px}
.controls-visible .scene-top{top:72px}
.tool-demo{display:none;background:#172723;color:#eee8da;min-height:0}
.tool-preview #toolDemo{display:flex;flex:1;flex-direction:column;overflow:auto}
.tool-preview #machineFrame,.tool-preview .scene-top{display:none}
.demo-heading{display:flex;justify-content:space-between;gap:12px;padding:16px 20px 0;align-items:center}
.demo-heading h2{font-size:19px;margin:5px 0 0;line-height:1.3}
.demo-heading .ghost{flex:none}
.cutaway{width:100%;flex:1;min-height:100px;max-height:250px}
.demo-explanation{padding:0 20px 14px;font-size:12px;line-height:1.55}
.demo-explanation p{margin:4px 0 10px;color:#d9dfce}
.demo-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.demo-controls small{color:#b5c3ae;margin-left:auto;font-size:10px}
.demo-meter{height:3px;background:#435449;margin-top:12px}.demo-meter span{display:block;background:#d5aa73;height:100%}
.depth-control{display:flex;align-items:center;gap:10px;margin:5px 0 12px;font-size:11px}.depth-control input{flex:1;min-width:60px;accent-color:#e0b17e}.depth-control output{min-width:43px}
button:focus-visible,input:focus-visible{outline:3px solid #f8c383;outline-offset:3px}
.controls-visible .tool-workflow{gap:8px}
.controls-visible .tool-picker{order:-1;gap:6px}
.controls-visible .job-picker{gap:6px}
.controls-visible .tool-card{padding:8px;gap:6px;min-height:68px}
.controls-visible .tool-card svg{width:22px;height:42px}
.controls-visible .tool-card b{font-size:10px}
.controls-visible .tool-card small{font-size:9px;margin-top:3px}
/* v11: 6 κοπτικά σε μία σειρά — μία γραμμή περιγραφής, ώστε να μένει ύψος για τη μηχανή. */
@media(min-width:751px){.controls-visible .tool-card{padding:6px;gap:5px;min-height:0}.controls-visible .tool-card svg{width:18px;height:34px;flex:none}.controls-visible .tool-card b{line-height:1.2}.controls-visible .tool-card>span{min-width:0;overflow:hidden}.controls-visible .tool-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.controls-visible .job-card{padding:7px 8px}
.controls-visible .job-card b{font-size:10px}
.controls-visible .job-card small{font-size:9px;margin-top:3px}
.controls-visible .tool-actions{gap:7px}
.controls-visible .tool-actions .tool-caption{display:none}
.controls-visible .control-deck{padding:12px 14px}
.controls-visible .deck-heading .eyebrow{font-size:8px}
.controls-visible .deck-heading h2{font-size:14px}
.controls-visible .machine-state{font-size:10px}
.controls-visible .deck-content{margin-top:9px}
.controls-visible .feedback:empty{display:none}
.controls-visible .feedback{max-height:65px;overflow:auto}
.controls-visible .view-bottom{display:none}
@media(min-width:751px){
 .controls-visible .layout{min-height:0;height:calc(100dvh - 66px);grid-template-columns:220px minmax(0,1fr) 230px}
 .controls-visible .viewport{min-height:0;min-width:0}
 .controls-visible .viewport iframe{min-height:160px}
 .controls-visible .panel{padding:20px 16px;min-height:0}
 .controls-visible .lesson h1{font-size:20px;margin:16px 0 10px}
 .controls-visible .intro{font-size:11px;margin-bottom:15px}
 .controls-visible .inspector h2{font-size:20px}
 .controls-visible .mission-card{padding:12px;min-height:0}
 .controls-visible .control-deck{max-height:48%;overflow:auto}
}
@media(min-width:751px) and (max-width:1100px){
 .controls-visible .layout{grid-template-columns:200px minmax(0,1fr)}
 .controls-visible .inspector{display:none}
}
@media(max-width:750px){
 .controls-visible .viewport{min-height:0;height:auto;overflow:visible}
 .controls-visible .viewport iframe{flex:none;height:240px;min-height:240px}
 .controls-visible .lesson{padding:8px 12px}
 .controls-visible .lesson>.eyebrow{display:none}
 .controls-visible .steps{margin:0}
 .copilot{font-size:11px;padding:10px 12px;min-height:65px}
 .controls-visible .scene-top{top:80px}
 .tool-preview #toolDemo{flex:none;min-height:340px}
 .demo-heading{padding:12px 12px 0}.demo-heading h2{font-size:16px}.demo-heading .eyebrow{font-size:8px}
 .cutaway{flex:none;height:180px}.demo-explanation{padding:0 12px 12px}
 .controls-visible .tool-picker{grid-template-columns:repeat(6,minmax(0,1fr))}
 .controls-visible .tool-card{display:block;text-align:center;padding:5px 2px;min-height:74px}
 .controls-visible .tool-card svg{height:24px}
 .controls-visible .tool-card b{font-size:9px;line-height:1.15;hyphens:auto} /* 6 κοπτικά σε μία σειρά στα 390 px */
 .controls-visible .tool-card small{display:none}
 .controls-visible .job-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
 .controls-visible .control-deck{padding:12px}
 .controls-visible .deck-content{overflow:visible}
}
@media(min-width:751px) and (max-height:740px){
 .controls-visible .intro{display:none}
 .controls-visible .tool-card{min-height:55px;padding:5px}
 .controls-visible .tool-card svg{height:30px}
 .controls-visible .job-card small{display:none}
 .demo-heading{padding-top:10px}.demo-heading h2{font-size:16px}
 .demo-explanation{padding-bottom:10px}.demo-explanation p{font-size:11px;margin-bottom:6px}
 .controls-visible .control-deck{max-height:49%}
}
@media(max-width:750px){
 .tool-preview #toolDemo{min-height:310px}
 .cutaway{height:150px}
 .controls-visible .tool-card{min-height:80px}
 .controls-visible .job-card small{display:none}
}
/* Job cards open a visible workpiece and its machining result. */
.job-scene{position:relative;flex:1;min-height:110px;margin-top:10px;overflow:hidden}
.job-scene canvas{display:block;width:100%;height:100%}
#jobPhase{font-size:11px;color:#d4dfc5}
.job-limit{display:block;color:#a5b7a7;font-size:9px;margin-top:8px}
.controls-visible .tool-actions{gap:6px}
.controls-visible .tool-actions .action-button{padding:9px;font-size:10px}
.controls-visible .tool-actions .target{padding:9px;font-size:10px}
@media(max-width:750px){.job-scene{flex:none;height:155px;min-height:155px}.job-limit{font-size:8px}.controls-visible .tool-actions .target{padding:4px;background:none}.controls-visible .tool-actions .action-button{flex:1}.controls-visible .tool-actions .target{flex-basis:100%;text-align:center}}
@media(max-width:750px){
 .job-scene{height:120px;min-height:120px}
 .tool-demo:has(.job-scene) .demo-heading h2{font-size:14px}
 .tool-demo:has(.job-scene) .demo-explanation p{font-size:11px;margin-bottom:6px}
 .tool-demo:has(.job-scene) .demo-meter{margin-top:7px}
}

/* Controls belong to the same machine viewport; no second renderer for jobs. */
.machine-job-controls{flex:none;background:#22362b;padding:8px 14px;color:#e6e9df;display:grid;gap:6px;border-top:1px solid #60765e}
.job-status-line{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.demo-pace{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#f3c58a;border:1px solid #f3c58a88;border-radius:4px;padding:1px 5px;white-space:nowrap}
@media(max-width:750px){.demo-pace{font-size:8px;padding:0 4px}}
.machine-job-buttons{display:flex;gap:6px;flex-wrap:wrap}
.machine-job-controls small{font-size:9px;color:#bdcab7}
.machine-job-controls .demo-meter{margin:0;height:3px}
.machine-job-controls .ghost{padding:5px 8px}
@media(max-width:750px){
 .machine-job-controls{padding:7px 12px;gap:5px}
 .job-status-line{font-size:10px}
 .machine-job-buttons{gap:4px}
 .machine-job-controls .ghost{font-size:10px;padding:5px}
 .controls-visible .viewport:has(.machine-job-controls) iframe{height:200px;min-height:200px}
}

/* Synchronized section, anchored within the machine area; never over the controls. */
#cutZoom{position:absolute;right:8px;z-index:5;width:214px;border:1px solid #9eaf9c;border-radius:9px;background:#f7f4ecf5;color:#283c30;box-shadow:0 4px 18px #162a2630;overflow:auto}
#cutZoom[hidden]{display:none}
#cutZoom header{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 3px 10px;background:#294134;color:#f6f1e6;font-size:11px}
#cutZoom button{background:transparent;border:0;color:inherit;font-size:19px;width:30px;height:28px;cursor:pointer}
#cutZoom button:focus-visible{outline:2px solid #f0bf6c;outline-offset:-2px}
.zoom-body{padding:6px 9px 8px}.zoom-tool{display:block;font-size:11px}.zoom-body svg{display:block;width:100%;height:104px}.zoom-shape{font-size:10px;font-weight:700;line-height:1.3}.zoom-state{font-size:10px;margin-top:4px;color:#436b48}.zoom-depth{display:block;font-size:9px;line-height:1.4;margin-top:2px}
#cutZoom.collapsed .zoom-body{display:none}
.zoom-warning{font-size:9.5px;font-weight:700;line-height:1.3;color:#7a2a12;background:#fde8d6;border:1px solid #e3a37a;border-radius:5px;padding:4px 6px;margin:4px 0}.zoom-warning[hidden]{display:none}
@media(max-width:699px){#cutZoom.collapsed{width:auto;min-width:0}}
.viewport:has(#cutZoom:not([hidden])) .scene-top>span:last-child{display:none}
@media(max-width:750px){#cutZoom{width:143px;right:5px}#cutZoom header{font-size:9px;padding-left:6px}#cutZoom button{height:24px;width:24px}.zoom-body{padding:5px}.zoom-tool{font-size:9px}.zoom-body svg{height:78px}.zoom-shape,.zoom-state{font-size:9px}.zoom-depth{font-size:8px}}
/* Keep the added comparison action on screen alongside the existing lesson controls. */
@media(max-width:750px){
 .controls-visible .tool-workflow{gap:5px}
 .controls-visible .tool-actions .action-button{padding:7px}
}

/* Depth stays next to machining controls, outside the scrolling tool deck. */
.job-depth{display:flex;align-items:center;gap:9px;font-size:11px}
.job-depth label{white-space:nowrap}
.job-depth input{flex:1;min-width:60px;accent-color:#efba72;height:22px;margin:0;cursor:pointer}
.job-depth output{min-width:49px;text-align:right;font-variant-numeric:tabular-nums;color:#f3c58a}
@media(max-width:750px){.job-depth{font-size:10px;gap:7px}.machine-job-controls #depthHint{font-size:8px}}

/* Two sections share millimetre scale and the chosen depth, independent of ATC. */
#cutZoom .pair-toggle{font-size:10px;width:auto;padding:0 7px;white-space:nowrap;border:1px solid #829783;border-radius:4px;height:23px;margin-left:auto}
#cutZoom.paired{width:350px;max-width:calc(100% - 16px)}
#cutZoom.paired .zoom-body{display:none}
#cutZoom.collapsed .paired-sections{display:none}
.paired-sections{padding:7px 9px}.paired-sections[hidden]{display:none}
.pair-context{font-size:10px;font-weight:700;margin-bottom:5px}
.pair-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.pair-card{min-width:0}.pair-card label{display:block;font-size:9px;margin-bottom:3px}
.pair-card select{width:100%;min-width:0;font:inherit;font-size:11px;color:#273e30;background:#fffdf6;border:1px solid #a2af9f;border-radius:4px;padding:4px 2px}
.pair-card svg{display:block;width:100%;height:76px}.pair-width{display:block;font-size:10px}.pair-shape{display:block;font-size:10px;margin-top:2px}
.pair-explanation{font-size:10px;line-height:1.35;margin-top:7px}.pair-note{display:block;font-size:8px;margin-top:4px}
@media(max-width:750px){#cutZoom:not(.paired){width:165px}#cutZoom.paired{width:276px}.paired-sections{padding:5px 7px}.pair-grid{gap:7px}.pair-context{font-size:9px}.pair-card svg{height:57px}.pair-card select{font-size:10px;padding:3px 1px}.pair-card label{font-size:8px}.pair-width,.pair-shape,.pair-explanation{font-size:9px}.pair-explanation{margin-top:4px}.pair-note{font-size:8px}}
.paired-sections{line-height:1.2}
@media(max-width:750px){
 .controls-visible .viewport:has(#cutZoom.paired:not([hidden])) iframe{height:220px;min-height:220px}
 .pair-card svg{height:49px}
 .pair-card label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
}
@media(min-width:751px){.pair-card svg{height:60px}}
/* v11: στη στήλη μαθήματος τα στοιχεία δεν συμπιέζονται (έπεφτε η υποσημείωση πάνω στην κάρτα) — κυλάει η στήλη. */
.lesson>*{flex-shrink:0}
/* v11: tablet (751–1100 px) — 6 κοπτικά σε μία σειρά χωρίς κομμένα ονόματα: χωρίς εικονίδιο, μικρότερα γράμματα. */
@media(min-width:751px) and (max-width:1100px){.controls-visible .tool-card svg{display:none}.controls-visible .tool-card b{font-size:9.5px}}