:root {
  --tint-rgb: 255, 52, 32;
  --tint: rgb(var(--tint-rgb));
  --ink: rgba(var(--tint-rgb), 0.92);
  --dim: rgba(var(--tint-rgb), 0.42);
  --line: rgba(var(--tint-rgb), 0.26);
  --bg: #050000;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
}

button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--tint); outline-offset: 2px; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
}

#mast { position: fixed; top: 16px; left: 18px; z-index: 5; display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-transform: none; }
#mast small { text-transform: none; }   /* the aliases keep their exact casing */
#mast i { font-style: normal; color: var(--dim); }
#mast b { font-weight: 600; }
#mast small { color: var(--dim); font-size: 9px; }

#hint {
  position: fixed; top: 16px; right: 60px; z-index: 5; margin: 0; max-width: 46ch; text-align: right;
  color: var(--dim); font-size: 9px; pointer-events: none; transition: opacity 0.6s;
}
body:not(.lit) #hint, body.bare #hint, body:not(.lit) #helpbtn { opacity: 0; pointer-events: none; }

/* splash: the switch */
#switch {
  position: fixed; inset: 0; margin: auto; width: 220px; height: 170px; z-index: 6;
  background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 18px;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#switch .bulb {
  width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 40%, rgba(var(--tint-rgb), 0.28), rgba(var(--tint-rgb), 0.04) 70%);
  box-shadow: 0 0 40px rgba(var(--tint-rgb), 0.18);
  transition: box-shadow 0.5s, background 0.5s;
}
#switch:hover .bulb, #switch:focus-visible .bulb { box-shadow: 0 0 80px rgba(var(--tint-rgb), 0.5); }
#switch .cap { color: var(--dim); }
body.lit #switch { opacity: 0; pointer-events: none; transform: scale(1.15); }
body.lit #switch .bulb { background: radial-gradient(circle, #fff, var(--tint) 60%); box-shadow: 0 0 120px var(--tint); }

/* panel */
#panel {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: end;
  padding: 14px 18px;
  background: rgba(5, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px;
  transition: opacity 0.6s, transform 0.6s;
}
body:not(.lit) #panel, body.bare #panel { opacity: 0; transform: translateY(16px); pointer-events: none; }

#drummers { display: flex; gap: 14px; }
.drummer { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.drummer svg { width: 92px; height: 92px; display: block; }
.dot { fill: none; stroke: var(--dim); stroke-width: 1.2; cursor: pointer; transition: fill 0.1s; }
.dot.on { fill: var(--tint); stroke: var(--tint); }
.dot.ghost { fill: var(--tint); }
.dot.now { stroke: #fff; }
.dot.on.now { fill: #fff; filter: drop-shadow(0 0 3px var(--tint)); }
.drummer .info { font-size: 9px; color: var(--dim); }
.ctl { display: flex; gap: 2px; }
.ctl button, #play {
  background: none; border: 1px solid var(--line); border-radius: 4px; min-width: 20px; height: 20px; padding: 0 6px; line-height: 1;
}
.ctl button:hover, #play:hover { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.12); }

#roll { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.cell { height: 13px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 3px; }
.cell.beat { border-color: var(--dim); }
.cell.on { background: var(--tint); border-color: var(--tint); }
.cell.now { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.cell.on.now { background: #fff; }

#knobs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px 14px; margin-top: 14px; }
.knob { display: flex; flex-direction: column; gap: 5px; font-size: 10px; }
.knob small { display: block; color: var(--dim); font-size: 8px; }
.knob output { color: var(--dim); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: none; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--dim); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--dim); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 8px var(--tint); border: 0;
}
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--tint); border: 0; box-shadow: 0 0 8px var(--tint); }

#light { display: flex; flex-direction: column; gap: 12px; min-width: 150px; }
#bulbs { display: flex; flex-direction: column; gap: 6px; }
.bulbbtn {
  display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; text-align: left; align-items: center;
  background: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
}
.bulbbtn i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--b)); box-shadow: 0 0 8px rgb(var(--b)); opacity: 0.55; }
.bulbbtn small { color: var(--dim); font-size: 8px; }
.bulbbtn[aria-pressed="true"] { border-color: rgb(var(--b)); }
.bulbbtn[aria-pressed="true"] i { opacity: 1; }

/* the tools strip: loop / record / view */
#tools {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
#tools .group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#tools button, #tools select, #filesmenu button {
  background: none; border: 1px solid var(--line); border-radius: 4px; height: 22px; padding: 0 8px; line-height: 1;
}
#tools select { background: rgba(5, 0, 0, 0.9); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
#tools button, #filesmenu button { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
#tools select:disabled { opacity: 0.6; }
#tools button:hover, #tools select:hover, #filesmenu button:hover { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.12); }
#tools option { background: #120000; color: #ffd6cf; text-transform: none; }
#recinfo { min-width: 9ch; color: var(--dim); font-variant-numeric: tabular-nums; }
body.recording #rec { border-color: #ff3a2a; color: #fff; background: rgba(255, 40, 30, 0.35); animation: pulse 1.4s ease-in-out infinite; }
body.recording #recinfo { color: #fff; }
@keyframes pulse { 50% { box-shadow: 0 0 12px rgba(255, 40, 30, 0.7); } }

.menuwrap { position: relative; display: inline-block; }
#filesmenu {
  position: absolute; bottom: 30px; left: 0; z-index: 8; min-width: 250px; padding: 6px;
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(8, 0, 0, 0.96); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
#filesmenu[hidden] { display: none; }
#filesmenu button { height: 26px; text-align: left; border-color: transparent; }
#filesmenu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }

/* help, messages */
#helpbtn {
  position: fixed; top: 12px; right: 18px; z-index: 6; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: rgba(5, 0, 0, 0.6); border: 1px solid var(--line); line-height: 1; transition: opacity 0.6s;
}
#helpbtn:hover, #helpbtn[aria-expanded="true"] { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.16); }
#help {
  position: fixed; top: 48px; right: 18px; z-index: 9; width: min(470px, calc(100vw - 36px)); max-height: calc(100vh - 84px); overflow: auto;
  padding: 16px 18px 12px; background: rgba(5, 0, 0, 0.94); border: 1px solid var(--line); border-radius: 12px;
  text-transform: none; letter-spacing: 0.02em; font-size: 12px; line-height: 1.6; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#help[hidden] { display: none; }
#help h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); font-weight: 400; }
#help dl { margin: 0; }
#help dt { margin-top: 10px; color: var(--tint); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
#help dd { margin: 2px 0 0; color: rgba(255, 220, 214, 0.86); }
#help b { color: #fff; font-weight: 600; }
#help a { color: var(--tint); text-decoration: underline; text-underline-offset: 3px; }
#help .fine { margin: 12px 0 0; font-size: 10.5px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 14px; }
#helpclose { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; padding: 0; background: none; border: 0; font-size: 18px; line-height: 1; }
#notice {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 9; padding: 8px 14px; border-radius: 8px;
  background: rgba(60, 10, 0, 0.94); border: 1px solid var(--tint); text-transform: none; letter-spacing: 0.04em;
}
#notice[hidden] { display: none; }
#toast {
  position: fixed; top: 52px; left: 50%; transform: translate(-50%, -8px); z-index: 9; max-width: min(640px, calc(100vw - 36px));
  padding: 8px 14px; border-radius: 8px; background: rgba(8, 0, 0, 0.95); border: 1px solid var(--line);
  text-transform: none; letter-spacing: 0.03em; font-size: 11.5px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- the feedback card: calm, no motion, small ---- */
#fbcard {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 10; width: min(440px, calc(100vw - 24px));
  padding: 12px 14px; border-radius: 8px; background: rgba(8, 0, 0, 0.97); border: 1px solid var(--line);
  text-transform: none; letter-spacing: 0.03em; font-size: 12px;
}
#fbcard p { margin: 0 0 8px; } #fbcard .fbfine { color: var(--dim); font-size: 10.5px; margin: 8px 0 0; }
#fbcard .fbrow { display: flex; flex-wrap: wrap; gap: 8px; }
#fbcard button { min-height: 40px; padding: 0 14px; border-radius: 6px; background: none; border: 1px solid var(--line); color: var(--ink); }
#fbcard button:hover { border-color: var(--tint); } #fbcard button.fbquiet { border-color: transparent; color: var(--dim); }
#fbcard button:disabled { opacity: 0.5; cursor: default; }
#fbcard textarea { width: 100%; margin: 0 0 8px; padding: 8px; border-radius: 6px; background: #000; border: 1px solid var(--line); color: var(--ink); font: inherit; resize: vertical; }
#fbcard textarea:focus { outline: 1px solid var(--tint); }
@media (pointer: coarse) { #fbcard button { min-height: 44px; } }
@media (max-width: 700px) { #fbcard { top: calc(56px + env(safe-area-inset-top)); } }
body.clean #fbcard { display: none; }

/* ---- v3 additions ---- */
#mast #dre { pointer-events: auto; cursor: default; font-weight: 600; }
#armed {
  position: fixed; top: 34px; right: 60px; z-index: 5; margin: 0; font-size: 9px; color: #fff; letter-spacing: 0.22em;
  pointer-events: none; animation: pulse 0.9s ease-in-out infinite;
}
#armed[hidden] { display: none; }
body:not(.lit) #armed, body.bare #armed { display: none; }

#light { min-width: 170px; }
#stylewrap select, #tempo select { width: 100%; }
#style, #tools select, #pbar button {
  background: rgba(5, 0, 0, 0.9); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; height: 22px; padding: 0 6px;
}
#style { width: 100%; }
#style option { background: #120000; color: #ffd6cf; text-transform: none; }
#tempo { display: flex; flex-direction: column; gap: 6px; }
.temporow { display: flex; align-items: center; gap: 6px; }
.temporow input[type="number"] {
  width: 7ch; height: 22px; background: rgba(5, 0, 0, 0.9); color: inherit; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; letter-spacing: 0; text-align: right; padding: 0 4px;
}
.temporow button { height: 22px; padding: 0 8px; background: none; border: 1px solid var(--line); border-radius: 4px; }
.temporow button[aria-pressed="true"] { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.22); color: #fff; }
.temporow button:hover { border-color: var(--tint); }

#mutes button, #clips button.chip { min-width: 0; }
#tools button[aria-pressed="true"].mute { border-color: var(--dim); color: var(--dim); text-decoration: line-through; background: rgba(0, 0, 0, 0.4); }
#tools button.armed { border-color: #fff; color: #fff; animation: pulse 1s ease-in-out infinite; }
#tools button.holding { border-color: #fff; background: rgba(var(--tint-rgb), 0.5); color: #fff; }
#clips { display: inline-flex; gap: 4px; }
#clips .chip { border-color: var(--tint); }
#clips .chip.off { border-color: var(--line); color: var(--dim); }
.drummer.muted svg { opacity: 0.35; }
.drummer.muted .info { text-decoration: line-through; }
#roll.muted { opacity: 0.35; }

/* small popover cards (journey, MIDI) */
#journeypop, #midipanel {
  position: fixed; z-index: 9; padding: 14px 16px 12px; background: rgba(5, 0, 0, 0.95); border: 1px solid var(--line); border-radius: 12px;
  text-transform: none; letter-spacing: 0.02em; font-size: 12px; line-height: 1.6; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#journeypop { bottom: 92px; right: 24px; width: min(330px, calc(100vw - 36px)); }
#midipanel { top: 48px; right: 18px; width: min(520px, calc(100vw - 36px)); max-height: calc(100vh - 84px); overflow: auto; }
#journeypop[hidden], #midipanel[hidden] { display: none; }
.card h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); font-weight: 400; }
.card p { margin: 6px 0; color: rgba(255, 220, 214, 0.86); }
.card .row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.card label { display: flex; align-items: center; gap: 6px; }
.card button, .card select, .card input[type="number"] {
  background: rgba(5, 0, 0, 0.9); color: inherit; font: inherit; letter-spacing: 0.06em; text-transform: none;
  border: 1px solid var(--line); border-radius: 4px; height: 24px; padding: 0 8px;
}
.card input[type="number"] { width: 8ch; }
.card button:hover { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.14); }
.card .close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 18px; width: 24px; padding: 0; }
.card table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 11px; }
.card td { padding: 3px 4px; border-top: 1px solid rgba(var(--tint-rgb), 0.12); vertical-align: middle; }
.card td.k { color: var(--dim); font-family: var(--mono); white-space: nowrap; }
.card td button { height: 20px; font-size: 10px; padding: 0 6px; }
.card tr.listening td { background: rgba(var(--tint-rgb), 0.18); }
.card .mon { font-family: var(--mono); font-size: 10px; color: var(--dim); min-height: 3.2em; white-space: pre; }
.card .group-h { color: var(--tint); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 10px; }

/* playback bar on the instrument page */
#pbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 7; display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: rgba(5, 0, 0, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px;
}
#pbar[hidden] { display: none; }
#pbar input[type="range"] { flex: 1; }
#ptime { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dim); min-width: 13ch; text-align: right; }
#pplay { width: 40px; padding: 0; }
body.playback #panel { opacity: 0; pointer-events: none; transform: translateY(16px); }
body.clean #pbar { opacity: 0; pointer-events: none; }

/* drag and drop */
#dropzone {
  position: fixed; inset: 10px; z-index: 12; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--tint); border-radius: 18px; background: rgba(var(--tint-rgb), 0.08); pointer-events: none;
}
#dropzone[hidden] { display: none; }
#dropzone p { margin: 0; font-size: 14px; letter-spacing: 0.22em; color: #fff; }

/* the darkroom, for those who look: everything goes through one red safelight */
body.darkroom::before {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; background: rgb(255, 38, 8); mix-blend-mode: multiply;
}
body.darkroom { --tint-rgb: 255, 52, 32; }

/* clean stream mode: only the picture (and the vignette) remain */
body.clean #panel, body.clean #pbar, body.clean #journeypop, body.clean #midipanel, body.clean #armed, body.clean #mast, body.clean #hint, body.clean #helpbtn, body.clean #help, body.clean #toast, body.clean #notice { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
body.clean #stage { cursor: none; }

@media (max-width: 1200px) {
  #knobs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  #panel { grid-template-columns: 1fr; max-height: 62vh; overflow: auto; gap: 16px; }
  #drummers { justify-content: space-between; }
  #knobs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #hint { display: none; }
  #tools { justify-content: flex-start; }
}

@media (max-width: 520px) {
  #mast { max-width: calc(100vw - 64px); }          /* leave room for the ? button: let the title wrap */
  #mast span { white-space: normal; }
}


/* ---- touch, pen and small screens ---- */
body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }
button, select, input[type="range"], label { touch-action: manipulation; }
#build { touch-action: none; -webkit-user-select: none; user-select: none; }
#sheet { display: none; }
body.touch { -webkit-user-select: none; user-select: none; }
body.touch #hint { display: none; }

@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  #panel {
    left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; align-items: stretch;
    padding: 8px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    border-radius: 16px 16px 0 0; border-bottom: 0;
    max-height: 66vh; max-height: 66dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #sheet {
    display: block; order: -2; position: sticky; top: 0; align-self: flex-end; z-index: 3; height: 32px; padding: 0 16px;
    background: rgba(5, 0, 0, 0.92); border: 1px solid var(--line); border-radius: 16px; margin-bottom: -6px;
  }
  #panel { gap: 12px; }
  #tools { display: contents; }                          /* the groups become children of the panel, so the quick ones can lead and the rest can follow the instrument */
  #tools .group { gap: 6px; order: 5; padding-top: 10px; border-top: 1px solid var(--line); }
  #tools .group.quick { order: -1; padding-top: 0; border-top: 0; }
  #tools button, #tools select { height: 40px; min-width: 40px; padding: 0 12px; font-size: 12px; }
  #build { flex: 1 1 150px; height: 48px; font-size: 13px; }
  body.sheet-min #panel > :not(#sheet):not(#tools), body.sheet-min #tools .group:not(.quick) { display: none; }

  #drummers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .drummer { width: auto; }
  .drummer svg { width: 100%; max-width: 120px; height: auto; }
  .ctl { display: grid; grid-template-columns: repeat(2, 38px); gap: 4px; }
  .ctl button { min-width: 0; width: 38px; height: 38px; }
  #roll { gap: 2px; }
  .cell { height: 15px; }
  #knobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  #light { min-width: 0; }
  #bulbs { flex-direction: row; }
  .bulbbtn { flex: 1; padding: 8px; min-height: 44px; }

  input[type="range"] { height: 30px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2px; }
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  #style, #tools select, .card select, .card input, .temporow input { font-size: 16px; }   /* anything under 16px makes iOS zoom the page on focus */
  #style { height: 40px; }
  .temporow input[type="number"], .temporow button { height: 40px; }

  #mast { top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); max-width: calc(100vw - 80px); }
  #mast span { white-space: normal; }
  #helpbtn { top: calc(8px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: 38px; height: 38px; }
  #armed { top: calc(52px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); }
  #toast, #notice { top: calc(56px + env(safe-area-inset-top)); }
  #help { left: 8px; right: 8px; width: auto; top: calc(54px + env(safe-area-inset-top)); max-height: calc(100dvh - 70px - env(safe-area-inset-top)); }
  #journeypop, #midipanel { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 80vh; max-height: 80dvh; overflow: auto; }
  .card button, .card select, .card input[type="number"] { height: 38px; }
  .card td button { height: 32px; }
  #filesmenu { bottom: 46px; min-width: 230px; }
  #filesmenu button { height: 40px; }
  #pbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; }
  #pbar input[type="range"] { flex: 1 1 100%; order: 3; }
  #pbar button { height: 40px; }
  #ptime { min-width: 0; margin-left: auto; }
}

/* a phone on its side: the open panel becomes a column on the right, leaving the picture */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 960px), (max-height: 520px) and (orientation: landscape) and (hover: none) {
  body:not(.sheet-min) #panel { left: auto; top: 0; width: min(52vw, 480px); max-height: none; border-radius: 16px 0 0 16px; border-bottom: 1px solid var(--line); }
  body:not(.sheet-min) #sheet { margin-right: 46px; }   /* clear of the ? button */
  body.sheet-min #panel { max-height: 46vh; max-height: 46dvh; }
  #mast small, #hint { display: none; }
}

@media (max-width: 380px) {
  #knobs { grid-template-columns: 1fr; }
  #tools button, #tools select { padding: 0 9px; }
}


/* ---- v3.2: levels, context menu, battery, clock ---- */
#synth { position: relative; }
.lvl { font-size: 9px; color: var(--dim); min-height: 11px; opacity: 0; transition: opacity 0.4s; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; text-align: center; }
.lvl.has { opacity: 0.7; }
.lvl.show { opacity: 1; color: #fff; }
#basslvl { position: absolute; top: -13px; right: 0; text-align: right; }

#ctx {
  position: fixed; z-index: 20; min-width: 210px; padding: 5px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(8, 0, 0, 0.97); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.65);
  text-transform: none; letter-spacing: 0.03em; font-size: 12px;
}
#ctx .ctxh { padding: 4px 9px 5px; color: var(--dim); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; }
#ctx button {
  text-align: left; background: none; border: 0; border-radius: 6px; padding: 7px 9px; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; cursor: pointer;
}
#ctx button:hover, #ctx button:focus-visible { background: rgba(var(--tint-rgb), 0.18); outline: none; }
#ctx button.dim { color: var(--dim); }
#ctx hr { border: 0; border-top: 1px solid var(--line); margin: 3px 4px; width: auto; }

/* the battery: ten cells, quiet until it matters */
#battery {
  position: fixed; top: 15px; right: 56px; z-index: 5; display: flex; align-items: center; gap: 6px; height: 18px; pointer-events: auto; cursor: default;
  color: var(--dim); font-size: 9px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; transition: opacity 0.6s, color 0.4s;
}
#battery[hidden] { display: none; }
#battery svg { width: 34px; height: 14px; overflow: visible; }
#battery .bshell { fill: none; stroke: var(--dim); stroke-width: 1; }
#battery .bshell.fill { fill: var(--dim); stroke: none; }
#battery .bcell { fill: var(--tint); opacity: 0.1; transition: opacity 0.4s; }
#battery .bcell.on { opacity: 0.85; filter: drop-shadow(0 0 2px rgba(var(--tint-rgb), 0.7)); }
#battery .bbolt { fill: #fff; opacity: 0; transition: opacity 0.3s; }
#battery.chg .bbolt { opacity: 0.95; }
#battery.chg .bcell.on { opacity: 1; fill: #fff; }
#battery.low { color: var(--ink); }
#battery.crit { color: #fff; }
#battery.crit .bshell { stroke: #fff; }
#battery.crit .bcell.on { fill: #ff4d3a; opacity: 1; filter: drop-shadow(0 0 4px #ff2a14); }
#battery.crit.still { animation: bpulse 1.6s ease-in-out infinite; }
#battery.crit.urgent.still { animation-duration: 0.8s; }
@keyframes bpulse { 50% { opacity: 0.35; } }
body:not(.lit) #battery, body.bare #battery { opacity: 0; }
body.clean #battery:not(.crit) { opacity: 0; pointer-events: none; }
#hint { top: 40px; }
#armed { top: 62px; }

/* the set clock: only in fullscreen and clean mode, large enough to read from across a room, quiet enough to ignore */
#clock {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: none; cursor: pointer;
  font: 300 26px/1 var(--mono); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: rgba(var(--tint-rgb), 0.5);
  text-shadow: 0 0 14px rgba(var(--tint-rgb), 0.25); -webkit-user-select: none; user-select: none;
}
body.fs #clock, body.clean #clock { display: block; }
body:not(.lit) #clock { display: none; }
#clock:hover { color: rgba(var(--tint-rgb), 0.85); }
body.darkroom #clock { color: rgba(255, 90, 60, 0.6); }

@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  #battery { top: calc(18px + env(safe-area-inset-top)); right: calc(58px + env(safe-area-inset-right)); }
  #mast { max-width: calc(100vw - 180px); }
  #clock { top: calc(58px + env(safe-area-inset-top)); font-size: 22px; }
  #ctx { min-width: 220px; }
  #ctx button { padding: 11px 10px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01s !important; }
}


/* ================= DreVelopDrop additions ================= */

/* settings, developer mode, and a few small controls */
#setbtn {
  position: fixed; top: 12px; right: 52px; z-index: 6; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: rgba(5, 0, 0, 0.6); border: 1px solid var(--line); line-height: 1; transition: opacity 0.6s;
}
#setbtn:hover, #setbtn[aria-expanded="true"] { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.16); }
body:not(.lit) #setbtn, body.clean #setbtn { opacity: 0; pointer-events: none; }
#battery { right: 90px; }
#hint { right: 94px; }
#settings, #devpanel {
  position: fixed; z-index: 9; top: 48px; right: 18px; width: min(430px, calc(100vw - 36px)); max-height: calc(100vh - 84px); overflow: auto;
  padding: 14px 16px 12px; background: rgba(5, 0, 0, 0.95); border: 1px solid var(--line); border-radius: 12px;
  text-transform: none; letter-spacing: 0.02em; font-size: 12px; line-height: 1.6; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#settings[hidden], #devpanel[hidden] { display: none; }
#devpanel { width: min(500px, calc(100vw - 36px)); left: 18px; right: auto; top: 64px; max-height: calc(100vh - 220px); }   /* a developer's overlay: it sits on the left and stays while you use the rest */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(var(--tint-rgb), 0.12); }
.setrow small { display: block; color: var(--dim); font-size: 10px; }
.setrow .inline { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.setrow output { min-width: 6ch; color: var(--dim); }
.btnlink, .card a.btnlink {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; color: inherit; text-decoration: none; background: none;
  letter-spacing: inherit; font-size: inherit; line-height: 1.5;
}
.btnlink:hover { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.14); }
#tools .btnlink { height: 22px; line-height: 20px; padding: 0 8px; }
.tick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tick input { accent-color: var(--tint); margin: 0; }
.devlive { margin: 6px 0; padding: 8px 10px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(var(--tint-rgb), 0.16); border-radius: 6px; font: 10.5px/1.5 var(--mono); letter-spacing: 0; text-transform: none; white-space: pre-wrap; color: #9f9; }
.devsw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 6px 0 10px; }
.devsw label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.devsw input { accent-color: var(--tint); }
body.dev #stage { outline: 1px dashed rgba(var(--tint-rgb), 0.35); outline-offset: -1px; }

/* ---------- trippy buttons ----------
   Hover: a slowly turning band of colour runs round the edge. Press: the button squashes like jelly and a burst blooms under the finger.
   --h is a hue offset taken from the control's name, so every control blooms in its own colour. Everything here stops with reduced motion. */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ang-spin { to { --ang: 360deg; } }
@keyframes burst-grow { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0.95; } 100% { transform: translate(-50%, -50%) scale(calc(11 * var(--s, 1))) rotate(160deg); opacity: 0; } }
@keyframes jelly { 0% { transform: scale(1); } 35% { transform: scale(1.08, 0.9); } 70% { transform: scale(0.96, 1.06); } 100% { transform: scale(1); } }

.vfx-burst {
  position: fixed; z-index: 30; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, #ff3220, #ff9e30, #f6eede, #ff3220 60%, #ff9e30, #ff3220);
  filter: hue-rotate(var(--h, 0deg)) blur(0.4px);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 64%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 64%);
  animation: burst-grow 0.8s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

/* (fixed and sticky controls are already positioned, so they are left alone; the close buttons keep their corner) */
body.vfx-motion :is(#tools button, #tools .btnlink, .ctl button, .bulbbtn, .card button:not(.close), #pplay, #pclose) { position: relative; }
body.vfx-motion :is(#tools button, #tools .btnlink, .ctl button, .bulbbtn, .card button:not(.close), #sheet, #pplay, #pclose):not(:disabled)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: conic-gradient(from var(--ang), #ff3220, #ff9e30, #f6eede, #ff3220 55%, #ff9e30, #ff3220);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: hue-rotate(calc(var(--vh, 0) * 1deg));
}
body.vfx-motion :is(#tools button, #tools .btnlink, .ctl button, .bulbbtn, .card button:not(.close), #sheet, #pplay, #pclose):not(:disabled):is(:hover, :focus-visible)::after { opacity: 1; animation: ang-spin 2.6s linear infinite; }
body.vfx-3 :is(#tools button, #tools .btnlink, .ctl button, .bulbbtn, .card button:not(.close), #sheet):not(:disabled):is(:hover, :focus-visible)::after { animation-duration: 1.2s; filter: hue-rotate(40deg) saturate(1.6); }
body.vfx-motion :is(#tools button, #tools .btnlink, .ctl button, .bulbbtn, .card button, #sheet, #pplay, #pclose, #setbtn, #helpbtn):not(:disabled) { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, background 0.2s; }
body.vfx-motion :is(#tools button, #tools .btnlink, .ctl button, .bulbbtn, .card button, #sheet, #pplay, #pclose, #setbtn, #helpbtn):not(:disabled):active { transform: scale(1.1, 0.84); transition-duration: 0.08s; }
body.vfx-motion :is(.cell, .dot) { transition: fill 0.1s, background 0.12s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
body.vfx-motion .cell:active { transform: scale(0.8, 1.35); }
body.vfx-motion .dot:active { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
body.vfx-motion #build.holding { animation: jelly 0.9s ease-in-out infinite; }
body.vfx-motion #switch:hover .bulb { animation: jelly 1.6s ease-in-out infinite; }
body.vfx-3 .bulbbtn[aria-pressed="true"] i { animation: jelly 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .vfx-burst { display: none; }
  body.vfx-motion :is(*)::after { animation: none !important; }
}

@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  #setbtn { top: calc(8px + env(safe-area-inset-top)); right: calc(56px + env(safe-area-inset-right)); width: 38px; height: 38px; }
  #battery { right: calc(104px + env(safe-area-inset-right)); }
  #settings, #devpanel { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 80vh; max-height: 80dvh; }
  #tools .btnlink { height: 40px; line-height: 38px; }
}