/* Mathtastic — an exercise book on squared paper by day, a chalkboard by night. */
:root{
  --paper:#f5f8fb; --grid:rgba(40,96,170,.11); --card:#ffffff; --line:#cfdbe8;
  --ink:#1b2a4a; --muted:#56657f; --shadow:#1b2a4a;
  --accent:#ff8a2b; --accent-ink:#b9470a; --hi:#ffe14d; --on-hi:#1b2a4a;
  --pen:#d6304a; --teal:#0e8f7e; --good:#13804f; --bad:#c62f42;
  --good-bg:rgba(19,128,79,.12); --bad-bg:rgba(198,47,66,.10); --scrim:rgba(27,42,74,.45);
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#1b2a25; --grid:rgba(255,255,255,.045); --card:#24362f; --line:#3b5148;
  --ink:#eef4ea; --muted:#a9bbaf; --shadow:rgba(0,0,0,.5);
  --accent:#ff9d4d; --accent-ink:#ffb27a; --hi:#ffe680; --on-hi:#1b2a4a;
  --pen:#ff8796; --teal:#62d6c2; --good:#74dfa2; --bad:#ff8f9b;
  --good-bg:rgba(116,223,162,.14); --bad-bg:rgba(255,143,155,.13); --scrim:rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1b2a25; --grid:rgba(255,255,255,.045); --card:#24362f; --line:#3b5148;
  --ink:#eef4ea; --muted:#a9bbaf; --shadow:rgba(0,0,0,.5);
  --accent:#ff9d4d; --accent-ink:#ffb27a; --hi:#ffe680; --on-hi:#1b2a4a;
  --pen:#ff8796; --teal:#62d6c2; --good:#74dfa2; --bad:#ff8f9b;
  --good-bg:rgba(116,223,162,.14); --bad-bg:rgba(255,143,155,.13); --scrim:rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:.01em}
h2{font-size:clamp(1.9rem,4vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.muted{color:var(--muted)}
.small{font-size:.85rem;color:var(--muted)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* buttons & fields */
.btn{font:700 1rem/1 var(--body);display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.8em 1.15em;border:2px solid var(--ink);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--shadow)}
.btn.primary{background:var(--accent);color:var(--on-hi);border-color:var(--on-hi)}
.btn.ghost{background:transparent}
.btn.small{font-size:.9rem;padding:.6em .9em}
.btn.danger{border-color:var(--bad);color:var(--bad);box-shadow:3px 3px 0 var(--bad)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);text-decoration:underline;cursor:pointer}
select,input[type=text],input[type=password],input[type=date],input[type=number],textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:.6em .7em;min-width:0;max-width:100%}
.field{display:flex;flex-direction:column;gap:4px}
.field>span,.controls label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field small{color:var(--muted);font-size:.82rem}
.form{display:flex;flex-direction:column;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:2px solid var(--ink)}
.bar{display:flex;align-items:center;gap:18px;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.6rem;text-decoration:none}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent);color:var(--on-hi);border:2px solid var(--on-hi);font-size:1.5rem;transform:rotate(-6deg)}
.nav{display:flex;gap:16px;margin-left:6px}
.nav a{text-decoration:none;font-weight:700;color:var(--muted)}
.nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.bar-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.rank{display:flex;align-items:center;gap:10px;font-size:.85rem;text-decoration:none}
.rank-name{font-weight:700;white-space:nowrap}
.rank-bar{width:80px;height:10px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--card)}
.rank-bar span{display:block;height:100%;width:0;background:var(--teal);transition:width .5s}
.rank-xp{font-family:var(--mono);color:var(--muted);white-space:nowrap}
.account{font:700 .9rem var(--body);display:flex;align-items:center;gap:8px;padding:.45em .8em;border:2px solid var(--ink);border-radius:99px;background:var(--card);color:var(--ink);cursor:pointer;max-width:180px}
.account .av{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--hi);color:var(--on-hi);font-size:.8rem}
.account .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:980px){.nav{display:none}}
@media (max-width:560px){.rank-xp,.rank-bar{display:none}.logo{font-size:1.35rem}}
@media (max-width:400px){.rank{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;padding-block:56px 40px}
.hero-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero h1{font-size:clamp(3.4rem,10vw,7rem);line-height:.9}
.hero h1 .hl{position:relative;display:inline-block;color:var(--on-hi);padding:0 .08em;margin-left:-.02em;z-index:0}
.hero h1 .hl::before{content:"";position:absolute;inset:.12em -.06em .02em;background:var(--hi);border-radius:.08em .2em .1em .25em;transform:rotate(-2deg);z-index:-1}
.lede{font-size:1.2rem;max-width:34em;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.pen-note{font-style:italic;color:var(--pen);font-size:1.02rem;display:flex;gap:8px;align-items:baseline}
.pen-note::before{content:"✓";font-style:normal;font-weight:700;font-size:1.3rem}
.card{background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--shadow)}
.nod{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;position:relative;transform:rotate(1.2deg);min-width:0}
.nod::before{content:"";position:absolute;left:0;right:0;top:58px;border-top:2px solid var(--pen);opacity:.6}
.nod-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.nod-head h2{font-size:1.4rem}
.nod-num{font-size:clamp(4rem,10vw,5.6rem);font-weight:700;line-height:1;padding-top:10px;color:var(--accent-ink)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.95rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.nod .btn{align-self:flex-start}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:36px;padding-block:36px 24px}.nod{transform:none}}

/* sections */
.section{padding-block:48px}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.sec-head p.sub{color:var(--muted);max-width:42em}

/* today: daily + homework */
.today{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
@media (max-width:900px){.today{grid-template-columns:1fr}}
.today .card{padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:99px;border:2px solid var(--line);white-space:nowrap}
.pill.hot{border-color:var(--accent);color:var(--accent-ink)}
.pill.ok{border-color:var(--good);color:var(--good)}
.pill.due{border-color:var(--pen);color:var(--pen)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:q}
.qlist li{display:grid;grid-template-columns:28px 1fr minmax(90px,130px);gap:10px;align-items:center;padding:8px 10px;border:2px solid var(--line);border-radius:12px;background:var(--paper);counter-increment:q}
.qlist li::before{content:counter(q);font-family:var(--mono);font-weight:700;color:var(--muted);text-align:center}
.qlist .qt{font-family:var(--mono);font-weight:700;min-width:0;overflow-wrap:anywhere}
.qlist .qt.words{font-family:var(--body);font-weight:400}
.qlist input,.qlist select{width:100%;font-family:var(--mono);text-align:center;padding:.45em .5em}
.qlist li.right{border-color:var(--good);background:var(--good-bg)}
.qlist li.wrong{border-color:var(--bad);background:var(--bad-bg)}
.qlist .fix{grid-column:2/-1;font-size:.88rem;color:var(--bad);font-weight:700}
@media (max-width:480px){.qlist li{grid-template-columns:24px 1fr}.qlist input,.qlist select{grid-column:2}}
.hw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hw-list li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border:2px solid var(--line);border-radius:12px;flex-wrap:wrap}
.hw-list .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.hw-list b{overflow-wrap:anywhere}
.empty{padding:18px;border:2px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}

/* tabs */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.tabs button{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.tabs button small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.tabs button b{font-size:1.02rem}
.tab-sym{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;border:2px solid var(--ink);font-family:var(--mono);font-weight:700;font-size:1.25rem}
.tabs button[aria-selected="true"]{background:var(--hi);color:var(--on-hi);border-color:var(--on-hi);box-shadow:3px 3px 0 var(--shadow)}
.tabs button[aria-selected="true"] small{color:var(--on-hi)}
.tabs button[aria-selected="true"] .tab-sym{background:var(--accent);border-color:var(--on-hi)}
@media (max-width:900px){.tabs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.tabs button small{display:none}}

.panel{padding:26px}
.game-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px}
.game-main,.game-side{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:820px){.game-grid{grid-template-columns:1fr}.panel{padding:18px}}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.controls label{display:flex;flex-direction:column;gap:4px}
.question{font-family:var(--mono);font-size:clamp(2.2rem,7vw,3.6rem);font-weight:700;padding:18px 20px;border:2px dashed var(--line);border-radius:14px;text-align:center;overflow-wrap:anywhere}
.answer{display:flex;gap:10px}
.answer input{flex:1;font-family:var(--mono);font-size:1.4rem;text-align:center}
.feedback{min-height:1.6em;font-weight:700;padding:8px 12px;border-radius:10px}
.feedback:empty{padding:0;min-height:0}
.feedback.good{color:var(--good);background:var(--good-bg)}
.feedback.bad{color:var(--bad);background:var(--bad-bg)}
.timer{height:12px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--paper)}
.timer span{display:block;height:100%;width:100%;background:var(--teal);transition:width 1s linear}
.timer.low span{background:var(--pen)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stats.two{grid-template-columns:repeat(2,1fr)}
.stats div{border:2px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stats span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.stats b{font-family:var(--mono);font-size:1.5rem;font-variant-numeric:tabular-nums}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keypad button{font:700 1.4rem var(--mono);padding:14px 0;border-radius:12px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.keypad button:active{background:var(--hi);color:var(--on-hi)}
.hint{font-size:.9rem;color:var(--muted)}

/* times table grid */
.tt-scroll{overflow-x:auto;border:2px solid var(--line);border-radius:12px}
.tt{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
.tt th,.tt td{text-align:center;padding:6px 2px;border:1px solid var(--line);font-variant-numeric:tabular-nums;font-family:var(--mono)}
.tt th{font-weight:700;background:var(--paper)}
.tt thead th button{font:700 .95rem var(--mono);width:100%;border:0;background:none;color:var(--ink);cursor:pointer;padding:2px 0;border-radius:6px}
.tt thead th button:hover,.tt thead th button.on{background:var(--accent);color:var(--on-hi)}
.tt td.cross{background:var(--good-bg)}
.tt td.at{background:var(--hi);color:var(--on-hi);font-weight:700}
.tt td.mark{background:var(--accent);color:var(--on-hi);font-weight:700}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}
.dots i.ok{background:var(--good);border-color:var(--good)}
.dots i.no{background:var(--bad);border-color:var(--bad)}

/* fractions */
.frac-stage{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,48px);flex-wrap:wrap}
.pie-box{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.pie-box svg{width:clamp(120px,26vw,190px);height:auto;max-width:100%}
.pie-box svg .on{fill:var(--accent);stroke:var(--ink);stroke-width:1.5}
.pie-box svg .off{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.hidepies .pie-box svg{display:none}
.fr{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--mono);font-weight:700;line-height:1.1;vertical-align:middle}
.fr span:first-child{border-bottom:3px solid currentColor;padding:0 .2em}
.big-fr{font-size:2.4rem}
.vs{font-family:var(--display);font-size:1.6rem;color:var(--muted)}
.choice{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.choice .btn.right{background:var(--good-bg);border-color:var(--good)}
.toggle{display:flex;gap:8px;align-items:center;font-size:.95rem;color:var(--muted)}
.toggle input{width:20px;height:20px;accent-color:var(--accent)}
.frac-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}

/* mystery */
.clues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.clues li{display:flex;gap:12px;align-items:center;padding:10px 14px;border:2px solid var(--line);border-radius:12px;background:var(--paper)}
.clues li .n{font-family:var(--mono);font-weight:700;color:var(--muted)}
.clues li b{font-family:var(--mono);color:var(--accent-ink)}
.clues li.locked{color:var(--muted);border-style:dashed;background:transparent}
.guesses{display:flex;flex-wrap:wrap;gap:6px}
.guesses span.g{font-family:var(--mono);font-weight:700;padding:4px 10px;border-radius:99px;border:2px solid var(--line)}
.guesses span.up{border-color:var(--teal)}
.guesses span.down{border-color:var(--pen)}
.guesses span.hit{background:var(--good);color:var(--paper);border-color:var(--good)}

/* trophies & leaderboard */
.trophy-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:start}
@media (max-width:900px){.trophy-grid{grid-template-columns:1fr}}
.trophy-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.lb{padding:20px;display:flex;flex-direction:column;gap:14px}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden;align-self:flex-start}
.seg button{font:700 .88rem var(--body);padding:.5em .9em;border:0;background:var(--card);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lb ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;border:2px solid var(--line)}
.lb li .pos{font-family:var(--mono);font-weight:700;color:var(--muted)}
.lb li:nth-child(1) .pos{color:var(--accent-ink)}
.lb li .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.lb li .pts{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lb li.me{background:var(--hi);color:var(--on-hi);border-color:var(--on-hi)}
.lb li.me .pos{color:var(--on-hi)}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:6px}
.ladder li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card)}
.ladder li span:last-child{font-family:var(--mono);color:var(--muted)}
.ladder li.done{border-color:var(--teal)}
.ladder li.now{background:var(--hi);color:var(--on-hi);border-color:var(--on-hi);font-weight:700}
.ladder li.now span:last-child{color:var(--on-hi)}
.badges{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:640px){.badges{grid-template-columns:repeat(2,1fr)}}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px;border:2px dashed var(--line);border-radius:16px;color:var(--muted);min-width:0}
.medal{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.2rem;border:2px dashed var(--line)}
.badge b{font-size:.95rem}
.badge small{font-size:.78rem;line-height:1.3}
.badge.got{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--card)}
.badge.got .medal{background:var(--hi);color:var(--on-hi);border:2px solid var(--on-hi);box-shadow:2px 2px 0 var(--shadow)}

/* tips */
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.tips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tips{grid-template-columns:1fr}}
.tip{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1.5px solid var(--teal);color:var(--teal)}
.worked{font-family:var(--mono);font-size:.92rem;background:var(--paper);border-left:4px solid var(--accent);padding:10px 12px;border-radius:0 10px 10px 0;overflow-x:auto;white-space:pre-wrap}

/* magic */
.magic{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.magic{grid-template-columns:1fr}}
.magic .card{padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.magic ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:.95rem}

/* about */
.about{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:28px}}
.about-card{padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.about-card canvas{width:100%;max-width:100%;aspect-ratio:1.618/1;height:auto;display:block;border-radius:12px;background:var(--paper);border:2px solid var(--line)}
.about-card .who h3{font-size:1.8rem}
.about-card .role{color:var(--accent-ink);font-weight:700}
.facts-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.facts-row div{border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.facts-row b{display:block;font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;color:var(--accent-ink)}
.facts-row span{font-size:.85rem;color:var(--muted)}
.email-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.email{font-family:var(--mono);font-weight:700;overflow-wrap:anywhere}
.bio{display:flex;flex-direction:column;gap:16px;max-width:40em;min-width:0}
.bio p{color:var(--ink)}
.approach{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.approach li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 14px;background:var(--card);border:2px solid var(--line);border-radius:12px}
.approach li::before{content:"✓";display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--hi);color:var(--on-hi);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:.88rem;font-weight:700;padding:5px 12px;border-radius:99px;border:2px solid var(--teal);color:var(--teal)}

footer{border-top:2px solid var(--ink);margin-top:40px}
footer .wrap{padding-block:28px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;color:var(--muted);font-size:.92rem}
footer b{font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--ink)}
footer a{color:var(--ink)}

/* dialogs */
dialog{border:2px solid var(--ink);border-radius:18px;padding:0;background:var(--card);color:var(--ink);box-shadow:6px 6px 0 var(--shadow);width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px)}
dialog.wide{width:min(720px,calc(100% - 32px))}
dialog::backdrop{background:var(--scrim)}
.dlg{padding:24px;display:flex;flex-direction:column;gap:16px}
.dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.x{flex:none;width:36px;height:36px;border-radius:10px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font-size:1.2rem;cursor:pointer}
.note{font-size:.9rem;color:var(--muted);background:var(--paper);border-radius:10px;padding:10px 12px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:14px;font-weight:700;z-index:20;transition:transform .35s cubic-bezier(.2,1.4,.4,1);max-width:calc(100% - 32px);text-align:center;visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}
.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.08)}}
.shake{animation:shake .3s ease}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ===== tutor dashboard ===== */
.t-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;padding-block:28px}
@media (max-width:900px){.t-layout{grid-template-columns:1fr}}
.t-side,.t-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.t-box{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.class-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.class-list button{width:100%;text-align:left;font:inherit;display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:10px;border:2px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.class-list button[aria-current="true"]{background:var(--hi);color:var(--on-hi);border-color:var(--on-hi);font-weight:700}
.class-list small{color:inherit;opacity:.75;white-space:nowrap}
.code-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.code{font-family:var(--mono);font-weight:700;font-size:2rem;letter-spacing:.15em;padding:4px 14px;border:2px dashed var(--accent);border-radius:12px;color:var(--accent-ink)}
.tbl-wrap{overflow-x:auto;border:2px solid var(--line);border-radius:12px;background:var(--card)}
table.data{border-collapse:collapse;width:100%;font-size:.92rem}
table.data th,table.data td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
table.data th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--paper)}
table.data td.num,table.data th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.data tr:last-child td{border-bottom:0}
table.data tr.click{cursor:pointer}
table.data tr.click:hover td{background:var(--paper)}
.weak{color:var(--bad);font-weight:700}
.strong{color:var(--good);font-weight:700}
.actions{display:flex;gap:6px}
.banner{padding:12px 14px;border-radius:12px;border:2px solid var(--accent);background:var(--card);font-weight:700}
.preview{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:pq}
.preview li{display:grid;grid-template-columns:28px 1fr 120px auto;gap:8px;align-items:center;counter-increment:pq}
.preview li.empty::before{content:none}
.preview li::before{content:counter(pq);font-family:var(--mono);color:var(--muted);text-align:center}
.preview input{padding:.45em .55em}
.preview .ans{font-family:var(--mono)}
@media (max-width:600px){.preview li{grid-template-columns:24px 1fr}.preview li>*:nth-child(n+2){grid-column:2}}
.bar-pct{display:inline-block;width:80px;height:8px;border-radius:99px;background:var(--line);vertical-align:middle;margin-right:8px;overflow:hidden}
.bar-pct i{display:block;height:100%;background:var(--teal)}
.login-wrap{max-width:420px;margin:60px auto;padding:28px;display:flex;flex-direction:column;gap:16px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}