:root{--paper: #fff6e9;--paper-deep: #ffe9cd;--paper-line: #f2dcc0;--panel: #ffffff;--ink: #2c2545;--ink-soft: #6f6690;--ink-faint: #b6afc9;--crayon-red: #ff4b4b;--crayon-orange: #ff8a3d;--crayon-yellow: #ffc93c;--crayon-lime: #8fd14f;--crayon-green: #22b573;--crayon-teal: #12bfc0;--crayon-sky: #3fb0f7;--crayon-blue: #3d63e0;--crayon-purple: #9b5de5;--crayon-pink: #ff6fb5;--crayon-brown: #a9714b;--crayon-ink: #2c2545;--room-doodle: var(--crayon-sky);--room-alive: var(--crayon-orange);--room-math: var(--crayon-purple);--r-sm: .75rem;--r-md: 1.125rem;--r-lg: 1.75rem;--r-xl: 2.25rem;--r-round: 999rem;--lift: .34rem;--toy-shadow: 0 var(--lift) 0 rgba(44, 37, 69, .22);--toy-shadow-press: 0 .08rem 0 rgba(44, 37, 69, .22);--panel-shadow: 0 .75rem 1.5rem rgba(44, 37, 69, .14);--float-shadow: 0 .4rem .9rem rgba(44, 37, 69, .18);--tint-weak: color-mix(in srgb, var(--ink) 8%, transparent);--tint-strong: color-mix(in srgb, var(--ink) 15%, transparent);--font-toy: "Fredoka", ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;--t-xs: .8125rem;--t-sm: .9375rem;--t-md: 1.0625rem;--t-lg: 1.375rem;--t-xl: 1.875rem;--t-huge: 3rem;--tap: 3.25rem;--tap-sm: 2.875rem;--gap-xs: .375rem;--gap-sm: .625rem;--gap-md: 1rem;--gap-lg: 1.5rem;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--paper);color:var(--ink);font-family:var(--font-toy);font-size:16px;-webkit-text-size-adjust:100%}#app{height:100dvh;width:100vw;overflow:hidden}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}h1,h2,h3,p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.toy{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-sm);flex:0 0 auto;white-space:nowrap;min-height:var(--tap);padding:0 var(--gap-md);border-radius:var(--r-lg);background:var(--panel);color:var(--ink);font-weight:600;font-size:var(--t-md);box-shadow:var(--toy-shadow);transform:translateY(0);transition:transform 90ms ease,box-shadow 90ms ease,background-color .14s ease;-webkit-user-select:none;user-select:none}.toy:active,.toy[data-pressed=true]{transform:translateY(var(--lift));box-shadow:var(--toy-shadow-press)}.toy:focus-visible{box-shadow:var(--toy-shadow),inset 0 0 0 3px var(--ink);outline:none}.toy--round{width:var(--tap);min-height:var(--tap);padding:0;border-radius:var(--r-round)}.toy--small{min-height:var(--tap-sm);width:var(--tap-sm);font-size:var(--t-sm)}.toy--wide{width:100%}.toy--accent{background:var(--accent, var(--crayon-sky));color:var(--panel)}.toy--ghost{background:color-mix(in srgb,var(--panel) 82%,transparent)}.toy[aria-pressed=true]{background:color-mix(in srgb,var(--accent, var(--ink)) 20%,var(--panel))}.toy:disabled{opacity:.4;box-shadow:var(--toy-shadow-press);transform:translateY(var(--lift));cursor:default}.screen{position:relative;display:grid;grid-template-columns:100%;grid-template-rows:minmax(0,1fr) auto;height:100dvh;width:100%;overflow:hidden;background:var(--paper)}.stage{position:relative;min-width:0;min-height:0;overflow:hidden}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;top:calc(var(--safe-top) + var(--gap-sm));left:var(--gap-sm);right:var(--gap-sm);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap-sm);pointer-events:none;z-index:2}.topbar>*{pointer-events:auto}.topbar__group{display:flex;gap:var(--gap-sm)}.dock{position:relative;z-index:3;display:flex;flex-direction:column;min-width:0;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-sm) calc(var(--gap-sm) + var(--safe-bottom));background:var(--paper-deep);box-shadow:0 -.5rem 1.25rem #2c25451a}.dock__row{display:flex;align-items:center;min-width:0;gap:var(--gap-sm);flex-wrap:wrap}.dock__row--scroll{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:.3rem .15rem}.dock__row--scroll::-webkit-scrollbar{display:none}.dock__row--tabs{flex-wrap:wrap;justify-content:center;gap:var(--gap-xs);min-width:0}.dock__row--tabs .chip{min-height:2.5rem;padding:0 .5rem;gap:.3rem;font-size:var(--t-xs)}.dock__spacer{flex:1}.crayons{display:flex;gap:var(--gap-xs);align-items:center;padding:.45rem .15rem .2rem}.crayon{flex:0 0 auto;width:var(--tap-sm);height:var(--tap-sm);border-radius:var(--r-round);background:var(--swatch);box-shadow:var(--toy-shadow);transition:transform .12s ease,box-shadow .12s ease;position:relative}.crayon[aria-pressed=true]{transform:translateY(-.3rem) scale(1.12);box-shadow:0 .55rem #2c25453d}.crayon[aria-pressed=true]:after{content:"";position:absolute;inset:.55rem;border-radius:var(--r-round);background:color-mix(in srgb,var(--panel) 85%,transparent)}.crayon:focus-visible{outline:none;box-shadow:var(--toy-shadow),inset 0 0 0 3px var(--ink)}.sizes{display:flex;align-items:center;gap:var(--gap-xs);padding:.25rem;border-radius:var(--r-round);background:color-mix(in srgb,var(--panel) 70%,transparent)}.size{display:grid;place-items:center;width:var(--tap-sm);height:var(--tap-sm);border-radius:var(--r-round);transition:background-color .14s ease}.size[aria-pressed=true]{background:var(--tint-strong)}.size i{display:block;border-radius:var(--r-round);background:var(--ink);width:var(--dot);height:var(--dot)}.home{height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--safe-top) + var(--gap-lg)) var(--gap-md) calc(var(--safe-bottom) + var(--gap-lg));display:flex;flex-direction:column;background-color:var(--paper);background-image:radial-gradient(circle,var(--paper-line) 1.3px,transparent 1.4px);background-size:32px 32px;background-position:8px 8px}.home__inner{width:100%;max-width:46rem;margin:auto;display:flex;flex-direction:column;gap:var(--gap-lg);padding-bottom:4.75rem}.wordmark{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap-md)}.wordmark__controls{display:flex;align-items:center;gap:var(--gap-xs);flex:0 0 auto}.companion{position:fixed;right:var(--gap-md);bottom:calc(var(--gap-md) + var(--safe-bottom));width:5rem;height:5rem;z-index:4;pointer-events:none}.wordmark__name{font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em;line-height:1}.wordmark__rule{display:block;width:100%;height:.75rem;margin-top:.15rem}.rooms{display:grid;gap:var(--gap-md)}.room{display:flex;align-items:center;gap:var(--gap-md);padding:var(--gap-sm) var(--gap-md) var(--gap-sm) var(--gap-sm);border-radius:var(--r-xl);background:transparent;text-align:left;transform:rotate(var(--tilt, 0deg));transition:transform .13s ease,background-color .13s ease}.room:active{transform:rotate(var(--tilt, 0deg)) scale(.97);background:var(--tint-weak)}.room:focus-visible{outline:none;background:var(--tint-weak)}.room__art{flex:0 0 auto;width:6.5rem;height:6.5rem;pointer-events:none}.room__name{font-size:var(--t-lg);font-weight:700;letter-spacing:-.01em}.gallery{display:flex;flex-direction:column;gap:var(--gap-sm)}.gallery__title{font-size:var(--t-sm);font-weight:600;color:var(--ink-soft)}.gallery__row{display:flex;gap:var(--gap-md);overflow-x:auto;scrollbar-width:none;padding:.6rem .15rem}.gallery__row::-webkit-scrollbar{display:none}.gallery__item{position:relative;flex:0 0 auto;width:7.5rem;height:5.5rem;border-radius:.25rem;overflow:hidden;background:var(--panel);box-shadow:var(--float-shadow);padding:0;transform:rotate(var(--tilt, 0deg))}.gallery__item img{width:100%;height:100%;object-fit:cover;display:block}.gallery__open{display:block;width:100%;height:100%;padding:0;background:none;cursor:pointer}.gallery__badge{position:absolute;top:.25rem;right:.25rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:var(--r-round);background:color-mix(in srgb,var(--panel) 88%,transparent);box-shadow:var(--float-shadow);color:var(--ink);cursor:pointer}.gallery__badge--danger{top:auto;bottom:.25rem;color:var(--crayon-red)}.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:var(--gap-sm);max-height:46vh;overflow-y:auto;padding:.35rem}.picker__item{aspect-ratio:4 / 3;padding:0;border-radius:var(--r-sm);overflow:hidden;background:var(--paper);box-shadow:var(--float-shadow);cursor:pointer;transition:transform .11s ease}.picker__item:active{transform:scale(.96)}.picker__item img{width:100%;height:100%;object-fit:cover;display:block}.sheet__note{padding:var(--gap-sm) 0 var(--gap-md);text-align:center;font-size:var(--t-sm);color:var(--ink-soft)}.gallery__head{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);min-width:0}.gallery__link{display:inline-flex;align-items:center;gap:var(--gap-xs);min-height:var(--tap-sm);padding:0 var(--gap-sm);border-radius:var(--r-md);background:none;font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background-color .14s ease}.gallery__link:hover,.gallery__link:focus-visible{background:var(--tint-weak)}.gallery__link:disabled{opacity:.45;cursor:default}.gallery__item--away{opacity:.72;filter:saturate(.7)}.toast{position:fixed;left:50%;bottom:calc(var(--gap-lg) + var(--safe-bottom));transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:var(--gap-sm);max-width:calc(100vw - 2rem);padding:.6rem .7rem .6rem var(--gap-md);border-radius:var(--r-round);background:var(--ink);color:var(--paper);box-shadow:var(--panel-shadow);animation:toast-in .22s ease-out}.toast__text{font-size:var(--t-sm);font-weight:600}.toast__action{min-height:var(--tap-sm);padding:0 var(--gap-md);border-radius:var(--r-round);background:color-mix(in srgb,var(--paper) 22%,transparent);color:var(--paper);font-size:var(--t-sm);font-weight:700;cursor:pointer;transition:background-color .14s ease}.toast__action:hover,.toast__action:focus-visible{background:color-mix(in srgb,var(--paper) 34%,transparent)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,.6rem)}}@media(prefers-reduced-motion:reduce){.toast{animation:none}}.chip{display:inline-flex;align-items:center;gap:var(--gap-xs);flex:0 0 auto;min-height:var(--tap-sm);padding:0 var(--gap-sm);border-radius:var(--r-md);background:color-mix(in srgb,var(--panel) 85%,transparent);font-size:var(--t-sm);font-weight:600;box-shadow:var(--toy-shadow);transition:background-color .14s ease,transform .11s ease,box-shadow .11s ease}.chip:active{transform:translateY(.2rem);box-shadow:var(--toy-shadow-press)}.chip--tinted{background:color-mix(in srgb,var(--accent, var(--ink)) 20%,var(--panel))}.chip[aria-pressed=true]{background:color-mix(in srgb,var(--accent, var(--ink)) 48%,var(--panel));transform:translateY(-.15rem);box-shadow:0 .5rem #2c254538}.chip:focus-visible{outline:none;box-shadow:var(--toy-shadow),inset 0 0 0 3px var(--ink)}.magic{--accent: var(--crayon-orange);flex:0 0 auto;min-width:9rem;padding:0 var(--gap-md);min-height:3.75rem;font-size:var(--t-lg);font-weight:700;border-radius:var(--r-xl);background:var(--accent);color:var(--panel);box-shadow:0 var(--lift) 0 color-mix(in srgb,var(--accent) 55%,var(--ink));display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-sm)}.magic:active{transform:translateY(var(--lift));box-shadow:0 0 color-mix(in srgb,var(--accent) 55%,var(--ink))}.magic:focus-visible{outline:none;box-shadow:0 var(--lift) 0 color-mix(in srgb,var(--accent) 55%,var(--ink)),inset 0 0 0 3px var(--panel)}.coach{position:absolute;left:50%;bottom:var(--gap-md);transform:translate(-50%);display:flex;align-items:center;gap:var(--gap-xs);padding:.5rem .9rem;border-radius:var(--r-round);background:color-mix(in srgb,var(--panel) 88%,transparent);box-shadow:var(--float-shadow);font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);text-align:center;max-width:min(92%,30rem);pointer-events:none;z-index:1;animation:coach-in .32s ease both}@keyframes coach-in{0%{opacity:0;transform:translate(-50%,.75rem)}}.sheet-scrim{position:fixed;inset:0;z-index:20;display:grid;place-items:end center;background:color-mix(in srgb,var(--ink) 42%,transparent);animation:fade-in .16s ease both}.sheet{width:min(30rem,100%);margin:var(--gap-md);margin-bottom:calc(var(--gap-md) + var(--safe-bottom));padding:var(--gap-lg) var(--gap-md) var(--gap-md);border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--panel-shadow);display:flex;flex-direction:column;gap:var(--gap-md);animation:sheet-up .22s cubic-bezier(.2,.9,.3,1.2) both}.sheet__title{font-size:var(--t-lg);font-weight:700;text-align:center}.sheet__actions{display:flex;gap:var(--gap-sm)}.sheet__actions .toy{flex:1}@keyframes fade-in{0%{opacity:0}}@keyframes sheet-up{0%{transform:translateY(2rem);opacity:0}}.readout{position:absolute;top:calc(var(--safe-top) + 4.75rem);left:50%;transform:translate(-50%);display:flex;align-items:baseline;gap:var(--gap-sm);padding:.4rem 1rem;border-radius:var(--r-round);background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:var(--float-shadow);font-weight:700;font-size:var(--t-md);z-index:1;pointer-events:none;max-width:calc(100vw - 1.5rem);flex-wrap:wrap;justify-content:center;text-align:center}.readout strong{font-size:var(--t-lg);white-space:nowrap}.readout span{font-size:var(--t-sm);font-weight:600;color:var(--ink-soft)}.ribbon .chip{min-width:3.1rem;justify-content:center;font-size:var(--t-md);font-variant-numeric:tabular-nums}.counter{position:absolute;top:calc(var(--safe-top) + 4.5rem);left:50%;transform:translate(-50%);font-size:var(--t-huge);font-weight:700;color:color-mix(in srgb,var(--ink) 78%,transparent);z-index:1;pointer-events:none;font-variant-numeric:tabular-nums}.stepper{display:flex;align-items:center;gap:var(--gap-sm);padding:.25rem;border-radius:var(--r-round);background:color-mix(in srgb,var(--panel) 75%,transparent)}.stepper__value{min-width:3.5rem;text-align:center;font-size:var(--t-lg);font-weight:700;font-variant-numeric:tabular-nums}.stepper__value--pick{min-height:var(--tap-sm);padding:0 var(--gap-xs);border-radius:var(--r-md);background:var(--tint-weak);color:var(--ink);cursor:pointer;transition:background-color .14s ease}.stepper__value--pick:hover,.stepper__value--pick:focus-visible{background:var(--tint-strong)}@media(min-width:40rem){:root{--t-xl: 2.5rem;--t-huge: 4rem}.rooms{grid-template-columns:repeat(3,1fr)}.room{flex-direction:column;text-align:center;padding:var(--gap-md)}.room__art{width:9rem;height:9rem}}@media(prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}.pad__value{text-align:center;font-size:var(--t-huge);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-sm)}.pad__key{display:grid;place-items:center;min-height:3.5rem;border-radius:var(--r-lg);background:var(--paper-deep);font-size:var(--t-lg);font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--toy-shadow);transition:transform 90ms ease,box-shadow 90ms ease,background-color .14s ease}.pad__key:active{transform:translateY(var(--lift));box-shadow:var(--toy-shadow-press)}.pad__key:focus-visible{outline:none;box-shadow:var(--toy-shadow),inset 0 0 0 3px var(--ink)}.pad__key--go{background:var(--crayon-green);color:var(--panel)}.pad__key:disabled{opacity:.4;transform:translateY(var(--lift));box-shadow:var(--toy-shadow-press);cursor:default}.dock__label{flex:0 0 auto;font-size:var(--t-sm);font-weight:600;color:var(--ink-soft)}.batch{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:3.5rem;padding:0 .25rem;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--toy-shadow);transition:transform 90ms ease,box-shadow 90ms ease,background-color .14s ease}.batch strong{font-size:var(--t-md);font-weight:700;font-variant-numeric:tabular-nums}.batch span{font-size:.6875rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}.batch:active{transform:translateY(var(--lift));box-shadow:var(--toy-shadow-press)}.batch:focus-visible{outline:none;box-shadow:var(--toy-shadow),inset 0 0 0 3px var(--ink)}.batch--next{background:color-mix(in srgb,var(--crayon-green) 24%,var(--panel))}.batch:disabled{opacity:.35;transform:translateY(var(--lift));box-shadow:var(--toy-shadow-press);cursor:default}