:root{
  --paper:#f5f1e8; --ink:#0a0a0a; --signal:#ff4d00;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --bd:3px; --bd4:4px;
  --sh:6px 6px 0 0 var(--ink);
  --sh-sm:4px 4px 0 0 var(--ink);
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'DejaVu Sans Mono','Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scrollbar-color:var(--ink) var(--paper);scrollbar-width:thin}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  padding:var(--s4);
  min-height:100vh;
}
::selection{background:var(--signal);color:var(--paper)}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:var(--paper);border:2px solid var(--ink)}
*::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--paper)}

/* header */
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;border-bottom:var(--bd4) solid var(--ink);padding-bottom:var(--s3);margin-bottom:var(--s4)}
.title{font-size:clamp(30px,6vw,60px);line-height:.9;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 var(--s2)}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--signal);color:var(--paper);border:var(--bd) solid var(--ink);padding:5px 10px;box-shadow:var(--sh-sm)}
.tagline{font-family:var(--mono);font-size:12.5px;line-height:1.65;max-width:44ch;margin:0;letter-spacing:.01em}
.tagline b{background:var(--ink);color:var(--paper);padding:0 4px;font-weight:700}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s4);align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.card{background:var(--paper);border:var(--bd4) solid var(--ink);box-shadow:var(--sh)}

/* stage */
.stage{padding:var(--s3)}
.stage-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;border:var(--bd) solid var(--ink);padding:3px 8px;background:var(--paper)}
.canvas-wrap{position:relative;aspect-ratio:1;border:var(--bd4) solid var(--ink);background:var(--paper);overflow:hidden}
#art{display:block;width:100%;height:100%;image-rendering:pixelated}
.status{margin-top:var(--s3);font-family:var(--mono);font-size:11px;letter-spacing:.05em;line-height:1.7;border:var(--bd) solid var(--ink);background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3);word-break:break-word}
.status b{color:var(--signal)}

/* panel */
.panel{padding:var(--s3)}
.panel-scroll{display:flex;flex-direction:column;gap:var(--s3)}
.block{border:var(--bd) solid var(--ink);padding:var(--s3);background:var(--paper)}
.block-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.coord{font-family:var(--mono);font-size:11px;letter-spacing:.08em}

/* pad */
.pad{position:relative;aspect-ratio:1;border:var(--bd) solid var(--ink);background:var(--paper);touch-action:none;cursor:crosshair;margin-top:var(--s1)}
.pad:focus-visible{outline:var(--bd) solid var(--signal);outline-offset:3px}
.pad-grid{position:absolute;inset:0;width:100%;height:100%}
.anchor{position:absolute;font-family:var(--mono);font-size:10px;font-weight:700;background:var(--ink);color:var(--paper);padding:1px 4px;letter-spacing:.1em}
.anchor.a{left:4px;bottom:4px}.anchor.b{right:4px;bottom:4px}.anchor.c{left:4px;top:4px}.anchor.d{right:4px;top:4px}
.knob{position:absolute;width:22px;height:22px;background:var(--signal);border:var(--bd) solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);transform:translate(-50%,-50%);pointer-events:none;left:50%;top:50%}

/* z bars */
.zbars{display:flex;flex-direction:column;gap:6px}
.zrow{display:flex;align-items:center;gap:var(--s2)}
.zrow .zl{font-family:var(--mono);font-size:10px;width:20px;letter-spacing:.03em}
.ztrack{position:relative;flex:1;height:12px;border:2px solid var(--ink);background:var(--paper)}
.ztrack::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--ink)}
.zfill{position:absolute;top:0;bottom:0;background:var(--ink)}
.zval{font-family:var(--mono);font-size:10px;width:46px;text-align:right;letter-spacing:.02em}

/* buttons */
.btn{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:var(--bd) solid var(--ink);padding:9px 10px;box-shadow:var(--sh-sm);cursor:pointer;transition:transform .05s,box-shadow .05s;user-select:none;white-space:nowrap}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--ink)}
.btn:focus-visible{outline:var(--bd) solid var(--signal);outline-offset:3px}
.btn.grow{flex:1}
.btn.ico{width:44px;text-align:center;padding:9px 0}
.btn.active,.btn.signal-btn{background:var(--signal);color:var(--paper)}
.row{display:flex;gap:var(--s2)}
.row.wrap{flex-wrap:wrap}

/* range */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;margin:6px 0 2px}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--ink)}
input[type=range]::-moz-range-track{height:6px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--signal);border:var(--bd) solid var(--ink);margin-top:-9px;box-shadow:2px 2px 0 0 var(--ink)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--signal);border:var(--bd) solid var(--ink);border-radius:0}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:var(--bd) solid var(--signal);outline-offset:2px}

/* footer */
.foot{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:var(--s4);border-top:var(--bd4) solid var(--ink);padding-top:var(--s3)}
.foot .dot{color:var(--signal);font-size:8px}

/* motion */
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.topbar,.stage,.panel,.foot{animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
.stage{animation-delay:.05s}.panel{animation-delay:.12s}.foot{animation-delay:.18s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}