/* ---- 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;
    }

    /* '43 — black lacquer, brass and a neon sign over the door. Art Deco gold on
       a midnight panel for the band, electric teal for everything that belongs
       to the club. The old variable names are kept (cyan is the primary accent,
       magenta the secondary) so every shared rule below still reads. */
    /* The palette. Two neons over a deep indigo panel, which is the whole
       visual vocabulary of this music and has been since the cover of a
       Miami Vice soundtrack.

       `--neon` (magenta) is the accent and carries everything the user is
       doing — the active rack, a pressed key, the primary button. `--ice`
       (cyan) is the secondary and carries everything the MACHINE is doing:
       the section headings, the playing indicator, the oscilloscope trace,
       the drum machines. Keeping that division is what stops a page with two
       saturated colours on it from being a mess.

       `--sun` is the gold at the top of the icon's sun, and it keeps the page
       from being all pink: it heads every panel and carries every readout,
       and the sun's own gradient — gold, orange, neon — is the face of the
       primary controls: the Write button, the slider thumbs, a lit step and a
       pressed key. */
    :root{
      --panel:#16102a; --panel-2:#1b1433; --panel-3:#0b0616;
      --ink:#f4ecff; --ink-dim:#9d92b8;
      --neon:#ff2d95; --neon-dim:#b3155f;
      --ice:#3df5ff; --ice-hi:#a8faff; --electric:#c9349a;
      --glow:#ff2d95;
      --hot:#ff6ec7; --hot-dim:#7a1a4a;
      --glow-hi:#ffa8dc; --red:#ff4d6d;
      --line:#32234f; --bevel:#4a3170; --lip:#05070a;
      --lcd:#090418;
      --sun:#ffe259; --sun-mid:#ff9a3c; --sun-dim:#b8862a;
      --sunset: linear-gradient(180deg, #ffd84a, #ff9a3c 50%, #ff2d95);
      --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);
      /* The page surround: the sunset, the horizon and the grid.

         Four layers, back to front. A magenta-to-indigo sunset filling the top
         two thirds; a hard cyan horizon line at 62% of the viewport; and below
         it a perspective grid, drawn as two repeating-linear-gradients rather
         than as an image so it costs nothing and scales to any screen. The
         vertical lines of the grid converge because the gradient is angled;
         the horizontal ones get closer together toward the horizon because
         their repeat interval shrinks, which is the whole trick and the only
         part of this that is not a one-liner.

         Fixed, because every one of those measurements is in viewport units.
         Left to scroll, the horizon drifts off the top of a long page and the
         grid ends up on the ceiling. */
      background:
        /* the grid's horizontal rules, tightening toward the horizon */
        repeating-linear-gradient(
          to top,
          rgba(61,245,255,.16) 0 1px, transparent 1px 44px) 0 100% / 100% 38vh no-repeat,
        /* the grid's verticals, fanned out from the vanishing point */
        repeating-linear-gradient(
          100deg, rgba(255,45,149,.13) 0 1px, transparent 1px 58px) 0 100% / 100% 38vh no-repeat,
        /* the horizon itself */
        linear-gradient(to bottom,
          transparent 0 61.6vh, rgba(61,245,255,.55) 61.6vh 62vh, transparent 62vh) 0 0 / 100% 100% no-repeat,
        /* and the sun going down behind all of it */
        radial-gradient(ellipse 120vw 58vh at 50% 62vh,
          #ff2d95 0%, #7a2199 34%, #2a0b4a 62%, #07030f 100%);
      background-attachment: fixed;
      background-color: #07030f;
      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%, #0d0720);
      border: 1px solid #000;
      border-radius: 10px;
      box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 40px rgba(255,45,149,.05), inset 0 1px 0 var(--bevel);
      padding: 20px 22px 26px;
    }
    /* A double hairline under the header — the most Art Deco thing a rule can do. */
    .app-header {
      position: relative; margin-bottom: 18px; padding-bottom: 14px;
      border-bottom: 1px solid var(--hot-dim);
      box-shadow: 0 3px 0 -2px var(--panel), 0 4px 0 -2px rgba(255,45,149,.28);
    }
    .brand {
      display: flex; align-items: center; justify-content: center;
      gap: 15px; padding: 0 206px; flex-wrap: wrap;
    }
    .brand-icon {
      width: 52px; height: 52px; display: block; flex-shrink: 0;
      /* the icon's own corner — 22.37% is the iOS app-icon radius, and a
         percentage keeps it right at every size the icon is drawn */
      border-radius: 22.37%;
      box-shadow: 0 3px 12px rgba(0,0,0,.6), 0 0 18px rgba(255,45,149,.25);
    }
    /* The title is the one place on the page that gets the full treatment:
       two magenta glows at different radii, which is what a neon tube actually
       looks like — a tight core and a wide haze — rather than one blur that
       reads as a drop shadow. */
    h1 {
      font-size: 30px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; margin-bottom: 3px;
      text-shadow: 0 0 6px rgba(255,45,149,.75), 0 0 26px rgba(255,45,149,.35);
    }
    h1 .sun {
      color: var(--sun);
      text-shadow: 0 0 6px rgba(255,226,89,.7), 0 0 26px rgba(255,154,60,.35);
    }
    h1 em {
      font-style: normal; color: var(--ice);
      text-shadow: 0 0 6px rgba(61,245,255,.8), 0 0 26px rgba(61,245,255,.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 below 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(--neon);
      background: linear-gradient(180deg, #2a1f4d, #171029);
      box-shadow: 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
    }
    .help-btn:hover { border-color: var(--neon); color: var(--neon); }
    .store-btn {
      display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
      height: 32px; padding: 0 13px; border-radius: 16px;
      font-family: var(--disp); font-size: 11px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
      color: var(--neon); text-decoration: none;
      background: linear-gradient(180deg, #2a1f4d, #171029);
      border: 1px solid #000;
      box-shadow: 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
      transition: border-color .1s, color .1s;
    }
    .store-btn:hover { border-color: var(--neon); color: var(--neon); }
    .store-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
    .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, and below roughly 1000px that reservation is
       what makes the title wrap. So the label drops at exactly that point and the
       button becomes a circle matching the help icon, which needs only ~82px. */
    @media (max-width: 1000px) {
      .brand { padding: 0 82px; }
      .store-btn { width: 32px; padding: 0; justify-content: center; border-radius: 50%; }
      .store-btn .store-label { display: none; }
      /* The tagline is the widest thing in the brand, so it — not the title — is
         what decides when the block wraps under its own icon. Easing both back a
         little buys the width the second control costs. */
      h1 { font-size: 26px; }
      .tagline { font-size: 10.5px; letter-spacing: .14em; }
    }

    /* --- modals --- */
    .modal-backdrop {
      position: fixed; inset: 0; background: rgba(4, 7, 9, .86);
      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%, #0d0720);
      border: 1px solid #000; border-radius: 10px;
      box-shadow: 0 24px 70px rgba(0,0,0,.75), 0 0 40px rgba(56,224,196,.06), inset 0 1px 0 var(--bevel);
      padding: 0 26px 26px; color: var(--ink);
      scrollbar-width: thin; scrollbar-color: var(--bevel) #0d0720;
    }
    .modal::-webkit-scrollbar { width: 10px; }
    .modal::-webkit-scrollbar-track { background: #0d0720; border-radius: 6px; margin: 6px 0; }
    .modal::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #4a3170, #251a42);
      border: 1px solid #000; border-radius: 6px; box-shadow: inset 0 1px 0 var(--bevel);
    }
    .modal::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5c3d8a, #33234d); }
    .modal::-webkit-scrollbar-thumb:active { background: var(--neon); }
    .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(--sun); font-size: 15px; letter-spacing: .2em; flex: 1; min-width: 0; margin: 0; padding: 0; }
    .modal h3 { color: var(--ice); 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(--neon); 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(--neon); margin-top: 6px; }
    .modal-credit b { color: var(--neon); }
    .modal-fine { font-size: 10.5px; margin-top: 12px; opacity: .8; }
    /* 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-frame-wrap { position: relative; flex: 1; display: flex; min-height: 0; }
    .apps-frame { flex: 1; width: 100%; border: 0; background: #0b0616; border-radius: 0 0 10px 10px; }
    /* shown over the frame until the directory has loaded */
    .apps-loading {
      position: absolute; inset: 0; z-index: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
      background: #0b0616; border-radius: 0 0 10px 10px; transition: opacity .25s ease;
    }
    .apps-loading.done { opacity: 0; pointer-events: none; }
    .apps-spinner {
      width: 34px; height: 34px; border-radius: 50%;
      border: 3px solid rgba(61,245,255,.18); border-top-color: var(--neon);
      box-shadow: 0 0 16px rgba(255,45,149,.25);
      animation: apps-spin .8s linear infinite;
    }
    @keyframes apps-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .apps-spinner { animation-duration: 2.4s; } }
    .apps-loading-text { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
    .apps-loading-slow { font-family: var(--mono); font-size: 11px; color: var(--ice); }
    .modal-open-tab {
      font-family: var(--mono); font-size: 11px; color: var(--ice); text-decoration: none;
      white-space: nowrap; opacity: .85;
    }
    .modal-open-tab:hover { opacity: 1; text-decoration: underline; }
    .modal-contact { margin-top: 10px; }
    /* shares the header store button's pill language, so the manual's one
       outbound action reads as a control rather than as another body link */
    .modal a.contact-btn {
      display: inline-flex; align-items: center; gap: 7px;
      height: 30px; padding: 0 14px; border-radius: 15px;
      font-family: var(--disp); font-size: 11px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
      color: var(--neon); text-decoration: none;
      background: linear-gradient(180deg, #2a1f4d, #171029);
      border: 1px solid #000;
      box-shadow: 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
      transition: border-color .1s, color .1s;
    }
    .modal a.contact-btn:hover { border-color: var(--neon); color: var(--neon); }
    .modal a.contact-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
    .modal a { color: var(--ice); }
    .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 #2a1f4d;
    }
    .choice-btn:hover:not(:disabled) { border-color: var(--neon); background: #221846; }
    .choice-btn .choice-name {
      display: block; font-family: var(--disp); font-size: 13px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase; color: var(--neon);
    }
    .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: #0b0616;
      border: 1px solid rgba(255,45,149,.5); 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(--neon), var(--sun)); 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; } }

    /* --- floating "More" button + apps panel --- */
    /* In the header's top-left corner, mirroring the App Store and help
       buttons on the right. */
    .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(--neon);
      background: linear-gradient(180deg, #2a1f4d, #171029);
      box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 18px rgba(255,45,149,.12), 0 2px 0 var(--lip), inset 0 1px 0 var(--bevel);
    }
    .more-fab:hover { border-color: var(--neon); color: var(--neon); }
    .app-list { display: grid; gap: 10px; margin-top: 4px; }
    .app-card {
      display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0 13px;
      padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px;
      background: var(--panel-3); text-decoration: none;
    }
    .app-card:hover { border-color: var(--neon); background: #221846; }
    .app-icon { grid-row: span 3; width: 44px; height: 44px; display: block; border-radius: 10px; background: #0b0616; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
    .app-card .app-name { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }
    .app-card:hover .app-name { color: var(--neon); }
    .app-card .app-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); margin-top: 3px; }
    .app-card .app-desc { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-dim); margin-top: 6px; }

    /* --- section chrome --- */
    h2 {
      color: var(--sun); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
      border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; font-weight: 700;
      /* flex so a panel's help button can sit out at the right-hand end */
      display: flex; align-items: center; gap: 8px;
    }
    /* Gold, so it reads as "explain this" rather than as another control — the
       rack's own switches are all cyan and its labels magenta. */
    .panel-help {
      margin-left: auto; flex-shrink: 0;
      width: 20px; height: 20px; padding: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      font-family: var(--disp); font-size: 12px; font-weight: 700;
      line-height: 1; letter-spacing: 0;
      color: var(--hot);
      background: linear-gradient(180deg, #2c0f26, #1a0818);
      border: 1px solid #000;
      box-shadow: 0 1px 0 var(--lip), inset 0 1px 0 var(--hot-dim);
      transition: border-color .1s, box-shadow .1s, color .1s;
    }
    .panel-help:hover {
      border-color: var(--hot); color: #ffe0f4;
      box-shadow: 0 0 9px rgba(255,110,199,.4), inset 0 1px 0 var(--hot-dim);
    }
    .panel-help:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
    .panel-help[aria-expanded="true"] {
      border-color: var(--hot); color: #ffe0f4;
      box-shadow: 0 0 9px rgba(255,110,199,.4), inset 0 1px 0 var(--hot-dim);
    }
    /* Panel popover: a few sentences about this panel only. Sits under the
       button rather than in the heading, which is uppercase and letter-spaced. */
    .panel-tip {
      position: absolute; z-index: 40;
      top: 34px; right: 12px;
      width: min(430px, calc(100% - 24px));
      padding: 12px 34px 12px 14px;
      background: linear-gradient(180deg, #1a1330, #120c24);
      border: 1px solid var(--hot-dim); border-radius: 7px;
      box-shadow: 0 14px 34px rgba(0,0,0,.66), 0 0 20px rgba(255,110,199,.1);
      animation: tip-in .13s ease-out;
    }
    .panel-tip::before {                   /* pointer up to the ? button */
      content: ""; position: absolute; top: -5px; right: 12px;
      width: 8px; height: 8px; transform: rotate(45deg);
      background: #1a1330;
      border-left: 1px solid var(--hot-dim); border-top: 1px solid var(--hot-dim);
    }
    .panel-tip .tip-title {
      display: block; margin-bottom: 6px;
      font-family: var(--disp); font-size: 10px; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase; color: var(--hot);
    }
    .panel-tip p {
      margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.75;
      letter-spacing: 0; text-transform: none; color: var(--ink-dim);
    }
    .panel-tip b { color: var(--ink); font-weight: 500; }
    .tip-close {
      position: absolute; top: 6px; right: 8px;
      width: 18px; height: 18px; padding: 0;
      background: none; border: 0; border-radius: 3px;
      font-family: var(--disp); font-size: 15px; line-height: 1;
      color: var(--ink-dim); cursor: pointer;
    }
    .tip-close:hover { color: var(--hot); }
    .tip-more {
      margin-top: 9px; padding: 0;
      background: none; border: 0; cursor: pointer;
      font-family: var(--disp); font-size: 10px; font-weight: 700;
      letter-spacing: .16em; text-transform: uppercase; color: var(--hot);
      opacity: .8;
    }
    .tip-more:hover { opacity: 1; text-decoration: underline; }
    .tip-close:focus-visible, .tip-more:focus-visible {
      outline: 2px solid var(--hot); outline-offset: 2px;
    }
    @keyframes tip-in { from { opacity: 0; transform: translateY(-4px); } }
    @media (prefers-reduced-motion: reduce) { .panel-tip { animation: none; } }
    /* the manual briefly marks the section a panel button jumped to */
    .help-flash { animation: help-flash 1.4s ease-out; border-radius: 4px; }
    @keyframes help-flash {
      from { background: rgba(255,110,199,.26); box-shadow: 0 0 0 6px rgba(255,110,199,.26); }
      to   { background: transparent;           box-shadow: 0 0 0 6px transparent; }
    }
    @media (prefers-reduced-motion: reduce) { .help-flash { animation: none; } }
    h2 span { color: var(--ink-dim); letter-spacing: .12em; }
    .section {
      position: relative;                  /* anchors the panel help popover */
      background: var(--panel-3); border: 1px solid #000; border-radius: 6px;
      box-shadow: inset 0 1px 0 #2a1f4d, inset 0 2px 12px rgba(0,0,0,.55);
      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;
    }

    /* The transport row: tightened so the whole row fits on one line at the
       page's full width. Narrower screens still wrap it. */
    .transport-row { gap: 8px; }
    .transport-row button { padding: 10px 12px; letter-spacing: .1em; white-space: nowrap; }
    .transport-row .checkbox { white-space: nowrap; }
    /* the export buttons sit together at the right-hand end of the row, and
       wrap as a group rather than one at a time */
    .export-group { display: flex; gap: 8px; margin-left: auto; }
    /* the two main buttons take up whatever room the row has left, so the
       left-hand controls fill the row instead of leaving a gap before the
       exports */
    .transport-row #btn-generate { flex: 1.4 1 auto; }
    .transport-row #btn-transport { flex: 1 1 auto; }

    /* --- 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, #2a1f4d, #171029);
      border: 1px solid #000; 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(--neon-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(--neon); outline-offset: 2px; }
    button:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-primary {
      background: var(--sunset);
      color: #0b0616; border-color: #0b0a06;
      box-shadow: 0 3px 0 #5c1a24, inset 0 1px 0 rgba(255,255,255,.3), 0 0 20px rgba(255,154,60,.25);
    }
    .btn-secondary { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: none; }
    button.playing { color: var(--ice); border-color: var(--ice); }

    /* --- 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(--sun); text-shadow: 0 0 7px rgba(255,194,74,.35);
      font-variant-numeric: tabular-nums;
    }
    .info-box b { color: var(--sun); font-weight: 700; }
    .info-box .arr-sec { color: var(--neon); text-shadow: 0 0 7px rgba(255,45,149,.4); }
    /* Arrangement sections — the one playing lights up magenta */
    .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: #0b0616; background: var(--ice); font-weight: 700;
      text-shadow: none; box-shadow: 0 0 11px rgba(56,224,196,.65);
    }
    .chords { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); margin-top: 8px; }
    .chords .lbl { text-transform: uppercase; letter-spacing: .2em; }
    .chords b { color: var(--ice); font-weight: 400; }

    /* --- synth 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, #1c1436, #120c24); border: 1px solid #000;
      border-radius: 6px; box-shadow: inset 0 1px 0 #3d2a5e; padding: 10px 11px 11px;
    }
    .operator-card h3 {
      margin: 0 0 8px 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--ice); 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(--sun); 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 #2a1f4d;
    }
    .preset-btn:hover { border-color: var(--neon-dim); }
    .preset-btn.on { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 8px rgba(255,45,149,.3); }
    .preset-btn.edited::after { content: ' *'; color: var(--ice); }

    /* --- 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: #0b0616; border: 1px solid rgba(255,45,149,.35);
      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: #120a26; border-color: rgba(255,45,149,.55); }
    .seq-step:hover { border-color: var(--ice); }
    .seq-step.active {
      background: var(--sunset); border-color: #ffd98a;
      box-shadow: 0 0 9px rgba(255,154,60,.5), inset 0 1px 0 rgba(255,255,255,.25);
    }
    .seq-step.playing { border-color: var(--ice-hi); box-shadow: 0 0 12px rgba(56,224,196,.8), inset 0 0 7px rgba(56,224,196,.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 #000; 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, #f4ecff, #cfc3e8);
      border: 1px solid #000; border-radius: 0 0 4px 4px;
      box-shadow: inset 0 -6px 8px rgba(0,0,0,.2); cursor: pointer;
      display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
      color: #3b3350; font-family: var(--mono); font-size: 9.5px; transition: all 0.1s;
      flex-shrink: 0; user-select: none; touch-action: none;
    }
    /* Past the end of the neck. Dimmed and unresponsive rather than hidden,
       because the shape of the keyboard should not jump around when the voice
       changes — you can see where the instrument stops. */
    .key.out {
      opacity: .3;
      cursor: not-allowed;
      background: linear-gradient(to bottom, #3a2c5c, #251a42);
      color: #9b8ec4;
      box-shadow: inset 0 -4px 8px rgba(0,0,0,.35);
    }
    .key.out:hover { filter: none; }

    .key.black {
      width: 28px; height: 80px; background: linear-gradient(to bottom, #171029, #0b0616);
      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: var(--sunset); box-shadow: 0 0 16px rgba(255,154,60,.5); color: #0b0616; }

    /* --- 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 ("Delay 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(--sun); font-variant-numeric: tabular-nums; }

    /* The chaos row is four sliders and nothing else, so it gets the same
       treatment as the pedal rack above: one column each, filling the width.
       Left as flex it sized every control to its label and bunched all four
       into the left half of the panel, which wasted most of the row and made
       the sliders far shorter than the resolution they deserve — these are
       continuous parameters where a few pixels is a real change in the music.
       Two classes deep so it beats the `.gen-controls` flex rule above. */
    .gen-controls.chaos-controls {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 10px 14px;
      align-items: end;
    }
    .chaos-controls > label { text-align: center; min-width: 0; letter-spacing: .08em; }
    .chaos-controls input[type="range"] { width: 100%; min-width: 0; }
    .ctl-group { display: flex; gap: 12px; align-items: flex-end; }
    .ctl-group .checkbox { padding-bottom: 5px; }
    .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(--neon); border-color: var(--neon); background: #3b0f2c; }
    .checkbox { flex-direction: row !important; gap: 7px !important; align-items: center !important; color: var(--ink-dim); }
    .checkbox input { accent-color: var(--neon); }

    /* --- mixer --- */
    /* --- sound kit 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(--ice); flex-shrink: 0; }
    .kit-grid { display: flex; gap: 8px; flex-wrap: wrap; }
    .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 #2a1f4d;
    }
    .kit-btn:hover { border-color: var(--neon-dim); }
    .kit-btn.on { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 8px rgba(255,45,149,.3); }
    /* The drum machines get the cyan rather than the magenta, because they sit
       on the row directly under the racks and two identical rows of buttons
       that do different things is the kind of thing nobody notices until they
       click the wrong one. */
    .mch-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 #2a1f4d; cursor: pointer;
    }
    .mch-btn:hover { border-color: var(--ice); }
    .mch-btn.on { color: var(--ice); border-color: var(--ice); box-shadow: 0 0 8px rgba(61,245,255,.3); }
    /* seven strips — the band and the beat — so they are narrower than the rock
       rack's six, or the last one orphans itself onto a row of its own */
    .mixer { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin-top: 14px; }
    .mixer-strip {
      background: linear-gradient(180deg, #1c1436, #120c24); border: 1px solid #000; border-radius: 6px;
      box-shadow: inset 0 1px 0 #3d2a5e; padding: 10px 9px; text-align: center;
    }
    .mixer-strip .name { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); 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 #2a1f4d;
    }
    .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: #0b0616;
      border: 1px solid rgba(255,45,149,.5); 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: var(--sunset); border: 1px solid #0b0616; box-shadow: 0 2px 3px rgba(0,0,0,.6), 0 0 8px rgba(255,154,60,.35);
    }
    input[type="range"]::-moz-range-track { box-sizing: border-box; height: 6px; background: #0b0616; border: 1px solid rgba(255,45,149,.5); border-radius: 3px; }
    input[type="range"]::-moz-range-thumb { width: 12px; height: 20px; border-radius: 3px; background: var(--sunset); border: 1px solid #0b0616; }
    input[type="range"]:focus-visible { outline: 2px solid var(--neon); 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 #2a1f4d;
    }
    select:hover, input:hover { border-color: var(--neon-dim); }
    select:focus-visible, input:focus-visible { outline: 2px solid var(--neon); 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(--neon); text-decoration: none; }
    footer a:hover { color: var(--ice); text-decoration: underline; }
    footer a:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
    footer .sep { color: var(--line); }

    #chaos-scope, #visualizer {
      width: 100%;
      background: radial-gradient(ellipse at center, #0f151b 0%, #0b0616 80%);
      border: 1px solid #000; 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: #0b0616; border: 1px solid rgba(255,45,149,.5);
      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(--neon), var(--sun)); }


    /* ---- the rig: channels, effects, sample status ---------------------------
       Reuses the operator-card chrome the synth panel used, because a channel
       and a synth section are the same thing on a rack: a titled group of
       controls belonging to one voice. */
    .operator-card select.amp-sel { flex: 1; min-width: 0; margin-left: 6px; }
    .amp-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .amp-tag {
      font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .1em;
      text-transform: uppercase; color: var(--neon-dim); flex-shrink: 0;
    }

    .readout { font-family: var(--mono); color: var(--sun); font-variant-numeric: tabular-nums; }
    #oct-label { min-width: 34px; text-align: center; }

    /* A rig button keeps its highlight once a knob has been turned but picks up
       a dot: the preset is still loaded, it just isn't quite what you're
       hearing any more. Same convention the preset buttons use. */
    .kit-btn.edited::after,
    .preset-btn.edited::after {
      content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
      background: var(--hot); margin-left: 6px; vertical-align: middle;
      box-shadow: 0 0 5px rgba(255,110,199,.8);
    }

    .sample-status {
      font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
      color: var(--ink-dim); margin-left: auto; white-space: nowrap;
    }
    .sample-status.ok { color: var(--neon-dim); }
    .sample-status.warn { color: var(--hot); }



    @media (max-width: 560px) {
      .brand { gap: 11px; padding: 0 82px; }   /* two 32px controls + gap */
      .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%; }
      /* four columns is 70px a slider on a phone, which is not a control any
         more — the same two-up the rest of the panel uses, overriding the
         one-column-per-control rule that is right on a desktop */
      .gen-controls.chaos-controls {
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
        grid-auto-columns: auto;
      }
      .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; }
      .export-group { flex: 1 1 100%; flex-wrap: wrap; }
      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; }
      .more-fab { padding: 7px 11px; font-size: 10px; }
      .sample-status { margin-left: 0; white-space: normal; flex-basis: 100%; }
      .amp-tag { display: none; }
    }