/* Light Bulb UI. Colours come from theme tokens (see :root in index.html, overridden by themes.js). */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--fs:clamp(15.5px,0.9rem + 0.35vw,18px);--gut:clamp(14px,4.5vw,28px);--r:clamp(18px,5vw,28px);
  --glass:rgba(255,255,255,.055);--glass2:rgba(255,255,255,.09);--line:rgba(255,255,255,.11);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs)}
html,body{min-height:100%;background:var(--night);color:var(--marble);font-family:var(--font-body);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.view{display:none;position:relative;z-index:1}.view.on{display:block;animation:viewIn .5s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.key{display:none}

/* ---------- living background ---------- */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(140% 90% at 50% -10%,var(--lapis) 0%,var(--night) 60%)}
.blob{position:absolute;width:75vmax;height:75vmax;border-radius:50%;filter:blur(70px);opacity:.55;}
.b1{background:radial-gradient(circle,var(--glow) 0%,transparent 62%);top:-30vmax;left:-25vmax;animation:drift1 26s ease-in-out infinite alternate}
.b2{background:radial-gradient(circle,rgba(var(--accent-rgb),.55) 0%,transparent 60%);top:20vh;right:-35vmax;animation:drift2 32s ease-in-out infinite alternate;opacity:.35}
.b3{background:radial-gradient(circle,var(--lapis) 0%,transparent 65%);bottom:-40vmax;left:-10vmax;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,22vh) scale(1.25)}}
@keyframes drift2{to{transform:translate(-26vw,-14vh) scale(.85)}}
@keyframes drift3{to{transform:translate(22vw,-30vh) scale(1.15)}}
.gridlines{position:absolute;inset:-60px;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 90% 60% at 50% 20%,#000 20%,transparent 75%);animation:pan 18s linear infinite}
@keyframes pan{to{transform:translate(44px,44px)}}
.grain{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:calc(64px + 2vh) var(--gut) 8px;min-height:min(66svh,600px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
#heroArt{position:absolute;inset:0 0 auto 0;height:100%;z-index:-1;display:flex;justify-content:center;align-items:flex-start;padding-top:56px}
#heroArt svg{width:min(78vw,400px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));animation:float 9s ease-in-out infinite}
#heroArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(#000 45%,transparent 96%);mask-image:linear-gradient(#000 45%,transparent 96%);animation:kenburns 30s ease-in-out infinite alternate}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translateY(-1.5%)}}
.name{display:inline-block;max-width:100%;align-self:center;font-family:var(--font-display);font-weight:700;font-size:clamp(46px,15vw,104px);line-height:.95;letter-spacing:.06em;
  background:linear-gradient(100deg,var(--gold) 0%,#fff 22%,var(--gold) 44%,var(--gold) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;text-shadow:0 0 40px rgba(var(--accent-rgb),.25)}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-130% 0}}
.motto{font-style:italic;color:var(--motto);font-size:clamp(15px,4.2vw,19px);margin-top:10px;opacity:.9}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px auto 0;max-width:460px}
.stats div{font-family:var(--font-body);font-size:clamp(22px,7vw,30px);line-height:1.1;padding:12px 6px;border-radius:16px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stats small{display:block;font-family:var(--font-body);font-style:italic;font-size:12px;color:var(--sub);margin-top:4px}
.pick{position:absolute;top:16px;right:var(--gut);z-index:3;font-family:var(--font-body);font-size:13px;letter-spacing:.05em;color:#fff;
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;background:rgba(0,0,0,.25);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .2s,background .2s}
.pick:active{transform:scale(.95)}
.srch{right:auto;left:var(--gut)}

/* ---------- today card (glass with rotating glow) ---------- */
.stele{position:relative;margin:18px var(--gut) 0;padding:clamp(22px,6vw,32px);border-radius:var(--r);text-align:left;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 80px rgba(0,0,0,.45);color:var(--marble);overflow:hidden;background-image:none!important}
.stele::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 60%,var(--gold) 75%,#fff 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 14s linear infinite;pointer-events:none;opacity:.7}
@keyframes spin{to{--ang:360deg}}
.stele .day{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-style:normal}
.stele h2{font-family:var(--font-display);font-size:clamp(24px,7.5vw,34px);line-height:1.12;margin:10px 0 8px;color:#fff}
.stele p{color:var(--sub);font-size:15px}
.start{position:relative;overflow:hidden;margin-top:20px;width:100%;background:linear-gradient(135deg,var(--btn1),var(--btn2));color:var(--btn-ink);font-family:var(--font-body);font-weight:700;
  font-size:clamp(16px,4.6vw,18px);letter-spacing:.04em;padding:16px;border-radius:16px;box-shadow:0 12px 32px var(--btn-shadow),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .15s}
.start::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{60%,100%{transform:translateX(120%)}}
.start:active{transform:scale(.98)}

/* ---------- syllabus map ---------- */
.sec{padding:clamp(34px,9vw,52px) var(--gut) 10px}
.sec h3{font-family:var(--font-display);font-size:clamp(20px,6vw,26px);color:#fff;font-weight:600}
.sec p{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.unit{margin:8px var(--gut);border-radius:18px;background:var(--glass);border:1px solid var(--line);overflow:hidden;transition:background .25s,border-color .25s}
.unit.open{background:var(--glass2);border-color:rgba(var(--accent-rgb),.35)}
.unit>button{width:100%;text-align:left;padding:15px 16px;display:flex;align-items:center;gap:12px}
.unit .t{flex:1;font-size:16px;line-height:1.35;color:#fff}
.unit .c{font-size:12px;color:var(--sub);white-space:nowrap}
.hy{display:inline-block;font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--btn-ink);background:var(--gold);border-radius:6px;padding:1px 6px;margin-left:8px;vertical-align:2px}
.unit.live .c{color:var(--gold)}
.chev{width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .3s var(--ease);margin-top:-4px}
.unit.open .chev{transform:rotate(-135deg);margin-top:4px}
.ls{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.ls>*{min-height:0}
.unit .ls{display:none}.unit.open .ls{display:block;padding:0 8px 10px;animation:viewIn .35s var(--ease) both}
.les{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:10px;border-radius:12px;font-size:15px;color:var(--motto);transition:background .2s}
.les:active,.les:hover{background:rgba(255,255,255,.06)}
.num{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-family:var(--font-body);font-size:13px;border:1px solid rgba(var(--accent-rgb),.6);color:var(--gold)}
.les.done .num{background:var(--gold);color:var(--btn-ink);border-color:transparent}
.les.soon{opacity:.45}
.foot{text-align:center;font-style:italic;color:var(--foot);font-size:13px;padding:40px var(--gut) 56px}

/* ---------- lesson deck ---------- */
#lesson{min-height:100svh}
.bar{display:flex;align-items:center;gap:12px;padding:12px var(--gut) 8px;position:relative;z-index:2}
.x{width:42px;height:42px;flex:none;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font-size:20px;line-height:1}
.prog{flex:1;height:4px;background:rgba(255,255,255,.12);border-radius:9px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--gold),#fff);box-shadow:0 0 14px var(--gold);transition:width .4s var(--ease)}
.cnt{font-family:var(--font-body);font-size:12px;color:var(--sub);min-width:40px;text-align:right}
.deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:calc(100svh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.cd{flex:0 0 100%;scroll-snap-align:center;padding:4px var(--gut) 20px}
.ci{height:100%;border-radius:var(--r);padding:clamp(22px,6vw,32px) clamp(18px,5.5vw,30px) 24px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;position:relative;
  background-color:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.5);font-size:clamp(15.5px,4.3vw,17.5px)}
.ci{background-image:linear-gradient(90deg,var(--goldd),var(--gold) 50%,var(--goldd));background-size:100% 3px;background-repeat:no-repeat;background-position:0 0}
@keyframes flow{to{background-position:300% 0}}
.ci>*{opacity:0;transition:opacity .45s ease}
.ci.in>*{opacity:1}
.ci.in>*:nth-child(2){transition-delay:.05s}.ci.in>*:nth-child(3){transition-delay:.1s}.ci.in>*:nth-child(4){transition-delay:.15s}.ci.in>*:nth-child(n+5){transition-delay:.2s}
.cover>:first-child{margin-top:auto}.cover>:last-child{margin-bottom:auto}
.tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--goldd);font-weight:600;margin:4px 0 6px}
.ci h2{font-family:var(--font-display);font-size:clamp(22px,6.6vw,30px);line-height:1.18;margin-bottom:14px;color:var(--ink);overflow-wrap:anywhere}
.ci p{margin-bottom:12px}.ci ul,.ci ol{padding-left:20px;margin-bottom:12px}.ci li{margin-bottom:7px}
.ci b{font-weight:700;color:var(--strong);background:linear-gradient(transparent 62%,rgba(var(--accent-rgb),.35) 62%)}
.ci img{max-width:100%;border-radius:14px;margin:6px 0 14px}
.box{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.06);border-left:3px solid var(--gold);border-radius:6px 14px 14px 6px;padding:12px 14px;margin-bottom:10px;font-size:.95em}
.box h4{font-family:var(--font-display);font-size:14px;color:var(--goldd);margin-bottom:3px}
.quote{font-size:1.2em;font-style:italic;line-height:1.45;padding:4px 0 4px 18px;border-left:3px solid var(--gold);margin:4px 0 10px;color:var(--quote-ink)}
.who{color:var(--vein);font-size:14px;margin:-4px 0 12px 20px}
.exam{background-color:var(--exam-bg)}.exam .tag{color:var(--teal)}
svg.d{width:100%;height:auto;margin:4px 0 14px;flex-shrink:0;overflow:visible}
.cover{justify-content:center;align-items:center;text-align:center}
.cover h2{font-size:clamp(28px,9vw,40px)}
.cover .em{font-size:clamp(52px,16vw,72px);margin-bottom:6px;animation:float 6s ease-in-out infinite}
.hint{color:var(--vein);font-style:italic;font-size:14px;margin-top:22px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(-8px)}}
.cd{position:relative}
.more{position:absolute;left:calc(var(--gut) + 1px);right:calc(var(--gut) + 1px);bottom:21px;height:64px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;border-radius:0 0 var(--r) var(--r);pointer-events:none;font-family:var(--font-hand);font-size:18px;color:var(--goldd);background:linear-gradient(transparent,var(--card) 70%);transition:opacity .3s}
.more.gone{opacity:0}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--opt-line);border-radius:14px;padding:13px 16px;margin-bottom:10px;font-size:16px;color:var(--ink);transition:background .2s,border-color .2s,transform .15s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.opt:active{transform:scale(.99)}
.opt.r{border-color:var(--teal);background:var(--good-bg)}.opt.w{border-color:var(--red);background:var(--bad-bg);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.why{display:none;font-size:15px;color:var(--why);margin-top:4px}.why.on{display:block;animation:viewIn .35s both}
.score{font-family:var(--font-display);font-size:clamp(52px,16vw,72px);color:var(--goldd);line-height:1}
.wreath{width:190px;margin:0 auto -8px}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.sheet[hidden]{display:none}
.sheet-in{width:100%;max-height:88vh;overflow-y:auto;border-radius:26px 26px 0 0;padding:22px var(--gut) calc(28px + env(safe-area-inset-bottom));position:relative;
  background:var(--card);color:var(--ink);animation:up .4s var(--ease) both;box-shadow:0 -20px 60px rgba(0,0,0,.4)}
@keyframes up{from{transform:translateY(100%)}}
.sheet-in h2{font-family:var(--font-display);font-size:20px;color:var(--ink);margin:6px 0 12px}
.sx{position:absolute;top:14px;right:14px;color:var(--ink);background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;border-radius:16px;border:1px solid var(--opt-line);background:#fff;color:var(--ink);font-size:16px;transition:transform .15s}
.choice:active{transform:scale(.98)}
.choice.on{border-color:var(--goldd);box-shadow:inset 0 0 0 1px var(--goldd)}
.choice small{display:block;color:var(--vein);font-size:13px}
.choice[disabled]{opacity:.5}
.sw{width:36px;height:36px;flex:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* ---------- search ---------- */
#search{min-height:100svh}
#q{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 16px;border-radius:14px;border:1px solid var(--line);background:var(--glass2);color:#fff;backdrop-filter:blur(14px)}
.allsub{display:block;padding:2px var(--gut) 12px;color:var(--sub);font-size:14px}
#results{padding:0 var(--gut) 40px}
.hit{display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);animation:viewIn .3s both}
.hit b{display:block;color:#fff;font-weight:600;font-family:var(--font-body)}
.hit small{display:block;color:var(--gold);font-size:12px;letter-spacing:.04em;margin:3px 0 6px}
.hit span{color:var(--motto);font-size:14.5px}
.hit mark{background:rgba(var(--accent-rgb),.4);color:#fff;border-radius:3px}

/* ---------- ask ---------- */
.ask{font-size:17px}
.note{color:var(--vein);font-size:14px;margin-bottom:10px}
#apiKey,#model,#doubt{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:14px;border:1px solid var(--opt-line);background:#fff;color:var(--ink);margin-bottom:10px}
#chat{max-height:46vh;overflow-y:auto;margin-bottom:10px}
.qa{padding:11px 13px;border-radius:14px;margin-bottom:8px;font-size:16px;white-space:pre-wrap;animation:viewIn .3s both}
.qa.me{background:var(--exam-bg);margin-left:12%}
.qa.ai{background:#fff;border-left:3px solid var(--gold)}
.linkbtn{display:block;margin:12px auto 0;color:var(--goldd);font-size:14px;text-decoration:underline}

@media (min-width:760px){.hero,.stele,#map,.foot,.sec{max-width:720px;margin-left:auto;margin-right:auto}.unit{max-width:680px;margin-left:auto;margin-right:auto}.cd{padding-left:calc(50% - 340px);padding-right:calc(50% - 340px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ci>*{opacity:1;transform:none}}
/* full-bleed artwork hero */
.hero.has-img{min-height:min(94svh,900px);padding-top:0}
.hero.has-img #heroArt{padding:0}
.hero.has-img #heroArt::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,var(--night))}
.hero.has-img .name{text-shadow:0 4px 40px rgba(0,0,0,.6)}
/* subject icons */
.ic{width:24px;height:24px;flex:none}
.ic.sm{width:16px;height:16px;vertical-align:-3px}
.pick{display:inline-flex;align-items:center;gap:6px}
.sic{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;color:var(--a);background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--b) 70%,#fff 8%),var(--b));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.18)}
.choice strong{font-family:var(--font-display);font-weight:700}
.les.test{color:var(--gold);font-weight:600}
.les.test .num{background:rgba(var(--accent-rgb),.15)}

/* type system: serif titles, Manrope body, Caveat handwritten accents */
.ci,.stele p,.unit .t,.les,.opt,.why,.box,.hit span,.note,.qa{font-family:var(--font-body)}
.ci{line-height:1.68;letter-spacing:-.003em}
.ci b{font-weight:700}
.motto,.stats small,.stele .day,.tag,.hint,.who,.sec p,.foot,.allsub,.hy,.more{font-family:var(--font-hand);font-style:normal!important;letter-spacing:.01em;text-transform:none}
.motto{font-size:clamp(20px,5.6vw,25px);line-height:1.3}
.stats small{font-size:16px}
.stele .day{font-size:19px;color:var(--gold)}
.tag{font-size:20px;font-weight:600;margin:2px 0 4px}
.sec p{font-size:19px}
.hint,.who{font-size:18px}
.foot{font-size:17px}
.more{font-size:18px}
.hy{font-size:15px;padding:0 7px}
.box h4{font-family:var(--font-display)}
.quote{font-family:var(--font-display);font-style:italic}
.unit .t{font-weight:500;font-size:15.5px}
.choice,.choice small{font-family:var(--font-body)}
/* reminder row */
.remind{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--opt-line);background:#fff}
.remind b{display:block;font-size:15px}.remind small{display:block;color:var(--vein);font-size:13px;line-height:1.35}
.remind>div{flex:1}
#pushHour{font:inherit;font-size:14px;padding:8px;border-radius:10px;border:1px solid var(--opt-line);background:#fff;color:var(--ink)}
.tog{position:relative;width:46px;height:28px;flex:none}.tog input{opacity:0;width:0;height:0}
.tog span{position:absolute;inset:0;border-radius:99px;background:#cfd4da;transition:.25s}
.tog span::after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.25s var(--ease)}
.tog input:checked+span{background:var(--goldd)}.tog input:checked+span::after{transform:translateX(18px)}

/* host badges */
body>a[href*="netlify"],body>div[class*="netlify" i],body>div[id*="netlify" i],netlify-badge,#netlify-badge,[data-netlify-badge]{display:none!important}
/* account + my learning */
.mine{right:auto;left:50%;transform:translateX(-50%)}.mine:active{transform:translateX(-50%) scale(.95)}
.acct-row{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;border:1px solid var(--opt-line);background:#fff;margin-bottom:6px}
.acct-row b{display:block}.acct-row small{color:var(--vein);font-size:13px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--lapis);color:var(--gold);font-family:var(--font-display);font-size:20px;flex:none}
.signin{justify-content:flex-start;font-weight:600}.signin .g{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--exam-bg);font-weight:800;color:var(--goldd)}
.phone{display:flex;gap:8px}.phone input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px;border-radius:14px;border:1px solid var(--opt-line);background:#fff;color:var(--ink);margin-bottom:8px}.phone .choice{width:auto;flex:none}
#me{min-height:100svh}
.me-h{font-family:var(--font-display);color:#fff;font-size:24px}
.me{padding:4px var(--gut) 60px}
.me h3{font-family:var(--font-display);color:#fff;font-size:19px;margin:26px 0 10px}
.me-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.me-stats div{padding:16px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px)}
.me-stats b{display:block;font-size:30px;color:var(--gold);line-height:1.1}.me-stats small{font-family:var(--font-hand);font-size:17px;color:var(--sub)}
.heat{display:flex;gap:4px;padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--line);justify-content:space-between}
.heat div{display:flex;flex-direction:column;gap:4px}.heat i{width:clamp(14px,4.6vw,20px);aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.08)}
.heat i.on{background:var(--gold);box-shadow:0 0 8px rgba(var(--accent-rgb),.6)}.heat i.fut{opacity:.25}
.me-sub,.me-weak,.me-doubt{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;border-radius:18px;background:var(--glass);border:1px solid var(--line);color:var(--motto)}
.me-sub-t{flex:1}.me-sub-t b,.me-weak b,.me-doubt b{color:#fff;font-family:var(--font-display)}
.me-sub-t i{display:block;height:5px;border-radius:9px;background:rgba(255,255,255,.1);margin:7px 0 4px;position:relative;overflow:hidden}
.me-sub-t i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,var(--gold),#fff);border-radius:9px}
.me small{display:block;font-size:13px;color:var(--sub)}
.me-weak{flex-wrap:wrap}.me-weak b{flex:1}.me-weak span{color:var(--gold);font-weight:700;font-size:14px}.me-weak small{width:100%;order:3}
.me-doubt{flex-direction:column;align-items:flex-start;gap:4px}.me-doubt span{font-size:14px;color:var(--motto);line-height:1.45}
.me .note{color:var(--sub)}
.phone[hidden]{display:none}

#heroArt img.heroimg{opacity:0;transition:opacity .9s ease}#heroArt img.heroimg.in{opacity:1}
.me-signin{padding:18px;border-radius:20px;background:var(--glass2);border:1px solid rgba(var(--accent-rgb),.35);margin-bottom:6px}.me-signin b{display:block;color:#fff;font-family:var(--font-display);font-size:19px}.me-signin small{font-size:14px}.me-signin .note{color:var(--sub);margin:8px 0 0}

html,body{overscroll-behavior-y:none}
.ambient{contain:strict;transform:translateZ(0)}

/* chapter doodles (single-colour SVG used as a mask, tinted with the subject accent) */
.dd{display:inline-block;flex:none;width:34px;height:34px;background:var(--gold);-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.dd.big{display:block;width:clamp(120px,40vw,170px);height:clamp(120px,40vw,170px);margin:0 auto 10px;background:var(--goldd);animation:float 7s ease-in-out infinite}
.dd.card{display:block;width:clamp(120px,44vw,190px);height:clamp(90px,33vw,142px);margin:0 auto 8px;background:var(--goldd);opacity:.9}

/* ===== motion pass: unhurried, fluid transitions ===== */
:root{--ease:cubic-bezier(.22,1,.36,1);--slow:.75s}
.view.on{animation:none}
/* screen changes: new screen glides in */
.view.enter-fade{animation:vIn .8s var(--ease) both}
.view.enter-up{animation:vUp .8s var(--ease) both}
.view.enter-down{animation:vIn .8s var(--ease) both}
@keyframes vIn{from{opacity:0;transform:scale(1.012);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes vUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
#home{transition:opacity .45s var(--ease),transform .45s var(--ease)}#home.swap-out{opacity:0;transform:scale(.985)}#home.swap-in{animation:swapIn .9s var(--ease) both}@keyframes swapIn{from{opacity:0;transform:translateY(14px)}}
#heroArt img.heroimg{will-change:opacity}
/* sheets glide in and out */
.sheet{animation:fade .45s var(--ease) both}
.sheet-in{animation:up .65s var(--ease) both}
.sheet.closing{animation:fadeOut .42s var(--ease) both}
.sheet.closing .sheet-in{animation:down .42s var(--ease) both}
@keyframes fadeOut{to{opacity:0}}
@keyframes down{to{transform:translateY(100%)}}
/* chapters open smoothly */
.unit .ls,.unit.open .ls{display:grid;grid-template-rows:0fr;padding:0 8px;transition:grid-template-rows .6s var(--ease),padding .6s var(--ease);animation:none}
.unit.open .ls{grid-template-rows:1fr;padding:0 8px 10px}
.unit .ls>div,.unit .ls>.lsi{min-height:0;overflow:hidden}
.chev{transition:transform .6s var(--ease)}
.unit{transition:background .5s var(--ease),border-color .5s var(--ease)}
/* quiz feedback eases in */
.opt{transition:background .45s var(--ease),border-color .45s var(--ease),transform .2s var(--ease),box-shadow .45s}
.opt.r{box-shadow:0 0 0 3px rgba(47,111,122,.15)}
.why{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .6s var(--ease),margin .7s var(--ease);margin-top:0}
.why.on{max-height:420px;opacity:1;margin-top:6px;animation:none}
.opt.w{animation:shake .5s var(--ease)}
/* cards, progress, buttons */
.ci>*{transition:opacity .7s var(--ease)}
.prog i{transition:width .7s var(--ease)}
.start,.choice,.pick,.x,.les,.hit{transition:transform .35s var(--ease),background .35s,box-shadow .35s}
.start:active,.choice:active,.les:active,.hit:active{transform:scale(.97)}
#heroArt img.heroimg{transition:opacity 1.2s var(--ease)}
#splash{transition:opacity 1s var(--ease),visibility 1s,transform 1s var(--ease)}

.deck{scroll-behavior:smooth}


/* first-run sign-in */
#welcome{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(0,0,0,.55);animation:fade .5s var(--ease) both}
#welcome .w-in{width:100%;padding:28px var(--gut) calc(30px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:var(--card);color:var(--ink);text-align:center;animation:up .7s var(--ease) both}
#welcome img{width:96px;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 70%);mask-image:radial-gradient(circle,#000 52%,transparent 70%)}
#welcome h2{font-family:var(--font-display);font-size:24px;margin:6px 0 4px}
#welcome p{color:var(--vein);font-size:15px;margin-bottom:16px}
#welcome.closing{animation:fadeOut .45s var(--ease) both}#welcome.closing .w-in{animation:down .45s var(--ease) both}

/* top bar: one flex row so long subject names never collide with Me */
.topbar{position:absolute;top:16px;left:var(--gut);right:var(--gut);z-index:3;display:flex;gap:8px;align-items:center}
.topbar .pick{position:static;transform:none;white-space:nowrap}
.topbar .mine{margin-left:auto}.topbar .mine:active{transform:scale(.95)}
.topbar #pick{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* lesson photos (graded free-licence images) */
.ph{position:relative;margin:0 0 16px;flex:none;border-radius:18px;overflow:hidden;background:var(--night);aspect-ratio:25/16;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.ph img.in{opacity:1;transform:none}
.ph.card{aspect-ratio:2/1}
.ph .cr{position:absolute;right:8px;bottom:6px;max-width:80%;font:500 9.5px/1.2 var(--font-body);color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.7);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover .ph.big{width:100%}
/* status bar: art runs up under the camera/status icons with a soft black fade */
#heroArt{top:calc(-1 * env(safe-area-inset-top));height:calc(100% + env(safe-area-inset-top))}
.hero::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * env(safe-area-inset-top));height:calc(env(safe-area-inset-top) + 110px);z-index:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,transparent)}
/* Listen */
.x.lis{position:relative;font-size:13px}.x.lis.on{background:var(--gold);color:var(--night)}
.x.lis.rate::after{content:attr(data-rate);position:absolute;top:110%;left:50%;transform:translateX(-50%);font:600 12px var(--font-body);background:var(--card);color:var(--ink);padding:3px 8px;border-radius:8px;white-space:nowrap}
.ci.reading{box-shadow:0 0 0 2px var(--gold),0 18px 40px rgba(0,0,0,.25);transition:box-shadow .6s var(--ease)}
/* cover photo: full-bleed top half, fading into the card */
.ci.cover:has(.ph.big){justify-content:flex-start;padding-top:0}
.cover .ph.big{margin:0 calc(-1 * clamp(18px,5.5vw,30px)) 26px;width:auto;height:54%;aspect-ratio:auto;border-radius:var(--r) var(--r) 0 0;box-shadow:none;background:transparent}
.cover .ph.big img{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.cover .ph.big .cr{bottom:auto;top:10px;right:12px}

/* diagrams (PNG) are shown whole on a light panel instead of cropped */
.ph.dia{background:#f5f2ea}.ph.dia img{object-fit:contain;padding:8px}
.cover .ph.big.dia img{-webkit-mask-image:none;mask-image:none;padding:14px 14px 4px}
.cover .ph.big.dia{border-bottom:1px solid var(--opt-line)}
.ph.dia .cr{color:rgba(0,0,0,.45);text-shadow:none}

/* review card on home + previous year questions */
.revcard{display:flex;align-items:center;justify-content:space-between;gap:14px;width:calc(100% - 2*var(--gut));margin:14px var(--gut) 0;padding:16px 18px;border-radius:20px;text-align:left;
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,transparent),rgba(255,255,255,.04));color:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:up .7s var(--ease) both;transition:transform .35s var(--ease)}
.revcard[hidden]{display:none}.revcard:active{transform:scale(.98)}
.revcard .day{font-family:var(--font-hand,inherit);color:var(--gold);font-size:17px}
.revcard b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;margin:2px 0}
.revcard small{display:block;font-size:13px;opacity:.75}
.revcard .go{flex:none;padding:9px 16px;border-radius:999px;background:var(--gold);color:var(--night);font:600 14px var(--font-body)}
.pq{margin-left:8px;font:600 9.5px var(--font-body);letter-spacing:.08em;font-style:normal;padding:2px 6px;border-radius:6px;border:1px solid currentColor;opacity:.6;vertical-align:2px}
blockquote.pyq{margin:0 0 12px;padding:12px 14px;border-left:3px solid var(--goldd);border-radius:0 12px 12px 0;background:rgba(0,0,0,.035);font-size:16px;line-height:1.5}
blockquote.pyq small{display:block;margin-top:6px;font-size:12px;color:var(--vein);letter-spacing:.02em}