:root{
    --bg:#070b0d;
    --bg-elev:#0c1316;
    --bg-stage:#04080a;
    --line:#1b2a2e;
    --line-soft:#13201f;
    --signal:#38e0c4;     /* primary: boxes, mesh */
    --alert:#ffb454;      /* secondary: locked target, arrows */
    --text:#cad7d6;
    --muted:#62787a;
    --muted-dim:#42565a;
    --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,Menlo,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  /* radial vignette behind everything */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);
  }

  #app{
    position:relative;z-index:1;
    height:100vh;
    display:grid;
    grid-template-columns:1fr 320px;
    gap:1px;
    background:var(--line);
  }

  /* ---------- STAGE ---------- */
  .stage{
    position:relative;
    background:
      linear-gradient(0deg,var(--bg-stage),var(--bg-stage)),
      var(--bg-stage);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    min-width:0;
  }
  /* faint grid floor */
  .stage::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
    background-image:
      linear-gradient(var(--line-soft) 1px,transparent 1px),
      linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  }
  canvas#view{
    max-width:100%;max-height:100%;
    display:block;
    touch-action:none;
    image-rendering:auto;
    background:#000;
    box-shadow:0 0 0 1px var(--line),0 10px 60px rgba(0,0,0,.6);
  }
  /* scanline layer */
  .scanlines{
    position:absolute;inset:0;pointer-events:none;z-index:5;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.0) 0px,rgba(0,0,0,.0) 2px,rgba(0,0,0,.22) 3px);
    mix-blend-mode:multiply;opacity:.5;
  }
  .scanlines.off{display:none}

  /* eyedropper loupe */
  .loupe{
    position:absolute;z-index:8;pointer-events:none;display:none;
    transform:translate(-50%,-50%);
    border:1px solid var(--signal);background:#04080a;
    box-shadow:0 8px 28px rgba(0,0,0,.7);
  }
  .loupe.show{display:block}
  .loupe canvas{display:block;width:120px;height:120px;image-rendering:pixelated}
  .loupe-hex{
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--signal);
    text-align:center;padding:4px 0;border-top:1px solid var(--line);background:#070b0d;
  }

  /* status readout, top-left of stage */
  .readout{
    position:absolute;top:16px;left:18px;z-index:6;pointer-events:none;
    font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.04em;
    text-shadow:0 0 8px rgba(0,0,0,.9);
  }
  .readout .title{
    color:var(--signal);font-weight:600;letter-spacing:.18em;
    display:flex;align-items:center;gap:7px;margin-bottom:5px;
  }
  .readout .title .tick{width:7px;height:7px;background:var(--signal);
    clip-path:polygon(0 0,100% 0,100% 100%);box-shadow:0 0 8px var(--signal)}
  .readout .row{color:var(--muted)}
  .readout .row b{color:var(--text);font-weight:500}
  .readout .row.live b{color:var(--signal)}

  /* corner ticks on the stage frame */
  .frame-tick{position:absolute;width:14px;height:14px;z-index:6;pointer-events:none;
    border-color:var(--muted-dim);border-style:solid;border-width:0;opacity:.8}
  .ft-tl{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
  .ft-tr{top:10px;right:10px;border-top-width:1px;border-right-width:1px}
  .ft-bl{bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}
  .ft-br{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}

  /* empty / error prompt */
  .prompt{
    position:absolute;z-index:7;text-align:center;max-width:340px;padding:24px;
    font-family:var(--mono);
  }
  .prompt h2{font-size:13px;letter-spacing:.16em;color:var(--signal);font-weight:600;margin-bottom:10px}
  .prompt p{font-size:12px;line-height:1.7;color:var(--muted)}
  .prompt.hidden{display:none}

  /* ---------- PANEL ---------- */
  .panel{
    background:var(--bg-elev);
    overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;
  }
  .panel::-webkit-scrollbar{width:9px}
  .panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
  .panel-head{
    padding:18px 18px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;
    background:var(--bg-elev);z-index:2;
  }
  .panel-head .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
  .panel-head h1{font-size:16px;letter-spacing:.04em;font-weight:600;margin-top:3px}
  .panel-head .sub{font-family:var(--mono);font-size:10.5px;color:var(--muted-dim);margin-top:4px}

  .module{padding:16px 18px;border-bottom:1px solid var(--line-soft)}
  .eyebrow{
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;
  }
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line-soft)}

  /* segmented control */
  .seg{display:flex;gap:0;border:1px solid var(--line);background:#0a1113}
  .seg button{
    flex:1;appearance:none;border:0;background:transparent;color:var(--muted);
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:8px 4px;cursor:pointer;
    border-right:1px solid var(--line);transition:background .12s,color .12s;text-transform:uppercase;
  }
  .seg button:last-child{border-right:0}
  .seg button:hover{color:var(--text)}
  .seg button.active{background:var(--signal);color:#04110e;font-weight:600}
  .seg.amber button.active{background:var(--alert);color:#1a0f00}

  .field{margin-top:13px}
  .field:first-child{margin-top:0}
  .field .lab{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:11px;color:var(--text);margin-bottom:7px;
  }
  .field .lab .val{font-family:var(--mono);font-size:11px;color:var(--signal)}
  .field .hint{font-family:var(--mono);font-size:9.5px;color:var(--muted-dim);margin-top:6px;line-height:1.5}

  /* range */
  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);
    outline:none;cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:13px;height:13px;background:var(--signal);
    border:2px solid var(--bg-elev);box-shadow:0 0 0 1px var(--signal);cursor:pointer;border-radius:0;
  }
  input[type=range]::-moz-range-thumb{
    width:13px;height:13px;background:var(--signal);border:2px solid var(--bg-elev);
    box-shadow:0 0 0 1px var(--signal);cursor:pointer;border-radius:0;
  }

  /* checkbox row */
  .checks{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
  .chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px;color:var(--text);user-select:none}
  .chk input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1px solid var(--muted-dim);
    background:#0a1113;cursor:pointer;position:relative;flex:none}
  .chk input:checked{background:var(--signal);border-color:var(--signal)}
  .chk input:checked::after{content:"";position:absolute;inset:3px;background:#04110e}

  /* color row */
  .colorrow{display:flex;align-items:center;gap:11px}
  .swatch-wrap{position:relative;width:38px;height:30px;flex:none;border:1px solid var(--line)}
  input[type=color]{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer}
  input[type=color]::-webkit-color-swatch-wrapper{padding:0}
  input[type=color]::-webkit-color-swatch{border:0}

  /* buttons */
  .btn{
    width:100%;appearance:none;border:1px solid var(--line);background:#0a1113;color:var(--text);
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:9px;cursor:pointer;text-transform:uppercase;
    transition:border-color .12s,color .12s;
  }
  .btn:hover{border-color:var(--signal);color:var(--signal)}
  .btn.armed{border-color:var(--signal);background:var(--signal);color:#04110e}
  .btn.rec.armed{border-color:var(--alert);background:var(--alert);color:#1a0f00}
  .filemeta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:8px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hide{display:none !important}

  /* select (camera picker) */
  select.select{
    width:100%;appearance:none;-webkit-appearance:none;
    background:#0a1113;color:var(--text);border:1px solid var(--line);
    font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:8px 28px 8px 10px;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 16px) 53%,calc(100% - 11px) 53%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    transition:border-color .12s,color .12s;
  }
  select.select:hover:not(:disabled){border-color:var(--signal);color:var(--signal)}
  select.select:disabled{opacity:.5;cursor:default}
  select.select option{background:#0a1113;color:var(--text)}

  /* recording badge on the stage */
  .rec-badge{
    position:absolute;top:16px;right:18px;z-index:6;pointer-events:none;
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--alert);
    display:flex;align-items:center;gap:7px;text-shadow:0 0 8px rgba(0,0,0,.9);
  }
  .rec-badge .blink{
    width:9px;height:9px;border-radius:50%;background:var(--alert);
    box-shadow:0 0 8px var(--alert);animation:recblink 1s steps(1,end) infinite;
  }
  .rec-badge.hide{display:none}
  @keyframes recblink{50%{opacity:.15}}

  @media (max-width:820px){
    #app{grid-template-columns:1fr;grid-template-rows:1fr auto;height:100dvh}
    .panel{max-height:48vh}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
    .rec-badge .blink{animation:none}
  }