:root{--paper:#f3eee4;--paper2:#fbf8f1;--ink:#1c1915;--navy:#2c4a5e;--navy2:#3d6280;--coral:#e2725b;--mustard:#e0a526;--sage:#6b9e78;--sky:#8ec1dd;--line:#d9d0bf;--muted:#6b645a;--ok:#2f7d4f;--bad:#b4442f;
  --r:16px;--font:"Avenir Next","Nunito","Segoe UI",ui-rounded,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;
  background-image:radial-gradient(rgba(44,74,94,.06) 1px,transparent 1px);background-size:22px 22px}
a{color:var(--navy)}button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);line-height:1.2;margin:.2em 0 .4em}h1{font-size:1.9rem}h2{font-size:1.4rem}h3{font-size:1.12rem}
.top{position:sticky;top:0;z-index:20;background:var(--navy);color:var(--paper);display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:1.25rem;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:9px;background:url(/favicon.svg) center/cover;box-shadow:0 0 0 2px rgba(243,238,228,.4)}
.nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.nav a,.nav button{color:var(--paper);text-decoration:none;padding:7px 12px;border-radius:999px;font-size:.95rem;font-weight:600;background:transparent;border:0;cursor:pointer;white-space:nowrap}
.nav a:hover,.nav button:hover{background:rgba(243,238,228,.14)}.nav a.on{background:var(--paper);color:var(--navy)}
.wrap{max-width:1040px;margin:0 auto;padding:22px 18px 70px;outline:none}
.loading{color:var(--muted)}
.card{background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:0 4px 0 rgba(28,25,21,.14)}
.card+.card{margin-top:16px}.muted{color:var(--muted)}.small{font-size:.88rem}.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);background:var(--navy);color:var(--paper);padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .08s;min-height:44px}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.btn.alt{background:var(--paper2);color:var(--ink)}.btn.coral{background:var(--coral);color:#fff}.btn.gold{background:var(--mustard);color:var(--ink)}.btn.sage{background:var(--sage);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}.btn.sm{padding:6px 12px;min-height:36px;font-size:.92rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grow{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid2>.card+.card{margin-top:0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#e8e0d0;font-size:.82rem;font-weight:700;color:var(--ink);white-space:nowrap}
.chip.navy{background:var(--navy);color:var(--paper)}.chip.gold{background:#f4dc9c}.chip.coral{background:#f6c9bd}.chip.sage{background:#cfe3d4}.chip.sky{background:#d3e8f4}
label{font-weight:700;display:block;margin:10px 0 4px}input[type=text],input[type=password],select{width:100%;padding:11px 13px;border:2px solid var(--ink);border-radius:12px;background:#fff;min-height:46px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.err{color:var(--bad);font-weight:700;min-height:1.4em}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font-weight:700;z-index:60;transition:transform .25s,opacity .25s,visibility .25s;opacity:0;visibility:hidden;pointer-events:none;max-width:92vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.modal{position:fixed;inset:0;background:rgba(28,25,21,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal[hidden]{display:none}.modal .card{max-width:480px;width:100%;max-height:90vh;overflow:auto}
/* auth */
.auth{max-width:440px;margin:24px auto}.auth .card{padding:24px}.hero-owl{display:flex;justify-content:center;margin-bottom:6px}
.role{display:flex;gap:10px}.role label{flex:1;border:2px solid var(--ink);border-radius:12px;padding:10px;font-weight:600;cursor:pointer;margin:0;background:#fff;display:flex;gap:8px;align-items:center}
.role input{accent-color:var(--navy)}.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:800;letter-spacing:.08em;background:#fff;border:2px dashed var(--navy);padding:10px 14px;border-radius:12px;text-align:center}
/* trail */
.subjects{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:thin}
.subjects a{white-space:nowrap;text-decoration:none;padding:7px 14px;border-radius:999px;border:2px solid var(--ink);background:var(--paper2);color:var(--ink);font-weight:700;font-size:.92rem}
.subjects a.on{background:var(--navy);color:var(--paper)}.subjects a .soon{font-weight:600;color:var(--muted);font-size:.78rem}
.subjects a.on .soon{color:#cfd9e0}
.trail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:'trail top' 'trail more';grid-template-rows:auto 1fr;gap:16px 20px;align-items:start}
.trail-card{grid-area:trail}.side-top{grid-area:top}.side-more{grid-area:more}
.side{display:flex;flex-direction:column;gap:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px;text-align:center}
.stat b{display:block;font-size:1.35rem;font-family:var(--serif)}.stat span{font-size:.78rem;font-weight:700;color:var(--muted)}
.trail{position:relative;margin-top:4px}.trail svg{position:absolute;left:0;top:0;overflow:visible}
.band-label{position:absolute;left:12px;right:12px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;color:var(--navy)}
.band-label .now{background:var(--coral);color:#fff;border-radius:999px;padding:2px 9px;font-size:.75rem;letter-spacing:.06em;animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.stop{position:absolute;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;text-decoration:none;color:var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);z-index:3}
.stop.cleared{background:var(--sage);color:#fff}.stop.current{background:var(--mustard);animation:glow 1.8s ease-in-out infinite}.stop.locked{background:#e4ddcf;color:#8b8478;box-shadow:0 3px 0 #8b8478;border-color:#8b8478}
.stop.soon{background:#ece6da;color:#8b8478;border-style:dashed;box-shadow:none}
@keyframes glow{50%{box-shadow:0 4px 0 var(--ink),0 0 0 9px rgba(224,165,38,.3)}}
.stop-label{position:absolute;transform:translateY(-50%);background:var(--paper2);border:2px solid var(--ink);border-radius:12px;padding:6px 10px;font-size:.86rem;line-height:1.25;z-index:2;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 rgba(28,25,21,.12)}
.stop-label b{display:block;font-size:.93rem}.stop-label .stars{color:var(--mustard);letter-spacing:1px;font-size:1rem}.stop-label.locked{opacity:.75}.stop-label .st{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mascot{position:absolute;width:58px;height:66px;z-index:4;transition:left 1.4s ease-in-out,top 1.4s ease-in-out;pointer-events:none}
.mascot svg{animation:hop .9s ease-in-out infinite}@keyframes hop{50%{transform:translateY(-6px) rotate(-3deg)}}
.bubble{position:absolute;z-index:5;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:4px 9px;font-size:.78rem;font-weight:800;white-space:nowrap;pointer-events:none}
/* stop page */
.meter{display:flex;gap:4px}.meter i{flex:1;height:10px;border-radius:5px;background:#e4ddcf;border:1px solid rgba(28,25,21,.25)}
.meter i.f1{background:#f4dc9c}.meter i.f2{background:var(--mustard)}.meter i.f3{background:var(--sky)}.meter i.f4{background:var(--sage)}
.skill{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}.skill:last-child{border:0}
.lock-note{background:#fff3d6;border:2px dashed var(--mustard);border-radius:12px;padding:10px 12px;font-weight:600}
.toggle{display:inline-flex;gap:8px;align-items:center;font-weight:700;margin:0}.toggle input{width:20px;height:20px;accent-color:var(--navy)}
/* question */
.qhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.qcard{font-size:1.15rem}@media (min-width:700px){.qtext{font-size:1.2rem}}.qtext{margin:4px 0 14px}.qtext b{color:var(--navy)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--ink);background:#fff;border-radius:14px;padding:12px 14px;cursor:pointer;min-height:56px;box-shadow:0 3px 0 rgba(28,25,21,.18);font-size:1.05rem;width:100%}
.choice .k{flex:0 0 30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.choice:hover:not([disabled]){background:#fffaf0}.choice.sel,.choice.sel:hover{background:#dce9f2;border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}.choice.right{background:#d8eedd;border-color:var(--ok)}.choice.wrong{background:#f8d9d1;border-color:var(--bad)}.choice[disabled]{cursor:default}
.choice.out{opacity:.45;text-decoration:line-through}
.chwrap{position:relative}.xout{position:absolute;right:6px;top:6px;border:0;background:transparent;font-size:.8rem;font-weight:800;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:8px}
.xout:hover{background:#eee6d6}
.gridin{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.gridin input{max-width:260px;font-size:1.2rem}
.feedback{margin-top:14px;border-radius:14px;padding:14px;border:2px solid var(--ink)}.feedback.ok{background:#e3f2e6}.feedback.no{background:#fbe6e0}
.feedback ol{margin:6px 0 0;padding-left:22px}.feedback li{margin:3px 0}
.hintbox{background:#fff6dc;border:2px dashed var(--mustard);border-radius:12px;padding:10px 12px;margin:10px 0;font-weight:600}
.timer{font-variant-numeric:tabular-nums;font-weight:800}.timer.low{color:var(--bad)}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.86em;line-height:1.05;margin:0 2px}.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 3px}.frac>span:last-child{padding:0 3px}
.dtable{border-collapse:collapse;margin:8px 0;background:#fff;font-size:.98rem}.dtable th,.dtable td{border:1.5px solid var(--ink);padding:5px 12px;text-align:center}.dtable th{background:#e8e0d0}
.key{font-size:.85rem;color:var(--muted);margin-bottom:6px}.analogy,.series,.eqb{font-size:1.2rem;margin:10px 0;font-weight:700}.pair{display:inline-block;margin-right:10px;white-space:nowrap}
.progressbar{height:10px;background:#e4ddcf;border-radius:6px;overflow:hidden;border:1.5px solid var(--ink)}.progressbar i{display:block;height:100%;background:var(--sage)}
/* celebration */
.confetti{pointer-events:none;position:fixed;top:-20px;width:12px;height:16px;z-index:70;animation:fall 2.4s linear forwards;border-radius:3px}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.celebrate{text-align:center}.celebrate .big{font-size:4rem;animation:pop .6s ease-out}@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
/* exams */
.examcard h3{margin-top:0}.examcard .style{font-size:.82rem;color:var(--muted);font-style:italic}
.navgrid{display:flex;flex-wrap:wrap;gap:6px}.navgrid button{width:38px;height:38px;border-radius:10px;border:2px solid var(--ink);background:#fff;font-weight:800;cursor:pointer;position:relative}
.navgrid button.ans{background:#d3e8f4}.navgrid button.cur{outline:3px solid var(--mustard)}.navgrid button.flag::after{content:"⚑";position:absolute;top:-9px;right:-6px;font-size:.8rem;color:var(--coral)}
.tip{background:#eef4f8;border-left:5px solid var(--navy);border-radius:10px;padding:8px 12px;margin:10px 0;font-size:.95rem}
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;border-bottom:2px solid var(--ink);padding-top:10px;position:relative}
.bars i{flex:1;background:var(--sage);border-radius:3px 3px 0 0;min-height:3px}.bars i.no{background:var(--coral)}
.bars .target{position:absolute;left:0;right:0;border-top:2px dashed var(--navy)}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}.tbl th,.tbl td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line)}.tbl th{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mini{display:inline-block;width:90px;height:9px;background:#e4ddcf;border-radius:5px;overflow:hidden;vertical-align:middle;margin-right:6px}.mini i{display:block;height:100%;background:var(--navy)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.badge{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px;text-align:center}
.badge .e{font-size:2.2rem}.badge.no{opacity:.55;filter:grayscale(1)}.badge b{display:block;font-size:.92rem}.badge span{font-size:.78rem;color:var(--muted)}
.lesson{border-left:6px solid var(--mustard)}
footer.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:10px}
@media (max-width:860px){.trail-layout{grid-template-columns:1fr;grid-template-areas:'top' 'trail' 'more'}.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){body{font-size:16px}.wrap{padding:14px 12px 60px}.top{padding:8px 12px;gap:6px}.nav{margin-left:0;width:100%;flex-wrap:wrap;gap:4px 2px;padding-bottom:2px}nav a,nav button{padding:6px 9px!important;font-size:.9rem}
  .nav a,.nav button{padding:6px 10px;font-size:.88rem}.choices{grid-template-columns:1fr}.grid2,.grid3{grid-template-columns:1fr}h1{font-size:1.5rem}.skill{grid-template-columns:1fr}.stop-label{font-size:.8rem;padding:5px 8px}.stop-label b{font-size:.85rem}
  .stop{width:56px;height:56px;font-size:1.35rem}.qcard{font-size:1.04rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* parent student page */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.fchip{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:6px 13px;font-weight:700;font-size:.9rem;cursor:pointer;min-height:40px;box-shadow:0 2px 0 rgba(28,25,21,.15)}
.fchip:hover{background:#fffaf0}.fchip.on{background:var(--navy);color:var(--paper)}.fchip.now:not(.on){border-color:var(--mustard);background:#fdf3d6}
.nowtag{background:var(--coral);color:#fff;border-radius:999px;padding:1px 8px;font-size:.7rem;letter-spacing:.06em;font-weight:800}
.xlist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.xrow{border:2px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.xrow.nowrow{border-color:var(--mustard);background:#fffaf0}
.xhead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;padding:10px 12px;cursor:pointer;min-height:48px;flex-wrap:wrap}
.xhead:hover{background:rgba(44,74,94,.06)}.xhead[aria-expanded=true]{background:rgba(44,74,94,.08)}
.xhead .car{transition:transform .2s;margin-left:auto;font-weight:800}.xhead[aria-expanded=true] .car{transform:rotate(180deg)}
.xs{letter-spacing:1px}
.xpanel{padding:4px 14px 14px;border-top:1px dashed var(--line)}.xpanel[hidden]{display:none}
.xpanel .next{background:#eef4f8;border-left:5px solid var(--navy);border-radius:10px;padding:8px 12px}
.sortb{background:transparent;border:0;padding:4px 2px;font:inherit;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--navy);cursor:pointer;min-height:32px}
.sortb:hover{text-decoration:underline}.tscroll{overflow-x:auto}
.bchip{border:2px solid var(--ink);cursor:pointer;font:inherit;font-size:.85rem;min-height:36px}.bchip[aria-expanded=true]{background:var(--mustard)}
.refresh{text-align:right}.okmsg{color:var(--ok);font-weight:700;min-height:1.4em}
@media (max-width:600px){.refresh{width:100%;text-align:left;display:flex;align-items:center;gap:10px}.xhead{padding:10px}.stats[style*="repeat(4"]{grid-template-columns:1fr 1fr!important}}