/* ---- embedded typefaces --------------------------------------------------
       Self-hosted rather than linked, so the page renders identically on every
       OS and still works with no network.

       What this replaces was entirely platform-proprietary: Avenir Next
       Condensed and SF Mono ship only on Apple systems and Consolas only on
       Windows, so the same page was three different designs depending on where
       it was opened — and on Linux it fell all the way back to generic
       sans-serif. Roboto Condensed and JetBrains Mono are the closest open-licensed
       stand-ins at the same 0.6em monospace advance, so nothing reflows.

       These are the variable files, one per subset, declaring a weight range
       rather than a value. The UI uses five weights (400, 500, 600, 700, 800);
       shipping static 400 and 700 would have been slightly smaller but left the
       other three to be faux-bolded by the browser, which smears badly at the
       letter-spacing these headings use.

       Latin, Latin Extended and Greek are covered — the Chaos Engine's rho needs
       the last of those. CJK, emoji, arrows and box-drawing exist in no Latin
       webfont and still come from the system, which is correct.

       JetBrains Mono rather than Roboto Mono for the monospace: Roboto Mono has
       no U+2192, and the chord readout joins every progression with an arrow.

       SIL Open Font License 1.1 — see fonts/OFL.txt. */
    @font-face {
      font-family: 'Roboto Condensed';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(fonts/robotocondensed-greek.woff2) format('woff2');
      unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }
    @font-face {
      font-family: 'Roboto Condensed';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(fonts/robotocondensed-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Roboto Condensed';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url(fonts/robotocondensed-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 100 800;
      font-display: swap;
      src: url(fonts/jetbrainsmono-greek.woff2) format('woff2');
      unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 100 800;
      font-display: swap;
      src: url(fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 100 800;
      font-display: swap;
      src: url(fonts/jetbrainsmono-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* 1874 — sakura on sumi ink. Blossom pink and deep plum for the titles and readouts,
       gold leaf for the controls: slider tracks, values, selections. */
    :root{
      --panel:#241a22; --panel-2:#31232c; --panel-3:#1c1319;
      --ink:#ffeef3; --ink-dim:#b79aa6;
      --sakura:#ffb7c5; --sakura-dim:#a8677c;
      --plum:#e75480; --plum-hi:#ffd0dd; --gold:#f0c987; --gold-hi:#ffe4a8; --gold-dim:#a8844a; --matcha:#9ec7a0;
      --red:#ff6b6b;
      --line:#43303a; --bevel:#5c414e; --lip:#150e13;
      --lcd:#150e13;
      --disp:"Roboto Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;
      --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--disp);
      background:
        radial-gradient(1200px 520px at 50% -10%, rgba(231,84,128,.10), transparent),
        radial-gradient(900px 420px at 82% 110%, rgba(240,201,135,.06), transparent),
        #150e13;
      color: var(--ink);
      padding: 24px 12px 48px;
      min-height: 100vh;
    }
    .app-container {
      max-width: 960px;
      margin: 0 auto;
      position: relative;
      background: linear-gradient(180deg, var(--panel-2), var(--panel) 12%, var(--panel) 88%, #1b1219);
      border: 1px solid #0c080a;
      border-radius: 10px;
      box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 46px rgba(231,84,128,.07), inset 0 1px 0 var(--bevel);
      padding: 20px 22px 26px;
    }
    .app-header { position: relative; margin-bottom: 18px; }
    .brand {
      display: flex; align-items: center; justify-content: center;
      gap: 15px; padding: 0 206px; flex-wrap: wrap;   /* room for More on the left, App Store + help on the right */
    }
    .brand-icon {
      width: 52px; height: 52px; display: block; flex-shrink: 0;
      border-radius: 11px;
      box-shadow: 0 3px 12px rgba(0,0,0,.55), 0 0 20px rgba(255,183,197,.22);
    }
    h1 {
      font-size: 30px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; margin-bottom: 3px;
      text-shadow: 0 0 18px rgba(255,183,197,.22);
    }
    h1 em { font-style: normal; color: var(--plum); text-shadow: 0 0 18px rgba(231,84,128,.4); }
    .tagline { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); }
    .brand-text { text-align: left; }
    /* Header controls sit as one group in the top-right corner; the brand's
       horizontal padding above is sized to keep the title clear of them. */
    .header-actions {
      position: absolute; top: 0; right: 0;
      display: flex; align-items: center; gap: 8px;
    }
    .help-btn {
      width: 32px; height: 32px; padding: 0; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; border-radius: 50%;
      font-size: 15px; line-height: 1; letter-spacing: 0; color: var(--sakura);
      background: linear-gradient(180deg, #3a2831, #2a1d24);
      box-shadow: 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
    }
    .help-btn:hover { border-color: var(--sakura); color: var(--sakura); }
    .store-btn {
      display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
      height: 32px; padding: 0 13px; border-radius: 16px;
      font-size: 11px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; white-space: nowrap; color: var(--sakura);
      background: linear-gradient(180deg, #3a2831, #2a1d24);
      box-shadow: 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
    }
    .store-btn:hover { border-color: var(--sakura); color: var(--sakura); }
    .store-btn svg { display: block; flex-shrink: 0; }
    /* The labelled pill needs ~206px reserved either side of the brand to keep
       the title centred and clear of it; below 1000px that reservation would
       make the title wrap, so the label drops and the button becomes a circle
       matching the help icon (as in 91 Rock). */
    @media (max-width: 1000px) {
      .brand { padding: 0 86px; }
      .store-btn { width: 32px; padding: 0; justify-content: center; border-radius: 50%; }
      .store-btn .store-label { display: none; }
    }
    .store-soon {
      font-size: 22px !important; letter-spacing: .12em; text-align: center;
      color: var(--sakura) !important; margin: 26px 0 8px;
      text-shadow: 0 0 18px rgba(255,183,197,.3);
    }
    .store-fine { text-align: center; margin-bottom: 10px; }

    /* --- modals --- */
    .modal-backdrop {
      position: fixed; inset: 0; background: rgba(12, 7, 10, .84);
      display: flex; align-items: center; justify-content: center;
      padding: 24px 14px; z-index: 50;
    }
    .modal-backdrop[hidden] { display: none; }
    .modal {
      position: relative; width: min(680px, 100%); max-height: 84vh; overflow-y: auto;
      background: linear-gradient(180deg, var(--panel-2), var(--panel) 10%, var(--panel) 90%, #1b1219);
      border: 1px solid #0c080a; border-radius: 10px;
      box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 40px rgba(231,84,128,.07), inset 0 1px 0 var(--bevel);
      padding: 0 26px 26px; color: var(--ink);
      scrollbar-width: thin; scrollbar-color: var(--bevel) #1b1219;
    }
    .modal::-webkit-scrollbar { width: 10px; }
    .modal::-webkit-scrollbar-track { background: #1b1219; border-radius: 6px; margin: 6px 0; }
    .modal::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #4e3641, #33232b);
      border: 1px solid #0c080a; border-radius: 6px; box-shadow: inset 0 1px 0 var(--bevel);
    }
    .modal::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6b4854, #402c35); }
    .modal::-webkit-scrollbar-thumb:active { background: var(--sakura); }
    .modal-head {
      position: sticky; top: 0; z-index: 3; margin: 0 -26px 12px; padding: 16px 26px 12px;
      background: var(--panel-2); border-bottom: 1px solid var(--line);
      display: flex; align-items: center; gap: 14px;
    }
    .modal h2 { color: var(--sakura); font-size: 15px; letter-spacing: .2em; flex: 1; min-width: 0; margin: 0; padding: 0; }
    .modal h3 { color: var(--plum); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin: 18px 0 6px; }
    .modal p, .modal li { font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--ink-dim); }
    .modal b { color: var(--ink); font-weight: 400; }
    .modal i { color: var(--gold); font-style: normal; }
    .modal ul, .modal ol { margin: 4px 0 0 18px; }
    .modal li { margin-bottom: 3px; }
    .modal-lead { color: var(--ink); }
    .modal-credit { color: var(--sakura); margin-top: 6px; }
    .modal-credit b { color: var(--sakura); }
    .modal-fine { font-size: 10.5px; margin-top: 12px; opacity: .8; }
    .modal a { color: var(--plum); }
    .modal-close {
      flex-shrink: 0; width: 30px; height: 30px; padding: 0;
      display: flex; align-items: center; justify-content: center; letter-spacing: 0;
      font-size: 18px; line-height: 1; border-radius: 5px; color: var(--ink-dim); background: var(--panel-3);
    }
    .modal-close:hover { color: var(--red); border-color: var(--red); }

    /* --- export: single-file vs stems --- */
    .export-choice { display: grid; gap: 10px; margin: 4px 0 14px; }
    .choice-btn {
      display: block; width: 100%; text-align: left;
      padding: 13px 15px; border-radius: 8px;
      border: 1px solid var(--line); background: var(--panel-3);
      letter-spacing: normal; text-transform: none; font-weight: 400;
      box-shadow: inset 0 1px 0 #3a2831;
    }
    .choice-btn:hover:not(:disabled) { border-color: var(--sakura); background: #241820; }
    .choice-btn .choice-name {
      display: block; font-family: var(--disp); font-size: 13px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase; color: var(--sakura);
    }
    .choice-btn .choice-desc {
      display: block; margin-top: 5px; font-family: var(--mono); font-size: 11px;
      line-height: 1.6; color: var(--ink-dim);
    }

    /* --- export progress dialog --- */
    .modal-narrow { width: min(420px, 100%); max-height: none; }
    .export-stage { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink); margin: 4px 0 12px; }
    .export-bar {
      box-sizing: border-box; height: 12px; background: #150e13;
      border: 1px solid rgba(255,183,197,.45); border-radius: 4px;
      box-shadow: inset 0 1px 3px #000; overflow: hidden;
    }
    .export-bar > span {
      display: block; height: 100%; width: 0; border-radius: 3px;
      background: linear-gradient(90deg, var(--sakura-dim), var(--sakura)); transition: width .15s ease-out;
    }
    .modal.indeterminate .export-bar > span { width: 34% !important; transition: none; animation: export-sweep 1.05s ease-in-out infinite; }
    @keyframes export-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
    .modal.error .export-bar > span { background: var(--red); }
    .modal.error .export-stage { color: var(--red); }
    .export-detail { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-dim); margin-top: 12px; min-height: 1em; }
    @media (prefers-reduced-motion: reduce) { .modal.indeterminate .export-bar > span { animation: none; width: 100% !important; opacity: .5; } }

    /* --- the "More" button, and the apps directory it opens --- */
    /* In the header's top-left corner, mirroring the help button on the right;
       the brand's side padding reserves the room on both sides so the title
       stays centred. */
    .more-fab {
      position: absolute; left: 0; top: 0; z-index: 2;
      padding: 8px 14px; border-radius: 16px; font-size: 11px; letter-spacing: .18em;
      text-transform: uppercase; color: var(--sakura);
      background: linear-gradient(180deg, #3a2831, #2a1d24);
      box-shadow: 0 4px 16px rgba(0,0,0,.55), 0 0 18px rgba(255,183,197,.12), 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
    }
    .more-fab:hover { border-color: var(--sakura); color: var(--sakura); }
    /* the More Apps dialog: a large frame onto the shared app directory, with
       the dialog's own chrome reduced to the title bar */
    .modal-frame {
      width: min(1100px, 100%); height: min(86vh, 900px); max-height: none;
      overflow: hidden; display: flex; flex-direction: column; padding: 0;
    }
    .modal-frame .modal-head { margin: 0; position: static; }
    .apps-wrap { flex: 1; position: relative; display: flex; min-height: 0; }
    .apps-frame { flex: 1; width: 100%; border: 0; background: #150e13; border-radius: 0 0 10px 10px; }
    /* Covers the frame while the directory loads, so the dialog is never an
       unexplained dark rectangle. Same ground as the frame, so it simply gives
       way when the page arrives. */
    .apps-loading {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 14px;
      background: #150e13; border-radius: 0 0 10px 10px;
      font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-dim);
      transition: opacity .25s ease;
    }
    .apps-loading[hidden] { display: none; }
    .apps-loading.leaving { opacity: 0; }
    .apps-spinner {
      width: 30px; height: 30px; border-radius: 50%;
      border: 2px solid rgba(255,183,197,.18); border-top-color: var(--sakura);
      box-shadow: 0 0 14px rgba(231,84,128,.15);
      animation: apps-spin .9s linear infinite;
    }
    @keyframes apps-spin { to { transform: rotate(360deg); } }
    .apps-loading.slow .apps-spinner { border-top-color: var(--gold); }
    .apps-loading-link { color: var(--plum); text-decoration: none; }
    .apps-loading-link:hover { text-decoration: underline; }
    .apps-loading-link[hidden] { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .apps-spinner { animation: none; border-top-color: rgba(255,183,197,.18); border-color: var(--sakura); opacity: .6; }
      .apps-loading { transition: none; }
    }
    .modal-open-tab {
      font-family: var(--mono); font-size: 11px; color: var(--plum); text-decoration: none;
      white-space: nowrap; opacity: .85;
    }
    .modal-open-tab:hover { opacity: 1; text-decoration: underline; }

    /* --- section chrome --- */
    h2 {
      color: var(--sakura); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
      border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; font-weight: 700;
    }
    h2 span { color: var(--ink-dim); letter-spacing: .12em; }
    .section {
      background: var(--panel-3); border: 1px solid #0c080a; border-radius: 6px;
      box-shadow: inset 0 1px 0 #3a2831, inset 0 2px 12px rgba(0,0,0,.5);
      padding: 14px 16px 16px; margin-bottom: 14px;
    }
    .controls-row, .seq-controls, .effects-row, .algo-select {
      display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
    }

    /* --- buttons --- */
    button {
      appearance: none; font-family: var(--disp); font-size: 13px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
      background: linear-gradient(180deg, #3a2831, #2a1d24);
      border: 1px solid #0c080a; border-radius: 5px; padding: 10px 15px; cursor: pointer;
      box-shadow: 0 3px 0 var(--lip), inset 0 1px 0 var(--bevel);
      transition: border-color .1s, transform .05s, box-shadow .05s, color .1s;
    }
    button:hover:not(:disabled) { border-color: var(--sakura-dim); }
    button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip), inset 0 1px 0 var(--bevel); }
    button:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; }
    button:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-primary {
      background: linear-gradient(180deg, #ffc9d6, #e75480);
      color: #2a0f18; border-color: #4a1a28;
      box-shadow: 0 3px 0 #5c2233, inset 0 1px 0 rgba(255,255,255,.35), 0 0 20px rgba(231,84,128,.25);
    }
    .btn-secondary { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: none; }
    button.playing { color: var(--gold); border-color: var(--gold); }

    /* --- LCD readouts --- */
    .info-box {
      background: var(--lcd); border-radius: 3px; box-shadow: inset 0 2px 12px #000;
      padding: 8px 11px; margin-top: 10px; font-family: var(--mono); font-size: 11.5px;
      line-height: 1.7; color: var(--sakura); text-shadow: 0 0 7px rgba(255,183,197,.35);
      font-variant-numeric: tabular-nums;
    }
    .info-box b { color: var(--sakura); font-weight: 700; }
    /* Form sections — the one playing lights up plum */
    .arr-sec {
      padding: 0 4px; border-radius: 3px; white-space: nowrap;
      transition: color .12s, background .12s, box-shadow .12s, text-shadow .12s;
    }
    .arr-sec.playing {
      color: #2a0f18; background: var(--plum); font-weight: 700;
      text-shadow: none; box-shadow: 0 0 11px rgba(231,84,128,.6);
    }
    .chords { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); margin-top: 8px; line-height: 1.8; }
    .chords .lbl { text-transform: uppercase; letter-spacing: .2em; }
    .chords b { color: var(--gold); font-weight: 400; }

    /* --- instrument cards --- */
    .synth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
    .operator-card {
      background: linear-gradient(180deg, #2a1d25, #211620); border: 1px solid #0c080a;
      border-radius: 6px; box-shadow: inset 0 1px 0 #43303a; padding: 10px 11px 11px;
    }
    .operator-card h3 {
      margin: 0 0 8px 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--plum); border-bottom: 1px solid var(--line); padding-bottom: 6px;
    }
    .operator-card label {
      display: flex; justify-content: space-between; align-items: center; font-size: 10.5px;
      letter-spacing: .14em; text-transform: uppercase; margin: 5px 0; color: var(--ink-dim); gap: 6px;
    }
    .operator-card input[type="range"] { width: 78px; }
    .operator-card select.synth-sel { flex: 1; min-width: 0; margin-left: 6px; }
    .operator-card .val { width: 34px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--gold); font-variant-numeric: tabular-nums; }

    /* --- presets --- */
    .preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin-top: 10px; }
    .preset-btn {
      font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em;
      text-transform: uppercase; color: var(--ink); background: var(--panel-3);
      border: 1px solid var(--line); border-radius: 4px; padding: 8px 11px; box-shadow: inset 0 1px 0 #3a2831;
    }
    .preset-btn:hover { border-color: var(--gold-dim); }
    .preset-btn.on { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(240,201,135,.3); }
    .preset-btn.edited::after { content: ' *'; color: var(--sakura); }

    /* --- sequencer --- */
    .sequencer { display: grid; gap: 4px; margin-top: 10px; }
    .seq-line { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; }
    .seq-row { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
    .seq-step {
      aspect-ratio: 1; background: #150e13; border: 1px solid rgba(255,183,197,.3);
      border-radius: 3px; box-shadow: inset 0 1px 2px #000; cursor: pointer;
      transition: background .1s, box-shadow .1s, border-color .1s;
    }
    .seq-step:nth-child(4n+1) { background: #22161c; border-color: rgba(255,183,197,.5); }
    .seq-step:hover { border-color: var(--gold); }
    .seq-step.active {
      background: linear-gradient(180deg, #ffc9d6, #d4577e); border-color: #ffdde6;
      box-shadow: 0 0 9px rgba(231,84,128,.5), inset 0 1px 0 rgba(255,255,255,.3);
    }
    .seq-step.playing { border-color: var(--gold); box-shadow: 0 0 12px rgba(240,201,135,.75), inset 0 0 7px rgba(240,201,135,.3); }
    .seq-note { width: 100%; }

    /* --- keyboard --- */
    .keyboard {
      display: flex; justify-content: safe center; gap: 2px; margin-top: 10px; padding: 12px 10px;
      background: var(--panel-3); border: 1px solid #0c080a; border-radius: 6px;
      box-shadow: inset 0 2px 12px #000; overflow-x: auto;
      -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    }
    .key {
      width: 40px; height: 120px;
      background: linear-gradient(to bottom, #f6e7ea, #cdb2bb);
      border: 1px solid #0c080a; border-radius: 0 0 4px 4px;
      box-shadow: inset 0 -6px 8px rgba(0,0,0,.18); cursor: pointer;
      display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
      color: #5c414e; font-family: var(--mono); font-size: 9.5px; transition: all 0.1s;
      flex-shrink: 0; user-select: none; touch-action: none;
    }
    .key.black {
      width: 28px; height: 80px; background: linear-gradient(to bottom, #31232c, #150e13);
      margin-left: -15px; margin-right: -15px; z-index: 1; color: var(--ink-dim);
      box-shadow: inset 0 -4px 6px rgba(0,0,0,.6);
    }
    .key.pressed { background: linear-gradient(to bottom, #ffc9d6, #e75480); box-shadow: 0 0 16px rgba(231,84,128,.5); color: #2a0f18; }

    /* --- labelled controls --- */
    .effects-row label, .gen-controls label {
      display: flex; flex-direction: column; align-items: center; font-size: 10.5px;
      letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); gap: 5px;
    }
    /* One column per control, however many there are, so the rack stays a single
       row instead of orphaning the last fader onto a line of its own. */
    .effects-row {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 10px 12px;
      align-items: end;
    }
    /* the labels have to survive ~115px columns: tighter tracking, and a long
       one ("Echo Feedback") wraps rather than overflowing its column */
    .effects-row > label { letter-spacing: .08em; text-align: center; min-width: 0; }
    .effects-row input[type="range"] { width: 100%; min-width: 0; }
    .gen-controls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
    .gen-controls .readout { font-family: var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }
    .ctl-group { display: flex; gap: 12px; align-items: flex-end; }
    .ctl-group .checkbox { padding-bottom: 5px; }
    /* The generator rows fill the panel. Left to their content width they
       stopped two-thirds of the way across and left a dead strip on the right;
       now every control takes a share of the width — the menus and sliders
       widen, the key menu (three characters at most) takes a smaller share,
       and in the transport row the buttons grow while the checkboxes keep
       their natural size. Phones keep their own two-column grid below. */
    .gen-controls > label, .gen-controls > .ctl-group { flex: 1 1 auto; }
    .gen-controls > label.ctl-narrow { flex: 0.35 1 auto; }
    .gen-controls > label select, .gen-controls > label input[type="range"] { width: 100%; }
    .gen-controls > .ctl-group > label { flex: 1 1 auto; }
    .gen-controls > .ctl-group input[type="text"] { width: 100%; }
    .gen-row > button { flex: 1 1 auto; }
    .lock-btn {
      width: 30px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center;
      letter-spacing: 0; line-height: 1; flex-shrink: 0; color: var(--ink-dim);
    }
    .lock-btn .ico { display: block; }
    .lock-btn .ico-shut, .lock-btn[aria-pressed="true"] .ico-open { display: none; }
    .lock-btn[aria-pressed="true"] .ico-shut { display: block; }
    .lock-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: #33291d; }
    .checkbox { flex-direction: row !important; gap: 7px !important; align-items: center !important; color: var(--ink-dim); }
    .checkbox input { accent-color: var(--gold); }

    /* --- ensemble selector (below the mixer) --- */
    .kit-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
    .kit-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); flex-shrink: 0; }
    .kit-grid { display: flex; gap: 8px; flex-wrap: wrap; }
    .sample-state { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
    .sample-state.on { color: var(--matcha); }
    .sample-state.err { color: var(--red); }
    .kit-btn {
      font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em;
      text-transform: uppercase; color: var(--ink); background: var(--panel-3);
      border: 1px solid var(--line); border-radius: 4px; padding: 7px 12px; box-shadow: inset 0 1px 0 #3a2831;
    }
    .kit-btn:hover { border-color: var(--gold-dim); }
    .kit-btn.on { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(240,201,135,.3); }

    /* --- mixer --- */
    .mixer { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; margin-top: 14px; }
    .mixer-strip {
      background: linear-gradient(180deg, #2a1d25, #211620); border: 1px solid #0c080a; border-radius: 6px;
      box-shadow: inset 0 1px 0 #43303a; padding: 10px 9px; text-align: center;
    }
    .mixer-strip .name { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
    .mixer-strip input[type="range"] { width: 100%; }
    .mixer-strip button {
      margin-top: 6px; padding: 3px 10px; font-family: var(--mono); font-size: 10px; font-weight: 400;
      letter-spacing: .06em; background: var(--panel-3); border-color: var(--line); box-shadow: inset 0 1px 0 #3a2831;
    }
    .mixer-strip.muted { opacity: 0.45; }
    .mixer-strip.muted button { color: var(--red); border-color: var(--red); }

    /* --- sliders --- */
    input[type="range"] { appearance: none; -webkit-appearance: none; height: 22px; background: transparent; cursor: pointer; }
    input[type="range"]::-webkit-slider-runnable-track {
      box-sizing: border-box; height: 6px; background: #150e13;
      border: 1px solid rgba(240,201,135,.42); border-radius: 3px; box-shadow: inset 0 1px 2px #000;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 12px; height: 20px; margin-top: -7px; border-radius: 3px;
      background: linear-gradient(180deg, #ffc9d6, #d4577e); border: 1px solid #150e13;
      box-shadow: 0 2px 3px rgba(0,0,0,.6), 0 0 8px rgba(231,84,128,.3);
    }
    input[type="range"]::-moz-range-track { box-sizing: border-box; height: 6px; background: #150e13; border: 1px solid rgba(240,201,135,.42); border-radius: 3px; }
    input[type="range"]::-moz-range-thumb { width: 12px; height: 20px; border-radius: 3px; background: #ffb7c5; border: 1px solid #150e13; }
    input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* --- fields --- */
    select, input[type="number"], input[type="text"] {
      font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--panel-3);
      border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; box-shadow: inset 0 1px 0 #3a2831;
    }
    select:hover, input:hover { border-color: var(--sakura-dim); }
    select:focus-visible, input:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; }

    /* --- misc --- */
    footer {
      margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px;
      display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px;
      font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    }
    footer a { color: var(--sakura); text-decoration: none; }
    footer a:hover { color: var(--gold); text-decoration: underline; }
    footer a:focus-visible { outline: 2px solid var(--sakura); outline-offset: 3px; }
    footer .sep { color: var(--line); }

    #chaos-scope, #visualizer {
      width: 100%;
      background: radial-gradient(ellipse at center, #2a1620 0%, #150e13 80%);
      border: 1px solid #0c080a; border-radius: 3px; box-shadow: inset 0 2px 12px #000;
      margin-top: 10px; display: block;
    }
    .hint { text-align: center; color: var(--ink-dim); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; margin-top: 10px; }
    .progress {
      box-sizing: border-box; height: 7px; background: #150e13; border: 1px solid rgba(255,183,197,.42);
      border-radius: 3px; box-shadow: inset 0 1px 2px #000; margin-top: 12px; overflow: hidden;
    }
    .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--plum)); }

    /* ---- loading screen (as in 91 Rock) ----------------------------------
       Covers the page while the drum recordings download and decode. It sits
       above everything, is in the markup from the first paint, and takes
       itself away when the samples are in. */
    .boot {
      position: fixed; inset: 0; z-index: 200;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      background:
        radial-gradient(900px 420px at 50% 32%, #33202b, transparent),
        var(--panel-3);
      transition: opacity .45s ease, visibility .45s ease;
    }
    .boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
    .boot-panel { width: min(420px, 100%); text-align: center; }
    .boot-icon {
      width: 72px; height: 72px; border-radius: 16px; margin-bottom: 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 34px rgba(255,183,197,.25);
    }
    .boot-title {
      font-size: 27px; letter-spacing: .04em; text-transform: uppercase;
      color: var(--ink); margin-bottom: 5px;
    }
    .boot-title em { font-style: normal; color: var(--plum); }
    .boot-tag {
      font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase;
      color: var(--ink-dim); margin-bottom: 22px;
    }
    .boot-bar {
      box-sizing: border-box; height: 8px; background: var(--lcd);
      border: 1px solid rgba(240,201,135,.45); border-radius: 4px;
      box-shadow: inset 0 1px 3px #000; overflow: hidden;
    }
    .boot-bar > span {
      display: block; height: 100%; width: 0;
      background: linear-gradient(90deg, var(--sakura-dim), var(--sakura));
      box-shadow: 0 0 12px rgba(255,183,197,.5);
      /* short, so a bar that ticks once per file keeps up with its number */
      transition: width .08s linear;
    }
    .boot-status {
      margin-top: 12px; font-family: var(--mono); font-size: 11px;
      letter-spacing: .06em; color: var(--gold);
    }
    .boot.failed .boot-status { color: var(--red); }
    .boot-fine {
      margin-top: 7px; font-size: 10px; letter-spacing: .1em; color: var(--ink-dim);
    }
    @media (prefers-reduced-motion: reduce) {
      .boot, .boot-bar > span { transition: none; }
    }

    @media (max-width: 560px) {
      .boot-title { font-size: 22px; }
      .boot-icon { width: 60px; height: 60px; }
      .brand { gap: 11px; padding: 0 78px; }   /* two 32px circles on the right */
      .brand-icon { width: 42px; height: 42px; }
      .brand-text { text-align: center; }
      h1 { font-size: 23px; }
      .tagline { font-size: 10px; letter-spacing: .12em; }
      body { padding: 12px 8px 32px; }
      .app-container { padding: 14px 12px 18px; }
      .section { padding: 12px 11px 13px; }
      /* seven faders across a phone would be 40px each — go back to two columns
         (grid-auto-flow has to be reset, or the columns keep marching sideways) */
      .gen-controls, .effects-row {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
      }
      .effects-row > label { letter-spacing: .14em; }
      .gen-controls > label, .effects-row > label { width: 100%; }
      .gen-controls > .ctl-group { width: 100%; }
      .ctl-group > label:first-child { flex: 1 1 auto; min-width: 0; }
      .gen-controls select, .gen-controls input[type="text"] { width: 100%; }
      .gen-controls .checkbox, .seq-controls .checkbox { justify-content: center; }
      .controls-row button, .seq-controls button { flex: 1 1 auto; }
      input[type="range"] { height: 28px; }
      .checkbox { min-height: 34px; padding: 4px 8px; }
      .checkbox input[type="checkbox"] { width: 20px; height: 20px; }
      .mixer-strip button { padding: 7px 12px; font-size: 11px; }
      .preset-btn { padding: 11px 8px; }
      .sequencer { overflow-x: auto; padding-bottom: 6px; }
      .seq-line { min-width: 470px; grid-template-columns: 62px 1fr; }
      .seq-note { font-size: 10px; padding: 5px 4px; }
      .synth-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
      .operator-card { padding: 8px 7px 9px; }
      .operator-card input[type="range"] { width: 100%; min-width: 0; }
      .operator-card label { font-size: 9.5px; letter-spacing: .08em; gap: 4px; }
      .operator-card .val { width: 26px; font-size: 9.5px; }
      .keyboard { justify-content: flex-start; padding: 10px 6px; }
      .key { width: 46px; height: 132px; touch-action: pan-x; }
      .key.black { width: 32px; height: 88px; margin-left: -17px; margin-right: -17px; }
      .mixer { grid-template-columns: 1fr 1fr; }
      footer { gap: 9px; font-size: 9.5px; letter-spacing: .14em; }
      .modal { padding: 0 15px 20px; }
      .modal-head { margin: 0 -15px 12px; padding: 14px 15px 10px; }
      .modal-frame { padding: 0; height: 88vh; }
      .modal-frame .modal-head { margin: 0; padding: 14px 15px 10px; }
      .more-fab { padding: 7px 11px; font-size: 10px; }
    }