@font-face{font-family:Torus;font-style:normal;font-weight:400;src:url(/fonts/torus-regular.woff2) format('woff2');font-display:swap}
  @font-face{font-family:Torus;font-style:normal;font-weight:600;src:url(/fonts/torus-semibold.woff2) format('woff2');font-display:swap}
  @font-face{font-family:ModeIcons;font-style:normal;font-weight:400;src:url(/fonts/extra-modes.woff2) format('woff2');font-display:swap}
  :root{
    color-scheme:dark;
    --ground:#17141a; --field:#1c1820; --ink:#f2eef4;
    --muted:rgba(242,238,244,.58); --faint:rgba(242,238,244,.48);
    --hair:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.18);
    --pink:#ff66aa; --pink-hi:#ff7fb8;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--ground);color:var(--ink);font-family:Torus,system-ui,sans-serif;
    zoom:1.1;
    -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
  ::selection{background:var(--pink);color:var(--ground)}
  :focus-visible{outline:1px solid var(--pink);outline-offset:2px}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}
  .micro{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:500}

  .split{display:grid;grid-template-columns:380px 1fr;min-height:100vh}
  .rail{padding:26px 24px 22px;display:flex;flex-direction:column}
  .inrow{display:flex;margin-top:8px}
  .inrow input{flex:1;min-width:0;height:42px;background:var(--field);border:1px solid var(--hair2);
    border-right:0;color:var(--ink);font:400 12.5px/1 Torus,sans-serif;padding:0 12px}
  .inrow input::placeholder{color:var(--faint)}
  .inrow input[aria-invalid="true"]{border-color:#ff5a5a}
  .inrow button{width:42px;height:42px;background:var(--pink);border:0;color:var(--ground);
    font-size:15px;font-weight:600;cursor:pointer;transition:background .14s}
  .inrow button:hover{background:var(--pink-hi)}
  .hint{margin:7px 0 0;font-size:11px;line-height:1.4;color:#ff9a9a}
  .hint:empty{display:none}

  .params{margin-top:24px}
  .prow{display:flex;align-items:center;justify-content:space-between;height:46px;
    border-top:1px solid var(--hair)}
  .ctl{display:flex;align-items:center;gap:10px}
  input[type=range]{-webkit-appearance:none;appearance:none;width:104px;height:2px;
    background:linear-gradient(to right,var(--pink) 0 var(--fill,0%),rgba(255,255,255,.16) var(--fill,0%) 100%);
    outline-offset:8px;cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:14px;
    background:var(--pink);border:0;cursor:pointer}
  input[type=range]::-moz-range-thumb{width:9px;height:14px;background:var(--pink);border:0;border-radius:0}
  .val{font-size:11px;font-weight:500;min-width:26px;text-align:right}
  .sel{height:28px;max-width:150px;background:var(--field);border:1px solid var(--hair2);
    color:var(--ink);font:500 11px/1 Torus,sans-serif;padding:0 6px;cursor:pointer}
  .tg{width:36px;height:20px;background:transparent;border:1px solid var(--hair2);padding:0;
    cursor:pointer;position:relative}
  /* hit area 60x44 without moving the 36x20 track */
  .tg::before{content:"";position:absolute;inset:-12px}
  .tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
    background:rgba(255,255,255,.45);transition:transform .16s cubic-bezier(.16,1,.3,1),background .16s}
  .tg[aria-pressed="true"]::after{transform:translateX(16px);background:var(--pink)}

  /* The style list: one block per composition, each carrying its own link. */
  .stage{border-left:1px solid var(--hair);background:var(--field);padding:26px 40px 40px;
    overflow-x:auto}
  /* as many columns as fit, so the stage never ends in a dead margin */
  .styles{list-style:none;margin:0;padding:0;display:grid;align-items:start;max-width:1200px;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px 22px}
  .item{width:auto}
  .item .micro{display:block;margin-bottom:6px}
  .pick{padding:0;border:0;background:none;display:block;cursor:pointer;line-height:0}
  .pick img{display:block;width:100%;height:auto;border:1px solid var(--hair);
    transition:border-color .14s;border-radius:inherit}
  .item[data-round] .pick img{border-radius:16px}
  .item.is-on .pick img{border-color:var(--pink)}
  .item.is-on .lnk{color:var(--pink)}
  .item.is-on .cp{border-color:var(--pink);color:var(--pink)}
  .pick:hover img{border-color:rgba(255,255,255,.34)}
  .row{display:flex;align-items:center;gap:8px;margin-top:7px}
  .snip{flex:1;min-width:0;font:400 10.5px/1.4 var(--mono);color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cp{flex:none;height:28px;padding:0 11px;background:transparent;border:1px solid var(--hair);
    color:var(--muted);font:500 9px/1 Torus,sans-serif;letter-spacing:.14em;text-transform:uppercase;
    cursor:pointer;transition:color .14s,border-color .14s}
  .cp:hover{color:var(--ink);border-color:var(--hair2)}
  .cp[disabled]{opacity:.5;cursor:progress}

  @media (max-width:1120px){
    .split{grid-template-columns:1fr}
    .stage{border-left:0;border-top:1px solid var(--hair);padding:22px 24px 30px}
  }
  @media (prefers-reduced-motion:reduce){
    .tg::after,.pick img{transition:none}
  }

  /* Custom diff dropdown */
  .diff-wrap{position:relative;width:100%}
  .diff-btn{display:flex;align-items:center;gap:7px;width:100%;height:28px;padding:0 8px;
    background:var(--field);border:1px solid var(--hair2);color:var(--ink);
    font:500 11px/1 Torus,sans-serif;cursor:pointer;text-align:left}
  .diff-btn:hover{border-color:var(--hair2)}
  .diff-btn .mi{font-family:ModeIcons;font-size:10px;opacity:.7;flex:none;width:12px}
  .diff-btn .sr{color:var(--pink);font-weight:600;flex:none}
  .diff-btn .vn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .diff-btn .arr{margin-left:4px;flex:none;opacity:.5;font-size:9px}
  .diff-list{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:99;
    background:var(--field);border:1px solid var(--hair2);max-height:220px;overflow-y:auto;
    display:none}
  .diff-list.open{display:block}
  .diff-opt{display:flex;align-items:center;gap:7px;padding:0 8px;height:30px;cursor:pointer;
    font:400 11px/1 Torus,sans-serif;color:var(--ink)}
  .diff-opt:hover{background:rgba(255,255,255,.06)}
  .diff-opt.active{background:rgba(255,255,255,.09)}
  .diff-opt .mi{font-family:ModeIcons;font-size:10px;opacity:.7;flex:none;width:12px}
  .diff-opt .sr{color:var(--pink);font-weight:600;flex:none;min-width:32px}
  .diff-opt .vn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}