:root{color-scheme:dark;--bg:#0a1020;--fg:#f1edf5;--muted:#a6adc5;--line:#303852;--light:#ecc091}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(ellipse 75% 60% at 54% -25%,#25365c 0%,transparent 76%),var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:14px;line-height:1.55}
button,input{font:inherit}button{cursor:pointer}
button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #f6d6a8;outline-offset:4px}
.site{max-width:1350px;margin:auto;padding:35px clamp(18px,3.5vw,56px) 35px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow,.live{font:600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;color:#b1bcdc}
.eyebrow span{margin:0 8px;color:#69769e}
.live{color:#d7c8b7;display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;border-radius:50%;background:#e5ad84;box-shadow:0 0 10px #d99b7a}
.intro{margin:32px 0 31px}
h1{margin:0 0 7px;font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:.02em;line-height:1.25}
.intro p{margin:0;color:var(--muted);font-size:14px}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);align-items:start;gap:clamp(26px,3vw,45px)}
.stage-column{min-width:0}.scene-frame{border:1px solid #3d4667;background:#070c19;border-radius:4px;overflow:hidden}
#scene{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;cursor:crosshair;touch-action:manipulation;background:#161b33}
.canvas-note{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;border-top:1px solid #283049;font:500 10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#8e9ab7}
.stage-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.stage-actions button{border:1px solid #6a7290;color:#e3e7f2;border-radius:5px;background:transparent;padding:9px 13px;font-size:12px;font-weight:600;min-height:38px}
.stage-actions .main-btn{color:#151a27;background:var(--light);border-color:var(--light)}
.stage-actions button:hover{filter:brightness(1.11)}
.hint{margin:13px 0 0;font-size:12px;color:#9da9c2}.notice{min-height:1.2em;margin:6px 0 0;color:#e1bf9e;font-size:12px}
.controls{border-top:1px solid #5a6380;min-width:0;padding-top:15px}
.controls-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.controls h2{font-size:18px;margin:0;font-weight:600}.controls-head>span{font:500 10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#8a94af;letter-spacing:.14em}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:19px}
.presets button{min-width:0;background:transparent;color:#bbc3d4;border:1px solid #535e7b;border-radius:5px;padding:9px 2px;font-size:12px}
.presets button[aria-pressed="true"]{background:#e8b991;color:#121827;border-color:#e8b991;font-weight:700}
.control-group{margin-top:28px;padding-top:20px;border-top:1px solid #343e5a}
h3{font-size:13px;font-weight:600;margin:0 0 17px}h3 span{font:500 11px ui-monospace,SFMono-Regular,Consolas,monospace;color:#b0b8cb;margin-right:11px}
.setting{margin:0 0 22px}.setting-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:11px}.setting-label label{font-size:13px;color:#e0e3ee}.setting-label output{font:500 12px ui-monospace,SFMono-Regular,Consolas,monospace;color:#e3bb96;white-space:nowrap;font-variant-numeric:tabular-nums}
input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;margin:0;height:22px;background:transparent;accent-color:var(--light);cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#5e6b8a}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;background:#f1c79e;width:15px;height:15px;border-radius:50%;margin-top:-6px;border:2px solid #151c30}
input[type="range"]::-moz-range-track{height:3px;background:#5e6b8a}
input[type="range"]::-moz-range-thumb{background:#f1c79e;border:2px solid #151c30;width:13px;height:13px;border-radius:50%}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #343e5a;padding:17px 0;font-size:13px}.switch-row input{width:18px;height:18px;accent-color:#eac093;cursor:pointer}
.control-footnote{font-size:12px;color:#8d9bb7;line-height:1.65;margin:2px 0}
.foot{border-top:1px solid #2f3a58;margin-top:62px;padding-top:21px;color:#7988a7;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font:500 10px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.045em}
@media(max-width:900px){.workbench{grid-template-columns:1fr}.controls{display:block}.controls .control-group{max-width:none}.control-group{margin-top:16px}.site{padding:25px 17px}.intro{margin:28px 0 23px}.foot{margin-top:42px}}
@media(min-width:600px) and (max-width:900px){.controls{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.controls-head,.presets,.switch-row,.control-footnote{grid-column:1/-1}}
@media(max-width:500px){.eyebrow,.live{font-size:9px}.scene-frame{margin-left:-5px;margin-right:-5px}.canvas-note{font-size:9px}.stage-actions{gap:8px}.stage-actions button{padding:9px 10px}.stage-actions .main-btn{flex:1}.intro p{max-width:27em}}