:root{--ns-star-orange: #F2994A;--ns-star-orange-hover: #EB8C3A;--ns-tech-blue: #1E40AF;--ns-tech-blue-hover: #1D4ED8;--ns-primary: #1E40AF;--ns-primary-hover: #1D4ED8;--ns-accent: #F2994A;--ns-accent-hover: #EB8C3A;--ns-success: #10B981;--ns-danger: #EF4444;--ns-info: #0284C7;--ns-bg-main: #F8FAFC;--ns-bg-surface: #FFFFFF;--ns-bg-glass: rgba(255, 255, 255, .88);--ns-bg-glass-card: rgba(255, 255, 255, .95);--ns-bg-glass-hover: #F1F5F9;--ns-border-glass: #E2E8F0;--ns-border-glass-hover: #CBD5E1;--ns-border-brand-glow: rgba(242, 153, 74, .5);--ns-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--ns-text-title: #0F172A;--ns-text-main: #1E293B;--ns-text-muted: #475569;--ns-text-dim: #64748B;--ns-font-xs: 12px;--ns-font-sm: 14px;--ns-font-md: 16px;--ns-font-lg: 18px;--ns-font-xl: 22px;--ns-font-2xl: 28px;--ns-font-3xl: 36px;--ns-radius-sm: 8px;--ns-radius-md: 12px;--ns-radius-lg: 18px;--ns-radius-xl: 26px;--ns-radius-full: 9999px;--ns-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--ns-shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--ns-shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);--ns-shadow-brand: 0 4px 20px rgba(242, 153, 74, .25);--ns-backdrop-blur: blur(12px);--ns-transition-fast: .15s ease;--ns-transition-normal: .25s ease}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--ns-bg-main);color:var(--ns-text-main);font-family:var(--ns-font-family);font-size:var(--ns-font-md);-webkit-font-smoothing:antialiased}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.ns-glass-panel{background:var(--ns-bg-glass);backdrop-filter:var(--ns-backdrop-blur);-webkit-backdrop-filter:var(--ns-backdrop-blur);border:1px solid var(--ns-border-glass);box-shadow:var(--ns-shadow-md);border-radius:var(--ns-radius-lg);color:var(--ns-text-main);z-index:10}.ns-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;font-size:var(--ns-font-md);font-weight:600;border-radius:var(--ns-radius-md);border:1px solid var(--ns-border-glass);background:var(--ns-bg-surface);color:var(--ns-text-title);cursor:pointer;transition:all var(--ns-transition-fast);box-shadow:var(--ns-shadow-sm)}.ns-btn:hover{background:var(--ns-bg-glass-hover);border-color:var(--ns-border-glass-hover);transform:translateY(-1px);box-shadow:var(--ns-shadow-md)}.ns-btn:active{transform:translateY(1px)}.ns-btn-primary{background:var(--ns-primary);border-color:var(--ns-primary);color:#fff}.ns-btn-primary:hover{background:var(--ns-primary-hover);box-shadow:0 4px 16px #1e40af59}.ns-btn-accent{background:var(--ns-accent);border-color:var(--ns-accent);color:#fff}.ns-btn-accent:hover{background:var(--ns-accent-hover);box-shadow:var(--ns-shadow-brand)}.ns-zen-return-btn{position:fixed;bottom:24px;right:24px;background:var(--ns-bg-surface);border:2px solid var(--ns-accent);color:var(--ns-text-title);padding:10px 18px;border-radius:var(--ns-radius-full);font-size:var(--ns-font-md);font-weight:700;cursor:pointer;z-index:9999;box-shadow:var(--ns-shadow-brand);transition:all var(--ns-transition-fast);display:flex;align-items:center;gap:6px}.ns-zen-return-btn:hover{transform:scale(1.05);background:var(--ns-accent);color:#fff}.ns-metric-value{font-size:var(--ns-font-2xl);font-weight:800;color:var(--ns-tech-blue);line-height:1.2}.ns-metric-unit{font-size:var(--ns-font-sm);color:var(--ns-text-muted);font-weight:600;margin-left:2px}.ns-karaoke-word{transition:color .15s ease,background .15s ease;padding:0 2px;border-radius:4px}.ns-karaoke-active{color:#fff!important;background-color:var(--ns-accent)!important;font-weight:700}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--ns-border-glass);background:var(--ns-bg-surface);border-radius:var(--ns-radius-md);min-height:48px;padding:10px 16px;font-weight:650;font-size:max(18px,var(--ns-font-lg))}button:hover:not(:disabled){background:var(--ns-bg-glass-hover);border-color:var(--ns-border-glass-hover)}button:focus-visible,a:focus-visible{outline:3px solid var(--ns-tech-blue);outline-offset:4px}button:disabled{opacity:.45;cursor:default}body{display:flex;flex-direction:column}.lab-header{height:56px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 24px;background:var(--ns-bg-surface);border-bottom:1px solid var(--ns-border-glass);z-index:2}.portal-link{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ns-text-muted);text-decoration:none;font-size:26px;border-radius:var(--ns-radius-md)}.brand{height:30px;width:115px;object-fit:contain}.brand-link{display:flex;align-items:center;min-height:44px}.header-divider{height:22px;border-left:1px solid var(--ns-border-glass)}.lab-name{font-size:var(--ns-font-lg);font-weight:700}nav{display:flex;gap:8px;margin-left:auto}nav button{min-width:44px;min-height:44px;padding:7px 12px;border-color:transparent;font-size:22px}nav #btn-focus{font-size:var(--ns-font-lg);display:flex;align-items:center;gap:9px;border-color:var(--ns-border-glass)}button[aria-pressed=true]{border-color:var(--ns-tech-blue);background:color-mix(in srgb,var(--ns-tech-blue) 7%,var(--ns-bg-surface))}#btn-audio[aria-pressed=true]{border-color:transparent;background:transparent}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;padding:26px 28px 16px;max-width:1800px;width:100%;align-self:center}.object-panel{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:7px 0}.eyebrow,.scene-tag,.result-caption{color:var(--ns-text-muted);font-size:12px;font-weight:750;letter-spacing:1.8px}.eyebrow{color:var(--ns-tech-blue)}h1{font-size:clamp(26px,2.5vw,34px);color:var(--ns-text-title);letter-spacing:-.9px;margin:8px 0}.panel-heading p{color:var(--ns-text-muted);font-size:var(--ns-font-lg);line-height:1.5}.object-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.object-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:13px 6px;border-radius:var(--ns-radius-lg);position:relative;box-shadow:var(--ns-shadow-sm)}.object-card svg{width:72px;height:72px}.object-card[aria-pressed=true]{border:2px solid var(--ns-tech-blue);padding:12px 5px}.object-card[aria-pressed=true]:after{content:"✓";position:absolute;top:6px;right:8px;color:var(--ns-tech-blue);font-size:14px}.size-picker{border:0}.size-picker legend{font-size:var(--ns-font-lg);font-weight:650;margin-bottom:10px}.size-picker>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.size-picker button{display:flex;align-items:center;justify-content:center;gap:12px}.size-picker button span{font-size:11px}.size-picker .large-dot{font-size:21px}.environment-controls{display:grid;gap:9px}.environment-controls label{display:grid;gap:4px;color:var(--ns-text-muted);font-size:16px;font-weight:650}.environment-controls select{width:100%;min-height:44px;padding:7px 10px;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-md);color:var(--ns-text-title);background:var(--ns-bg-surface);font:inherit;font-size:18px}.environment-controls select:focus-visible{outline:3px solid var(--ns-tech-blue);outline-offset:2px}.teacher-hint{display:flex;align-items:center;gap:11px;border-top:1px solid var(--ns-border-glass);padding-top:19px;margin-top:auto;color:var(--ns-text-muted)}.teacher-hint>span{color:var(--ns-star-orange);font-size:28px}.teacher-hint p{line-height:1.5;font-size:16px}.experiment{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ns-bg-surface);border:1px solid var(--ns-border-glass);border-radius:28px;overflow:hidden;box-shadow:var(--ns-shadow-sm)}#scene{position:absolute;top:86px;right:0;bottom:108px;left:0;background:radial-gradient(ellipse at 50% 48%,var(--ns-bg-surface) 25%,var(--ns-bg-main) 95%)}#scene canvas{display:block;width:100%;height:100%;touch-action:none}.direct-enabled #scene canvas{cursor:default}.direct-enabled #scene.object-hover canvas{cursor:grab}.direct-enabled #scene.object-held canvas{cursor:grabbing}#scene:focus-visible{outline:4px solid var(--ns-tech-blue);outline-offset:-5px}.scene-top{position:absolute;top:20px;left:24px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:1;pointer-events:none}.scene-tag{display:flex;gap:9px;align-items:center}.environment-status{padding:6px 10px;border-radius:999px;color:var(--ns-text-title);background:color-mix(in srgb,var(--ns-bg-surface) 88%,transparent);font-size:18px;font-weight:650}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ns-info)}#btn-camera{pointer-events:auto;border:0;background:var(--ns-bg-glass);font-size:18px;color:var(--ns-text-muted)}.view-actions{display:flex;gap:5px;flex-shrink:0;pointer-events:auto}.view-actions button{min-height:44px;font-size:18px}.view-actions button[hidden]{display:none}#btn-conclusion[aria-pressed=true]{border-color:var(--ns-tech-blue);background:color-mix(in srgb,var(--ns-tech-blue) 14%,var(--ns-bg-surface))}.result{position:absolute;top:85px;left:50%;transform:translate(-50%);display:flex;gap:13px;align-items:center;z-index:1;width:max-content;max-width:calc(100% - 40px);min-width:0;pointer-events:none}.direct-enabled .result{top:120px;left:24px;transform:none;max-width:min(360px,calc(100% - 48px))}.result>div{min-width:0}#result-icon{flex:0 0 48px;width:48px;height:48px;border:1px solid var(--ns-border-glass);border-radius:50%;display:grid;place-items:center;font-size:28px;color:var(--ns-tech-blue);background:var(--ns-bg-glass)}.result strong{display:block;color:var(--ns-text-title);font-size:clamp(21px,2.3vw,30px);margin-top:4px}.result-caption{font-size:10px}.narration{max-width:620px;margin-top:5px;color:var(--ns-text-title);font-size:18px;font-weight:650;line-height:1.25;pointer-events:none}.narration mark{color:inherit}.activity-bar{position:absolute;right:18px;bottom:116px;z-index:2;display:flex;align-items:center;gap:10px;max-width:calc(100% - 36px);padding:8px 10px;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-lg);background:color-mix(in srgb,var(--ns-bg-surface) 92%,transparent);box-shadow:var(--ns-shadow-sm)}.activity-bar[hidden]{display:none}.activity-bar>strong{font-size:18px;color:var(--ns-text-title)}.activity-bar>div{display:flex;gap:8px}.activity-bar button{min-height:44px;padding:7px 10px;font-size:18px}.activity-start{width:100%;margin-top:14px}.experiment.activity-active #scene{bottom:180px}.experiment.activity-active .scene-bottom{display:none}.result[data-result=float] #result-icon{background:var(--ns-tech-blue);color:var(--ns-bg-surface)}.result[data-result=sink] #result-icon{background:var(--ns-star-orange);color:var(--ns-text-title)}.scene-bottom{display:flex;justify-content:space-between;position:absolute;bottom:117px;left:24px;right:24px;color:var(--ns-text-muted);font-size:13px;pointer-events:none}.water-label{font-size:16px;font-weight:600;color:var(--ns-info)}.actions{display:flex;justify-content:center;align-items:center;gap:12px;height:100px;margin-top:auto;padding:16px;border-top:1px solid var(--ns-border-glass);background:var(--ns-bg-surface);z-index:1}.actions button{min-height:56px;display:flex;align-items:center;justify-content:center;gap:9px}.actions button[hidden]{display:none}.actions .primary{background:var(--ns-tech-blue);color:var(--ns-bg-surface);border-color:var(--ns-tech-blue);padding:12px 28px;font-size:21px;box-shadow:var(--ns-shadow-md)}.actions .primary:hover:not(:disabled){background:var(--ns-tech-blue-hover)}.direct-guide{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0;color:var(--ns-text-title);text-align:center}.direct-guide b{font-size:20px}.direct-guide span{color:var(--ns-text-muted);font-size:14px}.direct-guide[hidden]{display:none}.primary>span{font-size:25px}.lab-footer{display:flex;justify-content:space-between;padding:0 30px 14px;color:var(--ns-text-dim);font-size:11px;letter-spacing:1px}.lab-footer b{margin:0 8px;color:var(--ns-star-orange)}dialog{margin:auto;width:min(920px,calc(100vw - 24px));max-height:90dvh;overflow:auto;padding:0;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-xl);color:var(--ns-text-main);background:var(--ns-bg-surface);box-shadow:var(--ns-shadow-lg)}dialog::backdrop{background:color-mix(in srgb,var(--ns-text-title) 35%,transparent)}.dialog-heading{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 18px 10px 24px;border-bottom:1px solid var(--ns-border-glass);background:color-mix(in srgb,var(--ns-bg-surface) 96%,transparent)}.dialog-content{padding:18px clamp(18px,3vw,30px) 28px}#btn-close-help{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;color:var(--ns-tech-blue);background:color-mix(in srgb,var(--ns-tech-blue) 10%,var(--ns-bg-surface));border-color:transparent;border-radius:50%}#btn-close-help:hover:not(:disabled){color:var(--ns-text-title);background:color-mix(in srgb,var(--ns-tech-blue) 18%,var(--ns-bg-surface));border-color:transparent}#btn-close-help svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round}dialog h2{font-size:26px}dialog h3{margin-top:18px;font-size:20px}dialog p,dialog li{line-height:1.7;font-size:18px;margin-top:12px}dialog ol{padding-left:23px;margin-top:16px}dialog a{color:var(--ns-tech-blue)}.draft-label{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:var(--ns-radius-md);color:var(--ns-text-title);background:color-mix(in srgb,var(--ns-star-orange) 18%,var(--ns-bg-surface));font-size:13px;font-weight:750;letter-spacing:.2px}.help-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;list-style:none}.help-steps li{min-height:92px;margin:0;padding:12px;display:flex;align-items:center;gap:12px;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-lg);background:var(--ns-bg-main)}.help-steps svg{flex:0 0 48px;width:48px;height:48px;fill:none;stroke:var(--ns-tech-blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.help-steps span,.help-steps b,.help-steps small{display:block}.help-steps b{color:var(--ns-text-title);font-size:19px}.help-steps small{margin-top:2px;color:var(--ns-text-muted);font-size:16px;line-height:1.3}.voice-note{padding:10px 12px;border-left:4px solid var(--ns-tech-blue);border-radius:var(--ns-radius-md);background:var(--ns-bg-main);color:var(--ns-text-muted)}.learning-drafts{display:grid;gap:12px;margin-top:22px}.learning-drafts details{border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-lg);background:var(--ns-bg-main);overflow:hidden}.learning-drafts summary{min-height:48px;display:flex;align-items:center;padding:10px 14px;color:var(--ns-text-title);font-size:18px;font-weight:750;cursor:pointer}.learning-drafts summary:focus-visible,.teacher-notes summary:focus-visible{outline:3px solid var(--ns-tech-blue);outline-offset:-3px}.activity-copy{padding:0 14px 16px;border-top:1px solid var(--ns-border-glass)}.activity-copy p{font-size:18px}.activity-end{color:var(--ns-text-muted)}.teacher-notes{margin-top:16px;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-lg);overflow:hidden}.teacher-notes summary{min-height:48px;padding:11px 14px;display:flex;align-items:center;color:var(--ns-text-title);font-size:18px;font-weight:750;cursor:pointer;background:var(--ns-bg-main)}.teacher-notes-copy{padding:0 16px 18px;border-top:1px solid var(--ns-border-glass)}.prototype-label{display:block;margin-top:20px;font-size:13px;color:var(--ns-text-muted)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#scene-error{position:absolute;z-index:2;inset:30% 10% auto;text-align:center;background:var(--ns-bg-surface);padding:20px;border-radius:var(--ns-radius-lg)}#scene-error p{margin:15px 0}body.focus .object-panel,body.focus .lab-footer{display:none}body.focus.controls-open .object-panel{position:fixed;z-index:12;left:12px;right:12px;bottom:88px;display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);max-height:min(58dvh,520px);overflow:auto;padding:14px;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-xl);background:color-mix(in srgb,var(--ns-bg-surface) 96%,transparent);box-shadow:var(--ns-shadow-lg)}body.focus.controls-open .panel-heading,body.focus.controls-open .teacher-hint{display:none}body.focus.controls-open .object-grid{grid-column:1;grid-row:1 / span 2;grid-template-columns:repeat(4,minmax(100px,1fr))}body.focus.controls-open .size-picker,body.focus.controls-open .environment-controls{grid-column:2}body.focus .workspace{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3;display:block;width:100vw;height:100dvh;min-height:100dvh;max-width:none;margin:0;padding:0;align-self:stretch}body.focus .experiment{width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0;box-shadow:none}body.focus #scene{top:0;right:0;bottom:0;left:0}body.focus .lab-header{position:fixed;inset:0 0 auto;z-index:10;width:100%;border:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--ns-bg-surface) 94%,transparent),transparent);pointer-events:none}body.focus .lab-header>*,body.focus .lab-header nav button{pointer-events:auto}body.focus .scene-top{top:64px}body.focus .result{top:72px}body.focus .actions{position:absolute;bottom:10px;left:50%;width:max-content;max-width:calc(100% - 20px);height:auto;margin:0;padding:6px;transform:translate(-50%);border:0;border-radius:var(--ns-radius-lg);background:color-mix(in srgb,var(--ns-bg-surface) 88%,transparent);box-shadow:var(--ns-shadow-sm);pointer-events:none}body.focus .actions button{pointer-events:auto}body.focus .actions .direct-guide{display:none}body.focus .scene-bottom{bottom:82px}body.focus .activity-bar{right:10px;bottom:86px}body.focus .activity-bar>strong{font-size:0}body.focus .activity-bar>strong:after{content:attr(data-short-label);font-size:18px}body.focus .experiment.activity-active #scene{bottom:0}@media(max-height:650px){body{overflow-y:auto}}@media(min-width:1500px){.workspace{grid-template-columns:285px minmax(0,1fr);padding-top:35px;gap:36px}.object-card svg{width:95px;height:95px}.object-panel{gap:30px}.result{top:90px}}@media(max-width:1100px){.workspace{grid-template-columns:212px minmax(0,1fr);gap:16px;padding:20px 18px 14px}.object-card{font-size:18px}.actions{gap:8px;padding:12px}.actions button{padding:10px 12px;font-size:18px}.actions .primary{padding:10px 17px;font-size:19px}.result{top:76px}}@media(max-width:760px){.lab-header{padding:0 8px;gap:8px}.brand{width:90px;height:27px}.header-divider,.tool-label,.lab-name{display:none}nav{gap:0}.workspace{display:flex;flex-direction:column;padding:10px;gap:10px}.object-panel{display:grid;grid-template-columns:1fr 150px;gap:10px;overflow:visible;padding:0;flex:0 0 auto}.panel-heading{grid-column:1}h1{font-size:25px;margin:0}.eyebrow,.panel-heading p,.teacher-hint,.size-picker legend{display:none}.size-picker{grid-column:2;grid-row:1;align-self:center}.size-picker>div{gap:6px}.size-picker button{padding:6px;gap:5px;min-height:44px;font-size:18px}.environment-controls{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}.environment-controls label{font-size:14px}.object-grid{grid-column:1 / -1;gap:8px}.object-grid{grid-template-columns:repeat(4,1fr)}.object-card{padding:5px 2px;font-size:18px}.object-card[aria-pressed=true]{padding:4px 1px}.object-card svg{width:46px;height:46px}.experiment{flex:1;border-radius:20px;min-height:320px}.scene-top{top:8px;left:14px;right:8px}.scene-tag{font-size:9px;letter-spacing:1px}#btn-camera{font-size:18px;padding:8px}.result{top:58px;gap:8px;max-width:86%}.result strong{font-size:20px}#result-icon{flex-basis:36px;width:36px;height:36px;font-size:23px}.result-caption{font-size:8px}.narration{font-size:18px}.activity-bar{right:8px;bottom:92px;left:auto;max-width:calc(100% - 16px)}.activity-bar>strong{display:block;font-size:0}.activity-bar>strong:after{content:attr(data-short-label);font-size:18px}.activity-bar button span{display:none}.actions{height:82px;padding:8px;gap:6px}.actions button{font-size:18px;min-height:48px;padding:8px;gap:5px}.actions .primary{font-size:18px;padding:9px;flex:1}#scene{bottom:83px}body:not(.focus) .experiment.activity-active #scene{bottom:160px}.scene-bottom{bottom:91px;left:12px;right:12px;font-size:9px}.scene-bottom>span:first-child{display:none}.water-label{font-size:16px}.lab-footer{display:none}body.focus .scene-top{top:62px}body.focus .result{top:66px}body.focus .actions{width:calc(100% - 16px)}body.focus .activity-bar{right:8px;bottom:92px}body.focus .experiment.activity-active #scene{bottom:0}body.focus.controls-open .object-panel{grid-template-columns:1fr;bottom:80px;max-height:65dvh}body.focus.controls-open .object-grid,body.focus.controls-open .size-picker,body.focus.controls-open .environment-controls{grid-column:1;grid-row:auto}}@media(max-height:650px)and (min-width:761px){.lab-header{height:48px}.lab-footer{display:none}.workspace{padding:6px 10px;gap:12px}.object-panel{gap:8px;padding:0}.panel-heading p,.teacher-hint,.size-picker legend{display:none}h1{margin:2px 0;font-size:24px}.object-grid{gap:6px}.object-card{padding:3px 4px;min-height:76px;font-size:18px}.object-card[aria-pressed=true]{padding:2px 3px}.object-card svg{width:42px;height:42px}.size-picker>div{gap:6px}.size-picker button{min-height:44px;padding:6px;font-size:18px}.scene-top{top:4px;left:16px;right:10px}#scene{top:50px;right:0;bottom:72px;left:0}.result{top:45px;gap:8px}#result-icon{width:38px;height:38px;font-size:23px}.result strong{margin-top:1px;font-size:20px}.scene-bottom{bottom:76px;left:16px;right:16px}.actions{height:66px;padding:7px 10px;gap:8px}.actions button,.actions .primary{min-height:48px;padding:8px 12px;font-size:18px}}@media(max-height:650px)and (max-width:760px){.workspace{flex:none;min-height:590px}.experiment{flex:none;min-height:430px}#scene{top:70px;right:0;bottom:78px;left:0}}@media(max-width:560px){dialog{width:calc(100vw - 12px);max-height:94dvh}.dialog-heading{min-height:58px;padding:7px 10px 7px 16px}.dialog-content{padding:12px 12px 20px}.help-steps{gap:6px}.help-steps li{min-height:108px;padding:8px 4px;flex-direction:column;justify-content:center;gap:4px;text-align:center}.help-steps svg{flex-basis:40px;width:40px;height:40px}.help-steps b{font-size:18px}.help-steps small{font-size:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}body.direct-enabled .workspace{grid-template-columns:minmax(0,1fr)}body.direct-enabled:not(.controls-open) .object-panel{display:none}body.direct-enabled.controls-open .object-panel{position:fixed;z-index:12;left:14px;right:14px;bottom:88px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px 14px;max-height:min(48dvh,390px);overflow:auto;padding:12px;border:1px solid var(--ns-border-glass);border-radius:var(--ns-radius-xl);background:color-mix(in srgb,var(--ns-bg-surface) 97%,transparent);box-shadow:var(--ns-shadow-lg)}body.direct-enabled:not(.focus).controls-open .object-panel{bottom:124px}body.direct-enabled.controls-open .panel-heading,body.direct-enabled.controls-open .teacher-hint{display:none}body.direct-enabled.controls-open .object-grid{grid-column:1 / -1;grid-row:1;grid-template-columns:repeat(8,minmax(76px,1fr));gap:7px}body.direct-enabled.controls-open .object-card{min-height:88px;padding:4px 2px;box-shadow:none}body.direct-enabled.controls-open .object-card[aria-pressed=true]{padding:3px 1px}body.direct-enabled.controls-open .object-card svg{width:50px;height:50px}body.direct-enabled.controls-open .size-picker{grid-column:1;grid-row:2;align-self:end}body.direct-enabled.controls-open .size-picker legend{margin-bottom:4px}body.direct-enabled.controls-open .environment-controls{grid-column:2;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr))}body.direct-enabled.controls-open .environment-controls label{font-size:18px}body.direct-enabled.controls-open #scene{bottom:300px}.lab-header .mode-button{font-size:16px;min-height:44px;padding:6px 10px}.class-entry{position:absolute;z-index:3;top:8px;left:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;pointer-events:auto}.class-entry[hidden],.workshop[hidden]{display:none}.class-entry button{min-height:44px;padding:5px 12px;font-size:18px;background:color-mix(in srgb,var(--ns-bg-surface) 94%,transparent)}@media(min-width:761px){body.focus:not(.workshop-mode) .class-entry{top:64px;left:clamp(310px,29vw,520px);right:clamp(235px,22vw,420px);height:64px;max-height:none;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;overflow-x:auto;overflow-y:hidden}body.focus:not(.workshop-mode) .class-entry button{flex:0 0 auto}}@media(max-width:760px){body.focus:not(.workshop-mode) .class-entry{top:auto;bottom:88px;left:8px;right:8px;height:64px;max-height:none;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;overflow-x:auto;overflow-y:hidden}body.focus:not(.workshop-mode) .class-entry button{flex:0 0 auto}}@media(max-height:500px)and (min-width:761px){body.focus:not(.workshop-mode) .class-entry{top:auto;bottom:76px;left:8px;right:180px}body.focus:not(.workshop-mode):has(.class-entry:not([hidden])) #scene{bottom:148px}}body.direct-enabled:not(.workshop-mode) .scene-top{top:67px}.workshop{position:absolute;z-index:3;left:auto;right:8px;top:70px;bottom:90px;width:min(420px,40vw);overflow:auto;padding:9px 12px;display:grid;align-content:start;gap:6px;border:1px solid var(--ns-border-glass);border-radius:18px;background:color-mix(in srgb,var(--ns-bg-surface) 96%,transparent);box-shadow:var(--ns-shadow-sm)}.workshop button{min-height:44px;padding:5px 10px;font-size:18px}.challenge-row,.shape-marks,.cargo-bench,.workshop-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.challenge-row{position:sticky;top:-9px;z-index:4;padding:7px 0;background:var(--ns-bg-surface)}.challenge-row button[aria-pressed=true]{background:color-mix(in srgb,var(--ns-tech-blue) 18%,var(--ns-bg-surface))}.shape-bench{display:grid;grid-template-columns:minmax(180px,1fr) minmax(140px,1fr);align-items:center;gap:4px 12px}.shape-bench>span:first-child{grid-column:1 / -1;font-size:14px}.shape-bench input{width:100%;min-height:44px;touch-action:none}.shape-marks{grid-column:2;grid-row:2 / span 2}#shape-preview{color:var(--ns-text-muted);font-size:14px}#workshop-observation{flex:1;min-width:200px;font-size:16px;font-weight:650}.bench-direct{grid-row:2 / span 2;position:relative;width:min(250px,100%);height:92px;background:color-mix(in srgb,var(--ns-star-orange) 12%,var(--ns-bg-surface));border-radius:12px;touch-action:none}#bench-preview{display:block;width:100%;height:100%}#bench-handle{position:absolute;left:42%;top:3px;min-width:54px;width:54px;height:54px;border-radius:50%;padding:0;border:3px solid var(--ns-tech-blue);color:var(--ns-tech-blue);background:var(--ns-bg-surface);touch-action:none}#cargo-target{position:absolute;right:4px;bottom:4px;min-width:55px;min-height:54px;border:2px dashed var(--ns-tech-blue);border-radius:8px;display:grid;place-items:center;background:var(--ns-bg-surface);color:var(--ns-tech-blue);font-size:21px}#cargo-target span{font-size:10px;line-height:1}#cargo-target:focus-visible{outline:3px solid var(--ns-tech-blue)}#cargo-drag{background:color-mix(in srgb,var(--ns-tech-blue) 10%,var(--ns-bg-surface));border-color:var(--ns-tech-blue);touch-action:none}.cargo-ghost{position:fixed;z-index:30;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ns-tech-blue);border-radius:8px;background:color-mix(in srgb,var(--ns-tech-blue) 10%,var(--ns-bg-surface));color:var(--ns-tech-blue);pointer-events:none;font-size:28px;box-shadow:var(--ns-shadow-md)}.comparison{position:absolute;z-index:2;top:130px;right:12px;max-width:min(175px,20vw);display:grid;gap:7px;pointer-events:auto}.comparison-card{border:1px solid var(--ns-border-glass);border-radius:12px;padding:5px;background:color-mix(in srgb,var(--ns-bg-surface) 94%,transparent);font-size:14px;line-height:1.3}.comparison-card img{width:100%;height:66px;object-fit:cover;border-radius:6px}.comparison-card button{min-height:44px;padding:5px 8px;font-size:18px}body.workshop-mode .comparison{position:static;z-index:auto;width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:6px;border-top:1px solid var(--ns-border-glass)}body.workshop-mode .comparison:empty{display:none}body.workshop-mode .comparison-card{min-width:0;overflow-wrap:anywhere}body.workshop-mode .comparison-card img{height:74px}body.workshop-mode .comparison-card button{min-height:44px}body.workshop-mode .comparison-card{font-size:16px}.contact-indicator{position:absolute;left:16px;bottom:102px;z-index:2;padding:7px 10px;border:1px solid var(--ns-success);border-radius:10px;background:color-mix(in srgb,var(--ns-success) 15%,var(--ns-bg-surface));color:var(--ns-text-title);font-size:16px;font-weight:750;pointer-events:none}.contact-indicator[data-contact=floor]{border-color:var(--ns-danger);background:color-mix(in srgb,var(--ns-danger) 15%,var(--ns-bg-surface))}.contact-indicator[hidden]{display:none}body.workshop-mode #scene{right:min(430px,41vw);bottom:90px}body.workshop-mode .scene-top{top:10px;right:calc(min(430px,41vw) + 12px)}@media(max-width:700px){body.workshop-mode .scene-top{right:8px}}body.focus.workshop-mode .scene-top{top:64px}body.workshop-mode .scene-bottom,body.workshop-mode #btn-controls{display:none}body.workshop-mode .actions{height:80px}body.workshop-mode .direct-guide{font-size:14px}body.workshop-mode .result{top:94px;left:14px;max-width:min(225px,30vw);gap:6px}body.workshop-mode .result strong{font-size:24px;line-height:1.14}body.workshop-mode .result #result-icon{flex:0 0 34px;width:34px;height:34px;font-size:19px}body.workshop-mode .result .narration{font-size:14px;line-height:1.2}body.workshop-mode .object-panel{display:none!important}body.focus.workshop-mode #scene{inset:58px min(430px,41vw) 86px 0}body.focus.workshop-mode .workshop{top:64px;bottom:78px}body.focus.workshop-mode .actions{bottom:0}#sound-dialog .dialog-content{display:grid;gap:14px}#sound-dialog label{display:flex;gap:12px;align-items:center;font-size:18px}#sound-dialog input[type=range]{flex:1}@media(max-width:920px){.lab-header{gap:6px;padding:0 8px}.lab-header .mode-button{font-size:13px;padding:4px 6px}.brand{width:80px}.lab-name,.header-divider{display:none}.challenge-row{overflow-x:auto;flex-wrap:nowrap}.challenge-row button{flex:0 0 auto}}@media(max-width:700px){.lab-header .mode-button{font-size:0}#mode-explore:after{content:"Khám phá";font-size:12px}#mode-workshop:after{content:"Xưởng nặn";font-size:12px}.class-entry{max-height:96px;overflow-x:auto;flex-wrap:nowrap;justify-content:start}.class-entry button{flex:0 0 135px;font-size:13px}.workshop{inset:auto 6px 82px;width:auto;max-height:40dvh;padding:6px}body.workshop-mode #scene{right:0;bottom:48dvh}body.focus.workshop-mode #scene{top:58px;right:0;bottom:48dvh;left:0}body.focus.workshop-mode .workshop{inset:auto 6px 72px}.shape-bench{grid-template-columns:1fr}.shape-marks{grid-column:1;grid-row:auto;overflow-x:auto;flex-wrap:nowrap}.workshop button{font-size:14px}.comparison{max-width:88px;top:128px}.comparison-card img{height:38px}.comparison-card{font-size:10px}}@media(max-width:480px){.lab-header{padding:0 4px;gap:2px}.portal-link{display:none}.brand{display:block;width:68px;height:24px}nav{flex:1;justify-content:space-between;gap:0;min-width:0}nav button{min-width:44px;padding:5px 4px}.lab-header .mode-button{min-width:54px;padding:3px}nav #btn-focus{min-width:44px;padding:5px 3px}body.workshop-mode .environment-status{display:none}body.workshop-mode .scene-top{left:auto;right:8px;justify-content:flex-end;top:8px}.result{top:108px}body.workshop-mode .result{max-width:215px;top:70px}body.focus.workshop-mode .result{top:116px}body.workshop-mode .result strong{font-size:18px}body.workshop-mode .result .narration{font-size:16px}.contact-indicator{font-size:13px;bottom:84px}}@media(max-width:480px){body.workshop-mode .result{top:42px}body.focus.workshop-mode .result{top:100px}}@media(max-width:920px)and (min-height:700px){body.workshop-mode .workspace{grid-template-columns:minmax(0,1fr);padding:8px}body.workshop-mode .experiment{min-height:calc(100dvh - 80px)}body.workshop-mode #scene{right:0;bottom:43dvh}body.workshop-mode .workshop{top:auto;right:8px;bottom:82px;left:8px;width:auto;max-height:35dvh;padding:8px}body.workshop-mode .scene-top{right:8px}body.focus.workshop-mode #scene{top:58px;right:0;bottom:43dvh;left:0}body.focus.workshop-mode .workshop{top:auto;bottom:78px}body.workshop-mode .challenge-row{flex-wrap:nowrap;overflow-x:auto}body.workshop-mode .challenge-row button{flex:0 0 auto}}@media(max-height:500px)and (min-width:701px){body.workshop-mode{overflow:hidden}body.workshop-mode .workspace{flex:none;height:calc(100dvh - 48px);min-height:0}body.workshop-mode .experiment{height:100%;min-height:0}body.workshop-mode #scene{inset:8px min(380px,45vw) 64px 0}body.focus.workshop-mode #scene{inset:48px min(380px,45vw) 60px 0}body.workshop-mode .workshop{display:block;top:6px;right:6px;bottom:64px;width:min(370px,44vw);padding:5px}body.workshop-mode .workshop>*{margin-bottom:5px}body.workshop-mode .challenge-row{top:0;height:56px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:4px 0}body.workshop-mode .shape-bench{display:block}body.workshop-mode .shape-bench>span:first-child{display:none}body.workshop-mode .bench-direct{height:64px}body.workshop-mode #bench-handle{top:1px;width:44px;height:44px;min-width:44px}body.workshop-mode #cargo-target{min-height:44px}body.workshop-mode #shape-handle,body.workshop-mode #shape-preview{display:none}body.workshop-mode .shape-marks{display:flex;flex-wrap:nowrap;overflow-x:auto}body.workshop-mode .cargo-bench{flex-wrap:nowrap;overflow-x:auto}body.workshop-mode .cargo-bench button{flex:0 0 auto}body.workshop-mode .scene-top{top:2px;right:calc(min(380px,45vw) + 5px);left:8px}body.workshop-mode .scene-tag,body.workshop-mode .environment-status{display:none}body.workshop-mode .result{top:auto;bottom:72px;left:5px;max-width:180px;padding:4px 6px;border-radius:8px;background:color-mix(in srgb,var(--ns-bg-surface) 90%,transparent)}body.workshop-mode .result #result-icon,body.workshop-mode .result-caption{display:none}body.workshop-mode .result strong{font-size:15px;line-height:1.1}body.workshop-mode .result .narration{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}body.workshop-mode .contact-indicator{bottom:66px;left:188px;font-size:12px}body.workshop-mode .actions{height:58px}body.workshop-mode .actions button{min-height:44px}}body.direct-enabled.controls-open .scene-bottom,body.focus.direct-enabled .scene-tag{display:none}body.focus.direct-enabled .result{top:118px}@media(max-width:700px){.scene-tag{display:none}.environment-status{max-width:calc(100% - 125px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#btn-conclusion span{display:none}#btn-conclusion{padding:5px;min-width:44px}body.direct-enabled.controls-open .object-panel{bottom:94px;grid-template-columns:1fr;max-height:230px}body.direct-enabled.controls-open .object-grid{grid-column:1;display:flex;overflow-x:auto}body.direct-enabled.controls-open .object-card{flex:0 0 88px;min-height:76px}body.direct-enabled.controls-open .size-picker,body.direct-enabled.controls-open .environment-controls{grid-column:1;grid-row:auto}body.direct-enabled.controls-open .environment-controls{grid-template-columns:repeat(3,1fr)}body.direct-enabled.controls-open #scene{bottom:324px}.direct-enabled .result{top:92px}}@media(max-width:700px)and (max-height:500px){body.direct-enabled.controls-open .environment-status{display:none}body.direct-enabled.controls-open .object-panel{top:54px;right:8px;bottom:76px;left:auto;width:258px;max-height:none}body.direct-enabled.controls-open .object-grid{display:grid;grid-template-columns:repeat(2,1fr);overflow-y:auto}body.direct-enabled.controls-open .object-card{min-height:72px}body.direct-enabled.controls-open .environment-controls{grid-template-columns:1fr}body.direct-enabled.controls-open #scene{right:272px;bottom:78px}body.focus.direct-enabled .result{top:auto;bottom:82px;left:8px;max-width:220px;padding:5px 8px;border-radius:var(--ns-radius-md);background:color-mix(in srgb,var(--ns-bg-surface) 90%,transparent)}body.focus.direct-enabled #result-icon,body.focus.direct-enabled .result-caption{display:none}body.focus.direct-enabled .result strong{margin:0;font-size:18px;line-height:1.15}body.focus.direct-enabled .narration{max-width:204px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px}}
