/* fonts: self-hosted (no requests to Google), latin + latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/font-barlow-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/font-barlow-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/font-barlow-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/font-barlow-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/font-ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/font-ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/font-ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/font-ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/font-ibm-plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/font-ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/font-ibm-plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/font-ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --ground:#0F1418;--panel:#161C22;--panel2:#1C232B;--line:#27313B;--line2:#34404C;
  --ink:#E9E6DF;--ink2:#A6AFB9;--ink3:#8C96A1;
  --amber:#F2A93B;--amber-ink:#1C1305;--cyan:#5CC8E0;--cyan-ink:#062129;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r-s:10px;--r-m:14px;--r-l:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--body);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--cyan);text-decoration:none}
a:hover{color:#8FDCEE}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink2)}
.small{font-size:14px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1;letter-spacing:.005em}

/* header */
.top{border-bottom:1px solid var(--line);background:rgba(15,20,24,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.top .wrap{height:64px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);white-space:nowrap}
.brand b{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.05em}
.brand span{font-size:13px;color:var(--ink2)}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink2);font-size:15px;white-space:nowrap}
.nav a.on{color:var(--ink);font-weight:600}
.chip{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r-s);color:var(--ink)!important;font-size:14px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--cyan);display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:12px;border:1.5px solid transparent;font-weight:600;font-size:16px;cursor:pointer;white-space:nowrap}
.btn.amber{background:var(--amber);color:var(--amber-ink)}
.btn.amber:hover{background:#F6BA5C;color:var(--amber-ink)}
.btn.cyan{background:var(--cyan);color:var(--cyan-ink)}
.btn.cyan:hover{background:#7DD4E8;color:var(--cyan-ink)}
.btn.light{background:var(--ink);color:var(--ground)}
.btn.light:hover{background:#fff;color:var(--ground)}
.btn.ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--ink2);color:var(--ink)}
.btn[disabled],.btn.off{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.block{width:100%}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:24px}
.label{font-size:13px;color:var(--ink2)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--cyan);border-radius:3px}

/* landing */
.hero{padding:72px 0 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(56px,8vw,96px);line-height:.92;letter-spacing:-.01em}
.hero p.lead{font-size:19px;color:var(--ink2);max-width:30em;margin:22px 0 30px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.facts{margin-top:28px;color:var(--ink2);font-size:15px}
.facts b{color:var(--ink);font-family:var(--mono);font-weight:500}
.demo{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:18px}
.demo .q small{display:block;color:var(--ink2);font-size:15px}
.demo .q strong{display:block;font-family:var(--display);font-size:36px;line-height:1.05;margin-top:6px}
.section{padding:56px 0;border-top:1px solid var(--line)}
.section h2{font-size:44px}
.section .intro{color:var(--ink2);max-width:38em;margin:12px 0 32px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:s}
.steps div{counter-increment:s}
.steps div::before{content:counter(s);display:block;font-family:var(--display);font-weight:700;font-size:44px;color:var(--amber);line-height:1;margin-bottom:10px}
.steps h3{font-size:26px;margin-bottom:8px}
.steps p{margin:0;color:var(--ink2)}
.subjects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.subj{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:22px;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.subj:hover{border-color:var(--line2);color:var(--ink)}
.subj .code{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.subj h3{font-size:30px}
.subj ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink2)}
.subj li{padding:3px 0}
.coming{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;margin-top:16px}
.coming div{border:1px dashed var(--line2);border-radius:12px;padding:12px;font-size:13px;color:var(--ink2);line-height:1.3}
.coming span{display:block;font-family:var(--mono);color:var(--ink3);margin-bottom:4px}
.honest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.honest h3{font-size:26px;margin-bottom:8px}
.honest p{color:var(--ink2);margin:0}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.current{border-color:var(--cyan)}
.plan.dim>*:not(.tag){opacity:.5}
.plan h3{font-size:30px}
.plan .price{font-family:var(--display);font-size:48px;font-weight:700;line-height:1}
.plan .price small{font-family:var(--body);font-size:15px;font-weight:400;color:var(--ink2)}
.plan ul{margin:0;padding-left:18px;color:var(--ink2);font-size:15px;flex-grow:1}
.plan li{padding:3px 0}
.tag{position:absolute;top:18px;right:18px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink)}
.plan.current .tag{border-color:var(--cyan);color:var(--cyan)}
.betanote{margin-top:18px;color:var(--ink2);font-size:15px}

/* dashboard */
.dash{padding-top:32px;padding-bottom:56px;display:flex;flex-direction:column;gap:20px}
.dash-top{display:grid;grid-template-columns:280px 1fr;gap:20px}
.tiles{display:flex;flex-direction:column;gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
a.tile:hover{border-color:var(--line2);color:var(--ink)}
.tile .v{font-family:var(--mono);font-size:28px;line-height:1.2}
.chart svg{width:100%;height:auto;display:block}
.chart .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.chart h3,.panel h3.t{font-size:24px}
.qa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qa a{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.qa a:hover{border-color:var(--line2);color:var(--ink)}
.qa b{font-size:17px}
.qa span{font-size:14px;color:var(--ink2)}
.qa a.hot{border-color:var(--amber)}
.dash-bot{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-top:1px solid var(--line);color:var(--ink)}
.row:first-child{border-top:0}
a.row:hover{color:var(--ink)}
.row .grow{flex-grow:1;min-width:0}
.row .bar{margin-top:6px}
.banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid var(--line2);border-radius:var(--r-m);padding:14px 18px;color:var(--ink2);font-size:15px}
.empty{color:var(--ink2);font-size:15px;padding:12px 0}

/* subject list */
.page{padding-top:36px;padding-bottom:64px}
.page h1{font-size:56px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-size:15px;margin-bottom:16px}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.game{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;display:flex;flex-direction:column;gap:12px}
.game h3{font-size:26px}
.game .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2)}
.game .go{display:flex;gap:8px;flex-wrap:wrap}
.game .go .btn{height:44px;padding:0 16px;font-size:15px}
.subjgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}

/* game */
.play{max-width:640px;margin:0 auto;padding:18px 20px 40px;display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - 64px)}
.pbar{display:flex;align-items:center;gap:12px}
.iconbtn{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:12px;background:transparent;cursor:pointer;color:var(--ink)}
.ptitle{flex-grow:1;text-align:center;min-width:0}
.ptitle small{display:block;font-size:13px;color:var(--ink2)}
.ptitle b{display:block;font-family:var(--display);font-size:24px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstreak{width:64px;text-align:right}
.pstreak b{font-family:var(--mono);font-weight:500;font-size:24px;color:var(--cyan)}
.pstreak span{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.strip{display:flex;align-items:center;gap:10px}
.strip em{font-style:normal;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink2)}
.track{flex-grow:1;position:relative;height:28px;display:flex;align-items:center}
.ticks{width:100%;display:flex;gap:3px}
.ticks i{flex-grow:1;height:6px;border-radius:2px;background:var(--line)}
.ticks i.on{background:var(--cyan)}
.plane{position:absolute;top:3px;transform:translateX(-50%) rotate(90deg);transition:left .45s cubic-bezier(.2,.8,.2,1)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:12px}
.card .ask{font-size:14px;color:var(--ink2)}
.card .qtext{font-size:22px;line-height:1.35}
.card .qbig{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.02}
.card .qhuge{font-family:var(--display);font-weight:700;font-size:88px;line-height:1}
.card hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{min-height:60px;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line2);background:var(--panel);cursor:pointer;text-align:left;font-size:17px;font-weight:500}
.opt:hover{border-color:var(--ink3)}
.opt .k{width:34px;height:34px;flex:none;border-radius:9px;background:var(--ground);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;color:var(--ink2)}
.opt .sym{font-size:22px;color:var(--ink)}
.opt .t{flex-grow:1}
.opt.ok{border-color:var(--cyan);background:rgba(92,200,224,.10)}
.opt.ok .k{color:var(--cyan)}
.opt.bad{border-color:var(--amber);background:rgba(242,169,59,.10)}
.opt.bad .k{color:var(--amber)}
.opt[disabled]{cursor:default}
.opt.fade{opacity:.5}
.fb{border-radius:16px;padding:16px 18px;border:1.5px solid var(--cyan);display:flex;flex-direction:column;gap:6px}
.fb.bad{border-color:var(--amber)}
.fb b{color:var(--cyan)}
.fb.bad b{color:var(--amber)}
.fb p{margin:0;color:#CDD3D9;font-size:15px}
.fb .src{font-size:13px;color:var(--ink3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fb .src a{color:var(--ink2);text-decoration:underline}
.pfoot{margin-top:auto;display:flex;justify-content:space-between;font-size:13px;color:var(--ink3)}
.kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--ink2)}

/* landed */
.landed{max-width:640px;margin:0 auto;padding:36px 20px 56px;display:flex;flex-direction:column;gap:24px}
.landed h1{font-size:88px}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stats3 div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:14px}
.stats3 b{display:block;font-family:var(--mono);font-weight:500;font-size:24px}
.stats3 span{font-size:13px;color:var(--ink2)}
.miss{display:flex;flex-direction:column;gap:8px}
.miss div{display:flex;justify-content:space-between;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px}
.miss div b{color:var(--cyan);font-weight:600;text-align:right}

/* login */
.auth{max-width:440px;margin:0 auto;padding:56px 20px}
.auth h1{font-size:56px;margin-bottom:8px}
.tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;margin:24px 0}
.tabs a{flex:1;text-align:center;height:40px;line-height:40px;border-radius:9px;color:var(--ink2);font-weight:600;font-size:15px}
.tabs a.on{background:var(--panel2);color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:14px;color:var(--ink2)}
.field input{height:50px;border-radius:12px;border:1.5px solid var(--line2);background:var(--ground);color:var(--ink);font:inherit;padding:0 14px}
.field input:focus{border-color:var(--cyan);outline:none}
.note{font-size:14px;color:var(--ink2);border:1px dashed var(--line2);border-radius:12px;padding:12px 14px;margin-top:18px}
.err{color:var(--amber);font-size:14px;min-height:20px;margin:4px 0 10px}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 0 44px;color:var(--ink3);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot p{margin:0;max-width:44em}
.foot a{color:var(--ink2)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:36px;padding-top:48px}
  .subjects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coming{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plans{grid-template-columns:1fr}
  .dash-top,.dash-bot{grid-template-columns:1fr}
  .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .qa{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .brand span{display:none}
  .nav{gap:16px}
  .steps,.honest,.games,.subjgrid{grid-template-columns:1fr}
  .subjects{grid-template-columns:1fr}
  .section h2{font-size:36px}
  .card .qhuge{font-size:72px}
  .card .qbig{font-size:34px}
  .landed h1{font-size:72px}
}
@media (prefers-reduced-motion:reduce){.plane{transition:none}}
/* symbols, today panel */
.sym{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;vertical-align:middle}
.sym svg{height:30px;width:auto;color:var(--ink);display:block}
.sym .cap{font-size:15px;color:var(--ink2);font-weight:400}
.qsym .sym svg{height:92px}
.qsym .sym .cap{font-size:20px;color:var(--ink)}
.miss .sym svg{height:24px}
.fb .sym svg{height:26px}
.today{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-color:var(--amber)}
.today p{margin:6px 0 4px;font-size:17px}
.today b{font-family:var(--mono);font-weight:500}
.today-l b{color:var(--ink)}
.examset{display:inline-flex;align-items:center;gap:10px}
.examset input{height:40px;border-radius:10px;border:1.5px solid var(--line2);background:var(--ground);color:var(--ink);font:inherit;padding:0 10px;color-scheme:dark}
.linkbtn{background:none;border:0;color:var(--cyan);cursor:pointer;padding:0 4px;font-size:14px;text-decoration:underline}
/* protection */
.play .card,.play .opts,.landed .miss{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.card{position:relative;overflow:hidden}
.wm{position:absolute;inset:-40%;display:flex;flex-wrap:wrap;gap:26px 44px;align-content:flex-start;transform:rotate(-18deg);opacity:.07;pointer-events:none;font:500 12px var(--mono);color:var(--ink);white-space:nowrap;z-index:0}
.card>*:not(.wm){position:relative;z-index:1}
body.shield .play,body.shield .landed{filter:blur(16px)}
body.shield::after{content:"Paused. Click to continue.";position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font:600 20px var(--body);color:var(--ink);background:rgba(15,20,24,.55);z-index:50}
@media print{body *{display:none!important}body::before{content:"Printing is turned off. Train at atplgames.com";display:block;font:600 18px sans-serif;padding:40px}}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--panel2);border:1px solid var(--line2);color:var(--ink);padding:12px 16px;border-radius:12px;font-size:15px;max-width:min(92vw,480px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
/* auth */
.oauth{display:flex;flex-direction:column;gap:10px;margin:24px 0 8px}
.oauth .btn{justify-content:flex-start;gap:12px}
.oauth svg{width:20px;height:20px;flex:none}
.or{display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:14px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.policy{font-size:14px;color:var(--ink2);border-left:3px solid var(--amber);padding:4px 0 4px 14px;margin-top:22px}
.policy b{color:var(--ink)}
/* pricing extras */
.paymethods{display:flex;flex-wrap:wrap;gap:6px}
.paymethods span{font-size:12px;border:1px solid var(--line2);border-radius:6px;padding:3px 8px;color:var(--ink2)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--amber)}
.locked{opacity:.6}
.locked .go .btn{pointer-events:none}
/* admin */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}
.admin-tabs a{padding:8px 14px;border-radius:10px;border:1px solid var(--line2);color:var(--ink2);font-size:14px;font-weight:600}
.admin-tabs a.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--ink2);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td .linkbtn{padding:0 8px 0 0}
.tblwrap{overflow-x:auto}
.flag{color:var(--amber);font-weight:600}
.demo-note{border:1px dashed var(--amber);color:var(--amber);border-radius:10px;padding:10px 14px;font-size:14px;margin-top:12px}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* static site */
.holdsvg{width:100%;max-width:320px;align-self:center;display:block;margin:0 auto}
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.faq summary{cursor:pointer;font-weight:600;font-size:17px}
.faq p{margin:10px 0 0;color:var(--ink2)}
.related{margin:0;padding-left:20px;line-height:2}
.legal h2{font-size:28px;margin:30px 0 8px}
.legal p{color:var(--ink2)}
a.game:hover{border-color:var(--line2)}
.founder img{box-shadow:0 0 0 1px var(--line)}
@media (max-width:640px){.honest[style]{grid-template-columns:1fr!important}}
@media (max-width:640px){.sitenav a:not(.chip){display:none}}
/* news banner */
.news{border-bottom:1px solid var(--line);background:var(--panel2)}
.news .wrap{display:flex;align-items:flex-start;gap:12px;padding-top:10px;padding-bottom:10px}
.news-t{flex:1;font-size:15px;color:var(--ink2)}
.news-t b{color:var(--ink);margin-right:4px}
.news-t a{margin-left:4px}
.news-info{box-shadow:inset 3px 0 0 var(--cyan)}
.news-success{box-shadow:inset 3px 0 0 #6FCF97}
.news-warning{box-shadow:inset 3px 0 0 var(--amber)}
.news-x{background:none;border:0;color:var(--ink2);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
/* admin */
.adm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.adm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.adm-form .field{margin:0}
.adm-form select,.adm-form textarea,.adm-form input:not([type=checkbox]){height:44px;border-radius:10px;border:1.5px solid var(--line2);background:var(--ground);color:var(--ink);font:inherit;padding:0 12px;width:100%;color-scheme:dark}
.adm-form textarea{height:96px;padding:10px 12px;resize:vertical}
.adm-form .full{grid-column:1/-1}
.adm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.adm-actions .btn{height:40px;padding:0 14px;font-size:14px}
.risk{display:inline-block;min-width:34px;text-align:center;border-radius:6px;padding:1px 6px;font-family:var(--mono);font-size:13px;background:var(--panel2);color:var(--ink2)}
.risk.mid{color:var(--amber)}
.risk.high{color:var(--amber-ink);background:var(--amber)}
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:12px}
.bars i{flex:1;background:var(--cyan);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.bars i.s{background:var(--amber)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips a{font-size:13px;padding:5px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--ink2)}
.chips a.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.kpis a.tile:hover{border-color:var(--line2)}
@media (max-width:760px){.adm-grid,.adm-form{grid-template-columns:1fr}}
/* dialog */
.modal{position:fixed;inset:0;background:rgba(10,14,17,.72);display:flex;align-items:center;justify-content:center;z-index:70;padding:20px}
.modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-l);padding:22px;width:min(520px,100%);display:flex;flex-direction:column;gap:12px}
.modal-box h3{font-size:28px}
.modal-box p{margin:0}
.modal-box textarea{border-radius:12px;border:1.5px solid var(--line2);background:var(--ground);color:var(--ink);font:inherit;padding:12px;resize:vertical}
.modal-box textarea:focus{border-color:var(--cyan);outline:none}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}