/* Budsmith demo. The stage is a "screen", so it stays dark in both color schemes; everything inside is drawn at
   1600x900 and scaled to the box by demo.js. Values are provisional like the rest of the site (see DESIGN.md). */
.demo { display: none; }
.js .demo { display: block; }
.dm-stage {
  --g1: #f2d58e; --g2: #d8a43e; --ink: #1a1307; --bg: #0c0a07; --card: #1d1812; --card2: #27201a; --tx: #f4eee4; --mu: #a79e8d; --ln: rgba(255, 244, 220, .1);
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: var(--bg); color: var(--tx);
  border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); outline-offset: 4px; isolation: isolate;
}
.dm-world { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; font: 400 22px/1.3 var(--font); }
.dm-world * { box-sizing: border-box; }
.bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 0%, #1f180f 0%, #0c0a07 60%); }
.bg i { position: absolute; border-radius: 50%; filter: blur(90px); }
.bg .b1 { width: 700px; height: 700px; left: 900px; top: -200px; background: rgba(245, 209, 122, .16); }
.bg .b2 { width: 600px; height: 600px; left: -160px; top: 420px; background: rgba(224, 169, 60, .1); }
.cam { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; will-change: transform; }
.layer { position: absolute; inset: 0; visibility: hidden; opacity: 0; }

/* ---------- titles, in screen space on the left ---------- */
.titles { position: absolute; left: 96px; top: 0; width: 540px; height: 900px; pointer-events: none; }
.ttl { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; }
.ttl .eb { display: block; font-size: 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g1); margin-bottom: 18px; }
.ttl h3 { font-size: 56px; line-height: 1.06; font-weight: 700; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
.ttl p { font-size: 27px; line-height: 1.4; color: var(--mu); margin: 0; text-wrap: pretty; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, .06); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g2), var(--g1)); }

/* ---------- intro / outro ---------- */
.hero-logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1000px; text-align: center; display: grid; justify-items: center; gap: 18px; }
.hero-logo img { border-radius: 42px; box-shadow: 0 30px 70px -20px rgba(245, 209, 122, .35); }
.hero-logo b { font-size: 112px; line-height: 1; letter-spacing: -.035em; font-weight: 700; background: linear-gradient(100deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-logo p { font-size: 34px; color: var(--mu); max-width: 780px; margin: 0; }
.hero-logo .chips { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.hero-logo .chips span { font-size: 24px; padding: 8px 20px; border-radius: 999px; border: 1px solid var(--ln); color: var(--tx); background: rgba(255, 255, 255, .04); }
.hero-logo .chips .g { color: var(--ink); background: linear-gradient(160deg, var(--g1), var(--g2)); border-color: transparent; font-weight: 700; }
.hero-logo em { font-style: normal; font-size: 28px; color: var(--g1); letter-spacing: .02em; margin-top: 4px; }
.hero-logo.out img { width: 150px; height: 150px; }
.hero-logo.out b { font-size: 92px; }

/* ---------- macOS bar and the app's panel ---------- */
.mbar { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: rgba(18, 14, 9, .72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ln); display: flex; justify-content: space-between; align-items: center; padding: 0 28px; font-size: 18px; color: #e8e0d2; }
.mbar .ml { display: flex; gap: 22px; align-items: center; } .mbar .ml b { font-weight: 700; }
.mbar .ap { width: 15px; height: 18px; border-radius: 8px 8px 7px 7px; background: #e8e0d2; display: inline-block; }
.mbar .mr { display: flex; gap: 22px; align-items: center; }
.mbar .mi { display: inline-block; }
.mbar .bsm { width: 30px; height: 30px; border-radius: 7px; padding: 3px; color: #e8e0d2; }
.mbar .bsm.on { background: rgba(255, 255, 255, .2); }
.mbar .bsm svg { width: 100%; height: 100%; }
.mbar .wifi { width: 22px; height: 16px; border-radius: 22px 22px 0 0; border: 3px solid #e8e0d2; border-bottom: 0; }
.mbar .batt { width: 30px; height: 14px; border: 2px solid #e8e0d2; border-radius: 4px; position: relative; } .mbar .batt::after { content: ""; position: absolute; inset: 2px 7px 2px 2px; background: #e8e0d2; border-radius: 1px; }
.mbar .mr { margin-right: 0; }

.pn { position: absolute; left: 1212px; top: 52px; width: 360px; padding: 16px; border-radius: 22px; background: #15110c; border: 1px solid rgba(255, 244, 220, .12); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); transform-origin: 85% 0; color: var(--tx); opacity: 0; }
.pn-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pn-head b { display: block; font-size: 17px; } .conn { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mu); margin-top: 2px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #5fd47a; display: inline-block; }
.tile { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(160deg, var(--g1), var(--g2)); color: var(--ink); display: grid; place-items: center; padding: 4px; flex: none; }
.tile.big { width: 52px; height: 52px; border-radius: 15px; padding: 8px; } .tile svg { width: 100%; height: 100%; }
.pn-bats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bat { background: var(--card); border-radius: 14px; padding: 10px 12px 12px; display: grid; gap: 2px; }
.bat .lbl { font-size: 13px; color: var(--mu); } .bat .val { font-size: 25px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: 4px; overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g2), var(--g1)); border-radius: 3px; }
.lab { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin: 16px 2px 8px; }
.lab.eqrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.select { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tx); background: var(--card2); border-radius: 999px; padding: 6px 14px; font-weight: 600; transition: transform .1s; transform: scale(calc(1 - .06 * var(--p, 0))); }
.pn-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode { height: 64px; border-radius: 14px; background: var(--card); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tx); white-space: nowrap; padding: 0 2px; transform: scale(calc(1 - .06 * var(--p, 0))); transition: background .25s, color .25s, box-shadow .25s; }
.mode svg { width: 22px; height: 22px; }
.mode.sel, .pill.sel, .chip.sel { background: linear-gradient(170deg, var(--g1), var(--g2)); color: var(--ink); box-shadow: 0 0 22px rgba(245, 209, 122, .3); }
.pn-chips { display: flex; gap: 6px; margin-top: 8px; height: 28px; }
.chip { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 5px 4px; border-radius: 999px; background: var(--card); white-space: nowrap; transition: background .25s, color .25s; }
.pn-pills { display: grid; grid-template-columns: 0.9fr 1fr 1.25fr; gap: 8px; }
.pill { height: 32px; display: grid; place-items: center; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; transform: scale(calc(1 - .06 * var(--p, 0))); transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.pn-tg, .pn-dev { background: var(--card); border-radius: 16px; padding: 4px 12px; }
.row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 15.5px; } .row + .row { border-top: 1px solid var(--ln); }
.row .rl { flex: 1; } .row small { display: block; font-size: 12px; color: var(--mu); } .row b { font-weight: 600; display: block; }
.ico { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(160deg, var(--g1), var(--g2)); color: var(--ink); display: grid; place-items: center; padding: 5px; flex: none; } .ico svg { width: 100%; height: 100%; }
.sw { width: 44px; height: 26px; border-radius: 999px; background: #3a342b; position: relative; flex: none; transition: background .25s; } .sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .25s; }
.sw.on { background: #7a6a45; } .sw.on i { left: 21px; }
.pn-foot { display: flex; justify-content: space-between; font-size: 15px; color: var(--mu); padding: 14px 4px 0; } .pn-foot svg { width: 16px; height: 16px; vertical-align: -3px; }

/* cursor */
.cur { position: absolute; left: 0; top: 0; width: 34px; height: 40px; opacity: 0; pointer-events: none; z-index: 20; margin: -2px 0 0 -4px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); transform-origin: 4px 2px; }
.cur::after { content: ""; position: absolute; left: -8px; top: -10px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--g1); opacity: calc(var(--p, 0) * .9); transform: scale(calc(.6 + var(--p, 0) * .9)); }

/* ---------- equalizer window ---------- */
.eqwin { position: absolute; left: 790px; top: 190px; width: 680px; padding: 30px; border-radius: 22px; background: #15110c; border: 1px solid rgba(255, 244, 220, .12); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); }
.eq-name small { display: block; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--mu); text-transform: uppercase; margin-bottom: 8px; }
.eq-name div { background: var(--card2); border: 1px solid var(--ln); border-radius: 10px; padding: 10px 14px; font-size: 20px; }
.eq-box { position: relative; margin-top: 18px; background: var(--card); border-radius: 18px; padding: 44px 24px 54px; height: 372px; }
.eq-db { position: absolute; left: 22px; font-size: 14px; font-weight: 600; color: var(--mu); } .eq-db.t { top: 14px; } .eq-db.b { bottom: 14px; }
.eq-sl { display: flex; justify-content: space-between; position: relative; height: 240px; }
.eq-sl .s { position: relative; width: 14%; height: 240px; } .eq-sl .s:first-child { width: 8%; }
.s .trk { position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; border-radius: 4px; background: rgba(255, 255, 255, .09); }
.s .fill { position: absolute; left: 50%; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--g2); top: 120px; height: 0; }
.s .knob { position: absolute; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff; top: 105px; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.s em { position: absolute; left: 50%; top: 256px; translate: -50% 0; font-style: normal; font-size: 15px; font-weight: 700; color: var(--mu); }
.eq-foot { display: flex; justify-content: space-between; margin-top: 18px; align-items: center; }
.eq-foot .ghost { background: var(--card2); padding: 10px 24px; border-radius: 999px; font-weight: 600; font-size: 18px; }
.eq-foot .save { background: linear-gradient(170deg, var(--g1), var(--g2)); color: var(--ink); padding: 11px 32px; border-radius: 999px; font-weight: 700; font-size: 20px; box-shadow: 0 0 calc(10px + var(--g, 0) * 22px) rgba(245, 209, 122, .45); }

/* ---------- pause when removed ---------- */
.player { position: absolute; left: 740px; top: 120px; width: 700px; padding: 26px; border-radius: 26px; background: #15110c; border: 1px solid rgba(255, 244, 220, .12); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7); display: grid; grid-template-columns: 150px 1fr 64px; gap: 24px; align-items: center; transition: box-shadow .4s; }
.player.paused { box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7), 0 0 0 2px rgba(245, 209, 122, .35); }
.art { width: 150px; height: 150px; border-radius: 22px; background: radial-gradient(circle at 30% 25%, #ffe9b0, transparent 55%), linear-gradient(145deg, #d8a43e, #5a3a12 70%, #2a1b0a); box-shadow: 0 16px 36px -14px rgba(224, 169, 60, .55); transition: filter .4s; } .player.paused .art { filter: saturate(.55) brightness(.8); }
.pl-main b { font-size: 28px; display: block; } .pl-main span { color: var(--mu); font-size: 19px; }
.viz { display: flex; gap: 5px; align-items: flex-end; height: 40px; margin: 14px 0 10px; } .viz i { flex: 1; height: 100%; background: linear-gradient(0deg, var(--g2), var(--g1)); border-radius: 3px; transform-origin: bottom; }
.pl-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; } .pl-bar i { display: block; height: 100%; background: var(--g1); width: 0; }
.pl-time { display: flex; justify-content: space-between; font-size: 14px; color: var(--mu); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pl-btn { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, var(--g1), var(--g2)); color: var(--ink); display: grid; place-items: center; padding: 18px; } .pl-btn svg { width: 100%; height: 100%; }
.pl-chip { position: absolute; right: 26px; top: -22px; background: #1d1812; border: 1px solid rgba(245, 209, 122, .35); color: var(--g1); font-size: 18px; font-weight: 600; padding: 6px 18px; border-radius: 999px; }
.player.paused .pl-chip { background: linear-gradient(160deg, var(--g1), var(--g2)); color: var(--ink); border-color: transparent; }
.buds { position: absolute; left: 760px; top: 420px; width: 660px; height: 250px; }
.bud { position: absolute; top: 20px; width: 150px; text-align: center; color: var(--g1); transition: color .3s; }
.bud.L { left: 150px; } .bud.R { left: 360px; }
.bud .svgw { display: block; width: 100px; height: 150px; margin: 0 auto 8px; } .bud .svgw svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 18px rgba(245, 209, 122, .25)); }
.bud .who { display: block; font-size: 19px; color: var(--tx); font-weight: 600; }
.bud .st { display: inline-block; margin-top: 4px; font-size: 15px; padding: 3px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--mu); }
.bud.outear { color: #8b8070; } .bud.outear .st { background: rgba(255, 255, 255, .13); color: var(--tx); }
.pwr { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: max-content; display: flex; gap: 12px; align-items: center; font-size: 19px; color: var(--mu); background: #15110c; border: 1px solid var(--ln); border-radius: 999px; padding: 8px 20px 8px 10px; }
.works { position: absolute; left: 740px; top: 720px; width: 700px; display: flex; gap: 10px; flex-wrap: wrap; }
.works span { font-size: 19px; padding: 7px 18px; border-radius: 999px; background: rgba(245, 209, 122, .12); border: 1px solid rgba(245, 209, 122, .3); color: var(--g1); opacity: 0; }
.works span.no { background: rgba(255, 255, 255, .05); border-color: var(--ln); color: var(--mu); text-decoration: none; }

/* ---------- devices ---------- */
.wires { position: absolute; inset: 0; } .wires line { stroke: var(--g1); stroke-width: 4; stroke-dasharray: 10 10; stroke-linecap: round; opacity: .15; }
.dev { position: absolute; top: 380px; width: 190px; height: 190px; border-radius: 26px; background: #15110c; border: 1px solid var(--ln); display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; transition: border-color .4s; }
.dev.mac { left: 800px; } .dev.hub { left: 1050px; width: 160px; } .dev.ph { left: 1270px; width: 150px; }
.dev .ico { width: 64px; height: 64px; border-radius: 18px; padding: 14px; margin-bottom: 4px; } .dev b { font-size: 20px; font-weight: 600; } .dev small { font-size: 15px; color: var(--mu); min-height: 20px; }
.dev.on { border-color: rgba(245, 209, 122, .4); } .dev.hub { border-color: rgba(245, 209, 122, .4); }
.badge-audio { position: absolute; top: 310px; margin-left: -4px; width: 190px; display: flex; gap: 8px; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--g1), var(--g2)); color: var(--ink); font-weight: 700; font-size: 18px; border-radius: 999px; padding: 8px 14px; opacity: 0; left: 785px; }
.badge-audio svg { width: 22px; height: 22px; }
.takeover { position: absolute; left: 1253px; top: 610px; width: 184px; text-align: center; background: var(--card2); border: 1px solid var(--ln); font-size: 17px; font-weight: 600; padding: 10px 8px; border-radius: 999px; opacity: 0; transform: scale(calc(1 - .06 * var(--p, 0))); }
.tip { position: absolute; left: 0; right: 0; width: 700px; margin: 0 auto; text-align: center; font-size: 22px; color: var(--mu); opacity: 0; }
.L-dev .tip { top: 700px; left: 740px; margin: 0; } .L-find .tip { top: 745px; left: 740px; margin: 0; } .L-fit .tip { top: 745px; left: 780px; margin: 0; width: 700px; }

/* ---------- find my earbuds ---------- */
.rip { position: absolute; inset: 0; }
.fbud { position: absolute; left: 1130px; top: 380px; width: 150px; height: 220px; transform: translate(-50%, -50%); color: var(--g1); } .fbud .svgw { display: block; } .fbud svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(245, 209, 122, .3)); }
.fbtns { position: absolute; left: 860px; top: 560px; width: 540px; display: flex; gap: 14px; justify-content: center; }
.fb { flex: 1; text-align: center; font-size: 20px; font-weight: 600; padding: 14px 10px; border-radius: 999px; background: var(--card2); border: 1px solid var(--ln); transform: scale(calc(1 - .06 * var(--p, 0))); transition: background .25s, color .25s; }
.fb.sel { background: linear-gradient(170deg, var(--g1), var(--g2)); color: var(--ink); border-color: transparent; box-shadow: 0 0 26px rgba(245, 209, 122, .35); }
.fstop { position: absolute; left: 1020px; top: 640px; width: 220px; text-align: center; font-size: 19px; color: var(--g1); border: 1px solid rgba(245, 209, 122, .4); border-radius: 999px; padding: 8px 12px; opacity: 0; }

/* ---------- fit test ---------- */
.fcards { position: absolute; left: 790px; top: 190px; width: 680px; display: flex; gap: 28px; }
.fc { flex: 1; background: #15110c; border: 1px solid var(--ln); border-radius: 26px; padding: 30px 20px 26px; display: grid; justify-items: center; gap: 10px; transition: border-color .4s, box-shadow .4s; }
.fc[data-res="ok"] { border-color: rgba(245, 209, 122, .55); box-shadow: 0 0 40px -10px rgba(245, 209, 122, .35); }
.fc[data-res="adj"] { border-color: rgba(240, 150, 70, .6); box-shadow: 0 0 40px -10px rgba(240, 150, 70, .3); }
.fc .ring { position: relative; width: 190px; height: 190px; display: grid; place-items: center; color: var(--g1); }
.fc .ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fc .ring > svg circle { fill: none; stroke-width: 7; } .fc .r0 { stroke: rgba(255, 255, 255, .09); } .fc .r1 { stroke: var(--g1); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; }
.fc[data-res="adj"] .r1 { stroke: #f09646; }
.fc .svgw { width: 72px; height: 108px; display: block; } .fc .svgw svg { width: 100%; height: 100%; }
.fc b { font-size: 26px; } .fc .res { min-height: 56px; font-size: 19px; text-align: center; color: var(--mu); display: grid; gap: 6px; justify-items: center; align-content: start; }
.fc .res .ic { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; padding: 6px; background: var(--g1); color: var(--ink); } .fc .res .ic svg { width: 100%; height: 100%; }
.fc[data-res="adj"] .res .ic { background: #f09646; } .fc[data-res="ok"] .res, .fc[data-res="adj"] .res { color: var(--tx); font-weight: 600; }
.fstart { position: absolute; left: 1010px; top: 700px; width: 240px; text-align: center; font-size: 22px; font-weight: 700; padding: 12px 10px; border-radius: 999px; background: linear-gradient(170deg, var(--g1), var(--g2)); color: var(--ink); transform: scale(calc(1 - .05 * var(--p, 0))); }
.fstart.go { background: var(--card2); color: var(--tx); }
.L-fit .fstart { top: 640px; left: 1010px; } .L-fit .tip { top: 715px; }

/* ---------- controls, captions ---------- */
.dm-ctl { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.dm-ctl button { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; transition: background .2s, border-color .2s; }
.dm-ctl button:hover { background: var(--surface-2); }
.dm-ctl button svg { width: 20px; height: 20px; flex: none; }
.dm-play { width: 44px; padding: 0 !important; justify-content: center; }
.dm-snd[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); color: var(--gold); }
.dm-dots { display: flex; gap: 2px; margin-left: auto; }
.dm-dots button { min-height: 44px; width: 28px; padding: 0; justify-content: center; background: transparent; border: 0; }
.dm-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent); transition: background .25s, transform .25s; }
.dm-dots .on i { background: var(--gold); transform: scale(1.35); border-color: var(--gold); }
.dm-time { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.dm-cap { display: none; margin-top: var(--s-2); color: var(--muted); } .dm-cap strong { color: var(--text); }
.dm-note { margin-top: var(--s-2); }

@media (max-width: 720px) {
  .titles { display: none; }
  .dm-cap { display: block; min-height: 4.5em; }
  .dm-stage { border-radius: 16px; }
  .dm-snd span { display: none; }
  .dm-dots { margin-left: 0; }
  .dm-time { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .bg i { display: none; } }