:root{
    --paper:#EFEEF4;
    --panel:#FFFFFF;
    --ink:#181722;
    --muted:#78758C;
    --line:#D9D6E3;
    --accent:#4B36F5;
    --signal:#FF3D68;
    --radius:14px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Instrument Sans",system-ui,sans-serif;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{max-width:1180px;margin:0 auto;padding:32px 20px 72px;}

  /* ---------- masthead ---------- */

  .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin:0 0 10px;
  }
  .eyebrow b{color:var(--signal);font-weight:500;}

  h1{
    font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
    font-weight:800;
    font-size:clamp(30px,5.2vw,50px);
    line-height:1.02;letter-spacing:-.03em;
    margin:0 0 10px;max-width:18ch;
  }

  .sub{color:var(--muted);max-width:54ch;margin:0 0 26px;}

  /* ---------- the input bar, pinned ---------- */

  .bar{
    position:sticky;top:0;z-index:20;
    background:var(--paper);
    padding:12px 0 14px;
    margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }

  .bar textarea{
    width:100%;min-height:64px;resize:vertical;
    border:2px solid var(--ink);border-radius:12px;
    padding:14px 16px;
    font-family:"Instrument Sans",system-ui,sans-serif;
    font-size:18px;line-height:1.35;
    color:var(--ink);background:var(--panel);
  }

  .bar .hint{
    font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin:8px 0 0;
  }

  /* ---------- layout ---------- */

  .studio{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:24px;align-items:start;
    margin-top:20px;
  }

  .studio > *{min-width:0;}

  @media (max-width:900px){
    .studio{grid-template-columns:1fr;}
    .stage{order:-1;}
  }

  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
  }

  .panel + .panel{margin-top:16px;}

  /* ---------- the results list ---------- */

  .filter{
    width:100%;
    border:1px solid var(--line);border-radius:10px;
    padding:10px 14px;font:inherit;font-size:14px;
    background:var(--panel);color:var(--ink);
    margin-bottom:14px;
  }

  .grouphead{
    font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);
    margin:26px 0 8px;
  }
  .grouphead:first-of-type{margin-top:0;}

  .row{
    display:flex;align-items:center;gap:12px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:11px;
    margin-bottom:8px;
    overflow:hidden;
  }

  .row.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
  .row.is-hidden{display:none;}

  .row .pick{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:3px;
    align-items:flex-start;
    background:none;border:0;
    padding:14px 16px;
    cursor:pointer;text-align:left;color:var(--ink);
  }

  .row .pick:hover{background:#F5F4FB;}

  .row .line{
    font-size:29px;line-height:1.2;
    width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .row .rname{
    font-family:"IBM Plex Mono",monospace;
    font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);
  }

  .row .png{
    flex:0 0 auto;
    align-self:stretch;
    font-family:"IBM Plex Mono",monospace;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    padding:0 18px;
    border:0;border-left:1px solid var(--line);
    background:none;color:var(--muted);
    cursor:pointer;
  }

  .row .png:hover{background:var(--ink);color:#fff;}

  .empty{
    font-family:"IBM Plex Mono",monospace;
    font-size:11.5px;color:var(--muted);
    padding:28px 4px;
  }

  /* ---------- stage ---------- */

  .stage{position:sticky;top:120px;}
  @media (max-width:900px){.stage{position:static;}}

  .frame{
    position:relative;width:100%;aspect-ratio:9/16;
    border-radius:10px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding:6%;
  }

  .frame.is-clear{
    background-color:#fff;
    background-image:conic-gradient(#E4E1EC 25%,transparent 0 50%,#E4E1EC 0 75%,transparent 0);
    background-size:18px 18px;
  }
  .frame.is-dark{background:#0C0B12;}
  .frame.is-light{background:#FFFFFF;}

  #caption{margin:0;width:100%;word-break:break-word;paint-order:stroke fill;}

  .zones{position:absolute;inset:0;pointer-events:none;display:none;}
  .zones.on{display:block;}
  .zones i{position:absolute;border:1px dashed var(--signal);background:rgba(255,61,104,.07);}
  .zone-top{top:0;left:0;right:0;height:11%;}
  .zone-bottom{bottom:0;left:0;right:0;height:19%;}
  .zone-right{top:11%;bottom:19%;right:0;width:20%;}
  .zones span{
    position:absolute;right:6px;bottom:20%;
    font-family:"IBM Plex Mono",monospace;
    font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--signal);background:rgba(255,255,255,.9);
    padding:2px 5px;border-radius:4px;
  }

  .nowplaying{
    font-family:"IBM Plex Mono",monospace;
    font-size:10px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--muted);text-align:center;margin:12px 0 0;
  }

  .btn{
    width:100%;
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:13px 10px;border-radius:9px;
    border:1px solid var(--ink);background:var(--ink);color:#fff;
    cursor:pointer;margin-top:12px;
  }
  .btn:hover{background:var(--accent);border-color:var(--accent);}

  .note{
    font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;color:var(--muted);
    margin:9px 0 0;min-height:1.4em;text-align:center;
  }

  /* ---------- controls ---------- */

  .ctrl{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
  .ctrl:last-child{margin-bottom:0;}

  .ctrl label{
    font-family:"IBM Plex Mono",monospace;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);flex:0 0 74px;
  }

  .ctrl .val{
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;flex:0 0 40px;text-align:right;
  }

  legend{
    font-family:"IBM Plex Mono",monospace;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);padding:0;margin:0 0 12px;
  }
  fieldset{border:0;margin:0;padding:0;}

  input[type=range]{flex:1;min-width:0;accent-color:var(--accent);}

  select{
    flex:1;min-width:0;font:inherit;font-size:13.5px;
    padding:6px 8px;border:1px solid var(--line);border-radius:8px;
    background:var(--panel);color:var(--ink);
  }

  input[type=color]{
    flex:0 0 42px;height:30px;padding:2px;
    border:1px solid var(--line);border-radius:8px;
    background:var(--panel);cursor:pointer;
  }

  .seg{display:flex;gap:5px;flex:1;}
  .seg button{
    flex:1;
    font-family:"IBM Plex Mono",monospace;
    font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
    padding:7px 3px;border:1px solid var(--line);border-radius:7px;
    background:var(--panel);color:var(--muted);cursor:pointer;
  }
  .seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}

  :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;}

  footer{
    margin-top:48px;padding-top:20px;
    border-top:1px solid var(--line);
    color:var(--muted);font-size:13px;max-width:62ch;
  }
  footer h2{
    font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);margin:0 0 8px;
  }
  footer p{margin:0 0 14px;}
  code{font-family:"IBM Plex Mono",monospace;font-size:12px;background:#E4E1EC;padding:1px 5px;border-radius:4px;}
  pre{
    background:#E4E1EC;border-radius:8px;padding:12px;overflow-x:auto;
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.6;color:var(--ink);
  }

  @media (prefers-reduced-motion:no-preference){
    .row,.btn,.seg button,.png{transition:background .12s ease,color .12s ease,border-color .12s ease;}
  }