:root {
    --paper: #ece7dc;
    --panel: #f7f4ee;
    --ink: #1b1b1a;
    --ink-soft: #8b877d;
    --line: #d8d2c4;
    --cell: #ded8ca;
    --cell-off: #e4dfd3;
    --shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
    --t0: #ff5a1f;
    --t1: #f5b301;
    --t2: #12b5a5;
    --t3: #2d6bf0;
    --t4: #e23e8c;
    --t5: #8a5cf6;
    --t6: #6cae23;
    --t7: #29b6e8;
    --radius: 12px;
    --tap: 160ms cubic-bezier(.2,.7,.2,1);
  }
  /* touch-action: manipulation dödar Safaris dubbeltap-zoom (user-scalable=no
     ignoreras sedan iOS 10); ytor med egna gester överrider med none/pan-y */
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
    touch-action: manipulation; }
  html, body {
    margin: 0; height: 100%;
    background: var(--paper); color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    overflow: hidden; position: fixed; inset: 0; width: 100%;
    touch-action: none;
  }
  .mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

  #app { height: 100%; display: flex; flex-direction: column;
    max-width: 402px; margin: 0 auto;   /* iPhone 17 Pro-bredd (402pt) — centrerad på breda skärmar */
    padding: calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 8px); gap: 8px; }
  /* på breda skärmar: rama in "telefonen" som en enhet med telefon-höjd (iPhone
     17 Pro = 402×874). Riktiga telefoner (≤ dessa mått) fyller skärmen som förut. */
  @media (min-width: 430px) {
    body { display: flex; align-items: center; justify-content: center; }
    #app { height: min(100%, 874px); border-radius: 22px;
      box-shadow: 0 0 0 1px var(--line), 0 10px 44px rgba(0,0,0,.07); }
  }

  /* ---------- header ---------- */
  header { display: flex; align-items: center; gap: 4px; flex: none; }
  .brand { font-weight: 800; font-size: 19px; letter-spacing: -0.5px; position: relative; }
  /* Bilden rymmer hela brus-halot; negativa marginaler gör att layoutboxen
     bara är bokstäverna, så bruset svävar utanför utan att ta plats. */
  .brand img { height: 33px; display: block; margin: -7px -4px -5px -5px; }
  /* smala skärmar: loggan får max vara lika bred som gamla texten,
     annars trycks play-knappen utanför appkortet */
  @media (max-width: 400px) { .brand img { height: 27px; margin: -6px -3px -4px -4px; } }
  /* MIDI LEARN-indikator: flytande M på logon — absolut så menyraden
     behåller exakt sin bredd */
  .brand.midi::after { content: 'M'; position: absolute; top: -4px; right: -11px;
    font-size: 8px; line-height: 1; color: var(--paper); background: var(--ink);
    border-radius: 50%; padding: 3px 4px; letter-spacing: 0; }
  /* viewbaren: blobben (aktiva markören) är den inre pillen — 2 px inset
     som ytterpillens padding — och GLIDER till nytt val (07-stage håller
     DOM:en persistent så transitionen överlever renders) */
  .viewbar { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 2px; height: 36px; align-items: center; position: relative; overflow: hidden; }
  .viewbar .vblob { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 999px;
    background: var(--ink); opacity: 0;
    transition: left .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1), opacity .15s; }
  .viewbar button { border: none; background: transparent; color: var(--ink-soft); font-weight: 800;
    font-size: 10px; letter-spacing: .6px; padding: 6px 8px; border-radius: 999px;
    position: relative; z-index: 1; transition: color .15s; }
  .viewbar button.on { color: var(--paper); }
  .spacer { flex: 1; }
  .chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; height: 36px;
    padding: 0 12px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 5px; align-items: center; flex: none; }
  .chip .lbl { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--ink-soft); }
  .tbtn { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink); font-size: 14px; display: grid; place-items: center;
    padding: 0; line-height: 1; transition: all var(--tap); }
  .tbtn.play { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .tbtn.playing { background: var(--t0); border-color: var(--t0); color: #fff; }
  /* hjälpläget: ?-togglen (mindre än de andra headerknapparna — får inte
     trycka ut play utanför bredden) + overlay-detaljer. Aktiv = invers. */
  #helpbtn { font-weight: 800; }
  .qhelp button:disabled { pointer-events: none; }   /* hjälpläget: släpp tryck till föräldern */
  #helpbtn.qon { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .helpov .hval { font-size: 20px; font-weight: 800; }
  .helpov .hhint { font-size: 9px; font-weight: 700; letter-spacing: .4px; color: var(--ink-soft); margin-top: 2px; }
  .tbtn:disabled { opacity: .3; }

  /* ---------- stage (upper 2/3) ---------- */
  #stage { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; }
  .grid { display: flex; flex-direction: column; gap: 6px; height: 100%; }
  .trow { flex: 1; display: flex; gap: 4px; min-height: 0; }
  .handle { flex: none; width: 40px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: all var(--tap); }
  .handle .num { font-weight: 800; font-size: 15px; }
  .handle .dot { width: 8px; height: 8px; border-radius: 50%; }
  .handle.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  /* En aktiv track (8+8, två rader); övriga minimerade till en rad med 16 småsteg */
  .trow.act { flex: 1.5; }   /* var 2.4 — verktygsraden ovanför tog mellanskillnaden */
  /* verktygsraden: undo/redo + phrase/song-transport ovanför griden */
  .ttools { flex: none; height: 46px; display: flex; gap: 6px; }
  .ttools .tspacer { flex: 1; }   /* mellanrummet: historik | transport */
  /* samma bredd som FLW-knappen (.asong) där nere */
  .ttools .ttool { flex: none; width: 48px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--ink); font-family: inherit; padding: 0; transition: all var(--tap); }
  .ttools .ttool .cap { font-size: 8px; font-weight: 800; letter-spacing: .5px; color: var(--ink-soft); }
  .ttools .ttool .ic { font-size: 14px; line-height: 1; display: grid; place-items: center; }
  .ttools .ttool .ic svg { display: block; }
  .ttools .ttool.dim { opacity: .35; }   /* tom historik/redo-gren */
  /* armerat play-läge (PHR/SNG): bläckfylld — orange är reserverat för "spelar" */
  .ttools .ttool.on { background: var(--ink); border-color: var(--ink); }
  .ttools .ttool.on .cap, .ttools .ttool.on .ic { color: var(--paper); }
  .trow.mini { flex: 1; }
  /* actionraden: bankväxlare + minikarta över dolda banken + song-knapp */
  .trow.arow { flex: 1; }
  .abank { flex: none; width: 40px; border-radius: 10px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper); display: grid; place-items: center;
    padding: 0; transition: all var(--tap); position: relative; }
  .abank .sflag { position: absolute; top: 4px; right: 7px; font-size: 9px; font-weight: 800; }
  .abank .arr { font-size: 14px; line-height: 1; }
  .apart { flex: none; width: 44px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink); font-size: 16px; padding: 0;
    transition: all var(--tap); }
  .apart:disabled { opacity: .3; }
  .apart.ptbtn { width: 34px; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
  .apart.ptbtn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .apchip { flex: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; }
  .apchip .cap { font-size: 8px; font-weight: 800; letter-spacing: .5px; color: var(--ink-soft); }
  .apchip .val { font-size: 13px; font-weight: 800; }
  .apchip .pcov { display: flex; gap: 2px; margin-top: 3px; width: 70%; max-width: 140px; }
  .apchip .pseg { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
  .apchip .pseg.cur { box-shadow: 0 0 0 1px var(--ink); }
  /* perf-vyn: 8 svajpbara pads + slot-kön */
  .perf { display: flex; flex-direction: column; gap: 8px; height: 100%; }
  .pgrid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
    gap: 7px; min-height: 0; }
  .pad { border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1px; touch-action: none; overflow: hidden; }
  .pad .pfill { position: absolute; left: 0; right: 0; bottom: 50%; pointer-events: none;
    background: color-mix(in srgb, var(--pc, var(--ink)) 26%, transparent); }
  .pad .pzero { position: absolute; left: 10%; right: 10%; top: 50%; height: 1px;
    background: var(--line); pointer-events: none; }
  .pad .pcap { font-size: 9px; font-weight: 800; letter-spacing: .6px; color: var(--ink-soft); z-index: 1; }
  .pad .pval { font-size: 21px; font-weight: 800; z-index: 1; }
  .pad .ptr { position: absolute; top: 7px; left: 9px; font-size: 10px; font-weight: 800; }
  .pad .phold { position: absolute; top: 6px; right: 6px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
    font-size: 8px; font-weight: 800; letter-spacing: .5px; padding: 4px 8px;
    transition: all var(--tap); z-index: 2; }
  .pad .phold.on { background: var(--pc, var(--ink)); border-color: var(--pc, var(--ink)); color: #fff; }
  .pad .pabs { font-size: 10px; font-weight: 700; color: var(--ink-soft); z-index: 1; }
  .pad.empty { border-style: dashed; background: transparent; }
  .pad.empty .pcap { color: var(--line); }
  .slot.qd { border-color: var(--t0); box-shadow: inset 0 0 0 1px var(--t0); animation: qpulse 1s ease-in-out infinite; }
  @keyframes qpulse { 50% { opacity: .45; } }
  .perfpin { position: absolute; top: 8px; right: 8px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink-soft); font-size: 9px; font-weight: 800;
    letter-spacing: .5px; padding: 5px 10px; transition: all var(--tap); z-index: 2; }
  .perfpin.on { background: var(--ac, var(--ink)); border-color: var(--ac, var(--ink)); color: #fff; }
  .perfpin.lft { left: 8px; right: auto; }   /* PERF till vänster, OFFSET tar högerhörnet */
  .asong { flex: none; width: 48px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; padding: 0; transition: all var(--tap); }
  .asong .cap { font-size: 8px; font-weight: 800; letter-spacing: .5px; color: var(--ink-soft); }
  .asong .ic { font-size: 12px; line-height: 1; }
  .asong.live { background: var(--t0); border-color: var(--t0); color: #fff; }
  .asong.live .cap { color: rgba(255,255,255,.8); }
  .cells { flex: 1; display: grid; gap: 3px; min-width: 0; }
  .trow.act .cells { grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr 1fr; }
  .trow.mini .cells { grid-template-columns: repeat(16, 1fr); grid-template-rows: 1fr; gap: 2px; }
  .trow.mini .cell { border-radius: 5px; }
  .trow.mini .handle .num { font-size: 12px; }
  .cell { border-radius: 7px; background: var(--cell-off); border: 1px solid transparent; position: relative;
    display: grid; place-items: center; transition: background var(--tap); overflow: hidden; }
  .cell:nth-child(4n+1) { background: var(--cell); }
  .cell.on { background: var(--tc); }
  .cell .nn { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.95); pointer-events: none; text-align: center; line-height: 1.1; }
  .cell.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  /* spann-förhandsvisning under svep-selektering: hela räckvidden syns */
  .cell.rsel { box-shadow: inset 0 0 0 2px rgba(27,27,26,.30); }
  .cell.on.rsel { box-shadow: inset 0 0 0 2px rgba(27,27,26,.55); }
  .cell.play { outline: 2px solid rgba(27,27,26,.25); outline-offset: -2px; }   /* helt innanför cellen — klipps inte vid stagekanten */
  .cell .odot { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--ink); opacity: .85; pointer-events: none; }
  .cell.on .odot { background: #fff; }
  /* obunden track: prick i cellmitten, dämpad yta */
  .cell.unbound { background: var(--cell-off); }
  .cell .ubdot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); opacity: .6; pointer-events: none; }
  /* solo/mute: hela raden dimmas — det soloade spåret är det enda i full styrka */
  .trow.row-muted { opacity: .38; }
  #stage.offset-on .cells .cell { filter: saturate(.4); }

  /* song view */
  .song { display: flex; flex-direction: column; gap: 8px; height: 100%; }
  .chain { display: flex; gap: 4px; align-items: stretch; flex: none; height: 44px; }
  .shandle { width: 40px; flex: none; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
    display: grid; place-items: center; font-weight: 800; font-size: 14px; }
  .shandle.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .slot { flex: none; width: 44px; border-radius: 10px; background: var(--cell); border: 1px solid transparent;
    display: grid; place-items: center; font-weight: 800; font-size: 13px; position: relative; }
  .slot.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .slot.play { outline: 2px solid rgba(27,27,26,.25); outline-offset: -2px; }   /* helt innanför cellen — klipps inte vid stagekanten */
  .slot .ph { position: absolute; top: 3px; left: 6px; font-size: 8px; font-weight: 800; color: var(--ink-soft); }
  .slot.add { background: var(--panel); color: var(--ink-soft); font-size: 17px; }
  .chainwrap { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
  .bpmrow { height: 40px; }
  .bpmcell { flex: 1; border-radius: 10px; background: var(--cell); border: 1px solid transparent;
    display: grid; place-items: center; font-weight: 800; font-size: 15px; touch-action: none; }
  .sgrid { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  .srow { flex: 1; display: flex; gap: 4px; min-height: 0; }
  .slabel { flex: none; width: 40px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
    display: grid; place-items: center; font-weight: 800; font-size: 11px; color: var(--ink-soft); }
  .slabel.tnum { color: var(--ink); font-size: 13px; }
  .slabel.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
  .scells { flex: 1; display: grid; gap: 3px; min-width: 0; }
  .scell { border-radius: 7px; background: var(--cell-off); border: 1px solid transparent; display: grid;
    place-items: center; font-weight: 800; font-size: 11px; }
  .scell.hdr { background: var(--panel); color: var(--ink-soft); font-size: 10px; }
  .scell.dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
  .scell.lit { color: rgba(255,255,255,.95); }
  .scell.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .scell.play { outline: 2px solid rgba(27,27,26,.25); outline-offset: -2px; }   /* helt innanför cellen — klipps inte vid stagekanten */

  /* project view */
  .proj { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 5px; height: 100%; }
  .pcell { border-radius: 9px; background: var(--cell-off); border: 1px solid transparent; display: grid;
    place-items: center; font-weight: 800; font-size: 11px; color: var(--ink-soft); }
  .pcell.has { background: var(--cell); color: var(--ink); }
  .pcell { position: relative; }
  /* tom slot: en tyst prick, inget nummer — projekten ska poppa */
  .pcell:not(.has)::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--ink-soft); opacity: .35; }
  /* aktivt projekt: bläckprick i hörnet (ramen är numera markeringens) */
  .pcell.cur { font-weight: 800; color: var(--ink); }
  .pcell.cur::after { content: ''; position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
  /* markerad: tjock bläckram + lyft — projektets färg förblir synlig */
  .pcell.sel { outline: 3px solid var(--ink); outline-offset: -3px;
    box-shadow: 0 3px 10px rgba(28,27,24,.20); color: var(--ink); font-weight: 800; }

  /* fx view */
  .fx { display: flex; flex-direction: column; gap: 7px; height: 100%; overflow-y: auto; }
  .funit .ftiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  /* smpl-vyn: banklistan */
  .smpl { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
  .smpl .shead { font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--ink-soft); flex: none; padding: 2px 2px 0; }
  .smpl .slist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; touch-action: pan-y; }
  .srowi { flex: none; display: flex; align-items: center; gap: 10px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--line); padding: 11px 12px; }
  .srowi.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .srowi .sidx { font-size: 10px; font-weight: 800; color: var(--ink-soft); flex: none; }
  .srowi .snm { font-weight: 800; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .srowi .smeta { font-size: 9px; font-weight: 700; color: var(--ink-soft); flex: none; }
  /* bankflikar (FACTORY/USER) i SMPL-huvudet */
  .sbtabs { display: flex; gap: 4px; flex: none; align-items: center; }
  .sbtabs button { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
    font-weight: 800; font-size: 10px; letter-spacing: .6px; padding: 7px 12px; border-radius: 999px; transition: all var(--tap); }
  .sbtabs button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .sbtabs .smeta2 { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--ink-soft); }
  /* samplervyn (detalj): vågform + metadata i stagen */
  .swrap { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
  .sback { display: flex; align-items: center; gap: 10px; flex: none; }
  .sback .bk { border: 1px solid var(--line); background: var(--panel); border-radius: 10px;
    font-weight: 800; font-size: 13px; padding: 9px 14px; }
  .sback .ttl { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sback .slotn { font-size: 10px; font-weight: 800; color: var(--ink-soft); flex: none; }
  .swave { flex: 1; min-height: 0; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
    position: relative; overflow: hidden; }
  .swave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .sinfo { flex: none; font-size: 10px; font-weight: 700; color: var(--ink-soft); letter-spacing: .4px;
    padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .funit .ftiles .tile { min-height: 40px; padding: 5px 2px; }
  .funit .ftiles .tile .cap { font-size: 8px; }
  .funit { border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); padding: 9px 10px;
    display: flex; flex-direction: column; justify-content: space-between; transition: all var(--tap); }
  .funit.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .funit .fname { font-weight: 800; font-size: 12px; letter-spacing: 1px; }
  .funit .fvals { display: flex; gap: 10px; }
  .funit .fv { font-size: 10px; color: var(--ink-soft); font-weight: 700; }
  .funit .fv b { display: block; color: var(--ink); font-size: 14px; }
  /* MST-mixern: 8 kanal-faders i panelen */
  .mixer { flex: 1; min-height: 0; display: flex; gap: 6px; }
  .mfad { flex: 1; position: relative; border-radius: 10px; background: var(--panel);
    border: 1.5px solid var(--ac); overflow: hidden; touch-action: none; }
  .mfad .mfill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ac); opacity: .8; }
  /* nummer + värde på ett ljust chip så de läses mot både fyllning och botten */
  .mfad .mtop { position: absolute; top: 4px; left: 4px; right: 4px; padding: 3px 0 2px;
    border-radius: 7px; background: rgba(244,241,233,.9); text-align: center; pointer-events: none; }
  .mfad .mlab { font-weight: 800; font-size: 12px; line-height: 1.15; color: var(--ac); }
  .mfad .mval { font-weight: 700; font-size: 10px; color: var(--ink); }

  /* ---------- panel (lower 1/3) ---------- */
  /* panelen är ren layoutyta — ingen bakgrund/padding; innehållet ligger direkt på papperet */
  #panel { flex: none; height: 47%; min-height: 300px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
  .ptitle { display: flex; align-items: baseline; gap: 8px; flex: none; }
  .ptitle .k { font-size: 10px; letter-spacing: 1.5px; color: var(--ink-soft); font-weight: 800; }
  .ptitle .v { font-weight: 800; font-size: 14px; }
  .ptitle .flag { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--t0); }
  .toprow { display: flex; gap: 6px; align-items: center; flex: none; }
  .toprow .cnt { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--ink-soft); }
  .offbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 9px 12px;
    font-weight: 800; font-size: 10px; letter-spacing: .6px; color: var(--ink-soft); transition: all var(--tap); }
  .offbtn.on { background: var(--t0); border-color: var(--t0); color: #fff; }
  .tabs { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 3px; border: 1px solid var(--line); flex: none; align-self: flex-start; }
  .tabs button { border: none; background: transparent; color: var(--ink-soft); font-weight: 800; font-size: 10px;
    letter-spacing: .6px; padding: 6px 12px; border-radius: 999px; transition: all var(--tap); }
  .tabs button.on { background: var(--ink); color: var(--paper); }
  .pbody { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; }
  .sect { font-size: 9px; letter-spacing: 1.5px; font-weight: 800; color: var(--ink-soft); margin: 12px 2px 6px; }
  /* SOUND: svart inverterad yta; en grupp i taget via undermenyn.
     Aktiv SOUND-tab hänger ihop med ytan via inåtböjda hörn (flikmapp). */
  .stepwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .stabs { display: flex; align-items: flex-end; gap: 2px; flex: none; }
  .stab { border: none; background: transparent; color: var(--ink-soft); font-weight: 800; font-size: 11px;
    letter-spacing: 1px; padding: 10px 13px; border-radius: 999px; transition: color var(--tap); }
  .stab.onplain { background: var(--ink); color: var(--paper); }
  .stab.onsheet { position: relative; background: var(--ink); color: var(--paper);
    border-radius: 12px 12px 0 0; padding-bottom: 13px; }
  .stab.onsheet::before, .stab.onsheet::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; }
  .stab.onsheet::before { left: -12px; background: radial-gradient(circle 12px at 0 0, transparent 11.5px, var(--ink) 12px); }
  .stab.onsheet::after { right: -12px; background: radial-gradient(circle 12px at 100% 0, transparent 11.5px, var(--ink) 12px); }
  /* första fliken ligger kant i kant med arket: rak vänsterkant, ingen fillet */
  .stab.onsheet.first::before { display: none; }
  .sndsurf.flushleft { border-top-left-radius: 0; }
  .stabs .offbtn { margin-left: auto; margin-bottom: 6px; }
  .stabs .cnt { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--ink-soft); margin: 0 0 12px 6px; }
  .sndsurf { flex: 1; min-height: 0; background: var(--ink); border-radius: 14px;
    padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .gtabs { display: flex; gap: 4px; flex: none; overflow-x: auto; }
  .gtabs button { border: none; background: transparent; color: #8b877d; font-weight: 800; font-size: 10px;
    letter-spacing: .6px; padding: 7px 11px; border-radius: 999px; transition: all var(--tap); flex: none; }
  .gtabs button.on { background: var(--paper); color: var(--ink); }
  /* place-chip: platsen ljudet bor på + delningsgrad; tap = byt plats */
  .placechip { margin-left: auto; border: 1px solid #3a3a37; background: #2b2b29; color: var(--paper);
    font-weight: 800; font-size: 10px; letter-spacing: .6px; padding: 7px 11px; border-radius: 999px; flex: none;
    font-family: ui-monospace, 'SF Mono', monospace; }
  .sndbody { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; display: flex; flex-direction: column; }
  .sndbody .vspacer { flex: 1 1 auto; min-height: 6px; }   /* trycker pianot till panelens botten */
  .sndsurf .tile { background: #2b2b29; border-color: #3a3a37; }
  .sndsurf .tile .cap { color: #8b877d; }
  .sndsurf .tile .val { color: var(--paper); }
  .sndsurf .tile.togg.on { background: var(--paper); border-color: var(--paper); }
  .sndsurf .tile.togg.on .cap, .sndsurf .tile.togg.on .val { color: var(--ink); }
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all var(--tap); min-height: 52px; justify-content: center;
    touch-action: none; position: relative; }  /* vertikal drag på tilen justerar värdet */
  /* offset-prickar: flik/grupp (inline) och tile (hörnet) — samma signal som stegets prick */
  .bdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--t0);
    margin-left: 5px; vertical-align: 2px; }
  .tile .tdot { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--t0); pointer-events: none; }
  .tile .cap { font-size: 9px; letter-spacing: .8px; font-weight: 800; color: var(--ink-soft); }
  .tile .val { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.1; }
  .tile.rowbreak { grid-column-start: 1; }   /* tvinga t.ex. LFO B till en ny rad */
  .tile.togg.on { background: var(--ink); border-color: var(--ink); }
  .tile.togg.on .cap, .tile.togg.on .val { color: var(--paper); }
  .tile.act .val { font-size: 11px; font-weight: 800; letter-spacing: .5px; }
  .tile.warn { border-color: var(--t0); }
  .tile.warn .val { color: var(--t0); }
  .hint { text-align: center; font-size: 11px; color: var(--ink-soft); margin: auto; line-height: 1.6; padding: 0 20px; white-space: pre-line; }

  /* adjust surface: svajp + stegknappar på samma yta; allt utanför = stäng (osynligt) */
  .adjust { flex: 1; min-height: 0; display: flex; }
  .aclose { flex: none; width: 13%; }
  .acenter { flex: 1; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; position: relative; overflow: hidden;
    touch-action: none; padding: 10px 10px 8px; }
  .aswipe { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 0; position: relative; }
  .acenter .aname { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: var(--ink-soft); }
  .acenter .aval { font-size: 34px; font-weight: 700; color: var(--ac, var(--ink)); }
  .acenter .asub { font-size: 9px; color: var(--ink-soft); font-weight: 700; letter-spacing: .5px; }
  .curve { display: flex; gap: 2px; align-items: flex-end; height: 26px; margin-top: 2px; }
  .curve i { width: 8px; background: var(--line); border-radius: 2px; min-height: 2px; }
  .curve i.cur { background: var(--ac, var(--ink)); }
  /* song-vyn: mutade/solo-tystade spår dimmas men förblir justerbara */
  .srow.smuted .scell { opacity: .32; }
  .slabel.mut { opacity: .45; text-decoration: line-through; text-decoration-thickness: 2px; }
  /* delad svajp-yta: virtuell linje — vänster ×10, höger ×1 */
  .aswipe .asplit { position: absolute; left: 45%; top: 14%; bottom: 14%; width: 0;
    border-left: 1.5px dashed #b9b2a2; pointer-events: none; }
  .aswipe .azlab { position: absolute; bottom: 8px; font-size: 9px; font-weight: 800;
    letter-spacing: .5px; color: var(--ink-soft); opacity: .95; pointer-events: none; }
  .aswipe .azlab.l { left: 14px; }
  .aswipe .azlab.r { right: 14px; }
  /* RESTART-lägenas snabbknappar i justerkortet (2 rader à 3) */
  .amodes { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 5px; }
  .amodes button { border-radius: 9px; border: 1px solid var(--line); background: var(--panel);
    font-weight: 800; font-size: 10px; letter-spacing: .4px; padding: 11px 2px; color: var(--ink-soft);
    transition: all var(--tap); }
  .amodes button.on { background: var(--ac, var(--ink)); border-color: var(--ac, var(--ink)); color: #fff; }
  .abtns { flex: none; display: flex; gap: 5px; height: 42px; }
  .abtns button { flex: 1; border-radius: 9px; border: 1px solid var(--line); background: var(--panel);
    font-weight: 800; font-size: 12px; color: var(--ink); transition: all var(--tap); }
  .abtns button:active { background: var(--ink); color: var(--paper); }
  /* bekräftelse-overlay */
  .confirm { position: fixed; inset: 0; background: rgba(27,27,26,.45); z-index: 100;
    display: grid; place-items: center; padding: 24px; }
  .ccard { background: var(--panel); border-radius: 16px; padding: 20px; max-width: 340px;
    display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
  .ctitle { font-weight: 800; font-size: 14px; letter-spacing: .5px; }
  .ctext { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
  .cbtns { display: flex; gap: 8px; margin-top: 4px; }
  .cbtns button { flex: 1; border-radius: 10px; padding: 12px 8px; font-weight: 800; font-size: 12px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
  .cbtns .cyes { background: #c22; border-color: #c22; color: #fff; }
  /* archive.org-väljaren: sökbart kort med scrollista */
  .ccard.apick { width: 100%; max-width: 360px; max-height: 78vh; overflow: hidden; }   /* vh — % är cykliskt i auto-grid-rad */
  .aplist { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 4px; }
  .aprow { flex: none; display: flex; align-items: center; gap: 8px; border-radius: 9px;
    background: var(--paper); border: 1px solid var(--line); padding: 10px 12px; }
  .aprow .snm { font-weight: 800; font-size: 12px; flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .aprow .smeta { font-size: 9px; font-weight: 700; color: var(--ink-soft); flex: none; }
  .aprow .apadd { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper); font-weight: 800; font-size: 16px; line-height: 1; }
  .aprow .apadd:disabled { background: var(--paper); color: var(--ink); }
  .cbtns .cyes.ok { background: var(--ink); border-color: var(--ink); }
  /* instrumentpickern på arket */
  .pickhead { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 1px 2px; }
  .pickhead .k { font-size: 9px; letter-spacing: .8px; font-weight: 800; color: #8b877d; }
  .pickhead .v { font-size: 11px; font-weight: 800; color: var(--paper); }
  .pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .pgrid .pbtn { display: flex; align-items: center; gap: 8px; border-radius: 9px;
    border: 1px solid #3a3a37; background: #2b2b29; padding: 9px 10px; transition: all var(--tap); }
  .pgrid .pbtn .ph { font-weight: 800; font-size: 10px; color: #8b877d; flex: none; }
  .pgrid .pbtn .pn { font-weight: 700; font-size: 11px; color: var(--paper); text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pgrid .pbtn.on { background: var(--ac, var(--paper)); border-color: var(--ac, var(--paper)); }
  .pgrid .pbtn.on .ph { color: rgba(255,255,255,.75); }
  .pgrid .pbtn.on .pn { color: #fff; }
  /* shapes-cykelknappen i offset-läget */
  .shapebtn { flex: none; height: 40px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--panel); font-weight: 800; font-size: 12px; color: var(--ink);
    margin-top: 5px; transition: all var(--tap); }
  .shapebtn:active { background: var(--ink); color: var(--paper); }
  /* NOTE-ytans piano: en oktav + oktav −/+ på sidorna */
  .piano { flex: none; display: flex; gap: 5px; height: 58px; margin-top: 5px; }
  .piano .poct { flex: none; width: 44px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel);
    font-weight: 800; font-size: 16px; color: var(--ink); transition: all var(--tap); }
  .piano .poct:active { background: var(--ink); color: var(--paper); }
  .pkeys { flex: 1; position: relative; display: flex; gap: 2px; }
  .pkeys .wk { flex: 1; border: 1px solid var(--line); border-radius: 0 0 6px 6px; background: #fff; padding: 0; }
  .pkeys .wk.on { background: var(--ac, var(--ink)); border-color: var(--ac, var(--ink)); }
  .pkeys .bk { position: absolute; top: 0; width: 9%; height: 60%; background: var(--ink); border: none;
    border-radius: 0 0 4px 4px; z-index: 2; padding: 0; }
  .pkeys .bk.on { background: var(--ac, var(--ink)); box-shadow: inset 0 0 0 2px var(--ink); }
  /* pianot på den svarta SOUND/STEP-ytan */
  .sndsurf .piano .poct { background: #2b2b29; border-color: #3a3a37; color: var(--paper); }
  .sndsurf .pkeys .wk { border-color: #3a3a37; }
  .sndsurf .pkeys .bk { background: #000; box-shadow: inset 0 0 0 1px #3a3a37; }
  .sndsurf .pkeys .bk.on { background: var(--ac, #fff); box-shadow: inset 0 0 0 2px #000; }

  /* variant list surface — samma kort i mitten som justerytan; utanför = stäng */
  .variants { flex: 1; min-height: 0; display: flex; }
  .vgrid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; align-content: start;
    overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; }
  .vgrid button { border-radius: 9px; border: 1px solid var(--line); background: var(--panel); padding: 10px 2px;
    min-width: 0; overflow-wrap: anywhere; font-weight: 800; font-size: 11px; color: var(--ink-soft); transition: all var(--tap); }
  .vgrid button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .acenter .aname.vtitle { flex: none; text-align: center; padding: 2px 0 4px; }
  .acenter .vgrid { align-content: safe center; }   /* centrerad när den ryms, annars från toppen (ingen klippning) */
  .acenter .vgrid button.on { background: var(--ac, var(--ink)); border-color: var(--ac, var(--ink)); color: #fff; }

  /* diskret feedback uppe vid headern — status bor i infovyn (tap på Brus) */
  #toast { position: fixed; top: calc(env(safe-area-inset-top) + 52px); left: 50%;
    transform: translateX(-50%) translateY(-70px); opacity: 0;
    background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
    transition: transform 200ms cubic-bezier(.2,.7,.2,1), opacity 200ms; pointer-events: none; z-index: 50; }
  #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
  /* infovyn */
  .info { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; }
  .info .ihead { font-size: 22px; font-weight: 800; }
  .info .igrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12px; }
  .info .igrid .k { color: var(--ink-soft); font-weight: 800; font-size: 10px; letter-spacing: .6px; padding-top: 1px; }
  .info .igrid .v { font-weight: 700; }
  .helpbody { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; color: var(--paper); }
  .helpbody h4 { font-size: 10px; letter-spacing: 1px; color: #8b877d; margin: 14px 0 4px; }
  .helpbody h4:first-child { margin-top: 0; }
  .helpbody p { font-size: 12px; line-height: 1.45; margin: 0 0 6px; }
  .helpbody b { color: #fff; }