/* Driveway Hoops v2 shell: dark, image-led, athletic. Loaded last; overrides the older light/kid styles.
   Type: Archivo (semi-condensed grotesk) for words, Archivo at its narrowest width for big numerals.
   Tiny letter-spaced caps for labels. Orange for actions, lime and teal for live/tech accents. */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]){
  color-scheme:dark;
  --ink:#ffffff; --ink-soft:#8d8d93; --ink-dim:#5d5d63;
  --ground:#000000; --surface:#161618; --surface-2:#232326; --line:rgba(255,255,255,.09);
  --ball:#ff5a1a; --ball-ink:#ffffff; --ball-soft:#3a1a0c; --cta:#ff5a1a; --cta-dark:#d9440b;
  --court:#1fd1c1; --court-soft:#0d2c2a; --lime:#c6ff3d; --teal:#1fd1c1;
  --good:#3ddc84; --good-soft:#123222; --board:#0b0b0c; --locked:#3a3a3e; --locked-2:#2a2a2d;
  --star:#ffb020; --star-off:#4a4a4f;
  --shoot-1:#e8474a; --shoot-2:#b8282c; --handle-1:#2a9d78; --handle-2:#16684e; --warm-1:#3b6fd6; --warm-2:#22479a;
  --font-word:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-body:var(--font-word);
  --font-num:"Archivo","Big Shoulders Display","Arial Narrow",sans-serif;
  --tabbar-h:56px;
  --r:8px;
}
html{background:#000}
body{background:#000;color:#fff;font-family:var(--font-word);font-stretch:100%;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--font-word);text-transform:none;letter-spacing:-.01em;font-stretch:88%}
h1{font-weight:800}
h2{font-weight:800}
h3{font-weight:700;font-size:1.15rem}
.label{font-family:var(--font-word);font-size:.68rem;letter-spacing:.14em;font-weight:700;color:var(--ink-soft)}
.kick{display:block;font-family:var(--font-word);font-size:.66rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.72)}
.num,.big,.digits{font-family:var(--font-num);font-stretch:62%;font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-soft)}
:focus-visible{outline:2px solid var(--cta);outline-offset:2px}

/* ---------- shell ---------- */
.wrap{max-width:760px;padding-inline:16px;padding-block:0 calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom,0px));position:relative}
header.top{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding-block:14px 10px;min-height:64px;position:relative;z-index:6}
.page-title{flex:1;min-width:0;font-size:2rem;line-height:1.05;font-weight:800;font-stretch:88%;letter-spacing:-.015em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-back{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-left:-8px;border:0;background:transparent;color:#fff;border-radius:50%}
.me-chip{flex:none;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;color:#fff}
.me-txt{display:grid;justify-items:end;line-height:1.1}
.me-txt b{display:none}
.me-chip .level-pill,header.top .me-chip .level-pill{background:none;color:rgba(255,255,255,.75);font-family:var(--font-word);font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:0;border-radius:0}
.me-ring{--p:0;width:38px;height:38px;border-radius:50%;padding:2.5px;display:grid;place-items:center;
  background:conic-gradient(var(--cta) calc(var(--p)*1%),rgba(255,255,255,.18) 0)}
.me-av{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#1c1c1f;border:2px solid #000;
  font-weight:800;font-size:.95rem;color:#fff}
body[data-tab="home"] header.top{position:absolute;left:16px;right:16px;top:0;padding-top:calc(10px + env(safe-area-inset-top,0px))}
body[data-tab="home"] .page-title{text-shadow:0 1px 14px rgba(0,0,0,.55)}
section[role="tabpanel"]{gap:28px}
.toast{background:#fff;color:#000;bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom,0px));border-radius:6px;font-weight:600}

/* bottom tab bar */
nav.tabs.tabbar{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:20;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  padding:5px max(8px,env(safe-area-inset-left,0px)) calc(4px + env(safe-area-inset-bottom,0px));
  background:rgba(10,10,11,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.08);border-bottom:0;overflow:visible}
nav.tabs.tabbar button{display:grid;justify-items:center;align-content:center;gap:3px;min-height:48px;padding:2px 0;border:0;border-radius:0;background:none;
  color:#6b6b70;font-family:var(--font-word);font-weight:600;font-size:.7rem;letter-spacing:.01em;text-transform:none}
nav.tabs.tabbar button svg{width:24px;height:24px}
nav.tabs.tabbar button[aria-selected="true"]{background:none;color:#fff;font-weight:700}
nav.tabs.tabbar button[aria-selected="true"] svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
nav.tabs.tabbar button.rec{color:var(--cta)}
nav.tabs.tabbar button.rec .rec-dot{fill:var(--cta)}
nav.tabs.tabbar button.rec[aria-selected="true"]{color:var(--cta)}
body.focus nav.tabs.tabbar,body.subpage nav.tabs.tabbar{display:none}
body.subpage nav.tabs{margin-bottom:0}

/* ---------- Activities home ---------- */
.hz{position:relative;margin-inline:-16px;margin-top:0}
.hz-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hz-track::-webkit-scrollbar{display:none}
.hz-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;height:min(600px,70vh);min-height:480px;overflow:hidden;background:#000}
.hz-slide .hz-bg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0}
.hz-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 56%,rgba(0,0,0,.78) 76%,#000 100%);pointer-events:none}
.hz-card{position:absolute;z-index:1;left:16px;right:16px;bottom:34px;padding:13px 16px 14px;border-radius:6px;overflow:hidden;
  background:rgba(30,30,32,.62);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.07)}
.hz-card::before{content:"";position:absolute;right:-40px;top:-30px;width:180px;height:180px;border-radius:50%;opacity:.5;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent,rgba(255,70,40,.45)),transparent)}
.hz-slide:nth-child(2){--accent:rgba(31,209,193,.4)}
.hz-slide:nth-child(3){--accent:rgba(190,90,255,.4)}
.hz-slide:nth-child(4){--accent:rgba(90,150,255,.35)}
.hz-card > *{position:relative}
.hz-card .kick{color:rgba(255,255,255,.82);font-size:.64rem;margin-bottom:5px}
.hz-card h2{font-size:1.42rem;line-height:1.05;font-weight:800;font-stretch:88%;color:#fff;letter-spacing:-.01em}
.hz-card p{font-size:.88rem;color:rgba(255,255,255,.92);margin-top:3px;font-weight:500}
.cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;border:0;border-radius:4px;background:var(--cta);color:#fff;
  font-family:var(--font-word);font-weight:700;font-size:.82rem;padding:6px 14px 6px 16px;min-height:32px;letter-spacing:0}
.cta:active{background:var(--cta-dark)}
.cta svg{width:9px;height:9px}
.hz-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:6px;z-index:2}
.hz-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.32)}
.hz-dots i.on{background:#fff}

.h-body{display:grid;gap:36px;margin-top:4px}
#p-home{gap:10px}
.h-sec{display:grid;gap:14px;min-width:0}
.h-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.h-head h3{font-size:1.18rem;font-weight:700;font-stretch:92%;letter-spacing:-.005em;color:#fff}
.h-more{border:0;background:none;color:var(--cta);font-weight:600;font-size:.85rem;padding:4px 0}
.h-empty{color:var(--ink-soft);font-size:.92rem;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start;flex:none}

/* Recent: picture, then one bold line and one grey meta line under it */
.rc{width:150px;border:0;padding:0;background:none;color:#fff;text-align:left;display:grid;gap:2px;align-content:start}
.rc-pic{display:block;width:150px;height:150px;border-radius:4px;overflow:hidden;background:#111;margin-bottom:6px}
.rc .rc-art{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 15%}
.rc-t{font-weight:700;font-size:.92rem;font-stretch:92%;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-m{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Train: big image cards with a heavy condensed caps name (like a pro-lesson card) */
.tiles2{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.tiles2::-webkit-scrollbar{display:none}
.tile2{position:relative;flex:0 0 74%;max-width:300px;aspect-ratio:4/3;scroll-snap-align:start;border:0;padding:0;border-radius:4px;overflow:hidden;background:#111;color:#fff;text-align:left}
.tile2 .t2-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.82))}
.t2-txt{position:absolute;z-index:1;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column-reverse;gap:4px}
.t2-txt b{font-family:var(--font-num);font-stretch:62%;font-weight:900;font-size:2.1rem;line-height:.9;text-transform:uppercase;letter-spacing:.005em}
.t2-txt .kick{text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.82)}
.tile2.wide{flex:none;width:100%;max-width:none;aspect-ratio:16/7}

/* Today's workout rail: italic program look */
.h-prog > .kick{margin-top:-8px;font-size:.6rem;letter-spacing:.12em;color:var(--ink-soft)}
.pc{width:208px;border:0;padding:0;background:none;color:#fff;text-align:left;display:grid;gap:3px}
.pc .art-svg{width:208px;height:136px;border-radius:6px;display:block;background:#111;object-fit:cover}
.pc b{font-weight:700;font-stretch:92%;font-size:.95rem;line-height:1.15;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .kick{font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft)}

/* By Categories: solid colour blocks with a faint oversized mark */
.cat{position:relative;width:282px;min-height:114px;border:0;border-radius:4px;padding:16px 16px 14px;color:#fff;text-align:left;overflow:hidden;display:grid;align-content:start;gap:4px}
.cat::before{content:"";position:absolute;right:-46px;top:50%;width:150px;height:150px;transform:translateY(-50%);opacity:.09;pointer-events:none;
  background:linear-gradient(45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.06),rgba(0,0,0,.18));pointer-events:none}
.cat b{font-size:1.32rem;font-weight:800;font-stretch:88%;line-height:1.05;position:relative}
.cat > span:not(.kick){font-size:.84rem;line-height:1.25;color:rgba(255,255,255,.88);max-width:15em;position:relative}
.cat .kick{position:relative;margin-top:6px;color:rgba(255,255,255,.8)}
.cat-shoot{background:#e0444a}
.cat-handle{background:#2a9d78}
.cat-handle::before{background:radial-gradient(circle,transparent 46%,#fff 47%,#fff 58%,transparent 59%)}
.cat-warm{background:#3b6fd6}
.cat-warm::before{background:repeating-linear-gradient(-45deg,#fff 0 14px,transparent 14px 30px)}
.cat-partner{background:#7b4ad6}
.cat-partner::before{background:radial-gradient(circle at 35% 50%,#fff 0 26%,transparent 27%),radial-gradient(circle at 72% 50%,transparent 0 22%,#fff 23% 30%,transparent 31%)}

/* Dribbling / Upload placeholders */
.stub{position:relative;margin-inline:-16px;min-height:calc(100vh - 140px);display:grid;align-content:end}
.stub-art{position:absolute;inset:0}
.stub-art .art-svg{width:100%;height:78%;display:block;object-fit:cover;object-position:50% 0}
.stub-card{position:relative;margin:0 16px 8px;padding:18px;border-radius:6px;background:rgba(40,40,42,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stub-card .kick{color:var(--lime)}
.stub-card h2{font-size:1.7rem;margin:4px 0 6px}
.stub-card p{font-size:.92rem;color:rgba(255,255,255,.85);line-height:1.45}

/* ---------- generic components, dark ---------- */
.card{background:var(--surface);border:0;border-radius:8px;padding:16px}
.btn{border:0;background:var(--surface-2);color:#fff;border-radius:6px;font-weight:700;font-family:var(--font-word)}
.btn.primary{background:var(--cta);color:#fff}
.btn.big{border-radius:6px;font-size:1.05rem}
.seg{border:0;background:var(--surface-2);border-radius:8px;padding:2px;gap:2px}
.seg button{border-radius:6px;color:rgba(255,255,255,.75);font-weight:600;font-size:.88rem;min-height:34px}
.seg button[aria-pressed="true"]{background:#5a5a5e;color:#fff}
.empty{border:0;background:var(--surface);color:var(--ink-soft);border-radius:8px}
.progressbar{background:rgba(255,255,255,.12);height:4px}
.progressbar span{background:var(--cta)}
.log li{border-bottom-color:var(--line)}
.stars-svg svg{fill:var(--star-off)}
.stars-svg svg.on{fill:var(--star);filter:none}
.go{background:var(--cta);color:#fff;border-radius:6px;box-shadow:none;min-height:56px;font-family:var(--font-word);font-weight:800;font-stretch:88%;font-size:1.2rem;text-transform:none;letter-spacing:0}
.go:active{transform:none;box-shadow:none;background:var(--cta-dark)}
.go svg{width:20px;height:20px}
.coach-says{background:var(--surface);border:0;border-left:3px solid var(--lime);border-radius:4px;font-weight:500;font-size:1rem}
.coach-says span{font-family:var(--font-word);font-size:.64rem;letter-spacing:.16em;color:var(--lime)}
.test input{background:var(--surface-2);border:0;color:#fff}

/* ---------- Drills (Train grid) ---------- */
.dl-head{display:block;margin-top:-4px}
.dl-sum{display:flex;gap:28px}
.dl-sum > div{display:grid;gap:2px}
.dl-sum .num{font-size:2.3rem;line-height:.9;color:#fff}
.dl-sum .num small{font-size:.5em;color:var(--ink-soft);margin-left:2px}
.dl-sum .kick{color:var(--ink-soft)}
.chips{margin-block:0;gap:8px}
.chips button,.chips button.c-shoot,.chips button.c-handle,.chips button.c-warm{border:0;background:var(--surface-2);color:rgba(255,255,255,.8);min-height:34px;padding:6px 14px;font-size:.85rem;font-weight:600;border-radius:999px}
.chips button[aria-pressed="true"],.chips button.c-shoot[aria-pressed="true"],.chips button.c-handle[aria-pressed="true"],.chips button.c-warm[aria-pressed="true"]{background:#fff;color:#000}
.dl-sec{font-size:1.18rem;font-weight:700;font-stretch:92%;margin:4px 0 -10px;color:#fff;text-transform:none;font-family:var(--font-word)}
.tiles{grid-template-columns:repeat(auto-fill,minmax(min(46%,220px),1fr));gap:12px 10px}
details.drill.tile{background:#111;border:0;border-radius:4px;box-shadow:none;overflow:hidden}
details.drill.tile summary{position:relative;display:block;padding:0;min-height:0;aspect-ratio:5/6}
details.drill.tile summary .drill-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
details.drill.tile summary::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.92));pointer-events:none}
.tile .t-tag{position:absolute;z-index:1;left:8px;top:8px;background:rgba(120,110,90,.75);color:#fff;font-size:.56rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 6px;border-radius:2px}
.tile .t-txt{position:absolute;z-index:1;left:12px;right:10px;bottom:10px;display:grid;gap:3px}
.tile strong{font-family:var(--font-word);font-weight:700;font-stretch:88%;font-size:1.06rem;line-height:1.1;text-transform:none;letter-spacing:-.005em;color:#fff}
.tile .t-meta{font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tile .t-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.tile .t-best{font-size:.72rem;font-weight:500;color:rgba(255,255,255,.7);text-transform:none;letter-spacing:0}
.tile .stars-svg{gap:3px}
.tile .stars-svg svg{fill:rgba(255,255,255,.35);width:10px;height:10px}
.tile .stars-svg svg.on{fill:var(--star)}

/* drill detail */
.dd-hero{background:#111;border-radius:0;margin-inline:-16px;padding:0 16px 18px;min-height:340px;align-content:end;position:relative}
.dd-hero > .drill-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 30%,rgba(0,0,0,.2) 55%,#000);pointer-events:none}
.dd-hero > *:not(.drill-art){position:relative;z-index:1}
.dd-back{position:absolute!important;top:calc(12px + env(safe-area-inset-top,0px));left:12px;background:rgba(0,0,0,.45);color:#fff;font-family:var(--font-word);font-weight:600;font-size:.9rem}
.dd-hero h2{font-family:var(--font-word);font-stretch:88%;text-transform:none;font-size:2rem;font-weight:800;line-height:1.05}
.dd-chips{display:flex;flex-wrap:wrap;gap:6px 10px}
.dd-chips span{background:none;border:0;padding:0;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.dd-chips span + span::before{content:"· ";color:rgba(255,255,255,.5)}
.dd-goal{background:var(--surface);border:0;border-radius:8px}
.dd-goal b{font-family:var(--font-num);font-stretch:62%;font-weight:900}
.dd-how .n{background:var(--surface-2);font-family:var(--font-num);font-stretch:62%}

/* ---------- Workout ---------- */
.hero-today{background:var(--surface);border-radius:8px;box-shadow:none;border:0;padding:0 16px 16px;overflow:hidden;position:relative;gap:16px}
.ht-pic{position:relative;margin:0 -16px;height:200px;overflow:hidden}
.ht-pic .ht-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ht-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(22,22,24,.96))}
.ht-cap{position:absolute;z-index:1;left:16px;right:16px;bottom:10px;display:grid;gap:4px}
.hero-today h2{font-family:var(--font-word);font-stretch:88%;text-transform:none;font-size:1.9rem;font-weight:800;line-height:1.05}
.ht-date{font-size:.64rem;letter-spacing:.16em;font-weight:800;color:rgba(255,255,255,.75)}
.ht-streak{background:none;color:var(--cta);font-weight:700;font-size:.78rem;padding:0}
.ht-stats b{font-family:var(--font-num);font-stretch:62%;font-weight:900;font-size:2.4rem;color:#fff;line-height:.9}
.ht-stats span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
.ht-week{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.ht-week p{order:-1;color:var(--ink-soft);font-size:.8rem;line-height:1.3}
.ht-week strong{color:#fff}
.hero-today .ht-week .week{display:flex;gap:5px;flex:none}
.hero-today .ht-week .week .d{font-size:0;gap:0}
.hero-today .ht-week .week .dot{width:10px;height:10px;border:0;background:#3a3a3e}
.hero-today .ht-week .week .dot svg{display:none}
.hero-today .ht-week .week .dot.on{background:var(--cta)}
.hero-today .ht-week .week .dot.today{box-shadow:0 0 0 2px #000,0 0 0 3px #fff}
.quick .tile2{flex:1 1 0;max-width:none;aspect-ratio:4/3}
.quick{display:flex;gap:8px}
.quick .t2-txt b{font-size:1.6rem}
.plan2 li{background:var(--surface);border:0;border-radius:6px;box-shadow:none}
.plan2 .num{font-family:var(--font-num);font-stretch:62%;background:none;color:var(--ink-soft);font-size:1.6rem}
.plan2 li.sk-shoot{border-left:3px solid var(--cta)}.plan2 li.sk-handle{border-left:3px solid var(--teal)}.plan2 li.sk-warm{border-left:3px solid var(--lime)}
.chip-btn{background:var(--surface-2);border:0;color:#fff;border-radius:999px;font-weight:600}
.swap2{background:var(--surface-2);border:0;color:#fff}
.grownups{background:var(--surface);border:0;border-radius:8px}
.runner .board,.board{background:var(--surface);border-radius:8px}
.runner .board .step{font-size:.64rem;letter-spacing:.16em;font-weight:800}
.board .digits{color:#fff}
.res-hero{background:radial-gradient(110% 90% at 50% 0%,#2a2a2d 0%,#111 60%);border-radius:8px}
.res-hero h2{font-family:var(--font-word);font-stretch:88%;text-transform:none}
.res-stats b{font-family:var(--font-num);font-stretch:62%;color:#fff}
.res-stats span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}

/* ---------- Profile ---------- */
.pg-hero{background:var(--surface);border-radius:8px;box-shadow:none}
.pg-ovr{background:none!important;clip-path:none!important;color:#fff;padding:0!important}
.pg-ovr b{font-family:var(--font-num);font-stretch:62%;font-weight:900;color:#fff!important}
.pg-ovr span{font-size:.62rem!important;letter-spacing:.16em;color:var(--ink-soft)!important;font-family:var(--font-word)!important}
.pg-name{font-family:var(--font-word)!important;font-stretch:88%;text-transform:none!important;color:#fff!important;font-weight:800}
.pg-level{font-family:var(--font-word)!important;font-size:.7rem!important;letter-spacing:.16em;text-transform:uppercase;color:var(--cta)!important;font-weight:800}
.pg-totals b,.pg-fire b,.pg-rnum{font-family:var(--font-num)!important;font-stretch:62%;color:#fff}
.pg-totals span,.pg-fire span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
.pg-fire svg{color:var(--cta)}
.pg-cal-g i{background:#2a2a2d}
.pg-cal-g i.on{background:var(--cta)}
.pg-rbar{background:rgba(255,255,255,.1)!important}
.re-badge{background:var(--surface)}

/* old uppercase condensed headings -> mixed-case heavy grotesk; numbers stay condensed */
.plan-top h3,.dd-how h3,.pg-head h3,.pg-log h3,.card h3,.hero-track h3{font-family:var(--font-word);font-stretch:92%;font-weight:700;font-size:1.18rem;text-transform:none;letter-spacing:-.005em;color:#fff}
.pg-rname,.pg-badges strong,.pg-fx-top strong{font-family:var(--font-word);font-stretch:88%;font-weight:700;font-size:1.02rem;text-transform:none;letter-spacing:0}
.pg-rname small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.pg-tag{font-family:var(--font-word);font-size:.6rem;letter-spacing:.14em;font-weight:800}
.howto summary,.res-kicker,.re-badge em{font-family:var(--font-word);font-size:.66rem;letter-spacing:.16em;font-weight:800}
.re-badge b{color:#fff;font-family:var(--font-word);font-stretch:88%;text-transform:none;font-size:1.2rem}
.pg-name{border-bottom:0!important}
.pg-next .progressbar span{background:var(--cta)}
.pg-next p{color:var(--ink-soft)}
.pg-next p b{color:#fff}
.pg-delta.up{background:rgba(61,220,132,.14);color:var(--good)}
.shotpad button{font-family:var(--font-word);font-stretch:88%;font-weight:800;text-transform:none}
.board .step{font-family:var(--font-word)}
.res-hero .stars-svg svg.on{fill:var(--star)}
.drill-art.flip{transform:scaleX(-1)}

/* generated pictures are <img> now */
img.art-svg{object-fit:cover;background:#0b0b0c}

/* ---------- Round 3: two type voices + light content sheet ----------
   Voice 1: upright bold grotesk for every title, header and caption.
   Voice 2: heavy condensed caps only for names stamped on picture tiles and HUD counts.
   Under the black hero, content sits on a white sheet with black bold headers (Activities + Drills). */
.tile .t-foot{margin-top:4px}
.tile .t-best{font-size:.7rem;color:rgba(255,255,255,.62)}
.tile .stars-svg{display:none}
.cat::before{opacity:.07}

body[data-tab="home"],body[data-tab="drills"]:not(.subpage){background:#fff;color:#000}
html:has(body[data-tab="home"]),html:has(body[data-tab="drills"]:not(.subpage)){background:#fff}
body[data-tab="home"] .hz{background:#000}
.h-body{background:#fff;color:#000;margin-inline:-16px;padding:32px 16px 8px;margin-top:-10px}
.h-head h3,.h-body h3{color:#000;font-size:1.2rem;font-weight:700;font-stretch:92%;letter-spacing:-.01em}
.h-more{color:var(--cta)}
.h-empty{color:#6b6b70;border-color:rgba(0,0,0,.08)}
.rc{color:#000}
.rc-pic{background:#e9e9ec}
.rc-m,.pc .kick,.h-prog > .kick{color:#7a7a80}
.pc{color:#000}
.pc .art-svg{border-radius:4px}
.tile2{border-radius:4px}

/* Drills tab as a white page with dark picture cards */
body[data-tab="drills"]:not(.subpage) header.top .page-title{color:#000}
body[data-tab="drills"]:not(.subpage) .me-chip{color:#000}
body[data-tab="drills"]:not(.subpage) .me-chip .level-pill{color:#6b6b70}
body[data-tab="drills"]:not(.subpage) .me-ring{background:conic-gradient(var(--cta) calc(var(--p)*1%),rgba(0,0,0,.12) 0)}
body[data-tab="drills"]:not(.subpage) .me-av{background:#f1f1f3;color:#000;border-color:#fff}
#p-drills .dl-sum .num{color:#000}
#p-drills .dl-sum .num small,#p-drills .dl-sum .kick{color:#7a7a80}
#p-drills .chips button{background:#efeff1;color:#2a2a2d}
#p-drills .chips button[aria-pressed="true"]{background:#000;color:#fff}
#p-drills .dl-sec{color:#000}

/* light tab bar over the white pages */
body[data-tab="home"] nav.tabs.tabbar,body[data-tab="drills"] nav.tabs.tabbar{background:rgba(250,250,250,.94);border-top-color:rgba(0,0,0,.1)}
body[data-tab="home"] nav.tabs.tabbar button,body[data-tab="drills"] nav.tabs.tabbar button{color:#8e8e93}
body[data-tab="home"] nav.tabs.tabbar button[aria-selected="true"],body[data-tab="drills"] nav.tabs.tabbar button[aria-selected="true"]{color:#000}
body[data-tab="home"] nav.tabs.tabbar button[aria-selected="true"] svg,body[data-tab="drills"] nav.tabs.tabbar button[aria-selected="true"] svg{filter:none}
body[data-tab="home"] nav.tabs.tabbar button.rec,body[data-tab="drills"] nav.tabs.tabbar button.rec{color:var(--cta)}
.tiles2{scroll-padding-inline:16px}

/* ---------- Round 4: one tile voice everywhere + melting hero card ----------
   Every picture tile: 15-16px semibold sentence-case title + 10px tracked caps meta,
   on a bottom scrim that runs edge to edge. No poster caps. Hero promo card is a
   borderless translucent gradient that blends into the hero picture. Tighter rhythm. */
.hz-slide::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 62%,rgba(0,0,0,.55) 82%,#000 100%)}
.hz-card{left:16px;right:16px;bottom:30px;padding:11px 16px 13px;border:0;border-radius:5px;box-shadow:none;
  background:linear-gradient(90deg,rgba(78,78,82,.80) 0%,rgba(78,78,82,.66) 48%,rgba(78,78,82,.18) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.hz-card::before{right:-60px;top:auto;bottom:-70px;width:240px;height:220px;opacity:.85;
  background:radial-gradient(closest-side,var(--accent,rgba(232,60,48,.75)),transparent)}
.hz-slide:nth-child(1){--accent:rgba(232,60,48,.7)}
.hz-slide:nth-child(2){--accent:rgba(31,209,193,.55)}
.hz-slide:nth-child(3){--accent:rgba(190,90,255,.55)}
.hz-slide:nth-child(4){--accent:rgba(90,150,255,.5)}
.hz-card .kick{font-size:.6rem;letter-spacing:.12em;margin-bottom:3px;color:rgba(255,255,255,.85)}
.hz-card h2{font-size:1.32rem;font-weight:800}
.hz-card p{font-size:.86rem;margin-top:1px}
.hz-card .cta{margin-top:10px;min-height:28px;padding:4px 12px 4px 14px;font-size:.8rem;border-radius:3px}

.h-body{gap:26px;padding-top:22px}
.h-sec{gap:10px}
.h-prog > .kick{margin-top:-6px}

/* Train: same tile as the drill grid, two columns, square-ish, title over a scrim */
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none}
.tile2,.quick .tile2{flex:none;width:auto;max-width:none;aspect-ratio:1/1;border-radius:4px}
.tile2.wide{aspect-ratio:16/7}
.tile2::after{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.88) 100%)}
.t2-txt{left:12px;right:10px;bottom:10px;gap:3px}
.t2-txt b,.quick .t2-txt b{font-family:var(--font-word);font-stretch:92%;font-weight:700;font-size:1rem;line-height:1.12;text-transform:none;letter-spacing:-.005em}
.t2-txt .kick{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* Recent: same title/meta voice as tiles */
.rc-pic{width:150px;height:150px;margin-bottom:5px}
.rc-t{font-size:.95rem}
.rc-m{font-size:.6rem;letter-spacing:.1em}

/* Drill grid tiles: picture fills the card, scrim only at the bottom, compact text block */
.tiles{gap:10px}
details.drill.tile summary{aspect-ratio:4/5}
details.drill.tile summary::after{background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 100%)}
.tile .t-txt{left:11px;right:10px;bottom:9px;gap:2px}
.tile strong{font-size:1rem;font-stretch:92%}
.tile .t-meta{font-size:.58rem;letter-spacing:.12em;color:rgba(255,255,255,.85)}
.tile .t-foot{margin-top:3px}
.tile .t-best{font-size:.62rem;font-weight:500;color:rgba(255,255,255,.78)}
.tile .stars-svg{display:inline-flex;gap:2px}
.tile .stars-svg svg{width:9px;height:9px;fill:rgba(255,255,255,.4)}
.tile .stars-svg svg.on{fill:#fff}

/* Drills filter: native-style text tabs, not web chips */
#p-drills .chips{gap:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(0,0,0,.1);margin-inline:-16px;padding-inline:16px}
#p-drills .chips::-webkit-scrollbar{display:none}
#p-drills .chips button,#p-drills .chips button[aria-pressed="true"]{flex:none;background:none;border-radius:0;padding:8px 0 9px;min-height:0;font-size:.9rem;font-weight:600;color:#8e8e93;box-shadow:inset 0 -2px 0 transparent}
#p-drills .chips button[aria-pressed="true"]{color:#000;font-weight:700;box-shadow:inset 0 -2px 0 var(--cta)}
#p-drills{gap:18px}
.dl-sec{margin:2px 0 -8px}