/*
 * GPU: a blur is only drawn where something moves behind it (dialogs, notes, the menu over a machine). Panels that sit
 * on the still room (the bar, the list, the grid cards, the mixer) get the frosted colour without the blur: over a still
 * gradient it looks the same, and live machines behind a blur would cost a repaint every frame.
 * glass.css: the look of the iOS / macOS app, for the web. Loaded after app.css and only restyles it: floating
 * glass panels (frosted, translucent, softly lit at the edge), capsule buttons, the system's own type, and the
 * machine's colours glowing behind everything. The browser has no Liquid Glass; backdrop-filter is the nearest.
 */
:root {
  --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --g-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --g-acc: var(--t-accent, #ffad1f);
  --g-bg: #0b0b0e;
  --g-fill: rgba(34, 34, 40, .78);          /* a glass panel */
  --g-fill-2: rgba(255, 255, 255, .07);     /* a button on glass */
  --g-fill-3: rgba(255, 255, 255, .13);     /* hovered */
  --g-line: rgba(255, 255, 255, .10);
  --g-hi: rgba(255, 255, 255, .14);         /* the lit top edge */
  --g-ink: #f2f2f5;
  --g-dim: rgba(235, 235, 245, .58);
  --g-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
  --g-blur: blur(18px);
  --g-r: 22px;
}
html[data-ui="light"] {
  --g-bg: #e9e8ee;
  --g-fill: rgba(255, 255, 255, .78);
  --g-fill-2: rgba(0, 0, 0, .05);
  --g-fill-3: rgba(0, 0, 0, .09);
  --g-line: rgba(0, 0, 0, .08);
  --g-hi: rgba(255, 255, 255, .9);
  --g-ink: #1c1c1e;
  --g-dim: rgba(60, 60, 67, .62);
  --g-shadow: 0 18px 50px rgba(30, 30, 60, .16), 0 2px 8px rgba(30, 30, 60, .08);
}

/* ── the room: dark (or pale), with the machine's colours glowing in it ── */
html, body { background: var(--g-bg); }
body {
  font-family: var(--g-font); font-weight: 500; font-size: 13px; color: var(--g-ink);
  background:
    radial-gradient(60vw 60vh at 85% 8%, color-mix(in srgb, var(--g-acc) 30%, transparent), transparent 70%),
    radial-gradient(55vw 55vh at 10% 95%, color-mix(in srgb, var(--t-page, #6a5acd) 26%, transparent), transparent 70%),
    var(--g-bg);
}
button, input, select { font-family: var(--g-font); }

/* a glass panel */
.bar, .browser, .mixer, .midipanel, .about, .fm-toast, .fm-newborn {
  background: var(--g-fill) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow) !important;
  color: var(--g-ink);
}

/* ── the bar: floating, rounded, its pieces as capsules ── */
.bar { margin: 10px 10px 0; padding: 8px 10px; gap: 8px; border-radius: var(--g-r); }
.logo { color: var(--g-ink); font-size: 15px; }
.dot { border: 0; background: var(--g-acc); box-shadow: 0 0 14px color-mix(in srgb, var(--g-acc) 80%, transparent); }

/* every button: a glass capsule (round when it holds only an icon) */
.aboutbtn, .viewbtn, .nav button, .rec, .sync, .calbtn, .slot-bar button, .mx-btns button, .mx-reset, .p-skin button,
.mp-learn button, .nb-go, .barmore, .midibtn, .about-x, .nb-x, .mp-big, a.about-live-dl {
  height: 30px; padding: 0 12px; border: 0 !important; border-radius: 999px !important;
  background: var(--g-fill-2) !important; color: var(--g-ink) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--g-line) !important;
  font: 600 12.5px/1 var(--g-font); letter-spacing: 0; cursor: pointer;
  transition: background .15s, transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s;
}
.aboutbtn:hover, .viewbtn:hover, .nav button:hover, .rec:hover, .sync:hover, .calbtn:hover, .slot-bar button:hover,
.mx-btns button:hover, .mx-reset:hover, .p-skin button:hover, .mp-learn button:hover, .barmore:hover, .midibtn:hover {
  background: var(--g-fill-3) !important;
}
.aboutbtn:active, .viewbtn:active, .nav button:active, .rec:active, .sync:active, .calbtn:active, .slot-bar button:active,
.mx-btns button:active, .p-skin button:active, .nb-go:active { transform: scale(.94); }
:is(.aboutbtn, .viewbtn, .nav button, .rec, .sync, .calbtn, .slot-bar button, .mx-btns button, .p-skin button):focus-visible {
  outline: 2px solid var(--g-acc) !important; outline-offset: 2px;
}
.viewbtn, .calbtn, .nav button, .barmore, .about-x, .nb-x { width: 30px; padding: 0; margin-left: 0; display: inline-grid; place-items: center; }
@media (min-width: 821px) { .barmore { display: none; } } /* (it folds the bar on small screens only: app.css) */
.viewbtn svg, .calbtn svg { fill: currentColor !important; width: 14px; height: 14px; }
.nav { gap: 4px; }
/* on: tinted with the machine's colour */
.viewbtn.on, .sync.on, .midibtn.on, .mx-m.on, .slot-bar .sb-big, .stage.grid .slot.big .sb-big, .mp-learn button.on {
  background: var(--g-acc) !important; color: #111 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px color-mix(in srgb, var(--g-acc) 45%, transparent) !important;
}
.viewbtn.on svg { fill: #111 !important; }
.mx-s.on { background: #12dcef !important; color: #062a2e !important; }
.rec.tp.on { background: color-mix(in srgb, #34c759 80%, transparent) !important; color: #04210b !important; }
.rec.tp.on svg { fill: #04210b !important; }
.rec:not(.tp).on { background: color-mix(in srgb, #ff3b30 85%, transparent) !important; color: #fff !important; }
.rec.on .rdot { background: #fff; box-shadow: 0 0 8px #fff; }
.rec svg { fill: currentColor; }

/* the readouts: glass pills, the numbers in the machine's colour */
.lcd { height: 30px; padding: 0 12px; border: 0 !important; border-radius: 999px; background: var(--g-fill-2) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--g-line); }
.lcd .k { color: var(--g-dim); font: 600 10px/1 var(--g-font); letter-spacing: .06em; }
.lcd .v { color: var(--g-acc); }
html[data-ui="light"] .lcd .v { color: color-mix(in srgb, var(--g-acc) 70%, #000); }
.bpmbox, .keybox { padding: 0 3px 0 12px; }
.bpmbox input { background: transparent !important; border: 0 !important; color: var(--g-ink) !important; font: 600 13px/1 var(--g-mono); }
.keybox select { color: var(--g-ink) !important; font: 600 12.5px/1 var(--g-font) !important; }
.lcd .sync { height: 24px; padding: 0 10px; }

/* the special buttons keep their own colours, as glass tinted with them */
#tfBtn { background: color-mix(in srgb, #ffad1f 26%, transparent) !important; color: #ffd27a !important; }
#liveBtn { background: color-mix(in srgb, #12dcef 80%, transparent) !important; color: #062a2e !important; }
html[data-ui="light"] #tfBtn { color: #8a4b00 !important; }
.calbtn.ytbtn { color: #ff453a !important; }
.calbtn.dcbtn { color: #8c95ff !important; }

/* ── the room's layout: everything floats, with air between ── */
main { gap: 10px; padding: 10px; }
@media (min-width: 821px) { main { grid-template-columns: 290px 1fr; } }
body.grid-mode main { grid-template-columns: 1fr; }

/* the collection: a glass sidebar */
.browser { border-radius: var(--g-r); overflow: hidden; }
.bhead { padding: 14px 16px 8px; border: 0; color: var(--g-ink); font: 700 17px/1.2 var(--g-font); letter-spacing: -.01em; }
.bnote { font: 500 12px/1.2 var(--g-font); color: var(--g-dim); align-self: end; }
.viewbar { padding: 4px 12px 10px; border: 0; color: var(--g-dim); font: 600 11.5px var(--g-font); }
.viewbar select { height: 28px; padding: 0 10px; border: 0 !important; border-radius: 999px; background: var(--g-fill-2) !important;
  color: var(--g-ink) !important; box-shadow: inset 0 0 0 1px var(--g-line); font: 600 12.5px var(--g-font) !important; }
.viewbar .vb-btn { height: 28px; padding: 0 12px; border: 0 !important; border-radius: 999px; background: var(--g-fill-2) !important;
  color: var(--g-ink) !important; box-shadow: inset 0 0 0 1px var(--g-line); font: 600 12.5px var(--g-font) !important; }
#list { padding: 0 8px 10px; }
#list li { margin: 2px 0; border: 0 !important; border-radius: 14px; background: transparent !important; padding: 8px 10px 8px 12px;
  transition: background .15s; }
#list li:nth-child(odd) { background: transparent !important; }
#list li:hover { background: var(--g-fill-2) !important; }
#list li.sel { background: color-mix(in srgb, var(--sw, var(--g-acc)) 30%, transparent) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px color-mix(in srgb, var(--sw, var(--g-acc)) 45%, transparent); }
#list li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--sw, transparent); opacity: .9; }
#list li { position: relative; }
#list li.makeown::before, #list li.viewnone::before { display: none; }
#list .nm { color: var(--g-ink) !important; font: 600 14px/1.3 var(--g-font); }
#list li.sel .nm { color: var(--g-ink) !important; }
#list .ty { color: var(--g-dim); font: 500 11.5px/1.3 var(--g-font); }
#list .no { color: var(--g-dim); }
#list li.newest .nm::after { border-radius: 999px; padding: 2px 7px; background: var(--g-acc); }
#list li.makeown { color: var(--g-acc) !important; font-weight: 600; background: var(--g-fill-2) !important; margin-bottom: 8px; }
#list .lock { border-radius: 999px; }

/* the stage: the machine's own coloured page, as a rounded card */
.stage { border-radius: var(--g-r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--g-shadow); }
.stage:not(.grid) .slot iframe { border-radius: 16px; }
.slot-bar { border-radius: 999px; padding: 5px 6px 5px 14px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); font: 600 12px var(--g-font); }
.slot-bar button { height: 26px; padding: 0 10px; font-size: 11.5px; }
.placard h1 { letter-spacing: -.02em; }
.p-skin button { width: 30px; padding: 0; }
.p-skin { font-family: var(--g-font); }
.p-star { border-radius: 999px !important; }

/* the grid: rounded glass cards */
.stage.grid { background: transparent !important; box-shadow: none; padding: 4px; gap: 14px; }
.stage.grid .slot, .ph { border-radius: 20px !important; background: var(--g-fill) !important; border: 1px solid var(--g-line);
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow); overflow: hidden; }
.stage.grid .fbox { border-radius: 0 0 20px 20px; }
.stage.grid .slot .slot-bar, .stage.grid .slot.current:not(.locked) .slot-bar { border-radius: 0; background: transparent; box-shadow: none;
  color: var(--g-ink); padding: 8px 8px 8px 14px; font-size: 12.5px; }
.stage.grid .slot.current { box-shadow: inset 0 1px 0 var(--g-hi), 0 0 0 2px var(--g-acc), var(--g-shadow); }
.stage.grid .makeown-tile { border-radius: 20px; }
.ph { color: var(--g-dim); }

/* the mixer: a glass tray */
.mixer { margin: 0 10px 10px; border-radius: var(--g-r); overflow: hidden; }
.mx-strips { gap: 6px; padding: 10px; }
.mx-strip { border-radius: 16px; background: var(--g-fill-2) !important; border-top: 0; box-shadow: inset 0 3px 0 var(--sw, #888), inset 0 0 0 1px var(--g-line); }
.mx-strip.cur { background: color-mix(in srgb, var(--sw, var(--g-acc)) 22%, transparent) !important; }
.mx-master { background: transparent !important; border-left: 1px solid var(--g-line) !important; }
.mx-name { border-radius: 12px; }
.mx-mname, .mx-db { color: var(--g-acc); }
.mx-cap { border-radius: 4px; }
.mx-btns button, .mx-reset { height: 24px; padding: 0 8px; font-size: 11px; }

/* panels and notes */
.midipanel, .about { border-radius: 26px; }
.fm-toast { border-radius: 18px; }
.fm-newborn { border-radius: 24px; }
.nb-go { background: var(--sw, var(--g-acc)) !important; color: #111 !important; }
.mp-big { background: #12dcef !important; color: #062a2e !important; }
.mp-ports select { border-radius: 10px; border: 0 !important; background: var(--g-fill-2) !important; color: var(--g-ink) !important; box-shadow: inset 0 0 0 1px var(--g-line); }

/* small screens: the bar and the list keep the look */
@media (max-width: 820px) {
  .bar { margin: 8px 8px 0; border-radius: 18px; padding: 6px 8px; gap: 6px; }
  main { padding: 8px; gap: 8px; }
  .browser { max-height: 34vh; }
  .bar :is(.aboutbtn, .rec, .sync) { height: 28px; padding: 0 10px; }
  .bar :is(.viewbtn, .calbtn, .nav button, .barmore) { width: 28px; height: 28px; }
  .logo { font-size: 13px; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar, .browser, .mixer, .midipanel, .about, .fm-toast, .fm-newborn, .stage.grid .slot { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-bg) !important; }
}

/* the grid's card bars: the name first, the buttons small */
.stage.grid .slot-bar { gap: 4px; }
.stage.grid .slot-bar button { height: 24px; padding: 0 8px; font-size: 11px; }
.stage.grid .slot-bar :is(.sb-star, .sb-skin, .sb-big) { width: 24px; padding: 0; }
.stage.grid .slot-bar .sn { font-weight: 650; }

/* ── the Workbench: the editor and the bench as glass panels on the same glowing room ── */
body.wb .wb-side { overflow-x: hidden; overflow-y: auto !important; }
body.wb .wb-main { gap: 10px; padding: 10px; background: transparent; }
body.wb .wb-editor, body.wb .wb-side {
  border: 1px solid var(--g-line) !important; border-radius: var(--g-r); overflow: hidden;
  background: var(--g-fill) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow);
}
body.wb .wb-edbar, body.wb .wb-previewbar { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--g-line) !important; color: var(--g-ink); }
body.wb #code { background: rgba(0, 0, 0, .28) !important; border: 0 !important; border-radius: 0; }
html[data-ui="light"] body.wb #code { background: rgba(255, 255, 255, .55) !important; }
body.wb .wb-preview { background: transparent !important; }
body.wb .wb-preview iframe { border-radius: 16px; }
.wb-btn, .wb-tag {
  height: 30px; padding: 0 14px; border: 0 !important; border-radius: 999px !important;
  background: var(--g-fill-2) !important; color: var(--g-ink) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--g-line);
  font: 600 12.5px/1 var(--g-font); transition: background .15s, transform .18s cubic-bezier(.2, .9, .3, 1.4);
}
.wb-tag { height: 24px; display: inline-flex; align-items: center; background: color-mix(in srgb, #12dcef 80%, transparent) !important; color: #062a2e !important; }
.wb-btn:hover { background: var(--g-fill-3) !important; }
.wb-btn:active { transform: scale(.94); }
.wb-btn.primary { background: var(--g-acc) !important; color: #111 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px color-mix(in srgb, var(--g-acc) 45%, transparent); }
.wb-mcp.on { background: color-mix(in srgb, #34c759 75%, transparent) !important; color: #04210b !important; }
.wb-pick select, .wb-previewbar select, .wb-previewbar input, .wb-by input, .wb-steps textarea {
  border: 0 !important; border-radius: 999px; background: var(--g-fill-2) !important; color: var(--g-ink) !important;
  box-shadow: inset 0 0 0 1px var(--g-line); padding: 0 10px; font-family: var(--g-font);
}
.wb-steps textarea { border-radius: 14px; padding: 8px 12px; }
.wb-results, .wb-keep, .wb-mine { color: var(--g-ink); }
.wb-mine li { border-top-color: var(--g-line); }
.wb-runtime, .wb-cmd, .wb-docs pre { border-radius: 14px; }
.wb-meter { border-radius: 999px; background: var(--g-fill-2); }

/* (blur only where content moves behind: the dialogs and notes over the page) */
.midipanel, .about, .fm-toast, .fm-newborn { -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
/* the grid's many cards: a small, cheap shadow (a big soft one on each card is costly to scroll) */
.stage.grid .slot, .ph { box-shadow: inset 0 1px 0 var(--g-hi), 0 4px 14px rgba(0, 0, 0, .28) !important; }
.stage.grid .slot.current { box-shadow: inset 0 1px 0 var(--g-hi), 0 0 0 2px var(--g-acc) !important; }

/* GPU: nothing on the page animates forever. The logo's pulse, the glowing beta and Live buttons and the newest
   machine's spinning, blurred halo repainted the screen every frame (a third of an M1's graphics with the grid open);
   they glow, still. (While recording, the red dot still blinks.) */
.dot, #tfBtn, #liveBtn { animation: none !important; }
.slot.fresh::before, .slot.fresh::after { animation: none !important; }
.slot.fresh::before { filter: blur(14px); opacity: .7; }

/* the TestFlight button: as tall as the others (app.css sets it smaller by its id) */
#tfBtn { height: 30px; padding: 0 12px; font-size: 12.5px; }
@media (max-width: 820px) { #tfBtn { height: 28px; padding: 0 10px; } }

/* the keyboard tray: glass, as the mixer */
.keys-tray { margin: 0 10px 10px; border-radius: var(--g-r); border: 1px solid var(--g-line) !important; background: var(--g-fill) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow); color: var(--g-ink); }
.mixer + .keys-tray, .keys-tray + .mixer { margin-top: 0; }
.kt-bar button { height: 28px; min-width: 32px; padding: 0 12px; border: 0 !important; border-radius: 999px; background: var(--g-fill-2) !important; color: var(--g-ink) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--g-line); font: 600 12px var(--g-font); }
.kt-bar button.on { background: var(--g-acc) !important; color: #111 !important; }
.kt-hint { color: var(--g-dim); font-family: var(--g-font); }
.kt-hint kbd { border-color: var(--g-line); border-radius: 6px; background: var(--g-fill-2); }

/* the Steam Deck download: Steam's blue, as glass */
#deckBtn { background: color-mix(in srgb, #1a9fff 78%, transparent) !important; color: #fff !important; }
@media (max-width: 700px) { #deckBtn .sd { display: none; } } /* on a phone it lives in the ⋯ menu, named just Deck */
@media (max-width: 820px) { body.bar-min #deckBtn { display: none; } }

/* the lists of the dropdowns (opened menus) are the page's dark or light, not the system's white with pale letters */
html { color-scheme: dark; }
html[data-ui="light"] { color-scheme: light; }
select option, select optgroup { background-color: #1e1e24; color: #f2f2f5; }
html[data-ui="light"] select option, html[data-ui="light"] select optgroup { background-color: #fafafc; color: #1c1c1e; }