:root{--bg:#f6fbf9;--ink:#10243a;--mut:#5b6b7c;--teal:#14b8a6;--teal2:#0ea5a0;--vio:#7c6cf2;--cor:#ff8a65;--card:#ffffffcc;--line:#e3ece9;--r:22px;--sh:0 10px 30px -12px rgba(16,36,58,.18);--hf:'Fredoka',ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.55 'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;padding-bottom:84px}
a{color:var(--teal2)}img{max-width:100%}
h1,h2,h3,.brand span,.clock,.big-n{font-family:var(--hf);letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.05;margin:.3em 0}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden}.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:420px;height:420px;background:#b7f4e6;left:-120px;top:-80px}.blobs i:nth-child(2){width:380px;height:380px;background:#e2dcff;right:-120px;top:30vh;animation-delay:-6s}.blobs i:nth-child(3){width:340px;height:340px;background:#ffe3d6;left:30vw;bottom:-160px;animation-delay:-12s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px clamp(16px,4vw,40px);background:rgba(246,251,249,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:1.5rem;font-weight:700}
.topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}.topnav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--mut);font-weight:600;font-size:.92rem}.topnav a.on,.topnav a:hover{background:#dff7f2;color:var(--teal2)}
main{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.view{animation:fadeUp .5s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:12px 22px;font:600 1rem inherit;font-family:inherit;background:linear-gradient(135deg,var(--teal),#22c3a6 50%,#5ed6b0);color:#fff;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px -8px rgba(20,184,166,.7);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}.btn.sm{padding:8px 14px;font-size:.88rem}.btn.danger{background:#fff;color:#d63c3c;box-shadow:inset 0 0 0 1.5px #f5c2c2}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#e5f8f3;color:var(--teal2);font-weight:700;font-size:.8rem}
.grad{background:linear-gradient(90deg,var(--teal),var(--vio),var(--cor));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.1rem;color:var(--mut);max-width:620px}.tiny{font-size:.82rem;color:var(--mut)}
.card{background:var(--card);backdrop-filter:blur(10px);border:1px solid #fff;border-radius:var(--r);box-shadow:var(--sh);padding:clamp(16px,3vw,26px);margin:18px 0}
.sec{margin:36px 0 10px;font-size:1.6rem}.sec small{font:500 .9rem 'Plus Jakarta Sans';color:var(--mut);margin-left:8px}
.ptitle{display:flex;align-items:center;gap:10px;font-size:clamp(1.9rem,4.5vw,2.8rem);margin-top:26px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;min-height:min(78vh,640px);padding:20px 0}
.hero-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center}
.hero-art .sun{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff7d6,#ffe08a 40%,#ffc6a8 70%,transparent 72%);animation:pulse 6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05)}}
.leaf{position:absolute;font-size:2rem;animation:floaty 7s ease-in-out infinite}.l1{left:6%;top:18%}.l2{right:4%;top:10%;animation-delay:-2s}.l3{right:10%;bottom:22%;animation-delay:-4s}
@keyframes floaty{50%{transform:translateY(-18px) rotate(12deg)}}
.bot{position:relative;width:110px;aspect-ratio:1}.bot.big{width:100%;max-width:420px;position:absolute;inset:auto 0 0 0;margin:auto}.bot.inline{width:56px;display:inline-block}
.botsvg{width:100%;height:100%;overflow:visible}.bot-eyes{animation:blink 5s infinite;transform-origin:0 -3px}@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.bot-ant{animation:glow 2s ease-in-out infinite}@keyframes glow{50%{opacity:.4}}
.bubble{background:#fff;border-radius:18px;padding:10px 14px;box-shadow:var(--sh);font-weight:600;position:absolute;left:4%;top:4%;max-width:60%}
.bubble:after{content:'';position:absolute;bottom:-8px;left:30px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.float{animation:floaty 6s ease-in-out infinite}
.today>.wbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{background:#fff;border-radius:16px;padding:14px;border:1px solid var(--line)}.stat b{display:block;font:600 1.6rem var(--hf)}.stat span{color:var(--mut);font-size:.85rem}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.crewbot{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 8px 16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font:inherit;color:inherit;transition:transform .25s,box-shadow .25s}
.crewbot:hover,.crewbot.on{transform:translateY(-4px);box-shadow:var(--sh)}.crewbot.on{outline:2px solid var(--teal)}.crewbot b{font-family:var(--hf);font-size:1.15rem}.crewbot span{font-size:.8rem;color:var(--mut)}
.tipbox>.wbody{display:flex;gap:14px;align-items:center;font-size:1.05rem}.tipbox .src{font-size:.8rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.feat{display:block;text-decoration:none;color:inherit;background:var(--c);border-radius:var(--r);padding:22px;transition:transform .25s}.feat:hover{transform:translateY(-4px) rotate(-.5deg)}.feat span{font-size:2rem}.feat b{display:block;font:600 1.3rem var(--hf);margin:6px 0}.feat p{margin:0;color:#3d4f61}
.wash>.wbody{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;background:linear-gradient(135deg,#e6f7ff,#f3fffb)}
.sink{position:relative;height:180px}.sink .bot{width:170px;margin:auto}.big-n{font-size:2rem;color:var(--teal2);margin-left:10px}
.bubbles i,.has-bubbles:after{position:absolute;border-radius:50%;border:2px solid #9be1ff;background:rgba(255,255,255,.6);width:16px;height:16px;bottom:40%;left:50%;animation:bub 3s ease-in infinite}
.bubbles i:nth-child(2){left:35%;width:10px;height:10px;animation-delay:-.6s}.bubbles i:nth-child(3){left:62%;width:20px;height:20px;animation-delay:-1.2s}.bubbles i:nth-child(4){left:45%;animation-delay:-1.8s}.bubbles i:nth-child(5){left:56%;width:12px;height:12px;animation-delay:-2.3s}.bubbles i:nth-child(6){left:40%;width:8px;height:8px;animation-delay:-2.7s}
.has-bubbles:after{content:'';left:58%;bottom:52%}
@keyframes bub{from{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}to{transform:translateY(-110px) translateX(10px) scale(1.2);opacity:0}}
/* form */
fieldset{border:0;padding:0;margin:0 0 18px}legend{font:600 1.15rem var(--hf);margin-bottom:8px}
.g2{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.g2 legend{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:600;color:#33475b}label.full{margin-bottom:6px}
input,select,textarea{font:inherit;padding:11px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px #14b8a622}
.moods{display:flex;gap:8px;flex-wrap:wrap}.moods label{flex:1;min-width:58px}.moods input{position:absolute;opacity:0;width:1px}.moods span{display:flex;flex-direction:column;align-items:center;font-size:2rem;padding:8px;border-radius:16px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:.2s}.moods em{font-style:normal;font-size:.75rem;color:var(--mut)}
.moods input:checked+span{border-color:var(--teal);background:#e5f8f3;transform:scale(1.06)}.moods input:focus-visible+span{box-shadow:0 0 0 4px #14b8a644}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:600 .86rem inherit;font-family:inherit;cursor:pointer;color:var(--ink)}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.saved{color:var(--teal2);font-weight:700}
table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.tscroll{overflow-x:auto}td button{border:0;background:none;color:#d63c3c;cursor:pointer;font-size:1rem}
/* insights */
.notice{background:#fff6e5;border:1.5px solid #ffd99a;border-radius:18px;padding:14px 16px;margin:16px 0}
.flag{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;background:#fff;border-radius:18px;padding:16px;margin:12px 0;border-left:6px solid var(--k,#14b8a6);box-shadow:var(--sh)}
.flag .ic{font-size:1.7rem}.flag h4{margin:0 0 4px;font:600 1.15rem var(--hf)}.flag p{margin:4px 0;color:#3d4f61}.flag.high{--k:#ef5350}.flag.mid{--k:#ffa726}.flag.ok{--k:#26c6a0}.flag.info{--k:#7c6cf2}
.charts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.chart{background:#fff;border-radius:18px;padding:14px;border:1px solid var(--line)}.chart h4{margin:0 0 6px;font:600 1rem var(--hf)}.chart svg{width:100%;height:150px}
.chart .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.4s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
/* food */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.tabs button{border:0;background:#fff;border-radius:999px;padding:9px 16px;font:600 .92rem inherit;font-family:inherit;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}.tabs button.on{background:var(--ink);color:#fff;box-shadow:none}
.recipes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rc{border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .25s;padding:0}.rc:hover{transform:translateY(-5px)}
.rc .art{height:130px;display:grid;place-items:center;font-size:3.6rem;background:radial-gradient(circle at 50% 60%,#fff8,transparent 60%),var(--c);position:relative;overflow:hidden}
.rc .art span{animation:floaty 4s ease-in-out infinite}.rc .art:after{content:'';position:absolute;width:140%;height:40px;bottom:-20px;background:#fff6;border-radius:50%}
.rc .bd{padding:12px 14px 16px}.rc b{font:600 1.08rem var(--hf);display:block}.rc small{color:var(--mut)}
.plan{overflow-x:auto}.plan table td,.plan th{white-space:normal;min-width:110px}.plan a{cursor:pointer}
.cheats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cheat{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh)}.cheat .e{font-size:2.6rem;display:inline-block;animation:wob 3s ease-in-out infinite}@keyframes wob{50%{transform:rotate(-10deg) scale(1.1)}}.cheat ul{padding-left:18px;margin:8px 0 0}
.modal{position:fixed;inset:0;z-index:60;background:rgba(16,36,58,.45);display:grid;place-items:center;padding:14px;backdrop-filter:blur(4px)}.modal[hidden]{display:none}
.modal-in{background:#fff;border-radius:26px;max-width:560px;width:100%;max-height:92vh;overflow:auto;padding:22px;position:relative;animation:fadeUp .35s ease}
.x{position:absolute;right:12px;top:10px;border:0;background:#f0f5f4;border-radius:50%;width:38px;height:38px;font-size:1.4rem;cursor:pointer}
.cookstage{height:200px;border-radius:20px;background:linear-gradient(180deg,#fff7ec,#ffe9d6);position:relative;overflow:hidden;display:grid;place-items:center}
.cookstage .bot{position:absolute;left:4%;bottom:0;width:150px}.cookstage .anim{width:170px;height:170px;margin-left:120px}
.stepn{font-weight:700;color:var(--teal2);margin:14px 0 0}.steptx{font-size:1.15rem;margin:4px 0}
.knife{animation:chop .5s ease-in-out infinite alternate;transform-origin:150px 40px}@keyframes chop{to{transform:rotate(18deg) translateY(8px)}}
.spoon{animation:stir 1.2s linear infinite;transform-origin:85px 95px}@keyframes stir{to{transform:rotate(360deg)}}
.steam path{animation:steam 2s ease-in-out infinite;opacity:0}.steam path:nth-child(2){animation-delay:.6s}.steam path:nth-child(3){animation-delay:1.2s}@keyframes steam{30%{opacity:.8}to{transform:translateY(-30px);opacity:0}}
.pan{animation:shake .25s ease-in-out infinite alternate}@keyframes shake{to{transform:translateX(3px)}}
.flame{animation:flick .3s ease-in-out infinite alternate;transform-origin:center bottom}@keyframes flick{to{transform:scaleY(1.2)}}
.ovenglow{animation:glow 1.6s ease-in-out infinite}.frost{animation:floaty 3s ease-in-out infinite}
.sparkle{animation:twinkle 1.4s ease-in-out infinite}@keyframes twinkle{50%{opacity:.2;transform:scale(.6)}}
/* move */
.player>.wbody{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:center;background:linear-gradient(135deg,#f1eeff,#effcf8)}
.stage{position:relative;aspect-ratio:1}.stage .bot.big{position:absolute;inset:8%;width:84%}.ring{position:absolute;inset:0;transform:rotate(-90deg)}.ring circle{fill:none;stroke:#e1dcff;stroke-width:5}.ring #ringFg{stroke:var(--vio);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .3s linear}
.clock{font-size:3rem;font-weight:700;color:var(--vio)}.queue{max-height:180px;overflow:auto;padding-left:20px;color:var(--mut);font-size:.9rem}.queue li.on{color:var(--ink);font-weight:700}
.poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.pose{background:#fff;border-radius:var(--r);padding:10px 14px 14px;box-shadow:var(--sh);border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .25s}.pose:hover{transform:translateY(-4px)}.pose .bot{width:100%}.pose b{font:600 1.1rem var(--hf);display:block}.pose small{color:var(--mut)}
.wk{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh)}.wk h3{margin:.2em 0}.wk ol{padding-left:18px;color:var(--mut);font-size:.9rem}
/* weather */
.search{display:flex;gap:8px;flex-wrap:wrap}.search input{flex:1;min-width:180px}
.wx{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.wnow{background:linear-gradient(140deg,#7fd8ff,#14b8a6);color:#fff;border-radius:var(--r);padding:22px;position:relative;overflow:hidden}
.wnow .t{font:700 4rem var(--hf);line-height:1}.wnow .ico{position:absolute;right:16px;top:10px;font-size:5rem;animation:floaty 6s ease-in-out infinite}.wnow h3{margin:0;font-size:1.5rem}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.wgrid .stat b{font-size:1.3rem}
.score{display:flex;align-items:center;gap:16px}.dial{--v:50;width:96px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--v)*1%),#e6efec 0);display:grid;place-items:center;flex:none}.dial b{background:#fff;width:74%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:700 1.6rem var(--hf)}
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.day{background:#fff;border-radius:16px;padding:12px;text-align:center;border:1px solid var(--line)}.day .i{font-size:2rem}
.hours{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}.hr{flex:none;width:58px;text-align:center;background:#fff;border-radius:14px;padding:8px 4px;border:1px solid var(--line);font-size:.8rem}.hr.best{background:#e5f8f3;border-color:var(--teal)}
.skel{color:var(--mut)}
/* news */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.nw{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;transition:transform .25s}.nw:hover{transform:translateY(-4px)}.nw b{font:600 1.08rem/1.3 var(--hf)}.nw p{margin:0;color:var(--mut);font-size:.88rem}.src{font-size:.75rem;font-weight:700;color:var(--vio)}
/* style */
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.sw{width:64px;height:64px;border-radius:18px;box-shadow:var(--sh);animation:pop .5s ease both}@keyframes pop{from{transform:scale(.4);opacity:0}}
.uvwear{background:#fff8e1;border-radius:16px;padding:12px 14px;margin:16px 0}
/* footer */
.foot{max-width:1160px;margin:40px auto 0;padding:0 clamp(16px,4vw,40px) 30px}

.links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.links a{display:block;background:#fff;border-radius:14px;padding:10px 14px;text-decoration:none;border:1px solid var(--line)}.links b{color:var(--ink)}.links small{display:block;color:var(--mut)}
.tabbar{display:none}.sheet{display:none}
@media (max-width:900px){
 .topnav{display:none}.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;font:600 .7rem inherit;font-family:inherit;color:var(--mut);text-decoration:none;border:0;background:none;padding:4px;cursor:pointer}.tabbar span{font-size:1.3rem}.tabbar .on{color:var(--teal2)}
 .sheet{display:block;position:fixed;inset:0;z-index:40;background:rgba(16,36,58,.35)}.sheet[hidden]{display:none}.sheet-in{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:24px 24px 0 0;padding:20px 20px calc(90px + env(safe-area-inset-bottom));display:grid;gap:8px;animation:fadeUp .3s}.sheet-in a{padding:14px;border-radius:14px;background:#f3f8f7;text-decoration:none;color:var(--ink);font-weight:700}
 #installBtn{margin-left:auto}
 .hero{grid-template-columns:1fr;min-height:0}.hero-art{max-width:340px;order:-1}.crew{grid-template-columns:repeat(2,1fr)}.grid3,.cheats,.news{grid-template-columns:1fr}.recipes{grid-template-columns:repeat(2,1fr)}
 .g2{grid-template-columns:1fr 1fr}.charts,.wx{grid-template-columns:1fr}.player>.wbody{grid-template-columns:1fr}.stage{max-width:300px;margin:auto;width:100%}.wash>.wbody{grid-template-columns:1fr;text-align:center}
 .cookstage .anim{margin-left:110px;width:140px}.cookstage .bot{width:120px}
}
@media (max-width:420px){.recipes{grid-template-columns:1fr 1fr;gap:10px}.rc .art{height:96px;font-size:2.6rem}.moods span{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.chart .ln{stroke-dashoffset:0}}
/* ===== RETRO 3D / DREAMCORE THEME ===== */
:root{--ink:#14123a;--mut:#4b4a78;--card:#fffffff2;--win:#0a2a9c;--win2:#1d6fe0;--chrome:#d4d0c8;--pix:'VT323',ui-monospace,monospace}
body{background:#cfe9ff}
.blobs{display:none}
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#8ec5ff 0%,#c8b6ff 38%,#ffc9e8 66%,#fff1c9 100%);transition:background 2s}
.stars{position:absolute;inset:0;opacity:0;background-image:radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),radial-gradient(1.2px 1.2px at 140px 80px,#fff,transparent),radial-gradient(2px 2px at 260px 40px,#fffbe0,transparent),radial-gradient(1.3px 1.3px at 330px 140px,#fff,transparent),radial-gradient(1.6px 1.6px at 80px 170px,#e8f2ff,transparent);background-size:380px 220px;animation:tw 4s ease-in-out infinite}
.stars.s2{background-size:520px 300px;background-position:90px 60px;animation-delay:-2s}
@keyframes tw{50%{opacity:.35}}
body.night .sky{background:linear-gradient(180deg,#07062a 0%,#1d1660 40%,#4b2a8c 70%,#b45fa8 100%)}
body.night .stars{opacity:1}body.night .hills polygon{filter:brightness(.55) saturate(1.2)}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:30vh;min-height:160px}
.portal{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,#fff 0 18%,#c8f7ff 30%,transparent 62%),conic-gradient(from 0deg,#ff8ad8,#8affef,#9d8cff,#fff38a,#ff8ad8);filter:blur(.5px);box-shadow:0 0 60px 20px #c7a8ff88;animation:spin 14s linear infinite,floaty 9s ease-in-out infinite;opacity:.85;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent 100%);mask:radial-gradient(closest-side,#000 70%,transparent 100%)}
.p1{width:200px;height:200px;right:6%;top:14%}.p2{width:110px;height:110px;left:4%;top:58%;animation-duration:20s,11s}
@keyframes spin{to{transform:rotate(360deg)}}
.orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff 0 8%,#ffd6f6 16%,#a7c8ff 40%,#7a5cff 70%,#3b1d8f 100%);box-shadow:inset -8px -10px 20px #2a0f6b66,0 20px 30px -10px #3b1d8f55;animation:floaty 8s ease-in-out infinite}
.o1{width:70px;height:70px;left:12%;top:20%}.o2{width:40px;height:40px;right:28%;top:44%;animation-delay:-3s;background:radial-gradient(circle at 30% 28%,#fff 0 8%,#c9fff0 18%,#5ee0c4 50%,#0d7f8f 100%)}.o3{width:54px;height:54px;left:46%;top:8%;animation-delay:-5s;background:radial-gradient(circle at 30% 28%,#fff 0 8%,#fff3c2 18%,#ffb36b 50%,#d1495b 100%)}
.cube{position:absolute;right:14%;bottom:34vh;width:60px;height:60px;transform-style:preserve-3d;animation:cube 12s linear infinite}
.cube i{position:absolute;inset:0;border:2px solid #ffffffaa;background:linear-gradient(135deg,#ffffff66,#9be7ff55)}.cube i:nth-child(1){transform:translateZ(30px)}.cube i:nth-child(2){transform:rotateY(90deg) translateZ(30px)}.cube i:nth-child(3){transform:rotateX(90deg) translateZ(30px)}
@keyframes cube{to{transform:rotateX(360deg) rotateY(720deg)}}
.grain{position:absolute;inset:-50%;opacity:.09;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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000000a 2px 3px);mix-blend-mode:multiply}
h1{text-shadow:2px 0 0 #ff4fd855,-2px 0 0 #3fe8ff66,0 4px 0 #ffffff88}
.grad{background:linear-gradient(90deg,#ff5fd2,#7a5cff,#2bd9ff,#7dff9a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #fff)}
.top{background:linear-gradient(180deg,#fffffff0,#f2eeffe6);border-bottom:2px solid #fff;box-shadow:0 2px 0 #a99fe0}
.brand span{background:linear-gradient(180deg,#7a5cff,#ff5fd2);-webkit-background-clip:text;background-clip:text;color:transparent}
/* windows */
.card,.win{background:var(--card);border:2px solid;border-color:#fff #6b6890 #6b6890 #fff;border-radius:6px;box-shadow:4px 4px 0 #14123a33,0 20px 40px -20px #3b1d8f66;padding:0;overflow:hidden;backdrop-filter:none}
.card>.wbody{padding:clamp(14px,3vw,22px)}
.wbar{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--win),var(--win2) 60%,#5fb0ff);color:#fff;padding:4px 4px 4px 10px;font:20px/1 var(--pix);letter-spacing:.5px;user-select:none}
.wbar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbtn{width:24px;height:22px;background:var(--chrome);border:2px solid;border-color:#fff #404040 #404040 #fff;color:#000;font:700 13px/1 Arial,sans-serif;display:grid;place-items:center;cursor:pointer;padding:0}
.wbtn:active{border-color:#404040 #fff #fff #404040}
.btn{border-radius:10px;background:linear-gradient(180deg,#a99bff 0%,#7a5cff 48%,#5a3ee0 52%,#7f6bff 100%);box-shadow:inset 0 2px 0 #ffffff99,inset 0 -3px 0 #3b1d8f88,0 6px 0 #3b1d8f,0 12px 20px -8px #3b1d8f;text-shadow:0 1px 0 #3b1d8f}
.btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #ffffff99,0 2px 0 #3b1d8f}
.btn.ghost{background:linear-gradient(180deg,#fff,#e9e6ff);color:var(--ink);text-shadow:none;box-shadow:inset 0 0 0 2px #c8c0ff,0 5px 0 #a99fe0}
.btn.danger{background:linear-gradient(180deg,#fff,#ffe6ea);box-shadow:inset 0 0 0 2px #f5b2be,0 5px 0 #e08a98}
.pill{background:linear-gradient(90deg,#ffd6f6,#d6f3ff);color:#4a2fb8;border:1px solid #fff}
.feat{border:2px solid #fff;box-shadow:4px 4px 0 #14123a22;background:linear-gradient(160deg,#fff,var(--c));position:relative;overflow:hidden}
.feat:before{content:'';position:absolute;inset:-40% -20% auto auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#ffffff00 60%);opacity:.8}
.crewbot,.rc,.pose,.wk,.nw,.cheat,.stat,.day,.hr,.chart,.flag,.links a{border:2px solid #fff;box-shadow:4px 4px 0 #14123a22,0 14px 30px -18px #3b1d8f88}
.crewbot{background:linear-gradient(180deg,#ffffff,#eef0ff)}
.wash{background:linear-gradient(135deg,#e6f7ff,#f5ecff)}
.hero-art .sun{background:radial-gradient(circle at 38% 32%,#fff 0 6%,#fff7d6 14%,#ffd6f6 40%,#b9a8ff 66%,transparent 70%);box-shadow:none}
.tabs button.on,.chip.on{background:linear-gradient(180deg,#7a5cff,#5a3ee0);border-color:#5a3ee0}
.notice{background:#fffbe0;border:2px dashed #ffb300;border-radius:6px}
.wnow{background:linear-gradient(160deg,#7a5cff,#2bd9ff 70%,#7dff9a);border:2px solid #fff}
.modal-in{border-radius:6px;padding:0;border:2px solid;border-color:#fff #6b6890 #6b6890 #fff}.modal-in>.wbody{padding:18px}.modal-in .x{display:none}
.tabbar{background:linear-gradient(180deg,#f4f1ff,#e4ddff);border-top:2px solid #fff;box-shadow:0 -2px 0 #a99fe0}
/* pop-ups */
#popLayer{position:fixed;inset:0;pointer-events:none;z-index:50}
.pop{position:absolute;width:min(330px,88vw);pointer-events:auto;background:var(--chrome);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:2px 2px 0 #000,10px 14px 30px -10px #14123a88;animation:popin .35s cubic-bezier(.2,1.6,.5,1) both}
.pop .pb{display:flex;gap:12px;padding:14px 14px 6px;font:500 .98rem/1.4 'Plus Jakarta Sans',sans-serif;color:#111}
.pop .pi{font-size:2rem;line-height:1}.pop .pa{display:flex;gap:8px;justify-content:flex-end;padding:8px 12px 12px;flex-wrap:wrap}
.pop .pa button{min-width:76px;background:var(--chrome);border:2px solid;border-color:#fff #404040 #404040 #fff;padding:5px 10px;font:600 .85rem Arial,sans-serif;cursor:pointer;color:#000}
.pop .pa button:focus-visible{outline:1px dotted #000;outline-offset:-5px}.pop .pa button:active{border-color:#404040 #fff #fff #404040}
.pop label{font:400 .75rem Arial,sans-serif;display:flex;flex-direction:row;align-items:center;gap:4px;margin-right:auto;color:#222}.pop label input{width:auto}
@keyframes popin{from{transform:scale(.3);opacity:0}}
.pop.bye{animation:popout .2s ease forwards}@keyframes popout{to{transform:scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.grain,.scan{display:none}}
.topnav{max-width:820px;justify-content:flex-end}.topnav a{padding:6px 10px;font-size:.86rem}
.topnav a.on{background:linear-gradient(180deg,#7a5cff,#5a3ee0);color:#fff}
.weekmoves{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.wm{background:#fff;border:2px solid #fff;box-shadow:3px 3px 0 #14123a22;border-radius:8px;padding:10px;text-align:center;font-size:.85rem}.wm b{display:block;font-family:var(--pix);font-size:1.3rem;color:#5a3ee0}.wm.done{background:linear-gradient(180deg,#e6fff4,#c9f7e3)}.wm input{width:auto}
.breath>.wbody{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:center}
.bcircle{width:200px;height:200px;margin:auto;border-radius:50%;display:grid;place-items:center;font:600 1.2rem var(--hf);color:#fff;text-shadow:0 1px 2px #3b1d8f;background:radial-gradient(circle at 32% 28%,#fff 0 6%,#ffd6f6 14%,#9be7ff 45%,#7a5cff 80%);box-shadow:0 0 40px #b9a8ff,inset -10px -14px 30px #3b1d8f66;transform:scale(.7);transition:transform 4s ease-in-out}
.bcircle.in{transform:scale(1)}.bcircle.out{transform:scale(.7);transition-duration:6s}
.cleans{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.cl{background:#fff;border:2px solid #fff;box-shadow:4px 4px 0 #14123a22;border-radius:8px;padding:16px;display:grid;grid-template-columns:90px 1fr;gap:12px}.cl .bot{width:90px}.cl h3{margin:0 0 4px}.cl ol{margin:0;padding-left:18px;font-size:.92rem}.cl .tiny{margin:6px 0 0}
.temps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.th{border-radius:10px;padding:14px;color:#fff;text-align:center;border:2px solid #fff}.th b{display:block;font:700 1.4rem var(--hf)}.th span{font-size:.82rem}.th.cold{background:linear-gradient(160deg,#5ab8ff,#2b6fe0)}.th.danger{background:linear-gradient(160deg,#ff9a6b,#e0405a)}.th.hot{background:linear-gradient(160deg,#ffb84d,#e07a12)}.th.cook{background:linear-gradient(160deg,#9b7aff,#5a3ee0)}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.prod{background:linear-gradient(160deg,#fff,#efeaff);border:2px solid #fff;box-shadow:4px 4px 0 #14123a22;border-radius:8px;padding:20px;text-align:center;position:relative;overflow:hidden}
.prod .pi{font-size:3rem;display:inline-block;width:96px;height:96px;line-height:96px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 8%,#ffe6fb 20%,#c7b8ff 60%,#8f7aff);box-shadow:inset -6px -8px 16px #3b1d8f55,0 10px 20px -10px #3b1d8f;animation:floaty 5s ease-in-out infinite}
.prod .soon{position:absolute;top:12px;right:-30px;transform:rotate(35deg);background:#ffde59;color:#14123a;font:700 .7rem Arial;padding:3px 34px;border:1px solid #fff}
.filters{margin:6px 0 14px}
.rc .tags{display:flex;gap:6px;margin-top:6px}.rc .tags span{font-size:.72rem;background:#f1eeff;border-radius:6px;padding:2px 6px}
@media (max-width:900px){.weekmoves{grid-template-columns:repeat(4,1fr)}.breath>.wbody{grid-template-columns:1fr;text-align:center}.cleans,.prods{grid-template-columns:1fr}.temps{grid-template-columns:1fr 1fr}.cl{grid-template-columns:70px 1fr}.cl .bot{width:70px}}
/* night readability + layout polish */
body.night .view>h1,body.night .view>h2,body.night .view>.lead,body.night .view>p,body.night .hero-copy h1,body.night .hero-copy .lead,body.night .hero-copy .tiny,body.night .sec-h,body.night .view>.row>h2{color:#f4f0ff;text-shadow:0 2px 12px rgba(10,6,40,.6)}
body.night .hero-copy h1{text-shadow:3px 3px 0 #5a3ee0,0 0 24px rgba(160,140,255,.5)}
body.night .view>.tiny,body.night .view>small{color:#d9d2ff}
body.night .site-footer,body.night footer{color:#e9e4ff}body.night footer a{color:#fff}
.topnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.topnav::-webkit-scrollbar{display:none}.topnav a{white-space:nowrap}
@media(max-width:1180px){.topnav a{padding:6px 7px;font-size:.8rem}}
@media(max-width:900px){.tabbar a,.tabbar button{white-space:nowrap;font-size:.68rem;line-height:1.2}.tabbar span{font-size:1.25rem}
 .hero-art{max-width:300px}.hero-art .bubble{top:auto;bottom:2%;left:auto;right:0;max-width:62%;font-size:.86rem}.hero-art .bubble:after{display:none}}
.wx{align-items:start}
.topnav{max-width:none;flex:1 1 auto;min-width:0;justify-content:flex-start}.topnav a:first-child{margin-left:auto}
