:root{
  --bg:#eff6f4; --card:#ffffff; --ink:#12211f; --ink-soft:#51655f; --rule:#dcE9e5;
  --teal:#0f766e; --teal-deep:#115e56; --teal-soft:#ccfbf1;
  --coral:#fb7185; --coral-deep:#be123c; --coral-soft:#ffe4e6;
  --mint:#ccfbf1; --peach:#ffe4e6; --amber:#b45309; --emerald:#047857;
  --on-dark:#ffffff;
  --display:"Bricolage Grotesque","Manrope",sans-serif;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 30px rgba(15,23,42,.06);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
  /* legacy aliases so existing inline styles keep working */
  --paper:var(--bg); --panel:var(--card); --blue:var(--teal); --blue-deep:var(--teal-deep);
  --red:var(--coral-deep); --green:var(--emerald); --grid:transparent;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:16px;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.55;overscroll-behavior:none;letter-spacing:-0.006em;}
.wrap{max-width:1040px;margin:0 auto;padding:22px 20px 48px;min-height:100%;display:flex;flex-direction:column;}
.serif{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;}
.label{font-family:"Manrope",sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.anno{font-size:13px;color:var(--ink-soft);}
.anno b{color:var(--ink);font-weight:700;}
a{color:var(--teal);}

/* masthead */
.masthead{display:flex;align-items:center;gap:14px;padding:6px 0 20px;margin-bottom:20px;border-bottom:1px solid var(--rule);}
.seal{flex:none;width:46px;height:46px;border-radius:14px;background:var(--teal);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;letter-spacing:.02em;color:#fff;
  box-shadow:0 4px 12px rgba(13,148,136,.30);}
.title h1{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-0.03em;margin:0;line-height:1;}
.title .sub{margin-top:5px;font-size:13px;color:var(--ink-soft);}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.iconbtn{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:20px;padding:4px;border-radius:10px;}
.iconbtn:hover{background:#eaf4f1;}
.nav{display:flex;gap:6px;}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;}
.nav a:hover{background:#eaf4f1;color:var(--ink);}
.nav a.active{background:var(--teal-soft);color:var(--teal-deep);}

/* cards */
.sheet{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.open{background:transparent;border:none;padding:6px 2px 14px;margin:0 0 10px;}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--teal-soft);color:var(--teal-deep);}
.badge.coral{background:var(--coral-soft);color:var(--coral-deep);}

/* controls */
select,input[type=text],input[type=password],textarea{font-family:inherit;font-size:15px;font-weight:500;padding:11px 14px;border:1.5px solid var(--rule);border-radius:14px;background:#fff;color:var(--ink);}
input{width:100%;}
select{cursor:pointer;}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.14);}
/* tactile 3D press — every real button sits on a darker ledge (DESIGN.md) */
button.btn{font-family:inherit;font-size:15px;font-weight:800;padding:11px 22px;border-radius:14px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s;box-shadow:0 3px 0 #d3dce6;}
button.btn:hover{background:#eaf4f1;}
button.btn:active{transform:translateY(3px);box-shadow:0 0 0 #d3dce6;}
button.btn.primary{background:var(--teal);border-color:var(--teal-deep);color:#fff;box-shadow:0 4px 0 var(--teal-deep);}
button.btn.primary:hover{background:#0d685f;}
button.btn.primary:active{transform:translateY(4px);box-shadow:0 0 0 var(--teal-deep);}
button.btn.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 4px 0 #000;}
button.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none;}
a.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:800;padding:11px 22px;border-radius:14px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);box-shadow:0 3px 0 #d3dce6;}
a.btn.primary{background:var(--teal);border-color:var(--teal-deep);color:#fff;box-shadow:0 4px 0 var(--teal-deep);}
a.btn:active{transform:translateY(3px);box-shadow:0 0 0 #d3dce6;}
a.btn.primary:active{transform:translateY(4px);box-shadow:0 0 0 var(--teal-deep);}

/* practice */
#meta{margin-bottom:12px;}
#question{font-size:19px;line-height:1.75;padding:14px 18px;border-radius:16px;background:var(--teal-soft);min-height:40px;}
#question.empty{background:transparent;padding:20px 12px;text-align:center;color:var(--ink-soft);}
.timer{font-variant-numeric:tabular-nums;font-size:30px;font-weight:800;letter-spacing:-0.03em;}
.timer small{font-size:12px;font-weight:600;color:var(--ink-soft);}
.pace-ok{color:var(--emerald);}.pace-warn{color:var(--amber);}.pace-over{color:var(--coral-deep);}
.paper{position:relative;background:#fff;border:1.5px solid var(--rule);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;}
#pad{display:block;width:100%;height:46vh;min-height:300px;touch-action:none;cursor:crosshair;}
.tools{display:flex;gap:10px;align-items:center;margin-top:14px;}
.tools .spacer{flex:1;}
details.mastery{margin-top:6px;}
details.mastery summary{cursor:pointer;font-weight:700;}
.topic{margin:14px 0;}
.topic .name{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:6px;}
.topic .pct{font-size:12px;color:var(--ink-soft);font-weight:600;}
.bar{height:8px;background:#eef2f7;border-radius:999px;overflow:hidden;}
.bar>i{display:block;height:100%;background:var(--teal);border-radius:999px;}

/* grader */
textarea#essay{width:100%;min-height:38vh;line-height:1.65;resize:vertical;font-size:14.5px;font-weight:500;}
.gradehead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--teal-soft);border-radius:16px;padding:16px 20px;margin-bottom:6px;}
.score{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-0.03em;color:var(--teal-deep);}
.crit{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:14px 16px;margin:12px 0;box-shadow:var(--shadow-sm);}
.crit.strong{border-color:#99e6cf;} .crit.weak{border-color:#f9c2cf;} .crit.strong .marks{color:var(--emerald);} .crit.weak .marks{color:var(--coral-deep);}
.crit .name{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.crit .name b{font-family:var(--display);font-weight:800;font-size:16px;}
.crit .marks{font-weight:800;font-size:15px;white-space:nowrap;color:var(--teal-deep);}
.crit .band{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;margin:4px 0 8px;}
.improve li{margin:8px 0;}
.disclaimer{font-size:13px;color:#9a3412;background:var(--peach);border:1px solid #fecdd3;border-radius:16px;padding:12px 16px;margin-bottom:18px;}
.disclaimer b{color:var(--coral-deep);}

/* tutor chat */
.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:10px 2px 4px;}
.msg{max-width:80%;padding:12px 16px;border-radius:20px;font-size:15px;line-height:1.6;word-wrap:break-word;}
.msg.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:7px;}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--rule);border-bottom-left-radius:7px;box-shadow:var(--shadow-sm);}
.msg.bot p{margin:0 0 8px;} .msg.bot p:last-child{margin:0;} .msg img{max-width:220px;border-radius:12px;margin-top:6px;}
.msg.hello{align-self:flex-start;background:var(--teal-soft);border:none;color:var(--teal-deep);}
.composer{display:flex;gap:10px;align-items:flex-end;padding-top:14px;margin-top:4px;border-top:1px solid var(--rule);}
.composer textarea{flex:1;min-height:48px;max-height:170px;resize:none;}
.chip-attach{flex:none;width:48px;height:48px;border-radius:14px;border:1.5px solid var(--rule);background:#fff;cursor:pointer;font-size:20px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;}
.chip-attach:hover{background:#f1f5f9;}

/* modals */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;}
.modal{background:var(--card);border-radius:24px;max-width:460px;width:100%;padding:28px;box-shadow:var(--shadow);}
.modal h2{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;margin:0 0 4px;font-size:22px;}
.step{display:flex;gap:12px;margin:14px 0;font-size:14px;}
.step .n{flex:none;width:24px;height:24px;border-radius:999px;background:var(--coral-soft);color:var(--coral-deep);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
.hidden{display:none!important;}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;z-index:60;box-shadow:var(--shadow);}

/* ============ app shell ============ */
.layout{display:flex;min-height:100vh;}
.sidebar{width:238px;flex:none;background:#fff;border-right:1px solid var(--rule);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;}
.brand .name{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;}
.side-nav{display:flex;flex-direction:column;gap:3px;}
.side-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:14.5px;}
.side-nav a svg{width:20px;height:20px;flex:none;stroke-width:2.1;transition:transform .18s ease-out;}
.side-nav a:hover svg{transform:rotate(-8deg) scale(1.12);}
.side-nav a:hover{background:#eaf4f1;color:var(--ink);}
.side-nav a.active{background:var(--teal-soft);color:var(--teal-deep);}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--rule);}
.content{flex:1;min-width:0;}
.content .wrap{min-height:auto;}
@media(max-width:860px){
  .layout{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:sticky;top:0;flex-direction:row;align-items:center;padding:8px 12px;z-index:40;overflow-x:auto;border-right:none;border-bottom:1px solid var(--rule);}
  .brand{padding:4px 6px;} .side-nav{flex-direction:row;} .side-nav a span{display:none;} .side-nav a{padding:9px 11px;}
  .side-foot{margin:0 0 0 auto;border:none;padding:0;}
}

/* ============ dashboard ============ */
.hi{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;margin:4px 0 2px;}
.hi-sub{color:var(--ink-soft);margin:0 0 8px;}
/* RevisionDojo-style tiles: pastel wrapper, vivid illustrated inner card with a
   white border, name at the bottom. Card ART is the one licensed gradient zone
   (it reads as illustration, not chrome — see DESIGN.md). */
.rj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px;margin:14px 0 8px;}
.tile{--a1:#2dd4bf;--a2:#0f766e;--soft:#d9f3ee;display:block;text-decoration:none;color:var(--ink);
  background:var(--soft);border-radius:22px;padding:12px 12px 13px;box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s;}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.tile:active{transform:translateY(0);}
/* tiles pop in with a small stagger; art leans in on hover */
.rj-grid .tile{animation:pop-in .38s cubic-bezier(.22,1,.36,1) both;}
.rj-grid .tile:nth-child(1){animation-delay:.02s;}.rj-grid .tile:nth-child(2){animation-delay:.06s;}
.rj-grid .tile:nth-child(3){animation-delay:.10s;}.rj-grid .tile:nth-child(4){animation-delay:.14s;}
.rj-grid .tile:nth-child(5){animation-delay:.18s;}.rj-grid .tile:nth-child(6){animation-delay:.22s;}
.rj-grid .tile:nth-child(7){animation-delay:.26s;}.rj-grid .tile:nth-child(8){animation-delay:.30s;}
.rj-grid .tile:nth-child(n+9){animation-delay:.34s;}
.tile .art svg{transition:transform .22s ease-out;}
.tile:hover .art svg{transform:scale(1.07) rotate(-1.5deg);}
.tile .art{position:relative;aspect-ratio:16/11;border-radius:16px;border:4px solid #fff;overflow:hidden;
  background:linear-gradient(155deg,var(--a1),var(--a2));box-shadow:0 5px 14px rgba(15,23,42,.14);}
.tile .art svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.tile .tname{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;margin:11px 2px 0;display:flex;align-items:center;gap:7px;}
.tile .tname .lvl{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:999px;background:#fff;color:var(--ink-soft);}
.tile .tsub{font-size:12px;font-weight:600;color:var(--ink-soft);margin:2px 2px 0;line-height:1.45;}
.tile .tbar{height:6px;border-radius:999px;background:rgba(255,255,255,.85);margin:9px 2px 1px;overflow:hidden;}
.tile .tbar i{display:block;height:100%;border-radius:999px;background:var(--a2);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1);}
/* subject hues (match RevisionDojo's card families) */
.t-math{--a1:#fb7185;--a2:#e11d48;--soft:#ffe4e6;}
.t-physics{--a1:#818cf8;--a2:#4f46e5;--soft:#e0e7ff;}
.t-chemistry{--a1:#a78bfa;--a2:#7c3aed;--soft:#ede9fe;}
.t-biology{--a1:#34d399;--a2:#059669;--soft:#d1fae5;}
.t-economics{--a1:#fbbf24;--a2:#d97706;--soft:#fef3c7;}
/* feature hues */
.t-practice{--a1:#2dd4bf;--a2:#0f766e;--soft:#ccfbf1;}
.t-tutor{--a1:#fb7185;--a2:#be123c;--soft:#ffe4e6;}
.t-grade{--a1:#34d399;--a2:#047857;--soft:#d1fae5;}
.t-notes{--a1:#22d3ee;--a2:#0e7490;--soft:#cffafe;}
.t-cards{--a1:#a78bfa;--a2:#6d28d9;--soft:#ede9fe;}
.t-textbook{--a1:#38bdf8;--a2:#0284c7;--soft:#e0f2fe;}
.section-h{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;margin:22px 0 2px;}
@media(max-width:600px){
  .rj-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .tile{padding:9px 9px 11px;border-radius:18px;}
  .tile .art{border-width:3px;border-radius:13px;}
  .tile .tname{font-size:14px;margin:9px 2px 0;gap:5px;}
  .tile .tsub{font-size:11px;}
}
.panel{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-sm);}
.streak{background-color:#c2410c;color:#fff;border:none;display:flex;align-items:center;gap:16px;}
.streak .flame{font-size:40px;line-height:1;animation:flamepulse 2.2s ease-in-out infinite;}
.streak .big{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;}
.streak .lbl{opacity:.95;font-weight:600;}
.pillbtn{font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;background:var(--teal-soft);color:var(--teal-deep);text-decoration:none;box-shadow:0 2px 0 #8fe3d3;}
.pillbtn:active{transform:translateY(2px);box-shadow:0 0 0 #8fe3d3;}

/* ============ flashcards ============ */
button.pillbtn{font-family:inherit;border:none;cursor:pointer;}
button.pillbtn:disabled{opacity:.45;cursor:default;}
.deckrow{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.deckrow .meta{flex:1;min-width:0;}
.deckrow .meta .t{font-weight:800;font-family:var(--display);font-size:16px;letter-spacing:-.01em;}
.deckrow .meta .s{font-size:12.5px;color:var(--ink-soft);}
.duepill{font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;background:#fdf2f4;color:var(--coral-deep);white-space:nowrap;}
.duepill.zero{background:#ecfdf5;color:#065f46;}
.cardbar{height:10px;border-radius:999px;background:#eef2f7;overflow:hidden;margin-bottom:18px;}
.cardbar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:999px;background:var(--teal);transition:transform .3s;}
.flashwrap{perspective:1400px;max-width:640px;margin:0 auto;}
.flashcard{position:relative;width:100%;min-height:320px;cursor:pointer;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,.1,.2,1);}
.flashcard.flipped{transform:rotateY(180deg);}
.flashcard .face{position:absolute;inset:0;overflow-y:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border:1px solid var(--rule);border-radius:24px;box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:10px;}
.flashcard .face.back{transform:rotateY(180deg);background:#f0fdfa;border-color:#99f6e4;}
.fc-body{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:19px;line-height:1.5;font-weight:600;}
.face.back .fc-body{font-weight:500;}
.gradebtns{display:flex;gap:12px;max-width:640px;margin:18px auto 0;}
.gbtn{flex:1;font-family:inherit;font-weight:800;font-size:15px;padding:13px 8px;border-radius:16px;border:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:filter .12s;}
.gbtn span{font-size:11.5px;font-weight:600;opacity:.9;}
.gbtn:hover{filter:brightness(1.07);}
.gbtn:active{transform:translateY(4px);box-shadow:0 0 0 transparent!important;}
.gbtn.again{background:var(--coral-deep);box-shadow:0 4px 0 #9f1239;}
.gbtn.good{background:var(--teal);box-shadow:0 4px 0 var(--teal-deep);}
.gbtn.easy{background:#047857;box-shadow:0 4px 0 #065f46;}

/* ============ the robot: idle life + reaction states ============ */
/* Continuous idle: breathe, auto-blink, antenna glow. Reaction classes
   (.wave .hop .look-l .look-r) are toggled by the state machine in shell.js. */
svg.mbot .m-eye,svg.mbot .m-pupil,svg.mbot .m-glow,svg.mbot .m-arm-r,svg.mbot .m-arm-l{transform-box:fill-box;transform-origin:center;}
svg.mbot.on .m-all{animation:m-breathe 3.4s ease-in-out infinite;}
svg.mbot.on .m-eye{animation:m-blink 4.7s infinite;}
svg.mbot.on .m-glow{animation:m-glowpulse 2.6s ease-in-out infinite;}
@keyframes m-breathe{0%,100%{transform:translateY(0);}50%{transform:translateY(2.5px);}}
@keyframes m-blink{0%,93.5%,100%{transform:scaleY(1);}95.5%,97.5%{transform:scaleY(0.08);}}
@keyframes m-glowpulse{0%,100%{opacity:.3;transform:scale(1);}50%{opacity:.75;transform:scale(1.25);}}
svg.mbot .m-pupil{transition:transform .3s ease-out;}
svg.mbot.look-l .m-pupil{transform:translateX(-3.5px);}
svg.mbot.look-r .m-pupil{transform:translateX(3.5px);}
svg.mbot .m-arm-r{transform-origin:50% 15%;}
svg.mbot.wave .m-arm-r{animation:m-wave .95s ease-in-out 2;}
@keyframes m-wave{0%,100%{transform:rotate(0);}35%{transform:rotate(-135deg);}60%{transform:rotate(-100deg);}80%{transform:rotate(-130deg);}}
svg.mbot.hop{animation:m-hop .85s cubic-bezier(.22,1,.36,1) 2;}
@keyframes m-hop{0%,100%{transform:translateY(0) scale(1);}30%{transform:translateY(-8px);}52%{transform:translateY(0) scaleY(.93) scaleX(1.06);}64%{transform:translateY(0) scale(1);}78%{transform:translateY(-4px);}}
svg.mbot.hop .m-mouth{transform:scale(1.18);transform-box:fill-box;transform-origin:center;}
#brandBot{cursor:pointer;display:inline-flex;}

/* ============ loading companion ============ */
.loadbot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0 8px;}
.loadbot .rig{position:relative;width:132px;height:106px;}
.loadbot .bot{position:absolute;left:0;top:0;animation:carry-bob 0.9s ease-in-out infinite;display:block;}
.loadbot .books{position:absolute;right:0;top:8px;width:74px;transform-origin:50% 100%;
  animation:carry-bob 0.9s ease-in-out infinite;animation-delay:.09s;}
.loadbot .shadow{position:absolute;left:14px;bottom:-6px;width:96px;height:10px;border-radius:50%;
  background:rgba(15,23,42,.10);animation:shadow-squish 0.9s ease-in-out infinite;}
.loadbot .puff{position:absolute;left:-16px;width:9px;height:9px;border-radius:50%;background:#b9d6cf;opacity:0;animation:puff-away 1.35s ease-out infinite;}
.loadbot .p1{top:38px;}
.loadbot .p2{top:56px;animation-delay:.45s;}
.loadbot .p3{top:47px;animation-delay:.9s;}
.loadbot .lbl{font-size:13.5px;font-weight:700;color:var(--ink-soft);}
@keyframes carry-bob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7px) rotate(-2deg);}}
@keyframes shadow-squish{0%,100%{transform:scaleX(1);opacity:.9;}50%{transform:scaleX(.82);opacity:.6;}}
@keyframes puff-away{0%{opacity:0;transform:translateX(0) scale(.6);}25%{opacity:.8;}100%{opacity:0;transform:translateX(-26px) scale(1.25);}}

/* ============ motion & celebration (DESIGN.md) ============ */
.pop-in{animation:pop-in .38s cubic-bezier(.22,1,.36,1);}
@keyframes pop-in{0%{transform:scale(.94);opacity:.4;}62%{transform:scale(1.015);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes flamepulse{0%,100%{transform:scale(1) rotate(-2deg);}50%{transform:scale(1.12) rotate(3deg);}}
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden;}
.confetti-layer i{position:absolute;top:-16px;border-radius:2px;animation-name:confetti-fall;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes confetti-fall{to{transform:translate3d(var(--drift,0),105vh,0) rotate(var(--spin,720deg));opacity:.9;}}
@media (prefers-reduced-motion:reduce){
  .pop-in,.streak .flame,.confetti-layer i,.rj-grid .tile,.loadbot .bot,.loadbot .books,
  .loadbot .shadow,.loadbot .puff,.focus-ov,
  svg.mbot.on .m-all,svg.mbot.on .m-eye,svg.mbot.on .m-glow,svg.mbot.wave .m-arm-r,svg.mbot.hop{animation:none;}
  .flashcard,.cardbar i,.tile .tbar i,.tile,.tile .art svg,.side-nav a svg,svg.mbot .m-pupil{transition:none;}
}

/* ============ Pip the mascot ============ */
.brand svg{flex:none;}
.continue-row{display:flex;align-items:center;gap:18px;margin:14px 0 0;padding:16px 20px;}
.continue-row svg{flex:none;}
.continue-row .meta{flex:1;min-width:0;}
.continue-row .meta .t{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;}
.continue-row .meta .s{font-size:13.5px;color:var(--ink-soft);}
@media(max-width:600px){.continue-row{flex-wrap:wrap;}}

/* ============ refinement pass ============ */
.weekdots{display:flex;gap:7px;}
.weekdots .wd{display:flex;flex-direction:column;align-items:center;gap:3px;}
.weekdots .wd i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-style:normal;font-weight:800;color:#7c2d12;}
.weekdots .wd.done i{background:#fff;}
.weekdots .wd.today i{outline:2.5px solid rgba(255,255,255,.85);outline-offset:1.5px;}
.weekdots .wd b{font-size:9.5px;font-weight:800;opacity:.85;}
.tdots{display:inline-flex;gap:4px;align-items:center;padding:4px 2px;}
.tdots i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.5;animation:tdot 1.1s infinite;}
.tdots i:nth-child(2){animation-delay:.18s;}
.tdots i:nth-child(3){animation-delay:.36s;}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
.deckchip{flex:none;width:42px;height:42px;border-radius:13px;background:var(--teal-soft);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
@media (prefers-reduced-motion:reduce){.tdots i{animation:none;}}

/* ============ notes ============ */
.notepage{background:#fff;border:1px solid var(--rule);border-radius:24px;padding:30px 34px;box-shadow:var(--shadow-sm);max-width:760px;margin:0 auto;}
.notepage h1{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;margin:4px 0 10px;}
.notepage h2{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;margin:24px 0 8px;color:var(--teal-deep);}
.notepage p{margin:0 0 10px;}
.notepage .intro{font-size:17px;color:var(--ink-soft);}
.formulas{display:flex;flex-direction:column;gap:10px;}
.formula{display:flex;align-items:center;gap:16px;background:#f0fdfa;border:1px solid #99f6e4;border-radius:14px;padding:10px 16px;}
.formula .fx{flex:none;min-width:130px;font-size:16px;}
.formula .fmeta{font-size:13.5px;color:var(--ink-soft);}
.formula .fmeta b{color:var(--ink);}
.worked{background:#f8fafc;border:1px solid var(--rule);border-radius:16px;padding:14px 18px;}
.worked summary{cursor:pointer;font-weight:800;color:var(--teal);margin:6px 0;}
.traps li{margin:7px 0;}
@media(max-width:600px){.notepage{padding:20px;}}

/* ============ mobile refinements ============ */
@media(max-width:860px){
  .brand .name{display:none;}
}
@media(max-width:600px){
  .continue-row svg{width:64px;height:66px;}
  .continue-row .meta{flex:1;min-width:55%;}
  .continue-row button{flex:1 1 100%;}
  .continue-row .meta .t{font-size:17px;}
  .streak{flex-wrap:wrap;}
  .streak .big{font-size:26px;}
  .weekdots{width:100%;justify-content:space-between;margin-top:8px;}
}
@media(max-width:600px){
  .tools{flex-wrap:wrap;}
  .tools #submitBtn{flex:1 1 100%;}
}
@media(max-width:860px){
  .side-foot .label{white-space:nowrap;font-size:10px;}
}
@media(max-width:600px){
  .formula{flex-wrap:wrap;gap:6px;}
}

/* pill buttons (Practice / Review / Read) — visible hover + press */
.pillbtn{transition:background .13s, transform .13s, box-shadow .13s;}
.pillbtn:hover{background:#a7f0e0;transform:translateY(-1px);box-shadow:0 3px 0 #8fe3d3;}
.pillbtn:disabled:hover{background:var(--teal-soft);transform:none;box-shadow:none;}

/* ============ question bank ============ */
.bank-subjects{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px;}
.subjchip{font-family:inherit;font-size:13.5px;font-weight:800;color:var(--ink);
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border:none;border-radius:999px;
  background:var(--soft,#d9f3ee);cursor:pointer;box-shadow:0 2px 0 rgba(15,23,42,.10);transition:transform .13s;}
.subjchip:hover{transform:translateY(-1px);}
.subjchip:active{transform:translateY(1px);box-shadow:none;}
.subjchip.active{outline:2.5px solid var(--a2,#0f766e);outline-offset:1.5px;}
.subjchip b{font-size:11px;font-weight:800;background:#fff;border-radius:999px;padding:1px 8px;color:var(--ink-soft);}
.subjchip .mini-art{flex:none;width:34px;height:26px;border-radius:8px;border:2px solid #fff;overflow:hidden;position:relative;
  background:linear-gradient(155deg,var(--a1,#2dd4bf),var(--a2,#0f766e));}
.subjchip .mini-art svg{position:absolute;inset:0;width:100%;height:100%;}
.bank-controls{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:14px 0 0;}
.bank-controls .spacer{flex:1;}
.bank-controls .fgroup{display:flex;flex-direction:column;gap:5px;}
.bank-controls select{min-width:170px;}
.bankq{margin:12px 0;}
.bq-n{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;margin-right:2px;}
.bq-answer{margin-top:12px;border-top:1.5px dashed var(--rule);padding-top:12px;}
.bq-final{background:var(--teal-soft);border-radius:12px;padding:10px 14px;margin-bottom:10px;font-size:14.5px;}
.bq-scheme{font-size:14px;line-height:1.75;color:var(--ink);}
.bq-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;}
.bq-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.bq-marks{font-size:12.5px;font-weight:800;color:var(--teal-deep);}
.bq-src{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-left:auto;}
.bq-stem{font-size:15.5px;line-height:1.7;}
.diffdots{display:inline-flex;gap:3px;align-items:center;}
.diffdots i,.diffdots u{width:8px;height:8px;border-radius:50%;}
.diffdots i{background:var(--amber);}
.diffdots u{background:#e5ece9;}
.bank-empty{margin-top:14px;}
.bank-empty code{font-size:12px;background:#eef4f2;padding:2px 6px;border-radius:6px;}
.theorylink{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:800;color:var(--teal-deep);text-decoration:none;
  background:var(--teal-soft);border-radius:999px;padding:8px 16px;}
.theorylink:hover{background:#a7f0e0;}
.bq-table{border-collapse:collapse;margin:10px 0;font-size:13.5px;}
.bq-table th,.bq-table td{border:1.5px solid var(--rule);padding:6px 12px;text-align:left;}
.bq-table th{background:#f2f8f6;font-weight:800;}
.flowbanner{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  background:var(--teal-soft);border-radius:18px;padding:12px 18px;margin:14px 0 4px;color:var(--teal-deep);font-size:14.5px;}
.bq-input{width:100%;margin-top:12px;font-family:inherit;font-size:14.5px;font-weight:500;line-height:1.6;
  padding:11px 14px;border:1.5px solid var(--rule);border-radius:14px;background:#f7fbfa;color:var(--ink);resize:vertical;}
.bq-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.14);background:#fff;}
.bq-result{margin-top:12px;background:#f7fbfa;border:1.5px solid var(--rule);border-radius:14px;padding:12px 16px;}
.bq-hint{margin-top:12px;}
.hchips{display:flex;gap:8px;flex-wrap:wrap;}
.hchip{font-family:inherit;font-size:12.5px;font-weight:800;padding:7px 14px;border:1.5px solid var(--rule);border-radius:999px;
  background:#fff;color:var(--teal-deep);cursor:pointer;box-shadow:0 2px 0 #d3dce6;}
.hchip:hover{background:var(--teal-soft);}
.hchip:active{transform:translateY(2px);box-shadow:0 0 0 #d3dce6;}
.bq-hintout{min-height:0;}
.bq-ask{display:flex;gap:8px;margin-top:10px;}
.bq-ask .bq-askin{flex:1;font-family:inherit;font-size:13.5px;font-weight:500;padding:9px 13px;
  border:1.5px solid var(--rule);border-radius:12px;background:#fff;color:var(--ink);}
.bq-ask .bq-askin:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.14);}
.bq-img{display:block;max-width:min(460px,100%);margin:12px auto;border:1.5px solid var(--rule);border-radius:12px;background:#fff;padding:8px;}
.hintcard{background:var(--teal-soft);border-radius:14px;padding:12px 16px;margin-top:12px;font-size:14.5px;}
.focus-ov{position:fixed;inset:0;background:var(--bg);z-index:70;display:flex;flex-direction:column;animation:focus-in .26s ease-out;}
@keyframes focus-in{0%{opacity:0;transform:translateY(16px);}100%{opacity:1;transform:none;}}
.focus-head{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--rule);background:#fff;}
.focus-body{flex:1;overflow-y:auto;padding:22px;max-width:860px;width:100%;margin:0 auto;}
.focus-body .bankq{margin:0 0 24px;}
@media(max-width:600px){.focus-head{flex-wrap:wrap;padding:10px 14px;}.focus-body{padding:14px;}}
/* onboarding wizard */
.wiz{max-width:560px;max-height:86vh;overflow-y:auto;}
.wsegs{display:flex;gap:8px;margin-bottom:16px;}
.wseg{flex:1;height:6px;border-radius:999px;background:#e3efec;}
.wseg.on{background:var(--ink);}
.chiprow{display:flex;gap:10px;flex-wrap:wrap;}
.schip{font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 9px;border:2px solid var(--rule);border-radius:999px;background:#fff;cursor:pointer;transition:transform .12s;}
.schip.plain{padding:9px 18px;}
.schip:hover{transform:translateY(-1px);}
.schip.on{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-deep);}
.schip .lvl{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:999px;background:#eef4f2;color:var(--ink-soft);}
.schip.on .lvl{background:#fff;}
.schip-art{flex:none;width:34px;height:26px;border-radius:8px;border:2px solid #fff;overflow:hidden;position:relative;
  background:linear-gradient(155deg,var(--a1,#2dd4bf),var(--a2,#0f766e));box-shadow:0 1px 4px rgba(15,23,42,.18);}
.schip-art svg{position:absolute;inset:0;width:100%;height:100%;}
.lvlrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);}
.lvlrow:last-of-type{border-bottom:none;}
.lvlname{font-weight:800;}
.lvlpick{display:inline-flex;background:#e3efec;border-radius:12px;padding:3px;gap:2px;}
.lvlbtn{font-family:inherit;font-size:13px;font-weight:800;padding:7px 16px;border:none;border-radius:10px;background:transparent;color:var(--ink-soft);cursor:pointer;}
.lvlbtn.on{background:#fff;color:var(--teal-deep);box-shadow:0 1px 3px rgba(15,23,42,.12);}

/* ============ textbook ============ */
.book-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start;margin-top:14px;}
@media(max-width:860px){.book-layout{grid-template-columns:1fr;}}
.toc{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;}
.toclink{display:block;width:100%;text-align:left;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  padding:8px 12px;border:none;border-radius:10px;background:transparent;cursor:pointer;line-height:1.4;}
.toclink:hover{background:#eaf4f1;}
.toclink.active{background:var(--teal-soft);color:var(--teal-deep);}
.tocnew{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--coral-soft);color:var(--coral-deep);
  border-radius:999px;padding:2px 7px;margin-left:8px;vertical-align:middle;}
.chapter{padding:26px 30px;min-height:400px;}
.ch-title{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.03em;margin:6px 0 10px;}
.ch-intro{font-size:16.5px;color:var(--ink-soft);line-height:1.7;margin:0 0 10px;}
.ch-h2{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;margin:24px 0 8px;color:var(--teal-deep);}
.ch-body{line-height:1.8;font-weight:500;}
.keypoints{background:var(--teal-soft);border-radius:16px;padding:16px 20px;margin:22px 0 4px;}
.keypoints ul{margin:0;padding-left:20px;}
.keypoints li{margin:7px 0;line-height:1.6;}
.checkq{background:#f7fbfa;border:1.5px solid var(--rule);border-radius:16px;padding:14px 18px;margin:12px 0;}
@media(max-width:600px){.chapter{padding:18px;}}

/* ============ typed working + equation bar ============ */
.modeswitch{display:inline-flex;background:#e3efec;border-radius:12px;padding:3px;gap:2px;}
.modeswitch button{font-family:inherit;font-size:13px;font-weight:800;padding:7px 14px;border:none;border-radius:10px;background:transparent;color:var(--ink-soft);cursor:pointer;}
.modeswitch button.active{background:#fff;color:var(--teal-deep);box-shadow:0 1px 3px rgba(15,23,42,.12);}
.eqbar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.eqbar button{font-family:inherit;font-size:14px;font-weight:700;min-width:38px;padding:6px 9px;border:1.5px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 #d3dce6;}
.eqbar button:hover{background:#eaf4f1;}
.eqbar button:active{transform:translateY(2px);box-shadow:0 0 0 #d3dce6;}
#typedWork{width:100%;min-height:180px;resize:vertical;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:14.5px;line-height:1.7;}
.typed-preview{margin-top:10px;background:#fff;border:1.5px solid var(--rule);border-radius:14px;padding:12px 16px;min-height:52px;font-size:16px;line-height:1.9;}
.eqbar .eq-visual{background:var(--teal-soft);color:var(--teal-deep);border-color:#9be5d6;font-weight:800;}
math-field{width:100%;min-height:72px;font-size:22px;border:1.5px solid var(--rule);border-radius:14px;padding:12px 14px;--caret-color:var(--teal);}
math-field:focus-within{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.14);}