:root {
  color-scheme: dark;
  font-family: Inter, "Noto Sans", system-ui, sans-serif;
  --bg: #000;
  --desk-a: #155f91;
  --desk-b: #283f36;
  --text: #f2f6f8;
  --muted: #aab2b7;
  --shell-hi: #272c2f;
  --shell: #1b2023;
  --shell-lo: #101315;
  --well: #000;
  --well-2: #090c0d;
  --line: #050606;
  --soft-line: #40474c;
  --blue: #219cff;
  --blue-glow: rgba(33,156,255,.52);
  --row: rgba(255,255,255,.055);
  --row-alt: rgba(255,255,255,.018);
  --shadow: 0 24px 70px rgba(0,0,0,.52);
  --key-shadow: 0 3px 5px rgba(0,0,0,.62), inset 0 1px 1px rgba(255,255,255,.14), inset 0 -1px 1px rgba(0,0,0,.9);
  --font-size: 13px;
  --row-height: 34px;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #e7e3db;
  --desk-a: #8dc9f1;
  --desk-b: #627e67;
  --text: #1b2023;
  --muted: #6d7478;
  --shell-hi: #f7f7f4;
  --shell: #e5e6e3;
  --shell-lo: #c9cdca;
  --well: #c9ced0;
  --well-2: #d9ddde;
  --line: #8b9193;
  --soft-line: #ffffff;
  --blue: #087ed0;
  --blue-glow: rgba(8,126,208,.36);
  --row: rgba(255,255,255,.42);
  --row-alt: rgba(79,91,96,.06);
  --shadow: 0 24px 60px rgba(34,39,41,.26);
  --key-shadow: 0 3px 5px rgba(38,42,43,.32), inset 0 1px 1px white, inset 0 -1px 1px rgba(90,96,98,.36);
}

body[data-theme="graphite"] {
  --bg: #161a1c;
  --shell-hi: #41474b;
  --shell: #303538;
  --shell-lo: #222629;
  --well: #181b1d;
  --well-2: #202528;
  --line: #111315;
  --soft-line: #555d62;
  --row: rgba(255,255,255,.065);
  --row-alt: rgba(255,255,255,.025);
  --shadow: 0 24px 70px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }

.lab-bar {
  height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 28px; background: color-mix(in srgb, var(--shell) 88%, transparent);
  border-bottom: 1px solid var(--line); box-shadow: 0 5px 22px rgba(0,0,0,.22); position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 650; letter-spacing: -.02em; }
.brand-mark { width: 25px; height: 17px; border-radius: 8px 8px 6px 6px; background: var(--shell-hi); border: 1px solid var(--line); box-shadow: var(--key-shadow); position: relative; }
.brand-mark::after { content:""; position:absolute; left:5px; right:5px; bottom:-2px; height:2px; border-radius:3px; background:var(--blue); box-shadow:0 0 8px var(--blue-glow); }
.lab-controls, .switcher { display:flex; align-items:center; gap:8px; }
.switcher { padding:4px; border-radius:13px; background:var(--well); border:1px solid var(--line); box-shadow:inset 0 2px 5px rgba(0,0,0,.65); }
.switch-option {
  border:1px solid transparent; background:transparent; border-radius:9px; padding:8px 14px; color:var(--muted);
}
.switch-option.is-active { color:var(--text); background:var(--shell); border-color:var(--soft-line); box-shadow:var(--key-shadow); transform:translateY(-1px); }
.switch-option:active { transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
.theme-switcher .switch-option { padding-inline:11px; }
.material-meter { min-width:94px; height:34px; display:flex; align-items:center; gap:9px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--well); box-shadow:inset 0 2px 5px rgba(0,0,0,.7); color:var(--muted); font:700 10px/1 ui-monospace,monospace; letter-spacing:.08em; }
.material-meter i { width:6px; height:6px; border-radius:50%; background:var(--muted); transition:.12s; }
.material-meter[data-state="hover"] i { background:#f1a238; box-shadow:0 0 9px rgba(241,162,56,.62); }
.material-meter[data-state="press"] i, .material-meter[data-state="focus"] i { background:var(--blue); box-shadow:0 0 10px var(--blue-glow); }

.stage { min-height: calc(100vh - 66px); }
.desktop-stage {
  padding: 4.5vw 5vw; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.22) 0 5%, transparent 20%),
    linear-gradient(145deg, transparent 0 52%, rgba(5,14,18,.72) 53%),
    linear-gradient(135deg, var(--desk-a), #79b2d5 48%, var(--desk-b));
}
.desktop { width:min(1500px, 100%); min-height:720px; display:grid; grid-template-columns:56px 1fr; align-items:center; gap:38px; }
.plasma-rail {
  height:680px; padding:8px 6px; border-radius:18px; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(110deg,var(--shell-hi),var(--shell) 50%,var(--shell-lo)); border:1px solid var(--line);
  box-shadow:var(--shadow), inset 1px 1px 1px rgba(255,255,255,.12), inset -2px -1px 2px rgba(0,0,0,.6);
}
.rail-stack { display:flex; flex-direction:column; gap:7px; padding:7px 0; border-block:1px solid var(--line); }
.rail-spacer { flex:1; }
.rail-key, .window-controls button, .shell-key {
  border:1px solid var(--line); background:linear-gradient(var(--shell-hi),var(--shell-lo)); box-shadow:var(--key-shadow);
}
.rail-key { height:45px; border-radius:10px; font-size:22px; position:relative; }
.rail-key:active, .window-controls button:active, .shell-key:active { transform:translateY(3px) rotateX(4deg); box-shadow:inset 0 3px 5px rgba(0,0,0,.72), inset 0 1px 1px rgba(255,255,255,.08); }
.rail-key.is-running::before { content:""; position:absolute; left:-5px; top:12px; width:2px; height:21px; background:var(--blue); box-shadow:0 0 8px var(--blue-glow); }
.rail-display { padding:8px 2px; display:flex; flex-direction:column; align-items:center; gap:5px; font:700 10px/1 ui-monospace,monospace; color:#d7f0ff; background:#050708; border-radius:8px; box-shadow:inset 0 2px 4px #000; }
.rail-display i { width:24px; height:2px; background:var(--blue); box-shadow:0 0 7px var(--blue-glow); }

.dolphin-window {
  min-width:0; border:1px solid var(--line); border-radius:28px 28px 20px 20px; overflow:hidden;
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.075),transparent 34%),
    linear-gradient(115deg,var(--shell-hi),var(--shell) 38%,var(--shell-lo));
  box-shadow:var(--shadow), inset 1px 1px 1px rgba(255,255,255,.16), inset -1px -1px 1px rgba(0,0,0,.8);
}
.window-titlebar { height:42px; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; text-shadow:0 1px rgba(0,0,0,.6); }
.window-controls { position:absolute; right:7px; display:flex; gap:5px; }
.window-controls button { width:34px; height:29px; border-radius:8px; }
.window-controls .close-button { background:linear-gradient(#ff7456,#bc2d1c); color:white; }
.toolbar { display:grid; grid-template-columns:auto minmax(220px,1fr) auto; gap:12px; padding:10px 14px 12px; align-items:center; }
.nav-keys { display:flex; gap:1px; padding:2px; border-radius:14px; background:var(--line); box-shadow:0 1px rgba(255,255,255,.08); overflow:hidden; }
.shell-key { min-width:42px; height:40px; border-radius:12px 8px 8px 12px; font-size:24px; }
.nav-keys .shell-key + .shell-key { border-radius:5px; }
.nav-keys .shell-key:last-child { border-radius:8px 13px 13px 8px; }
.shell-key.compact { font-size:15px; }
.shell-key.text-key { font-size:12px; padding:0 13px; }

.recess-field {
  height:39px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--well); box-shadow:inset 0 3px 8px rgba(0,0,0,.72), 0 1px rgba(255,255,255,.12);
}
.recess-field:focus-within { border-color:color-mix(in srgb,var(--blue) 75%,var(--line)); box-shadow:inset 0 3px 8px rgba(0,0,0,.72),0 0 0 1px var(--blue),0 0 13px var(--blue-glow); }
.recess-field:focus-within { transform:translateY(2px); }
.recess-field input { min-width:0; width:100%; border:0; outline:0; background:transparent; font-weight:560; }
.field-light { width:3px; height:22px; background:var(--blue); border-radius:3px; box-shadow:0 0 8px var(--blue-glow); }

.dolphin-body { height:500px; display:grid; grid-template-columns:205px minmax(0,1fr); gap:10px; padding:0 14px; }
.places { padding:7px 3px 10px; min-width:0; border-right:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.section-label { margin:6px 7px 4px; color:var(--muted); font-size:11px; }
.places nav { display:grid; gap:2px; }
.places button { border:0; border-radius:6px; background:transparent; text-align:left; padding:7px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.places button span { display:inline-grid; place-items:center; width:20px; margin-right:5px; }
.places button.is-active { background:var(--well-2); box-shadow:inset 0 2px 4px rgba(0,0,0,.52),0 1px rgba(255,255,255,.1); }
.places button.is-active span { color:var(--blue); text-shadow:0 0 8px var(--blue-glow); }
.content-module { min-width:0; display:flex; flex-direction:column; }
.tabs { height:37px; display:flex; align-items:flex-end; gap:4px; padding:0 5px; overflow:hidden; perspective:320px; }
.folder-tab {
  height:32px; min-width:0; max-width:190px; padding:0 12px; display:flex; align-items:center; gap:7px; border-radius:13px 13px 4px 4px;
  color:var(--muted); border:1px solid var(--line); background:linear-gradient(var(--shell-hi),var(--shell-lo)); box-shadow:0 2px 4px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12);
  font-size:11px; white-space:nowrap; overflow:hidden; transform-origin:50% 100%; transition:transform .16s,filter .16s;
}
.folder-tab > span { color:var(--text); }
.folder-tab i { font-style:normal; margin-left:auto; }
.folder-tab:hover { filter:brightness(1.08); transform:translateY(-1px); }
.folder-tab.is-active {
  color:var(--text); background:var(--well-2); transform:translateY(4px) rotateX(-7deg); box-shadow:inset 0 4px 7px rgba(0,0,0,.78);
  position:relative;
}
.folder-tab.is-active::after { content:""; position:absolute; left:13px; right:13px; bottom:1px; height:2px; background:var(--blue); border-radius:3px; box-shadow:0 0 8px var(--blue-glow); }
.file-well { flex:1; min-height:0; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,var(--well-2),var(--well)); box-shadow:inset 0 5px 13px rgba(0,0,0,.78),0 1px rgba(255,255,255,.12); }
.file-grid { display:grid; grid-template-columns:minmax(260px,1.7fr) .52fr .72fr .62fr; align-items:center; }
.file-head { height:31px; padding:0 30px 0 14px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; color:var(--muted); }
.file-head span:not(:first-child) { border-left:1px solid var(--line); padding-left:10px; }
.file-rows { font-size:var(--font-size); }
.file-row { width:100%; min-width:700px; height:var(--row-height); padding:0 30px 0 14px; border:0; border-bottom:1px solid rgba(0,0,0,.16); background:var(--row); text-align:left; }
.file-row:nth-child(even) { background:var(--row-alt); }
.file-row:hover { background:color-mix(in srgb,var(--blue) 12%,var(--row)); }
.file-row.is-selected { background:color-mix(in srgb,var(--blue) 23%,var(--well-2)); box-shadow:inset 3px 0 var(--blue); }
.file-row > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:9px; }
.file-row > span:not(:first-child) { color:var(--muted); font-size:11px; }
.folder-icon, .doc-icon { width:18px; height:15px; display:inline-block; margin-right:10px; vertical-align:-3px; position:relative; }
.folder-icon { background:linear-gradient(#3ab0ff,#0874d2); border-radius:2px 3px 3px 3px; box-shadow:0 0 7px rgba(30,145,255,.32); }
.folder-icon::before { content:""; position:absolute; width:8px; height:3px; top:-2px; left:1px; border-radius:2px 2px 0 0; background:#55bcff; }
.doc-icon { background:#e6e8e5; border-radius:2px; box-shadow:inset -3px 0 #c6c9c7; }
.doc-icon::after { content:""; position:absolute; left:3px; bottom:3px; width:11px; height:2px; background:#ff6556; }
.sheet-doc::after { background:#43b66d; }
.image-doc::after { background:#58a8dd; }
.scroll-track { position:absolute; top:8px; right:6px; bottom:8px; width:13px; padding:2px; border-radius:7px; background:var(--well); box-shadow:inset 0 2px 5px #000; }
.scroll-thumb { height:110px; border-radius:6px; background:repeating-linear-gradient(135deg,#444 0 2px,#26292b 2px 5px); border:1px solid #050505; box-shadow:inset 1px 0 rgba(255,255,255,.16),0 1px 3px #000; }
.status-area { min-height:58px; padding:9px 14px; display:grid; grid-template-columns:minmax(250px,1fr) auto auto auto; align-items:center; gap:16px; font-size:11px; border-top:1px solid var(--line); }
.filter-field { height:34px; }
.zoom-control { display:flex; align-items:center; gap:7px; }
input[type="range"] { accent-color:var(--blue); width:100px; }

.phone-stage { display:none; place-items:center; padding:32px 20px 50px; background:radial-gradient(circle at 50% 0, color-mix(in srgb,var(--blue) 25%,var(--bg)), var(--bg) 45%); }
body[data-scene="phone"] .desktop-stage { display:none; }
body[data-scene="phone"] .phone-stage { display:grid; }
.phone-wrap { display:flex; gap:42px; align-items:center; }
.phone {
  width:390px; height:780px; border-radius:48px; padding:0 15px; overflow:hidden; position:relative; display:grid;
  grid-template-rows:57px 60px 55px 1fr 73px 38px; background:var(--well); border:2px solid var(--shell-hi);
  box-shadow:0 45px 90px rgba(0,0,0,.65),inset 0 0 0 6px var(--shell-lo),inset 0 1px 2px rgba(255,255,255,.16); isolation:isolate;
}
.phone::before { content:""; position:absolute; inset:7px; border-radius:40px; pointer-events:none; z-index:19; background:linear-gradient(112deg,rgba(255,255,255,.075),transparent 24%,transparent 72%,rgba(255,255,255,.025)); }
.phone::after { content:""; position:absolute; inset:7px; border-radius:40px; pointer-events:none; z-index:20; box-shadow:inset 0 1px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.025); }
.phone-status { padding:18px 17px 0; display:flex; justify-content:space-between; position:relative; z-index:3; font-size:14px; }
.phone-status strong { background:#19b650; padding:1px 5px; color:#07180c; border-radius:4px; }
.phone-toolbar { margin:0 9px; padding:6px 8px; display:flex; align-items:center; gap:5px; position:relative; z-index:3; }
.recessed-glass {
  border:1px solid color-mix(in srgb,var(--soft-line) 48%,transparent); border-radius:22px;
  background:color-mix(in srgb,var(--shell) 76%,transparent); box-shadow:inset 0 2px 7px rgba(0,0,0,.5),0 1px rgba(255,255,255,.12);
}
.phone-toolbar button { width:38px; height:38px; border:0; background:transparent; border-radius:14px; font-size:24px; }
.phone-toolbar button:active { color:var(--blue); background:color-mix(in srgb,var(--blue) 11%,transparent); box-shadow:inset 0 0 18px var(--blue-glow); }
.phone-toolbar label { display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
.phone-toolbar label span { font-size:23px; color:var(--muted); }
.phone-toolbar input { width:100%; min-width:0; border:0; outline:0; background:transparent; font-size:17px; }
.phone-toolbar:focus-within { box-shadow:inset 0 2px 7px rgba(0,0,0,.55),0 0 0 1px var(--blue),0 0 18px var(--blue-glow); }
.breadcrumbs { display:flex; align-items:center; gap:10px; padding:7px 12px 4px; position:relative; z-index:3; color:var(--muted); }
.glass-chip { padding:9px 15px; border-radius:18px; border:1px solid var(--soft-line); background:var(--shell-lo); box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 1px rgba(255,255,255,.12); }
.phone-content { min-height:0; overflow:auto; position:relative; z-index:2; scrollbar-width:none; }
.phone-list { display:grid; padding:3px 9px 18px; }
.phone-item { min-height:62px; display:grid; grid-template-columns:43px 1fr; align-items:center; border:0; border-radius:16px; background:transparent; text-align:left; padding:7px 8px; }
.phone-item:hover { background:color-mix(in srgb,var(--blue) 8%,transparent); }
.phone-item:active { background:color-mix(in srgb,var(--blue) 15%,transparent); box-shadow:inset 0 2px 5px rgba(0,0,0,.45); }
.phone-folder { width:31px; height:24px; border-radius:4px; background:var(--muted); position:relative; }
.phone-folder::before { content:""; position:absolute; width:14px; height:4px; top:-3px; left:1px; border-radius:3px 3px 0 0; background:inherit; }
.phone-item b { display:block; font-size:16px; font-weight:520; }
.phone-item small { display:block; color:var(--muted); margin-top:3px; }
.phone-empty { margin:34px 12px; color:var(--muted); text-align:center; font-size:14px; }
.phone-fab {
  position:absolute; right:28px; bottom:121px; width:57px; height:57px; border-radius:19px; z-index:8; font-size:30px;
  border:1px solid color-mix(in srgb,var(--soft-line) 60%,transparent); background:color-mix(in srgb,var(--shell) 72%,transparent); box-shadow:inset 0 2px 7px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-fab:active { color:var(--blue); border-color:var(--blue); box-shadow:inset 0 0 24px var(--blue-glow),0 0 15px rgba(33,156,255,.18); }
.phone-nav { margin:0 -15px; border-radius:18px 18px 0 0; display:grid; grid-template-columns:repeat(3,1fr); border-inline:0; border-bottom:0; position:relative; z-index:7; }
.phone-nav button { border:0; background:transparent; display:grid; place-items:center; align-content:center; gap:2px; color:var(--muted); font-size:11px; position:relative; }
.phone-nav button span { font-size:24px; color:var(--text); }
.phone-nav button.is-active { color:var(--text); }
.phone-nav button.is-active::after { content:""; position:absolute; bottom:4px; width:28px; height:2px; border-radius:3px; background:var(--blue); box-shadow:0 0 10px var(--blue-glow); }
.system-nav { margin:0 -15px; display:flex; align-items:center; justify-content:space-around; background:var(--well); position:relative; z-index:10; }

.keyboard {
  display:none; position:absolute; left:0; right:0; bottom:38px; padding:12px 7px 16px; z-index:9;
  background:color-mix(in srgb,var(--shell-lo) 94%,transparent); border-top:1px solid var(--soft-line); box-shadow:0 -12px 30px rgba(0,0,0,.34);
}
.keyboard.is-open { display:grid; gap:7px; }
.key-row { display:flex; justify-content:center; gap:5px; }
.key-row button { flex:1; max-width:34px; height:49px; border:1px solid color-mix(in srgb,var(--soft-line) 46%,transparent); border-radius:9px; background:color-mix(in srgb,var(--shell) 58%,transparent); box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(0,0,0,.38); font-size:19px; }
.key-row button:active, .key-row button.is-pressed { color:var(--blue); border-color:color-mix(in srgb,var(--blue) 70%,transparent); background:color-mix(in srgb,var(--blue) 12%,var(--shell)); box-shadow:inset 0 0 20px var(--blue-glow),0 0 9px rgba(33,156,255,.22); }
.key-row.actions button { max-width:70px; font-size:13px; }
.key-row.actions .space-key { max-width:190px; }
.key-row.actions .enter-key { background:#97c3ff; color:#062d59; }
.phone.keyboard-open { grid-template-rows:57px 60px 55px 1fr 0 38px; }
.phone.keyboard-open .phone-nav, .phone.keyboard-open .phone-fab { opacity:0; pointer-events:none; }
.capacitive-field {
  position:absolute; inset:8px; overflow:hidden; border-radius:39px; z-index:19; pointer-events:none;
}
.glass-contact {
  --contact-x:50%; --contact-y:50%; --contact-w:24px; --contact-h:18px;
  position:absolute; left:var(--contact-x); top:var(--contact-y); width:var(--contact-w); height:var(--contact-h);
  border-radius:50%; transform:translate(-50%,-50%); opacity:1; background:rgba(98,191,255,.16);
  box-shadow:0 0 2px 1px rgba(228,249,255,.1),0 0 8px 4px rgba(55,170,255,.1),0 0 16px 9px rgba(36,151,255,.045);
  transition:opacity 60ms linear;
}
.glass-contact::before,.glass-contact::after { content:""; position:absolute; border-radius:inherit; pointer-events:none; }
.glass-contact::before { inset:-4px; background:rgba(41,158,255,.045); filter:blur(4px); }
.glass-contact::after { inset:2px; background:rgba(226,248,255,.07); box-shadow:0 0 4px rgba(67,178,255,.09); }
.glass-contact.is-releasing { opacity:0; }
body[data-theme="light"] .glass-contact {
  background:rgba(0,115,200,.075); box-shadow:0 0 2px 1px rgba(0,75,130,.06),0 0 8px 4px rgba(0,121,215,.065),0 0 15px 8px rgba(0,121,215,.025);
}
body[data-theme="light"] .glass-contact::after { background:rgba(0,102,181,.045); }
@media (prefers-reduced-motion: reduce) {
  .glass-contact { transition:none; }
}
.interaction-notes { width:260px; color:var(--muted); line-height:1.5; }
.interaction-notes span { font:700 11px/1 ui-monospace,monospace; letter-spacing:.16em; color:var(--blue); }
.interaction-notes dl { margin:18px 0 0; display:grid; gap:3px; }
.interaction-notes dl div { display:grid; grid-template-columns:70px 1fr; gap:13px; padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--soft-line) 22%,transparent); }
.interaction-notes dt { color:var(--text); font-size:13px; }
.interaction-notes dd { margin:0; font-size:13px; }

.music-stage {
  display:none; min-height:calc(100vh - 66px); padding:30px;
  background:
    radial-gradient(circle at 80% 8%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 28%),
    linear-gradient(140deg,color-mix(in srgb,var(--shell-lo) 82%,#142436),var(--bg));
}
body[data-scene="music"] .desktop-stage,
body[data-scene="music"] .phone-stage { display:none; }
body[data-scene="music"] .music-stage { display:grid; place-items:center; }
.music-workbench {
  width:min(1640px,100%); display:grid; grid-template-columns:minmax(760px,1fr) 350px; gap:28px; align-items:center;
}
.music-window {
  min-width:0; height:min(780px,calc(100vh - 126px)); min-height:650px; display:grid; grid-template-rows:40px 130px 62px 1fr;
  overflow:hidden; border:1px solid var(--line); border-radius:27px 27px 19px 19px;
  background:
    radial-gradient(circle at 18% -10%,rgba(255,255,255,.09),transparent 33%),
    linear-gradient(120deg,var(--shell-hi),var(--shell) 40%,var(--shell-lo));
  box-shadow:var(--shadow),inset 1px 1px rgba(255,255,255,.16),inset -1px -1px rgba(0,0,0,.72);
}
.music-titlebar {
  display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--line); font-size:13px;
}
.music-app-mark { position:absolute; left:15px; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; color:var(--blue); background:var(--well); box-shadow:inset 0 2px 4px #000,0 1px rgba(255,255,255,.14); }
.music-titlebar .window-controls { top:5px; }
.music-display {
  position:relative; display:flex; align-items:center; gap:18px; padding:17px 25px; overflow:hidden; color:#eff8ff;
  background:
    linear-gradient(90deg,rgba(0,0,0,.93),rgba(3,11,17,.88) 60%,rgba(0,18,31,.75)),
    var(--well);
  border-bottom:1px solid #000; box-shadow:inset 0 -5px 12px #000,inset 0 1px rgba(255,255,255,.04);
}
.music-display::after {
  content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.58; box-shadow:0 0 12px var(--blue-glow);
}
.album-art {
  position:relative; overflow:hidden; flex:none;
  background:
    radial-gradient(ellipse at 18% 35%,rgba(225,246,255,.98),transparent 12%),
    radial-gradient(ellipse at 76% 40%,rgba(175,223,255,.72),transparent 17%),
    linear-gradient(145deg,#07111d,#233a50 45%,#020509 71%);
  box-shadow:inset 0 0 25px rgba(0,0,0,.48),0 8px 18px rgba(0,0,0,.36);
}
.album-art::before {
  content:""; position:absolute; width:80%; height:120%; left:8%; top:-14%; transform:skew(-13deg) rotate(12deg);
  background:linear-gradient(90deg,transparent,rgba(225,244,255,.32),rgba(3,11,20,.8),rgba(180,223,255,.24),transparent);
  filter:blur(4px);
}
.album-art > span { position:absolute; inset:0; display:grid; place-items:center; text-align:center; z-index:2; color:rgba(225,240,249,.7); font:600 8px/1.25 ui-monospace,monospace; letter-spacing:.08em; }
.compact-art { width:94px; height:94px; border-radius:10px; border:1px solid rgba(120,180,215,.18); }
.display-copy { display:grid; gap:7px; min-width:0; }
.display-label { color:#81c9fb; font:700 10px/1 ui-monospace,monospace; letter-spacing:.17em; }
.display-copy strong { font-size:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display-copy > span:last-child { color:#aebbc4; font-size:14px; }
.spectrum { height:58px; margin-left:auto; display:flex; align-items:flex-end; gap:4px; opacity:.7; }
.spectrum i { width:3px; height:18%; border-radius:3px; background:var(--blue); box-shadow:0 0 7px var(--blue-glow); transform-origin:bottom; }
.spectrum i:nth-child(2),.spectrum i:nth-child(7){height:44%}.spectrum i:nth-child(3),.spectrum i:nth-child(6){height:78%}.spectrum i:nth-child(4){height:56%}.spectrum i:nth-child(5){height:92%}
.music-window.is-playing .spectrum i { animation:meter .75s ease-in-out infinite alternate; }
.music-window.is-playing .spectrum i:nth-child(2n){animation-delay:-.28s}.music-window.is-playing .spectrum i:nth-child(3n){animation-delay:-.53s}
@keyframes meter { to { transform:scaleY(.28); opacity:.45; } }
.music-transport {
  display:grid; grid-template-columns:auto auto minmax(120px,1fr) auto auto auto 120px; align-items:center; gap:10px; padding:9px 13px 10px;
  border-bottom:1px solid var(--line); box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.transport-cluster { display:flex; gap:1px; padding:2px; border-radius:12px; background:var(--line); }
.music-key {
  width:37px; height:36px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(var(--shell-hi),var(--shell-lo)); box-shadow:var(--key-shadow);
}
.music-key:hover { filter:brightness(1.1); }
.music-key:active { transform:translateY(3px); box-shadow:inset 0 3px 6px rgba(0,0,0,.7); }
.transport-cluster .music-key { border-radius:6px; }
.transport-cluster .music-key:first-child { border-radius:10px 5px 5px 10px; }
.transport-cluster .music-key:last-child { border-radius:5px 10px 10px 5px; }
.music-key.is-active { color:var(--blue); box-shadow:inset 0 3px 5px rgba(0,0,0,.7),0 0 8px rgba(33,156,255,.18); transform:translateY(2px); }
.music-key.is-active::after { content:""; display:block; width:13px; height:2px; margin:2px auto 0; border-radius:3px; background:var(--blue); box-shadow:0 0 7px var(--blue-glow); }
.music-progress,.volume-well {
  height:30px; display:flex; align-items:center; padding:0 9px; border-radius:9px; background:var(--well); border:1px solid var(--line); box-shadow:inset 0 3px 7px rgba(0,0,0,.72),0 1px rgba(255,255,255,.09);
}
.music-progress input,.volume-well input,.mobile-progress input { width:100%; accent-color:var(--blue); }
.elapsed-time,.duration-time { color:var(--muted); font:600 11px/1 ui-monospace,monospace; }
.mode-key { width:34px; }
.volume-well { gap:5px; padding-inline:7px; }
.volume-well input { width:83px; }
.music-body { min-height:0; display:grid; grid-template-columns:170px minmax(370px,1fr) 235px; gap:8px; padding:10px 13px 13px; }
.music-sidebar { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); padding-right:8px; }
.music-sidebar nav { display:grid; gap:3px; }
.music-sidebar nav button {
  border:0; border-radius:7px; background:transparent; text-align:left; padding:8px 7px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-sidebar nav button span { display:inline-grid; width:25px; color:var(--text); }
.music-sidebar nav button.is-active { color:var(--text); background:var(--well-2); box-shadow:inset 0 2px 5px rgba(0,0,0,.57),0 1px rgba(255,255,255,.09); }
.music-sidebar nav button.is-active span { color:var(--blue); text-shadow:0 0 8px var(--blue-glow); }
.library-counter { margin:auto 5px 4px; display:flex; align-items:baseline; gap:6px; color:var(--muted); }
.library-counter b { color:var(--text); font-size:24px; }
.music-library { min-width:0; display:grid; grid-template-rows:auto auto 29px 1fr; gap:7px; }
.library-head { display:grid; grid-template-columns:37px 45px minmax(0,1fr) 37px 37px; align-items:center; gap:8px; }
.library-head > div:not(.mini-cover) { min-width:0; display:grid; gap:2px; }
.library-head strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-head span { color:var(--muted); font-size:11px; }
.mini-cover { width:43px; height:43px; border-radius:7px; }
.music-search { height:35px; }
.music-table-head { height:29px; padding:0 10px; color:var(--muted); font-size:11px; border-bottom:1px solid var(--line); }
.music-track-grid { display:grid; grid-template-columns:32px minmax(160px,1fr) minmax(100px,.65fr) 42px; align-items:center; gap:5px; }
.music-tracks { min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--shell-hi) var(--well); }
.music-track {
  width:100%; min-height:38px; padding:0 9px; border:0; border-bottom:1px solid rgba(0,0,0,.18); background:var(--row); text-align:left;
}
.music-track:nth-child(even) { background:var(--row-alt); }
.music-track:hover { background:color-mix(in srgb,var(--blue) 10%,var(--row)); }
.music-track.is-active { background:var(--well-2); box-shadow:inset 3px 0 var(--blue),inset 0 3px 5px rgba(0,0,0,.46); transform:translateY(1px); }
.music-track.is-active span:nth-child(2) { color:var(--blue); }
.music-track span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-track span:first-child,.music-track span:last-child { color:var(--muted); font:600 11px/1 ui-monospace,monospace; }
.music-empty { margin:30px 12px; color:var(--muted); text-align:center; font-size:14px; }
.music-queue { min-width:0; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:var(--well); box-shadow:inset 0 4px 9px rgba(0,0,0,.7),0 1px rgba(255,255,255,.09); transition:.22s; }
.music-body.queue-hidden { grid-template-columns:170px minmax(370px,1fr) 0; }
.music-body.queue-hidden .music-queue { opacity:0; pointer-events:none; }
.music-queue header { display:flex; justify-content:space-between; align-items:center; padding:11px 10px 8px; border-bottom:1px solid var(--line); }
.music-queue header div { display:grid; gap:3px; }
.music-queue header span { color:var(--blue); font:700 9px/1 ui-monospace,monospace; letter-spacing:.16em; }
.music-queue header strong { font-size:14px; }
.music-queue header .music-key { width:30px; height:30px; }
#queueTracks { overflow:auto; }
.queue-track { width:100%; min-height:40px; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:4px; padding:0 9px; border:0; background:transparent; text-align:left; color:var(--muted); }
.queue-track:hover { background:var(--row); color:var(--text); }
.queue-track.is-active { color:var(--text); background:var(--well-2); box-shadow:inset 2px 0 var(--blue); }
.queue-track span:nth-child(2) { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.queue-track small { font-size:10px; }
.drag-dots { font-style:normal; color:var(--muted); letter-spacing:-2px; }
.music-queue footer { display:flex; justify-content:space-between; padding:9px 10px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }

.music-phone {
  width:350px; height:min(780px,calc(100vh - 126px)); min-height:650px; position:relative; overflow:hidden; display:grid;
  grid-template-rows:50px 70px minmax(230px,1fr) auto 58px 100px 68px 36px; padding:0 18px;
  border:2px solid var(--shell-hi); border-radius:44px; background:var(--well); box-shadow:0 40px 80px rgba(0,0,0,.65),inset 0 0 0 6px var(--shell-lo),inset 0 1px rgba(255,255,255,.2); isolation:isolate;
}
.music-phone::after { content:""; position:absolute; inset:7px; border-radius:36px; pointer-events:none; z-index:20; box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.025); }
.music-phone .capacitive-field { border-radius:35px; }
.music-phone .phone-status { padding-top:15px; }
.mobile-now-label { display:grid; place-items:center; align-content:center; gap:5px; position:relative; z-index:3; }
.mobile-now-label span { font-weight:700; }
.mobile-now-label strong { color:var(--muted); font-weight:550; }
.phone-art { width:100%; aspect-ratio:1; align-self:center; border-radius:14px; border:1px solid rgba(130,185,219,.18); }
.phone-art > span { font-size:14px; }
.mobile-track-info { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; position:relative; z-index:3; }
.mobile-track-info > div:first-child { display:grid; min-width:0; gap:3px; }
.mobile-track-info .now-title { font-size:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-track-info .now-artist { color:var(--muted); }
.mobile-actions { display:flex; gap:4px; }
.glass-control {
  border:1px solid color-mix(in srgb,var(--soft-line) 48%,transparent); color:var(--text); background:color-mix(in srgb,var(--shell) 55%,transparent);
  box-shadow:inset 0 1px rgba(255,255,255,.09),inset 0 -1px rgba(0,0,0,.5);
}
.glass-control:active,.glass-control.is-active {
  color:var(--blue); border-color:color-mix(in srgb,var(--blue) 70%,transparent); background:color-mix(in srgb,var(--blue) 11%,var(--shell)); box-shadow:inset 0 0 22px var(--blue-glow),0 0 9px rgba(33,156,255,.18);
}
.mobile-actions .glass-control { width:46px; height:46px; border-radius:16px; font-size:24px; }
.like-button.is-active { color:#ff6a8a; border-color:#ff6a8a; box-shadow:inset 0 0 20px rgba(255,75,120,.32),0 0 9px rgba(255,75,120,.22); }
.mobile-progress { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; gap:6px; font-size:12px; }
.mobile-progress > span:last-child { text-align:right; }
.mobile-transport { display:grid; grid-template-columns:64px 1fr 64px; align-items:center; gap:8px; }
.mobile-transport .glass-control { height:65px; border-radius:24px; font-size:25px; }
.mobile-main-play { display:flex; align-items:center; justify-content:center; gap:9px; background:var(--text); color:var(--well); }
.mobile-main-play b { font-size:15px; }
.mobile-modes { display:flex; align-items:center; justify-content:space-between; }
.mobile-modes .glass-control { width:48px; height:48px; border-radius:15px; font-size:20px; }
.music-phone .system-nav { margin-inline:-18px; }
.mobile-queue-sheet {
  position:absolute; left:8px; right:8px; bottom:7px; height:57%; z-index:18; padding:8px 14px 18px; transform:translateY(105%); transition:transform .25s ease;
  border:1px solid var(--soft-line); border-radius:28px 28px 36px 36px; background:color-mix(in srgb,var(--shell-lo) 96%,transparent); box-shadow:0 -22px 45px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12);
}
.mobile-queue-sheet.is-open { transform:translateY(0); }
.sheet-handle { width:48px; height:4px; margin:1px auto 9px; border-radius:4px; background:var(--muted); }
.mobile-queue-sheet header { display:flex; align-items:center; justify-content:space-between; padding:2px 3px 8px; }
.sheet-close { width:35px; height:35px; border:0; border-radius:13px; background:var(--well); }
#mobileQueue { max-height:calc(100% - 52px); overflow:auto; }
.mobile-queue-sheet .queue-track { min-height:46px; border-radius:10px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Shared behavior contract: ABS moves, cover glass only illuminates. */
.dolphin-window :is(.shell-key,.window-controls button,.folder-tab),
.plasma-rail .rail-key,
.music-window :is(.music-key,.window-controls button) {
  transition:transform .11s ease,box-shadow .11s ease,filter .11s ease,color .11s ease;
  transform-origin:50% 100%;
}
@media (hover:hover) {
  .dolphin-window :is(.shell-key,.window-controls button,.folder-tab):not(.is-active):hover,
  .plasma-rail .rail-key:not(.is-running):hover,
  .music-window :is(.music-key,.window-controls button):not(.is-active):hover {
    transform:translateY(-1px);
    filter:brightness(1.08);
  }
}
.dolphin-window :is(.shell-key,.window-controls button,.folder-tab):active,
.plasma-rail .rail-key:active,
.music-window :is(.music-key,.window-controls button):active {
  transform:translateY(3px) rotateX(4deg);
  filter:brightness(.92);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.07);
}
.plasma-rail .rail-key.is-running,
.music-window .music-key.is-active {
  transform:translateY(2px) rotateX(2deg);
  color:var(--blue);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7),0 0 8px rgba(33,156,255,.14);
}
.dolphin-window .folder-tab.is-active {
  transform:translateY(4px) rotateX(-7deg);
  filter:brightness(.9);
}
.places button,.music-sidebar nav button {
  transition:transform .11s ease,background .11s ease,box-shadow .11s ease,color .11s ease;
}
.places button:active,.music-sidebar nav button:active,
.places button.is-active,.music-sidebar nav button.is-active {
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.57),0 1px rgba(255,255,255,.08);
}
.dolphin-window .recess-field,.music-window .recess-field {
  transition:transform .11s ease,border-color .11s ease,box-shadow .11s ease;
}
.dolphin-window .recess-field:focus-within,.music-window .recess-field:focus-within {
  transform:translateY(2px);
}

.phone button,.music-phone button,.phone .phone-toolbar label,.phone input[type="range"],.music-phone input[type="range"] {
  transition:color 60ms linear,border-color 60ms linear,box-shadow 60ms linear,text-shadow 60ms linear;
}
.phone,.music-phone { -webkit-tap-highlight-color:transparent; }
.phone button,.music-phone button { touch-action:manipulation; }
.phone button:active,.music-phone button:active {
  transform:none !important; filter:none; background:transparent;
}

/* Phone controls are grooves in one fixed cover sheet, never moving glass objects. */
.phone :is(.phone-toolbar button,.glass-chip,.phone-fab,.phone-nav button),
.music-phone .glass-control {
  border:1px solid color-mix(in srgb,var(--muted) 42%,transparent);
  background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 3%,transparent),0 0 0 1px color-mix(in srgb,var(--well) 35%,transparent);
}
.phone .phone-toolbar label {
  min-height:42px; padding:0 8px; border:1px solid color-mix(in srgb,var(--muted) 38%,transparent); border-radius:14px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 3%,transparent);
}
.phone .phone-toolbar {
  margin-inline:-15px; padding-inline:20px; border-radius:0; border-inline:0; border-top:0;
  box-shadow:inset 0 -1px color-mix(in srgb,var(--muted) 24%,transparent);
}
.phone .phone-toolbar:focus-within { box-shadow:inset 0 -1px color-mix(in srgb,var(--muted) 24%,transparent); }
.phone .phone-toolbar label:focus-within {
  border-color:color-mix(in srgb,var(--blue) 72%,transparent); box-shadow:0 0 7px rgba(33,156,255,.14); text-shadow:0 0 6px rgba(33,156,255,.2);
}
.phone .phone-item {
  border:0; border-bottom:1px solid color-mix(in srgb,var(--muted) 25%,transparent); border-radius:0;
}
.phone .phone-nav button { margin:7px 5px; border-radius:16px; }
.phone .phone-fab { background:color-mix(in srgb,var(--well) 20%,transparent); }

.phone :is(button.is-contacted,.phone-toolbar label.is-contacted),
.music-phone :is(button.is-contacted,input.is-contacted) {
  transform:none !important; filter:none; color:var(--blue); background:transparent;
  border-color:color-mix(in srgb,var(--blue) 72%,transparent);
  box-shadow:inset 0 0 0 1px rgba(205,240,255,.08),0 0 7px rgba(33,156,255,.16);
  text-shadow:0 0 7px rgba(33,156,255,.28);
}
.phone :is(button.is-active,button.is-selected),
.music-phone :is(button.is-active,button.is-selected) {
  transform:none !important; color:var(--blue); background:transparent;
  border-color:color-mix(in srgb,var(--blue) 62%,transparent);
  box-shadow:inset 0 0 0 1px rgba(205,240,255,.055),0 0 6px rgba(33,156,255,.12);
  text-shadow:0 0 6px rgba(33,156,255,.24);
}
.phone .phone-item:is(.is-selected,.is-contacted) {
  border-bottom-color:var(--blue); box-shadow:0 5px 8px -7px var(--blue); background:transparent;
}
.phone .phone-nav button.is-active::after { opacity:.75; height:1px; box-shadow:0 0 6px rgba(33,156,255,.28); }
.music-phone .like-button.is-active {
  color:#ff6a8a; border-color:#ff6a8a; background:transparent; box-shadow:0 0 7px rgba(255,75,120,.16); text-shadow:0 0 6px rgba(255,75,120,.28);
}
.music-phone .mobile-main-play,
.music-phone .mobile-main-play.is-active {
  background:transparent; color:var(--text); border-color:color-mix(in srgb,var(--muted) 55%,transparent);
}
.music-phone .mobile-main-play:is(.is-active,.is-contacted) {
  color:#62e1cb; border-color:#62e1cb; box-shadow:0 0 7px rgba(98,225,203,.16); text-shadow:0 0 7px rgba(98,225,203,.28);
}
.music-phone :is(.queue-track,.sheet-close) { background:transparent; }
.music-phone .queue-track { border:0; border-bottom:1px solid color-mix(in srgb,var(--muted) 25%,transparent); border-radius:0; }
.music-phone .sheet-close { border:1px solid color-mix(in srgb,var(--muted) 42%,transparent); }
.music-phone input[type="range"].is-contacted {
  border:0; box-shadow:none; filter:drop-shadow(0 0 3px rgba(33,156,255,.24));
}

.dolphin-window input[type="range"],.music-window input[type="range"] {
  height:6px; border:0; border-radius:8px; appearance:none; background:var(--well); box-shadow:inset 0 2px 4px rgba(0,0,0,.75),0 1px rgba(255,255,255,.1);
}
.dolphin-window input[type="range"]::-webkit-slider-thumb,.music-window input[type="range"]::-webkit-slider-thumb {
  appearance:none; width:17px; height:17px; border-radius:6px; border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,var(--shell-hi) 0 2px,var(--shell-lo) 2px 4px); box-shadow:var(--key-shadow);
}
.dolphin-window input[type="range"]::-moz-range-thumb,.music-window input[type="range"]::-moz-range-thumb {
  width:17px; height:17px; border-radius:6px; border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,var(--shell-hi) 0 2px,var(--shell-lo) 2px 4px); box-shadow:var(--key-shadow);
}
.dolphin-window input[type="range"]::-moz-range-progress,.music-window input[type="range"]::-moz-range-progress {
  height:3px; border-radius:4px; background:var(--blue); box-shadow:0 0 5px var(--blue-glow);
}
.phone input[type="range"],.music-phone input[type="range"] {
  --range-fill:0%; appearance:none; width:100%; height:54px; margin:0; border:0; border-radius:18px; touch-action:none;
  background:
    linear-gradient(90deg,var(--blue) 0 var(--range-fill),transparent var(--range-fill) 100%) center / calc(100% - 18px) 4px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--well) 48%,transparent),color-mix(in srgb,var(--muted) 48%,transparent)) center / calc(100% - 18px) 10px no-repeat;
  box-shadow:none;
}
.phone input[type="range"]::-webkit-slider-thumb,.music-phone input[type="range"]::-webkit-slider-thumb {
  appearance:none; width:1px; height:11px; border:0; border-radius:1px; background:var(--blue); box-shadow:0 0 6px rgba(33,156,255,.42);
}
.phone input[type="range"]::-moz-range-thumb,.music-phone input[type="range"]::-moz-range-thumb {
  width:1px; height:11px; border:0; border-radius:1px; background:var(--blue); box-shadow:0 0 6px rgba(33,156,255,.42);
}
.phone input[type="range"]::-moz-range-progress,.music-phone input[type="range"]::-moz-range-progress {
  height:4px; border-radius:4px; background:var(--blue); box-shadow:0 0 5px rgba(33,156,255,.3);
}
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); padding:10px 15px; border:1px solid var(--soft-line); border-radius:12px; background:var(--shell); box-shadow:var(--shadow); opacity:0; pointer-events:none; z-index:99; transition:.2s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
[hidden] { display:none !important; }

@media (max-width: 1050px) {
  .desktop-stage { padding:30px 18px; align-items:flex-start; overflow:auto; }
  .desktop { width:1100px; min-width:1100px; }
  .interaction-notes { display:none; }
  .music-stage { padding:22px 14px 40px; overflow:auto; align-items:start; }
  .music-workbench { grid-template-columns:1fr; width:100%; }
  .music-window { height:720px; }
  .music-phone { justify-self:center; height:740px; }
}
@media (max-width: 600px) {
  .lab-bar { height:auto; min-height:70px; padding:10px 14px; }
  .brand { display:none; }
  .lab-controls { width:100%; justify-content:center; gap:4px; }
  .switcher { gap:2px; padding:3px; }
  .switch-option,.theme-switcher .switch-option { padding:7px 5px; font-size:11px; }
  .material-meter { display:none; }
  .stage { min-height:calc(100vh - 70px); }
  .phone-stage { padding:14px 0 30px; align-items:start; }
  .phone { width:min(390px,100vw); height:min(780px,calc(100vh - 84px)); min-height:650px; border-radius:0; border-inline:0; }
  .music-stage { padding:0 0 28px; }
  .music-workbench { display:block; }
  .music-window { display:none; }
  .music-phone { width:100vw; height:calc(100vh - 70px); min-height:650px; border-radius:0; border-inline:0; }
  .music-phone::after { border-radius:0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}