/* Opt-in presentation layer. Classic is the unchanged styles.css underneath. */
html[data-ui=track]{--ink:#102238;--muted:#556477;--paper:#f4f6f9;--line:#dce3eb;--blue:#1658eb;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
html[data-ui=track] body{background:var(--paper);line-height:1.5}
html[data-ui=track] main{max-width:620px;--page-top:24px;--page-side:24px;--page-bottom:40px;padding:calc(env(safe-area-inset-top,0px) + var(--page-top)) max(env(safe-area-inset-right,0px),var(--page-side)) calc(env(safe-area-inset-bottom,0px) + var(--page-bottom)) max(env(safe-area-inset-left,0px),var(--page-side))}
html[data-ui=track] h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;font-size:clamp(2.5rem,9vw,3.6rem)}
html[data-ui=track] h2,html[data-ui=track] h3{letter-spacing:-.025em;line-height:1.3}
html[data-ui=track] .helper{font-size:.875rem;line-height:1.6}
html[data-ui=track] :is(button,input,select,textarea){border-radius:10px}
html[data-ui=track] :is(input,select,textarea){border-color:#b8c5d4}
html[data-ui=track] :is(.primary,.start-session,.done-block){background:#1658eb;box-shadow:0 4px 12px #1658eb19;font-weight:650}
html[data-ui=track] :is(.primary,.start-session,.done-block):hover{background:#1045bd}
html[data-ui=track] :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #578bff;outline-offset:4px}
html[data-ui=track] .home-header{margin:0 0 24px;padding:18px 20px;background:#092139;color:#fff;border-radius:18px;min-height:104px;background-image:repeating-linear-gradient(115deg,transparent 0,transparent 46px,#3e6aa52b 47px,transparent 48px);background-position:220px 0}
html[data-ui=track] .home-brand{margin:0;gap:14px}
html[data-ui=track] .home-brand img{width:64px;height:64px;background:white;border-radius:50%;padding:3px}
html[data-ui=track] .home-brand>span{font-size:.875rem;letter-spacing:.09em;line-height:1.4}
html[data-ui=track] .home-header .icon-button{background:#ffffff10;color:white;border-color:#ffffff40;flex-shrink:0}
html[data-ui=track] .home-intro h1{font-size:clamp(2.8rem,10vw,3.8rem);margin:0 0 22px}
html[data-ui=track] .home-eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.12em;margin-bottom:12px}
html[data-ui=track] .trial-card{font-size:.875rem;padding:12px 48px 12px 16px;margin-bottom:22px;border-radius:10px;box-shadow:none;background:transparent;border-left:3px solid var(--blue)}
html[data-ui=track] .trial-card-title{font-size:.875rem}
html[data-ui=track] .trial-card-detail{margin-top:4px;font-size:.875rem}
html[data-ui=track] .start-session{min-height:78px;padding:16px 20px;border-radius:12px}
html[data-ui=track] .start-session strong{font-size:1.125rem}
html[data-ui=track] .log-session-home{background:#fff;border:1px solid var(--line);margin:12px 0 8px;padding:16px 20px;gap:14px;border-radius:12px}
html[data-ui=track] .log-session-home strong{font-size:1rem}
html[data-ui=track] .log-session-home small{font-size:.875rem}
html[data-ui=track] .home-shortcuts{gap:12px}
html[data-ui=track] .home-tile{border:0;border-radius:12px;background:#e9eef5;padding:16px;gap:6px}
html[data-ui=track] .home-tile svg{margin-bottom:6px}
html[data-ui=track] .home-tile>span{font-size:.875rem}
html[data-ui=track] .section-heading h2{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em}
html[data-ui=track] .latest{margin-top:28px}
html[data-ui=track] .latest-card{padding:22px;border-radius:14px;border-color:var(--line);box-shadow:0 6px 20px #132d4610;gap:8px}
html[data-ui=track] .latest-card strong{font-size:1.375rem;font-weight:750;letter-spacing:-.025em}
html[data-ui=track] .latest-card .small-label{font-size:.875rem;letter-spacing:.02em}
html[data-ui=track] .summary-link{padding-top:12px;border-top:1px solid var(--line);margin-top:8px;font-weight:600}
html[data-ui=track] .resume-card{background:#eaf0fc;border-radius:14px;padding:18px}
html[data-ui=track] .setup-header{margin:0 0 26px;padding:12px 16px;background:#092139;color:#fff;border-radius:14px;min-height:82px}
html[data-ui=track] .setup-header>span{font-size:.8125rem;letter-spacing:.07em}
html[data-ui=track] .setup-header img{background:white;border-radius:50%;padding:2px;flex-shrink:0}
html[data-ui=track] .setup-header :is(button,.summary-back){color:#fff;background:transparent;border-color:#ffffff45;flex-shrink:0;border-radius:50%}
html[data-ui=track] :is(.library-title,.summary-screen .summary-title,#setup-title){font-size:clamp(2.25rem,8vw,3.2rem)!important;letter-spacing:.005em}
html[data-ui=track] .summary-name{font-weight:700;font-size:1.35rem;letter-spacing:-.025em}
html[data-ui=track] .summary-hero{background:#092139;border-radius:16px;padding:24px;color:white;background-image:repeating-linear-gradient(115deg,transparent 0,transparent 74px,#3e6aa52b 75px,transparent 76px)}
html[data-ui=track] .summary-hero>strong{font-family:Impact,'Arial Narrow',sans-serif;font-size:3.5rem;letter-spacing:.02em}
html[data-ui=track] .summary-hero>span{font-size:.875rem;letter-spacing:.1em}
html[data-ui=track] .summary-metrics{padding:22px 0;gap:18px}
html[data-ui=track] .summary-metrics strong{font-size:1.65rem}
html[data-ui=track] :is(.summary-block,.training-block){border-radius:12px;overflow:hidden;border-color:var(--line)}
html[data-ui=track] :is(.summary-block>summary,.training-block>summary){padding:18px;min-height:76px}
html[data-ui=track] .block-number{background:#edf2fd;min-width:32px;padding:6px;border-radius:6px;text-align:center}
html[data-ui=track] .library-card{border-radius:14px;border-color:var(--line);box-shadow:0 4px 16px #132d4608;margin:18px 0}
html[data-ui=track] .library-open{padding:22px}
html[data-ui=track] .library-open h2{font-size:1.35rem}
html[data-ui=track] .library-open p{font-size:.875rem}
html[data-ui=track] .library-actions{background:#f8faff;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-ui=track] .library-actions button{font-size:.875rem;padding:12px 6px;border-radius:0;min-width:0}
html[data-ui=track] .library-actions .library-delete{color:#6a5360}
html[data-ui=track] .settings-section{padding:24px 0}
html[data-ui=track] .settings-section h2{font-size:1.2rem}
html[data-ui=track] .account-status{background:white;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:14px;padding:20px;font-size:1rem;margin:0 0 24px;box-shadow:0 4px 16px #132d4608}
html[data-ui=track] .account-status>strong{font-size:1.125rem}
html[data-ui=track] .account-status :is(.helper,.small-label){font-size:.875rem}
html[data-ui=track] #billing-controls{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
html[data-ui=track] .access{padding-top:12px}
html[data-ui=track] .access-logo{width:96px;height:96px;margin:0 0 20px}
html[data-ui=track] .access h1{font-size:clamp(3rem,12vw,4.5rem)}
html[data-ui=track] .home-bottom{padding-top:28px}
@media(max-width:380px){html[data-ui=track] main{--page-top:16px;--page-side:16px;--page-bottom:32px}html[data-ui=track] .home-header{padding:16px 12px;gap:8px}html[data-ui=track] .home-brand{gap:10px}html[data-ui=track] .setup-header{padding:10px;gap:8px}html[data-ui=track] .setup-header>span{font-size:.75rem}html[data-ui=track] .library-actions{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-ui=track] .library-actions button:nth-child(n+3){border-top:1px solid var(--line)}}
@media(min-width:800px){html[data-ui=track] main{--page-top:36px;--page-bottom:60px}html[data-ui=track] .home-intro h1{font-size:3.8rem}}
@media print{html[data-ui=track] body{background:white}html[data-ui=track] .setup-header{background:white;color:#102238}}

/* Focus is optional: Previous layout retains the pre-Focus live screen. */
html[data-ui=track] .live-focus .setup-header{min-height:72px;margin-bottom:22px;padding:10px 14px}
html[data-ui=track] .live-focus .live-topline{font-size:.75rem;letter-spacing:.06em;align-items:center}
html[data-ui=track] .live-focus .live-progress{height:6px;margin:10px 0 20px}
html[data-ui=track] .live-focus .live-block{font-size:.8125rem;margin:0 0 6px}
html[data-ui=track] .live-focus .live-title{font-family:inherit;font-size:clamp(3rem,14vw,4.5rem);font-weight:750;letter-spacing:-.04em;text-transform:none;margin-bottom:4px}
html[data-ui=track] .live-focus .live-title .period{display:none}
html[data-ui=track] .live-focus .live-subtitle{font-size:.875rem;margin-bottom:18px}
html[data-ui=track] .live-focus.is-recovering .live-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-ui=track] .live-focus .recovery-display{background:#092139;color:white;padding:22px 18px;border-radius:16px;margin-bottom:16px;background-image:repeating-linear-gradient(115deg,transparent 0,transparent 90px,#ffffff06 91px,transparent 92px)}
html[data-ui=track] .live-focus .recovery-display>span{color:#c7d7e9;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
html[data-ui=track] .live-focus .recovery-display>strong{font-size:clamp(3.2rem,17vw,5.5rem);font-weight:700;letter-spacing:-.045em;line-height:1.1;margin:10px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html[data-ui=track] .live-focus .recovery-display p{font-size:.875rem;color:#edf3fb}
html[data-ui=track] .live-focus .recovery-display small{color:#bfccda;font-size:.75rem}
html[data-ui=track] .live-focus .primary{min-height:60px;box-shadow:none;font-size:1rem;border-radius:12px}
html[data-ui=track] .live-focus .secondary{background:transparent;box-shadow:none;min-height:48px}
html[data-ui=track] .live-focus #rep-form{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;margin:18px 0 8px}
html[data-ui=track] .live-focus #rep-time{font-size:2.5rem;height:76px;background:#f8faff;margin-top:8px}
html[data-ui=track] .live-focus .live-cue{border-radius:0 8px 8px 0;margin:10px 0;padding:8px 12px}
html[data-ui=track] .live-focus .live-result{padding:18px;background:white;border-color:var(--line);border-radius:14px;margin:20px 0}
html[data-ui=track] .live-focus .live-result>strong{font-size:1.75rem;margin-top:4px}
html[data-ui=track] .live-focus .last-rep-details>summary{min-height:44px;padding:12px 0 4px;font-size:.875rem;color:var(--blue);cursor:pointer}
html[data-ui=track] .live-focus .live-details{background:white;border:1px solid var(--line);border-radius:12px;padding:0 16px;margin-top:14px}
html[data-ui=track] .live-focus .live-details>summary{padding:16px 0;font-weight:600}
html[data-ui=track] .live-focus .live-save{font-size:.75rem}
@media(prefers-reduced-motion:reduce){html[data-ui=track] .live-focus *{scroll-behavior:auto}}
/* Subscription panel: concise by default, with readable secondary details. */
html[data-ui=track] .account-status .account-actions{display:flex;flex-wrap:wrap;gap:0 12px}
html[data-ui=track] .account-status .account-actions button{margin:0}
html[data-ui=track] .account-status .billing-test-label{font-size:.8rem;color:var(--muted);margin:0 0 8px}
html[data-ui=track] #billing-controls{margin-top:10px;padding-top:10px}
html[data-ui=track] .subscription-details{margin:4px 0}
html[data-ui=track] .subscription-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.875rem}
html[data-ui=track] .subscription-details summary::before{content:'+'}
html[data-ui=track] .subscription-details[open] summary::before{content:'−'}
html[data-ui=track] .withdrawal-entry{font-size:.875rem;font-weight:400;min-height:44px;margin:0;text-align:left}