:root{
    --bg:#0e1013; --panel:#161a1f; --panel2:#1d222a; --line:#2a313b;
    --ink:#e6eaf0; --ink2:#98a4b3; --ink3:#6b7787;
    --accent:#5fd3c4; --accent2:#f0a04b; --warn:#e2585f;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 var(--sans);overflow:hidden}
  button,input,select{font:inherit;color:inherit}

  #app{display:grid;grid-template-columns:296px 1fr 268px;grid-template-rows:46px minmax(0,1fr) auto;height:100vh;overflow:hidden}

  header{grid-column:1/4;display:flex;align-items:center;gap:14px;padding:0 14px;
         background:var(--panel);border-bottom:1px solid var(--line)}
  header h1{margin:0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  header .sub{color:var(--ink3);font-size:11px;margin-left:-6px}
  header .sub a{color:var(--ink2);text-underline-offset:3px}
  header .sub a:hover{color:var(--accent)}
  header .sub a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  header .spacer{flex:1}

  .tool-footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:16px;padding:6px 14px;
               background:var(--panel);border-top:1px solid var(--line);font-size:11px}
  .tool-footer a{color:var(--ink2);text-underline-offset:3px}
  .tool-footer a:hover{color:var(--accent)}
  .tool-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  .col{overflow-y:auto;overflow-x:hidden;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
  .col.right{border-right:none;border-left:1px solid var(--line)}
  #stage{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--bg)}

  .sec{border-bottom:1px solid var(--line);padding:12px 12px 14px}
  .sec > h2{margin:0 0 10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:600;
            display:flex;align-items:center;gap:8px}
  .sec > h2 .hint{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink3);font-size:10px}

  /* label · slider · typable readout */
  .row{display:grid;grid-template-columns:66px minmax(46px,1fr) auto;align-items:center;gap:8px;margin:7px 0}
  .row label{color:var(--ink2);font-size:11px}
  .row .val{display:flex;align-items:center;justify-content:flex-end;min-width:46px}
  .row .val .unit{color:var(--ink3);font:11px var(--mono);font-style:normal;padding-left:1px;user-select:none}
  .row .val .num{width:auto;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;
    padding:1px 0;text-align:right;font:11px var(--mono);color:var(--ink)}
  .row .val .num:hover{border-bottom-color:var(--line)}
  .row .val .num:focus{outline:none;border-bottom-color:var(--accent);color:#fff}
  .row .val .num.bad{color:var(--warn)}
  .row.dim{opacity:.42}

  input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:transparent;width:100%;margin:0}
  input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
    background:var(--accent);margin-top:-5px;border:none;cursor:pointer}
  input[type=range].own::-webkit-slider-thumb{background:var(--accent2)}
  select,input[type=text]{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
    padding:5px 7px;width:100%;font-size:12px}

  button{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;
         font-size:12px;transition:background .12s,border-color .12s}
  button:hover{background:#252c36;border-color:#3a444f}
  button:active{background:#1a1f26}
  button:disabled{opacity:.4;cursor:not-allowed}
  button.primary{background:var(--accent);color:#06110f;border-color:var(--accent);font-weight:600}
  button.primary:hover{background:#74e0d2}
  button.ghost{background:transparent}
  button.tiny{padding:3px 7px;font-size:11px}
  button.toggle.on{background:rgba(240,160,75,.14);border-color:var(--accent2);color:var(--accent2)}
  .btnrow{display:flex;gap:7px;flex-wrap:wrap}
  .btnrow.fill button{flex:1}

  /* layer list */
  #layers{display:flex;flex-direction:column;gap:6px}
  .layer{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:8px 9px;cursor:pointer}
  .layer.sel{border-color:var(--accent);box-shadow:0 0 0 1px rgba(95,211,196,.25)}
  .layer .top{display:flex;align-items:center;gap:7px}
  .layer .swatch{width:9px;height:9px;border-radius:2px;flex:none}
  .layer .name{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .layer .meta{font:10px var(--mono);color:var(--ink3);margin-top:3px}
  .layer .meta em{color:var(--accent2);font-style:normal}
  .layer.muted{opacity:.42}
  .layer .mute{font:10px var(--mono);padding:1px 5px;border-radius:3px;border:1px solid var(--line);color:var(--ink3);background:transparent}
  .layer .mute.on{color:var(--warn);border-color:var(--warn)}

  /* canvases */
  .canvwrap{position:relative;margin:0;background:var(--bg)}
  .canvwrap .tag{position:absolute;top:8px;left:12px;font:10px var(--mono);letter-spacing:.1em;color:var(--ink3);
                 text-transform:uppercase;pointer-events:none}
  .canvwrap .tag2{position:absolute;top:8px;right:12px;font:10px var(--mono);color:var(--ink3);pointer-events:none;text-align:right}
  #waveWrap{flex:1 1 auto;min-height:0;border-bottom:1px solid var(--line)}
  #specWrap{height:150px;flex:none}
  .canvwrap canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
  #wave{cursor:crosshair}

  .note{color:var(--ink3);font-size:11px;line-height:1.5;margin:9px 0 0}
  .note b{color:var(--ink2);font-weight:600}
  .kv{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--ink2);padding:2px 0}
  .kv b{color:var(--ink);font-weight:500}
  .bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
  .bar > i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s}
  .pill{display:inline-block;font:10px var(--mono);padding:2px 6px;border-radius:99px;border:1px solid var(--line);color:var(--ink3)}
  .pill.ok{color:var(--accent);border-color:rgba(95,211,196,.4)}
  .pill.warn{color:var(--accent2);border-color:rgba(240,160,75,.4)}
  #status{font:11px var(--mono);color:var(--ink3);min-height:15px;margin-top:8px}
  .presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .presets button{padding:5px 4px;font-size:11px}
  kbd{font:10px var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:1px 4px;color:var(--ink2)}
  .divider{height:1px;background:var(--line);margin:12px -12px 10px}

  /* utility classes: the site CSP forbids style attributes */
  .span2{grid-column:2/4}
  .mt9{margin-top:9px}
  .mt7{margin-top:7px}
  select.grow{width:auto;flex:1}