/* The interactive demos: a pretend Mac desktop with WayMix's panel,
   and Muserno's practice strip. */

/* The demo's own light and dark, chosen with the switch above it (the
   page's tokens are redefined here, so the panel follows the desk, not the page) */
.desk[data-theme="light"] {
  --text: #17171a; --text-2: #55555c; --text-3: #8a8a91;
  --border: rgba(20,20,30,.12); --border-strong: rgba(20,20,30,.22);
  --surface: #ffffff; --surface-2: #efeee9;
  --accent: #14b892; --accent-ink: #087a60; --mac-panel: rgba(250,250,252,.9);
  --desk-bg: linear-gradient(160deg, #bfe3e0 0%, #c9d8ef 50%, #e3d4ee 100%);
  --menubar-bg: rgba(255,255,255,.5); --menubar-fg: #1d1d1f; --menubar-on: rgba(0,0,0,.12); --caption-fg: #1d1d1f;
  color-scheme: light;
}
.desk[data-theme="dark"] {
  --text: #f2f2f4; --text-2: #b4b4bc; --text-3: #7c7c85;
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20);
  --surface: #1b1b20; --surface-2: #24242a;
  --accent: #2fd3aa; --accent-ink: #6fe6c6; --mac-panel: rgba(40,40,46,.9);
  --desk-bg: linear-gradient(160deg, #1f4d52 0%, #18324a 45%, #2b2350 100%);
  --menubar-bg: rgba(20,22,30,.45); --menubar-fg: #fff; --menubar-on: rgba(255,255,255,.22); --caption-fg: #fff;
  color-scheme: dark;
}
.desk { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--desk-bg, linear-gradient(160deg, #1f4d52 0%, #18324a 45%, #2b2350 100%)); min-height: 370px; box-shadow: var(--shadow); user-select: none; -webkit-user-select: none; }
.menubar { display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 14px; background: var(--menubar-bg, rgba(20, 22, 30, .45)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--menubar-fg, #fff); font-size: 13px; }
.menubar .spacer { flex: 1; }
.menubar b { font-weight: 650; }
.menubar .mb-icon { display: grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.menubar .mb-icon.on { background: var(--menubar-on, rgba(255,255,255,.22)); }
.menubar .mb-icon svg { width: 16px; height: 16px; }
.menubar .hint { font-size: 11px; opacity: .8; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(-4px); } }

.panel { position: absolute; top: 38px; right: 70px; width: 330px; max-width: calc(100% - 24px); background: var(--mac-panel); color: var(--text); border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0,0,0,.35); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); padding: 10px 12px 12px; font-size: 13px; transform-origin: top right; transition: opacity .18s ease, transform .18s ease; }
.panel.closed { opacity: 0; transform: scale(.96) translateY(-6px); pointer-events: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.panel-head b { font-size: 13.5px; }
.panel-head .tools { display: flex; gap: 6px; color: var(--text-3); }
.panel-head .tools svg { width: 15px; height: 15px; }
.row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 2px; align-items: center; }
.row + .row { border-top: 1px solid var(--border); }
.row .app-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.row .app-ico svg { width: 17px; height: 17px; }
.row .top { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.row .name { font-weight: 600; }
.row .state { font-size: 11px; color: var(--text-3); }
.row .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .25; transition: opacity .08s linear; }
.row .ctl { display: grid; grid-template-columns: 22px 1fr 38px; gap: 6px; align-items: center; margin-top: 4px; }
.row .mute { border: 0; background: transparent; padding: 0; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-2); cursor: pointer; border-radius: 5px; }
.row .mute:hover { background: var(--surface-2); }
.row .mute svg { width: 16px; height: 16px; }
.row .mute[aria-pressed="true"] { color: #e5484d; }
.row .pct { font: 500 11.5px var(--mono); color: var(--text-2); text-align: right; }
.row.muted .name, .row.muted .pct { color: var(--text-3); }

input[type="range"].mac { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"].mac::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fill, var(--accent)) var(--p, 100%), var(--border-strong) var(--p, 100%)); }
input[type="range"].mac::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fill, var(--accent)) var(--p, 100%), var(--border-strong) var(--p, 100%)); }
input[type="range"].mac::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0.5px solid rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3); margin-top: -6px; }
input[type="range"].mac::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0.5px solid rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.row.muted input[type="range"].mac { --fill: var(--text-3); }

.desk-caption { position: absolute; left: 28px; top: calc(50% + 15px); transform: translateY(-50%); max-width: 300px; color: var(--caption-fg, #fff); }
.desk-caption p { margin: 8px 0 0; font-size: 14px; opacity: .85; }
.play-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 12px 20px 12px 14px; background: #fff; color: #111; font: 650 15px var(--font); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .12s ease; }
.play-btn:hover { transform: scale(1.03); }
.play-btn .disc { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #fff; }
.play-btn svg { width: 14px; height: 14px; }

/* Too narrow for the caption beside the panel: the caption goes under it */
@media (max-width: 820px) {
  .desk { min-height: 0; display: flex; flex-direction: column; }
  .panel { position: relative; top: auto; right: auto; margin: 10px 12px 0 auto; }
  .desk-caption { position: static; transform: none; max-width: none; padding: 20px 16px 18px; }
}
@media (max-width: 640px) {
  .panel { margin: 10px 12px 0; width: auto; max-width: none; }
  .menubar .hide-sm { display: none; }
}

/* The panel's header icons, as in the app (shown, not clickable) */
.icon-btn { width: 18px; height: 18px; display: grid; place-items: center; color: var(--text); opacity: .85; }
.icon-btn svg { width: 15px; height: 15px; }
.panel-head .tools { gap: 10px; align-items: center; }

/* Muserno's demo: a small copy of the app's Simplified layout, in its
   colours (Muserno/PRACTICE_UI.md, "Visual language"). */
.plab {
  --pl-bg: #dce9ea; --pl-text: #1f3236; --pl-text-2: #4a5d61; --pl-muted: #7d8e91;
  --pl-accent: #155e59; --pl-peaks: #2f7f78; --pl-loop: #7442b2; --pl-head: #e66a56;
  --pl-card: rgba(255,255,255,.5); --pl-line: rgba(31,50,54,.1); --pl-rail: rgba(31,50,54,.16);
  --pl-track: #ddf3f4; --pl-track-band: #cff0f2;
  --pl-tuner: #c6ead8; --pl-tuner-band: #bcead3;
  --pl-metro: #f2ecc4; --pl-metro-band: #f4ebb6;
  --pl-rec: #e8d2d2; --pl-rec-band: #e5c7c7;
  --pl-beat: #168b62;
  position: relative; border-radius: 14px; overflow: hidden; color: var(--pl-text);
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(126,188,210,.33), transparent 70%),
    radial-gradient(50% 70% at 90% 10%, rgba(197,174,211,.3), transparent 70%),
    radial-gradient(60% 80% at 60% 110%, rgba(231,182,167,.25), transparent 70%),
    var(--pl-bg);
  border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px;
  user-select: none; -webkit-user-select: none; outline: none;
}
.plab[data-theme="dark"] {
    --pl-bg: #142628; --pl-text: #e3efee; --pl-text-2: #a9bdba; --pl-muted: #76908d;
    --pl-accent: #7fd0c3; --pl-peaks: #8ed5c8; --pl-loop: #b796f0;
    --pl-card: rgba(255,255,255,.035); --pl-line: rgba(255,255,255,.07); --pl-rail: rgba(255,255,255,.14);
    --pl-track: #1d2e2f; --pl-track-band: #1a4143;
    --pl-tuner: #1e2e26; --pl-tuner-band: #1c422f;
    --pl-metro: #312e1b; --pl-metro-band: #494215;
    --pl-rec: #2c2121; --pl-rec-band: #3c2222;
  }
@media (prefers-color-scheme: dark) {
  .plab:not([data-theme="light"]) {
    --pl-bg: #142628; --pl-text: #e3efee; --pl-text-2: #a9bdba; --pl-muted: #76908d;
    --pl-accent: #7fd0c3; --pl-peaks: #8ed5c8; --pl-loop: #b796f0;
    --pl-card: rgba(255,255,255,.035); --pl-line: rgba(255,255,255,.07); --pl-rail: rgba(255,255,255,.14);
    --pl-track: #1d2e2f; --pl-track-band: #1a4143;
    --pl-tuner: #1e2e26; --pl-tuner-band: #1c422f;
    --pl-metro: #312e1b; --pl-metro-band: #494215;
    --pl-rec: #2c2121; --pl-rec-band: #3c2222;
  }
}
.plab:focus-visible { box-shadow: var(--shadow), 0 0 0 2px var(--pl-accent); }
.pl-toolbar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; font-weight: 600; }
.pl-toolbar .lights { display: flex; gap: 6px; margin-right: 6px; }
.pl-toolbar .lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.pl-toolbar .lights i:nth-child(2) { background: #febc2e; }
.pl-toolbar .lights i:nth-child(3) { background: #28c840; }
.pl-toolbar svg { width: 16px; height: 16px; color: var(--pl-accent); }
.pl-toolbar .spacer { flex: 1; }
.pl-body { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 0 12px 12px; }
.pl-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
/* The Track takes whatever height is left, so the tool row reaches the
   window's bottom even when the side column is taller (Advanced) */
.pl-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-left .pl-track { flex: 1; display: flex; flex-direction: column; }
.pl-left .pl-wave { flex: 1; min-height: 170px; height: auto; }
.pl-side { display: none; }
.plab[data-layout="advanced"] .pl-main { grid-template-columns: minmax(0, 1fr) 240px; }
.plab[data-layout="advanced"] .pl-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; }
.plab[data-layout="advanced"] .pl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Advanced's narrower Track: A/B show only their letters, the rails drop their names */
.plab[data-layout="advanced"] .pl-ab .v, .plab[data-layout="advanced"] .pl-rail .lbl { display: none; }
.plab[data-layout="advanced"] .pl-ab { min-width: 0; }
.plab[data-layout="advanced"] .pl-presets button { font-size: 9.5px; }

/* The dock: one tinted square per tool; a tool on the home screen is greyed */
.pl-dock { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; border-radius: 14px; background: rgba(255,255,255,.42); border: 1px solid var(--pl-line); align-self: stretch; }
.pl-sq { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--pl-text); border: 2px solid transparent; padding: 0; font: inherit; }
.pl-sq svg { width: 19px; height: 19px; }
.pl-sq svg.tilt { transform: rotate(-15deg); }
.pl-sq[data-tool="track"] { background: #ddf3f4; }
.pl-sq[data-tool="tuner"] { background: #c6ead8; }
.pl-sq[data-tool="metronome"] { background: #f2ecc4; }
.pl-sq[data-tool="recorder"] { background: #e8d2d2; }
.pl-sq[data-tool="playlist"] { background: #e6e2f5; cursor: pointer; }
.pl-sq.greyed { opacity: .35; cursor: default; }
.pl-sq.open { border-color: var(--pl-accent); }
.pl-dock .spacer { flex: 1; }
.pl-dock-line { width: 26px; height: 1px; background: var(--pl-line); }
.pl-row-toggle { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--pl-accent); background: var(--pl-card); border: 1px solid var(--pl-line); padding: 0; cursor: pointer; }
.pl-row-toggle[aria-pressed="false"] { background: transparent; border-color: transparent; color: var(--pl-text-2); }
.pl-row[hidden] { display: none; }
.pl-sq { cursor: pointer; }
.pl-sq[data-tool="track"] { cursor: default; }
.pl-row-toggle svg { width: 19px; height: 19px; }
.plab[data-theme="dark"] .pl-dock { background: rgba(23,45,48,.65); }
.plab[data-theme="dark"] .pl-sq[data-tool="track"] { background: #263f40; }
.plab[data-theme="dark"] .pl-sq[data-tool="tuner"] { background: #273f33; }
.plab[data-theme="dark"] .pl-sq[data-tool="metronome"] { background: #433f23; }
.plab[data-theme="dark"] .pl-sq[data-tool="recorder"] { background: #3b2b2b; }
.plab[data-theme="dark"] .pl-sq[data-tool="playlist"] { background: #2c273f; }
@media (prefers-color-scheme: dark) {
  .plab:not([data-theme="light"]) .pl-dock { background: rgba(23,45,48,.65); }
  .plab:not([data-theme="light"]) .pl-sq[data-tool="track"] { background: #263f40; }
  .plab:not([data-theme="light"]) .pl-sq[data-tool="tuner"] { background: #273f33; }
  .plab:not([data-theme="light"]) .pl-sq[data-tool="metronome"] { background: #433f23; }
  .plab:not([data-theme="light"]) .pl-sq[data-tool="recorder"] { background: #3b2b2b; }
  .plab:not([data-theme="light"]) .pl-sq[data-tool="playlist"] { background: #2c273f; }
}

/* The layout menu, as in the app's toolbar (HomeLayoutMenu) */
.pl-layout { position: relative; }
.pl-layout-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--pl-line); background: var(--pl-card); color: var(--pl-accent); font: 600 12px var(--font); cursor: pointer; }
.pl-layout-btn svg { width: 15px; height: 15px; }
.pl-layout-btn .chev { width: 14px; height: 14px; }
.pl-menu { position: absolute; right: 0; top: 32px; z-index: 5; width: 270px; padding: 6px; border-radius: 12px; background: rgba(244,248,247,.96); border: 1px solid var(--pl-line); box-shadow: 0 14px 40px rgba(0,0,0,.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.pl-menu[hidden] { display: none; }
.pl-menu hr { border: 0; border-top: 1px solid var(--pl-line); margin: 4px 8px; }
.pl-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--pl-text); text-align: left; cursor: pointer; font: 500 13px var(--font); }
.pl-menu button:hover { background: rgba(31,50,54,.06); }
.pl-menu button small { display: block; font-size: 11px; color: var(--pl-muted); font-weight: 400; }
.pl-menu button b { font-weight: 500; }
.pl-menu button .check { width: 17px; height: 17px; margin-left: auto; color: var(--pl-accent); visibility: hidden; }
.pl-menu button.on { background: color-mix(in srgb, var(--pl-accent) 10%, transparent); }
.pl-menu button.on b { font-weight: 600; color: var(--pl-accent); }
.pl-menu button.on .check { visibility: visible; }
.thumb { position: relative; flex: none; width: 54px; height: 32px; border-radius: 4px; background: #fff; border: 1px solid var(--pl-line); }
.thumb i { position: absolute; border-radius: 1.5px; }
.thumb .t { background: #aaebee; }
.thumb .r1 { background: #adebcc; } .thumb .r2 { background: #f6eba2; } .thumb .r3 { background: #e1b7b7; } .thumb .p { background: #b9acec; }
.thumb.simplified .t { left: 3px; top: 3px; right: 3px; height: 17px; }
.thumb.simplified .r1 { left: 3px; bottom: 3px; width: 14px; height: 7px; }
.thumb.simplified .r2 { left: 19px; bottom: 3px; width: 14px; height: 7px; }
.thumb.simplified .r3 { left: 35px; bottom: 3px; width: 14px; height: 7px; }
.thumb.advanced .t { left: 3px; top: 3px; width: 31px; height: 17px; }
.thumb.advanced .r1 { left: 3px; bottom: 3px; width: 14px; height: 7px; }
.thumb.advanced .r2 { left: 19px; bottom: 3px; width: 15px; height: 7px; }
.thumb.advanced .p { right: 3px; top: 3px; width: 13px; height: 12px; }
.thumb.advanced .r3 { right: 3px; bottom: 3px; width: 13px; height: 12px; }
.plab[data-theme="dark"] .pl-menu { background: rgba(23,45,48,.96); }
.plab[data-theme="dark"] .pl-menu button:hover { background: rgba(255,255,255,.06); }
.plab[data-theme="dark"] .thumb { background: #203a3d; }
@media (prefers-color-scheme: dark) {
  .plab:not([data-theme="light"]) .pl-menu { background: rgba(23,45,48,.96); }
  .plab:not([data-theme="light"]) .pl-menu button:hover { background: rgba(255,255,255,.06); }
  .plab:not([data-theme="light"]) .thumb { background: #203a3d; }
}

/* The Playlist (tile in Advanced, panel beside its dock icon in Simplified) */
.pl-playlist { background: #e6e2f5; }
.pl-playlist .pl-band { background: #d3cbf1; }
.pl-band .pl-chip.list { color: var(--pl-text); }
.pl-band .plus { width: 16px; height: 16px; color: var(--pl-text-2); }
.pl-band .close { margin-left: auto; width: 17px; height: 17px; color: var(--pl-text-2); cursor: pointer; }
.pl-list { padding: 6px 8px 10px; display: grid; gap: 2px; }
.pl-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; min-width: 0; }
.pl-item.current { background: var(--pl-card); border: 1px solid var(--pl-line); }
.pl-item .pl-round { width: 22px; height: 22px; }
.pl-item .pl-round svg { width: 11px; height: 11px; }
.pl-item .tri { width: 12px; height: 12px; color: var(--pl-text-2); flex: none; margin: 0 5px; }
.pl-item span { min-width: 0; }
.pl-item b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-item small { display: block; font-size: 10.5px; color: var(--pl-muted); }
.pl-item .chev { width: 15px; height: 15px; margin-left: auto; color: var(--pl-muted); flex: none; }
.pl-add { display: flex; align-items: center; gap: 6px; padding: 6px; font-weight: 600; font-size: 12px; color: var(--pl-accent); }
.pl-add svg { width: 16px; height: 16px; }
.pl-queue { display: flex; align-items: center; gap: 10px; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--pl-accent); }
.pl-queue span:last-child { color: var(--pl-muted); }
.pl-panel { position: absolute; left: 74px; z-index: 4; width: 300px; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.pl-panel[hidden] { display: none; }
.pl-panel > .pl-tile { background: #f4f8f7; }
.pl-pointer { position: absolute; left: -6px; width: 14px; height: 14px; border-radius: 2px; transform: rotate(45deg); background: #f4f8f7; }
.plab[data-theme="dark"] .pl-playlist { background: #211e2f; }
.plab[data-theme="dark"] .pl-playlist .pl-band { background: #231b43; }
.plab[data-theme="dark"] .pl-panel > .pl-tile, .plab[data-theme="dark"] .pl-pointer { background: #172d30; }
@media (prefers-color-scheme: dark) {
  .plab:not([data-theme="light"]) .pl-playlist { background: #211e2f; }
  .plab:not([data-theme="light"]) .pl-playlist .pl-band { background: #231b43; }
  .plab:not([data-theme="light"]) .pl-panel > .pl-tile, .plab:not([data-theme="light"]) .pl-pointer { background: #172d30; }
}

/* The Recorder: compact in the row; in Advanced's side column, with its takes */
.pl-takes { display: none; padding: 0 12px 10px; }
.plab[data-layout="advanced"] .pl-rec .pl-takes { display: block; }
.plab[data-layout="advanced"] .pl-rec .pl-body2 { min-height: 0; }
.pl-takes-head { display: flex; justify-content: space-between; font-size: 11.5px; padding: 6px 0; border-top: 1px solid var(--pl-line); }
.pl-takes-head span { color: var(--pl-muted); }
.pl-take { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.pl-take svg { width: 14px; height: 14px; color: var(--pl-text-2); flex: none; }
.pl-take small { display: block; font-size: 10.5px; color: var(--pl-muted); }
.pl-take .del { margin-left: auto; }

.pl-chip { font: 600 11px var(--font); color: var(--pl-text-2); border: 1px solid var(--pl-line); background: var(--pl-card); border-radius: 6px; padding: 3px 8px; }
.pl-tile { border-radius: 14px; overflow: hidden; border: 1px solid var(--pl-line); }
.pl-band { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--pl-line); min-width: 0; }
.pl-band svg { width: 15px; height: 15px; flex: none; }
.pl-band .file { color: var(--pl-text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-band .spacer { flex: 1; }
.pl-band .hdr-icons { display: flex; align-items: center; gap: 8px; color: var(--pl-text-2); }
.pl-band .hdr-icons svg { width: 17px; height: 17px; }
.pl-band .hdr-icons svg.badge { width: 19px; height: 19px; }
.pl-band .hdr-icons .zoom { font: 600 11.5px var(--font); width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.pl-band .hdr-icons .sep { width: 1px; height: 18px; background: currentColor; opacity: .3; margin: 0 2px; }
.pl-band .hdr-icons .open { display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 7px 0 8px; border: 1px solid var(--pl-line); background: var(--pl-card); border-radius: 13px; margin-left: 2px; }
.pl-band .hdr-icons .open .chev { width: 14px; height: 14px; }
.pl-track { background: var(--pl-track); }
.pl-track .pl-band { background: var(--pl-track-band); }
.pl-wave { position: relative; height: 170px; margin: 0 10px; cursor: crosshair; touch-action: none; }
/* Out of the flow: the drawing never feeds back into the tile's height */
.pl-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-wave .loop { position: absolute; top: 30px; bottom: 0; background: color-mix(in srgb, var(--pl-loop) 16%, transparent); border-left: 2px solid var(--pl-loop); border-right: 2px solid var(--pl-loop); pointer-events: none; }
.pl-wave .loop span { position: absolute; top: 3px; font: 700 10px var(--font); color: var(--pl-loop); }
.pl-wave .loop .a { left: 4px; } .pl-wave .loop .b { right: 4px; }
.pl-wave .head { position: absolute; top: 30px; bottom: 0; width: 2px; background: var(--pl-head); pointer-events: none; }
.pl-wave .head span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: var(--pl-head); color: #fff; font: 600 9.5px var(--mono); padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.pl-wave .head.playing span { display: none; }
.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.pl-card { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 10px; padding: 9px 10px; min-width: 0; }
.pl-card h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 600; }
.pl-card h4 .reset { color: var(--pl-muted); cursor: pointer; display: grid; }
.pl-card h4 .reset svg { width: 12px; height: 12px; }
.pl-rail { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px 44px; gap: 4px; align-items: center; margin: 4px 0; }
.pl-rail .lbl { grid-column: 1 / -1; font-size: 10.5px; color: var(--pl-muted); margin-bottom: -4px; }
.pl-rail output { font: 600 11.5px var(--font); font-variant-numeric: tabular-nums; text-align: right; }
.pl-step { border: 1px solid var(--pl-line); background: var(--pl-card); color: var(--pl-text); border-radius: 6px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 12px/1 var(--font); }
.plab input[type="range"].mac { --fill: var(--pl-accent); }
.plab input[type="range"].mac::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--pl-accent) var(--p, 50%), var(--pl-rail) var(--p, 50%)); }
.plab input[type="range"].mac::-moz-range-track { background: linear-gradient(to right, var(--pl-accent) var(--p, 50%), var(--pl-rail) var(--p, 50%)); }
.pl-loop-row { display: flex; align-items: center; gap: 5px; justify-content: center; flex-wrap: wrap; }
.pl-ab { display: inline-flex; gap: 4px; align-items: baseline; border: 1px solid var(--pl-line); background: var(--pl-card); border-radius: 7px; padding: 2px 7px; font: 600 11px var(--font); font-variant-numeric: tabular-nums; min-width: 58px; }
.pl-ab b { color: var(--pl-loop); }
.pl-ab.pulse { animation: plpulse 1.1s ease-in-out infinite; }
.pl-ab .hint { color: var(--pl-muted); font-weight: 500; }
@keyframes plpulse { 50% { background: rgba(125,142,145,.25); } }
@media (prefers-reduced-motion: reduce) { .pl-ab.pulse { animation: none; } }
.pl-icon { border: 0; background: transparent; color: var(--pl-text-2); padding: 2px; display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
.pl-icon:hover { color: var(--pl-text); }
.pl-icon svg { width: 16px; height: 16px; }
.pl-icon[aria-pressed="false"] { color: var(--pl-muted); }
.pl-transport { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.pl-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--pl-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pl-play svg { width: 16px; height: 16px; }
.pl-presets { display: flex; gap: 4px; margin-top: 6px; }
.pl-presets button { flex: 1; border: 1px solid var(--pl-line); background: var(--pl-card); color: var(--pl-text); border-radius: 6px; font: 600 10.5px var(--font); padding: 3px 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.pl-presets button.on { background: var(--pl-accent); color: #fff; border-color: transparent; }
.pl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pl-tile .pl-body2 { padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-height: 64px; }
.pl-tuner { background: var(--pl-tuner); } .pl-tuner .pl-band { background: var(--pl-tuner-band); }
.pl-metro { background: var(--pl-metro); } .pl-metro .pl-band { background: var(--pl-metro-band); }
.pl-rec { background: var(--pl-rec); } .pl-rec .pl-band { background: var(--pl-rec-band); }
.pl-note { font-size: 22px; font-weight: 700; }
.pl-ticks { flex: 1; height: 22px; background: repeating-linear-gradient(90deg, var(--pl-rail) 0 1px, transparent 1px 8px); border-radius: 2px; position: relative; }
.pl-ticks::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--pl-beat); }
.pl-round { width: 30px; height: 30px; border-radius: 50%; background: var(--pl-accent); color: #fff; display: grid; place-items: center; flex: none; }
.pl-round svg { width: 13px; height: 13px; }
.pl-round.rec { background: var(--pl-head); }
.pl-lights { display: flex; gap: 3px; margin-left: auto; }
.pl-lights i { width: 14px; height: 8px; border-radius: 2px; background: rgba(31,50,54,.12); }
.plab[data-theme="dark"] .pl-lights i { background: rgba(255,255,255,.1); }
@media (prefers-color-scheme: dark) {
  .plab:not([data-theme="light"]) .pl-lights i { background: rgba(255,255,255,.1); }
}
.pl-lights i.on { background: var(--pl-beat); }
.pl-lights i.on.one { background: var(--pl-head); }
.pl-bpm { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.pl-bpm small { font-size: 10px; font-weight: 600; color: var(--pl-muted); margin-left: 2px; }
.pl-sig { margin-left: auto; border: 1px solid var(--pl-line); background: var(--pl-card); border-radius: 7px; padding: 4px 8px; font-weight: 600; font-size: 12px; }
.pl-dots { flex: 1; border-top: 2px dotted var(--pl-rail); }
.pl-toast { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); background: var(--pl-text); color: var(--pl-bg); font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pl-toast.show { opacity: 1; }
.pl-keys { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 760px) {
  .pl-cards, .pl-row, .plab[data-layout="advanced"] .pl-row, .plab[data-layout="advanced"] .pl-main { grid-template-columns: minmax(0, 1fr); }
  .pl-panel { left: 12px; right: 12px; width: auto; }
  .pl-pointer { display: none; }
  .pl-body { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
  .pl-dock { display: none; }
  .pl-band .hdr-icons { display: none; }
}

/* Light or dark: the app follows the Mac, the demo lets you pick */
.pl-appearance { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); }
.pl-appearance span { margin-right: 6px; }
.pl-appearance button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 5px 12px; font: 600 12.5px var(--font); cursor: pointer; }
.pl-appearance button svg { width: 14px; height: 14px; }
.pl-appearance button[aria-checked="true"] { background: var(--practice); border-color: transparent; color: #fff; }
@media (prefers-color-scheme: dark) { .pl-appearance button[aria-checked="true"] { color: #0f2224; } }

/* The same switch above the WayMix demo, in WayMix's teal */
.pl-appearance.wm button[aria-checked="true"] { background: var(--accent); }