/* Crease: bright paper colours, chunky buttons that press in, a table to fold on. */
:root{--ink:#2a2140;--dim:#6b6385;--bg:#fff7ef;--bg2:#ffe9f1;--card:#fff;--line:#f0e1ea;--pink:#ff4f7b;--pinkd:#d92e5c;--sun:#ffc93c;--sky:#33b5ff;--mint:#2ed3a5;--grape:#8a5cff;
  --pop:0 5px 0 rgba(42,33,64,.16),0 12px 26px rgba(42,33,64,.12);--r:22px;--table:#fff3e4;--table2:#ffe2c9;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#f6f0ff;--dim:#b4aacd;--bg:#1b1630;--bg2:#251d43;--card:#2b2350;--line:#3b3166;--table:#2a2252;--table2:#1d1740;
  --pop:0 5px 0 rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme=dark]{--ink:#f6f0ff;--dim:#b4aacd;--bg:#1b1630;--bg2:#251d43;--card:#2b2350;--line:#3b3166;--table:#2a2252;--table2:#1d1740;--pop:0 5px 0 rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 "Nunito",system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{background:radial-gradient(120% 60% at 10% 0%,var(--bg2),transparent 60%),radial-gradient(90% 50% at 100% 10%,rgba(51,181,255,.14),transparent 60%),var(--bg);min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
h1,h2,h3{font-family:"Fredoka","Nunito",system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app{max-width:1100px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 8px) 16px calc(96px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;gap:10px;padding:6px 0 10px}
.home-link{font-weight:700;color:var(--dim);text-decoration:none;font-size:15px;min-width:64px}
.brand{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
.brand .word{font:700 28px/1 "Fredoka",system-ui,sans-serif;background:linear-gradient(90deg,#ff4f7b,#ff8a2b 30%,#ffc93c 50%,#2ed3a5 70%,#33b5ff 85%,#8a5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{width:34px;height:34px;background:conic-gradient(from 45deg,#ff4f7b 0 25%,#ffc93c 0 50%,#33b5ff 0 75%,#2ed3a5 0);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{width:44px;height:44px;border-radius:14px;background:var(--card);box-shadow:var(--pop);font-size:20px;min-width:44px}
/* today */
.today{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;border-radius:28px;padding:20px;margin:6px 0 18px;color:#fff;overflow:hidden;box-shadow:var(--pop);min-height:210px}
.today::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px);pointer-events:none}
.today .eyebrow{font:700 13px/1 "Nunito";letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.today h2{font-size:34px;line-height:1.02;margin:8px 0 6px}
.today p{margin:0 0 14px;font-weight:600;opacity:.95}
.today .pic{justify-self:center;width:min(190px,40vw);filter:drop-shadow(0 10px 14px rgba(0,0,0,.25));animation:bob 3.2s ease-in-out infinite}
.today .pic svg{width:100%;height:auto;display:block}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.go{background:#fff;color:#2a2140;border-radius:18px;padding:12px 22px;font:700 18px "Fredoka";box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .08s}
.go:active,.big:active,.mcard:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
/* shelves */
.shelf{margin:4px 0 20px}
.shelf h2{font-size:22px;margin:0 2px 10px;display:flex;align-items:center;gap:8px}
.shelf h2 small{font:600 14px "Nunito";color:var(--dim)}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:min(42%,170px);gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
@media (min-width:760px){.row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));overflow:visible}}
.mcard{position:relative;scroll-snap-align:start;text-align:left;border-radius:var(--r);background:var(--card);box-shadow:var(--pop);padding:10px 10px 12px;transition:transform .08s;display:flex;flex-direction:column;gap:6px;min-height:200px}
.mcard .art{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;padding:12px;overflow:hidden}
.mcard .art svg{width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));transition:transform .3s}
.mcard:hover .art svg{transform:scale(1.06) rotate(-3deg)}
.mcard b{font:600 17px/1.15 "Fredoka"}
.mcard .meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dim);font-weight:700}
.lv{letter-spacing:1px}
.badge{position:absolute;top:8px;right:8px;background:#fff;border-radius:999px;font:700 12px "Nunito";padding:3px 8px;box-shadow:0 2px 0 rgba(0,0,0,.12);color:#2a2140}
.badge.done{background:var(--mint);color:#fff}
.badge.pro{background:var(--grape);color:#fff}
.about-row{text-align:center;margin:10px 0 0}.about-link{display:inline-block;color:var(--ink);font-weight:800;text-decoration:none;background:var(--card);border-radius:999px;padding:12px 22px;min-height:44px;box-shadow:var(--pop)}
/* tab bar */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:4px;background:var(--card);border-radius:24px;padding:6px;box-shadow:0 8px 30px rgba(42,33,64,.22);z-index:5;width:min(460px,calc(100% - 24px))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font:700 12px "Nunito";color:var(--dim);padding:6px 4px;border-radius:18px;min-height:52px}
.tabbar button span{font-size:22px;line-height:1.1}
.tabbar button.on{background:linear-gradient(135deg,#ff4f7b,#ff8a2b);color:#fff}
/* lists (basics, guide, mine) */
.lede{color:var(--dim);font-weight:600;margin:4px 2px 16px}
.list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.lcard{display:flex;gap:14px;align-items:center;text-align:left;background:var(--card);border-radius:var(--r);padding:12px;box-shadow:var(--pop);min-height:96px}
.lcard .art{width:78px;height:78px;flex:none;border-radius:16px;display:grid;place-items:center;padding:8px}
.lcard .art svg{width:100%;height:100%}
.lcard b{font:600 18px "Fredoka";display:block}
.lcard span{color:var(--dim);font-size:14px;font-weight:600}
.section-h{font-size:22px;margin:18px 2px 10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.stat{background:var(--card);border-radius:20px;padding:14px 10px;text-align:center;box-shadow:var(--pop)}
.stat b{display:block;font:700 30px/1 "Fredoka"}
.stat span{font-size:13px;color:var(--dim);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.gcell{aspect-ratio:1;border-radius:18px;background:var(--card);box-shadow:var(--pop);display:grid;place-items:center;padding:10px;position:relative}
.gcell svg{width:100%;height:100%}
.gcell.no svg{filter:grayscale(1) opacity(.25)}
.gcell small{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-weight:800;font-size:11px;color:var(--dim)}
.article{background:var(--card);border-radius:var(--r);box-shadow:var(--pop);padding:18px 18px 8px;margin:0 0 14px;line-height:1.55}
.article h2{font-size:22px;margin-bottom:6px}.article h3{font-size:18px;margin:14px 0 4px}
.article p,.article li{color:var(--ink)}
.article .sym{display:flex;gap:12px;align-items:center;margin:8px 0}.article .sym svg{width:110px;height:40px;flex:none}
/* player */
#player{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:radial-gradient(90% 70% at 50% 35%,var(--table),var(--table2))}
.stage{position:relative;flex:1;min-height:0}
#gl{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#diagram{position:absolute;inset:64px 16px 8px;display:grid;place-items:center;background:var(--table)}
#diagram svg{width:min(100%,560px);height:100%;max-height:100%}
.ptop{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 0}
.round{width:44px;height:44px;border-radius:50%;background:var(--card);box-shadow:var(--pop);font-size:18px;display:grid;place-items:center;flex:none}
.round.on{background:var(--ink);color:var(--bg)}
.ptitle{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;line-height:1.15}
.ptitle b{font:600 19px "Fredoka";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptitle span{font-size:13px;color:var(--dim);font-weight:800}
.hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:13px;font-weight:700;color:var(--dim);pointer-events:none;transition:opacity .6s}
.card{background:var(--card);border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(42,33,64,.15);padding:12px 18px calc(14px + env(safe-area-inset-bottom));position:relative;z-index:2}
.dots{display:flex;gap:4px;margin:2px 0 10px}
.dots i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .3s}
.dots i.on{background:linear-gradient(90deg,#ff4f7b,#ff8a2b)}.dots i.now{background:var(--sun)}
.chip-row{display:flex;gap:8px;align-items:center}
.chip{background:var(--grape);color:#fff;border-radius:999px;padding:5px 12px;font:800 13px "Nunito"}
.chip.ghost{background:var(--line);color:var(--ink)}.chip.ghost.on{background:var(--sun);color:#2a2140}
.chip:empty{display:none}
#pText{font:600 19px/1.35 "Nunito";margin:10px 2px 8px;min-height:3.9em}
#pScrub{width:100%;accent-color:#ff4f7b;margin:0 0 6px}
.ctrls{display:flex;gap:10px}
.big{flex:1;height:58px;border-radius:20px;font:700 24px "Fredoka";box-shadow:0 5px 0 rgba(42,33,64,.18);transition:transform .08s}
.big.ghost{background:var(--line);color:var(--ink);flex:.7}
.big.go{background:linear-gradient(135deg,#ff4f7b,#ff8a2b);color:#fff;flex:1.6}
.big.wide{flex:none;width:100%}
@media (min-width:900px){#player{flex-direction:row}.card{width:400px;border-radius:28px;margin:auto 18px auto 0;align-self:center}.stage{height:100%}}
/* done */
#done{position:fixed;inset:0;z-index:30;display:grid;place-items:end center;background:rgba(27,22,48,.25);padding:0 0 env(safe-area-inset-bottom)}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.done-card{position:relative;background:var(--card);border-radius:30px;margin:12px;padding:22px 20px 18px;text-align:center;width:min(440px,calc(100% - 24px));box-shadow:0 20px 60px rgba(0,0,0,.3);animation:up .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes up{from{transform:translateY(60px) scale(.9);opacity:0}}
.done-burst{font-size:46px;animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.done-card h2{font-size:30px;margin:4px 0}
.done-card p{color:var(--dim);font-weight:700;margin:0 0 14px}
.done-btns{display:grid;gap:10px}
/* sheet */
#sheet{position:fixed;inset:0;z-index:40;background:rgba(27,22,48,.4);display:flex;align-items:flex-end;justify-content:center}
.sheet-card{background:var(--card);border-radius:28px 28px 0 0;width:min(560px,100%);max-height:86vh;overflow:auto;padding:10px 18px calc(18px + env(safe-area-inset-bottom));animation:up .35s cubic-bezier(.2,1.2,.4,1)}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.sheet-card h3{font-size:20px;margin:6px 0 10px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 16px}
.sw{aspect-ratio:1;border-radius:14px;box-shadow:0 3px 0 rgba(0,0,0,.15);position:relative;overflow:hidden;background-size:cover}
.sw.on{outline:4px solid var(--ink);outline-offset:2px}
.sw .lock{position:absolute;right:3px;bottom:2px;font-size:12px}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);font-weight:700}
.toggle{width:52px;height:32px;border-radius:16px;background:var(--line);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:left .2s}
.toggle.on{background:var(--mint)}.toggle.on::after{left:23px}
.btnrow{display:grid;gap:10px;margin:14px 0 4px}
.btn{background:var(--line);border-radius:16px;padding:12px;font:700 16px "Nunito";text-align:center;text-decoration:none;display:block}
.btn.pro{background:linear-gradient(135deg,#8a5cff,#33b5ff);color:#fff}
#toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:800;opacity:0;transition:.3s;z-index:60;pointer-events:none;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
html.class-mode #pText{font-size:30px}html.class-mode .ptitle b{font-size:26px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}