:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#262231;--ink:#f3eefa;--muted:#aaa3bd;--card:#322d3f;--header-bg:#3d3849;--header-h:44px;--field:#3c3649;--line:#4a4459;--accent:#ff7043;--accent-ink:#fff;--radius:20px;--heat:0;--heat-color:#ffb300;--heat-glow:0px;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit}.screen{min-height:100%;padding:calc(var(--header-h) + 12px) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;display:flex;position:relative}.app-header{height:var(--header-h);background:var(--header-bg);letter-spacing:.04em;pointer-events:none;z-index:2;justify-content:center;align-items:center;gap:8px;margin:0;padding:4px 16px;font-size:1.5rem;font-weight:800;line-height:1;display:flex;position:fixed;top:0;left:0;right:0}.screen-title{text-align:center;margin:0;font-size:1.6rem}.muted{color:var(--muted)}.row{align-items:center;gap:12px;display:flex}.grow{flex:1}.center{text-align:center}.big-button{background:var(--accent);color:var(--accent-ink);cursor:pointer;text-align:center;border:0;border-radius:999px;padding:22px 40px;font-size:1.6rem;font-weight:800;line-height:normal;display:inline-block;box-shadow:0 8px #d84315}.big-button:active{transform:translateY(6px);box-shadow:0 2px #d84315}.big-button.secondary{background:#90a4ae;box-shadow:0 8px #607d8b}.big-button.secondary:active{box-shadow:0 2px #607d8b}.icon-button{background:var(--card);cursor:pointer;border:0;border-radius:50%;width:48px;height:48px;font-size:1.4rem;box-shadow:0 2px 6px #0000001f}.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 2px 10px #0000000f}.profile-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.profile-tile{border-radius:var(--radius);background:var(--card);cursor:pointer;border:0;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;font-size:1.1rem;font-weight:700;display:flex;box-shadow:0 2px 10px #00000014}.profile-tile .avatar{font-size:3rem}.emoji-choices{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.emoji-choice{background:var(--field);cursor:pointer;border:3px solid #0000;border-radius:12px;padding:8px;font-size:2rem}.emoji-choice[aria-pressed=true]{border-color:var(--accent)}.text-input{border:2px solid var(--line);background:var(--field);color:var(--ink);border-radius:12px;width:100%;padding:12px;font-size:1.2rem}.character-strip{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.character-chip{border:4px solid var(--chip-color);background:var(--card);border-radius:50%;place-items:center;width:64px;height:64px;font-size:2rem;display:grid;position:relative}.character-chip.napping{filter:grayscale(.6);opacity:.7}.character-chip.napping:after{content:"💤";font-size:1rem;position:absolute;top:-8px;right:-8px}.stars{font-size:1.3rem;font-weight:800}.icon-button.big{width:96px;height:96px;font-size:2.8rem}.segmented{justify-content:center;gap:6px;display:flex}.segmented button{border:2px solid var(--line);background:var(--field);color:var(--ink);cursor:pointer;border-radius:999px;padding:8px 16px;font-weight:700}.segmented button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.badge{color:#ffe7a3;background:#5b4a1c;border-radius:999px;padding:6px 12px;font-weight:700;display:inline-block}.session{box-shadow:inset 0 0 var(--heat-glow) var(--heat-color);transition:box-shadow .4s}.tile-grid{flex:1;align-content:center;gap:12px;display:grid}.tile-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.tile-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.tile-grid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}.tile{border-radius:var(--radius);background:var(--tile-color);aspect-ratio:1;cursor:pointer;box-shadow:0 6px 0 #00000059, 0 0 calc(var(--heat-glow) * .4) var(--heat-color);border:0;outline:2px solid #ffffff24;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:clamp(2rem,10vw,3.5rem);transition:transform .15s,box-shadow .3s;display:flex;position:relative;container-type:inline-size}.tile:active{transform:translateY(4px);box-shadow:0 2px #00000059}.tile>span:first-child{text-align:center;font-size:50cqw;line-height:1;display:block}.tile>img{width:50cqw;height:50cqw;display:block}.milestone-pop{color:#fff;text-shadow:0 0 24px var(--heat-color), 0 4px 0 #00000059;pointer-events:none;z-index:25;font-size:7rem;font-weight:900;animation:2.4s ease-in forwards milestone;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%)}@keyframes milestone{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}18%,55%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:.7;transform:translate(-50%,140vh)rotate(22deg)scale(.9)}}.tile .label{color:#ffffffe6;text-shadow:0 1px 2px #0006;font-size:1rem;font-weight:800}.tile.napping{filter:grayscale(.7);opacity:.55;cursor:default}.tile.napping:after{content:"💤";font-size:1.2rem;position:absolute;top:6px;right:8px}.tile.pop{animation:.5s pop}.tile.shake{animation:.4s shake}.tile.pulse{animation:.8s infinite pulse}.tile.highlight{outline:6px solid #fff;transform:scale(1.06)}.tile[disabled]{cursor:default}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.trail{flex-direction:column;align-items:center;gap:6px;display:flex}.trail-row{justify-content:center;gap:6px;display:flex}.trail .dot{border:3px solid var(--line);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:15px;font-weight:900;line-height:1;display:grid}.trail .dot.correct{background:#66bb6a;border-color:#66bb6a;animation:.5s cubic-bezier(.2,.8,.3,1.2) both fly-in}.trail .dot.correct:after{content:"✓"}@keyframes fly-in{0%{opacity:0;transform:translateY(90px)scale(.3)}to{opacity:1;transform:none}}.trail .dot.wrong{border-color:#ef9a9a}.overlay{color:#fff;z-index:20;text-align:center;background:#140a28eb;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px;display:flex;position:fixed;inset:0}.reveal{cursor:pointer;width:min(48vw,260px);animation:1s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-24px)}}.parade{flex-wrap:wrap;justify-content:center;gap:10px;min-height:4rem;font-size:3rem;display:flex}.parade span{animation:.5s both popin}@keyframes popin{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.listen{text-align:center;justify-items:center;gap:4px;font-size:3rem;font-weight:800;line-height:1.1;animation:1s infinite pulse;display:grid}.listen>span:first-child{font-size:4rem}.celebration-canvas{pointer-events:none;z-index:30;width:100%;height:100%;position:fixed;inset:0}.celebration-canvas.back{z-index:0}.session>*{z-index:1;position:relative}.throb{animation:.45s ease-in-out infinite alternate throb}@keyframes throb{0%{transform:scale(1)}to{transform:scale(1.18)}}.milestone-pop.overtime{font-size:3.4rem}.parade-grid .tile{background:var(--field);box-shadow:none;transition:background .2s,transform .2s}.parade-grid .tile.highlight{background:var(--tile-color);outline:none;transform:scale(1.06)}.tile .lock{opacity:.85;font-size:30cqw}.tile.unlocking{animation:.2s ease-in-out 10 unlock-shake,.4s ease-in 2s forwards unlock-flash}.screen-flash{opacity:0;pointer-events:none;z-index:50;background:#fff;animation:.6s ease-out 2s forwards screen-flash;position:fixed;inset:0}@keyframes screen-flash{0%{opacity:0}30%{opacity:1}to{opacity:0}}@keyframes unlock-shake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-10px)rotate(-3deg)}75%{transform:translate(10px)rotate(3deg)}}@keyframes unlock-flash{0%{filter:brightness();transform:scale(1)}60%{filter:brightness(3);transform:scale(1.12)}to{filter:brightness(1.6);transform:scale(1.06)}}.link-button{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:8px;font-size:1rem;text-decoration:underline}.session>.milestone-pop{z-index:25;position:fixed}.session{padding-top:calc(var(--header-h) + 56px)}.session>.stop-button{top:calc(var(--header-h) + 8px);z-index:3;opacity:.8;width:40px;height:40px;font-size:1.1rem;position:fixed;left:10px}.settings-section h3{margin:0 0 8px}.settings-section label{justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}.settings-section label.big-button{padding:22px 40px;display:inline-block}.settings-section input[type=number],.settings-section select{padding:6px;font-size:1rem}.bar{background:var(--field);border-radius:5px;height:10px;overflow:hidden}.bar>div{background:var(--accent);height:100%}.danger{color:#c62828}@media (prefers-reduced-motion:reduce){.tile,.reveal,.parade span,.listen{transition:none!important;animation:none!important}}.about .card{flex-direction:column;gap:10px;display:flex}.about h2{margin:0;font-size:1.25rem}.about p,.about li{margin:0;line-height:1.5}.about ul{flex-direction:column;gap:8px;margin:0;padding-left:20px;display:flex}.about .small{font-size:.85rem}
