:root{--butter:#f5f3d4;--cream:#fbf9e0;--ink:#16140a;--soot:#2a2620;--coral:#ff5e3a;--rose:#f7a6a0;--pink:#ee4a76;--blue:#0046b8;--sky:#84c2ff;--green:#5e9a2a;--mint:#cee29a;--yellow:#f7c128;--orange:#ff7e1d;--plum:#5a2380;--f-blocky:"Playfair Display", "Yeseva One", serif;--f-italic:"DM Serif Display", "Yeseva One", serif;--f-script:"Caveat Brush", "Pacifico", cursive;--f-body:"Space Grotesk", system-ui, sans-serif;--f-mono:ui-monospace, "SF Mono", monospace;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;margin:0;padding:0}body{font-family:var(--f-body);background:var(--butter);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh}#root{flex-direction:column;min-height:100dvh;display:flex}::-webkit-scrollbar{display:none}*{scrollbar-width:none}.page-bg{z-index:-1;background:radial-gradient(ellipse at 30% 10%, #f4c3431f, transparent 50%), radial-gradient(ellipse at 80% 80%, #2547d624, transparent 55%), radial-gradient(ellipse at 10% 90%, #e63d2f1a, transparent 50%), var(--butter);position:fixed;inset:0}.grain{isolation:isolate;position:relative}.grain:after{content:"";pointer-events:none;opacity:.4;mix-blend-mode:multiply;border-radius:inherit;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");position:absolute;inset:0}.brik{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--cream)}.brik-lg{box-shadow:7px 7px 0 var(--ink);border-width:4px}.brik-sm{box-shadow:3px 3px 0 var(--ink);border-width:2px}button{font-family:inherit}.btn{font-family:var(--f-blocky);cursor:pointer;letter-spacing:.5px;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:12px;padding:14px 22px;font-size:18px;transition:transform 80ms,box-shadow 80ms}.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)!important}.screen{-webkit-overflow-scrolling:touch;background:var(--butter);position:absolute;inset:0;overflow:hidden auto}.screen-anim{animation:.35s cubic-bezier(.2,.7,.2,1) slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.app-shell{background:var(--butter);max-width:430px;min-height:100dvh;margin:0 auto;position:relative;overflow:hidden}.app-content{min-height:calc(100dvh - 76px - var(--safe-bottom));padding-bottom:20px;position:relative}.app-content.has-bottom-nav{padding-bottom:90px}@media (width>=768px){.app-content.has-bottom-nav{padding-bottom:24px}}.bottom-nav{background:var(--ink);width:100%;max-width:430px;padding:10px 8px calc(12px + var(--safe-bottom));border-top:3px solid var(--ink);z-index:100;grid-template-columns:repeat(5,1fr);gap:4px;display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -8px 24px #00000026}.nav-btn{color:var(--cream);cursor:pointer;font-family:var(--f-body);letter-spacing:1px;text-transform:uppercase;background:0 0;border:2.5px solid #0000;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;font-size:10px;font-weight:700;transition:transform .15s;display:flex}.nav-btn.active{background:var(--yellow);border-color:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--coral);transform:translateY(-2px)}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes bounce-soft{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin-slow{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.85;transform:scale(1.18)rotate(8deg)}}@keyframes twinkle-soft{0%,to{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}@keyframes float-y{0%,to{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-6px) rotate(var(--r,0deg))}}@keyframes heartbeat{0%,40%,80%,to{transform:scale(1)}20%,60%{transform:scale(1.18)}}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@keyframes slide-up-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-right-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes fillbar{0%{transform:scaleX(0)}to{transform:scaleX(var(--p,1))}}@keyframes tilt{0%,to{transform:rotate(var(--r,-2deg))}50%{transform:rotate(calc(var(--r,-2deg) * -1))}}@keyframes pulse-shadow{0%,to{box-shadow:5px 5px 0 var(--ink)}50%{box-shadow:6px 6px 0 var(--ink), 0 0 0 6px #f4c34340}}@keyframes ring-pulse{0%{box-shadow:0 0 #e63d2f8c}to{box-shadow:0 0 0 14px #e63d2f00}}@keyframes shake-xs{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes star-spin{to{transform:rotate(360deg)}}@keyframes squiggle-dash{to{stroke-dashoffset:-40px}}@keyframes count-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-10px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes glow-pulse{0%,to{filter:drop-shadow(0 0 4px #f4c34366)}50%{filter:drop-shadow(0 0 12px #f4c343b3)}}@keyframes level-up-flash{0%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.05)}to{opacity:0;transform:scale(1.2)}}.anim-twinkle{transform-origin:50%;animation:3.2s ease-in-out infinite twinkle}.anim-twinkle-slow{transform-origin:50%;animation:5.5s ease-in-out infinite twinkle}.anim-twinkle-fast{transform-origin:50%;animation:1.6s ease-in-out infinite twinkle-soft}.anim-float{animation:4s ease-in-out infinite float-y}.anim-float-d{animation:5.5s ease-in-out -1.5s infinite float-y}.anim-heartbeat{transform-origin:50%;animation:2.2s ease-in-out infinite heartbeat}.anim-tilt{animation:6s ease-in-out infinite tilt}.anim-pop{animation:.55s cubic-bezier(.34,1.56,.64,1) both pop-in}.anim-slide-up{animation:.5s cubic-bezier(.2,.7,.2,1) both slide-up-in}.anim-slide-right{animation:.45s cubic-bezier(.2,.7,.2,1) both slide-right-in}.anim-pulse-shadow{animation:2.2s ease-in-out infinite pulse-shadow}.anim-ring{animation:1.8s ease-out infinite ring-pulse}.anim-shake{animation:4s ease-in-out infinite shake-xs}.anim-glow{animation:2s ease-in-out infinite glow-pulse}.stagger>*{animation:.45s cubic-bezier(.2,.7,.2,1) both slide-up-in}.stagger>:first-child{animation-delay:60ms}.stagger>:nth-child(2){animation-delay:.12s}.stagger>:nth-child(3){animation-delay:.18s}.stagger>:nth-child(4){animation-delay:.24s}.stagger>:nth-child(5){animation-delay:.3s}.stagger>:nth-child(6){animation-delay:.36s}.stagger>:nth-child(7){animation-delay:.42s}.stagger>:nth-child(8){animation-delay:.48s}.tapable{transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s}.tapable:active{transform:translate(3px,3px)}.shimmer-text{background:linear-gradient(90deg, var(--coral), var(--pink), var(--yellow), var(--blue), var(--coral));color:#0000;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:6s linear infinite shimmer}.top-bar{z-index:50;background:var(--butter);border-bottom:3px solid var(--ink);align-items:center;gap:10px;padding:12px 16px;display:flex;position:sticky;top:0}.chip{font-family:var(--f-body);letter-spacing:.4px;text-transform:uppercase;border:2px solid var(--ink);cursor:pointer;white-space:nowrap;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;transition:all .12s}.chip.active{background:var(--ink);color:var(--cream);box-shadow:2px 2px 0 var(--ink)}.chip:not(.active){background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.xp-toast{z-index:999;animation:.4s cubic-bezier(.34,1.56,.64,1) both pop-in;position:fixed;top:60px;left:50%;transform:translate(-50%)}@media (hover:none) and (pointer:coarse){.btn:active,.tapable:active,.chip:active{transition-duration:50ms}}.sidebar,.right-rail,.desktop-topbar{display:none}@media (width>=768px){body{background:var(--butter);overflow:hidden}.app-shell{border-left:3px solid var(--ink);border-right:3px solid var(--ink);background:0 0;grid-template-rows:1fr;grid-template-columns:260px 1fr;max-width:1440px;height:100dvh;margin:0 auto;display:grid;position:relative;overflow:hidden}.app-content{border-left:3px solid var(--ink);background:var(--butter);height:100dvh;min-height:0;max-height:100dvh;overflow:hidden auto;padding-bottom:24px!important}.bottom-nav{display:none!important}.sidebar{display:flex}.app-shell.app-shell-bleed{border:none;max-width:none;height:auto;min-height:100dvh;display:block;overflow:visible}.app-shell.app-shell-bleed .app-content{border:none;height:auto;max-height:none;overflow:visible}.app-shell.app-shell-bleed .desktop-topbar{display:none}.content-narrow{max-width:540px;margin:0 auto}.content-wide{max-width:1040px;margin:0 auto}}@media (width>=1280px){.app-shell{grid-template-columns:280px minmax(0,760px) 320px;justify-content:center}.right-rail{display:flex}}@media (width>=1600px){.app-shell{grid-template-columns:300px minmax(0,860px) 360px}}.sidebar{background:var(--cream);border-right:3px solid var(--ink);flex-direction:column;gap:6px;height:100dvh;padding:22px 18px 18px;position:relative;overflow-y:auto}.sidebar:before{content:"";pointer-events:none;background:radial-gradient(circle at 90% -10%,#ff5e3a14,#0000 50%),radial-gradient(circle at -20% 90%,#0046b814,#0000 50%);position:absolute;inset:0}.sidebar-brand{border-bottom:2px dashed #00000026;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px 14px;display:flex}.side-nav{z-index:1;flex-direction:column;gap:4px;display:flex;position:relative}.side-nav-section{font-family:var(--f-body);letter-spacing:1.8px;text-transform:uppercase;color:#88806e;padding:14px 8px 4px;font-size:10px;font-weight:700}.side-nav-item{cursor:pointer;font-family:var(--f-body);color:var(--ink);text-align:left;background:0 0;border:2px solid #0000;border-radius:10px;align-items:center;gap:10px;width:100%;padding:9px 12px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .12s,background .15s,box-shadow .12s;display:flex}.side-nav-item:hover{background:var(--butter);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.side-nav-item.active{background:var(--yellow);border-color:var(--ink);box-shadow:3px 3px 0 var(--coral);transform:translate(-1px,-1px)}.side-nav-item .side-nav-count{font-family:var(--f-mono);background:var(--coral);color:var(--cream);border:1.5px solid var(--ink);border-radius:999px;margin-left:auto;padding:2px 7px;font-size:11px;font-weight:700}.sidebar-footer{z-index:1;border-top:2px dashed #00000026;margin-top:auto;padding-top:14px;position:relative}.sidebar-user{background:var(--ink);color:var(--cream);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--coral);cursor:pointer;font-family:var(--f-body);border-radius:12px;align-items:center;gap:10px;padding:8px 10px;font-size:13px;font-weight:600;text-decoration:none;display:flex}.sidebar-user .av{background:var(--yellow);width:32px;height:32px;color:var(--ink);font-family:var(--f-blocky);border:1.5px solid var(--ink);border-radius:8px;flex-shrink:0;place-items:center;font-size:16px;display:grid}.right-rail{background:var(--cream);border-left:3px solid var(--ink);flex-direction:column;gap:14px;height:100dvh;padding:22px 18px;position:relative;overflow-y:auto}.right-rail:before{content:"";pointer-events:none;background:radial-gradient(circle at 10% 100%,#f7c1281f,#0000 50%),radial-gradient(circle at 100% 0,#ff5e3a1a,#0000 50%);position:absolute;inset:0}.rail-card{background:var(--butter);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);z-index:1;border-radius:14px;padding:14px;position:relative}.rail-card .rail-eyebrow{font-family:var(--f-body);letter-spacing:2px;text-transform:uppercase;color:#88806e;margin-bottom:6px;font-size:10px;font-weight:700}.rail-card .rail-title{font-family:var(--f-blocky);letter-spacing:-.5px;font-size:18px;line-height:1.05}@media (width>=768px){.desktop-grid-4{grid-template-columns:repeat(4,1fr)!important}.desktop-grid-2{grid-template-columns:1fr 1fr;gap:14px;display:grid}}@media (width>=1024px){body{font-size:15px}}