:root{--bg:#0b0d0e;--panel:#111416;--line:#283033;--muted:#778184;--text:#e7eceb;--lime:#d5f25f;--orange:#ff7a45}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;min-height:100vh}.shell{max-width:1500px;margin:auto;padding:0 38px}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.08em}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-size:21px;color:var(--lime);line-height:0}.version{color:#5f696b;font-size:10px;margin-left:8px}.status{color:#9da8a7;display:flex;gap:8px;align-items:center}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #d5f25f}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;padding:32px 0 22px}.stage-panel{min-width:0}.stage-head{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 22px}.eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.13em;color:#72807e;margin:0 0 12px}.eyebrow span{color:var(--lime)}h1{font-size:clamp(36px,5vw,66px);line-height:.94;letter-spacing:-.05em;margin:0;font-weight:700}h1 em{font-style:normal;color:var(--lime)}.readout{font-family:'DM Mono',monospace;text-align:right;padding-top:18px}.readout span{display:block;font-size:10px;color:#74807f;letter-spacing:.14em}.readout strong{font-size:24px;color:#ff8e56;font-weight:500}.canvas-wrap{position:relative;width:100%;aspect-ratio:1.68;background:#131718;border:1px solid #2c3838;overflow:hidden;cursor:pointer}.canvas-wrap canvas{width:100%;height:100%;display:block;image-rendering:auto}.scanline{position:absolute;inset:0;background:linear-gradient(transparent 49.8%,rgba(213,242,95,.18) 50%,transparent 50.2%);pointer-events:none;mix-blend-mode:screen;opacity:.32}.canvas-overlay{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;letter-spacing:.08em;color:#c4ceca}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#d5dedb;background:rgba(10,13,14,.25);pointer-events:none}.empty-state strong{font-size:14px}.empty-state span{font-size:12px;color:#879391}.upload-icon{font-size:28px;color:var(--lime);margin-bottom:4px}.stage-foot{display:flex;justify-content:space-between;align-items:center;font:11px 'DM Mono',monospace;color:#677271;padding:13px 2px}.ghost-btn{border:0;background:none;color:#929e9b;font:11px 'DM Mono',monospace;text-transform:uppercase;cursor:pointer}.ghost-btn:hover{color:var(--lime)}.control-panel{background:var(--panel);border:1px solid var(--line);padding:0 24px;align-self:start}.control-section{padding:24px 0;border-bottom:1px solid var(--line)}.control-section:last-child{border-bottom:0}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.section-title>span{font:10px 'DM Mono',monospace;color:var(--lime)}h2{font-size:14px;letter-spacing:.02em;margin:0;font-weight:600}.upload-btn{height:50px;border:1px solid #45504e;background:#181e1e;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;cursor:pointer;transition:.2s}.upload-btn:hover{border-color:var(--lime);color:var(--lime)}.upload-btn input{display:none}.upload-glyph{font-size:17px;color:var(--lime)}.hint{font:10px 'DM Mono',monospace;color:#64706e;margin:10px 0 0}.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.palette-swatch{height:54px;border:2px solid transparent;cursor:pointer;position:relative}.palette-swatch.active{border-color:var(--lime)}.palette-swatch span{position:absolute;bottom:4px;left:5px;font:9px 'DM Mono',monospace;color:#fff;text-shadow:0 1px 2px #000}.palette-name{display:flex;justify-content:space-between;margin-top:12px;font:11px 'DM Mono',monospace;color:#d5dfdc}.palette-name .mono{color:#64706e}.sliders{padding-bottom:20px}.slider-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:18px;font-size:12px;color:#b1bcba}.slider-row output{font:11px 'DM Mono',monospace;color:var(--lime)}input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--lime);height:3px;cursor:pointer}.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#b1bcba;position:relative}.toggle-row input{position:absolute;opacity:0}.toggle{width:38px;height:20px;background:#273130;border:1px solid #45504e;position:relative;cursor:pointer}.toggle:after{content:'';position:absolute;width:14px;height:14px;top:2px;left:2px;background:#697471;transition:.2s}.toggle-row input:checked+.toggle{background:#4d5d2d;border-color:var(--lime)}.toggle-row input:checked+.toggle:after{left:20px;background:var(--lime)}.export-btn{width:100%;height:48px;background:var(--lime);border:0;color:#111613;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font:600 12px Manrope;cursor:pointer}.export-btn:hover{background:#e2ff77}footer{border-top:1px solid var(--line);padding:17px 0 24px;display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;color:#596462;letter-spacing:.05em}@media(max-width:900px){.shell{padding:0 18px}.workspace{grid-template-columns:1fr;gap:14px}.control-panel{padding:0 18px}.stage-head{margin-bottom:16px}.readout{padding-top:9px}footer{font-size:9px;gap:16px;line-height:1.5}footer span:last-child{text-align:right}}@media(max-width:520px){.topbar{height:65px}.version{display:none}h1{font-size:42px}.canvas-wrap{aspect-ratio:1.2}.palette-grid{grid-template-columns:repeat(3,1fr)}footer{display:block}footer span{display:block;margin-top:5px}}