/* COACH COFF v2, the app (billy/SPEC.md section 6). Every class starts with "cc-", every token "--cc-", everything is
   scoped to .cc-root except the icon (.cc-icon, a self-contained SVG the page may draw too: BillyApp.iconHTML).
   The host sets --cc-w / --cc-h on the mount (393 x 852, or 393 x 780: .cc-short). The page declares the fonts:
   Anton 400 (titles, numbers, cues) and Archivo 400 / 500 / 600 (text, UI).
   A stadium at night: night #0A0A0A, cards #151515, lines #2A2A2A, paper text, mute #9C9C96, one lime #4AF918.
   Motion: transform, opacity and stroke-dashoffset only. */

.cc-icon { display: block; overflow: visible; }

/* ------------------------------------------------------------------ root */
.cc-root {
  --cc-night: #0A0A0A; --cc-card: #151515; --cc-line: #2A2A2A; --cc-paper: #F4F4F0; --cc-mute: #9C9C96;
  --cc-veil: rgba(10, 10, 10, .68); --cc-lime: #4AF918;
  --cc-ink: #0A0A0A; --cc-faint: #62625D; --cc-bar: #0D0D0D; --cc-ring: #3A3A3A; --cc-media: #161616; --cc-raise: #1C1C1C;
  --cc-display: "Anton", Impact, "Arial Narrow", "Roboto Condensed", sans-serif;
  --cc-sans: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cc-out: cubic-bezier(.22, 1, .36, 1);
  --cc-hl: 1px;
  /* the vertical rhythm (852; .cc-short below for 780): content from --cc-top, the tab bar (83) plus air at the bottom */
  --cc-top: 66px; --cc-bot: 105px; --cc-spIcon: 288px; --cc-gap: 20px;
  --cc-reRing: 228px; --cc-yoCell: 42px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--cc-w, 393px); height: var(--cc-h, 852px);
  background: var(--cc-night); color: var(--cc-paper);
  font: 400 14px/1.4 var(--cc-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.cc-root.cc-short { --cc-top: 60px; --cc-bot: 99px; --cc-spIcon: 256px; --cc-gap: 16px; --cc-reRing: 196px; --cc-yoCell: 38px; }
@media (min-resolution: 2dppx) { .cc-root { --cc-hl: .5px; } }
.cc-root :where(*), .cc-root :where(*)::before, .cc-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.cc-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.cc-root :where(h2, h3, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.cc-root :where(img, video, svg) { display: block; max-width: none; }
.cc-root :where(img) { -webkit-user-drag: none; }
.cc-root :where(b, strong) { font-weight: inherit; }
.cc-root :where(i, em) { font-style: normal; }
.cc-story { pointer-events: none; }
.cc-root :focus { outline: none; }
.cc-root :focus-visible { outline: 2px solid var(--cc-lime); outline-offset: 3px; border-radius: 14px; }
.cc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ the type roles (SPEC 3) */
.cc-big { font: 400 44px/.98 var(--cc-display); letter-spacing: .01em; text-transform: uppercase; color: var(--cc-paper); }
.cc-ah { font: 400 28px/1.05 var(--cc-display); letter-spacing: .01em; text-transform: uppercase; color: var(--cc-paper); text-wrap: balance; }
.cc-btnt { font: 600 15px/1 var(--cc-sans); letter-spacing: .08em; text-transform: uppercase; }
.cc-cue { font: 400 14px/1.4 var(--cc-sans); color: var(--cc-paper); }
.cc-chip { font: 500 13px/1.3 var(--cc-sans); color: var(--cc-paper); }
/* his lines: a lime rule on the left */
.cc-rule { padding-left: 12px; box-shadow: inset 2px 0 0 var(--cc-lime); }

/* ------------------------------------------------------------------ glass, layers, chrome */
.cc-glass { position: absolute; inset: 0; overflow: hidden; background: var(--cc-night); }
/* one floodlight, top right, on every screen (as on the page) */
.cc-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; contain: layout style size;
  background: radial-gradient(130% 52% at 108% -6%, rgba(244, 244, 240, .065), rgba(244, 244, 240, 0) 62%), var(--cc-night); }
.cc-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.cc-layer.is-moving { box-shadow: -24px 0 48px -18px rgba(0, 0, 0, .85); }
.cc-l-splash { z-index: 9; background: var(--cc-night); }
.cc-scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; padding: var(--cc-top) 24px var(--cc-bot); }
.cc-mid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.cc-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--cc-paper); }
.cc-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/1 var(--cc-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cc-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.cc-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(244, 244, 240, .92); z-index: 20; pointer-events: none; }
.cc-full .cc-status, .cc-full .cc-homeind { display: none; }
.cc-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 6; display: flex; padding: 0 6px; background: rgba(13, 13, 13, .96); box-shadow: inset 0 var(--cc-hl) 0 var(--cc-line); }
.cc-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 8px; color: var(--cc-faint); font: 500 10.5px/13px var(--cc-sans); letter-spacing: .02em; transition: color .2s linear; }
.cc-tab svg { width: 24px; height: 24px; }
.cc-tab.is-on { color: var(--cc-paper); }
.cc-tab .cc-tab__ic { transition: transform .16s var(--cc-out); }
.cc-tab.is-press .cc-tab__ic, .cc-live .cc-tab:active .cc-tab__ic { transform: scale(.86); }
.cc-story .cc-tab { transition: none; }
.cc-tab__ic { position: relative; display: block; width: 24px; height: 24px; }
.cc-tabbar__ul { position: absolute; left: 0; top: 0; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cc-lime); pointer-events: none; will-change: transform; box-shadow: 0 0 12px rgba(74, 249, 24, .55); }

/* the ghost finger (demo): a white disc at 90%, a 2 px lime ring, a soft shadow; a lime ripple on each press */
.cc-ghost { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 30; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px var(--cc-lime), 0 12px 28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); will-change: transform, opacity; }
.cc-ghost__rip { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 29; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--cc-lime); will-change: transform, opacity; }

/* ------------------------------------------------------------------ shared parts */
.cc-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--cc-line); }
.cc-av .cc-img { transform: scale(1.12); transform-origin: 56% 52%; }
.cc-card { position: relative; flex: none; display: block; border-radius: 24px; overflow: hidden; background: var(--cc-media); }
.cc-card::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.cc-vs { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--cc-media); }
.cc-vs__p, .cc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.cc-vs.is-playing .cc-video { opacity: 1; }
/* the main button of a screen: 72 canvas px (44 px at scale .6) */
.cc-btn { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 72px; border-radius: 24px; overflow: hidden;
  background: var(--cc-lime); color: var(--cc-ink); box-shadow: 0 18px 34px -20px rgba(74, 249, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: transform .18s var(--cc-out), background-color .24s linear, color .24s linear, box-shadow .24s linear; }
.cc-btn .cc-btnt { padding-top: 1px; }
.cc-btn svg { flex: none; width: 22px; height: 22px; }
.cc-btn.is-press, .cc-live .cc-btn:active { transform: scale(.97); }
.cc-btn.is-off { background: var(--cc-card); color: var(--cc-faint); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-btn.is-rest { background: var(--cc-card); color: var(--cc-lime); box-shadow: inset 0 0 0 1.5px rgba(74, 249, 24, .45); }
.cc-story .cc-btn { transition: none; }
.cc-btn__lb { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cc-btn__alt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; }
.cc-btn__alt .cc-btnt { letter-spacing: .04em; font-size: 13px; }
.cc-btn__alt svg { width: 18px; height: 18px; }
/* a press ripple (live taps) */
.cc-rpl { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; opacity: 0; background: rgba(10, 10, 10, .2); }
.cc-btn.is-off .cc-rpl, .cc-btn.is-rest .cc-rpl, .cc-opt .cc-rpl, .cc-arw .cc-rpl, .cc-tab .cc-rpl, .cc-ib .cc-rpl { background: rgba(244, 244, 240, .16); }
/* the round check: a grey ring, a lime disc that pops in, a dark tick drawn on it */
.cc-ck { position: relative; display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cc-ring); }
.cc-ck__f { position: absolute; inset: 0; border-radius: 50%; background: var(--cc-lime); transform: scale(0); }
.cc-ck__m { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; overflow: visible; }
.cc-ck__m path { fill: none; stroke: var(--cc-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* the seven-segment ring (the tests), its closing circle */
.cc-ring { overflow: visible; }
.cc-ring__b { fill: none; stroke: var(--cc-line); stroke-width: var(--sw); stroke-linecap: round; }
.cc-ring__s { fill: none; stroke: var(--cc-lime); stroke-width: var(--sw); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.cc-ring__c { fill: none; stroke: var(--cc-lime); stroke-width: calc(var(--sw) * .34); stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.cc-ib { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--cc-paper); overflow: hidden; }
.cc-ib::before { content: ""; position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--cc-raise); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-ib svg { position: relative; width: 20px; height: 20px; }

/* ------------------------------------------------------------------ splash */
.cc-sp { position: absolute; inset: 0; background: radial-gradient(70% 34% at 50% calc(var(--cc-spIcon) + 52px), rgba(74, 249, 24, .07), rgba(74, 249, 24, 0) 70%), var(--cc-night); }
.cc-sp__icon { position: absolute; left: 50%; top: var(--cc-spIcon); width: 104px; height: 104px; margin-left: -52px; border-radius: 23.26px; box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .9), 0 0 0 var(--cc-hl) rgba(255, 255, 255, .06); }
.cc-sp__wm { position: absolute; left: 16px; right: 16px; top: calc(var(--cc-spIcon) + 132px); height: 50px; overflow: hidden; text-align: center; }
.cc-sp__wf { display: inline-block; padding-top: 4px; }
.cc-sp__by { position: absolute; left: 16px; right: 16px; top: calc(var(--cc-spIcon) + 196px); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--cc-mute); }

/* ------------------------------------------------------------------ profile: what do you play, your system */
.cc-pr__av { align-self: flex-start; box-shadow: 0 0 0 2px var(--cc-night), 0 0 0 3.5px var(--cc-lime); }
.cc-pr__h { margin-top: 20px; }
.cc-pr__opts { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; flex: none; }
.cc-short .cc-pr__opts { gap: 8px; } .cc-short .cc-pr__h { margin-top: 16px; } .cc-short .cc-pr__res { margin-top: 20px; }
.cc-opt { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 20px 0 22px; border-radius: 20px; overflow: hidden;
  background: var(--cc-card); box-shadow: inset 0 0 0 1px var(--cc-line); color: var(--cc-paper);
  transition: transform .16s var(--cc-out), box-shadow .2s linear, background-color .2s linear; }
.cc-opt .cc-btnt { position: relative; padding-top: 1px; }
.cc-opt.is-on { background: #0F170B; box-shadow: inset 0 0 0 1.5px var(--cc-lime); }
.cc-opt.is-press, .cc-live .cc-opt:active { transform: scale(.98); }
.cc-story .cc-opt { transition: none; }
.cc-rad { position: relative; display: block; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--cc-ring); }
.cc-rad__f { position: absolute; inset: 0; border-radius: 50%; background: var(--cc-lime); transform: scale(0); }
.cc-rad .cc-ck__m { left: 3px; top: 3px; width: 20px; height: 20px; }
.cc-pr__res { margin-top: 26px; flex: none; }
.cc-pr__r { font-weight: 500; }
.cc-wk__c { display: block; }
.cc-wk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cc-wk__s { position: relative; display: block; height: 8px; border-radius: 4px; overflow: hidden; background: var(--cc-line); }
.cc-wk__f { position: absolute; inset: 0; background: var(--cc-lime); transform: scaleX(0); transform-origin: 0 50%; }
.cc-wk__l { display: block; margin-top: 8px; color: var(--cc-mute); }

/* ------------------------------------------------------------------ today: shoulder conditioning, his clip, 45 to 50 */
.cc-to__s { margin-top: 10px; color: var(--cc-mute); flex: none; }
.cc-to__card { margin-top: 18px; flex: 1 1 auto; min-height: 0; }
.cc-to__card .cc-vs__p, .cc-to__card .cc-video { object-position: 50% 30%; }
.cc-to__tag { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border-radius: 17px;
  background: rgba(10, 10, 10, .62); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cc-to__tag svg { width: 16px; height: 16px; color: var(--cc-lime); }
.cc-to__veil { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .82)); }
.cc-to__done { position: absolute; left: 20px; bottom: 18px; z-index: 3; color: var(--cc-lime); transform-origin: 0 80%; opacity: 0; }
.cc-to__act { margin-top: var(--cc-gap); display: flex; align-items: center; gap: 14px; flex: none; }
.cc-cnt { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; }
.cc-cnt svg { position: absolute; inset: 0; width: 72px; height: 72px; transform: rotate(-90deg); }
.cc-cnt__b { fill: none; stroke: var(--cc-line); stroke-width: 5; }
.cc-cnt__f { fill: none; stroke: var(--cc-paper); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: .1; transition: stroke .3s linear; }
.cc-cnt__l { fill: none; stroke: var(--cc-lime); stroke-width: 5; opacity: 0; }
.cc-cnt__n { position: relative; font: 400 28px/1 var(--cc-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; padding-top: 2px; }
.cc-cnt__glow { position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cc-lime), 0 0 26px rgba(74, 249, 24, .5); opacity: 0; pointer-events: none; }
.cc-to__act .cc-btn { flex: 1 1 auto; width: auto; }

/* ------------------------------------------------------------------ cues: four cards, his reels in full 4:5 */
.cc-cu__ts { position: relative; flex: none; height: 60px; }
.cc-cu__t { position: absolute; left: 0; right: 0; bottom: 0; }
.cc-cu__view { position: relative; flex: none; width: 100%; aspect-ratio: 4 / 5; margin-top: var(--cc-gap); border-radius: 24px; overflow: hidden; }
.cc-cu__track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }
.cc-cu__sl { position: absolute; top: 0; height: 100%; width: 100%; border-radius: 24px; overflow: hidden; background: var(--cc-media); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.cc-cu__sl .cc-vs { border-radius: inherit; }
.cc-cu__sl .cc-vs__p, .cc-cu__sl .cc-video { object-position: 50% 50%; }
.cc-cu__hit { position: absolute; inset: 0; z-index: 7; cursor: grab; }
.cc-cu__ctl { margin-top: var(--cc-gap); flex: none; display: flex; align-items: center; justify-content: space-between; height: 72px; margin-left: -6px; margin-right: -6px; }
.cc-arw { position: relative; display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; color: var(--cc-paper); overflow: hidden; transition: opacity .2s linear, transform .16s var(--cc-out); }
.cc-arw::before { content: ""; position: absolute; left: 8px; top: 8px; width: 56px; height: 56px; border-radius: 50%; background: var(--cc-card); box-shadow: inset 0 0 0 1px var(--cc-line); transition: background-color .2s linear, box-shadow .2s linear; }
.cc-arw svg { position: relative; width: 22px; height: 22px; }
.cc-arw--next { color: var(--cc-ink); }
.cc-arw--next::before { background: var(--cc-lime); box-shadow: 0 14px 26px -16px rgba(74, 249, 24, .7); }
.cc-arw.is-off { opacity: .32; pointer-events: none; }
.cc-arw.is-press, .cc-live .cc-arw:active { transform: scale(.94); }
.cc-dots { position: relative; display: flex; align-items: center; }
.cc-dot { position: relative; display: grid; place-items: center; width: 36px; height: 72px; }
.cc-dot i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--cc-ring); transform-origin: 50% 50%; }
.cc-dots__on { position: absolute; left: 6px; top: 50%; width: 24px; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--cc-lime); pointer-events: none; box-shadow: 0 0 10px rgba(74, 249, 24, .45); }

/* ------------------------------------------------------------------ the plant zones diagram (our SVG) */
.cc-dg { display: block; overflow: visible; }
.cc-dg__yd { fill: none; stroke: rgba(244, 244, 240, .05); stroke-width: 1; }
.cc-dg__hx { stroke: rgba(244, 244, 240, .3); stroke-width: 1.4; }
.cc-dg__kzb { fill: none; stroke: rgba(244, 244, 240, .5); stroke-width: 1.2; stroke-dasharray: 3 4; }
.cc-dg__kzx { fill: var(--cc-paper); opacity: 0; }
.cc-dg__slg { fill: none; stroke: var(--cc-lime); stroke-width: 14; stroke-linecap: round; opacity: .14; }
.cc-dg__sll { fill: none; stroke: var(--cc-lime); stroke-width: 4; stroke-linecap: round; }
.cc-dg__sl.is-hint .cc-dg__slg { will-change: opacity; animation: cc-glow 1.5s ease-in-out infinite; }
@keyframes cc-glow { 0%, 100% { opacity: .08; } 50% { opacity: .44; } }
.cc-dg__a .cc-dg__bt { fill: #1D1D1D; stroke: rgba(244, 244, 240, .66); stroke-width: 1.6; }
.cc-dg__a .cc-dg__hl { fill: none; stroke: rgba(244, 244, 240, .4); stroke-width: 1.2; }
.cc-dg__me .cc-dg__bt { fill: rgba(244, 244, 240, .92); stroke: rgba(244, 244, 240, .92); stroke-width: 1.6; }
.cc-dg__me .cc-dg__hl { fill: none; stroke: rgba(10, 10, 10, .32); stroke-width: 1.4; }
.cc-dg__hm.is-on .cc-dg__bt { stroke: var(--cc-lime); stroke-width: 3.2; }
.cc-dg__arw { fill: none; stroke: var(--cc-lime); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.cc-dg__arh { fill: none; stroke: var(--cc-lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cc-dg__hip rect { fill: var(--cc-card); stroke: rgba(244, 244, 240, .5); stroke-width: 1.6; }
.cc-dg__hip.is-on rect { stroke: var(--cc-lime); }
.cc-dg__ld { fill: none; stroke: rgba(244, 244, 240, .26); stroke-width: 1; stroke-dasharray: 2 3; }
.cc-dg__rip { fill: none; stroke: var(--cc-lime); stroke-width: 2; opacity: 0; }

/* ------------------------------------------------------------------ hammer (T6: plant the hammer) */
.cc-ha__hd { display: flex; align-items: center; gap: 6px; height: 44px; margin-left: -8px; flex: none; }
.cc-ha__h { padding-top: 3px; }
.cc-ha__slot { position: relative; height: 30px; margin-top: 10px; flex: none; }
.cc-ha__i { position: absolute; left: 0; top: 0; height: 30px; display: flex; align-items: center; gap: 10px; color: var(--cc-mute); white-space: nowrap; }
.cc-ha__dot { position: relative; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-lime); }
.cc-ha__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--cc-lime); opacity: 0; }
.cc-ha__dot.is-ping::after { will-change: transform, opacity; animation: cc-ping 1.5s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes cc-ping { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
.cc-ha__k { position: absolute; left: 0; top: 0; height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 15px; background: var(--cc-paper); color: var(--cc-ink); font-weight: 600; letter-spacing: .02em; white-space: nowrap; opacity: 0; visibility: hidden; transform-origin: 0 50%; }
.cc-ha__card { margin-top: 14px; flex: 1 1 auto; min-height: 0; background: var(--cc-card); display: flex; align-items: center; justify-content: center; }
/* the plan keeps its frame (x 66 to 290, y 76 to 410 of the drawing: 224 x 334 units); hit zones and labels in % of it */
.cc-ha__box { position: relative; flex: none; height: min(calc(100% - 32px), 476px); aspect-ratio: 224 / 376; }
.cc-ha__dg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-ha__lb { position: absolute; top: calc(2 / 376 * 100%); display: flex; flex-direction: column; gap: 3px; white-space: nowrap; pointer-events: none; }
.cc-ha__lb b { font: 600 11px/1.15 var(--cc-sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 244, 240, .78); }
.cc-ha__lb span { font: 500 13px/1.2 var(--cc-sans); color: var(--cc-mute); }
.cc-ha__lb--kz { left: 0; align-items: flex-start; text-align: left; }
.cc-ha__lb--sl { right: 0; align-items: flex-end; text-align: right; }
.cc-ha__lb--sl b { color: var(--cc-lime); }
.cc-ha__lb--sl span { color: var(--cc-paper); }
.cc-hitz { position: absolute; z-index: 2; border-radius: 16px; }
.cc-hitz--sl { left: calc(140 / 224 * 100%); width: calc(60 / 224 * 100%); top: calc(44 / 376 * 100%); height: calc(144 / 376 * 100%); }
.cc-hitz--kz { left: calc(50 / 224 * 100%); width: calc(68 / 224 * 100%); top: calc(70 / 376 * 100%); height: calc(92 / 376 * 100%); }
.cc-hitz.is-off { pointer-events: none; }
.cc-ha__vs { position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; }
.cc-ha__vs .cc-vs__p, .cc-ha__vs .cc-video { object-position: 54% 40%; }
.cc-ha__test { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 9px; border-radius: 20px;
  background: rgba(10, 10, 10, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; visibility: hidden; transform-origin: 0 50%; }
.cc-ha__test .cc-chip { font-weight: 600; }

/* ------------------------------------------------------------------ ready: the seven tests */
.cc-re .cc-mid { align-items: center; padding-bottom: 92px; }
.cc-re__top { position: relative; display: grid; place-items: center; flex: none; width: var(--cc-reRing); height: var(--cc-reRing); }
.cc-re__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-re__glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 249, 24, .16), rgba(74, 249, 24, 0)); opacity: 0; }
.cc-re__n { position: relative; display: grid; place-items: center; }
.cc-re__n > span { grid-area: 1 / 1; padding-top: 4px; font-size: 64px; font-variant-numeric: tabular-nums; }
.cc-short .cc-re__n > span { font-size: 56px; }
.cc-re__s { margin-top: 22px; text-align: center; transition: color .3s linear; }
.cc-re__s.is-dim { color: var(--cc-faint); }
.cc-re__list { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 345px; }
.cc-short .cc-re__s { margin-top: 18px; } .cc-short .cc-re__list { margin-top: 18px; }
.cc-tst { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 7px; border-radius: 18px; background: var(--cc-card); box-shadow: inset 0 0 0 1px var(--cc-line); transition: box-shadow .3s linear; }
.cc-tst .cc-chip { white-space: nowrap; }
.cc-tst.is-open { box-shadow: inset 0 0 0 1.5px rgba(74, 249, 24, .6); }
.cc-tst.is-open .cc-ck { box-shadow: inset 0 0 0 1.5px var(--cc-lime); }
.cc-re .cc-btn { position: absolute; left: 24px; right: 24px; bottom: var(--cc-bot); width: auto; }
.cc-re .cc-btn.is-gone { pointer-events: none; }

/* ------------------------------------------------------------------ you: week 2 of 4, the streak, his sign-off */
.cc-yo__grid { margin-top: 20px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; flex: none; }
.cc-cell { position: relative; display: block; height: var(--cc-yoCell); border-radius: 11px; background: #141414; box-shadow: inset 0 0 0 1px #232323; }
.cc-cell.is-done { background: var(--cc-lime); box-shadow: none; }
.cc-cell__f { position: absolute; inset: 0; border-radius: inherit; background: var(--cc-lime); opacity: 0; transform: scale(.4); }
.cc-cell.is-today { box-shadow: inset 0 0 0 2px var(--cc-lime); }
.cc-cell__p { position: absolute; inset: -4px; border-radius: 14px; box-shadow: 0 0 0 1.5px var(--cc-lime); opacity: 0; }
.cc-cell.is-today .cc-cell__p.is-ping { animation: cc-cell 1.6s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes cc-cell { 0% { transform: scale(.9); opacity: .8; } 70%, 100% { transform: scale(1.18); opacity: 0; } }
.cc-yo__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; flex: none; }
.cc-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 15px; border-radius: 20px; background: var(--cc-card); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-tile__n { display: block; font: 400 40px/1 var(--cc-display); letter-spacing: .01em; color: var(--cc-paper); font-variant-numeric: tabular-nums; transform-origin: 0 80%; }
.cc-tile__l { color: var(--cc-mute); }
.cc-short .cc-yo__tiles { margin-top: 18px; } .cc-short .cc-tile { padding: 13px 16px 12px; } .cc-short .cc-tile__n { font-size: 34px; }
.cc-yo__q { margin-top: 20px; height: 56px; display: flex; align-items: center; gap: 12px; flex: none; }
.cc-short .cc-yo__q { margin-top: 14px; height: 52px; }
.cc-yo__q .cc-av { box-shadow: 0 0 0 2px var(--cc-night), 0 0 0 3.5px var(--cc-lime); opacity: 0; }
.cc-yo__b { display: inline-flex; align-items: center; height: 48px; padding: 2px 18px 0; border-radius: 22px 22px 22px 6px; background: var(--cc-paper); color: var(--cc-ink); transform-origin: 0 100%; opacity: 0; }

.cc-btn__lb .cc-btn__ck { position: absolute; left: -32px; top: 50%; margin-top: -11px; opacity: 0; }

/* ------------------------------------------------------------------ reduced motion: no pulse, no ping */
.cc-osrm .cc-dg__sl.is-hint .cc-dg__slg, .cc-rm .cc-dg__sl.is-hint .cc-dg__slg { animation: none !important; opacity: .34; }
.cc-osrm .cc-ha__dot::after, .cc-rm .cc-ha__dot::after, .cc-osrm .cc-cell__p, .cc-rm .cc-cell__p { animation: none !important; opacity: 0 !important; }
.cc-osrm .cc-btn, .cc-rm .cc-btn, .cc-osrm .cc-opt, .cc-rm .cc-opt { transition-duration: .15s; }

/* ------------------------------------------------------------------ hover (desktop, live) */
@media (hover: hover) {
  .cc-desk.cc-live .cc-tab:hover { color: var(--cc-mute); }
  .cc-desk.cc-live .cc-tab.is-on:hover { color: var(--cc-paper); }
  .cc-desk.cc-live .cc-opt:not(.is-on):hover { box-shadow: inset 0 0 0 1px #4A4A4A; }
  .cc-desk.cc-live .cc-btn:not(.is-off):not(.is-rest):hover { background: #63FF35; }
  .cc-desk.cc-live .cc-arw:hover::before { box-shadow: inset 0 0 0 1px #4A4A4A; }
  .cc-desk.cc-live .cc-arw--next:hover::before { background: #63FF35; }
  .cc-desk.cc-live .cc-hitz--sl:not(.is-off):hover { background: rgba(74, 249, 24, .08); }
  .cc-desk.cc-live .cc-hitz--kz:not(.is-off):hover { background: rgba(244, 244, 240, .06); }
}