/* The desktop workspace keeps tools, the material tray and observations in fixed zones. */
.studio-page{--ink:#243c49;--muted:#7c8c96;--accent:#187d78;--line:#dfe6e9;background:#edf1f4;color:var(--ink)}
.studio-page header{height:70px;padding:0 24px;background:#142c3a;border:0;color:#fff;box-shadow:0 3px 18px #0c253220;position:relative;z-index:2}
.studio-page .brand{color:#fff;font-size:18px}.studio-page .brand-icon{background:#1a575e;border:1px solid #447d80;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff25}.studio-page .brand small{color:#99b3bd}.studio-page .project-title{color:#c0d0d6}.studio-page header .button-link,.studio-page header button{color:#dce9ed;background:#ffffff0b;border-color:#ffffff24}.studio-page header #save-status{color:#a3bfc8}.studio-page header .primary{background:#32b3a4;border-color:#32b3a4;color:#082f31}
.studio-page .app{display:grid;grid-template-columns:minmax(0,1fr) 328px;grid-template-rows:auto minmax(340px,1fr) 224px;grid-template-areas:"tools tools" "stage inspect" "tray inspect";height:calc(100vh - 70px);height:calc(100dvh - 70px);min-height:720px;gap:0;min-width:0}
.studio-page .viewport-toolbar{grid-area:tools;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 18px;height:auto;min-height:58px;background:#fff;border-bottom:1px solid var(--line);z-index:1}
.studio-page .viewport-toolbar .tool-group{gap:5px}.studio-page .viewport-toolbar button{font-size:11px;min-height:32px;border-radius:7px;white-space:nowrap}.studio-page .snap-control{font-size:11px;white-space:nowrap;padding:8px;background:#f0f5f5;color:#486569}.studio-page .drag-control{background:transparent}
.studio-page .view-switch{position:static;transform:none;display:flex;flex-wrap:wrap;box-shadow:none;background:#f3f6f7;border:1px solid #e4e9ed;border-radius:8px;padding:3px;gap:2px;align-self:center}.studio-page .view-switch button{border:0;font-size:11px;padding:6px 10px;background:transparent}.studio-page .view-switch button.active{background:#1d6266;color:#fff;box-shadow:0 2px 5px #174b5a15}
.studio-page .viewport-toolbar .library-footer{display:flex;flex-direction:row;flex-wrap:wrap;margin:0 0 0 auto;padding:0;border:0;gap:6px}.studio-page .viewport-toolbar .library-footer button{margin:0;background:#fff;min-height:30px;padding:6px 10px;font-size:10px}.studio-page #clear{color:#9b6262}
.studio-page .viewport-wrap{grid-area:stage;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:hidden;position:relative}
.studio-page #viewport{flex:1;min-width:0;min-height:260px;position:relative;height:auto;touch-action:none}.studio-page #viewport>canvas{display:block;width:100%;height:100%}.studio-page .scene-badge{left:24px;top:20px;color:#47616a;font-size:11px}.studio-page .scene-badge .live-dot{background:#2b9b8a;box-shadow:0 0 0 4px #2b9b8a12}.studio-page #snap-state{color:#7a8e91;font-size:10px}.studio-page .viewport-hint{font-size:10px;bottom:12px;color:#667c7c}.studio-page .empty-state{pointer-events:none}.studio-page .empty-state h2{font-size:27px;font-weight:500;color:#294e56;letter-spacing:1px}.studio-page .empty-state .empty-symbol{color:#2f7d7b}.studio-page .scene-footer{height:30px;min-height:30px;background:#e7ebe9;border-top:1px solid #dbe2df;font-size:10px;padding:0 20px;color:#788b8c}
.studio-page .inspector{grid-area:inspect;display:block;overflow-y:auto;overflow-x:hidden;min-width:0;min-height:0;background:#f7f9fb;padding:16px 15px;scrollbar-width:thin}.studio-page .inspector>section{background:#fff;border:1px solid #e1e8ec;border-radius:12px;padding:14px;margin:0 0 12px;box-shadow:0 3px 9px #14344503}.studio-page .inspector h2{font-size:12px;letter-spacing:.2px}.studio-page .section-heading{margin-bottom:12px}.studio-page .section-heading>span{font-size:10px;color:#8699a3}.studio-page .inspector #mini-views{margin:0 0 12px;padding:12px;background:#fff;border:1px solid #dce6eb;box-shadow:0 3px 9px #14344503}.studio-page .mini-heading{padding:0 0 11px;display:flex;align-items:center;justify-content:space-between}.studio-page .mini-heading b{font-size:12px}.studio-page .mini-heading span{font-size:9px;color:#91a0a8}.studio-page .mini-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}.studio-page .mini-grid figure{border:1px solid #dde5e9;border-radius:8px;overflow:hidden;margin:0;min-width:0}.studio-page .mini-grid figcaption{padding:7px 6px;background:#f4f7f8;display:flex;flex-direction:column;gap:2px}.studio-page .mini-grid figcaption b{font-size:10px}.studio-page .mini-grid figcaption span{font-size:8px;color:#889ca4}.studio-page .mini-surface{height:110px;background:#ebe9e1;min-width:0}.studio-page .mini-surface canvas{display:block;width:100%;height:100%}.studio-page #section-panel{margin:10px 0 0;padding:9px 0 0;border-top:1px solid #edf0f2}.studio-page #section-panel>div{display:flex;justify-content:space-between;font-size:10px}.studio-page #section-panel input{width:100%;margin:7px 0}.studio-page #section-panel p{font-size:9px;margin:0;color:#8a9da4}.studio-page .cut-indicator{font-size:8px}
.studio-page .library{grid-area:tray;border:0;border-top:1px solid #d7e0e4;border-right:1px solid var(--line);padding:13px 18px 14px;background:#fafcfd;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:38px minmax(0,1fr);gap:9px 16px}.studio-page .aside-title{display:flex;align-items:center;gap:12px;min-width:0}.studio-page .aside-title .tiny{font-size:8px;letter-spacing:1.3px;order:2;color:#9aabb5}.studio-page .aside-title h1{margin:0;font-size:17px;white-space:nowrap;display:flex;align-items:center;gap:8px}.studio-page .aside-title h1 span{font-size:10px;padding:4px 6px;background:#e6f1f1;color:#237b78}.studio-page .aside-title p{font-size:10px;margin:0;color:#8b9da5;white-space:nowrap}.studio-page .materials{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(110px,1fr));gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:4px;touch-action:pan-x pan-y;scroll-snap-type:x proximity;min-width:0}.studio-page .material{position:relative;display:flex;flex-direction:column;padding:0 0 8px;border-radius:10px;min-width:0;min-height:0;scroll-snap-align:start;touch-action:pan-x pan-y;transition:box-shadow .15s,border-color .15s;background:#fff;overflow:hidden}.studio-page .material img{height:70px;width:100%;object-fit:contain;background:#f0f1ed;flex-shrink:0}.studio-page .material .name{font-size:11px;padding:7px 8px 0;white-space:nowrap}.studio-page .material .purpose{font-size:9px;line-height:1.5;padding:3px 8px 0;min-height:0;color:#889ba4}.studio-page .material .choice-state{font-size:8px;padding:2px 8px 0}.studio-page .material .plus{top:6px;right:6px;width:20px;height:20px;background:#fff;border:1px solid #dce5e8;color:#238b80;font-size:16px}.studio-page .material.chosen{border-color:#3c9b8d;box-shadow:0 0 0 1px #3c9b8d18;background:#f5fcfa}
.studio-page .quick-adjust{background:#f4f8fa;border-color:#e1e9ee;padding:11px}.studio-page .quick-heading{margin-bottom:10px}.studio-page .quick-heading b{font-size:11px}.studio-page .quick-heading span{font-size:9px}.studio-page .quick-row{gap:6px;min-height:36px}.studio-page .quick-row>span{font-size:10px}.studio-page .quick-row button{font-size:10px;min-height:30px;padding:6px 9px}.studio-page .move-panel{background:#fff;border:1px solid #dce7ed;border-radius:10px;padding:9px;margin-bottom:8px}.studio-page .move-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#627d88}.studio-page #move-step{background:#f1f6f7;border:1px solid #d9e4e8;border-radius:6px;padding:5px;color:#35727a;font-size:11px;max-width:100px}.studio-page .direction-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,33px);gap:4px;justify-content:center;margin:8px 0}.studio-page .direction-pad button{padding:0;display:flex;align-items:center;justify-content:center;gap:4px;color:#24787b;border-color:#d7e6e8;background:#edf5f6;font-size:17px;border-radius:7px}.studio-page .direction-pad button span{font-size:9px}.studio-page #quick-move-forward{grid-area:1/2}.studio-page #quick-move-left{grid-area:2/1}.studio-page .pad-center{grid-area:2/2;display:grid;place-items:center;color:#7da4a7;font-size:21px}.studio-page #quick-move-right{grid-area:2/3}.studio-page #quick-move-back{grid-area:3/2}.studio-page .move-panel>p{font-size:9px;text-align:center;margin:5px 0 0;color:#8c9ca6}.studio-page #quick-flip[aria-pressed=true]{background:#d9efea;color:#267d74}.studio-page .material-function{border-color:#dcebe8;background:#f0f8f5}.studio-page #outliner{max-height:170px;overflow:auto}.studio-page .placement-note,.studio-page .fine{font-size:10px;line-height:1.7}.studio-page .simple-actions{gap:5px}.studio-page .simple-actions button{font-size:10px;padding:8px 6px}
/* Review frames share the same observations but have no student editing controls. */
.studio-page.review-mode .app{height:100vh;height:100dvh;min-height:500px;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tools tools" "stage inspect"}.studio-page.review-mode .viewport-toolbar{display:flex;padding:6px 9px;min-height:42px}.studio-page.review-mode .viewport-toolbar .main-tools,.studio-page.review-mode .library-footer,.studio-page.review-mode #undo,.studio-page.review-mode #redo{display:none}.studio-page.review-mode .view-switch button{font-size:9px;padding:5px}.studio-page.review-mode .inspector{padding:9px}.studio-page.review-mode .inspector>section{padding:9px;margin-bottom:8px}.studio-page.review-mode .mini-surface{height:90px}.studio-page.review-mode .mini-heading span{display:none}.studio-page.review-mode .scene-badge{top:12px;font-size:9px}.studio-page.review-mode #snap-state{font-size:9px}.studio-page.review-mode .scene-footer{font-size:8px;padding:0 8px}.studio-page.review-mode .scene-footer-end{display:none}
@media(min-width:1600px){.studio-page .app{grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto minmax(360px,1fr) 242px}.studio-page .material img{height:84px}.studio-page .material .purpose{font-size:10px}}
@media(max-width:1200px){.studio-page .project-title{display:none}.studio-page .viewport-toolbar{gap:7px 10px;padding:8px 12px}.studio-page .viewport-toolbar .library-footer{margin-left:0}.studio-page .app{grid-template-columns:minmax(0,1fr) 306px}.studio-page .aside-title .tiny{display:none}.studio-page .aside-title p{display:none}.studio-page .library{padding:11px 12px}.studio-page .materials{grid-template-columns:repeat(8,121px)}}
@media(max-width:760px){.studio-page header{height:62px;padding:0 12px;gap:8px}.studio-page .brand{font-size:15px}.studio-page .brand-icon{width:32px;height:32px;font-size:23px}.studio-page .brand small{font-size:6px;letter-spacing:.7px}.studio-page #save-status,.studio-page #save-project{display:none}.studio-page .header-actions{gap:5px}.studio-page .header-actions button,.studio-page .header-actions .button-link{font-size:10px;padding:7px}.studio-page .app{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 370px 215px auto;grid-template-areas:"tools" "stage" "tray" "inspect"}.studio-page .viewport-toolbar{padding:8px;gap:7px;justify-content:flex-start}.studio-page .viewport-toolbar .tool-group{flex-wrap:wrap;gap:4px}.studio-page .viewport-toolbar .secondary-tools{margin-left:auto}.studio-page .viewport-toolbar .view-switch{order:2;flex:1}.studio-page .viewport-toolbar .library-footer{order:3;width:100%;gap:5px}.studio-page .viewport-toolbar .library-footer button{flex:1;font-size:10px;padding:5px}.studio-page .snap-control{padding:6px;font-size:10px}.studio-page .viewport-toolbar .tool{font-size:10px;padding:5px}.studio-page .viewport-toolbar #advanced-toggle{font-size:10px;padding:5px}.studio-page .view-switch button{flex:1;min-width:0;padding:6px;font-size:10px}.studio-page .viewport-wrap{border-right:0}.studio-page .scene-badge{left:13px;top:13px}.studio-page #snap-state{display:none}.studio-page .empty-state h2{font-size:23px}.studio-page .empty-state p{font-size:11px}.studio-page .empty-state .eyebrow{font-size:8px}.studio-page .viewport-hint{font-size:8px;gap:9px}.studio-page .scene-footer{font-size:9px;padding:0 10px}.studio-page .scene-footer-end{display:none}.studio-page .library{border-right:0;grid-template-rows:29px minmax(0,1fr);padding:9px 11px;gap:8px}.studio-page .aside-title h1{font-size:15px}.studio-page .materials{grid-template-columns:repeat(8,119px);gap:8px}.studio-page .material img{height:70px}.studio-page .inspector{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px;padding:13px;overflow:visible}.studio-page .inspector>section{margin:0;min-width:0}.studio-page #mini-views,.studio-page #properties,.studio-page #classroom-panel{grid-column:1/-1}.studio-page .mini-surface{height:150px}.studio-page .mini-grid figcaption{flex-direction:row;justify-content:space-between}.studio-page .mini-grid figcaption span{font-size:9px}.studio-page .quick-adjust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 12px}.studio-page .quick-heading,.studio-page .quick-fine{grid-column:1/-1}.studio-page .move-panel{grid-row:2/7;grid-column:1}.studio-page .quick-row{grid-column:2;flex-wrap:wrap}.studio-page .scale-heading,.studio-page #quick-scale,.studio-page #shape-options{grid-column:2}.studio-page .direction-pad{grid-template-columns:repeat(3,minmax(29px,42px))}.studio-page .move-heading{gap:5px;flex-wrap:wrap}.studio-page .move-panel>p{line-height:1.5}.studio-page .inspector .assembly-log,.studio-page .inspector .basic-check{grid-column:1/-1}.studio-page.review-mode .app{grid-template-columns:1fr;grid-template-rows:auto 340px auto;grid-template-areas:"tools" "stage" "inspect";height:auto}.studio-page.review-mode .inspector{display:grid;grid-template-columns:1fr}.studio-page.review-mode .inspector>section{grid-column:1}.studio-page.review-mode .mini-surface{height:130px}}
@media(prefers-reduced-motion:reduce){.studio-page *{scroll-behavior:auto;transition:none!important}}
@media(min-width:761px){body.studio-page{height:100vh;height:100dvh;overflow:hidden}.studio-page .app{min-height:0;grid-template-rows:auto minmax(180px,1fr) 224px}.studio-page.review-mode .app{grid-template-rows:auto minmax(180px,1fr)}}
.studio-page #section-panel{display:block}.studio-page #section-panel p{margin-top:2px}
@media(min-width:761px) and (max-height:680px){.studio-page .app{grid-template-rows:auto minmax(150px,1fr) 191px}.studio-page .library{grid-template-rows:27px minmax(0,1fr);gap:7px;padding-top:9px;padding-bottom:9px}.studio-page .material img{height:53px}}
.boot-noscript{position:fixed;inset:0;z-index:40000;display:grid;place-items:center;background:#edf2f5;color:#243c49;font-size:20px;padding:25px}

@media(min-width:761px){html.lab-document{height:100vh;height:100dvh;overflow:hidden}}
.studio-page .app,.studio-page .inspector{position:relative}
@media(min-width:761px){.studio-page:not(.review-mode) .app{height:calc(100vh - 70px);height:calc(100dvh - 70px);min-height:0}}

/* Group by purpose without prescribing an assembly sequence. */
.studio-page .library{grid-template-columns:minmax(0,1fr);grid-template-rows:26px minmax(0,1fr);gap:8px;padding:10px 16px 12px}
.studio-page .aside-title .tiny{display:none}
.studio-page .materials{display:flex;align-items:stretch;gap:10px;overflow-x:auto;overflow-y:hidden;padding:0 0 6px;scroll-padding-inline:2px;overscroll-behavior-x:contain}
.studio-page .material-group{flex:var(--items) 0 0;min-width:calc(var(--items) * 106px + (var(--items) - 1) * 6px + 16px);padding:8px;border:1px solid #e0e7ec;border-radius:12px;background:#f0f5f7;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px}
.studio-page .material-group-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.studio-page .material-group-heading h2{font-size:11px;font-weight:650;letter-spacing:.2px;margin:0;color:#37535f;white-space:nowrap}
.studio-page .material-group-rule{font-size:9px;line-height:1.2;padding:4px 6px;border-radius:5px;color:#65808b;background:#e1eaef;white-space:nowrap}
.studio-page .material-group-hint{font-size:9px;line-height:1.5;color:#7d929c;margin:0;min-height:14px;white-space:nowrap}
.studio-page .material-group-items{display:grid;grid-template-columns:repeat(var(--items),minmax(0,1fr));gap:6px;flex:1;min-height:0}
.studio-page .material-group.exclusive-group{background:#fcf6ec;border-color:#e5cfa9}
.studio-page .exclusive-group .material-group-heading h2{color:#865e2f}
.studio-page .exclusive-group .material-group-rule{background:#f3e2c5;color:#825b29;font-weight:650}
.studio-page .exclusive-group .material-group-hint{color:#9b774a}
.studio-page .material{margin:0;scroll-snap-align:none;min-height:0;padding:0 0 6px;text-align:left;border:1px solid #dbe4e8;box-shadow:0 2px 4px #27414e04}
.studio-page .material img{height:58px;background:#eef1ef}
.studio-page .material .name{font-size:11px;line-height:1.4;padding:5px 7px 0}
.studio-page .material .purpose{font-size:9px;line-height:1.4;padding:2px 7px 0;white-space:nowrap}
.studio-page .material .choice-state{font-size:9px;line-height:1.4;padding:3px 7px 0;min-height:16px;color:#8497a0}
.studio-page .material.chosen .choice-state{color:#187568}
.studio-page .material.alternative .choice-state{color:#9d7139}
.studio-page .material.alternative{border-style:dashed;border-color:#d8bd96}
.studio-page .material:focus-visible{outline:3px solid #27968b;outline-offset:-3px}
.studio-page .view-settings{position:relative;flex-shrink:0;color:#536e7a}
.studio-page .view-settings>summary{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:32px;box-sizing:border-box;list-style:none;font-size:11px;cursor:pointer;border:1px solid #dce6eb;border-radius:7px;background:#fff;user-select:none}
.studio-page .view-settings>summary::-webkit-details-marker{display:none}
.studio-page .view-settings[open]>summary{background:#edf6f5;border-color:#95c5bd;color:#226c67}
.studio-page .view-settings-panel{position:absolute;right:0;top:calc(100% + 9px);width:244px;padding:15px;background:#fff;box-sizing:border-box;border:1px solid #d9e5e9;border-radius:12px;box-shadow:0 12px 40px #18384a24;z-index:15}
.studio-page .view-settings-panel>p{margin:0 0 10px;font-size:10px;color:#8a9da6}
.studio-page .view-setting-buttons{display:flex;flex-wrap:wrap;gap:5px}
.studio-page .view-setting-buttons button{padding:6px 8px;font-size:10px;border:1px solid #dde7eb}
.studio-page .view-setting-buttons button.active{background:#e6f4ef;border-color:#a7d3c6;color:#237968}
.studio-page .view-settings-panel .light-range{margin:14px 0 0;display:flex;flex-direction:column;align-items:stretch;gap:9px;font-size:11px}
.studio-page .view-settings-panel input[type=range]{width:100%;accent-color:#268577}
@media(min-width:761px){.studio-page:not(.review-mode) .app{grid-template-rows:auto minmax(180px,1fr) 250px}}
@media(min-width:761px) and (max-height:680px){.studio-page:not(.review-mode) .app{grid-template-rows:auto minmax(150px,1fr) 224px}.studio-page .library{padding:8px 12px;gap:5px;grid-template-rows:23px minmax(0,1fr)}.studio-page .material img{height:43px}.studio-page .material-group{gap:4px;padding:7px}}
@media(max-width:1100px){.studio-page .materials{gap:8px}.studio-page .material-group{flex:0 0 auto}}
@media(max-width:760px){.studio-page:not(.review-mode) .app{grid-template-rows:auto 370px 248px auto}.studio-page .library{padding:10px 11px;grid-template-rows:24px minmax(0,1fr)}.studio-page .aside-title p{display:block;font-size:9px;white-space:normal}.studio-page .material-group{min-width:calc(var(--items) * 114px + (var(--items) - 1) * 6px + 16px)}.studio-page .material img{height:59px}.studio-page .view-settings{margin-left:auto}.studio-page .view-settings-panel{width:234px}.studio-page .viewport-toolbar .view-switch{flex:1 1 190px;order:0}.studio-page .viewport-toolbar .secondary-tools{margin-left:auto}.studio-page .viewport-toolbar .library-footer{order:3}}

.studio-page .tray-scroll-tip{display:none;margin-left:auto;color:#8298a3;font-size:9px;white-space:nowrap}
@media(max-width:1400px){.studio-page .tray-scroll-tip{display:block}}
@media(max-width:400px){.studio-page .aside-title{gap:7px}.studio-page .aside-title p{display:none}}