/* Calm, readable classroom workbench. The scene remains the focus. */
.studio-page{--ink:#243b38;--muted:#75827d;--line:#e3e7e2;--accent:#246b61;--soft:#edf4f0;background:#f6f7f4;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}
.studio-page button,.studio-page .button-link{border-color:#dce4df;color:#40564e;transition:background .16s,border-color .16s,box-shadow .16s;cursor:pointer}
.studio-page button:hover{background:#f0f5f1;border-color:#8cac9f}.studio-page button:focus-visible,.studio-page input:focus-visible{outline:2px solid #3c8476;outline-offset:3px}
.studio-page button:disabled{cursor:default;opacity:.42}.studio-page .primary{background:var(--accent);border-color:var(--accent);color:white}.studio-page .primary:hover{background:#205c54;color:white}
.studio-page header{height:76px;padding:0 25px;background:#fff;border-bottom-color:#dee5df;gap:22px}.studio-page .brand{color:#2a4840;font-size:19px;letter-spacing:.5px}.studio-page .brand-icon{width:40px;height:40px;border-radius:12px;color:#fff;background:#246b61;font-size:28px;box-shadow:0 4px 12px #225c5420}.studio-page .brand small{font-size:8px;letter-spacing:1.6px;color:#7d8d86}.studio-page .project-title{font-size:12px;color:#7c8983}.studio-page .header-actions button,.studio-page .header-actions .button-link{padding:10px 14px;border-radius:8px}.studio-page #save-status{color:#7a8b83}
.studio-page .app{grid-template-columns:268px minmax(0,1fr) 296px;min-width:0}
.studio-page .library{background:#fbfcf9;padding:23px 16px 16px}.studio-page .aside-title .tiny{font-size:9px;letter-spacing:1.4px;color:#7c9087}.studio-page h1{font-size:21px;letter-spacing:-.4px;margin:9px 0}.studio-page h1 span{background:#eaf0e9;padding:5px 8px;border-radius:5px;font-size:10px;color:#5f796b;letter-spacing:0}.studio-page .aside-title p{font-size:11px;line-height:1.8;color:#718079;margin-bottom:15px}
.studio-page .choice-guide{background:#edf3ed;border:1px solid #dde7dc;border-radius:10px;margin-bottom:14px;padding:11px 12px;display:grid;gap:7px;color:#697e6b}.studio-page .choice-guide>b{font-size:11px;color:#3c654d;display:flex;gap:6px}.studio-page .choice-guide>span{font-size:10px;display:flex;justify-content:space-between}.studio-page .choice-guide em{font-style:normal;color:#3f7057;font-weight:500}.studio-page .choice-guide small{font-size:9px;color:#7e8d7e;line-height:1.7}
.studio-page .materials{gap:10px}.studio-page .material{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:1px solid #e0e5df;background:#fff;border-radius:10px;padding:0 0 9px;box-shadow:0 2px 5px #32463103}.studio-page .material img{height:87px;background:#f2f0eb;object-fit:contain}.studio-page .material .role{order:0;padding:9px 9px 0;font-size:8px;color:#628674;letter-spacing:.3px;line-height:1.3}.studio-page .material .name{padding:4px 9px 0;font-size:12px;line-height:1.55;color:#334e43;font-weight:650}.studio-page .material .purpose{font-size:9px;line-height:1.65;color:#7b867e;padding:5px 9px 0;min-height:34px}.studio-page .material .plus{width:21px;height:21px;display:grid;place-items:center;top:7px;right:7px;background:#ffffffd9;border:1px solid #e5e9e2;border-radius:50%;font-size:17px;color:#5b7d6a;line-height:1}.studio-page .material .choice-state{font-size:8px;color:#9b7648;padding:4px 9px 0;min-height:0}.studio-page .material .choice-state:empty{display:none}.studio-page .material:hover{transform:none;box-shadow:0 5px 16px #244e3b12;border-color:#8baa99}.studio-page .material.choice-active{background:#f4f9f4;border-color:#729781}.studio-page .library-footer{border-top:1px solid #e4e9e0;margin-top:15px;padding-top:13px;gap:7px}.studio-page .library-footer button{font-size:11px;background:#fff;min-height:34px}.studio-page .library-footer .text-button{background:none;min-height:26px;color:#89968b}
.studio-page .viewport-wrap,.studio-page #viewport{background:#eeeae3}.studio-page .viewport-toolbar{height:54px;min-height:54px;background:#fafbf9;padding:0 12px}.studio-page .tool-group button{padding:8px 8px;color:#7d8981}.studio-page .tool-group button.active,.studio-page #advanced-toggle.active{background:#e8f0e9;color:#31674d}.studio-page .snap-control{font-size:11px;color:#4b6e5b;padding:7px 9px;background:#edf3ed;border-radius:6px}.studio-page input{accent-color:#377a64}.studio-page .scene-badge{top:23px;left:22px;color:#57645c;font-size:10px;letter-spacing:.2px}.studio-page #snap-state{color:#879087}.studio-page .view-switch{background:#ffffffd9;box-shadow:0 3px 10px #3e51450a;left:20px;top:48px;border-color:#dfe5dc}.studio-page .view-switch button{color:#718074;font-size:10px;padding:7px 10px}.studio-page .view-switch button.active{background:#426952;color:#fff}.studio-page .model-label{font-size:10px;background:#fffffff0;border-color:#dce3d7;color:#64795b;border-radius:5px;padding:5px 9px;box-shadow:0 3px 12px #334e2520}.studio-page .model-label.selected{border-color:#567b5e;color:#375d40;background:#f7fbf3}.studio-page .viewport-hint{font-size:9px;color:#8d958a}.studio-page .viewport-hint b{color:#647860}
.studio-page #mini-views{padding:13px 16px 10px;background:#f9faf6;border-top-color:#e0e5dc}.studio-page .mini-heading{font-size:11px;color:#4e6856}.studio-page .mini-heading>span{color:#8b958b;font-size:9px}.studio-page .mini-grid{gap:12px}.studio-page .mini-grid figure{border-color:#dfe4d9;border-radius:9px;background:#eeeae3;box-shadow:0 2px 5px #253f2705}.studio-page .mini-grid figcaption{background:#ffffffd9;color:#4f6d55;font-size:10px;padding:7px 10px}.studio-page .mini-grid figcaption span{color:#929c90}.studio-page .mini-surface{height:132px}.studio-page #section-panel{padding:9px 0 0;grid-template-columns:125px 1fr;gap:3px 13px}.studio-page #section-panel>div{font-size:10px;color:#657f5f}.studio-page #section-panel p{color:#929f8b}.studio-page .scene-footer{background:#f8faf5;border-color:#e3e8df;color:#88937f;gap:15px;font-size:9px}.studio-page .timeline-bar{background:#fff;height:44px;color:#809079;font-size:10px;gap:13px}.studio-page .timeline-bar b{color:#5d7854}.studio-page .step-number{width:20px;height:20px;background:#f4f7ef;border-color:#e3e8da}.studio-page .step-line{width:20px;background:#dce5d2}
.studio-page .empty-state{position:absolute;inset:20% 15% 16%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;color:#5d6b5a}.studio-page .empty-state[hidden]{display:none}.studio-page .empty-symbol{width:62px;height:62px;font-size:43px;line-height:1;display:grid;place-items:center;background:#ffffff6b;border:1px solid #ffffffba;border-radius:17px;color:#6b896a;box-shadow:0 15px 40px #65734b0d;margin-bottom:19px}.studio-page .eyebrow{font-size:8px;letter-spacing:2px;color:#929b87}.studio-page .empty-state h2{font-size:24px;font-weight:500;letter-spacing:1px;margin:13px 0 9px}.studio-page .empty-state p{font-size:12px;line-height:1.9;color:#87917e;margin:0}.studio-page .empty-tip{margin-top:24px;font-size:10px;background:#ffffff7d;border:1px solid #ffffffa1;border-radius:20px;padding:8px 15px;color:#7b8e6e}
.studio-page .inspector{padding:23px 18px 16px;background:#fff}.studio-page .section-heading{margin-bottom:12px}.studio-page .section-heading h2{font-size:13px;color:#3f5d49}.studio-page .section-heading>span{color:#94a18b;font-size:9px}.studio-page .inspector section{border-color:#e7ebe2;margin-bottom:20px;padding-bottom:20px}.studio-page #outliner{color:#96a18d;font-size:11px;line-height:1.7;max-height:185px;overflow-y:auto}.studio-page .object-row{border-radius:6px;font-size:11px;padding:8px}.studio-page .object-row.selected{background:#edf4e9;color:#4e7544}.studio-page .object-row>span:last-child{color:#9daa91}.studio-page #selected-title{font-size:15px}.studio-page #selected-desc{font-size:10px;color:#92a086;line-height:1.8;margin:0 0 10px}.studio-page .material-function{display:grid;gap:5px;border-left:2px solid #87a26e;padding:8px 10px;background:#f5f8ee;border-radius:0 6px 6px 0}.studio-page .material-function span{font-size:9px;color:#8b9d75}.studio-page .material-function b{font-size:11px;color:#617a4d;line-height:1.65;font-weight:550}.studio-page .material-details{font-size:10px;color:#8d9781;line-height:1.85;margin:10px 0 14px}.studio-page .material-details summary{cursor:pointer;color:#778e63}.studio-page .material-details p{margin:8px 0}.studio-page #selected-safety{color:#a08a67}
.studio-page .quick-adjust{margin:14px 0 12px}.studio-page .quick-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.studio-page .quick-heading b{font-size:11px;font-weight:600;color:#677e55}.studio-page .quick-heading>span{font-size:8px;color:#a2ac96}.studio-page .quick-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0;gap:7px;font-size:10px;color:#849477}.studio-page .quick-row>div{display:flex;gap:5px}.studio-page .quick-row button{padding:6px 8px;min-width:59px;font-size:10px;border-radius:6px;background:#fbfcf8}.studio-page .scale-heading{display:flex;justify-content:space-between;font-size:10px;color:#849477;margin-top:12px}.studio-page .scale-heading output{color:#6b8559;font-variant-numeric:tabular-nums}.studio-page #quick-scale{width:100%;height:17px;margin:7px 0 0;cursor:pointer}.studio-page .variant-buttons{display:flex;gap:5px;margin-top:8px}.studio-page .variant-buttons button{flex:1;padding:7px 6px;font-size:10px;border-radius:6px;background:#fafcf6}.studio-page .variant-buttons button.active{background:#eaf1e0;border-color:#99b77b;color:#5d7d41}.studio-page .quick-fine{font-size:9px;color:#a6b099;line-height:1.7;margin:10px 0 0}.studio-page .simple-actions{gap:6px}.studio-page .simple-actions button{font-size:10px;padding:8px 7px;border-radius:6px}.studio-page .placement-note{color:#99a88a;font-size:9px;line-height:1.7}.studio-page .toggle-row{padding:10px 0 0;margin-top:5px;color:#849676;font-size:10px}.studio-page .fine{font-size:9px;color:#99a88b;line-height:1.8}.studio-page .assembly-log ol{font-size:10px;color:#849477}.studio-page .review-button{background:#eff5e6;color:#66884a;border-color:#dfeacd;border-radius:8px}.studio-page #join-form input{background:#fbfcf8;border-color:#e0e8d8}.studio-page #join-form label{color:#7e916d;font-size:10px}.studio-page .classroom-panel .primary{border-radius:7px}.studio-page #loading{background:#eeeae3;color:#687c5c}.studio-page #toast{background:#345640ed;border-radius:9px;padding:11px 17px}.studio-page #snap-notice{background:#f8fbee;color:#4f6e3b;border-color:#b8cba4}
@media(min-width:821px){.studio-page:not(.review-mode) .app{height:calc(100dvh - 76px);min-height:690px}.studio-page:not(.review-mode) #viewport{min-height:300px}.studio-page .project-title{white-space:nowrap}.studio-page .scene-footer-end{display:none}}
@media(min-width:1550px){.studio-page .app{grid-template-columns:290px minmax(0,1fr) 310px}.studio-page .material img{height:100px}.studio-page .material .purpose{font-size:10px}.studio-page .mini-surface{height:158px}}
@media(max-width:1190px) and (min-width:821px){.studio-page .app{grid-template-columns:235px minmax(0,1fr) 265px}.studio-page .library{padding:19px 12px}.studio-page .inspector{padding:21px 14px}.studio-page .material .name{font-size:11px}.studio-page .material img{height:76px}.studio-page .project-title{display:none}.studio-page .viewport-toolbar{flex-wrap:wrap;min-height:82px;align-content:center;gap:3px}.studio-page .main-tools{width:100%}.studio-page .secondary-tools{margin-left:auto}.studio-page .view-switch{left:12px}.studio-page .view-switch button{padding:6px 6px}.studio-page .scene-badge{left:14px}.studio-page #snap-state{display:none}}
@media(max-width:820px){.studio-page header{height:65px;padding:0 15px;gap:10px}.studio-page .project-title,.studio-page #save-status{display:none}.studio-page .brand{font-size:16px}.studio-page .brand small{display:none}.studio-page .header-actions button{font-size:11px;padding:9px}.studio-page .app{grid-template-columns:210px minmax(0,1fr)}.studio-page .library{padding:17px 12px}.studio-page .material img{height:70px}.studio-page .material .name{font-size:10px;padding-left:7px;padding-right:7px}.studio-page .material .role,.studio-page .material .purpose{padding-left:7px;padding-right:7px}.studio-page .material .purpose{font-size:8px}.studio-page .materials{gap:7px}.studio-page .inspector{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:22px}.studio-page .inspector section{min-width:0}.studio-page .viewport-wrap{min-width:0}.studio-page .viewport-toolbar{min-height:90px;height:auto;flex-wrap:wrap;gap:0;padding:8px 10px}.studio-page .main-tools{flex-wrap:wrap}.studio-page .scene-badge{left:13px}.studio-page .scene-badge #snap-state{display:none}.studio-page .view-switch{left:10px;gap:1px;right:10px;max-width:unset}.studio-page .view-switch button{font-size:9px;padding:7px 6px}.studio-page .empty-state{inset:22% 7% 15%}.studio-page .empty-state h2{font-size:20px}.studio-page .empty-state p{font-size:11px}.studio-page .mini-surface{height:135px}.studio-page .mini-heading>span{font-size:8px}.studio-page .timeline-bar{display:none}}
@media(max-width:520px){.studio-page header{padding:0 10px;height:64px;gap:7px}.studio-page .brand{font-size:14px;gap:7px}.studio-page .brand-icon{width:31px;height:31px;font-size:23px;border-radius:9px}.studio-page .header-actions{gap:4px}.studio-page .header-actions button,.studio-page .header-actions .button-link{font-size:10px;padding:8px 7px;white-space:nowrap}.studio-page .app{display:flex}.studio-page .viewport-toolbar{min-height:88px;padding:7px 11px}.studio-page #viewport{height:405px;min-height:405px}.studio-page .scene-badge{top:17px}.studio-page .view-switch{top:42px;right:auto}.studio-page .view-switch button{padding:7px 8px;font-size:10px}.studio-page .empty-state h2{font-size:21px}.studio-page .empty-symbol{width:49px;height:49px;font-size:35px;margin-bottom:16px}.studio-page .empty-tip{margin-top:18px}.studio-page .mini-surface{height:117px}.studio-page #mini-views{padding:12px}.studio-page .mini-grid{gap:9px}.studio-page .mini-grid figcaption{padding:7px 9px}.studio-page #section-panel{grid-template-columns:118px 1fr}.studio-page .scene-footer{font-size:8px;height:29px;gap:12px;padding:0 12px}.studio-page .library{padding:16px 10px;background:#fafbf6}.studio-page .aside-title{display:block;padding:0 6px}.studio-page .aside-title .tiny,.studio-page .aside-title p,.studio-page .choice-guide{display:none}.studio-page h1{font-size:15px;margin:0 0 10px}.studio-page h1 span{padding:2px 7px;font-size:9px}.studio-page .materials{display:flex;gap:9px;padding:0 5px 6px;overflow-x:auto;overscroll-behavior-x:contain}.studio-page .material{min-width:128px;max-width:128px;flex-shrink:0}.studio-page .material img{height:81px}.studio-page .material .name{font-size:12px}.studio-page .material .role{font-size:8px}.studio-page .material .purpose{font-size:9px;min-height:34px}.studio-page .library-footer{flex-wrap:wrap;flex-direction:row;margin-top:8px;padding-top:10px;gap:7px}.studio-page .library-footer button{flex:1 0 auto;font-size:10px;padding:7px 9px;min-height:32px}.studio-page .inspector{display:block;padding:22px 18px}.studio-page .inspector #properties{padding:16px;background:#fafcf6;border:1px solid #e6ecd9;border-radius:11px}.studio-page .quick-row button{min-width:83px;padding:9px 11px}.studio-page .quick-row{font-size:11px}.studio-page .quick-fine{font-size:10px}.studio-page .material-details{font-size:11px}.studio-page #outliner{max-height:140px}.studio-page .viewport-hint{gap:13px;font-size:8px}}
/* Teacher snapshots reuse the workbench without exposing editing controls. */
.studio-page.review-mode .app{grid-template-columns:minmax(0,1fr) 205px;height:100dvh;min-height:500px}.studio-page.review-mode #empty-state{display:none}.studio-page.review-mode .viewport-toolbar{min-height:43px;height:43px;justify-content:flex-end;flex-wrap:nowrap}.studio-page.review-mode .inspector{display:block;grid-column:auto;padding:14px 12px;overflow-y:auto}.studio-page.review-mode .mini-surface{height:113px}.studio-page.review-mode #viewport{min-height:180px}.studio-page.review-mode .scene-footer-end{display:none}.studio-page.review-mode .viewport-wrap{height:100%;min-height:0}.studio-page.review-mode .view-switch{top:40px}.studio-page.review-mode .inspector section{margin-bottom:16px;padding-bottom:16px}
@media(max-width:820px){.studio-page.review-mode .app{display:grid;grid-template-columns:minmax(0,1fr) 175px}.studio-page.review-mode #viewport{flex:1;height:auto;min-height:180px}.studio-page.review-mode .mini-surface{height:100px}.studio-page.review-mode .mini-grid figcaption{font-size:9px;padding:5px 7px}}
@media(max-width:520px){.studio-page.review-mode .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 165px;min-height:590px}.studio-page.review-mode .inspector{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;padding:11px;border-top:1px solid #dfe6d8}.studio-page.review-mode .inspector>section{margin:0;padding:0}.studio-page.review-mode .assembly-log ol{max-height:93px}.studio-page.review-mode #outliner{max-height:100px}.studio-page.review-mode #mini-views{padding:9px}.studio-page.review-mode .scene-footer{height:25px}}
@media(prefers-reduced-motion:reduce){.studio-page button{transition:none}}
@media print{.studio-page .empty-state{display:none}}
.studio-page .material .purpose{font-size:10px;line-height:1.65;min-height:38px}.studio-page .material.chosen{border-color:#7c9e79;background:#f5f9ed}.studio-page input[type=range]{appearance:none;-webkit-appearance:none;height:4px;border-radius:4px;background:#dce5ce;outline-offset:6px}.studio-page input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;border:2px solid white;background:#6c9252;box-shadow:0 1px 4px #4c652840;cursor:grab}.studio-page input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:2px solid white;background:#6c9252;cursor:grab}.studio-page #quick-scale{height:4px;margin:14px 0 10px}
@media(max-width:820px){.studio-page .material .purpose{font-size:9px}}