/* Minuet — device shell + Walnut skin, ported from the SwiftUI source.
   Geometry from TempoSkinLayout / AppShellLayout; colors from DesignSystem.swift. */
.dev{width:390px;height:844px;border-radius:38px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.45);flex:none}
.dev *{box-sizing:border-box}
.content{position:relative;height:762px;overflow:hidden;padding-top:47px}
.tabbar{height:82px;position:relative;display:flex;padding-bottom:34px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7)),rgba(92,58,30,.9);border-top:.5px solid rgba(201,168,76,.3)}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(245,240,232,.5)}
.tabbar .tb.on{color:#E0C872}
.tabbar .tb svg{width:20px;height:20px;display:block}
.tabbar .tb span{font-family:'DM Sans',sans-serif;font-size:10px;line-height:1}
.tabbar .badge-dot{width:6px;height:6px;border-radius:50%;background:#C44B3F;position:absolute;top:-2px;right:-3px}
.walnut{position:absolute;inset:0;background:linear-gradient(180deg,#C4956A 0%,#A6784E 8%,#8B5E3C 22%,#7A5030 42%,#6B4528 65%,#5C3A1E 85%)}
.grain{position:absolute;inset:0;background:repeating-linear-gradient(92deg,rgba(0,0,0,.06) 0 1px,transparent 1px 9px);pointer-events:none}
.abs{position:absolute;left:0;right:0;display:flex;justify-content:center}
.scrtitle{font-family:'Playfair Display',serif;font-weight:700;font-size:14px;letter-spacing:6px;color:#E0C872;text-shadow:0 1px 4px rgba(232,195,90,.35)}
.status{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:rgba(245,240,232,.85);z-index:9}
.status .dots{display:flex;gap:4px;align-items:center}
.mono{font-family:'JetBrains Mono',monospace}
.pf{font-family:'Playfair Display',serif}
.dm{font-family:'DM Sans',sans-serif}

/* BPM display panel — BPMDisplayView.swift: 200x96 fixed readout, marking nested inside */
.bpmpanel{position:absolute;width:200px;height:96px;border-radius:10px;border:1.5px solid var(--pb,#9B7F30);background:linear-gradient(180deg,#241509,#150C05);display:flex;flex-direction:column;align-items:center;padding:5px 28px}
.bpmn{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:31px;height:33px;line-height:33px;color:var(--pt,#E8C35A);text-shadow:0 0 8px rgba(232,195,90,.55)}
.bpml{font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:2px;height:9px;line-height:9px;color:var(--pb,#9B7F30);white-space:nowrap}
.bpmm{font-family:'Playfair Display',serif;font-style:italic;font-size:13px;height:15px;line-height:15px;margin:1px 0;color:rgba(245,240,232,.82)}
.bpmdiv{height:.5px;width:100%;background:var(--pb,#9B7F30);opacity:.3;margin:3px 0}
.bpmts{height:17px;display:flex;align-items:center;gap:8px;font-family:'Playfair Display',serif;font-size:13px;color:var(--pt,#E8C35A)}
.dots4{display:flex;gap:4px}
.dots4 i{width:5px;height:5px;border-radius:50%;background:var(--pt,#E8C35A);opacity:.35}
.dots4 i.on{opacity:1}

/* Shared traced components — consumed by BOTH Minuet App Screens and V1.1 Design.
   Traced from BeatIndicatorsView / SubdivisionRowView / TempoView controls.
   Keep here, not in a page's inline <style>, so the two documents cannot drift. */
.bgrp{width:13px;display:flex;flex-direction:column;align-items:center}
.bdot{width:13px;height:13px;border-radius:50%;box-sizing:border-box}
.subbtn{width:52px;height:40px;border-radius:10px;border:1.5px solid rgba(201,168,76,.4);background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;color:rgba(224,200,114,.45);font-size:17px}
.subbtn.on{border-color:#C9A84C;background:rgba(201,168,76,.12);color:#E0C872;box-shadow:0 0 10px rgba(201,168,76,.1)}
.gearbtn{width:52px;height:40px;border-radius:10px;border:1.5px solid rgba(201,168,76,.4);background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;color:rgba(224,200,114,.55);font-size:16px}
.stepbtn{width:40px;height:40px;border-radius:12px;border:1.5px solid rgba(201,168,76,.5);background:rgba(0,0,0,.25);color:#E0C872;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.bpmslider{flex:1;height:40px;display:flex;align-items:center;position:relative}
.bpmslider .tk{width:100%;height:4px;border-radius:2px;background:rgba(201,168,76,.3);position:relative}
.bpmslider .tk u{position:absolute;left:0;top:0;bottom:0;background:#C9A84C;border-radius:2px}
.bpmslider .th{position:absolute;top:9px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#E0C872,#C9A84C);border:2px solid #C9A84C;box-sizing:border-box}
/* Beats drawer — BeatsModalView (traced). Shared by App Screens and V1.1 Design. */
.tsg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tsc{height:46px;border-radius:10px;background:rgba(0,0,0,.2);border:1.5px solid rgba(201,168,76,.4);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:15px;color:rgba(224,200,114,.45)}
.tsc.on{background:rgba(201,168,76,.12);border-color:#C9A84C;color:#E0C872}
.bmlabel{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;color:rgba(201,168,76,.75)}
/* Traced components are border-box everywhere, not only inside .dev — they are also
   presented in annotation cards, where the .dev-scoped rule does not reach. */
.tsc,.subbtn,.gearbtn,.stepbtn,.bdot,.bpmpanel,.notepill{box-sizing:border-box}

/* Ramp state — V1.1. Reallocates the panel's own rows; idle geometry above is untouched.
   Target moves up beside the number (musicians read "96 → 120" as one unit), which frees
   the label row to carry a short, legible caption instead of a 20-character 7.5px string. */
.bpmpanel.ramping{padding:5px 20px}
.bpmnrow{display:flex;align-items:baseline;gap:7px;height:auto}
.bpmnrow .bpmn{height:33px}
.tgt{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;line-height:1;color:var(--pt,#E8C35A);opacity:.75;white-space:nowrap}
.bpmpanel.ramping .bpml{font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.5px;height:11px;line-height:11px;color:var(--pt,#E8C35A)}
.bpmpanel.ramping .bpmm{margin:0}
.bpmpanel.ramping .bpmnrow,.bpmpanel.ramping .bpml,.bpmpanel.ramping .bpmm,.bpmpanel.ramping .bpmts{flex:none}
.bpmpanel.ramping .bpmdiv{flex:none;height:4px;border-radius:2px;margin:1px 0;opacity:1;background:rgba(155,127,48,.35);position:relative;width:100%}
.bpmpanel.ramping .bpmdiv i{position:absolute;left:0;top:0;bottom:0;background:var(--pt,#E8C35A);border-radius:2px}

/* PROPOSAL — 108pt panel (+12 over the traced 96). Ramp state only.
   Drops the time-signature row (duplicated by the beat dots directly above the panel)
   and spends the reclaimed height on the number and a tempo TRACK: start at the left,
   target at the right, a marker at current — the pendulum's centre-scale vocabulary,
   horizontal. Budget: 96 inner (108 less 6+6 padding) = 40 + 12 + 15 + 18 (track incl.
   margins) = 85, 11px slack. Every row is flex:none too — slack AND nothing shrinkable,
   because frame 15 proved either one alone is not enough. No text under 9px. */
.bpmpanel.tall{height:108px;padding:6px 18px}
.bpmpanel.tall .bpmn{font-size:38px;height:40px;line-height:40px}
.bpmpanel.tall .tgt{font-size:22px;line-height:1;opacity:.75}
.bpmpanel.tall .bpml{font-size:10.5px;letter-spacing:1.4px;height:12px;line-height:12px}
.bpmpanel.tall .bpmm{margin:0}
.track{flex:none;width:100%;height:14px;position:relative;margin:2px 0}
.bpmpanel.tall .bpmnrow,.bpmpanel.tall .bpml,.bpmpanel.tall .bpmm{flex:none}
.track u{position:absolute;left:0;right:0;top:6px;height:3px;border-radius:1.5px;background:rgba(155,127,48,.4)}
.track u b{position:absolute;left:0;top:0;bottom:0;border-radius:1.5px;background:var(--pt,#E8C35A);opacity:.55}
.track s{position:absolute;top:2px;width:1.5px;height:11px;border-radius:1px;background:rgba(155,127,48,.75);text-decoration:none}
.track s.a{left:0}.track s.b{right:0}
.track em{position:absolute;top:0;width:5px;height:15px;border-radius:2.5px;background:var(--pt,#E8C35A);box-shadow:0 0 7px rgba(232,195,90,.75);transform:translateX(-2.5px)}

/* FRESH PROPOSAL — panel interior redrawn from the constraints, not iterated.
   Two zones instead of five stacked rows: the panel is a 2.08:1 LANDSCAPE box that was
   being used as a portrait stack, starving height while ~60% of the width sat empty.
   Fits the 200×96 floor AND the tightest usable width across skins (Parisian, ~146pt).
   Budget: 44 + 4 + 14 = 62 of 76 inner (96 less the 2+2 border and 8+8 padding) — 14pt
   slack. Every row flex:none. */
.fp{position:relative;width:200px;height:96px;box-sizing:border-box;border-radius:10px;border:2px solid var(--pb,#9B7F30);background:linear-gradient(180deg,#241509,#150C05);box-shadow:inset 0 2px 7px rgba(0,0,0,.55);padding:8px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.fp-a{flex:none;display:flex;align-items:baseline;justify-content:center}
.fp-n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:44px;line-height:1;color:var(--pt,#E8C35A);text-shadow:0 0 9px rgba(232,195,90,.5);font-variant-numeric:tabular-nums}
.fp-ts{position:absolute;top:9px;right:13px;font-family:'Playfair Display',serif;font-size:15px;line-height:1;color:var(--pt,#E8C35A);opacity:.92;white-space:nowrap}
.fp-b{flex:none;height:14px;line-height:14px;text-align:center;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.1px;white-space:nowrap;color:rgba(245,240,232,.8)}
.fp-b.fp-mk{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:13px;letter-spacing:0;color:rgba(245,240,232,.9)}
.fp-b.on{color:var(--pt,#E8C35A)}
.fpcap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:1.3px;color:#D4A030;margin:8px 0 0}
.fpsub{font-family:'DM Sans',sans-serif;font-size:11px;line-height:1.5;color:rgba(245,240,232,.72);margin:3px 0 0}

/* Composition adjustments — frame 18. Not panel changes: screen-level quieting so the
   44pt numeral can be the bottom half's single anchor instead of its third glow. */
.stepbtn.quiet,.subbtn.quiet,.gearbtn.quiet{border-color:transparent;background:transparent;color:#C9A84C}
.subbtn.on.quiet{border-color:transparent;background:rgba(201,168,76,.16);box-shadow:none;color:#E8C35A}
.grpline{position:absolute;left:64px;right:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.22),transparent)}

/* Tune composition — frame 19. The note row absorbs the drone control, so the screen's
   loudest object is its real control rather than a secondary feature's toggle. */
.notepill.big{flex:1;height:58px;flex-direction:column;gap:5px;font-size:19px;font-weight:500;border-radius:14px;border:1px solid rgba(155,127,48,.55);background:linear-gradient(180deg,#241509,#150C05);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);color:#E0C872}
.notepill.big.sounding{border:1.5px solid #C9A84C;background:linear-gradient(180deg,#2B1A0B,#180E06);color:#E8C35A;box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 12px rgba(201,168,76,.3)}
.np-note{display:block;line-height:1}
.np-dot{width:6px;height:6px;border-radius:50%;background:#E8C35A;box-shadow:0 0 7px rgba(232,195,90,.9)}
.notepill.big .wave{gap:2px}
.notepill.big .wave i{width:2px;background:rgba(232,195,90,.8)}
.dronehd{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:2.2px;color:#E0C872}

/* Tune, corrected — frame 19. The note row is the TUNER'S MODE control (Auto = chromatic,
   or tune to a named concert pitch), not a reference-tone picker. It gets the prominence.
   The drone is a separate, secondary toggle bound to whatever mode is selected. */
.modecell{flex:1;height:56px;display:flex;align-items:center;justify-content:center;border-radius:13px;border:1px solid rgba(155,127,48,.55);background:linear-gradient(180deg,#241509,#150C05);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);color:#E0C872;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:500}
.modecell .np-note{font-size:19px}
.modecell.on{border:1.5px solid #C9A84C;background:linear-gradient(180deg,#2B1A0B,#180E06);color:#E8C35A;box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 12px rgba(201,168,76,.3)}
.dronestrip{flex:1;height:46px;display:flex;align-items:center;gap:11px;padding:0 15px;border-radius:12px;border:1px solid rgba(155,127,48,.45);background:rgba(0,0,0,.22);color:#E0C872}
.dronestrip.on{border-color:#C9A84C;background:rgba(201,168,76,.1)}
.dsq{width:26px;height:26px;flex:none;border-radius:8px;border:1.5px solid rgba(201,168,76,.7);display:flex;align-items:center;justify-content:center;font-size:9px}
.dst{flex:1;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500}
.concap{font-family:'DM Sans',sans-serif;font-size:14px;color:#F5F0E8}
.lockghost{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;color:#D4A030;opacity:.16}
.reflbl{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;color:rgba(224,200,114,.75)}
.droneblk{flex:1;height:80px;display:flex;align-items:center;gap:12px;padding:0 11px;border-radius:12px;border:1.5px solid #C9A84C;background:rgba(201,168,76,.1)}
.droneblk .dsq{width:40px;height:40px;border-radius:10px;font-size:11px}
.droneblk .wave{flex:1;height:60px;gap:4px;align-items:center}
.droneblk .wave i{width:3px;background:rgba(232,195,90,.85)}
.fsec{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:#E0C872;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(224,200,114,.22)}
.fgal{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.fshot{flex:none;width:390px}
.modecell.c4{font-size:16px}.modecell.c4 .np-note{font-size:18px}
.modecell.c5{font-size:14px}.modecell.c5 .np-note{font-size:16px}
.chrome-dk{background:#121009}
.chrome-dk .scrtitle{color:#E0C872}
/* Settings — traced from CustomView.swift (chrome dark tokens). */
.ssub{position:absolute;top:96px;left:0;right:0;display:flex}
.ssub span{flex:1;text-align:center;font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(245,240,232,.62);padding:10px 3px;position:relative}
.ssub span.on{font-weight:600;color:#E0C872}
.ssub span.on::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:28px;height:2px;border-radius:1px;background:#E0C872}
.csubline{position:absolute;top:139px;left:0;right:0;height:.5px;background:rgba(224,200,114,.22)}
.sscroll{position:absolute;top:160px;left:0;right:0;display:flex;flex-direction:column;gap:22px}
.sgroup{padding:0 20px}
.sghdr{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;letter-spacing:2px;color:#E0C872;padding-left:4px;margin-bottom:6px}
.sgbody{background:var(--surf);border-radius:12px;border:1px solid var(--line);overflow:hidden}
.srow{display:flex;align-items:center;gap:8px;padding:12px 14px}
.stx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stx b{font-family:'DM Sans',sans-serif;font-weight:400;font-size:13px;color:var(--ink)}
.stx b.d{color:var(--ink2)}
.stx span{font-family:'DM Sans',sans-serif;font-size:10px;color:var(--ink3)}
.stx em{font-family:'DM Sans',sans-serif;font-style:normal;font-size:10px;color:#E0C872}
.schev{font-size:13px;color:#E0C872}
.sw{width:44px;height:26px;border-radius:13px;background:#E0C872;flex:none;display:flex;align-items:center;justify-content:flex-end;padding:0 3px}
.sw i{width:20px;height:20px;border-radius:50%;background:#121009;display:block}
.rdiv{height:.5px;background:rgba(224,200,114,.12);margin:0 14px}
.vrow{display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.vtop{display:flex;align-items:center}
.vl{flex:1;font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(245,240,232,.62)}
.vp{font-family:'JetBrains Mono',monospace;font-size:10px;color:#E0C872}
.vbot{display:flex;align-items:center;gap:8px}
.vspk{font-size:9px;color:#E0C872;flex:none}
.chrome-light .sghdr{color:var(--accink)}.chrome-light .srow .stx em{color:var(--accink)}.chrome-light .schev{color:var(--ink3)}.chrome-light .rdiv{background:var(--line)}.chrome-light .storhd+.rdiv{margin:0}
.chrome-light .vl{color:var(--ink2)}.chrome-light .vp{color:var(--accink)}.chrome-light .vspk{color:var(--ink3)}.chrome-light .vtrack{background:rgba(58,36,18,.16)}.chrome-light .vtrack u,.chrome-light .vtrack b{background:var(--accink)}
.vtrack{flex:1;height:3px;border-radius:1.5px;background:rgba(224,200,114,.25);position:relative}
.vtrack u{position:absolute;left:0;top:0;bottom:0;background:#E0C872;border-radius:1.5px}
.vtrack b{position:absolute;top:-6.5px;width:16px;height:16px;border-radius:50%;background:#E0C872}
.arow{display:flex;align-items:center;min-height:47px;padding:9px 14px}
.al{flex:1;font-family:'DM Sans',sans-serif;font-weight:400;font-size:13px;color:var(--ink)}
.acaps{display:flex;gap:4px}
.acap{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink2);padding:6px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.acap.on{font-weight:600;color:var(--accink);background:var(--accsoft);border-color:var(--acc)}
.rq{opacity:.6;font-weight:500}
/* Frame 20 — stand-in for image-backed skin art (Neon/Pumpkin class), not real skin art. */
.wrow{display:flex;gap:16px}
.wtile{flex:1}
.wsh{position:absolute;left:10px;right:10px;top:26px;height:74px;border-radius:60px;background:rgba(0,0,0,.24);filter:blur(26px)}
.wsh.hard{filter:none;background:rgba(0,0,0,.35)}
.wsh.strong{background:rgba(0,0,0,.45)}
.wcrop{position:relative;width:390px;height:200px;border-radius:14px;overflow:hidden}
.wsh{position:absolute;left:18px;right:18px;top:0;height:200px;border-radius:16px;background:rgba(0,0,0,.24);filter:blur(26px)}
.realart{position:absolute;inset:0;background:url("assets/skin-comet-shore-bg.png") 0 -556px/390px 762px no-repeat}
.wcrop.shadowed .subbtn,.wcrop.shadowed .gearbtn,.wcrop.shadowed .stepbtn{text-shadow:0 1px 1px rgba(0,0,0,.55)}
.wcrop.inked .subbtn.quiet,.wcrop.inked .gearbtn.quiet,.wcrop.inked .stepbtn.quiet{color:#2A1608;text-shadow:0 1px 1px rgba(255,255,255,.3)}
.wcrop.inked .subbtn.on.quiet{color:#7A3F12;background:rgba(255,255,255,.28)}
.simrow{display:flex;gap:14px}
.simshot{flex:1}
.simshot img{width:100%;display:block;border-radius:10px;border:1px solid rgba(224,200,114,.2)}
.feelstate{font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.5;color:rgba(245,240,232,.62);margin:0;padding:11px 12px;border-radius:10px;border:1px dashed rgba(155,127,48,.4)}
.feelstate b{color:rgba(245,240,232,.85)}
.instab th{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:1.3px;color:#D4A030;text-align:left;padding:0 14px 8px 0;font-weight:400}
.instab td{padding:7px 14px 7px 0}
.instab td:first-child{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:#F5F0E8;white-space:nowrap;width:auto}
.instab td.ic{font-family:'DM Sans',sans-serif;font-size:12px;color:#E0C872;white-space:nowrap}
.instab tr.fam td{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:1.4px;color:rgba(224,200,114,.75);padding-top:16px;border-top:1px solid rgba(224,200,114,.2)}
.modecell.c6{font-size:12px}.modecell.c6 .np-note{font-size:14px}
.cellwrap{display:flex;flex-direction:column;gap:8px;flex:1}
.cellrow{display:flex;gap:8px}
.modecell.c3b{height:52px}.modecell.c3b .np-note{font-size:19px}
.instab td.wc{color:#F5F0E8;font-weight:600}

/* ── V1.2 Practice tab (chrome tokens) ───────────────────────────────── */
.pscroll{flex:1;overflow:hidden;position:relative}
.pfade{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,transparent,var(--bg))}
.psec{font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:2.4px;color:var(--accink);padding:4px 20px 10px}
.psec2{display:flex;align-items:baseline;padding:0 20px 8px}
.psec2 span{flex:1;font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:2.4px;color:var(--accink)}
.psec2 em{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10px;color:var(--ink3)}
.pwk{display:flex;gap:9px;padding:0 22px 6px;align-items:flex-end}
.pwd{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.pwbar{width:100%;height:74px;border-radius:5px;background:var(--line);display:flex;align-items:flex-end;overflow:hidden}
.pwbar i{width:100%;background:var(--acc);border-radius:5px}
.pwd span{font-family:'DM Sans',sans-serif;font-size:10px;color:var(--ink3)}
.pwd.sel .pwbar{outline:1.5px solid var(--acc);outline-offset:2px}
.pwd.sel span{color:var(--accink);font-weight:700}
.ptot{text-align:center;padding:8px 0 12px}
.ptot b{display:block;font-family:'Playfair Display',serif;font-weight:700;font-size:32px;color:var(--ink)}
.ptot span{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2.2px;color:var(--ink3)}
.pstaff{height:17px;margin:10px 20px 14px;background:repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 4px);opacity:.9}
.prow{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line)}
.prow .pi,.swcard .pi{flex:1;min-width:0}
.prow .pi b,.swcard .pi b{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:16px;color:var(--ink)}
.prow .pi span,.swcard .pi span{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--ink3)}
.prow .pm,.swcard .pm{text-align:right;white-space:nowrap}
.prow .pm b,.swcard .pm b{display:block;font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--accink)}
.prow .pm span,.swcard .pm span{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:1.1px;color:var(--ink3)}
.paddrow{margin:16px 20px 0;height:46px;border-radius:var(--rad);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--accink)}
.pquiet{font-family:'Playfair Display',serif;font-style:italic;font-size:12.5px;line-height:1.5;color:var(--ink3);padding:16px 26px 0;text-align:center}
.prow .pm b.none,.swcard .pm b.none{color:var(--ink3)}
/* V1.2 · pieces list + add sheet */
.pwkline{display:flex;align-items:center;margin:2px 20px 10px;padding:8px 13px;border-radius:10px;background:var(--accsoft);border:1px solid var(--line)}
.pwkline span{flex:1;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--accink)}
.pwkline em{font-style:normal;color:var(--accink);font-size:13px}
.psheet{position:absolute;left:0;right:0;bottom:0;height:660px;background:var(--surf);border-radius:20px 20px 0 0;border-top:1px solid var(--line);padding:14px 22px;z-index:5;overflow:hidden}
.psheet .grab{background:var(--line)}
.psheet .sheethd .pf{color:var(--accink)}
.psheet .closex{background:var(--accsoft);color:var(--accink)}
.psheet .hairline{background:var(--line)}
.psheet .bmlabel{color:var(--accink)}
.psheet .tsc{background:var(--bg);border-color:var(--line);color:var(--ink2)}
.psheet .tsc.on{background:var(--accsoft);border-color:var(--acc);color:var(--accink)}
.psheet .brasspill{border-color:var(--acc);background:var(--accsoft);color:var(--accink)}
.psheet .stepbtn{border-color:var(--line);background:var(--bg);color:var(--accink)}
.pfield{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.pfl{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;color:var(--accink)}
.pfv{font-family:'Playfair Display',serif;font-size:18px;color:var(--ink)}
.pfv.ph{color:var(--ink3)}
.ptgt{display:flex;align-items:center;gap:12px}
.ptnum{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:30px;color:var(--accink);min-width:64px;text-align:center}
/* V1.2 · sessions + empty states */
.srow2{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.si2{flex:1;min-width:0}
.si2 b{display:block;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.si2 span{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink3)}
.sd2{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accink)}
.dsess{padding:12px 20px;border-bottom:1px solid var(--line)}
.dsh{display:flex;align-items:baseline;gap:10px}
.dsh b{flex:1;font-family:'Playfair Display',serif;font-weight:600;font-size:16px;color:var(--ink)}
.dsh span{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--ink3)}
.dsr{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accink);margin-top:3px}
.pempty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 34px 0;gap:14px}
.pemi{color:var(--accink)}
.pempty b{font-family:'Playfair Display',serif;font-weight:700;font-size:21px;color:var(--ink)}
.pempty p{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;color:var(--ink2);margin:0}
.pempty .brasspill{border-color:var(--acc);background:var(--accsoft);color:var(--accink);width:100%;margin-top:6px}
.pcrumb{display:inline-flex;align-items:center;gap:9px;height:22px;line-height:16px;padding:2px 12px;border-radius:11px;border:1.5px solid rgba(201,168,76,.4);background:rgba(0,0,0,.4);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;color:#F5F0E8}
.pcrumb em{font-style:normal;font-size:11px;color:rgba(224,200,114,.8)}
.pdays{display:flex;align-items:center;gap:7px;margin:18px 20px 12px;padding:7px 13px;border-radius:10px;background:var(--accsoft);border:1px solid var(--line)}
.pdm{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;color:var(--ink3);border:1px solid var(--line)}
.pdm.on{background:var(--accink);border-color:var(--accink);color:#FDFAF1}
.pdlbl{flex:1;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--accink)}
.pdays .pdm{margin-left:0}
/* V1.2 · swipe actions — row lifts; actions are rounded rects with the label inside */
.swrow{display:flex;align-items:stretch;gap:8px;padding:5px 12px;background:var(--bg)}
.swcard{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:var(--surf);border-radius:12px;box-shadow:0 1px 4px rgba(58,36,18,.12);padding:11px 14px}
.swacts{display:flex;gap:8px;flex:none}
.swa{width:64px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#FDFAF1}
.swa svg{width:20px;height:20px;display:block}
.swa em{font-style:normal;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:#FDFAF1}
.swa.edit{background:var(--accink)}
.swa.del{background:#A63A2E}
.swa.pin{background:#3A2412}
.pinmk{width:11px;height:11px;display:inline-block;vertical-align:baseline;margin-left:7px;color:var(--accink);position:relative;top:1px}
.prow.pinned{background:var(--accsoft)}
.chd{position:relative}
.pdock{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 14px;background:linear-gradient(180deg,rgba(243,236,219,0),var(--bg) 46%)}
.pdockbtn{height:48px;border-radius:14px;border:1.5px solid var(--acc);background:var(--surf);box-shadow:0 2px 12px rgba(58,36,18,.16);display:flex;align-items:center;justify-content:center;gap:9px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--accink)}
.pdplus{font-size:21px;font-weight:300;line-height:1;position:relative;top:-1px}
.csub span.on::after{bottom:0;height:2.5px;width:34px}
.psheet.tall{height:700px}
.ptunit{margin-left:auto;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink3)}
.psheet .gapnote{color:var(--ink2)}
.swcard.prac{flex-direction:column;align-items:stretch;gap:3px}
.ppick{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.ppv{flex:1;font-family:'Playfair Display',serif;font-size:17px;color:var(--ink)}
.ppc{font-size:17px;color:var(--accink)}
@keyframes wrise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.wrise{transform-origin:center bottom;animation:wrise .62s cubic-bezier(.22,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){.wrise{animation:none;transform:none}}
@keyframes mrise{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes mdot{0%,54%,100%{transform:scale(.78);opacity:.72}8%,20%{transform:scale(1.12);opacity:1}30%{transform:scale(.78);opacity:.72}}
.mb{transform-origin:center 88px;animation:mrise .7s cubic-bezier(.22,.9,.3,1) both}
.mb2{animation-delay:.12s}
.md{transform-origin:70.5px var(--cy);animation:mdot 4s ease-in-out .85s infinite}
.md1{--cy:38px}.md2{--cy:62px;animation-delay:1.85s}
@media (prefers-reduced-motion:reduce){.mb,.md{animation:none;transform:none;opacity:1}}
.crumbrow{top:83px}
.pcrumb{padding:2px 11px;font-size:12px;gap:8px;line-height:16px}
.crumbrow.lower{top:544px}
.piecetitle{letter-spacing:.4px;font-size:15px;display:inline-flex;align-items:baseline;gap:9px;text-transform:none}
.piecetitle em{font-style:normal;font-size:11px;opacity:.75;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:-12px -16px -12px -8px}
/* V1.2 · piece picker */
.pkscroll{position:absolute;left:0;right:0;top:104px;bottom:0;overflow:hidden}
.pkrow{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--line)}
.pkrow.on{background:var(--accsoft)}
.pkrow .pi{flex:1;min-width:0}
.pkrow .pi b{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:16px;color:var(--ink)}
.pkrow .pi span{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--ink3)}
.pkck{font-size:15px;color:var(--accink);font-weight:700}
.pkfoot{position:absolute;left:0;right:0;bottom:0;padding:14px 22px 18px;background:linear-gradient(180deg,rgba(253,250,241,0),var(--surf) 40%)}
.pkjust{height:46px;border-radius:12px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--accink)}
.psheet.pick{height:574px}
/* ── V1.3 · tempo history ─────────────────────────────────────────── */
.hchev{flex:none;font-size:17px;color:var(--accink);opacity:.7;margin-left:2px}
.spk{width:90px;height:26px;flex:none}
.hrow{gap:10px}
.hexp{background:var(--accsoft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 20px 14px}
.hexph{display:flex;align-items:baseline;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1px;color:var(--ink2);margin-bottom:4px}
.hexpc{color:var(--accink)}
.hexpb{display:flex;align-items:center;gap:10px;margin-top:8px}
.hbtn{flex:none;height:34px;padding:0 16px;border-radius:10px;border:1.5px solid var(--acc);background:var(--surf);display:flex;align-items:center;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;color:var(--accink)}
.hbtnq{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--ink3)}
.hdelta{flex:none;width:90px;text-align:center;font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:600;color:var(--accink)}
.ptb{display:flex;align-items:center;position:relative}
.pback{height:44px;display:flex;align-items:center;gap:5px;padding:0 12px 0 8px;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--accink)}
.ptb{padding-left:4px}
.pcttl{flex:1;font-size:12px;letter-spacing:3px}
.phdr{padding:10px 20px 2px;text-align:center}
.phn{font-family:'Playfair Display',serif;font-weight:700;font-size:23px;color:var(--ink)}
.phnote{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink3);margin-top:2px}
.phbig{display:flex;align-items:baseline;justify-content:center;gap:11px;margin-top:9px}
.phfrom{font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--ink3)}
.pharr{font-size:17px;color:var(--ink3)}
.phto{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:44px;line-height:1;color:var(--accink)}
.phsub{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:1.6px;color:var(--ink3);margin-top:6px}
.phsub b{color:var(--accink)}
.pchart{padding:2px 18px 0;display:flex;flex-direction:column;align-items:center}
.plegend{display:flex;align-items:center;gap:7px;margin-top:5px;font-family:'DM Sans',sans-serif;font-size:10px;color:var(--ink3)}
/* every data line on paper — one block, so they cannot drift */
.spk polyline{stroke:var(--accink);opacity:.7}
.bandg{stroke:var(--accink);opacity:.7}
.lgb{width:7px;height:15px;border-radius:3.5px;background:var(--accink);opacity:.7;flex:none}
.lgl{width:15px;height:2.6px;border-radius:1.3px;background:var(--accink);flex:none;margin-left:8px}
.pcta{padding:14px 20px 14px}
.pslot{margin:14px 20px 0;height:44px;border-radius:12px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.6px;color:var(--ink3)}
.pteach{font-family:'Playfair Display',serif;font-style:italic;font-size:12.5px;line-height:1.4;color:var(--ink2);text-align:center;margin:6px 8px 0}
.phdist{font-family:'Playfair Display',serif;font-style:italic;font-size:12.5px;color:var(--ink2);margin:7px 0 0}
.metb{color:var(--accink)}
.tgtnew{margin:16px 20px 0;padding:16px;border-radius:12px;border:1px solid var(--acc);background:var(--accsoft);text-align:center}
.tgtq{font-family:'Playfair Display',serif;font-size:15px;line-height:1.35;color:var(--ink);margin:0 0 16px;text-align:center}
.tgtrow{display:flex;gap:8px}
.tgtopt{flex:1;height:44px;border-radius:9px;border:1.5px solid var(--acc);background:var(--surf);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accink)}
.tgtopt.alt{font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;border-style:dashed}
.tgtskip{height:44px;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink2);margin:16px 0 0}
.tgtopt.prim{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;background:var(--accsoft)}
.tgtopt.prim2{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600}
.tgtopt.later{flex:0 0 68px;border-style:none;background:none;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink3)}
/* V1.3 · Recital Card — 1080×1920 portrait, Manuscript only (never skinned) */
.rcard{width:252px;height:448px;box-sizing:border-box;background:#F3ECDB;border:1px solid rgba(58,36,18,.16);border-radius:10px;padding:26px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.rcpn{font-family:'Playfair Display',serif;font-weight:700;font-size:21px;line-height:1.2;color:#3A2412}
.rcnote{font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(58,36,18,.68);margin-top:3px}
.rcbig{display:flex;align-items:baseline;gap:12px;margin-top:64px}
.rcf{font-family:'JetBrains Mono',monospace;font-size:32px;color:rgba(58,36,18,.68)}
.rca{font-size:15px;color:rgba(58,36,18,.68)}
.rct{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:58px;line-height:1;color:#6E5518}
.rcrange{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;color:rgba(58,36,18,.68);margin-top:8px}
.rcchart{margin-top:24px}
.rcline{font-family:'Playfair Display',serif;font-style:italic;font-size:13.5px;line-height:1.5;color:#3A2412;margin-top:56px}
.rcdays{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:1.4px;color:rgba(58,36,18,.68);margin-top:12px}
.rcfoot{display:flex;align-items:center;gap:6px;margin-top:auto;color:#6E5518}
.rclock{display:block}
.rcwrap{display:flex;justify-content:center;margin-top:16px}
.rcsolo{display:flex;justify-content:center}
.rcshare{display:flex;gap:8px;margin-top:20px}
.rcopt{flex:1;height:44px;border-radius:10px;border:1.5px solid var(--acc);background:var(--surf);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;color:var(--accink)}
.rcopt.on{background:var(--accsoft)}
.rcsolo.col{flex-direction:column;align-items:center;gap:10px}
.rcmsg{width:252px;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid rgba(58,36,18,.16);background:#FDFAF1;font-family:'DM Sans',sans-serif;font-size:11.5px;line-height:1.4;color:#3A2412;text-align:center}
.psec2.shelf{margin:0 20px 8px;padding-left:0;padding-right:0}
.psec2.shelf em{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accink)}
.prow:has(+ .pstaff){border-bottom:0}
/* V1.4 · recording */
.rechit{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.recbtn{width:36px;height:36px;border-radius:50%;border:2px solid rgba(196,75,63,.75);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);color:#E8837A}
.recbtn.on{background:rgba(196,75,63,.22);border-color:#C44B3F;box-shadow:0 0 14px rgba(196,75,63,.45);color:#FFB4AC}
.recstrip{position:absolute;left:20px;right:20px;top:544px;height:26px;display:flex;align-items:center;gap:9px}
.recdot{width:9px;height:9px;border-radius:50%;background:#C44B3F;box-shadow:0 0 8px rgba(196,75,63,.8);flex:none}
.rectime{font-family:'JetBrains Mono',monospace;font-size:13px;color:#F5F0E8}
.reclbl{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;color:#E88178}
.pcrumb.rec{border-color:#C44B3F;color:#F5F0E8}
/* V1.4 · takes list + then-and-now */
.tkrow{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--line)}
.tkplay{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--acc);display:flex;align-items:center;justify-content:center;color:var(--accink);flex:none}
.tki{flex:1;min-width:0}
.tki b{display:block;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.tki span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3)}
.tkstar{color:var(--accink);display:flex;flex:none}
.tklen{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink3);flex:none}
.tnrow{padding:14px 20px 0}
.tnbtn{display:flex;height:46px;border-radius:12px;border:1.5px solid var(--acc);background:var(--accsoft);align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--accink)}
.tnpanel{margin:14px 20px 0;padding:16px;border-radius:12px;border:1px solid var(--acc);background:var(--accsoft);text-align:center}
.tnhd{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:2.4px;color:var(--accink)}
.tnpair{display:flex;align-items:center;gap:10px;margin-top:14px}
.tnside{flex:1}
.tnside b{color:var(--ink3)}
.tnside span{color:var(--ink3)}
.tnside.on b{color:var(--ink)}
.tnside.on span{color:var(--accink)}
.tnside b{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:15px}
.tnside span{font-family:'JetBrains Mono',monospace;font-size:11px}
.tnvs{font-size:14px;color:var(--ink3);flex:none}
.tnwave{display:flex;align-items:center;justify-content:center;gap:2px;height:26px;margin-top:14px}
.tnwave i{width:2px;border-radius:1px;background:var(--acc);opacity:.55}
.tnbar{display:flex;gap:4px;margin-top:10px}
.tnb{flex:1;height:3px;border-radius:1.5px;background:var(--line)}
.tnb.on{background:var(--accink)}
.tnplay{display:flex;justify-content:center;margin-top:16px}
.tnbig{width:56px;height:56px;border-radius:50%;border:2px solid var(--acc);background:var(--surf);display:flex;align-items:center;justify-content:center;color:var(--accink)}
.tnnote{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink2);margin:12px 0 0}
/* V1.4 · keep sheet + share */
.ksheet{position:absolute;left:0;right:0;bottom:0;height:340px;background:linear-gradient(180deg,#4E2A12,#301508);border-radius:20px 20px 0 0;padding:14px 22px;z-index:5;text-align:center}
.khd{font-family:'Playfair Display',serif;font-weight:700;font-size:21px;color:#F5F0E8;margin-top:10px}
.ksub{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(245,240,232,.7);margin-top:5px}
.kwave{display:flex;align-items:center;justify-content:center;gap:2px;height:30px;margin-top:20px}
.kwave i{width:2px;border-radius:1px;background:rgba(232,195,90,.7)}
.krow{display:flex;gap:10px;margin-top:22px}
.kbtn{flex:1;height:48px;border-radius:12px;border:1.5px solid rgba(201,168,76,.5);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:#E0C872}
.kbtn.prim{background:rgba(201,168,76,.16);border-color:#C9A84C}
.kfoot{font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(245,240,232,.6);margin:14px 0 0}
.tkrow.star{background:var(--accsoft)}
.shpick{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.shopt{padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);text-align:left}
.shopt.on{border-color:var(--acc);background:var(--accsoft)}
.shopt b{display:block;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.shopt span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3)}
.shmsg{margin-top:14px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surf);font-family:'DM Sans',sans-serif;font-size:11.5px;line-height:1.4;color:var(--ink2);text-align:center}
.psheet .kfoot{color:var(--ink3);text-align:center;margin-top:10px}
/* V1.4 · permission + storage */
.kwhy{font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.5;color:rgba(245,240,232,.78);margin:14px 8px 0}
.kwhy b{color:#F5F0E8}
.iosalert{position:absolute;left:44px;right:44px;top:280px;border-radius:14px;background:#F2F1F6;overflow:hidden;z-index:6;text-align:center}
.iosh{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:#111;padding:18px 18px 4px}
.iosb{font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.4;color:#333;padding:0 18px 16px}
.iosr{display:flex;border-top:1px solid rgba(0,0,0,.15)}
.iosr span{flex:1;padding:12px 0;font-family:'DM Sans',sans-serif;font-size:15px;color:#0A7AFF}
.iosr .pr{font-weight:700;border-left:1px solid rgba(0,0,0,.15)}
.recbtn.off{border-color:rgba(245,240,232,.28);color:rgba(245,240,232,.28)}
.stot{text-align:center;padding:16px 0 6px}
.stot b{display:block;font-family:'Playfair Display',serif;font-weight:700;font-size:34px;color:var(--ink)}
.stot span{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:2.2px;color:var(--ink3)}
.kskip{height:44px;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:rgba(245,240,232,.72);margin-top:6px}
.micoff{flex:1;height:44px;border-radius:12px;border:1.5px solid rgba(201,168,76,.5);background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:#E0C872}
.rechit.sat{position:absolute;left:calc(50% + 48px);top:14px}
.fp-rec{position:absolute;top:9px;left:13px;display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#F5F0E8}
.fp-rec .recdot{width:7px;height:7px}
.ptcta{padding:12px 20px 0}
.ptbtn{height:62px;border-radius:14px;border:1.5px solid var(--acc);background:var(--accsoft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.ptbtn b{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:var(--accink)}
.ptbtn span{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink2)}
.loadedtoast{flex:1;height:26px;border-radius:8px;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:#F5F0E8}
.pactions{position:absolute;left:0;right:0;bottom:14px;padding:0;background:linear-gradient(180deg,rgba(243,236,219,0),var(--bg) 34%)}
.pactions .pcta{padding-top:8px}
.pactrow{display:flex;gap:10px;padding:0 20px}
.pactbtn{flex:1;height:48px;border-radius:12px;border:1.5px solid var(--acc);background:var(--surf);box-shadow:0 2px 12px rgba(58,36,18,.16);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--accink)}
.tnplay{display:flex;align-items:center;justify-content:center;gap:18px}
.tnskip{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--acc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:var(--accink)}
.tnskip em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;line-height:1}
.tnbar{position:relative}
.tnthumb{position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--accink);box-shadow:0 1px 4px rgba(58,36,18,.4);transform:translateX(-7px)}
.tntime{display:flex;align-items:center;gap:9px;padding:0 2px}
.tntime>span{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink3);min-width:34px}
.tntime>span:last-child{text-align:right}
.tntime .tnbar{flex:1;margin:0}
.psheet.share{height:378px}
.micpanel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:26px 22px;border-radius:16px;border:1.5px solid rgba(201,168,76,.45);background:rgba(0,0,0,.28)}
.micglyph{color:#E0C872;opacity:.85}
.micpanel b{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;color:#F5F0E8}
.micpanel p{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.5;color:rgba(245,240,232,.82);margin:0}
.micbtn{width:100%;height:46px;border-radius:12px;border:1.5px solid #C9A84C;background:rgba(201,168,76,.16);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:#E8C35A}
.micskip{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:rgba(245,240,232,.7)}
.ppick{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.ppick.on{border:1.5px solid var(--acc);background:var(--accsoft)}
.ppi{flex:1}
.ppi b{display:block;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.ppi span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink3)}
.sgnew{color:var(--ink3);font-weight:400}
.storhd{padding:12px 14px 10px}
.storhd b{display:block;font-family:'Playfair Display',serif;font-weight:700;font-size:26px;color:var(--ink)}
.smet{text-align:right;white-space:nowrap}
.smet b{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accink)}
.smet span{font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:500;letter-spacing:.8px;color:var(--ink3)}
.storhd b{font-size:24px}
.storhd span{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:600;letter-spacing:1.6px;color:var(--ink3)}
.qrow{display:flex;align-items:center;gap:10px;padding:15px 4px;border-bottom:1px solid var(--line)}
.qi{flex:1}
.qi b{display:block;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--ink)}
.qi span{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--ink3)}
.qck{font-size:15px;color:var(--accink)}
.qrow.on .qi b{color:var(--accink)}