:root{font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif;color:#172d38;background:#f0f1e9;font-synthesis:none;--ink:#102131;--mint:#6ce0c6}
*{box-sizing:border-box}body{margin:0}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #0b8b79;outline-offset:4px}button:disabled{cursor:default;opacity:.55}[hidden]{display:none!important}
.lab{max-width:1440px;margin:auto;padding:32px 48px 22px}.lab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;margin:0 0 8px;color:#54706c}.logo-mark{color:#0b8b79;font-size:17px;vertical-align:-2px;margin-right:5px}h1{font-size:28px;letter-spacing:-.8px;margin:0;font-weight:750}h1 span{display:inline-block;font-size:12px;letter-spacing:0;color:#62756f;margin-left:17px;font-weight:500}.lab-badge{font-size:10px;letter-spacing:1.5px;white-space:nowrap}.lab-badge>span{display:inline-block;width:7px;height:7px;background:#17866c;border-radius:100%;margin-right:8px}.lab-badge small{display:block;font-size:11px;letter-spacing:0;color:#65756e;margin-top:8px}
.scene-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.scene-nav button{min-height:72px;text-align:left;border:1px solid #d1d9ce;background:transparent;border-radius:9px;display:flex;align-items:center;gap:13px;padding:14px;color:#314c4a;transition:background .2s,border-color .2s}.scene-nav button:hover{background:#e5eae0}.scene-nav button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#f5f6eb}.scene-number{font-family:monospace;font-size:11px;opacity:.55}.scene-nav button>span:nth-child(2){font-size:14px;font-weight:700}.scene-nav small{display:block;font-size:8px;letter-spacing:1.05px;font-weight:500;margin-top:7px;opacity:.65}.scene-icon{font-size:22px;margin-left:auto;color:#0f907d}.scene-nav button[aria-pressed=true] .scene-icon{color:var(--mint)}
.preview{background:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 12px 26px #172e3517}.stage{width:100%;aspect-ratio:16/9;background:#102131;position:relative}canvas{display:block;width:100%;height:100%;object-fit:contain}.transport{min-height:60px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #2a3e4d;color:#bdcdc9}.playback-controls,.output-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.transport button,.transport a{border:0;color:#d5e6e0;background:#213746;border-radius:5px;padding:9px 12px;text-decoration:none;font-size:11px}.transport button:hover,.transport a:hover{background:#304c5a}.transport #pause{min-width:100px;background:#324d50;color:#d1f8e7}.transport label{font-size:11px;display:flex;align-items:center;gap:7px}select{background:#213746;border:1px solid #3d5460;color:#e4ece3;border-radius:4px;padding:5px}#playback-state{font-size:10px;color:#6ce0c6}.divider{height:18px;width:1px;background:#3d5360}
.scene-note{display:flex;justify-content:space-between;gap:24px;margin:25px 0 26px}.scene-note h2{font-size:17px;margin:0 0 8px}.scene-note p:not(.eyebrow){font-size:12px;color:#60726c;line-height:1.8;max-width:740px;margin:0}.scene-note dl{display:flex;gap:27px;margin:0;align-items:center;white-space:nowrap;font-size:10px}.scene-note dt{color:#7a8780;font-size:9px;margin-bottom:7px}.scene-note dd{margin:0;font-weight:600}.lab-footer{border-top:1px solid #d4dcd2;padding-top:15px;font-size:9px;color:#75847c;display:flex;justify-content:space-between;gap:20px}
body.clean{background:#08141e;overflow:hidden}.clean .lab{max-width:none;padding:0}.clean .lab-header,.clean .scene-nav,.clean .transport,.clean .scene-note,.clean .lab-footer{display:none}.clean .preview{border-radius:0;box-shadow:none}.clean .stage{position:absolute;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);top:50%;left:50%;transform:translate(-50%,-50%)}#clean-status{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);font-size:13px;padding:10px 16px;background:#142937;color:#e7f7e9;border-radius:6px}
@media(max-width:1000px){.lab{padding:24px}.scene-nav button{gap:8px;padding:12px 9px}.scene-nav small{font-size:7px}.scene-icon{display:none}.scene-note{flex-direction:column;gap:15px}.scene-note dl{justify-content:flex-start}h1 span{display:block;margin:6px 0 0}}
@media(max-width:600px){.lab{padding:18px 12px}.lab-header{margin-bottom:18px}.lab-badge{display:none}h1{font-size:25px}.scene-nav{grid-template-columns:repeat(2,1fr);gap:7px}.scene-nav button{min-height:58px}.scene-nav small{font-size:8px}.transport{align-items:flex-start;flex-direction:column;padding:12px;gap:12px}.output-controls{width:100%;justify-content:space-between;gap:7px}.playback-controls{gap:8px}.scene-note dl{gap:18px;white-space:normal}.lab-footer{flex-direction:column;gap:7px}.scene-note{margin-top:20px}.transport a,.transport button{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.experiment-controls{border-top:1px solid #2a3e4d;padding:12px 18px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#bdd4cb}.control-group{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.experiment-controls label{font-size:11px;display:flex;align-items:center;gap:7px}.experiment-controls button,.meter-bar button{font:inherit;font-size:10px;border:1px solid #38535e;background:#203746;color:#d0e6d9;padding:7px 10px;border-radius:4px}.experiment-controls button[aria-pressed=true]{background:#266553;border-color:#66cca4}.toggle-label input{accent-color:#6ce0c6;width:16px;height:16px;margin:0}.meter-bar{background:#0b1d2a;padding:9px 18px;color:#82a69e;font-size:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.meter-bar>div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.meter-bar #metrics{font-family:monospace;color:#b2cec8}.clean .experiment-controls,.clean .meter-bar{display:none}#clean-metrics{position:fixed;right:14px;bottom:12px;padding:7px 10px;border-radius:5px;font:12px monospace;background:#071b29cc;color:#a2e8d0;pointer-events:none}.meter-bar button:hover{background:#315460}@media(max-width:600px){.experiment-controls{padding:12px;gap:14px}.control-group{gap:10px}.meter-bar{padding:12px;gap:10px}.meter-bar>div{gap:8px}.experiment-controls select{max-width:150px}}
.text-layer-note{font-size:11px;color:#8cdfbe;white-space:nowrap}