body[data-current-screen="compact-practice"] > .app-shell { width:100%; max-width:none; margin:0; padding:0; }
html body label:has(#autoStartTimer),html body label:has(#autoStartMetronomeWithTimer),html body label:has(#autoStartSound),html body label:has([data-zb-pv2-countdown-auto]),html body label:has([data-zb-pv2-countdown-metro]),html body label:has([data-zb-pv2-metronome-auto]),#modalAutoTimerField,#modalMetroWithTimerField,#modalAutoMetronomeField,#addRecordAutoTimerField,#addRecordMetroWithTimerField,#addRecordAutoMetronomeField { display:none!important; }
body[data-current-screen="practice-v2"] .zb-pv2-tool-card label.zb-pv2-tool-check:has([data-zb-pv2-countdown-auto]),body[data-current-screen="practice-v2"] .zb-pv2-tool-card label.zb-pv2-tool-check:has([data-zb-pv2-countdown-metro]),body[data-current-screen="practice-v2"] .zb-pv2-tool-card label.zb-pv2-tool-check:has([data-zb-pv2-metronome-auto]) { display:none!important; }
body[data-current-screen="compact-practice"] > .app-shell > .app-header,
body[data-current-screen="compact-practice"] > .app-shell > .app-header .app-nav,
body[data-current-screen="compact-practice"] > .app-shell > #setupReturnBar,
body[data-current-screen="compact-practice"] .zb-practice-v2-screen,
body[data-current-screen="compact-practice"] .zb-pv2-left-rail,
body[data-current-screen="compact-practice"] .zb-pv2-nav { display:none!important; visibility:hidden!important; pointer-events:none!important; }
.app-nav.compact-standard-nav-suppressed { display:none!important; visibility:hidden!important; pointer-events:none!important; }
.compact-practice-prototype { --cp-cyan:#29c6ff; --cp-green:#18c7a0; width:100%!important; margin:0!important; padding:0!important; max-width:none!important; min-height:100dvh; background:#050d16!important; color:#eef7ff; }
.compact-practice-prototype * { box-sizing:border-box; }
.compact-practice-prototype.is-action-pending [data-compact-action] { cursor:progress; }
.compact-practice-preview-toolbar { min-height:46px; padding:6px 10px; display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; background:#0b1621; border-bottom:1px solid #203344; }
.compact-practice-preview-toolbar>strong { font-size:13px; }
.compact-preview-control { display:grid; gap:2px; color:#8da1b3; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.compact-preview-control>span:last-child { display:flex; gap:4px; }
.compact-practice-preview-toolbar button { min-height:32px; padding:5px 8px; border:1px solid #31485d; border-radius:8px; color:#c9d8e5; background:#122230; font-size:11px; }
.compact-practice-preview-toolbar button[aria-pressed="true"] { color:#fff; border-color:var(--cp-cyan); background:#12374d; }
.compact-practice-lifecycle-status { width:min(calc(100% - 20px),760px); margin:8px auto 0; padding:9px 11px; border:1px solid #31516a; border-radius:9px; background:#102333; color:#b9d8eb; font-size:12px; }
.compact-practice-lifecycle-status[data-state="ready"] { display:none; }
.compact-practice-lifecycle-status[data-state="error"] { border-color:#b45555; background:#35191d; color:#ffd6d6; }
.compact-practice-preview-stage { padding:8px; overflow-x:hidden; display:flex; justify-content:center; }
.compact-practice-display-frame { position:relative; width:312px; min-width:0; margin-inline:auto; }
.compact-practice-surface { --compact-workspace-stage-height:clamp(560px,72dvh,700px); position:absolute; inset:0 auto auto 0; width:390px; max-width:none; transform-origin:top left; border:1px solid #23394b; border-radius:17px; overflow:hidden; background:radial-gradient(circle at 50% 3%,#09283a 0,#06131f 35%,#050d16 100%); box-shadow:0 10px 30px #0007; }
.compact-practice-surface[data-preview-width="360"] { width:360px; }
.compact-practice-surface[data-preview-width="430"] { width:430px; }
.compact-practice-surface[data-preview-width="fluid"] { width:min(calc(100vw - 32px),760px); }
.cp-prototype-header { min-height:40px; padding:4px 8px; display:flex; justify-content:space-between; align-items:center; gap:6px; border-bottom:1px solid #183044; }
.compact-header-brand { display:flex; align-items:baseline; gap:5px; min-width:0; }
.cp-prototype-header strong { font-size:15px; line-height:1; }
.cp-prototype-header span,.cp-prototype-header small { color:#8da1b3; font-size:9px; line-height:1.2; }
.compact-practice-header-context { display:flex; align-items:baseline; justify-content:flex-end; gap:5px; min-width:0; margin-left:auto; max-width:calc(100% - 122px); text-align:right; overflow:hidden; }
.compact-practice-header-context span { color:#d9e9f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-practice-header-context small { flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-practice-header-context [data-compact-session-time] { flex:none; color:#69d8ff; }
.compact-practice-header-context [data-compact-build] { flex:none; max-width:none; color:#a9bfce; overflow:visible; text-overflow:clip; }
.compact-dev-menu-button { min-width:28px; min-height:28px; padding:2px 4px; border:1px solid #28506b; border-radius:7px; background:#102638; color:#7edcff; font-size:9px; letter-spacing:-.08em; }
.cp-prototype-header>.compact-dev-menu-button { flex:0 0 28px; width:28px; }
@media (max-width:430px) {
  .compact-practice-header-context [data-compact-schedule] { display:none; }
  .compact-practice-header-context { max-width:none; }
}
.compact-dev-menu { position:absolute; z-index:9; top:48px; right:7px; width:min(270px,calc(100% - 14px)); padding:9px; border:1px solid #28506b; border-radius:10px; background:#091927f7; box-shadow:0 12px 28px #0008; }
.compact-dev-menu[hidden] { display:none; }
.compact-dev-menu>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.compact-dev-menu>div:first-child strong { font-size:12px; }
.compact-dev-menu>div:first-child button { width:32px; min-height:32px; border:0; background:transparent; color:#b9cedd; font-size:19px; }
.compact-dev-menu>p { margin:5px 0 7px; color:#8fa7b9; font-size:9px; line-height:1.35; }
.compact-practice-main { padding:7px 0 8px; }
.compact-workspace-deck { position:relative; min-height:0; padding:6px 0; display:grid; place-items:center; overflow:hidden; }
.compact-current-card { position:relative; z-index:2; width:calc(100% - 28px); height:var(--compact-workspace-stage-height); min-height:var(--compact-workspace-stage-height); max-height:var(--compact-workspace-stage-height); padding:7px 10px 9px; border:1px solid #0f97d4; border-radius:15px; background:linear-gradient(160deg,#0a2634 0%,#091723 55%,#0a1930 100%); box-shadow:0 0 13px #0a9de733; display:flex; flex-direction:column; overflow:hidden; contain:layout paint; }
.compact-carousel-accessible-controls { position:absolute; z-index:8; top:8px; right:8px; width:1px; height:1px; overflow:hidden; display:flex; align-items:center; gap:4px; opacity:0; }
.compact-carousel-accessible-controls:focus-within { width:auto; height:auto; padding:4px; overflow:visible; border:1px solid #28556f; border-radius:9px; background:#071826f2; opacity:1; }
.compact-carousel-accessible-controls strong { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.compact-carousel-accessible-controls button { min-width:36px; min-height:36px!important; padding:2px 8px!important; border:1px solid #28556f!important; border-radius:7px!important; background:#0c2535!important; color:#8ee4ff!important; font-size:21px!important; line-height:1!important; }
.compact-carousel-accessible-controls button:disabled { opacity:.28; }
.compact-carousel-accessible-controls button:focus-visible,.compact-carousel-dots button:focus-visible,.compact-carousel-viewport:focus-visible { outline:2px solid #61dcff; outline-offset:2px; }
.compact-carousel-viewport { position:relative; flex:1 1 auto; min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; touch-action:pan-x pan-y pinch-zoom; -webkit-overflow-scrolling:touch; border-radius:10px; }
.compact-carousel-viewport::-webkit-scrollbar { display:none; }
.compact-carousel-viewport::before,.compact-carousel-viewport::after { content:""; position:sticky; z-index:4; top:0; bottom:0; width:10px; pointer-events:none; }
.compact-carousel-track { height:100%; min-height:0; display:flex; align-items:stretch; }
.compact-carousel-slide { flex:0 0 100%; width:100%; min-width:0; height:100%; min-height:0; padding:3px 2px; scroll-snap-align:center; scroll-snap-stop:always; overflow:hidden; }
.compact-carousel-slide[aria-hidden="true"] { visibility:visible; }
.compact-workspace-body { width:100%; height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.compact-carousel-dots { flex:0 0 18px; display:flex; align-items:center; justify-content:center; gap:7px; }
.compact-carousel-dots button { width:9px!important; min-width:9px!important; height:9px!important; min-height:9px!important; padding:0!important; border:1px solid #88a9bc!important; border-radius:999px!important; background:#587286!important; box-shadow:0 0 0 1px #06131f!important; }
.compact-carousel-dots button[aria-current="true"] { width:21px!important; background:#58dcff!important; border-color:#c3f5ff!important; box-shadow:0 0 9px #42d8ff70!important; }
.compact-carousel-viewport.is-swipe-active { scroll-snap-type:none; }
[data-compact-stage-body-host],.compact-stage-body { width:100%; height:100%; min-height:0; }
.compact-stage-body { position:relative; overflow:hidden; }
.compact-stage-body>.compact-workspace-body { position:relative; }
.compact-stage-body.is-active .compact-content-viewer-shell { will-change:opacity,transform; transition:opacity .36s ease,transform .36s ease; }
.compact-stage-body.is-active.has-transient-focus .compact-content-viewer-shell { opacity:.12; transform:translateX(-4px); pointer-events:none; }
.compact-transient-focus { position:absolute; z-index:5; inset:24px 3px 3px; width:calc(100% - 6px); min-height:0!important; padding:18px 20px!important; border:1px solid #4dd7d0!important; border-radius:12px!important; background:radial-gradient(circle at 50% 28%,#17524f 0,#0b3339 44%,#071e2d 100%)!important; color:#f0fffd!important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; touch-action:pan-x pan-y pinch-zoom; opacity:0; transform:translate3d(5px,0,0) scale(.995); will-change:opacity,transform; transition:opacity .36s ease,transform .36s ease; box-shadow:inset 0 1px #a7fff028,0 0 22px #1dd6c429!important; }
.compact-transient-focus[hidden] { display:none!important; }
.compact-transient-focus[data-focus-transition-phase="hidden"],
.compact-transient-focus[data-focus-transition-phase="exiting"] { pointer-events:none!important; }
.compact-transient-focus.is-visible { opacity:1; transform:translate3d(0,0,0) scale(1); }
.compact-transient-focus-eyebrow { color:#75f3e5; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.compact-transient-focus strong { max-width:29rem; color:#fff; font-size:clamp(25px,7vw,34px); line-height:1.18; text-wrap:balance; }
.compact-transient-focus>span:not(.compact-transient-focus-eyebrow) { color:#9cece4; font-size:11px; font-weight:750; }
.compact-transient-focus small { color:#b7d9d7; font-size:11px; }
.compact-welcome-body,.compact-completion-body { width:100%; height:100%; min-height:0; padding:8px 10px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.compact-welcome-visual { position:relative; width:min(92%,320px); height:190px; flex:0 0 190px; display:grid; place-items:center; }
.compact-welcome-orbit { position:relative; z-index:2; width:104px; height:104px; display:grid; place-items:center; border:1px solid #36d7ff75; border-radius:50%; background:radial-gradient(circle,#143d55 0,#092232 58%,#061620 100%); box-shadow:0 0 34px #1cc9ff2c,inset 0 0 24px #3cdbff16; animation:compact-welcome-pulse 5s ease-in-out infinite; }
.compact-welcome-orbit strong { color:#e8fbff; font-size:55px; line-height:1; text-shadow:0 0 18px #36d8ff80; }
.compact-welcome-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:#58ddff; box-shadow:0 0 10px #58ddff; }
.compact-welcome-orbit i:nth-of-type(1){ left:-31px; top:46px; }.compact-welcome-orbit i:nth-of-type(2){ right:-39px; top:22px; }.compact-welcome-orbit i:nth-of-type(3){ right:-24px; bottom:-15px; background:#f5bf57; box-shadow:0 0 10px #f5bf57; }
.compact-welcome-fretboard { position:absolute; inset:auto 0 4px; width:100%; height:92px; opacity:.22; }
.compact-welcome-fretboard path { fill:none; stroke:#57d9f5; stroke-width:1; }.compact-welcome-fretboard circle { fill:#f6c65f; }
.compact-welcome-body h1,.compact-completion-body h1 { margin:6px 0!important; font-size:clamp(27px,7.4vw,34px)!important; text-align:center; }
.compact-welcome-copy { margin:2px 0; color:#c8e4ee; font-size:15px; }
.compact-welcome-context { min-height:1.3em; margin:5px 0 0; color:#70d9f5; font-size:11px; font-weight:700; }
.compact-completion-ring { width:112px; height:112px; margin-bottom:12px; display:grid; place-items:center; border:2px solid #44d9ad; border-radius:50%; background:radial-gradient(circle,#154a3d,#0a282c 68%); box-shadow:0 0 32px #35d4aa30,inset 0 0 22px #4ee1b527; }
.compact-completion-ring span { color:#8bf0d0; font-size:54px; line-height:1; }
.compact-completion-body>[data-compact-completion-summary] { max-width:27rem; margin:6px 0; color:#b8d4d6; font-size:14px; line-height:1.4; }
@keyframes compact-welcome-pulse { 0%,100%{ transform:scale(1); box-shadow:0 0 28px #1cc9ff24,inset 0 0 24px #3cdbff16; } 50%{ transform:scale(1.025); box-shadow:0 0 42px #1cc9ff38,inset 0 0 28px #3cdbff20; } }
.compact-shared-practice-footer { flex:0 0 auto; min-width:0; margin-top:7px; padding-top:7px; border-top:1px solid #1d4258; background:linear-gradient(180deg,#07172400,#071724 18%); }
.compact-current-kicker,.compact-current-meta { color:#79d9ff; font-size:9px; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; }
.compact-current-kicker { display:flex; justify-content:space-between; gap:6px; }
.compact-current-kicker span:last-child { color:#b7c4cf; letter-spacing:0; text-transform:none; }
.compact-current-card h1 { flex:none; display:block; margin:9px 0 7px; overflow:visible; font-size:clamp(24px,6.7vw,29px); line-height:1.08; overflow-wrap:anywhere; text-wrap:pretty; }
.compact-content-viewer-shell { position:relative; flex:1 1 auto; min-width:0; min-height:0; overflow:hidden; }
.compact-current-content { position:relative; width:100%; height:100%; min-height:0; max-height:none; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-gutter:stable; padding:8px 20px 8px 9px; border:1px solid #28506a; border-radius:9px; background:#061621; color:#e3edf4; font-size:clamp(18px,4.8vw,20px); line-height:1.45; }
.compact-current-content[hidden] { display:none; }
.compact-current-content>[data-compact-summary] { white-space:pre-wrap; overflow-wrap:anywhere; }
.compact-content-viewer-shell { flex:1 1 auto; width:100%; min-height:0; }
.compact-focus-workspace,.compact-key-workspace { height:100%; padding:9px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.compact-focus-workspace { background:radial-gradient(circle at 50% 30%,#143c3d 0,#0a242d 48%,#081a26 100%); }
.compact-key-workspace { background:radial-gradient(circle at 50% 32%,#2a234b 0,#141c36 48%,#091725 100%); }
.compact-workspace-eyebrow { margin:0; color:#7fe4df; font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.compact-key-workspace .compact-workspace-eyebrow { color:#bea5ff; }
.compact-workspace-heading { margin:0; color:#f2f8fc; font-size:clamp(22px,6.5vw,28px); line-height:1.12; }
.compact-focus-prompt { width:min(100%,310px); margin:0; color:#e9fbf8; font-size:clamp(20px,5.7vw,25px); font-weight:720; line-height:1.3; text-wrap:balance; }
.compact-focus-actions { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.compact-focus-actions button { min-height:44px!important; padding:8px 15px!important; border:1px solid #48cfc4!important; border-radius:10px!important; background:linear-gradient(145deg,#14776f,#0d5659)!important; color:#f2fffd!important; font-size:14px!important; font-weight:780!important; }
.compact-focus-workspace.is-setup .compact-focus-prompt { color:#f1fbff; font-size:clamp(21px,5.8vw,26px); }
.compact-focus-workspace.is-setup .compact-workspace-context { max-width:290px; color:#b9d0d8; }
.compact-workspace-context { margin:0; color:#9db4c3; font-size:13px; line-height:1.42; }
.compact-workspace-status-chip { min-height:25px; padding:4px 9px; border:1px solid #367173; border-radius:999px; background:#0b3035; color:#8fe4df; font-size:11px; }
.compact-key-value { min-width:96px; min-height:96px; display:grid; place-items:center; border:1px solid #826bd1; border-radius:50%; background:linear-gradient(145deg,#352966,#1d2850); color:#f1eaff; font-size:47px; font-weight:850; line-height:1; box-shadow:inset 0 1px #ffffff1c,0 0 18px #7659d42e; }
.compact-key-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:min(100%,300px); }
.compact-key-actions button { min-height:42px!important; padding:5px 7px!important; border:1px solid #6857a6!important; background:#211c45!important; color:#e6ddff!important; font-size:14px!important; }
.compact-key-list { width:min(100%,320px); display:flex; justify-content:center; gap:5px; flex-wrap:wrap; }
.compact-key-list span { min-width:27px; min-height:25px; padding:4px 6px; border:1px solid #3b4665; border-radius:999px; color:#9eabc2; font-size:11px; }
.compact-key-list span.is-current { border-color:#9c7cff; background:#44347b; color:#fff; }
.compact-key-list span.is-completed { border-color:#2ebd91; background:#123d37; color:#9cf2d7; }
.compact-key-progress { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:min(100%,300px); }
.compact-key-progress span { padding:6px 8px; border:1px solid #484c78; border-radius:8px; background:#171b36; color:#c6c9e9; font-size:11px; }
.compact-fretboard-workspace { --compact-fret-cell-width:48px; --compact-string-label-width:34px; position:relative; width:100%; height:100%; min-height:0; padding:5px 3px 3px; display:flex; flex-direction:column; gap:5px; overflow:hidden; background:radial-gradient(circle at 50% 25%,#173943 0,#0a242d 44%,#071923 100%); }
.compact-fretboard-toolbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; }
.compact-fretboard-toolbar>div:first-child { min-width:0; }
.compact-fretboard-toolbar p { margin:0 0 2px; color:#6ee4da; }
.compact-fretboard-toolbar strong { display:block; max-width:100%; overflow:hidden; color:#e9fbf9; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.compact-fretboard-toolbar>div:last-child { display:flex; gap:4px; }
.compact-fretboard-toolbar button,.compact-fretboard-position-controls button,.compact-fretboard-options button { min-height:38px!important; padding:5px 8px!important; border:1px solid #3a8e91!important; border-radius:8px!important; background:#103c42!important; color:#c8fff8!important; font-size:11px!important; }
.compact-fretboard-position-controls { flex:0 0 30px; display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:5px; }
.compact-fretboard-position-controls button { min-height:30px!important; height:30px!important; padding:0!important; font-size:20px!important; line-height:1!important; }
.compact-fretboard-position-controls span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.compact-fretboard-shell { position:relative; flex:1 1 auto; min-width:0; min-height:0; display:flex; overflow:hidden; border:1px solid #2b6d73; border-radius:9px; background:#07181d; }
.compact-fretboard-gutter { flex:0 0 var(--compact-string-label-width); width:var(--compact-string-label-width); min-height:0; display:grid; grid-template-rows:24px repeat(6,minmax(36px,1fr)); z-index:2; background:#0d2a31; }
.compact-fretboard-scroll { position:relative; flex:1 1 auto; min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-color:#3c9296 #091a22; scrollbar-width:thin; background:#07181d; cursor:grab; }
.compact-fretboard-scroll:active { cursor:grabbing; }
.compact-fretboard-scroll:focus-visible { outline:2px solid #74e9df; outline-offset:1px; }
.compact-fretboard-board { width:calc(var(--compact-fret-count,24) * var(--compact-fret-cell-width)); min-width:100%; height:100%; min-height:252px; display:grid; grid-template-columns:repeat(var(--compact-fret-count,24),var(--compact-fret-cell-width)); grid-template-rows:24px repeat(6,minmax(36px,1fr)); }
.compact-fretboard-corner,.compact-fretboard-fret-label,.compact-fretboard-string-label,.compact-fretboard-cell { min-width:0; min-height:0; display:grid; place-items:center; border-right:1px solid #345159; border-bottom:1px solid #263f46; }
.compact-fretboard-corner,.compact-fretboard-string-label { background:#0d2a31; color:#d5f3f1; font-size:9px; font-weight:800; border-right:1px solid #345159; border-bottom:1px solid #263f46; display:grid; place-items:center; min-width:0; min-height:0; }
.compact-fretboard-fret-label { color:#89abb0; background:#0a2228; font-size:9px; }
.compact-fretboard-cell { position:relative; background:linear-gradient(90deg,#0c252a,#102e33); }
.compact-fretboard-cell::after { content:""; position:absolute; z-index:0; inset:50% 0 auto; height:1px; background:#8a9ca1; opacity:.52; }
.compact-fretboard-cell:nth-child(n) span { position:relative; z-index:1; width:27px; min-width:27px; height:27px; display:grid; place-items:center; border:1px solid #4a9a99; border-radius:50%; background:#174b4d; color:#e9fffc; font-size:9px; font-weight:850; line-height:1; text-align:center; box-shadow:0 1px 4px #0008; }
.compact-fretboard-cell.is-inactive { opacity:.38; }
.compact-fretboard-cell.is-root span { width:30px; height:30px; border:2px solid #fdca6a; background:#8b4d19; color:#fff6d7; box-shadow:0 0 10px #ffc85e70; }
.compact-fretboard-cell.is-chord-tone:not(.is-root) span { border-color:#bba2ff; background:#4e3b7c; color:#f4efff; }
.compact-fretboard-options { position:absolute; z-index:8; inset:2px; width:auto; max-height:none; padding:14px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; border:1px solid #4aa6aa; border-radius:11px; background:linear-gradient(160deg,#0d3038,#071b24 72%); box-shadow:0 12px 24px #000b; }
.compact-fretboard-options[hidden] { display:none!important; }
.compact-fretboard-options>div:first-child { display:grid; gap:3px; margin-bottom:12px; }
.compact-fretboard-options>div:first-child strong { color:#f0fffd; font-size:20px; }
.compact-fretboard-options>div:first-child span { color:#91bec2; font-size:12px; }
.compact-fretboard-options label { display:grid; gap:5px; margin-top:11px; color:#d8eeee; font-size:14px; font-weight:760; }
.compact-fretboard-options select { width:100%; min-height:52px; padding:7px 10px; border:1px solid #4b969a; border-radius:9px; background:#123943; color:#f4fffe; font-size:16px; font-weight:700; }
.compact-fretboard-options-actions { display:grid!important; grid-template-columns:1fr 1fr; gap:8px!important; margin-top:15px!important; }
.compact-fretboard-options-actions button { width:100%; min-height:50px!important; font-size:14px!important; }
.compact-fretboard-options-actions [data-compact-fretboard-options-close] { border-color:#5fd7cf!important; background:#17635f!important; color:#fff!important; }

.compact-practice-surface.is-fretboard-immersive { --compact-workspace-stage-height:100dvh; height:100dvh; min-height:100svh; }
.compact-practice-surface.is-fretboard-immersive { position:fixed; inset:0; width:100vw!important; max-width:none; margin:0; transform:none!important; border-radius:0; }
.compact-practice-surface.is-fretboard-immersive>.cp-prototype-header,
.compact-practice-surface.is-fretboard-immersive .compact-operational-rails,
.compact-practice-surface.is-fretboard-immersive>.compact-bottom-nav,
.compact-practice-surface.is-fretboard-immersive .compact-carousel-accessible-controls,
.compact-practice-surface.is-fretboard-immersive .compact-carousel-dots { display:none!important; }
.compact-practice-surface.is-fretboard-immersive .compact-practice-main { height:100dvh; min-height:100svh; padding:0; overflow:hidden; }
.compact-practice-surface.is-fretboard-immersive .compact-workspace-deck { width:100%; height:100%; min-height:100%; padding:0; }
.compact-practice-surface.is-fretboard-immersive .compact-current-card { width:100%; height:100%; min-height:100%; max-height:100%; padding:calc(5px + env(safe-area-inset-top,0px)) calc(5px + env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) calc(5px + env(safe-area-inset-left,0px)); border:0; border-radius:0; box-shadow:none; }
.compact-practice-surface.is-fretboard-immersive .compact-carousel-slide { padding:0; }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-workspace { padding:4px 2px; padding-left:max(2px,env(safe-area-inset-left,0px)); padding-right:max(2px,env(safe-area-inset-right,0px)); }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-workspace { --compact-fret-cell-width:56px; --compact-string-label-width:40px; }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-shell { flex:1 1 0; min-height:0; }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-gutter { min-height:0; padding-bottom:8px; box-sizing:border-box; grid-template-rows:24px repeat(6,minmax(0,1fr)); }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-board { min-height:0; padding-bottom:8px; box-sizing:border-box; grid-template-rows:24px repeat(6,minmax(0,1fr)); }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-cell:nth-child(n) span { width:30px; min-width:30px; height:30px; font-size:9px; }
.compact-practice-surface.is-fretboard-immersive .compact-fretboard-cell.is-root span { width:32px; height:32px; }
.compact-practice-surface.is-fretboard-immersive .compact-shared-practice-footer { position:relative; z-index:6; margin-top:4px; padding-top:4px; }
.compact-practice-surface.is-fretboard-immersive .compact-action-row [data-compact-action="edit-current-item"],
.compact-practice-surface.is-fretboard-immersive .compact-action-row [data-compact-action="skip"] { display:none; }
.compact-practice-surface.is-fretboard-immersive .compact-action-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Orientation-driven Fretboard mode is a true app-surface presentation.  The
   preview frame, toolbar, timer, and action footer must not constrain the
   usable map; Safari's own browser chrome remains outside the web viewport and
   can only be removed by launching the installed standalone PWA. */
body.compact-fretboard-fullscreen { overflow:hidden!important; }
body.compact-fretboard-fullscreen .compact-practice-preview-toolbar,
body.compact-fretboard-fullscreen .compact-practice-lifecycle-status { display:none!important; }
body.compact-fretboard-fullscreen .compact-practice-preview-stage { position:fixed; z-index:1200; inset:0; width:100vw; height:100dvh; min-height:100svh; padding:0; overflow:hidden; }
body.compact-fretboard-fullscreen .compact-practice-display-frame { position:fixed; inset:0; width:100vw!important; height:100dvh; min-height:100svh; margin:0; }
body.compact-fretboard-fullscreen .compact-practice-surface.is-fretboard-immersive { position:fixed; inset:0; width:100vw!important; height:100dvh; min-height:100svh; max-width:none; transform:none!important; border:0; border-radius:0; }
body.compact-fretboard-fullscreen .compact-practice-surface.is-fretboard-immersive .compact-shared-practice-footer { display:none!important; }
body.compact-fretboard-fullscreen .compact-practice-surface.is-fretboard-immersive .compact-fretboard-workspace { min-height:100%; padding-top:max(4px,env(safe-area-inset-top,0px)); padding-bottom:max(4px,env(safe-area-inset-bottom,0px)); }

@media (max-width:860px) {
  .compact-current-card:has(.compact-fretboard-workspace) { width:100%; padding-inline:2px; }
  .compact-current-card:has(.compact-fretboard-workspace) .compact-carousel-slide { padding-inline:0; }
}
.compact-content-block { position:relative; padding:3px 5px; border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
.compact-content-block+.compact-content-block { margin-top:4px; }
.compact-content-block[data-source-line-start="true"]:not([data-source-block-start="true"]) { margin-top:7px; }
.compact-content-block[data-source-block-start="true"]:not(:first-child) { margin-top:12px; padding-top:12px; border-top:1px solid #173347; }
.compact-content-block[data-content-kind="numbered-entry"],.compact-content-block[data-content-kind="bullet-entry"],.compact-content-block[data-content-kind="list"] { padding-left:3px; color:#e2edf5; }
.compact-content-block[data-content-kind="heading"] { color:#f0f7fc; font-weight:750; }
.compact-content-block.is-reading-position { background:linear-gradient(90deg,#7b541f26,transparent 68%); box-shadow:inset 3px 0 #dfa541; }
.compact-content-block.is-reading-position-adjusted::after { content:"≈"; position:absolute; top:2px; right:4px; color:#e6b85e; font-size:9px; }
.compact-content-block.is-reading-drag-target { background:linear-gradient(90deg,#9d6d263d,#7b541f16 82%,transparent); box-shadow:inset 3px 0 #ffc45b; }
.compact-reading-marker { position:absolute; z-index:5; top:8px; right:-1px; width:24px!important; min-width:24px!important; height:38px; min-height:38px!important; padding:0!important; display:grid; place-items:center; border:1px solid #b47a25!important; border-right:0!important; border-radius:9px 0 0 9px!important; background:linear-gradient(180deg,#e2a844,#9b651d)!important; color:#241707!important; box-shadow:0 2px 7px #0007,inset 0 1px #fff5!important; touch-action:none; user-select:none; -webkit-user-select:none; cursor:ns-resize; }
.compact-reading-marker[hidden] { display:none!important; }
.compact-reading-marker span { font-size:18px; font-weight:900; line-height:1; transform:translateY(-1px); }
.compact-reading-marker.is-neutral { border-color:#657687!important; background:linear-gradient(180deg,#8796a4,#566574)!important; color:#10171d!important; }
.compact-reading-marker.is-dragging { filter:brightness(1.13); box-shadow:0 0 0 3px #f0b64d35,0 3px 9px #0009!important; }
.compact-reading-marker-menu { position:absolute; z-index:7; top:8px; right:25px; width:174px; padding:8px; border:1px solid #a97429; border-radius:9px; background:#21190df5; color:#ffedc5; box-shadow:0 8px 18px #0009; }
.compact-reading-marker-menu[hidden] { display:none; }
.compact-reading-marker-menu p { margin:0 0 7px; font-size:11px; line-height:1.3; }
.compact-reading-marker-menu>div { display:flex; justify-content:flex-end; gap:5px; }
.compact-reading-marker-menu button { width:auto!important; min-width:56px!important; min-height:34px!important; padding:4px 7px!important; border-radius:7px!important; font-size:10px!important; }
.compact-reading-marker-menu [data-compact-reading-clear-confirm] { border-color:#cf7f45!important; background:#632c17!important; color:#fff0df!important; }
.compact-reading-marker-menu [data-compact-reading-clear-cancel] { border-color:#6b5b3c!important; background:#2b251a!important; color:#e9d9b8!important; }
.compact-content-viewer-shell.is-marker-dragging,.compact-content-viewer-shell.is-marker-dragging * { user-select:none!important; -webkit-user-select:none!important; }
.compact-current-meta { flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; color:#9cb1c0; font-size:11px; }
.compact-current-meta>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-current-meta>span:last-child { text-align:right; }
.compact-focus-status-badge { min-height:24px!important; max-width:132px; padding:3px 7px!important; border:1px solid #2b7180!important; border-radius:999px!important; background:#0c2834!important; color:#9ed5e5!important; font-size:10px!important; font-weight:800!important; line-height:1!important; letter-spacing:0!important; text-transform:none!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-focus-status-badge.is-enabled { border-color:#36d9c8!important; background:#0c403f!important; color:#c9fff6!important; }
.compact-focus-status-badge.is-disabled { border-color:#8b7650!important; background:#2d281c!important; color:#f1d39b!important; }
.compact-focus-status-badge[hidden] { display:none!important; }
.compact-item-clock { min-width:104px; min-height:36px; padding:3px 9px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #2487aa; border-radius:9px; background:linear-gradient(180deg,#0b3445,#071f2d); color:#c1f3ff; font:800 clamp(25px,7vw,30px)/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.025em; text-align:center; text-shadow:0 0 12px #35d4ff70; box-shadow:inset 0 1px #a8efff18,0 0 10px #1dc7ff1f; white-space:nowrap; }
.compact-primary-actions,.compact-secondary-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.compact-action-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:6px; }
.compact-action-row button { min-width:0; min-height:44px!important; padding:5px 7px!important; font-size:clamp(16px,4.4vw,18px)!important; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-current-card .compact-action-row button[data-compact-action="start"] { background:linear-gradient(145deg,#1867f4,#1048c8)!important; border-color:#55a2ff!important; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-current-card .compact-action-row button[data-compact-action="done"] { background:linear-gradient(145deg,#0b9b78,#08705d)!important; border-color:#35d5ad!important; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-current-card .compact-action-row button[data-compact-action="skip"],body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-current-card .compact-action-row button[data-compact-action="edit-current-item"] { border-color:#304b61!important; background:#122331!important; color:#aebfcb!important; }
.compact-current-card button { min-height:40px; padding:5px 7px; border:1px solid #286399; border-radius:9px; color:#eef7ff; background:#102b48; font-size:12px; font-weight:700; }
.compact-primary-actions button:first-child { background:linear-gradient(145deg,#1867f4,#1048c8); border-color:#55a2ff; box-shadow:inset 0 1px #ffffff24; }
.compact-primary-actions button:last-child { background:linear-gradient(145deg,#0b9b78,#08705d); border-color:#35d5ad; box-shadow:inset 0 1px #ffffff20; }
.compact-secondary-actions button { border-color:#304b61!important; background:#122331!important; color:#aebfcb!important; font-weight:650!important; }
.compact-current-card button:not(:disabled):active { transform:translateY(1px); filter:brightness(.9); }
.compact-current-card button:disabled { opacity:.3; filter:saturate(.25); box-shadow:none!important; }
.compact-current-card button.is-pending:disabled { opacity:.82; filter:none; }
.compact-current-card.is-welcome { height:var(--compact-workspace-stage-height); min-height:var(--compact-workspace-stage-height); max-height:var(--compact-workspace-stage-height); overflow:hidden; padding-block:11px; }
.compact-current-card.is-welcome h1 { margin-top:7px; }
.compact-current-card.is-welcome .compact-current-content { height:auto; min-height:1.6em; max-height:3.2em; margin-bottom:4px; padding:0; border:0; background:transparent; overflow:hidden; }
.compact-current-card.is-welcome .compact-current-meta,
.compact-current-card.is-welcome .compact-content-controls { display:none!important; }
.compact-current-card.is-welcome .compact-action-row { grid-template-columns:1fr; margin-top:5px; }
.compact-current-card.is-welcome .compact-action-row [data-compact-action="start"] { grid-column:1/-1; min-height:42px!important; }
.compact-current-card.is-session-complete { height:var(--compact-workspace-stage-height); min-height:var(--compact-workspace-stage-height); max-height:var(--compact-workspace-stage-height); }
.compact-current-card.is-session-complete .compact-current-meta { display:none!important; }
.compact-current-card.is-session-complete .compact-current-content { height:auto; max-height:4.3em; }
.compact-current-card.is-session-complete .compact-action-row { grid-template-columns:1fr; }
.compact-current-card.is-session-complete .compact-action-row [data-compact-action="start"] { min-height:48px!important; box-shadow:0 0 12px #176ff04d; }
.compact-neighbor { position:absolute; top:10px; bottom:10px; width:52px; padding:9px 5px; border:1px solid #12699b; border-radius:13px; background:#082338; color:#54baff; text-align:center; display:flex; flex-direction:column; gap:3px; box-shadow:0 0 10px #0079b933; font-size:9px; }
.compact-neighbor-left { left:-34px; }.compact-neighbor-right { right:-34px; }
.compact-neighbor small { margin-top:auto; color:#678397; font-size:7px; text-transform:uppercase; }
.compact-operational-rails { padding:6px 11px 0; display:grid; gap:3px; }
.compact-rail { min-width:0; overflow:hidden; border:1px solid #20384b; border-radius:10px; background:#0d1d2a; }
.compact-rail.is-expanded { border-color:#2b536e; background:#0d2130; }
.compact-rail-header { width:100%; height:42px; min-height:42px; margin:0; padding:4px 8px; display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,auto) 10px; align-items:center; gap:5px; border:0; border-radius:0; background:transparent; color:#eef7ff; text-align:left; touch-action:manipulation; }
.compact-rail-header:focus-visible { outline:2px solid var(--cp-cyan); outline-offset:-2px; }
.compact-rail-header i { color:var(--cp-cyan); font-style:normal; font-size:16px; }
.compact-rail-header strong { min-width:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-rail-header [data-compact-rail-status] { max-width:110px; color:#60d8ff; font-size:10px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-rail-header b { color:#64798a; font-size:10px; transition:transform .16s ease; }
.compact-rail-header[aria-expanded="true"] b { transform:rotate(180deg); }
.compact-rail[data-compact-activity="active"] .compact-rail-header i,
.compact-rail[data-compact-activity="active"] .compact-rail-header [data-compact-rail-status] { color:#5cf0bd; }
.compact-rail-body { min-width:0; padding:2px 10px 10px 40px; border-top:1px solid #20384b; color:#b9c9d6; }
.compact-rail-body[hidden] { display:none; }
.compact-tool-facts { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; }
.compact-tool-facts>div { min-width:0; }
.compact-tool-facts dt { color:#788fa2; font-size:9px; line-height:1.2; text-transform:uppercase; letter-spacing:.05em; }
.compact-tool-facts dd { min-width:0; margin:2px 0 0; color:#e1edf6; font-size:11px; line-height:1.25; overflow-wrap:anywhere; }
.compact-queue-body { padding-left:10px; }
.compact-queue-list { margin:0; padding:0; display:grid; gap:3px; list-style:none; }
.compact-queue-item { min-width:0; padding:6px 7px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:6px; border:1px solid #1c3548; border-radius:7px; background:#0a1823; }
.compact-queue-item.is-current { border-color:#2ac8e5; background:#0b3542; box-shadow:inset 3px 0 #28cee8; }
.compact-queue-item.is-completed { border-color:#286856; background:#102922; opacity:.84; }
.compact-queue-item.is-completed strong { color:#9fd9c5; }
.compact-queue-item.is-skipped { border-color:#715a34; background:#2a2117; opacity:.88; }
.compact-queue-item.is-skipped strong { color:#d8b97f; }
.compact-queue-item>span:first-child { color:#6f8799; font-size:9px; text-align:center; }
.compact-queue-item>div { min-width:0; display:grid; }
.compact-queue-item strong { min-width:0; overflow:hidden; color:#e6f2fa; font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.compact-queue-item small { min-width:0; overflow:hidden; color:#7f95a7; font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.compact-queue-item>em { color:#64ccf4; font-size:9px; font-style:normal; white-space:nowrap; }
.compact-queue-item>[data-compact-queue-select] { min-width:44px; min-height:36px; padding:4px 8px; border:1px solid #2589b5; border-radius:7px; background:#103a51; color:#9fe8ff; font-size:10px; font-weight:750; }
.compact-rail-empty { margin:4px 0 0; color:#8499aa; font-size:11px; }
.compact-note-editor { padding-left:10px; }
.compact-note-editor label { display:block; margin-bottom:6px; color:#d6e3ec; font-size:12px; line-height:1.3; font-weight:700; }
.compact-note-editor textarea { display:block; width:100%; min-width:0; min-height:64px; max-height:170px; resize:vertical; padding:9px; border:1px solid #4d8099; border-radius:7px; background:#06131e; color:#fbfdff; font-family:inherit; font-size:14px; line-height:1.5; caret-color:#fff; }
.compact-note-editor textarea::placeholder { color:#b7c7d2; opacity:1; }
.compact-note-editor textarea:focus { outline:2px solid #167eaa; outline-offset:1px; }
.compact-note-save-row { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.compact-note-editor [data-compact-note-save-status] { color:#c4d2dc; font-size:11px; font-weight:700; }
.compact-note-editor [data-compact-note-save-status][data-state="dirty"] { color:#ffc96b; }
.compact-note-editor [data-compact-note-save-status][data-state="saving"] { color:#79d9ff; }
.compact-note-editor [data-compact-note-save-status][data-state="saved"] { color:#5ce0ae; }
.compact-note-editor [data-compact-note-save-status][data-state="error"] { color:#ff8c8c; }
.compact-note-editor button { min-height:36px; padding:5px 10px; border:1px solid #3b94bc; border-radius:7px; background:#103a55; color:#f1fbff; font-size:12px; font-weight:750; }
.compact-note-editor button:disabled { opacity:.68; color:#c2d0da; }
.compact-speech-input { position:relative; min-width:0; }
.compact-speech-input textarea { padding-right:46px; }
.compact-note-editor .compact-speech-button { position:absolute; z-index:2; top:6px; right:6px; width:38px; min-width:38px; min-height:38px; padding:3px; border-color:#54a8c9; border-radius:50%; background:#16435a; color:#ecfbff; font-size:17px; }
.compact-note-editor .compact-speech-button[data-speech-state="listening"] { border-color:#54d7ff; color:#a7edff; box-shadow:0 0 0 2px #36c9ff30; }
.compact-note-editor .compact-speech-button[data-speech-state="unsupported"] { opacity:.48; }
.compact-speech-status { display:block; min-height:15px; margin:3px 44px 0 2px; color:#7ea1b7; font-size:9px; line-height:1.25; overflow-wrap:anywhere; }
.compact-speech-status:empty { display:none; }
.compact-speech-status[data-state="listening"] { color:#67ddff; }
.compact-speech-status[data-state="error"] { color:#ff9393; }
.compact-countdown-tool,.compact-metronome-tool,.compact-recorder-tool { padding:6px 8px 7px; }
.compact-tool-primary { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.compact-tool-primary output { color:#eaf8ff; font-size:27px; line-height:1; font-weight:750; letter-spacing:.02em; }
.compact-tool-primary>span,.compact-tool-state { color:#67d7ff; font-size:10px; }
.compact-tool-actions { margin-top:5px; display:flex; align-items:center; gap:5px; min-width:0; }
.compact-tool-actions button,.compact-metronome-main button { min-height:42px; min-width:54px; padding:5px 9px; border:1px solid #287ba4; border-radius:8px; background:#103650; color:#e7f7ff; font-size:11px; font-weight:700; }
.compact-tool-actions button:first-child,.compact-metronome-main [data-compact-metronome-toggle] { background:#12628a; border-color:#27aee8; }
.compact-tool-actions button:disabled,.compact-metronome-main button:disabled { opacity:.42; }
.compact-countdown-primary { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; }
.compact-countdown-time { display:flex; align-items:baseline; gap:7px; min-width:0; }
.compact-countdown-time output { color:#eaf8ff; font-size:27px; line-height:1; font-weight:780; letter-spacing:.02em; text-shadow:0 0 10px #29c6ff2e; }
.compact-countdown-time span { color:#78dcff; font-size:10px; font-weight:650; }
.compact-countdown-actions button:first-child { flex:1; border-color:#33cfff; background:linear-gradient(145deg,#078bc1,#09678f); }
.compact-countdown-actions button:last-child { flex:0 0 76px; border-color:#34566a; background:#122a38; color:#b5c8d4; }
.compact-countdown-presets { margin-top:5px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
.compact-countdown-presets button { min-width:0; min-height:34px; padding:3px 2px; border:1px solid #28536a; border-radius:6px; background:#0d2736; color:#b4d5e4; font-size:10px; font-weight:650; }
.compact-countdown-presets button.is-selected { border-color:#32bce9; background:#0d526e; color:#effcff; }
.compact-countdown-custom-editor { margin-top:5px; display:grid; grid-template-columns:minmax(54px,1fr) minmax(54px,1fr) 55px 55px; gap:4px; }
.compact-countdown-custom-editor[hidden] { display:none; }
.compact-countdown-custom-editor label { min-width:0; display:flex; align-items:center; gap:3px; color:#7895a6; font-size:8px; text-transform:uppercase; }
.compact-countdown-custom-editor input { width:100%; min-width:0; min-height:40px; padding:3px; border:1px solid #2c6079; border-radius:6px; background:#071923; color:#e8f8ff; text-align:center; }
.compact-countdown-custom-editor button { min-width:0; min-height:40px; padding:3px; border:1px solid #2c6079; border-radius:6px; background:#10364a; color:#dff7ff; font-size:9px; }
.compact-tool-check { min-height:31px; margin-top:4px; display:flex; align-items:center; gap:6px; color:#98adbd; font-size:10px; }
.compact-tool-check input { width:18px; height:18px; accent-color:#18aadb; }
.compact-metronome-main { display:grid; grid-template-columns:40px minmax(76px,1fr) 40px minmax(66px,.8fr); align-items:center; gap:4px; }
.compact-metronome-main button { min-width:0; padding-inline:5px; font-size:16px; }
.compact-metronome-main .compact-bpm-step { min-height:42px; border-color:#654a9b; background:#21193b; color:#d8c5ff; font-size:22px; touch-action:none; user-select:none; -webkit-user-select:none; }
.compact-metronome-main [data-compact-metronome-toggle] { font-size:11px; }
.compact-metronome-main label { min-width:0; display:grid; justify-items:center; }
.compact-metronome-main input { width:100%; min-height:34px; padding:2px; border:0; background:transparent; color:#edf9ff; text-align:center; font-size:23px; font-weight:750; }
.compact-metronome-main label span { margin-top:-3px; color:#7890a3; font-size:8px; }
.compact-tool-selects { margin-top:5px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:5px; }
.compact-tool-selects label { min-width:0; display:grid; gap:2px; color:#a399bd; font-size:9px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; }
.compact-tool-selects select { width:100%; min-width:0; min-height:36px; padding:3px 20px 3px 5px; border:1px solid #4e3b78; border-radius:7px; background:#17152b; color:#eee7fb; font-size:10px; }
.compact-metronome-tool>.compact-tool-state { display:block; margin-top:5px; text-align:right; }
.compact-recorder-status { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.compact-recorder-status output { color:#eefaff; font-size:22px; font-weight:750; }
.compact-recorder-status span { color:#72e2bc; font-size:11px; font-weight:650; }
.compact-recorder-tool>p { margin:3px 0 0; color:#a0b4c2; font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.compact-recorder-actions { flex-wrap:wrap; }
.compact-recorder-actions button { flex:1 1 54px; }
.compact-rail[data-compact-rail="countdown"] { border-color:#2079a5; background:linear-gradient(145deg,#103a52,#0a2233 72%); box-shadow:inset 3px 0 #1abbe7; }
.compact-rail[data-compact-rail="countdown"].is-expanded { border-color:#269fd2; }
.compact-rail[data-compact-rail="countdown"][data-compact-activity="active"] { box-shadow:inset 2px 0 #23c8ff,0 0 10px #19bffc1f; }
.compact-rail[data-compact-rail="countdown"][data-compact-tool-state="complete"] { border-color:#5b91a8; }
.compact-rail[data-compact-rail="metronome"] { border-color:#6f52ad; background:linear-gradient(145deg,#2a2350,#151b34 72%); box-shadow:inset 3px 0 #8e68ea; }
.compact-rail[data-compact-rail="metronome"].is-expanded { border-color:#8b69df; }
.compact-rail[data-compact-rail="metronome"] .compact-rail-header i,
.compact-rail[data-compact-rail="metronome"] [data-compact-rail-status],
.compact-rail[data-compact-rail="metronome"] .compact-tool-state { color:#b794ff; }
.compact-rail[data-compact-rail="metronome"][data-compact-activity="active"] { box-shadow:inset 2px 0 #9d78ff,0 0 10px #8057df24; }
.compact-rail[data-compact-rail="recorder"] { border-color:#34866a; background:linear-gradient(145deg,#123c31,#0c2227 72%); box-shadow:inset 3px 0 #32bd8f; }
.compact-rail[data-compact-rail="recorder"].is-expanded { border-color:#38a57e; }
.compact-rail[data-compact-rail="recorder"][data-compact-tool-state="recording"] { border-color:#db4c58; box-shadow:inset 2px 0 #ff4658,0 0 10px #ff465824; }
.compact-rail[data-compact-rail="recorder"][data-compact-tool-state="recording"] .compact-recorder-status span { color:#ff7782; }
.compact-rail[data-compact-rail="queue"] { border-color:#23798a; background:linear-gradient(145deg,#103641,#0b222c 72%); box-shadow:inset 3px 0 #22bace; }
.compact-rail[data-compact-rail="queue"].is-expanded { border-color:#2caabd; }
.compact-rail[data-compact-rail="queue"] .compact-rail-header i,
.compact-rail[data-compact-rail="queue"] [data-compact-rail-status] { color:#65e1eb; }
.compact-rail[data-compact-rail="notes"] { border-color:#84632d; background:linear-gradient(145deg,#382b17,#211d18 72%); box-shadow:inset 3px 0 #d69a37; }
.compact-rail[data-compact-rail="notes"].is-expanded { border-color:#b28032; }
.compact-rail[data-compact-rail="notes"] .compact-rail-header i,
.compact-rail[data-compact-rail="notes"] [data-compact-rail-status] { color:#f3bc5c; }
.compact-rail[data-compact-rail="notes"] .compact-note-editor textarea { border-color:#a27635; background:#19150e; }
.compact-rail[data-compact-rail="notes"] .compact-note-editor label { color:#ffe4a9; }
.compact-rail[data-compact-rail="notes"] .compact-note-editor textarea::placeholder { color:#d0b98b; }
.compact-rail[data-compact-rail="notes"] .compact-note-editor .compact-speech-button { border-color:#e3aa49; background:#674615; color:#fff3d6; }
.compact-rail[data-compact-rail="notes"] .compact-note-editor textarea:focus { outline-color:#d39a3b; }
.compact-rail[data-compact-rail="notes"] [data-compact-note-save]:not(:disabled) { border-color:#dda849; background:#704916; color:#fff4d8; }
.compact-rail[data-compact-rail="reminder"] { border-color:#8e5328; background:linear-gradient(145deg,#3a2618,#211a16 72%); box-shadow:inset 3px 0 #df7e32; }
.compact-rail[data-compact-rail="reminder"].is-expanded { border-color:#b86a30; }
.compact-rail[data-compact-rail="reminder"] .compact-rail-header i,
.compact-rail[data-compact-rail="reminder"] [data-compact-rail-status] { color:#ffad61; }
.compact-rail[data-compact-rail="reminder"] .compact-note-editor textarea { border-color:#9b5c31; background:#1a130f; }
.compact-rail[data-compact-rail="reminder"] .compact-note-editor label { color:#ffd8b9; }
.compact-rail[data-compact-rail="reminder"] .compact-note-editor textarea::placeholder { color:#cfa98e; }
.compact-rail[data-compact-rail="reminder"] .compact-note-editor .compact-speech-button { border-color:#e88e4b; background:#713b18; color:#fff0e4; }
.compact-rail[data-compact-rail="reminder"] .compact-note-editor textarea:focus { outline-color:#d87535; }
.compact-rail[data-compact-rail="reminder"] [data-compact-note-save]:not(:disabled) { border-color:#e58b46; background:#743914; color:#fff0e3; }
.compact-link-control { position:relative; display:flex; justify-content:flex-end; min-width:0; }
.compact-link-control>button,.compact-item-scope { min-height:34px; max-width:176px; padding:4px 9px; border:1px solid #2c617c; border-radius:999px; background:#0b2838; color:#77dafb; font-size:10px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-link-popover { position:absolute; z-index:8; right:0; top:33px; width:min(230px,calc(100vw - 52px)); padding:8px; border:1px solid #396e8a; border-radius:9px; background:#091927; box-shadow:0 8px 20px #0008; }
.compact-rail:has(.compact-link-popover:not([hidden])) { position:relative; z-index:7; overflow:visible; }
.compact-link-popover[hidden] { display:none; }
.compact-link-popover label { display:grid; gap:5px; color:#ddecf6; font-size:10px; }
.compact-link-popover select { width:100%; min-height:40px; border:1px solid #31546a; border-radius:7px; background:#0c2130; color:#eef7ff; }
.compact-link-popover small { display:block; margin-top:5px; color:#839bab; font-size:9px; }
.compact-bpm-display { position:relative; display:flex; align-items:baseline; justify-content:center; gap:4px; border-color:#8062c7!important; background:linear-gradient(145deg,#2a204b,#1b1733)!important; }
.compact-bpm-display strong { color:#e1d3ff; font-size:25px; line-height:1; }
.compact-bpm-display span { color:#b09bcf; font-size:9px; font-weight:650; }
.compact-bpm-editor { margin-top:5px; display:grid; grid-template-columns:40px minmax(58px,1fr) 40px 52px 58px; gap:3px; }
.compact-bpm-editor[hidden] { display:none; }
.compact-bpm-editor button,.compact-bpm-editor input { min-width:0; min-height:40px; border:1px solid #5b4494; border-radius:7px; background:#18172d; color:#e8ddff; text-align:center; font-size:11px; }
.compact-bpm-editor input { width:100%; font-size:16px; font-weight:750; }
.compact-bpm-editor [data-compact-bpm-editor-done] { min-height:40px; border-color:#8765dc; background:#4a2d8b; font-weight:700; }
.compact-bpm-editor [data-compact-bpm-editor-cancel] { min-height:40px; border-color:#4e4960; background:#23212d; color:#bbb5c6; }
.compact-metronome-main [data-compact-metronome-toggle] { border-color:#a47cff; background:linear-gradient(145deg,#7449dc,#4f2ca9); color:#fff; }
.compact-beat-indicator { position:absolute; right:5px; top:5px; width:7px; height:7px; border:1px solid #66558e; border-radius:50%; background:#29243b; }
.compact-beat-indicator.is-running { border-color:#bd9cff; background:#9c75ff; box-shadow:0 0 7px #9d76ff80; }
.compact-item-scope { align-self:center; min-height:22px; max-width:54px; border-color:#745c35; background:#292014; color:#f2c46f; }
.compact-recorder-actions [data-compact-tool-action="record-start"]:not(:disabled) { border-color:#ff7180; background:linear-gradient(145deg,#cf3345,#8f2231); color:#fff; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-countdown-actions button:first-child:not(:disabled) { background-image:linear-gradient(145deg,#0aa6dc,#0876a2)!important; border-color:#4bddff!important; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-metronome-main button[data-compact-metronome-toggle]:not(:disabled) { background-image:linear-gradient(145deg,#8053eb,#5630b5)!important; border-color:#b18aff!important; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-metronome-main button.compact-bpm-step:not(:disabled) { background-image:linear-gradient(145deg,#30204f,#211738)!important; border-color:#7657ad!important; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-metronome-main button.compact-bpm-display:not(:disabled) { background-image:linear-gradient(145deg,#34255b,#20183a)!important; border-color:#8d6bd2!important; }
body[data-current-screen="compact-practice"] .compact-practice-prototype .compact-recorder-actions button[data-compact-tool-action="record-start"]:not(:disabled) { background-image:linear-gradient(145deg,#d83b4d,#952331)!important; border-color:#ff7180!important; }
@media(prefers-reduced-motion:reduce){
  .compact-rail-header b,.compact-rail,.compact-dev-menu { transition:none!important; animation:none!important; }
}
.compact-bottom-nav { position:sticky; bottom:0; z-index:4; height:52px; flex:0 0 52px; display:grid; grid-template-columns:repeat(4,1fr); background:#091722f2; border-top:1px solid #20384b; backdrop-filter:blur(8px); }
.compact-bottom-nav button { min-height:44px; border:0; color:#7890a3; background:transparent; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; font-size:9px; }
.compact-bottom-nav button span { font-size:15px; line-height:1; }
.compact-bottom-nav .is-active { color:var(--cp-cyan); }
.compact-trace-actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.compact-trace-actions button { min-height:30px; padding:3px 6px; border:1px solid #28506b; border-radius:7px; background:#102638; color:#7edcff; font-size:8px; }
.compact-trace-actions [data-compact-standard] { grid-column:1/-1; }
.compact-trace-actions small { grid-column:1/-1; color:#76e0b7; text-align:center; }
.compact-trace-dialog { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:10px; background:#020912d9; }
.compact-trace-dialog[hidden] { display:none; }
.compact-trace-dialog-card { width:min(100%,680px); max-height:90%; padding:12px; overflow:hidden; border:1px solid #28506b; border-radius:12px; background:#091927; color:#d5edff; }
.compact-trace-dialog-card h2 { margin:0 0 8px; font-size:15px; }
.compact-practice-trace-output { box-sizing:border-box; width:100%; max-height:58dvh; margin:0; padding:10px; overflow:auto; user-select:text; -webkit-user-select:text; border:1px solid #28506b; border-radius:8px; background:#07131f; color:#d5edff; white-space:pre-wrap; overflow-wrap:anywhere; font:10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
.compact-trace-dialog-card>p { min-height:16px; margin:6px 0; color:#9eb3c5; font-size:10px; }
.compact-trace-dialog-card>div { display:flex; justify-content:flex-end; gap:8px; }
.compact-trace-dialog-card button { min-height:38px; padding:6px 10px; }
@media(max-width:520px), (pointer:coarse){
  html:has(body[data-current-screen="compact-practice"]),
  body[data-current-screen="compact-practice"] { height:100%; overflow:hidden; overscroll-behavior:none; }
  body[data-current-screen="compact-practice"] > .app-shell { height:100dvh; min-height:-webkit-fill-available; overflow:hidden; }
  body[data-current-screen="compact-practice"] .compact-practice-preview-toolbar { display:none; }
  .compact-practice-prototype { height:100dvh; min-height:-webkit-fill-available; overflow:hidden; }
  .compact-practice-preview-stage { height:100%; padding:0; }
  .compact-practice-display-frame { width:100%!important; height:auto!important; }
  .compact-practice-surface { --compact-workspace-stage-height:clamp(560px,calc(100dvh - 128px),700px); position:relative; inset:auto; width:100%!important; height:100dvh; min-height:-webkit-fill-available; transform:none!important; border-width:0; border-radius:0; box-shadow:none; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
  .compact-practice-main { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scroll-padding-bottom:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); scrollbar-width:none; }
  .compact-practice-main::-webkit-scrollbar { display:none; }
  .cp-prototype-header { min-height:calc(40px + env(safe-area-inset-top,0px)); padding-top:calc(4px + env(safe-area-inset-top,0px)); display:grid; grid-template-columns:auto minmax(0,1fr) 28px; }
  .compact-practice-header-context { max-width:none; }
  .compact-practice-header-context>[data-compact-schedule] { display:none; }
  .compact-bottom-nav { position:relative; bottom:auto; height:calc(48px + env(safe-area-inset-bottom,0px)); min-height:calc(48px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); }
  .compact-workspace-deck { height:calc(var(--compact-workspace-stage-height) + 12px); min-height:calc(var(--compact-workspace-stage-height) + 12px); }
  .compact-current-card { width:calc(100% - 28px); }
  .compact-current-card { height:var(--compact-workspace-stage-height); min-height:var(--compact-workspace-stage-height); max-height:var(--compact-workspace-stage-height); }
  .compact-operational-rails { padding-inline:9px; }
}
@media(max-width:370px){
  .compact-practice-surface { --compact-workspace-stage-height:clamp(550px,calc(100dvh - 122px),670px); }
  .compact-current-card { width:calc(100% - 24px); }
  .compact-rail-header { grid-template-columns:20px minmax(0,1fr) minmax(64px,auto) 9px; padding-inline:7px; }
  .compact-rail-header [data-compact-rail-status] { max-width:88px; }
  .compact-rail-body { padding-left:8px; padding-right:8px; }
}
@media(prefers-reduced-motion:reduce){
  .compact-carousel-viewport { scroll-behavior:auto; }
  .compact-welcome-orbit { animation:none; }
  .compact-transient-focus,.compact-transient-focus.is-visible,.compact-stage-body.is-active .compact-content-viewer-shell { transform:none; transition:opacity .01ms linear; }
}