/* WordCraft — mascot-led UI: loading, login, guide, home quest */
/* ===== loader ===== */
#ldr{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:radial-gradient(900px 600px at 50% 30%,#4a3fb8 0%,#2b2a7a 45%,#151a4a 100%);color:#fff;transition:opacity .5s,transform .5s;overflow:hidden}
#ldr.off{opacity:0;transform:scale(1.04);pointer-events:none}
#ldr .ld-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#ldr .ld-bg i{position:absolute;font-style:normal;font-weight:800;color:rgba(255,255,255,.1);font-size:clamp(20px,4vw,40px);animation:ldF 9s linear infinite;white-space:nowrap}
@keyframes ldF{from{transform:translateY(40px) rotate(-4deg);opacity:0}15%{opacity:1}to{transform:translateY(-110vh) rotate(5deg);opacity:0}}
#ldr .ld-wave{position:absolute;left:-10%;width:120%;bottom:-2px;height:130px;opacity:.9}
#ldr .ld-wave path{animation:ldW 6s ease-in-out infinite alternate}
#ldr .ld-wave path:nth-child(2){animation-duration:8s;animation-direction:alternate-reverse}
@keyframes ldW{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.ld-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.03em;position:relative}
.ld-brand b{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#ffb020,#ff7a45);color:#2a1800;font-size:20px;box-shadow:0 6px 18px rgba(255,140,40,.4)}
.ld-brand small{font-weight:600;opacity:.65;font-size:13px}
.ld-track{position:relative;width:min(520px,86vw);height:20px;margin-top:92px;border-radius:99px;background:rgba(255,255,255,.14);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.ld-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffb020,#ff7a45);box-shadow:0 0 18px rgba(255,150,40,.6);position:relative;overflow:hidden}
.ld-fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 10px,transparent 10px 22px);animation:ldS 1s linear infinite}
@keyframes ldS{to{background-position:44px 0}}
.ld-run{position:absolute;bottom:calc(100% - 8px);width:0;height:0;left:0}
.ld-otto{position:absolute;width:120px;left:-60px;bottom:-4px}
.ld-pc{font-weight:800;font-size:15px;opacity:.9;font-variant-numeric:tabular-nums}
.ld-msg{font-weight:700;opacity:.9;position:relative}
.ld-tip{max-width:420px;text-align:center;font-size:14px;opacity:.75;min-height:42px;transition:opacity .25s,transform .25s;position:relative;line-height:1.4}
.ld-tip::before{content:"Tip · ";font-weight:800;color:#ffd34d}
.ld-tip.out{opacity:0;transform:translateY(6px)}
/* ===== login ===== */
.login{display:grid!important;place-items:stretch!important;grid-template-columns:1.05fr 1fr;padding:0!important;background:var(--bg)!important}
.login .lart{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;color:#fff;background:radial-gradient(700px 500px at 50% 35%,#5a4bd1 0%,#352f95 48%,#1a1f5a 100%)}
.lart .chips{position:absolute;inset:0;pointer-events:none}
.lart .chips span{position:absolute;padding:7px 14px;border-radius:99px;font-weight:800;font-size:15px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);animation:chF 7s ease-in-out infinite alternate}
@keyframes chF{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-16px) rotate(3deg)}}
.lart .wave{position:absolute;left:-10%;width:120%;bottom:-2px;height:150px}
.lart .wave path{animation:ldW 7s ease-in-out infinite alternate}.lart .wave path:nth-child(2){animation-duration:9s;animation-direction:alternate-reverse}
.lart .ot{position:relative;width:min(300px,52vw);margin-top:20px;z-index:2;filter:drop-shadow(0 18px 24px rgba(0,0,0,.3))}
.lart .say{position:relative;z-index:2;background:#fff;color:#241f5c;font-weight:800;padding:12px 18px;border-radius:18px;max-width:300px;text-align:center;font-size:15px;box-shadow:0 10px 28px rgba(0,0,0,.25);transition:transform .2s}
.lart .say::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.lart .say.bump{transform:scale(1.06)}
.lart h1{position:relative;z-index:2;margin:18px 0 0;font-size:clamp(26px,3.4vw,40px);font-weight:800;text-align:center;letter-spacing:-.03em}
.lart h1 em{font-style:normal;background:linear-gradient(90deg,#ffd34d,#ff9a5a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lart p{position:relative;z-index:2;margin:0;opacity:.8;font-weight:600}
.login .lform{display:grid;place-items:center;padding:24px}
.login .lcard{box-shadow:0 20px 60px rgba(20,20,60,.25)}
.login .lcard.shake{animation:lsh .4s}
@keyframes lsh{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media(max-width:820px){.login{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto}.login .lart{padding:18px 18px 62px}.lart .ot{width:130px;margin-top:6px}.lart h1{font-size:22px;margin-top:8px}.lart p,.lart .chips{display:none}.lart .say{font-size:13px;padding:8px 14px}.login .lform{padding:0 16px 24px;margin-top:-44px;position:relative;z-index:3;align-items:start}.lart .wave{height:80px}}
/* ===== game loading overlay ===== */
.pload{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(800px 500px at 50% 30%,#4a3fb8,#171b4f);color:#fff;transition:opacity .4s}
.pload.off{opacity:0;pointer-events:none}
.pload .ld-track{margin-top:70px;width:min(380px,76vw);height:16px}
.pload .ld-fill{width:0;animation:plF 1.8s cubic-bezier(.3,.7,.3,1) forwards}
.pload .ld-run{left:0;animation:plR 1.8s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes plF{to{width:92%}}@keyframes plR{to{left:92%}}
/* ===== guide (tour) ===== */
.tour{position:fixed;inset:0;z-index:300}
.tour .hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(8,10,28,.72);transition:all .45s cubic-bezier(.3,.9,.3,1);pointer-events:none;outline:3px solid #ffb020;outline-offset:3px;animation:thl 1.6s ease-in-out infinite}
.tour .hole.none{box-shadow:0 0 0 9999px rgba(8,10,28,.72);outline:0;animation:none}
@keyframes thl{50%{outline-color:rgba(255,176,32,.35)}}
.tour .tb{position:fixed;display:flex;align-items:flex-end;gap:6px;max-width:min(470px,calc(100vw - 24px));transition:left .45s cubic-bezier(.3,.9,.3,1),top .45s cubic-bezier(.3,.9,.3,1);z-index:2;animation:tbIn .4s cubic-bezier(.3,1.3,.5,1)}
@keyframes tbIn{from{opacity:0;transform:scale(.9) translateY(10px)}}
.tour .to{width:96px;flex:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.tour .bub{position:relative;background:#fff;color:#1f1b4d;border-radius:20px;padding:16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.4);margin-bottom:26px}
.tour .bub b{display:block;font-size:17px;margin-bottom:4px;letter-spacing:-.02em}
.tour .bub p{margin:0;font-size:14.5px;line-height:1.45;color:#46427a}
.tour .bub::before{content:"";position:absolute;left:-7px;bottom:22px;width:16px;height:16px;background:#fff;transform:rotate(45deg);border-radius:3px}
.tour .row2{display:flex;align-items:center;gap:8px;margin-top:12px}
.tour .dots{display:flex;gap:5px;flex:1}.tour .dots i{width:7px;height:7px;border-radius:50%;background:#d6d3f2}.tour .dots i.on{background:#6c5ce7;width:18px;border-radius:9px}
.tour .tbtn{border-radius:12px;padding:9px 16px;font-weight:800;font-size:14px;background:linear-gradient(135deg,#ffb020,#ff7a45);color:#2a1800}
.tour .tbtn.g{background:#eeecfb;color:#4a4590}
@media(max-width:560px){.tour .to{width:70px}}
/* ===== home: Otto tip, quest path, streak, word of day ===== */
.otip{display:flex;align-items:flex-end;gap:10px;margin:2px 0 16px;max-width:520px}
.otip .oo{width:74px;flex:none;margin-bottom:-4px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.otip .ob{position:relative;background:#fff;color:#241f5c;font-weight:700;font-size:14.5px;line-height:1.35;padding:11px 15px;border-radius:16px;margin-bottom:14px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.otip .ob::before{content:"";position:absolute;left:-6px;bottom:14px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:3px}
.qgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;margin:18px 0 8px}
.quest{position:relative;border-radius:24px;padding:20px 22px 22px;background:linear-gradient(135deg,#1d6f8f 0%,#2a8fa0 40%,#2f9a86 100%);color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.quest::before{content:"";position:absolute;inset:auto -10% -40px -10%;height:110px;background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.25),transparent 70%);pointer-events:none}
.quest .muted{color:rgba(255,255,255,.8)}
.qh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}.qh h2{font-size:21px}
.qpath{display:flex;align-items:center;justify-content:space-between;gap:0;padding:78px 4px 6px;position:relative}
.qn{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:104px;flex:none;position:relative;transform:translateY(calc(var(--o,1)*14px));color:#fff}
.qn b{font-size:13.5px;line-height:1.15;margin-top:6px}.qn small{font-size:11.5px;opacity:.82;line-height:1.2}
.qb{position:relative;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.55);box-shadow:0 6px 0 rgba(0,0,0,.18);transition:transform .2s}
button.qn:hover .qb{transform:translateY(-3px) scale(1.05)}
.qn.cur .qb{background:linear-gradient(135deg,#ffd34d,#ff9a3c);border-color:#fff;animation:qPulse 1.6s ease-in-out infinite}
@keyframes qPulse{0%,100%{box-shadow:0 6px 0 rgba(0,0,0,.18),0 0 0 0 rgba(255,211,77,.7)}50%{box-shadow:0 6px 0 rgba(0,0,0,.18),0 0 0 14px rgba(255,211,77,0)}}
.qn.done .qb{background:linear-gradient(135deg,#34d399,#10b981);border-color:#fff}
.qk{position:absolute;right:-4px;top:-4px;width:24px;height:24px;border-radius:50%;background:#fff;color:#0d9f6e;font-style:normal;font-weight:900;font-size:14px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.qn.chest .qb{background:rgba(255,255,255,.16);border-style:dashed}
.qn.chest.open .qb{background:linear-gradient(135deg,#ffd34d,#ffb020);border-style:solid;border-color:#fff;animation:none}
.qn.chest:not(.open) .qb{animation:qShake 3s ease-in-out infinite}
@keyframes qShake{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-8deg)}94%{transform:rotate(8deg)}}
.qo{position:absolute;left:50%;top:-84px;width:82px;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.qc{flex:1;height:0;border-top:5px dotted rgba(255,255,255,.45);margin:0 -6px;min-width:12px;position:relative;top:-8px}
.qc.on{border-top-style:solid;border-color:#a7f3d0}
.streak{text-align:center;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,var(--sf),var(--sf2));padding-top:20px}
.sfl{width:84px;animation:flick 1.6s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 8px 14px rgba(255,100,40,.45))}
.sfl.off{filter:grayscale(1) opacity(.45);animation:none}
.sn{font-size:46px;font-weight:800;line-height:1;margin-top:6px;letter-spacing:-.04em}.sl{font-weight:700;color:var(--tx2);margin:2px 0 14px}
.streak .week{width:100%}
.wotd{margin-bottom:14px}
.wotd .wrow{display:flex;align-items:center;gap:14px;margin:12px 0 8px}.wotd .we{font-size:44px;line-height:1}.wotd h3{font-size:24px;letter-spacing:-.02em;margin-bottom:2px}.wotd .wrow>div{flex:1;min-width:0}
.wotd .ws{margin:0;padding:10px 12px;border-radius:12px;background:var(--sf2);color:var(--tx2);font-style:italic;font-size:14px}
.spromo{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(139,124,255,.2))}
.spromo .so{width:64px;flex:none}.spromo>span:nth-child(2){flex:1}.spromo b{display:block;font-size:16px}.spromo small{color:var(--tx2);font-size:12.5px;display:block;margin-top:2px}
@media(max-width:900px){.qgrid{grid-template-columns:minmax(0,1fr)}.qn{width:76px}.qb{width:58px;height:58px;font-size:26px}.qn small{display:none}.qo{width:68px;top:-64px}.qpath{padding-top:68px}.otip .oo{width:60px}}
.qdots{display:flex;gap:5px;margin-right:6px}.qdots i{width:11px;height:11px;border-radius:50%;background:var(--bd,#d9d6ee)}.qdots i.on{background:#2fbf71}
.wpl{align-items:start;gap:14px}.subj button{font-size:15px}
.quest .row{display:flex}
.quest.mini{align-self:start}
.subjsel{display:flex;align-items:center;gap:12px;margin:6px 0 18px}.subjsel .sl2{font-weight:700;color:var(--tx2,#a9a6c9)}
.dd{position:relative}.ddb{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:14px;background:var(--sf2,#1d1c33);border:1px solid var(--bd,#3a3860);color:var(--tx,#fff);min-width:220px;font-size:16px}
.ddb b{flex:1;text-align:left;font-weight:800}.ddb svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .18s}.dd.open .ddb svg{transform:rotate(-90deg)}
.ddm{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:100%;z-index:30;padding:6px;border-radius:14px;background:var(--sf2,#1d1c33);border:1px solid var(--bd,#3a3860);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.dd.open .ddm{display:block}.ddm button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;color:var(--tx,#fff);font-weight:700;font-size:16px;text-align:left}
.ddm button svg{margin-left:auto;width:16px;height:16px}.ddm button:hover,.ddm button.on{background:rgba(255,255,255,.08)}
.subjsel{position:relative;z-index:5}
.flt{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.flt>span{font-weight:700;color:var(--tx2,#a9a6c9);min-width:58px;font-size:14px}.flt .filters{margin:8px 0}
.gtile .gb .chip{margin-bottom:6px}
.mst{display:inline-flex;gap:1px;font-size:18px;letter-spacing:1px}.mst i{font-style:normal;color:var(--bd,#3a3860)}.mst i.on{color:#ffc83d;text-shadow:0 0 8px rgba(255,200,61,.45)}
.mrow .mst{margin-right:8px}
@media(max-width:520px){.mrow .chip{display:none}}
.mrow.next{border-color:rgba(255,176,32,.6);box-shadow:0 0 0 1px rgba(255,176,32,.25)}
.catg{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.catc{text-align:left}.catc .ico{font-size:26px}
.h2b{font-size:20px;font-weight:800;margin:4px 0 12px}.row.soon{opacity:.55;cursor:default}.row.soon .mst i{opacity:.4}

.nt{margin:-4px 0 10px;padding:0 14px;background:var(--sf2);border-radius:12px}.nt summary{cursor:pointer;color:var(--acx);font-weight:700;font-size:13.5px;padding:10px 0}
.ntr{padding:2px 0 12px;border-top:1px solid var(--sf3)}.ntr b{display:block;margin:10px 0 4px;font-size:14px}.ntr p{margin:0;color:var(--tx2);font-size:13.5px;line-height:1.5}.ntr img{display:block;max-width:100%;height:auto;margin:10px 0 0;border-radius:10px}

#tph{scroll-margin-top:76px}
.crumb{align-items:center}.crumb>*{line-height:1}.crumb button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 6px;border-radius:999px;background:none;border:1.5px solid transparent;color:var(--tx2);font-weight:800;font-size:14.5px;line-height:1;cursor:pointer;transition:transform .12s,background .12s}
.crumb button:first-child{border-color:var(--acc);background:var(--sf2);color:var(--tx);padding:8px 18px 8px 10px}.crumb button:not(:first-child):hover{color:var(--tx);text-decoration:underline}.crumb button:last-child{color:var(--tx)}
.crumb button svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--acc);color:#1a1205;stroke-width:3;flex:none}
.crumb button:hover{background:var(--sf3);color:var(--tx)}.crumb button:active{transform:scale(.97)}

/* topical accordion */
.acc{display:flex;flex-direction:column;gap:8px}
.accd{background:var(--sf);border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.accd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px}
.accd>summary::-webkit-details-marker{display:none}
.accd .ico{width:38px;height:38px;border-radius:11px;background:var(--sf3);display:grid;place-items:center;font-size:19px;flex:none}
.accd .t{flex:1;min-width:0;display:flex;flex-direction:column}
.accd .t small{color:var(--tx2);font-size:12.5px}
.accd .chev{transition:transform .2s;color:var(--tx2)}
.accd[open] .chev{transform:rotate(180deg)}
.accd[open]>summary{border-bottom:1px solid var(--bd)}
.accd .rows{padding:10px 12px 12px}
.flt+.grid{margin-top:20px}

/* randomised loading scenes */
#ldr .ld-scene{display:none;order:2;width:min(680px,94vw,calc(58vh*4/3));position:relative}
#ldr.sc .ld-scene{display:block}
#ldr .ld-brand{order:1}#ldr .ld-track{order:3}#ldr .ld-pc{order:4;position:relative}#ldr .ld-msg{order:5}#ldr .ld-tip{order:6}
#ldr.sc .ld-run,#ldr.sc .ld-wave,#ldr.sc .ld-bg{display:none}
#ldr.sc .ld-track{margin-top:6px;height:16px}
#ldr.sc{gap:14px;background:#0b0a2a}
#ldr.sc .ld-brand,#ldr.sc .ld-track,#ldr.sc .ld-pc,#ldr.sc .ld-msg,#ldr.sc .ld-tip{z-index:5;position:relative}
#ldr.sc .ld-scene{z-index:1}

.oban{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--sf);border:1px solid var(--bd);border-radius:20px;padding:14px;margin-bottom:16px}
.oban .obs{width:min(220px,100%);flex:none}.oban .osc{border-radius:14px}.oban h3{font-size:18px;margin:0 0 4px}.oban p{margin:0;color:var(--tx2,#a9a6c9);font-size:14px;max-width:46ch;line-height:1.5}
.oban>div:last-child{flex:1;min-width:200px}
.card.empty .oban{border:0;background:none;justify-content:center;margin:0;padding:0}
.obs .osc{border-radius:14px}

.qcol{display:flex;flex-direction:column;gap:18px;min-width:0}.qgrid{align-items:stretch}.more{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:14px;border:1px dashed var(--bd2);color:var(--tx2);font-weight:700;font-size:13.5px}.more:hover{color:var(--tx);border-color:var(--acc)}
.qcol .quest.mini{align-self:stretch}.qcol .wotd{flex:1}
@media(max-width:700px){.hstrip{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;padding-bottom:6px}.hstrip>*{flex:0 0 78%;scroll-snap-align:start}}
.otip{margin:4px 0 18px}.otip .ob{padding:9px 15px;margin:0;border-radius:999px;font-size:14px}.otip .ob::before{display:none}.otip .ob::after{content:'';}
.streak.s0{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 14px;padding:18px 20px;align-self:start}.streak.s0 .sfl{width:44px;margin:0}.streak.s0 .sn{font-size:44px;line-height:1}.streak.s0 .sl{font-size:15px}.streak.s0 .week{margin-top:14px}.streak.s0 .muted{width:100%;text-align:center}
.otip{margin:12px 0 18px}
.rows>.accd{margin-bottom:0}.accd .rows{padding:0 10px 10px}.accd .row .t small{color:var(--tx2)}#view .rows:has(>.accd){gap:10px}
.row .due{color:var(--tx2);font-weight:600}.row .due.od{color:#ff7a85}
.row .t small.due.od{color:#ff7a85}

.hwr .dbadge{width:50px;height:54px;border-radius:12px;background:var(--sf3);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;line-height:1.05;border:1px solid var(--bd)}
.hwr .dbadge i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2)}
.hwr .dbadge b{font-size:21px;font-weight:800}.hwr .dbadge u{text-decoration:none;font-size:10px;color:var(--tx2);font-weight:600}
.hwr .dbadge.od{background:rgba(255,90,110,.14);border-color:rgba(255,90,110,.35)}.hwr .dbadge.od i,.hwr .dbadge.od u{color:#ff8b97}.hwr .dbadge.od b{color:#ffd9dd}
.hwr .dbadge.nd b{font-size:22px}.hwr .t small .odt{font-style:normal;color:#ff7a85;font-weight:700}

.wgoal{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px}
.wring{position:relative;width:78px;height:78px;flex:none}.wring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wring circle{fill:none;stroke-width:8}.wring .wb{stroke:var(--sf3)}.wring .wf{stroke:var(--acc,#ffb020);stroke-linecap:round;transition:stroke-dasharray .6s}
.wring b{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800}.wring b small{font-size:12px;color:var(--tx2);font-weight:700;margin-left:1px}
.wgoal .wt{flex:1;min-width:180px}.wgoal .wt h3{font-size:17px;margin:0 0 4px}
.wcoin{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--sf3);border:1px solid var(--bd);font-size:20px;text-align:left}
.wcoin .t{display:flex;flex-direction:column}.wcoin .t b{font-size:16px}.wcoin .t small{font-size:11.5px;color:var(--tx2)}
.wring b{display:flex!important;align-items:center;justify-content:center;padding:0;line-height:1;gap:1px}.wring b small{line-height:1;margin:3px 0 0 1px}

/* ── live classes ── */
.lvdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff5f6d;margin-right:8px;box-shadow:0 0 0 0 rgba(255,95,109,.6);animation:lvp 1.6s infinite;vertical-align:1px}
@keyframes lvp{70%{box-shadow:0 0 0 9px rgba(255,95,109,0)}100%{box-shadow:0 0 0 0 rgba(255,95,109,0)}}
.lvcard{margin-top:12px}.lvcard.live{border-color:rgba(255,95,109,.55);background:linear-gradient(180deg,rgba(255,95,109,.09),transparent 60%),var(--sf)}.lvcard.soon{border-color:rgba(255,176,32,.55)}
.lvh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.lvh h3{margin:0}
.lvt{font-weight:800;font-size:13px;padding:4px 11px;border-radius:999px;background:var(--sf3);color:var(--tx);font-variant-numeric:tabular-nums}
.lvcard.live .lvt,.lvstrip.live .t small{color:#ff8a94}.lvt.big{display:inline-block;margin:2px 0 14px;font-size:15px;padding:6px 14px}
.lvf{display:grid;gap:8px;margin:14px 0}.lvf>div{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--sf2)}
.lvf i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--sf3);flex:none;font-style:normal}.lvf i svg{width:18px;height:18px}
.lvf span{display:flex;flex-direction:column;min-width:0}.lvf small{color:var(--tx2);font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}.lvf b{font-size:15px;line-height:1.3}
.lvb{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lvb .btn{display:inline-flex;gap:8px;align-items:center}.lvb .btn svg{width:18px;height:18px}.lvb .btn[disabled]{opacity:.5;cursor:default}.btn.lg{padding:14px 26px;font-size:17px;width:100%;justify-content:center}
.lvstrip{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:14px;border-radius:16px;border:1px solid rgba(255,95,109,.5);background:linear-gradient(90deg,rgba(255,95,109,.16),rgba(255,176,32,.08));animation:lvIn .4s both}
.lvstrip.soon,.lvstrip.near{border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.09)}.lvstrip .lvdot{margin:0;flex:none}.lvstrip.near .lvdot,.lvstrip.soon .lvdot{background:#ffb020;animation:none}
.lvstrip .t{flex:1;min-width:0;display:flex;flex-direction:column}.lvstrip .t b{font-size:15px}.lvstrip .t small{color:var(--tx2);font-weight:700;font-variant-numeric:tabular-nums}
@keyframes lvIn{from{opacity:0;transform:translateY(-6px)}}
.lvpill{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:6px 13px;font-weight:800;font-size:13px;color:#fff;background:rgba(255,95,109,.9);cursor:pointer}.lvpill .lvdot{background:#fff;margin:0}.lvpill.soon{background:rgba(255,176,32,.95);color:#2a1800}.lvpill svg{width:15px;height:15px}
.lvov{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(5,8,18,.72);backdrop-filter:blur(5px);animation:lvIn .2s both}
.lvsh{position:relative;width:min(440px,100%);max-height:92vh;overflow:auto;padding:22px;border-radius:22px;background:var(--bg2,var(--sf));border:1px solid var(--bd2,var(--bd));box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lvsh h2{margin:10px 0 8px;font-size:22px;line-height:1.25}.lvx{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--sf3);color:var(--tx);display:grid;place-items:center;cursor:pointer}.lvx svg{width:18px;height:18px}
.chead .meta .lvpill{background:rgba(255,95,109,.95);padding:5px 13px}.chead .meta .lvpill.soon{background:rgba(255,176,32,.95)}
.chead .meta .lvpill .lvdot{padding:0;background:#fff;backdrop-filter:none;border-radius:50%;width:9px;height:9px}.chead .meta .lvpill>span:not(.lvdot){padding:0;background:none;backdrop-filter:none}
.lvsh .chip{display:inline-block;width:auto}

/* guide: cheap dimming (clip-path) instead of a 9999px shadow that animated every step */
.tour .dim{position:fixed;inset:0;background:rgba(8,10,28,.72)}
.tour .hole{left:0;top:0;box-shadow:none;transition:none;animation:none;will-change:transform}
.tour .hole.none{opacity:0}
.tour .tb{transition:left .25s ease-out,top .25s ease-out}

/* paper rows: keep the Resume progress bar inside its row */
.row[data-a^="paper:"]{position:relative;overflow:hidden}

/* ── light (warm beige) theme touch-ups ── */
[data-theme=light] .quest .row,[data-theme=light] .quest .row b{color:var(--tx)}
[data-theme=light] .quest .row small{color:var(--tx2)}
[data-theme=light] .lvcard.live .lvt,[data-theme=light] .lvstrip.live .t small{color:#b3283a}
[data-theme=light] .lvstrip{background:linear-gradient(90deg,rgba(201,58,76,.13),rgba(229,138,0,.09))}
[data-theme=light] .otip .ob{background:#fffaf0;color:#3a2f1c}
[data-theme=light] .chip.vio{color:#5342d0}
[data-theme=light] .chip.red{color:#b3283a}
[data-theme=light] .chip.blu{color:#1f5fb8}
[data-theme=light] .chip.grn{color:#0b7a50}

/* light: quest card, date tiles, white button text */
[data-theme=light] .quest{background:linear-gradient(135deg,#fbefd3 0%,#f8e3b9 55%,#f5d9a8 100%);color:var(--tx);border-color:var(--bd2)}
[data-theme=light] .quest::before{display:none}
[data-theme=light] .quest .muted{color:var(--tx2)}
[data-theme=light] .qn{color:var(--tx)}
[data-theme=light] .qb{background:rgba(255,255,255,.75);border-color:#e6cf9f;box-shadow:0 5px 0 rgba(120,85,25,.14)}
[data-theme=light] .qn.cur .qb{background:linear-gradient(135deg,#ffd34d,#ff9a3c);border-color:#fff}
[data-theme=light] .qn.done .qb{background:linear-gradient(135deg,#34d399,#10b981);border-color:#fff}
[data-theme=light] .qn.chest .qb{background:rgba(255,255,255,.6);border-color:#d9bd86}
[data-theme=light] .qn.chest.open .qb{background:linear-gradient(135deg,#ffd34d,#ffb020);border-color:#fff}
[data-theme=light] .qc{border-top-color:rgba(120,85,25,.32)}
[data-theme=light] .qc.on{border-color:#1fa06a}
[data-theme=light] .qo{filter:drop-shadow(0 5px 5px rgba(90,60,20,.22))}
[data-theme=light] .dbadge.od{background:#fde4e6;border-color:#efb3ba}
[data-theme=light] .dbadge.od i,[data-theme=light] .hwr .dbadge.od u{color:#b3283a}
[data-theme=light] .dbadge.od b{color:#8f1d2c}

/* ═════ Home redesign: aligned cards, streak flame with Otto, animated hero ═════ */
.qgrid{align-items:stretch}.qcol>*{flex:1 1 auto}.qcol .quest{display:flex;flex-direction:column;justify-content:center}
.streak.fl{padding:0 0 16px;overflow:hidden;align-items:stretch;justify-content:flex-start;text-align:center;background:linear-gradient(180deg,var(--sf),var(--sf2))}
.sflm{position:relative;aspect-ratio:44/23;overflow:hidden;width:100%}
.sflm .osc{position:absolute;left:0;top:0;border-radius:0;width:100%}
.sflm .snum{position:absolute;right:5%;top:50%;transform:translateY(-54%);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:34%}
.streak.fl .sn{font-size:clamp(64px,7.4vw,96px);font-weight:800;line-height:.88;margin:0;letter-spacing:-.05em;background:linear-gradient(180deg,#fff7d0 0%,#ffc23a 52%,#ff6a3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 16px rgba(255,120,40,.55))}
.streak.fl .sl{margin:0;font-weight:800;font-size:15px;letter-spacing:.02em;color:#ffe6c2}
.sflm.off .sn{background:linear-gradient(180deg,#e6e0ff,#8f86c8);-webkit-background-clip:text;background-clip:text;filter:none}
.streak .sbd{padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;color:#2b1500;background:linear-gradient(135deg,#ffd34d,#ff9a3c);box-shadow:0 4px 14px rgba(255,150,40,.4)}
.streak.fl .week{margin:14px 16px 0;width:auto}.streak.fl .sfh{margin:10px 16px 0;font-size:12.5px}
@media(max-width:900px){.sflm .snum{right:7%}}

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@media(min-width:901px){.hero{grid-template-columns:minmax(0,1fr) 300px}}
.hero{isolation:isolate;padding:28px 30px;background:radial-gradient(700px 320px at 88% -10%,rgba(124,92,255,.5),transparent 62%),linear-gradient(120deg,#131a45 0%,#21185a 52%,#3b1f68 100%)}
.hero::after{z-index:0;background:radial-gradient(circle,rgba(255,150,50,.38),transparent 65%)}
.hero .hmain{position:relative;z-index:2;min-width:0}
.hero h1{font-size:34px;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.hfx svg{position:absolute;inset:0;width:100%;height:100%}.hfx circle{fill:#fff;opacity:.4;animation:hTw 3s ease-in-out infinite}.hfx circle.b{fill:#ffd9a0}
@keyframes hTw{0%,100%{opacity:.1}50%{opacity:.85}}
.hfx .au{position:absolute;border-radius:50%;filter:blur(56px);mix-blend-mode:screen;will-change:transform}
.au.a1{width:360px;height:250px;left:-70px;top:-100px;background:#6d4cff;opacity:.5;animation:hDr1 16s ease-in-out infinite alternate}
.au.a2{width:340px;height:240px;right:14%;top:-80px;background:#ff7a45;opacity:.3;animation:hDr2 21s ease-in-out infinite alternate}
.au.a3{width:420px;height:190px;left:28%;bottom:-120px;background:#19c3d8;opacity:.28;animation:hDr3 18s ease-in-out infinite alternate}
@keyframes hDr1{to{transform:translate(160px,50px) scale(1.25)}}@keyframes hDr2{to{transform:translate(-140px,60px) scale(1.15)}}@keyframes hDr3{to{transform:translate(-160px,-24px) scale(1.2)}}
.hfx .sp{position:absolute;color:#ffd34d;font-size:16px;animation:hSp 4s ease-in-out infinite}
.sp.s1{left:47%;top:14%}.sp.s2{left:60%;bottom:20%;font-size:12px;animation-delay:-1.3s}.sp.s3{left:38%;bottom:30%;font-size:13px;color:#9ff0ff;animation-delay:-2.4s}
@keyframes hSp{0%,100%{transform:scale(.5) rotate(0);opacity:.15}50%{transform:scale(1.2) rotate(45deg);opacity:1}}
.hero .hbd{position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:3;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 60%,rgba(255,176,32,.95) 80%,rgba(255,122,69,0) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:hSpin 9s linear infinite}
@keyframes hSpin{to{--ang:360deg}}
.hero .lv .bar i{position:relative;overflow:hidden}
.hero .lv .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-110%);animation:hShine 3.4s ease-in-out infinite}
@keyframes hShine{60%,100%{transform:translateX(110%)}}
.hero .otip .ob{box-shadow:0 8px 26px rgba(0,0,0,.28)}
.stage3d{height:262px;margin:-26px -6px -16px 0;z-index:1}
.stage3d canvas{z-index:2}
.stage3d .plat{position:absolute;left:50%;bottom:28px;width:238px;height:64px;margin-left:-119px;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(255,190,90,.5),rgba(255,176,32,.1) 72%,transparent);box-shadow:0 0 44px rgba(255,150,40,.3)}
.stage3d .plat::before,.stage3d .plat::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,206,130,.6)}
.stage3d .plat::before{transform:scale(.7);opacity:.8}.stage3d .plat::after{border-style:dashed;border-color:rgba(255,206,130,.4);animation:hRing 4s ease-out infinite}
@keyframes hRing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.28);opacity:0}}
.hchip{position:absolute;z-index:3;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;white-space:nowrap;background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 22px rgba(0,0,0,.25);animation:hBob 4s ease-in-out infinite;pointer-events:none}
.hchip.c1{left:0;top:48px}.hchip.c2{right:0;top:84px;animation-delay:-2s}
@keyframes hBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
[data-theme=light] .hero{background:radial-gradient(700px 320px at 88% -10%,rgba(255,170,90,.35),transparent 62%),linear-gradient(120deg,#fbf0da 0%,#f8e6d2 55%,#f2dfd8 100%)}
[data-theme=light] .hfx svg{display:none}[data-theme=light] .au{mix-blend-mode:multiply;opacity:.2}[data-theme=light] .au.a1{background:#ffb27a}[data-theme=light] .au.a3{background:#ffd49a}
[data-theme=light] .hfx .sp{color:#e08a00}[data-theme=light] .hfx .sp.s3{color:#d97706}
[data-theme=light] .hchip{color:var(--tx);background:rgba(255,255,255,.65);border-color:rgba(120,90,40,.2);box-shadow:0 8px 20px rgba(120,80,20,.14)}
[data-theme=light] .stage3d .plat{background:radial-gradient(closest-side,rgba(255,176,60,.5),rgba(255,176,32,.12) 72%,transparent)}
[data-theme=light] .hero h1{text-shadow:none}
.qgrid>.card.streak{margin:0}.streak.fl .sfh{text-transform:none;letter-spacing:0}
.hfx .sp.s3{display:none}.hfx .sp.s2{left:70%;bottom:14%}.hfx .sp.s1{left:66%;top:12%}
.stage3d .plat{bottom:-16px}
.stage3d{margin:-40px -6px -2px 0}
/* hero stars: round, drifting and twinkling; two shooting stars now and then */
.hfx .st{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7);animation:hDrift var(--d) ease-in-out infinite alternate,hTw2 var(--t) ease-in-out infinite}
.hfx .st.b{background:#ffd9a0;box-shadow:0 0 7px rgba(255,200,120,.8)}
@keyframes hDrift{to{transform:translate(var(--dx),var(--dy))}}
@keyframes hTw2{0%,100%{opacity:.15}50%{opacity:.95}}
.hfx .sh{position:absolute;width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(18deg);animation:hShoot 7s linear infinite}
.hfx .sh1{left:8%;top:10%}.hfx .sh2{left:52%;top:6%;animation-delay:-3.6s;animation-duration:9s}
@keyframes hShoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}3%{opacity:1}14%{opacity:0;transform:translate(300px,100px) rotate(18deg)}100%{opacity:0;transform:translate(300px,100px) rotate(18deg)}}
[data-theme=light] .hfx .st,[data-theme=light] .hfx .sh{display:none}
.quest .qnav{display:flex;align-items:center;gap:6px;align-self:flex-start}
.quest .qnav button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;transition:background .15s,transform .15s}
.quest .qnav button:hover{background:rgba(255,255,255,.3)}.quest .qnav button:active{transform:scale(.92)}
.quest .qnav .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.quest .qpg{display:flex;gap:5px;padding:0 4px}.quest .qpg i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}.quest .qpg i.on{background:#fff;width:16px;border-radius:4px}
.quest.mini .qh{display:flex;justify-content:space-between;gap:10px}
[data-theme=light] .quest .qnav button{background:rgba(255,255,255,.7);border-color:rgba(120,90,40,.25);color:var(--tx)}
[data-theme=light] .quest .qpg i{background:rgba(120,90,40,.3)}[data-theme=light] .quest .qpg i.on{background:var(--acx)}