:root{
  /* surfaces and text */
  --bg:#f4f1ea; --surface:#ffffff; --surface-2:#faf8f3; --ink:#122030; --muted:#56616c; --line:#e0dacd; --line-strong:#cbc3b2; --chip:#ebe6dc;
  /* data and states: blue for "selected / also drops", green and red for right and wrong */
  --accent:#25598a; --accent-ink:#ffffff; --good:#23784a; --bad:#b63a26;
  --thin:#b5611a; --full:#25598a;
  /* the brand: deep navy, cream, and gold kept for primary actions and key highlights */
  --navy:#0f2233; --navy-2:#152c42; --navy-3:#1e3a54; --navy-line:rgba(242,234,216,.14);
  --cream:#f2ead8; --cream-2:#b9c4ce; --gold:#f0bf34; --gold-hi:#f6cd55; --gold-ink:#13202e; --gold-text:#8a6408;
  --ring:#2a6db0; --seg-on:#ffffff;
  /* depth, shape, motion */
  --shadow-1:0 1px 2px rgba(18,32,48,.08),0 1px 1px rgba(18,32,48,.04);
  --shadow-2:0 6px 16px rgba(18,32,48,.10),0 1px 3px rgba(18,32,48,.08);
  --shadow-3:0 20px 48px rgba(8,18,28,.28),0 4px 12px rgba(8,18,28,.14);
  --r-sm:6px; --r:10px; --r-lg:12px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.12s; --t:.2s;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a1520; --surface:#112131; --surface-2:#0e1c2a; --ink:#efe8d8; --muted:#a3afba; --line:#21354a; --line-strong:#2e4862; --chip:#162a3c;
    --accent:#7db1e2; --accent-ink:#0a1520; --good:#5cc27c; --bad:#f07f69;
    --thin:#e89a55; --full:#7db1e2; --gold-text:#f2c24a; --ring:#f2c24a; --seg-on:#24425f;
    --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 6px 18px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3); --shadow-3:0 20px 48px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1520; --surface:#112131; --surface-2:#0e1c2a; --ink:#efe8d8; --muted:#a3afba; --line:#21354a; --line-strong:#2e4862; --chip:#162a3c;
  --accent:#7db1e2; --accent-ink:#0a1520; --good:#5cc27c; --bad:#f07f69;
  --thin:#e89a55; --full:#7db1e2; --gold-text:#f2c24a; --ring:#f2c24a; --seg-on:#24425f;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 6px 18px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3); --shadow-3:0 20px 48px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:20px 40px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.wrap{max-width:1680px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.gradebadge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;height:40px;box-sizing:border-box;padding:0 10px;border-radius:var(--r);background:var(--navy);color:var(--gold);border:1px solid var(--navy-line);box-shadow:var(--shadow-1);transition:background var(--t-fast) var(--ease)}
.gradebadge:hover{background:var(--navy-2)}
.gradebadge b{font:700 22px/1 var(--display);letter-spacing:.02em}
.bbar{width:40px;height:3px;border-radius:2px;background:rgba(242,234,216,.18);overflow:hidden}
.bbar i{display:block;height:100%;width:0;background:var(--gold);border-radius:2px;transition:width .25s var(--ease)}
.bbar i.neg{background:#ff8a7a}
.gradebadge.pop{animation:badgepop .7s ease-out}
@keyframes badgepop{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
.lvlcard{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;color:var(--cream);background:radial-gradient(circle at center,rgba(9,19,29,.92) 0,rgba(9,19,29,.66) 42%,transparent 76%);text-align:center;padding:0 16px}
.lvlcard small{font:600 14px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}
.lvlcard b{font:700 104px/1 var(--display);color:var(--gold);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.lvlcard span{font-size:15px;color:var(--cream);max-width:30ch}
.lvlcard.show{animation:lvlin 2.8s ease-out forwards}
.lvlcard.show b{animation:lvlpop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes lvlin{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes lvlpop{0%{transform:scale(.6);opacity:.2}100%{transform:scale(1);opacity:1}}
/* Level up to a new grade: a navy card that stays until Continue, the grade's focus (FOCUS_AT), then one row per unlock (UNLOCKS_AT) */
.menu.lvupmenu{z-index:72;align-items:center;justify-content:center;background:rgba(8,18,28,.6);padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
.lvupcard{width:min(100%,460px);max-height:min(100%,680px);overflow:hidden;gap:0;padding:0;background:var(--navy);color:var(--cream);border:1px solid var(--navy-line);border-top:3px solid var(--gold);animation:wnin .22s var(--ease)}
.lvuphead{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 20px 14px;text-align:center;border-bottom:1px solid var(--navy-line)}
.lvuphead small{font:600 14px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}
.lvuphead b{font:700 88px/1 var(--display);color:var(--gold);text-shadow:0 2px 24px rgba(0,0,0,.45);animation:lvlpop .5s cubic-bezier(.2,1.3,.4,1)}
.lvupfocus{display:flex;align-items:center;gap:8px;margin:6px 0 0;font:400 15px/1.3 var(--body);color:var(--cream-2)}
.lvupfocus svg{width:20px;height:20px;flex:none;color:var(--gold)}
.lvupfocus strong{font-weight:700;color:var(--cream)}
.lvuplabel{margin:0;padding:12px 20px 0;font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-2)}
.lvupfocus[hidden],.lvuplabel[hidden],.lvuplist[hidden]{display:none}
.lvuplist[hidden] + .lvupfoot{border-top:0}
.lvuplist{list-style:none;margin:0;padding:4px 20px;flex:1 1 auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.lvuplist li{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;min-height:44px;padding:10px 0;border-bottom:1px solid var(--navy-line)}
.lvuplist li:last-child{border-bottom:0}
.unlico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(240,191,52,.14);color:var(--gold)}
.unlico svg{width:22px;height:22px}
.lvuplist h3{margin:0;font:600 16px/1.25 var(--body);color:var(--cream)}
.lvuptry{font:600 14px var(--body);min-height:44px;padding:0 14px;border-radius:var(--r);border:1px solid rgba(242,234,216,.3);background:transparent;color:var(--cream);cursor:pointer;white-space:nowrap;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.lvuptry:hover{background:rgba(242,234,216,.07);border-color:rgba(242,234,216,.5)}
.lvupfoot{display:flex;justify-content:center;padding:12px 20px 16px;border-top:1px solid var(--navy-line)}
.lvupfoot .startbtn{min-width:180px}
.lvupcard :focus-visible{outline-color:var(--gold)}
@media (max-width:480px){.lvuphead{padding:14px 16px 10px}.lvuplabel{padding:10px 16px 0}.lvuphead b{font-size:64px}.lvuplist{padding:2px 16px}.lvuplist li{grid-template-columns:36px 1fr auto;gap:10px;padding:8px 0}.unlico{width:36px;height:36px}.lvupfoot{padding:10px 16px 12px}.lvupfoot .startbtn{flex:1}}
@media (prefers-reduced-motion:reduce){.lvupcard,.lvuphead b{animation:none}}
/* each grade of the ladder: its focus as the title, level with the node; its unlocks as chips under it (upcoming ones dashed and muted) */
.gfocus{display:flex;align-items:center;gap:7px;min-height:30px;margin:0;font:600 16px/1.25 var(--body);color:inherit}
.gfocus svg{width:18px;height:18px;flex:none;color:var(--gold-text)}
.ladder li:not(.done):not(.here) .gfocus svg{color:var(--muted)}
.unl{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.unlchip{display:inline-flex;align-items:center;gap:5px;font:500 13px/1 var(--body);padding:5px 9px 5px 6px;border-radius:999px;background:var(--chip);color:var(--ink);border:1px solid transparent}
.unlchip svg{width:14px;height:14px;flex:none;color:var(--gold-text)}
.unl.soon .unlchip{background:transparent;border:1px dashed var(--line-strong);color:var(--muted)}
.unl.soon .unlchip svg{color:var(--muted)}
.gradebadge{cursor:pointer}
.coach{background:var(--navy);color:var(--cream);border:1px solid var(--navy-line);border-left:3px solid var(--gold);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-2)}
.coach p{margin:0;font-size:15px;line-height:1.45}
.coach p b{color:var(--gold)}
.coach .coachstep{font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-2)}
.coach .coachnote{color:#ff9d8f}.coach .coachnote.ok{color:#8fe0a6}.coach .coachnote.also{color:#a9cdf2}   /* each note in its own outcome's colour */
.coach .coachnote .ricon{display:inline-block;vertical-align:-1px;margin-right:6px}
.coachbtns{display:flex;justify-content:space-between;align-items:center;gap:10px}
.coachbtns .link{color:var(--cream-2);min-height:40px;text-underline-offset:3px}
.coachbtns .startbtn{font-size:17px;padding:0 22px;min-height:40px}
.coachnav{display:flex;gap:8px;align-items:center}
.coachback{font:600 14px var(--body);min-height:40px;padding:0 16px;border-radius:var(--r);border:1px solid rgba(242,234,216,.3);background:transparent;color:var(--cream);cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.coachback:hover{background:rgba(242,234,216,.07);border-color:rgba(242,234,216,.5)}
.helpbtn{font:700 20px var(--display)}

.progcard{max-height:calc(100dvh - 90px);overflow-y:auto}
.ladder{list-style:none;margin:0;padding:0;position:relative}
.ladder::before{content:"";position:absolute;left:21px;top:14px;bottom:14px;width:2px;background:var(--line)}
.ladder li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;padding:6px 0}
.ladder .node{position:relative;z-index:1;width:44px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;font:700 16px var(--display);letter-spacing:.02em;background:var(--surface);border:1px solid var(--line-strong);color:var(--muted)}
.ladder .what{font-size:14px;color:var(--muted);line-height:1.3}
.ladder li.done .node{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.ladder li.done .what{color:var(--ink)}
.ladder li.here .node{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 28%,transparent)}
.ladder li.here .what{color:var(--ink);font-weight:600}
.ladder .here-bar{display:block;margin-top:5px;height:4px;border-radius:2px;background:var(--chip);overflow:hidden;max-width:180px}
.ladder .here-bar i{display:block;height:100%;background:var(--accent)}
.ladder .here-bar i.neg{background:var(--bad)}
.ladder li.dev{cursor:pointer}
.ladder small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.hright{display:flex;align-items:center;gap:10px;margin-left:auto}
.plwrap{position:relative}.plwrap[hidden]{display:none}
.plchip{height:40px;max-width:11em;display:flex;align-items:center;gap:6px;padding:0 12px 0 14px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 14px var(--body);cursor:pointer;white-space:nowrap;overflow:hidden;box-shadow:var(--shadow-1);transition:border-color var(--t-fast) var(--ease)}
.plchip:hover,.cog:hover{border-color:var(--muted)}
.plchip span{overflow:hidden;text-overflow:ellipsis}
.plmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:14em;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-3)}
.plmenu[hidden]{display:none}
.plmenu button{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:600 14px var(--body);text-align:left;cursor:pointer}
.plmenu button:hover{background:var(--chip)}.plmenu button[aria-current="true"]{color:var(--accent)}
.plmenu button small{color:var(--muted);font-weight:500}.plmenu hr{border:0;border-top:1px solid var(--line);margin:2px 0}
.cog{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);cursor:pointer;padding:0;box-shadow:var(--shadow-1);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.cog:hover{color:var(--ink)}
.menu{position:fixed;inset:0;z-index:60;background:rgba(8,18,28,.45);display:flex;justify-content:flex-end;align-items:flex-start;padding:70px 16px 16px}
.menucard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:12px 18px 18px;display:flex;flex-direction:column;gap:14px;width:min(100%,380px);max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.menucard > *{flex-shrink:0}
.menuhead{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 22px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;padding-bottom:10px;margin-inline:-18px;padding-inline:18px;border-bottom:1px solid var(--line)}
.menuclose{display:grid;place-items:center;width:40px;height:40px;margin-right:-10px;background:none;border:0;border-radius:var(--r);font-size:17px;color:var(--muted);cursor:pointer;padding:0;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.menuclose:hover{background:var(--chip);color:var(--ink)}
.menucard .opt{justify-content:space-between}
.settabs{align-self:stretch;display:grid;grid-template-columns:repeat(4,1fr)}
.settabs button{padding-inline:4px}
.menucard .optwrap{flex-wrap:wrap}.menucard .optwrap .seg{margin-left:auto}
.setpane{display:flex;flex-direction:column;gap:12px}.setpane[hidden]{display:none}
.showright{width:100%;min-height:44px;padding:10px 16px;font-size:14px;border-radius:var(--r)}.showright[hidden]{display:none}
.showright .replayicon{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:7px;flex:none}
.tuthl{border-radius:12px;animation:tuthl 1.3s ease-in-out infinite}
@keyframes tuthl{0%,100%{box-shadow:0 0 0 3px var(--gold),0 0 16px rgba(240,191,52,.5)}50%{box-shadow:0 0 0 3px rgba(240,191,52,.4),0 0 4px rgba(240,191,52,.15)}}
.librebuild{align-self:flex-start;min-height:36px;padding:0 14px;font-size:13px}
.setnote{color:var(--muted);font-size:12px;line-height:1.4}
.menucard .optrange{flex-direction:column;align-items:stretch;gap:6px}
.optrange span{color:var(--muted);font-weight:500;margin-left:0;text-transform:none;letter-spacing:0;font-size:13px}
.optrange input{width:100%;accent-color:var(--accent);min-height:24px}
.optcolor{display:flex;align-items:center;justify-content:space-between}
.optcolor input{width:48px;height:32px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.stancecard{position:absolute;left:12px;right:12px;bottom:12px;z-index:8;max-width:420px;margin:0 auto;background:rgba(15,34,51,.96);color:var(--cream);border:1px solid var(--navy-line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:16px 18px;display:flex;flex-direction:column;gap:10px;font:400 14px var(--body);text-align:left}
.stancecard[hidden]{display:none}
.stancecard b{font:700 22px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}.stancecard small{color:var(--cream-2);line-height:1.45}
.stancecard label{display:flex;flex-wrap:wrap;gap:4px 6px;font-weight:600}.stancecard label span{color:var(--gold);font-weight:500}
.stancecard input{width:100%;accent-color:var(--gold)}
.backticks{display:flex;justify-content:space-between;width:100%;margin-top:-2px}.backticks span,.stancecard label .backticks span{color:var(--muted);font-weight:500;font-size:12px;margin:0}.stancecard label .backticks span{color:var(--cream-2)}.stancecard .startbtn{align-self:center}
/* the app tour: a spotlight on one control at a time, and a coach card beside it */
.tour{position:fixed;inset:0;z-index:300;touch-action:none}
.tourlist{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5}.tourlist li::marker{color:var(--gold)}
.tourhole{position:fixed;border-radius:var(--r-lg);box-shadow:0 0 0 200vmax rgba(5,12,20,.62);pointer-events:none;transition:left .25s,top .25s,width .25s,height .25s}
.tourhole::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:tuthl 1.3s ease-in-out infinite}
.tourhole.none{width:0;height:0;left:50%;top:40%}.tourhole.none::after{display:none}
.tourcard{position:fixed;width:min(360px,calc(100vw - 24px));box-shadow:var(--shadow-3)}
.tourcard h3{margin:0;font:700 24px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--cream)}
@media (prefers-reduced-motion:reduce){.tourhole{transition:none}.tourhole::after,.tuthl{animation:none;box-shadow:0 0 0 3px var(--gold)}}
.stancecard .stcolors{display:flex;gap:18px}.stancecard .stcolor{align-items:center;flex-wrap:nowrap;gap:8px}
.stancecard .stcolor input{width:48px;height:32px;padding:2px;border:1px solid rgba(242,234,216,.3);border-radius:var(--r-sm);background:none;cursor:pointer}
.tutlist{display:flex;flex-direction:column;gap:8px}
.tutlist button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;text-align:left;font:600 15px var(--body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.tutlist button:hover{border-color:var(--line-strong);background:var(--surface)}
.tutlist button small{color:var(--muted);font-weight:500}
.aids{display:flex;flex-direction:column;gap:4px}
h1{font-family:var(--display);font-weight:700;font-size:36px;line-height:1;letter-spacing:.07em;text-transform:uppercase;margin:0;text-wrap:balance}
header h1{display:flex;align-items:center;gap:12px}
.hlogo{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;container-type:size;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='20' fill='%230f2233'/><circle cx='20' cy='20' r='19.5' fill='none' stroke='%23f2ead8' stroke-opacity='.35' stroke-width='1'/><circle cx='20' cy='20' r='16.6' fill='%23132b40' stroke='%23f0bf34' stroke-opacity='.85' stroke-width='1.1'/></svg>") center/contain no-repeat}   /* the half-ball mark; during a streak the count takes the balls' place on a gold disc */
header h1 .hlogo{margin-left:20px}   /* the logo stands on the same line as the radio's disc (and the eye below it on a phone); alignLogo() measures it, this is its first guess */
@media (hover:none) and (pointer:coarse){header h1 .hlogo{margin-left:11px}}
.hlogo i{position:absolute;inset:0;border-radius:50%;background:center/contain no-repeat;transition:opacity .22s var(--ease)}
.hlogo .lgold{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><radialGradient id='g' cx='38%' cy='30%' r='75%'><stop offset='0' stop-color='%23b2840f'/><stop offset='.55' stop-color='%23946a0a'/><stop offset='1' stop-color='%237a5606'/></radialGradient></defs><circle cx='20' cy='20' r='20' fill='%238a6408'/><circle cx='20' cy='20' r='19.5' fill='none' stroke='%23fbe7a6' stroke-opacity='.55' stroke-width='1'/><circle cx='20' cy='20' r='16.6' fill='url(%23g)' stroke='%23f6cd55' stroke-width='1.2'/></svg>");opacity:0}
.hlogo .lballs{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><radialGradient id='o' cx='40%' cy='34%' r='70%'><stop offset='0' stop-color='%23fbd65e'/><stop offset='.65' stop-color='%23f0bf34'/><stop offset='1' stop-color='%23c9971c'/></radialGradient><radialGradient id='c' cx='38%' cy='32%' r='72%'><stop offset='0' stop-color='%23fff'/><stop offset='.7' stop-color='%23f2ecdd'/><stop offset='1' stop-color='%23d3cab4'/></radialGradient></defs><circle cx='22.9' cy='17.1' r='8.2' fill='url(%23o)'/><circle cx='17.1' cy='22.9' r='8.2' fill='url(%23c)' stroke='%230f2233' stroke-width='.8'/><circle cx='17.1' cy='22.9' r='1.6' fill='%23d2362b'/></svg>")}
.hlogo .lnum{position:relative;font:700 18px/1 var(--display);font-size:46cqw;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 1px 1px rgba(58,38,0,.6);opacity:0;transition:opacity .22s var(--ease),color .22s var(--ease)}   /* white on the deep gold: about 4.8:1 behind the number */
.hlogo.n3 .lnum{font-size:14px;font-size:35cqw}
.hlogo.hot .lgold{opacity:1}
.hlogo.hot .lballs,.hlogo.over .lballs{opacity:0}
.hlogo.hot .lnum,.hlogo.over .lnum{opacity:1}
.hlogo.over .lnum{color:var(--cream);text-shadow:none}   /* the streak's last count, muted on the navy disc, before the balls come back */
.hlogo .lnum.pop{animation:logopop .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes logopop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hlogo .lnum.pop{animation:none}}
.hlogo::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0}
.hlogo.cheer::after{animation:logocheer .6s ease-out}   /* a streak shot: the sparks from the pocket land here and the disc rings once */
@keyframes logocheer{0%{opacity:1;box-shadow:0 0 0 0 rgba(246,205,85,.9),0 0 6px 2px rgba(246,205,85,.7)}100%{opacity:1;box-shadow:0 0 0 14px rgba(246,205,85,0),0 0 16px 6px rgba(246,205,85,0)}}
.table-box.cheer{animation:tablecheer .9s ease-out}   /* ...and the table's edge glows gold for a moment */
@keyframes tablecheer{0%,100%{box-shadow:var(--shadow-2)}25%{box-shadow:var(--shadow-2),0 0 0 2px rgba(246,205,85,.85),0 0 22px 4px rgba(246,205,85,.45)}}
.cheerfx{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:45}
@media (prefers-reduced-motion:reduce){.hlogo.cheer::after{animation:logoglow .9s ease-in-out}}
@keyframes logoglow{0%,100%{opacity:0;box-shadow:0 0 10px 3px rgba(246,205,85,.75)}40%{opacity:1;box-shadow:0 0 10px 3px rgba(246,205,85,.75)}}
.sub{color:var(--muted);margin:4px 0 0;max-width:60ch}
.seg{display:inline-flex;background:var(--chip);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{font:500 13px var(--body);min-height:32px;border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:7px;cursor:pointer;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.seg button:hover:not(:disabled){color:var(--ink)}
.seg button:disabled{opacity:.45;cursor:default}
.seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.controls{display:flex;flex-wrap:wrap;gap:8px}
.settings{border-top:1px solid var(--line);padding-top:16px}
.quick{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:14px;color:var(--muted);min-height:22px}
.quick b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.02em}
.quick b.ok{color:var(--good)} .quick b.no{color:var(--bad)}
.quick .in{color:var(--good);font-weight:600} .quick .out{color:var(--ink);font-weight:600}
.table-box.tappable{cursor:pointer}
.table-box.walkable svg{touch-action:none;cursor:grab}
.table-box.walkable svg:active{cursor:grabbing}
.modes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
.routinechip{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;background:rgba(15,34,51,.88);color:var(--cream);font:600 13px var(--body);min-height:32px;padding:5px 14px;border-radius:999px;border:1px solid var(--navy-line);box-shadow:var(--shadow-2);cursor:pointer}
.ctlrow{position:absolute;right:12px;bottom:12px;z-index:5;display:flex;align-items:flex-end;gap:16px;pointer-events:none}.ctlrow>*{pointer-events:auto}
.upbtn{font:700 20px var(--body);color:var(--cream)}
.seg button.locked,button.locked{opacity:.5;cursor:not-allowed}
.lock{display:inline-flex;vertical-align:-1px;margin-left:5px}.lock svg{width:11px;height:11px}
.ico{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;margin-left:5px}
.locktip{position:fixed;left:0;top:0;z-index:200;max-width:min(260px,calc(100vw - 16px));background:var(--ink);color:var(--bg);font:600 12px/1.3 var(--body);letter-spacing:.01em;padding:7px 10px;border-radius:var(--r-sm);box-shadow:var(--shadow-2);white-space:nowrap;pointer-events:none}
.locktip[hidden]{display:none}
.lookwrap{display:flex;flex-direction:column;align-items:center;gap:6px}.lookwrap[hidden]{display:none}
.ctlrow small{font:600 10px var(--body);color:var(--cream);text-shadow:0 1px 2px #000;letter-spacing:.1em;text-transform:uppercase}
.ctlrow .ckeys{display:flex;gap:3px}
.ctlrow kbd{box-sizing:border-box;height:20px;min-width:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--body);border-radius:5px;background:rgba(242,234,216,.94);color:var(--navy);border:0;box-shadow:inset 0 -1px 0 rgba(15,34,51,.25),0 1px 2px rgba(0,0,0,.35);white-space:nowrap}
.lookbtn{position:relative;display:grid;place-items:center;padding:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,234,216,.32);background:rgba(15,34,51,.82);color:var(--cream);font-size:18px;cursor:pointer;touch-action:none;box-shadow:var(--shadow-2);transition:background var(--t-fast) var(--ease)}
.lookbtn:hover{background:rgba(30,58,84,.9)}.lookbtn svg{width:22px;height:22px}
.focusbtn:disabled{opacity:.45;cursor:default}.focusbtn:disabled:hover{background:rgba(15,34,51,.82)}
.focusbtn:disabled + .ckeys{opacity:.45}
.focusbtn .fdot{transition:opacity var(--t-fast) var(--ease)}.focusbtn[aria-pressed="true"] .fdot{opacity:0}
@media (prefers-reduced-motion:reduce){.focusbtn .fdot{transition:none}}
.radio{position:absolute;left:8px;top:10px;z-index:5;width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;color:var(--cream)}
.radio .radiodisc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);background:rgba(15,34,51,.82);color:var(--gold);box-shadow:var(--shadow-2);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.radio .radiodisc svg{width:20px;height:20px}
.radio:hover .radiodisc{background:rgba(30,58,84,.9)}
.radio:focus-visible{outline:none}.radio:focus-visible .radiodisc{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--gold)}
#radiolbl,.stylelbl{font:600 9.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(15,34,51,.78);padding:3px 6px;border-radius:999px;white-space:nowrap}
.radio .eq rect{transform-box:fill-box;transform-origin:50% 100%;animation:radioeq 1.1s var(--ease) infinite alternate}
.radio .eq rect:nth-child(1){animation-delay:-.2s}.radio .eq rect:nth-child(2){animation-delay:-.75s;animation-duration:.9s}.radio .eq rect:nth-child(3){animation-delay:-.4s;animation-duration:1.25s}.radio .eq rect:nth-child(4){animation-delay:-.95s;animation-duration:.8s}
@keyframes radioeq{0%{transform:scaleY(.3)}50%{transform:scaleY(.85)}100%{transform:scaleY(.5)}}
.radio .mute{display:none}
.radio.off .radiodisc{border-color:rgba(242,234,216,.32);color:rgba(242,234,216,.72)}
.radio.off .eq{display:none}.radio.off .mute{display:inline}
.radio.off #radiolbl{color:rgba(242,234,216,.72)}
@media (prefers-reduced-motion:reduce){.radio .eq rect{animation:none;transform:none}.radio .eq rect:nth-child(odd){transform:scaleY(.55)}}
/* the Look button: a second disc under the radio; it opens the Look picker (table style, ball set, and the Ladder's table from S) */
.radio.stylebtn{top:78px}
.stylebtn .radiodisc{position:relative}
.stylebtn .wndot{top:-2px;right:-2px;box-shadow:0 0 0 2px var(--navy)}
.stylemenu{z-index:75;background:rgba(8,18,28,.22)}
.stylecard{gap:12px;width:min(100%,400px)}
#stylebody{display:flex;flex-direction:column;gap:14px}
.stylegrp{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0}
.stylegrp > b{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.styleopts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.styleopt{position:relative;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 7px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font:600 13px/1.2 var(--body);text-align:center;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.styleopt:hover{border-color:var(--muted)}
.styleopt[aria-checked="true"]{border-color:var(--accent);background:var(--chip);box-shadow:inset 0 0 0 1px var(--accent)}
.styleopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.styleopt svg{display:block;width:100%;max-width:64px;height:auto}
.styleopt small{font:500 11px/1.2 var(--body);color:var(--muted)}
.styleopt[aria-disabled="true"]{cursor:not-allowed}
.styleopt[aria-disabled="true"] svg,.styleopt[aria-disabled="true"] .stylename{opacity:.45}
.styleopt .wnpill{position:absolute;top:-7px;right:-4px;font:600 9px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold);border-radius:999px;padding:3px 6px}
.styleopt .lock{display:inline-flex;vertical-align:-1px;margin:0 3px 0 0}.styleopt .lock svg{width:10px;height:10px}
.stylesize .styleopt{flex-direction:row;justify-content:center}
@media (min-width:761px){.stylemenu{justify-content:flex-start;align-items:flex-start}}   /* beside the Look button (placeLookPicker) */
@media (max-width:760px){.stylemenu{justify-content:center;align-items:flex-end}.stylecard{max-height:62vh;max-height:62dvh}}   /* phones: a sheet along the bottom, so the table above shows each choice */
.modechip{position:absolute;left:12px;bottom:12px;z-index:5;background:rgba(15,34,51,.9);color:var(--cream);font:600 12px var(--body);min-height:32px;padding:6px 14px;border-radius:999px;border:1px solid var(--gold);box-shadow:var(--shadow-2);cursor:pointer}
.modechip b{color:var(--gold);margin-left:8px}
.ladder li.pick{cursor:pointer}.ladder li.practice .node{outline:2px dashed var(--gold);outline-offset:2px}
.routinechip kbd{font:600 10px var(--body);padding:1px 5px;margin-left:8px;border-radius:4px;background:rgba(242,234,216,.9);color:var(--navy)}
html.touch .routinechip kbd{display:none}
.speedbar{display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none;cursor:ns-resize;user-select:none}
.speedtrack{position:relative;width:16px;height:min(26vh,170px);min-height:96px;border-radius:9px;background:rgba(15,34,51,.6);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(242,234,216,.38),0 2px 6px rgba(0,0,0,.35)}
.speedtrack i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(var(--gold-hi),#dc9a1e)}
.speedbar b{font:600 13px var(--body);color:var(--cream);text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.shootctl{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-items:center;margin:8px 0}
.tippad{display:flex;flex-direction:column;align-items:center;gap:3px;touch-action:none}.tippad[hidden]{display:none}
.tippad svg{width:84px;height:84px;cursor:crosshair;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ckeys{display:flex;gap:2px}
.speedbar .ckeys kbd{cursor:pointer}
/* the right shot being replayed: the tip and speed show its stroke, in gold, and can't be changed until it's done */
.ctlrow::before{content:'Replay';position:absolute;right:0;bottom:calc(100% + 6px);font:600 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 1px 2px #000;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.ctlrow.replaying::before{opacity:1}
.ctlrow small,.ctlrow .ckeys{transition:color .4s var(--ease),opacity .4s var(--ease)}
.speedtrack,.tippad svg{transition:box-shadow .4s var(--ease)}
.tippad svg{border-radius:50%}
.ctlrow.replaying small{color:var(--gold-hi)}
.ctlrow.replaying .ckeys{opacity:.35}
.ctlrow.replaying .speedtrack{box-shadow:inset 0 0 0 1px var(--gold),0 0 0 1px rgba(240,191,52,.55),0 2px 6px rgba(0,0,0,.35)}
.ctlrow.replaying .tippad svg{box-shadow:0 0 0 1.5px var(--gold)}
.ctlrow.replaying .speedbar,.ctlrow.replaying .tippad svg,.ctlrow.replaying kbd{cursor:default}
@media (hover:none){.ctlrow .ckeys{display:none}   /* no keyboard: no keycaps, but speed's arrows stay as buttons */
  .ctlrow .speedbar .ckeys{display:flex;gap:6px}.ctlrow .speedbar .ckeys kbd{height:32px;min-width:32px;font-size:16px;border-radius:6px}}
html.kbd .ctlrow .ckeys{display:flex}html.touch .ctlrow .ckeys{display:none}html.touch .ctlrow .speedbar .ckeys{display:flex}   /* keycaps follow how you play (html.touch / .kbd); speed's arrows are buttons either way */
.modes button{font-size:15px;font-weight:600;min-height:40px;padding:8px 14px;display:inline-flex;align-items:center;justify-content:center}
.quick{flex-direction:column;align-items:flex-start;gap:2px;min-height:66px}
/* Run-outs: the rack so far (one dot a ball), and the run's summary once it ends */
.runrow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;min-height:44px;padding:8px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);font-size:13px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.runrow b{color:var(--ink);font-weight:600}
.runrow .runhead{display:flex;align-items:center;gap:10px;min-width:0}
.runrow .runverd{font:700 20px/22px var(--display);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.runrow .runverd.ok{color:var(--good)} .runrow .runverd.no{color:var(--bad)}
.runrow .runaside{display:flex;gap:4px 12px;flex-wrap:wrap;white-space:nowrap}
.rundots{display:inline-flex;gap:5px;align-items:center}
.rundots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent}
.rundots i.on{background:var(--good);border-color:var(--good)} .rundots i.off{background:var(--bad);border-color:var(--bad)}
/* Run-outs, the plan: targets drawn in an SVG laid over the table that shares the table's own viewBox, so each sits exactly on
   its ball or pocket at any size. Each is a hit circle (44 px or more, sized at render), a quiet ring on what can be picked
   now, a gold ring on the one a pocket is being picked for, and a numbered badge: the ball's place in the plan, and the same
   number at its pocket (a pocket taking several balls lists them) */
.runpick{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
.runpick[hidden]{display:none}
.runpick .pt{pointer-events:auto;cursor:pointer;outline:none}
.runpick .pt .hit{fill:#fff;fill-opacity:0}
.runpick .pt .ring{fill:none;stroke:#fff;stroke-opacity:.5;transition:stroke var(--t-fast) var(--ease),stroke-opacity var(--t-fast) var(--ease)}
.runpick .pt:hover .ring{stroke:var(--gold);stroke-opacity:.95}
.runpick .pt[aria-pressed="true"] .ring{stroke:var(--gold);stroke-opacity:1}
.runpick .pt[aria-disabled="true"]{cursor:default}
.runpick .pt:focus-visible .hit{fill-opacity:.1;stroke:var(--gold);stroke-dasharray:1 .7}
.runpick .pn rect{fill:var(--gold);stroke:#0b1a26;stroke-opacity:.6}
.runpick .pn text{fill:var(--gold-ink);font-family:var(--body);font-weight:700;text-anchor:middle;dominant-baseline:central}
.runcall .runmsg{margin:0 0 10px;font-size:15px;line-height:20px;color:var(--ink)}
.runcall .runmsg.warn{color:var(--bad);font-weight:600}
.runcall .planlist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;font-size:13px;line-height:18px;color:var(--muted)}
.runcall .planlist li{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 3px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.runcall .planlist li b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font:700 11px/18px var(--body)}
.runcall .planlist li.cur{border-color:var(--gold);color:var(--ink)}
.runcall .runbtns{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.runcall .runbtns .startbtn{font-size:18px;padding:9px 22px}
.runcall .runbtns .startbtn:disabled{opacity:.4;cursor:default}
.runcall .runbtns .runend{margin-left:auto}
.runrow .link{font-size:13px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.runpick .pt .ring{transition:none}}
@media (max-width:760px){.runrow{padding:6px 10px;font-size:12.5px}.runrow .runverd{font-size:18px;line-height:20px}}
.sumcover{background:rgba(9,19,29,.95);cursor:default;padding:16px;z-index:6;overflow:auto;justify-content:flex-start}
.sumcover .sumcard{margin:auto}
#playercover{position:fixed;z-index:100;background:radial-gradient(ellipse 120% 70% at 50% 0%,#17324a 0,#0e1f2f 55%,#08131d 100%)}#playercover .sumcard{width:100%;max-width:400px;gap:12px;padding-block:24px}
/* the title screen: the half-ball mark, the wordmark, what it trains; then the players */
.plhero{display:flex;flex-direction:column;align-items:center;width:100%}
.plmark{display:block;width:112px;height:112px;margin-bottom:20px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.plword{margin:0;font:700 60px/.9 var(--display);letter-spacing:.08em;padding-left:.08em;text-transform:uppercase;color:var(--cream)}
.pltag{margin:14px 0 0;max-width:30ch;font:400 16px/1.45 var(--body);color:var(--cream-2);text-wrap:balance}
.plpills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:18px 0 0;padding:0}
.plpills li{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);padding:7px 11px;border:1px solid rgba(242,234,216,.2);border-radius:999px;background:rgba(242,234,216,.04)}
.plpills li:first-child{color:var(--gold);border-color:rgba(240,191,52,.55);background:rgba(240,191,52,.08)}
.plcap{margin:10px 0 0;font:500 12px/1.3 var(--body);letter-spacing:.04em;color:#8e9caa}
.plrule{width:100%;height:1px;border:0;margin:14px 0 6px;background:linear-gradient(90deg,transparent,rgba(242,234,216,.2) 20%,rgba(242,234,216,.2) 80%,transparent)}
#playercover .idlehead{font:700 22px/1.1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
#playercover #plsub{text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;margin-top:-6px}
.pllist{display:flex;flex-direction:column;gap:8px;width:100%}.pllist:empty{display:none}
.plrow{display:flex;gap:8px;align-items:stretch}.plrow .plpick{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 10px 0 16px;text-align:left;overflow:hidden}
#playercover .plpick,#playercover .pldel,#playercover .plnew input,#playercover .plnew .startbtn{height:52px;box-sizing:border-box}   /* every button and field in the picker the same height */
#playercover .plpick{font:600 17px var(--body);letter-spacing:0;text-transform:none;color:var(--cream);background:var(--navy-2);border:1px solid rgba(242,234,216,.16);box-shadow:var(--shadow-1);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
#playercover .plpick:hover{background:var(--navy-3);border-color:rgba(240,191,52,.6)}
.plpick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#playercover .plpick small{flex:none;min-width:44px;text-align:center;font:700 16px/1 var(--display);letter-spacing:.06em;text-transform:none;color:var(--gold);background:rgba(240,191,52,.12);border:1px solid rgba(240,191,52,.3);padding:6px 10px;border-radius:999px}
.pldel{flex:none;width:52px;background:transparent;color:var(--cream-2);border:1px solid rgba(242,234,216,.16);border-radius:var(--r);padding:0;font-size:15px;cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.pldel:hover{color:#f07f69;border-color:rgba(240,127,105,.5)}
.plnew{display:flex;gap:8px;width:100%;margin-top:4px}.plnew[hidden]{display:none}.plnew input{flex:1;min-width:0;font:500 16px var(--body);padding:8px 14px;border-radius:var(--r);border:1px solid rgba(242,234,216,.24);background:rgba(8,19,29,.55);color:var(--cream);transition:border-color var(--t-fast) var(--ease)}
.plnew input::placeholder{color:#8e9caa}
.plnew input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(240,191,52,.25)}
.plnew .startbtn{font-size:18px;padding:0 18px;white-space:nowrap}
#plback{min-height:44px;padding:0 12px;margin-top:0}
@media (max-width:760px){.sumcover{padding:10px}.sumcard{gap:2px;font-size:12.5px}.sumcard small{font-size:11px}.sumdone{font-size:13px;padding:6px 14px}}
.sumcard{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:420px;text-align:center;color:var(--cream);font:400 14px var(--body);letter-spacing:0;text-transform:none}
.sumcard small{color:var(--cream-2);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.sumcover .sumcard > small{font:600 12px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-2)}
.idlehead{font:700 40px/1.05 var(--display);color:var(--cream);letter-spacing:.06em;text-transform:uppercase}
#startcover{cursor:pointer}#startcover .sumcard{gap:10px}#startcover .startbtn{white-space:nowrap;font-size:20px;min-height:48px;min-width:132px;padding:10px 28px;letter-spacing:.05em}
.table-box:has(#startcover:not([hidden])) .modechip{z-index:7}   /* Flash, ready: the pill stays on top, the way back to the picks */
@media (max-width:760px){.idlehead{font-size:32px}}
.endkeep{color:var(--cream-2);margin-top:8px;font-size:14px;min-height:40px;text-underline-offset:3px}
.sumdone{font:600 15px var(--body);min-height:44px;background:transparent;color:var(--cream);border:1px solid rgba(242,234,216,.34);border-radius:var(--r);padding:10px 22px;cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.sumdone:hover{background:rgba(242,234,216,.07);border-color:rgba(242,234,216,.55)}
.panel .sumdone,.menucard .sumdone{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-1)}   /* the same secondary button on the light panel and in menus */
.panel .sumdone:hover,.menucard .sumdone:hover{background:var(--surface-2);border-color:var(--muted)}
#fpsmeter{font-family:ui-monospace,Menlo,monospace}
.plbuild{font:500 12px/1.4 var(--body);color:#8e9caa;margin-top:8px;letter-spacing:.02em}
#playercover .plbuild{text-transform:none;letter-spacing:.02em;font-size:12px;font-weight:500}
.buildtag{flex:none;margin:8px 0 0 2px;font:500 12px/1.2 var(--body);color:var(--muted)}
.buildtag a,.plbuild a{color:inherit;text-decoration:underline;text-decoration-color:rgba(142,156,170,.6);text-underline-offset:3px}
.buildtag a:hover,.plbuild a:hover{color:var(--ink)}#playercover .plbuild a:hover{color:var(--cream)}
.devtag{display:inline-block;padding:1px 5px;margin-right:4px;border-radius:4px;background:var(--gold);color:var(--gold-ink);font:600 10px/1.3 var(--body);letter-spacing:.08em}
.devtag.unltag{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.devtag[hidden]{display:none}
/* the result card: drawn before the call with the rows this shot will report (pending ones as a dash), filled in place on the call */
.quick:has(.rcard){display:block;min-height:0}.quick:empty{display:none}   /* a lesson: no card, the coach says it */
.rcard{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 14px;box-shadow:var(--shadow-1);color:var(--ink);font-variant-numeric:tabular-nums}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.rcard .rverd{font:700 26px/28px var(--display);letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink)}
.rcard .rverd.ok{color:var(--good)} .rcard .rverd.no{color:var(--bad)} .rcard .rverd.also{color:var(--accent)}
.rverd .ricon{width:18px;height:18px}
.rcard.pend .rverd{color:var(--muted);font-weight:600;font-size:15px;font-family:var(--body);letter-spacing:.08em;text-transform:uppercase}
.raside{font-size:12px;line-height:1.3;color:var(--muted);text-align:right;min-width:0}
.rrows{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center;font-size:14px;line-height:20px}
.rrow{display:contents}
.rk{font:600 11px/20px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rval{min-width:0;min-height:20px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.rv{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.rv.ok{color:var(--good)} .rv.no{color:var(--bad)} .rv.also{color:var(--accent)}
.rcard.pend .rv{font-weight:500}
.ricon{width:12px;height:12px;flex:none;align-self:center}
.rr{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500;white-space:nowrap}
.rr small{font:600 11px/1 var(--body);letter-spacing:.07em;text-transform:uppercase}
.rr .rrv{color:var(--good);font-weight:600}
.rr.rnote{white-space:normal}
.rdash{display:inline-block;width:28px;height:6px;border-radius:3px;background:var(--chip);vertical-align:middle}
.rcard:not(.pend) .rverd,.rcard:not(.pend) .rval{animation:rin var(--t) var(--ease) both}
@keyframes rin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rcard .rverd,.rcard .rval{animation:none!important}}
.shootctl:not(:has(> :not([hidden]))){display:none}   /* nothing in it: no empty gap above the result */
@media (max-width:760px){   /* phones: no box, the rows in two columns (long ones across both), so table, fractions and Next still fit */
  .rcard{background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:6px 0 0}
  .rhead{min-height:22px;padding:0;margin-bottom:3px;border:0}
  .rcard .rverd{font-size:21px;line-height:22px}.rverd .ricon{width:15px;height:15px}
  .rcard.pend .rverd{font-size:12px}
  .rrows{grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;line-height:19px}
  .rrow{display:flex;align-items:center;gap:8px;min-width:0}
  .rrow.wide{grid-column:1/-1}
  .rk{flex:none;width:4.6em;font-size:10.5px;line-height:19px}
  .rval{gap:0 8px;min-height:19px}
  .rr small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* the arrow and the green say it; "right" stays for screen readers */
}
.opt{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.opt .seg button{padding:4px 10px;text-transform:none;letter-spacing:0}
.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.main.persp{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.dip{position:absolute;inset:0;z-index:4;background:#15100c;opacity:0;pointer-events:none;transition:opacity .15s ease-in}
.dip.out{transition:opacity .2s ease-out}
.table-box{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.dragging{-webkit-user-select:none;user-select:none}
.tutfade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6;transition:opacity .25s ease}
.tutfade.on{opacity:1}
.table-box{position:relative;background:#1b120b;border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;aspect-ratio:4/5;width:min(100%, 62vh);max-width:100%;margin-inline:auto}
.table-box.persp{aspect-ratio:3/2;width:100%}
@media (max-width:760px){.main,.main.persp{grid-template-columns:1fr}.table-box{width:min(100%, 46vh)}.table-box.persp{width:100%}}
.table-box > svg{display:block;width:100%;height:100%}
.table-box > #tablefx{position:absolute;inset:0;pointer-events:none;z-index:2}
.table-box > #table3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.table-box > #table{position:relative;z-index:1}
.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--navy);color:var(--gold);font:700 30px var(--display);letter-spacing:.08em;text-transform:uppercase}
.cover small{font:400 13px var(--body);color:var(--cream-2);letter-spacing:0;text-transform:none}
#cover{z-index:3}   /* Flash's call card (with Replay) sits above the table drawing, so its buttons take clicks */
.tablecol{min-width:0}
.badgewrap{position:relative;display:flex;flex:none}
/* brief notes (aids locking or unlocking, and the like): a toast in the header that fades, never over the table */
header{position:relative}
.hdtoast{position:absolute;left:50%;top:50%;z-index:8;display:flex;align-items:center;gap:8px;max-width:calc(100% - 8px);padding:7px 14px 7px 12px;border-radius:999px;background:var(--navy);color:var(--cream);border:1px solid var(--navy-line);box-shadow:var(--shadow-2);font:600 13px/1.25 var(--body);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-50%) translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.hdtoast::before{content:"";flex:none;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.hdtoast span{overflow:hidden;text-overflow:ellipsis}
.hdtoast b{color:var(--gold);font-variant-numeric:tabular-nums}
.hdtoast.dim::before{background:var(--cream-2)}
.hdtoast.show{opacity:1;transform:translate(-50%,-50%)}
.srsay{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.hdtoast{transform:translate(-50%,-50%)}}
/* shot breakdown: one fixed-size box, scrolls inside if a long explanation ever overflows */

.replay[hidden]{display:none}
.replay .replayicon{width:18px;height:18px;flex:none;display:block}
.replay{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 14px var(--body);letter-spacing:0;text-transform:none;min-height:40px;background:transparent;color:var(--gold);border:1px solid rgba(240,191,52,.7);border-radius:999px;padding:7px 18px;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.replay:hover{background:rgba(240,191,52,.1)}
.startbtn{font:700 22px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;min-height:44px;background:var(--gold);color:var(--gold-ink);border:0;border-radius:var(--r);padding:12px 32px;cursor:pointer;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.2);transition:background var(--t-fast) var(--ease)}
.startbtn:hover{background:var(--gold-hi)}.startbtn:active{background:#e0ad25;box-shadow:inset 0 1px 0 rgba(0,0,0,.12)}
.flashtrack{height:4px;margin-top:6px;border-radius:2px;overflow:hidden}
.flashbar{height:100%;width:100%;background:var(--accent);transform-origin:left;animation:shrink var(--dur,1500ms) linear forwards}
@keyframes shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.panel{display:flex;flex-direction:column;gap:16px}
.q{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.15;margin:0}
.q small{display:block;font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}
.answers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.answers button.also{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.answers button{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;min-height:56px;padding:12px 0 8px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.answers button span{font:500 11px var(--mono);color:var(--muted);letter-spacing:.02em}
.answers button:hover:not(:disabled){border-color:var(--accent);background:var(--surface-2)}
.answers button:disabled{cursor:default}
.answers.locked button{opacity:.45;pointer-events:none;box-shadow:none}   /* a new player's first visit: nothing to call until the first lesson */
.answers.tutoff button{opacity:.35;box-shadow:none;cursor:default}   /* a lesson step with nothing to call: a tap or a key does nothing */
.answers button.aimed{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.answers button.right{border-color:var(--good);box-shadow:inset 0 0 0 1px var(--good);background:color-mix(in srgb,var(--good) 15%,var(--surface))}
.answers button.wrong{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad);background:color-mix(in srgb,var(--bad) 13%,var(--surface))}
/* a call marked by shape as well as colour, as on the result card: a tick right, a ring for a call that drops but isn't the ideal, a cross wrong */
.answers button.right::before,.answers button.also::before,.answers button.wrong::before{content:'';position:absolute;top:6px;right:6px;width:12px;height:12px;-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;pointer-events:none}
.answers button.right::before{--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9.2 10 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background:var(--good)}
.answers button.also::before{--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");background:var(--accent)}
.answers button.wrong::before{--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3 3 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background:var(--bad)}
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.sumcover :focus-visible,.coach :focus-visible,.stancecard :focus-visible,.table-box :focus-visible,.gradebadge:focus-visible{outline-color:var(--gold)}   /* on navy, the ring is gold */
.verdict{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;margin:0;line-height:1.1}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)}
.badge{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--body);padding:3px 10px;border-radius:999px;margin-top:6px}
.badge.in{color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.badge.tip{color:var(--thin);background:color-mix(in srgb,var(--thin) 13%,var(--surface))}
.badge.out{color:var(--ink);background:var(--chip)}
.answers button{position:relative}
/* the right shot being replayed: its fraction lit in gold, the others stand back */
.answers button::after{content:'Replay';position:absolute;top:-8px;left:50%;transform:translateX(-50%);font:700 9px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--gold-ink);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.answers button{transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),opacity .4s var(--ease)}
.answers.replaying button:not(.playing){opacity:.45}
.answers.replaying button.playing{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px rgba(240,191,52,.22)}
.answers.replaying button.playing::after{opacity:1}
/* keyboard hints: small keycaps and key wording while you play with keys (html.kbd); tap wording while you play by touch (html.touch) */
.key{display:none}
html.touch .kbd-only,html:not(.touch) .touch-only{display:none}
html.kbd .key{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--muted);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:2px 4px;background:var(--surface-2)}
html.kbd .answers .key{margin-bottom:2px}
html.kbd .answers button{padding-top:8px}
html.kbd .showright .key,html.kbd .replay .key{margin-left:8px;vertical-align:1px}
html.kbd .next .key{margin-left:10px;vertical-align:2px;color:var(--gold-ink);border-color:rgba(19,32,46,.35);background:transparent}
html.kbd .next:disabled .key{color:var(--muted);border-color:var(--line-strong)}
.next{font:700 19px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;min-height:48px;background:var(--gold);color:var(--gold-ink);border:0;border-radius:var(--r);padding:14px 16px;cursor:pointer;width:100%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),var(--shadow-1);transition:background var(--t-fast) var(--ease)}
.next:hover:not(:disabled){background:var(--gold-hi)}.next:active:not(:disabled){background:#e0ad25}
.next:disabled{background:var(--chip);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.row{display:grid;grid-template-columns:38px 1fr 76px;gap:10px;align-items:center;font-size:13px}
.row .lab{font-family:var(--display);font-weight:700;font-size:18px}
.bar{height:8px;background:var(--chip);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.row .n{white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px;font-weight:600}
h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.02em;margin:0 0 4px;line-height:1.1}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;padding:0}
.link:hover{color:var(--ink)}.sumcover .link:hover,.coach .link:hover{color:var(--cream)}
.patterns{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px}
kbd{font-family:var(--mono);font-size:11px;background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
@media (max-width:760px){
  body{padding-block:10px 32px}
  .wrap{gap:12px}
  h1{font-size:26px}
  .sub{display:none}
  .panel{gap:10px}
  .q{font-size:17px}
  .q small{display:none}
  .table-box{width:min(100%, 44vh)}
  .answers{gap:6px}
  .answers button{padding:7px 0 5px;font-size:24px}
  .next,.showright{padding:9px 14px;min-height:44px}
  .next{font-size:18px}
  header h1{font-size:26px;gap:10px}header h1 .hlogo{width:34px;height:34px}
  .plword{font-size:52px}.plmark{width:96px;height:96px;margin-bottom:16px}
  #playercover{padding:16px}
  .plpills{gap:5px}.plpills li{padding:7px 9px;letter-spacing:.08em}
  #startcover .startbtn{font-size:17px;padding:10px 10px;letter-spacing:.03em}
  .opt{flex-wrap:wrap}
}
@media (max-width:420px){.answers button{font-size:24px}}
/* Phones, portrait: the header on one row (the mark alone when there's no room for the wordmark), so the table and the answers fit one screen */
@media (max-width:760px){
  header{flex-wrap:nowrap;align-items:center;gap:8px}
  header > div:first-child{flex:none}
  .hright{gap:6px;min-width:0}
  .plwrap{min-width:0}
  .plchip{max-width:9em;padding:0 10px 0 12px}
  .gradebadge{min-width:52px}
  .menu{padding:calc(60px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
  .menucard{padding-inline:16px}.menuhead{margin-inline:-16px;padding-inline:16px}
  .wrap{gap:8px}.buildtag{margin-top:4px}.main,.main.persp{gap:10px}   /* the mode switch a little higher */
  /* a lesson: the table and the fraction buttons stay together, the coach card under them, compact,
     its text scrolling inside so the whole card (and its Next) fits the screen with the toolbars showing */
  .panel > #coach,.panel > #quick,.panel > #next,.panel > #showright{order:1}
  .coach{padding:10px 12px;gap:6px}
  .coach p{font-size:14px;line-height:1.4;overflow-y:auto;overscroll-behavior:contain;max-height:max(60px, calc(100vh - (100vw - 32px)*2/3 - 332px));max-height:max(60px, calc(100dvh - (100vw - 32px)*2/3 - 332px))}
}
@media (max-width:439px){header h1{font-size:0;gap:0}header h1 .hlogo{width:38px;height:38px}}   /* the wordmark's text stays for screen readers */
/* Menus and covers: the close button stays in reach while a long menu scrolls, and nothing sits under the notch or the home bar */
@media (max-width:760px), (max-height:500px){
  .menuhead{position:sticky;top:-12px;z-index:2;background:var(--surface);margin-top:-12px;padding-top:12px}
  #playercover{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
}
/* Touch screens: tap targets of 44px in the header, panels and menus */
@media (hover:none) and (pointer:coarse){
  .plchip,.gradebadge{height:44px}
  .cog,.menuclose{width:44px;height:44px;flex:none}
  .modes button,.coachbtns .link,.coachbtns .startbtn,.coachback,.endkeep,.librebuild{min-height:44px}
  .seg button{min-height:40px}.seg.modes button{min-height:44px}
  .menucard .seg button{min-height:44px}
  .next{min-height:52px}
  .menucard .optrange input,.stancecard input[type=range]{min-height:44px}
  .optcolor input,.stancecard .stcolor input{width:56px;height:44px}
  .buildtag a{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.gradebadge.pop,.lvlcard.show b{animation:none}}

/* Desktop: one screen, two columns on a shared grid.
   Header row: title and mode switch share a centre line.
   Body row: table and panel share top and bottom edges; the panel's detail box stretches to meet the table's bottom. */
@media (min-width:900px){
  body{padding-block:16px}
  .wrap{height:calc(100vh - 32px);height:calc(100dvh - 32px);min-height:620px;gap:16px}
  header{flex:none;align-items:center;flex-wrap:nowrap}
  header h1{font-size:34px}
  .sub{display:none}
  .main,.main.persp{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) clamp(360px,31vw,440px);gap:24px;align-items:stretch}
  .tablecol{display:flex;flex-direction:column;gap:6px;min-height:0}
  .table-box,.table-box.persp{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;margin:0}
  .flashtrack{flex:none;margin-top:0}
  .panel{min-height:0;display:flex;flex-direction:column;gap:16px;padding-bottom:10px}
  .q{margin-top:0;line-height:1.1}
  .q small{line-height:1.35}
}
/* Phones on their side: the desktop one-screen layout, table left and panel right, fitted to the short screen */
@media (min-width:600px) and (max-height:500px) and (orientation:landscape){
  body{padding-block:8px}
  .wrap{height:calc(100vh - 16px);height:calc(100dvh - 16px);min-height:0;gap:8px}
  header{flex:none;align-items:center;flex-wrap:nowrap}
  header h1{font-size:24px;gap:10px}header h1 .hlogo{width:32px;height:32px}
  .sub{display:none}
  .main,.main.persp{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) clamp(300px,42vw,400px);gap:16px;align-items:stretch}
  .tablecol{display:flex;flex-direction:column;gap:4px;min-height:0}
  .table-box,.table-box.persp{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;margin:0}
  .buildtag{margin-top:2px}
  .flashtrack{flex:none;margin-top:0}
  .panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:8px;padding-bottom:max(8px, env(safe-area-inset-bottom))}
  .q{font-size:17px}.q small{display:none}
  .quick{min-height:44px}
  .answers{gap:6px}.answers button{padding:7px 0 5px;font-size:24px;min-height:52px}
  .panel > #coach,.panel > #quick,.panel > #next,.panel > #showright{order:1}   /* a lesson: the coach card under the fraction buttons */
  .coach{padding:10px 12px;gap:6px}
  .coach p{font-size:14px;line-height:1.4;overflow-y:auto;overscroll-behavior:contain;max-height:max(60px, calc(100vh - 290px));max-height:max(60px, calc(100dvh - 290px))}
  .menu{padding:calc(56px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
  .plmark{width:64px;height:64px;margin-bottom:10px}.plword{font-size:44px}.pltag{margin-top:8px;font-size:15px}.plpills{margin-top:10px}   /* the title screen: a smaller hero, so the players come sooner */
}
@media (hover:none) and (pointer:coarse){   /* phones and tablets: smaller controls, the eye and stand-up on the left, tip and speed on the right */
  .ctlrow{left:8px;right:8px;bottom:8px;gap:10px}
  #lookwrap,#focuswrap{margin-right:auto}#lookwrap:has(+ #focuswrap:not([hidden])){margin-right:0}   /* the focus button sits beside the eye */
  .lookbtn{width:36px;height:36px;font-size:15px}
  .tippad svg{width:60px;height:60px}
  .speedbar{gap:3px}.speedbar b{font-size:11px}
  .speedtrack{width:12px;height:min(15vh,92px);min-height:60px}
  .ctlrow small{font-size:9px}
  .ctlrow .speedbar .ckeys kbd{height:26px;min-width:26px;font-size:14px}
  .radio{left:4px;top:6px;width:60px}.radio .radiodisc{width:32px;height:32px}.radio .radiodisc svg{width:17px;height:17px}
  .modechip{bottom:56px;left:8px;font-size:11px;padding:5px 10px;min-height:28px}
  .routinechip{font-size:12px;padding:4px 10px}
}

/* ---------- the app shell on phones: notch and home-indicator insets, toolbars, pull-to-refresh ---------- */
/* the page keeps clear of the notch and the home indicator (all zero on a desktop) */
html{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior-y:none}   /* no pull-to-refresh mid-session */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#playercover{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.sumcover{overscroll-behavior:contain}
@media (min-width:900px){
  .wrap{height:calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
/* a phone on its side: the table fits between the toolbars rather than running off the bottom */
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
  body{padding-block:10px 16px}
  .table-box{width:min(100%, calc((100vh - 84px)*.8));width:min(100%, calc((100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.8))}
  .table-box.persp{width:100%}
}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse) and (min-width:900px){
  .wrap{min-height:0;height:calc(100dvh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}

/* ---------- touch on the table: finger-sized targets, no zoom or scroll while dragging, pressed states ---------- */
.table-box{touch-action:manipulation}   /* a quick second tap on the table is a tap, not a zoom */
.ctlrow,.ctlrow *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tippad,.speedbar{position:relative}
.speedbar .ckeys kbd{touch-action:manipulation}
/* while a finger is on the tip pad, a bigger copy of it floats above, where the finger can't hide the dot */
.tiploupe{position:absolute;left:50%;bottom:calc(100% + 10px);width:116px;height:116px;margin-left:-58px;border-radius:50%;background:rgba(15,34,51,.92);border:1px solid var(--gold);box-shadow:var(--shadow-3);padding:6px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);z-index:2}
.tippad .tiploupe svg{display:block;width:100%;height:100%;filter:none;box-shadow:none;cursor:inherit}
.tippad.held .tiploupe{opacity:1;transform:none}
/* and on the speed bar, the level shows above the finger */
.ctlbubble{position:absolute;left:50%;bottom:calc(100% + 8px);min-width:48px;transform:translate(-50%,6px);padding:6px 10px;border-radius:999px;background:rgba(15,34,51,.94);border:1px solid var(--gold);color:var(--cream);font:700 20px/1 var(--display);letter-spacing:.04em;text-align:center;box-shadow:var(--shadow-2);pointer-events:none;opacity:0;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);z-index:2}
.speedbar.held .ctlbubble{opacity:1;transform:translate(-50%,0)}
.tippad.held > svg,.speedbar.held .speedtrack{box-shadow:0 0 0 2px var(--gold),0 2px 6px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.tiploupe,.ctlbubble{transform:none!important}}
@media (hover:none) and (pointer:coarse){
  /* 44px for every control, drawn the same size where the art is smaller: the hit area reaches past it */
  .lookbtn{width:44px;height:44px}.lookbtn svg{width:20px;height:20px}
  .lookbtn:active{background:rgba(30,58,84,.96);border-color:var(--gold)}
  .tippad svg{width:66px;height:66px}
  .tippad::before{content:'';position:absolute;inset:-8px 2px -6px -10px}   /* not to the right: that's the speed bar */
  .speedbar{min-width:48px}
  .speedbar::before{content:'';position:absolute;inset:-8px -6px 0}
  .speedtrack{width:14px}
  .ctlrow .speedbar .ckeys{gap:8px}
  .ctlrow .speedbar .ckeys kbd{position:relative;height:32px;min-width:36px;font-size:16px}
  .ctlrow .speedbar .ckeys kbd::after{content:'';position:absolute;inset:-6px -4px}
  .ctlrow .speedbar .ckeys kbd:active{background:var(--gold);color:var(--gold-ink)}
  .radio{left:0;top:2px;width:60px;min-width:48px;min-height:48px;justify-content:center}
  .radio.stylebtn{top:62px}   /* its disc centred over the eye below it (8px in, 44px wide) */
  .radio:active .radiodisc{transform:scale(.92);background:rgba(30,58,84,.96)}
  .modechip{bottom:68px;min-height:36px}
  .modechip::after,.routinechip::after{content:'';position:absolute;inset:-5px -2px}
  .routinechip{min-height:36px}
  .modechip:active,.routinechip:active{background:rgba(30,58,84,.98)}
}
/* phones: the first-launch stance card is a sheet along the bottom of the screen, not inside the short table, so all of it
   (height, distance, colours, Done) can be reached, with the table above it still showing the view as it changes */
@media (max-width:760px){
  .stancecard{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:60;
    max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
}
/* Practice: what comes up */
.modemenu{z-index:62;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.modecard{width:min(100%,460px);gap:12px;animation:wnin .18s var(--ease)}
.modecard .setnote{margin:0;font-size:13px}
.modeopt{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column}
.modeopt legend{padding:0;margin:0 0 6px;font:600 14px var(--body);color:var(--ink)}
.modeopt legend small{color:var(--muted);font-weight:500;font-size:12.5px;margin-left:6px}
.modeseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;box-sizing:border-box}
.modeseg button{min-height:44px;font-size:14px;padding:6px 8px}
.drillfr button{font-size:17px}
.modeopt:disabled .modeseg{opacity:.5}.modeopt:disabled .seg button:disabled{opacity:1}
.drillweak{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:10px 14px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);cursor:pointer;font:inherit;transition:border-color var(--t-fast) var(--ease)}
.drillweak:hover{border-color:var(--line-strong)}
.drillweak b{display:block;font:600 15px var(--body)}.drillweak small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:2px}
.drillsw{flex:none;position:relative;width:42px;height:26px;border-radius:999px;background:var(--line-strong);transition:background var(--t-fast) var(--ease)}
.drillsw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-1);transition:transform var(--t-fast) var(--ease)}
.drillweak[aria-checked="true"]{border-color:var(--gold)}.drillweak[aria-checked="true"] .drillsw{background:var(--gold)}.drillweak[aria-checked="true"] .drillsw::after{transform:translateX(16px)}
.modedone{align-self:stretch;margin-top:2px}
@media (max-width:760px){   /* phones: a sheet along the bottom, like the stance card */
  .modemenu{align-items:flex-end;padding:max(8px,env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}
  .modecard{width:100%;max-height:100%;padding:10px 14px 14px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.modecard{animation:none}.drillsw,.drillsw::after{transition:none}}
/* What's new: a centred card over a scrim; the head and Got it stay put while the notes scroll inside */
.helpbtn{position:relative}
.wndot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.tutlist button .wnpill,.wnentry .wnpill{font:600 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold);border-radius:999px;padding:4px 7px}
.menu.wnmenu{z-index:70;align-items:center;justify-content:center;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
.wncard{width:min(100%,440px);max-height:min(100%,640px);overflow:hidden;gap:0;padding:0;animation:wnin .18s var(--ease)}
@keyframes wnin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.wnhead{padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.wnhead small{display:block;font:600 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.wnhead h2{margin:4px 0 0;color:var(--ink);font:700 28px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.wnbody{flex:1 1 auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px;outline:none}
.wnentry{padding:14px 0;border-bottom:1px solid var(--line)}.wnentry:last-child{border-bottom:0}
.wnmeta{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--muted)}
.wnentry h3{margin:6px 0 4px;font:600 16px/1.3 var(--body);color:var(--ink)}
.wnentry ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.wnentry li{margin:3px 0}.wnentry li::marker{color:var(--gold-text)}
.wnentry p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}.wnentry p+p{margin-top:8px}.wnentry a{color:var(--gold-text)}
.wnmore{display:block;width:100%;min-height:44px;margin:4px 0 10px;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r);font:600 14px var(--body);color:var(--muted);cursor:pointer}
.wnmore:hover{color:var(--ink);border-color:var(--muted)}
.wnfoot{display:flex;justify-content:flex-end;padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--surface)}
.wnfoot .startbtn{min-width:140px;padding:12px 24px}
@media (max-width:480px){.wnfoot .startbtn{flex:1}.wnhead{padding:14px 16px 10px}.wnbody{padding:2px 16px}.wnfoot{padding:10px 16px 12px}}
@media (prefers-reduced-motion:reduce){.wncard{animation:none}}
/* Back up / Restore: the What's new card, with sections, choices and a message line */
.bkbody{display:flex;flex-direction:column;gap:10px;padding:10px 20px 16px}
.bkbody h3{margin:8px 0 0;font:600 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bkbody p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.bkbody p.bknote{font-size:13px;color:var(--muted)}
.bkrow{display:flex;flex-wrap:wrap;gap:8px}
.bkbody .sumdone,.bkfoot .sumdone{min-height:44px;padding:0 16px}
.bkrow .sumdone{flex:1 1 auto}
.bkfoot{gap:10px}
.bkgroup{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.bkgroup legend{padding:0;margin-bottom:6px;font:600 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bkopt{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font:600 14.5px/1.35 var(--body);cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.bkopt:hover{border-color:var(--muted)}
.bkopt.on{border-color:var(--accent);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent)}
.bkopt input[type=radio]{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
.bkopt span{flex:1;min-width:0}
.bkopt small{display:block;margin-top:2px;font-weight:400;font-size:13px;color:var(--muted)}
.bkopt.off{opacity:.55;cursor:not-allowed}
.bkname{display:block;font:600 13px var(--body);color:var(--muted)}
.bkname input{display:block;width:100%;min-height:44px;margin-top:6px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:500 16px var(--body)}
.bkname input[aria-invalid="true"]{border-color:var(--bad)}
.bkerr{margin:0;font-size:13px;color:var(--bad)}.bkerr:empty{display:none}
.bkmsg{margin:0;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);border-left:4px solid var(--muted);background:var(--surface-2);font-size:14px;line-height:1.45;color:var(--ink)}
.bkmsg:empty{display:none}.bkmsg.ok{border-left-color:var(--good)}.bkmsg.bad{border-left-color:var(--bad)}
.bkwarn{color:var(--bad)!important}
@media (max-width:480px){.bkbody{padding:8px 16px 14px}.bkfoot .startbtn,.bkfoot .sumdone{flex:1}}
/* keyboard shortcuts: the What's new card, a key on the left and what it does on the right */
.keyscard{width:min(100%,420px)}
.keylist{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:baseline;margin:14px 0 16px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.keylist dt{display:flex;flex-wrap:wrap;gap:4px;white-space:nowrap}.keylist dd{margin:0}.keylist dd small{display:block;color:var(--muted);font-size:12.5px}
.keylist kbd{display:inline-block;min-width:24px;text-align:center;font:600 12px/1 var(--mono);color:var(--ink);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:4px 6px;background:var(--surface-2)}
html.touch .tutlist .kbd-only{display:none}
/* a small question card (rename, delete, reset): the What's new card's head and foot, over everything, the title screen too */
.menu.wnmenu.askmenu{z-index:110}
.askcard{width:min(100%,400px)}.askcard form{display:contents}
.askbody{padding:14px 20px 18px;display:flex;flex-direction:column;gap:12px}.askbody p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.askbody input{width:100%;height:48px;font:500 16px var(--body);padding:8px 14px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink)}
.askbody input:focus{border-color:var(--ring)}
.wnfoot.askfoot{gap:10px}.askfoot .sumdone{min-width:110px}
.startbtn.danger,.startbtn.danger:hover,.startbtn.danger:active{background:var(--bad);color:var(--accent-ink)}.startbtn.danger:hover{filter:brightness(1.08)}
@media (max-width:480px){.askbody{padding:12px 16px 16px}.askfoot .sumdone{flex:1}}
/* ---------- Stats: the header button, the compact summary under the controls, and the full view ---------- */
.statsbtn{height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 13px 0 11px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 14px var(--body);cursor:pointer;box-shadow:var(--shadow-1);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.statsbtn:hover{border-color:var(--muted)}
.statsbtn svg{color:var(--accent);flex:none}
.statsbtn[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:var(--cream)}.statsbtn[aria-expanded="true"] svg{color:var(--gold)}
@media (max-width:439px){.statsbtn{width:40px;padding:0;justify-content:center}.statsbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.statsview{position:fixed;inset:0;z-index:58;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);animation:svin .18s var(--ease) both}
@keyframes svin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.svopen,html.svopen body{overflow:hidden}
@media (min-width:900px) and (min-height:501px){   /* a desktop: over the table and the panel, under the header */
  .main{position:relative}
  .statsview{position:absolute;inset:0;z-index:30;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
  html.svopen,html.svopen body{overflow:visible}
}
.svtop{flex:none;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.svback{width:auto;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 8px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 15px var(--body);cursor:pointer;flex:none;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.svback:hover{background:var(--surface-2);border-color:var(--muted)}
.svtitle{margin:0;font:700 26px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);display:flex;align-items:baseline;gap:10px;min-width:0}
.svtitle:focus{outline:none}
.svtitle small{font:500 13px var(--body);letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svmode{margin-left:auto;flex:none}
.svmode .ico{width:11px;height:11px;margin-left:4px}
.svtabs{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border-bottom:1px solid var(--line);padding:0 8px}
.svtabs button{min-height:46px;padding:0 4px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);font:600 14px var(--body);cursor:pointer;white-space:nowrap;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.svtabs button:hover{color:var(--ink)}
.svtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold-text)}
.svtabs button:focus-visible{outline-offset:-3px}
@media (min-width:760px){.svtabs{display:flex;gap:6px;padding:0 16px}.svtabs button{padding:0 14px;font-size:15px}}
@media (max-width:379px){.svtabs{padding:0 2px}.svtabs button{font-size:13px;padding:0 2px}.svtop{gap:8px;padding:8px 10px}.svback span{display:none}.svback{padding:0 10px}}
.svbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
.svbody:focus{outline:none}
@media (min-width:760px){.svbody{padding:20px 24px 32px}}
.svin{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.svin > .svgrid:last-child{margin-bottom:-16px}
.svgrid{columns:2 400px;column-gap:16px}   /* two columns when there's room; cards flow down them so short ones don't leave gaps */
.svgrid > *{break-inside:avoid;margin-bottom:16px}
.svgrid > .svkpis,.svgrid > .svcard.wide{column-span:all}
.svcard{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-1)}
.svch h3{margin:0;font:700 20px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.svch p{margin:3px 0 14px;font-size:13px;line-height:1.4;color:var(--muted)}
.svcard h4{margin:16px 0 8px;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svcard h4:first-of-type{margin-top:4px}
.svnote{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* key numbers */
.svkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.svkpis.mini{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));margin-bottom:14px}
.svkpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:2px;min-width:0}
.svcard .svkpi{background:var(--surface-2);box-shadow:none}
.svkpi b{font:700 30px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.svkpi span{font:600 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svkpi small{font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.svkpi.grade{background:var(--navy);border-color:var(--navy);color:var(--gold)}.svkpi.grade span,.svkpi.grade small{color:var(--cream-2)}
.svempty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:22px 16px;border:1px dashed var(--line-strong);border-radius:var(--r);color:var(--muted)}
.svempty b{font:600 15px var(--body);color:var(--ink)}
.svempty span{font-size:13px;max-width:44ch}
/* bars: label, bar, value */
.svbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.svbar{display:grid;grid-template-columns:minmax(64px,32%) minmax(0,1fr) auto;gap:10px;align-items:center;min-height:30px}
.svbl{font-size:14px;font-weight:500;min-width:0;overflow-wrap:anywhere;line-height:1.25}
.svbl.big{font:700 20px/1 var(--display)}
.svbt{display:block;height:10px;background:var(--chip);border-radius:5px;overflow:hidden}
.svbt i{display:block;height:100%;background:var(--accent);border-radius:5px}
.svbar.few .svbt i{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,color-mix(in srgb,var(--accent) 35%,transparent) 3px 6px)}
.svbars.bad .svbt i{background:var(--bad)}
.svbar.none .svbl{color:var(--muted)}
.svbv{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;min-width:96px;font-variant-numeric:tabular-nums}
.svbv b{font-weight:600;font-size:14px}
.svbv small{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
/* tables */
.svtw{overflow-x:auto;margin-top:12px}
.svt{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.svt th,.svt td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.svt thead th{font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.svt .l{text-align:left;font-weight:500}
.svt tbody th{font-weight:500}
.svt td small{color:var(--muted);font-size:11px;margin-left:4px}
@media (max-width:599px){.svkpis.mini.wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the confusion heatmap */
.svheat{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums;margin:0 auto}
.svheat th{font:700 18px var(--display);text-align:center;padding:0 4px;color:var(--ink)}
.svheat tbody th{text-align:right;padding-right:8px}
.svheat th.corner{font:600 10px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;vertical-align:bottom}
.svheat th.corner span{display:block}.svheat th.corner span + span{text-align:right}
.svheat td{min-width:46px;height:46px;text-align:center;border-radius:6px;background:var(--chip);color:var(--muted);line-height:1.05}
.svheat td b{display:block;font:600 14px var(--mono)}
.svheat td small{display:block;font-size:10px;opacity:.85}
.svheat td.diag{box-shadow:inset 0 0 0 2px var(--good)}
.statsview{--heat-span:52%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statsview{--heat-span:36%}}
:root[data-theme="dark"] .statsview{--heat-span:36%}
.svheat td.c{background:color-mix(in srgb,var(--accent) calc(8% + var(--s)*var(--heat-span)),var(--surface));color:var(--ink)}
@media (max-width:480px){.svheat{border-spacing:2px}.svheat td{min-width:40px;height:42px}.svheat th{font-size:16px;padding:0 2px}.svheat td.tot,.svheat th.tot{min-width:30px;padding-left:2px}}
.svheat td.tot,.svheat th.tot{background:none;font:500 12px var(--mono);color:var(--muted);min-width:36px;padding-left:6px}
/* legends */
.svlegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--muted)}
.svlegend span{display:inline-flex;align-items:center}
.sw{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:6px;flex:none}
.sw.r{background:var(--good)}.sw.h{border:2px solid var(--good);background:linear-gradient(to top,var(--good) 50%,transparent 50%)}.sw.m{border:2px solid var(--bad)}
.sw.ramp{width:40px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),color-mix(in srgb,var(--accent) calc(8% + var(--heat-span)),var(--surface)))}
.sw.diag{background:var(--chip);box-shadow:inset 0 0 0 2px var(--good)}
.sw.hotb{background:var(--accent)}.sw.cold{border:1.5px solid var(--accent)}
.sw.hotl{height:0;border-top:2px dashed var(--gold-text);border-radius:0}
.sw.ln{height:0;border-top:2.5px solid var(--accent);border-radius:0}.sw.mean{height:0;border-top:1.5px dashed var(--muted);border-radius:0}
@media (max-width:599px){.svkpis:not(.mini){grid-template-columns:repeat(3,minmax(0,1fr))}.svkpi.lead{grid-column:span 2}}
/* recent form: filled right, half-filled partial, hollow miss */
.svform{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:3px}
.svform i{aspect-ratio:1;border-radius:2px}
.svform i.r{background:var(--good)}
.svform i.h{border:2px solid var(--good);background:linear-gradient(to top,var(--good) 50%,transparent 50%)}
.svform i.m{border:2px solid var(--bad)}
/* lean: misses split too full (left) and too thin (right) */
.svlean{display:flex;flex-direction:column;gap:8px}
.svleanh,.svleanr{display:grid;grid-template-columns:minmax(84px,32%) minmax(0,1fr) 92px;gap:10px;align-items:center}
.svleanh{font-size:11px;color:var(--muted)}.svleanh .mid{display:flex;justify-content:space-between}
.svleanr .lab{font-size:14px;font-weight:500;line-height:1.25}
.svleanr .trk{position:relative;height:12px;background:var(--chip);border-radius:6px}
.svleanr .trk::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1.5px;background:var(--muted)}
.svleanr .trk i{position:absolute;top:0;bottom:0}
.svleanr .trk i.full{right:50%;background:var(--full);border-radius:6px 0 0 6px}
.svleanr .trk i.thin{left:50%;background:var(--thin);border-radius:0 6px 6px 0}
.svleanr .val{text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.svleanr .val b{font-weight:600;font-size:13px}.svleanr .val small{display:block;font-size:11px;color:var(--muted)}
/* patterns */
.svins{margin:0;border-top:1px solid var(--line)}
.svins div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.svins dt,.svins dd{margin:0}
.svins dt{font:600 11px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);align-self:center}
.svins dd{text-align:right;font:600 15px var(--body);font-variant-numeric:tabular-nums}
.svins dd small{font-weight:400;font-size:12.5px;color:var(--muted);margin-left:6px}
.svins dd.up{color:var(--good)}.svins dd.down{color:var(--bad)}.svins dd.none{color:var(--muted);font-weight:400}
/* charts */
.svchart{min-width:0}
.svchart svg,.svgrade,.svstreak{display:block;max-width:100%;height:auto;overflow:visible;touch-action:pan-y}
.svread{margin:0 0 6px;min-height:21px;font:600 14px var(--body);font-variant-numeric:tabular-nums}
.svline:focus{outline:none}.svline:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:4px}
.svline .g,.svgrade .g,.svstreak .g{stroke:var(--line);stroke-width:1}
.svline .g.base,.svgrade .g.base,.svstreak .g.base{stroke:var(--line-strong)}
.svline text,.svgrade text,.svstreak text{font:500 11px var(--mono);fill:var(--muted)}
.svline .yl,.svgrade .yl,.svstreak .yl{text-anchor:end}
.svline .mean{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}
.svline .area{fill:var(--accent);fill-opacity:.10}
.svline .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.svline .pt{fill:var(--surface);stroke:var(--accent);stroke-width:2}
.svline .hair{stroke:var(--muted);stroke-dasharray:3 3}
.svline .hot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.svgrade .step{fill:none;stroke:var(--gold-text);stroke-width:2.5;stroke-linejoin:round}
.svgrade .gl{font:700 14px var(--display);fill:var(--ink);text-anchor:middle}
.svstreak .hotb{fill:var(--accent)}
.svstreak .cold{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-width:1.5}
.svstreak .open{stroke-dasharray:3 2;stroke:var(--ink);stroke-width:1.5}
.svstreak .hotl{stroke:var(--gold-text);stroke-width:1.5;stroke-dasharray:5 4}
.svstreak .vl{font-weight:600;fill:var(--ink);text-anchor:middle}
.svtipw{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.svtipw .svnote{flex:1;min-width:160px;margin:0}
.svtip .face{fill:#f4efe0;stroke:#cfc6ae;stroke-width:.03}
.svtip .cross{stroke:rgba(18,32,48,.18);stroke-width:.015}
.svtip .lim{fill:none;stroke:rgba(18,32,48,.35);stroke-width:.015;stroke-dasharray:.05 .04}
.svtip .tipd{fill:#25598a;stroke:#25598a;stroke-width:.02}
.svdet{margin-top:12px}
.svdet summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 14px var(--body);color:var(--accent)}
/* sessions */
.svsessl{list-style:none;margin:0;padding:0}
.svsess{display:grid;grid-template-columns:minmax(112px,auto) minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.svsess .when b{display:block;font-size:14px;font-weight:600}
.svsess small{display:block;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.svsess .what{display:flex;flex-direction:column;gap:5px;min-width:0}
.svsess .pct{font:700 22px/1 var(--display);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
@media (max-width:480px){.svsess{grid-template-columns:minmax(0,1fr) auto}.svsess .what{grid-column:1/-1;grid-row:2}}
@media (hover:none) and (pointer:coarse){.statsbtn{height:44px}.statsbtn{min-width:44px}}
@media (prefers-reduced-motion:reduce){.statsview{animation:none}}