:root{--paper:#fff7e8;--grid:#2e5bff14;--ink:#1e1b2e;--ink-2:#4a4560;--dim:#6b6580;--pink:#ff4d7e;--blue:#2e5bff;--yellow:#ffd23f;--green:#19b37a;--night:#17132a;--cream:#fff7e8;--display:"Gluten", "Chalkboard SE", "Comic Sans MS", cursive;--font:"Nunito", "Avenir Next", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background-size:26px 26px;font-weight:600}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.logo{font-family:var(--display);letter-spacing:-.02em;white-space:nowrap;margin:0;font-weight:900;line-height:.9}.logo span{transform:rotate(var(--r));text-shadow:.045em .045em 0 var(--ink);animation:wobble 2.4s ease-in-out var(--d) infinite;display:inline-block}@keyframes wobble{50%{transform:rotate(calc(var(--r) * -1)) translateY(-.03em)}}.h1{text-wrap:balance;font-family:var(--display);letter-spacing:-.01em;margin:0;font-size:40px;font-weight:800;line-height:1.02}.h2{font-family:var(--display);margin:0;font-size:30px;font-weight:800;line-height:1.05}.mega{font-family:var(--display);margin:0;font-size:8.4vh;font-weight:800;line-height:1.02}.hl{background:linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%);padding:0 .08em}.tag{text-wrap:balance;font-family:var(--display);color:var(--pink);margin:0;font-size:22px;font-weight:700}.lede{color:var(--ink-2);margin:0;font-size:18px;line-height:1.4}.label{letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin:0;font-size:14px;font-weight:900}.page{max-width:480px;min-height:100dvh;padding:max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:14px;margin:0 auto;display:flex}.page.center{text-align:center;justify-content:center;align-items:center}.page.center .top{top:max(14px, env(safe-area-inset-top));max-width:448px;margin:0 auto;position:absolute;left:16px;right:16px}.page.landing{justify-content:center;gap:16px}.row{align-items:stretch;gap:10px;display:flex}.stack{flex-direction:column;gap:8px;display:flex}.grow{flex:1;min-width:0}.dock{padding:18px 0 max(2px, env(safe-area-inset-bottom));background:linear-gradient(transparent, var(--paper) 22px);z-index:2;flex-direction:column;gap:6px;margin-top:auto;display:flex;position:sticky;bottom:0}.top{align-items:center;gap:10px;min-height:44px;display:flex}.top>:last-child:not(:first-child):not(.code-chip){margin-left:auto}.mini-logo{font-family:var(--display);color:var(--pink);text-shadow:2px 2px 0 var(--ink);font-size:24px;font-weight:900;text-decoration:none}.code-chip{letter-spacing:.12em;background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 11px;font-size:14px;font-weight:900}.btn{border:3px solid var(--ink);background:var(--pink);color:#fff;letter-spacing:.01em;min-height:56px;box-shadow:0 5px 0 var(--ink);touch-action:manipulation;border-radius:16px;padding:0 20px;font-size:20px;font-weight:900;transition:transform 80ms,box-shadow 80ms}.btn:disabled,.btn.blue:disabled,.btn.alt:disabled{color:var(--dim);box-shadow:none;background:#1e1b2e17;border-color:#0000}.btn.alt{color:var(--ink);background:#fff}.btn.blue{background:var(--blue)}.btn.on{background:var(--yellow);color:var(--ink)}.btn.sq{flex:none;width:56px;padding:0;font-size:22px}.btn.big{border-radius:20px;min-height:76px;font-size:28px}.btn.dice{flex:none;align-items:center;gap:6px;padding:0 14px;display:inline-flex}.link{min-height:44px;color:var(--ink-2);text-underline-offset:3px;background:0 0;border:0;padding:0 4px;font-weight:800;text-decoration:underline}.field{border:3px solid var(--ink);background:#fff;border-radius:14px;width:100%;min-height:56px;padding:0 14px;font-size:20px;font-weight:800}textarea.field{resize:none;line-height:1.3;font-family:var(--display);padding:12px 14px;font-size:24px;font-weight:600}.field::placeholder{color:#aba3b8}.codefield{text-align:center;min-width:0;font-family:var(--display);letter-spacing:.28em;text-transform:uppercase;flex:1;font-size:30px}.toast{z-index:50;left:50%;top:max(8px, env(safe-area-inset-top));border:3px solid var(--ink);background:var(--yellow);max-width:min(440px,100% - 32px);color:var(--ink);text-align:center;box-shadow:0 3px 0 var(--ink);pointer-events:none;border-radius:999px;padding:7px 16px;font-size:15px;font-weight:900;line-height:1.25;animation:.25s ease-out both slide;position:fixed;transform:translate(-50%)}@keyframes slide{0%{transform:translate(-50%,-140%)}}.card{border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:#fff;border-radius:18px;padding:14px}.blob{border:3px solid var(--ink);color:#fff;font-family:var(--display);text-shadow:1px 1px #1e1b2e99;flex:none;place-items:center;font-weight:900;line-height:1;display:inline-grid}.blob.ghost{background:#1e1b2e12;border:0;border-radius:50%;width:88px;height:88px}.swatches{grid-template-columns:repeat(6,1fr);gap:10px;display:grid}.swatch{aspect-ratio:1;border:3px solid var(--ink);border-radius:50%;place-items:center;padding:0;display:grid}.swatch[aria-checked=true]{box-shadow:0 0 0 3px var(--paper), 0 0 0 6px var(--ink)}.swatch[aria-checked=true] .blob{border:0;background:0 0!important}.swatch:disabled{opacity:.2}.night .kick{color:var(--cream);background:#ffffff1f}.players h2{margin-bottom:10px}.players ul{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.players li{background:#1e1b2e12;border-radius:999px;align-items:center;gap:8px;padding:4px 12px 4px 4px;font-weight:800;display:inline-flex}.players li em,.late{letter-spacing:.02em;background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;font-size:14px;font-style:normal;font-weight:900}.players li.gone{opacity:.45}.waiting-note{text-align:center;color:var(--ink-2);margin:0;font-size:17px;font-weight:800}.clock{border:3px solid var(--ink);background:conic-gradient(var(--blue) var(--f), #fff 0);border-radius:50%;flex:none;place-items:center;width:54px;height:54px;display:grid}.clock span{border:2px solid var(--ink);width:70%;height:70%;font-family:var(--display);background:#fff;border-radius:50%;place-items:center;font-size:18px;font-weight:900;display:grid}.clock.hot{background:conic-gradient(var(--pink) var(--f), #fff 0);animation:1s ease-in-out infinite throb}.clock.big{border-width:6px;width:30vh;height:30vh}.clock.big span{border-width:5px;font-size:10vh}@keyframes throb{50%{transform:scale(1.07)}}.paper{aspect-ratio:1;border:3px solid var(--ink);background:#fff;border-radius:14px;position:relative;overflow:hidden}.paper canvas{width:100%;height:100%;display:block}.blank{text-align:center;font-family:var(--display);color:#a39bb3;place-items:center;margin:0;padding:20px;font-size:22px;display:grid;position:absolute;inset:0}.page.draw{gap:10px}.brief{background:var(--yellow);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:6px 16px 10px 14px;padding:10px 14px 12px;transform:rotate(-1deg)}.prompt{font-family:var(--display);overflow-wrap:anywhere;margin:2px 0 0;font-size:26px;font-weight:800;line-height:1.1}.pad{flex-direction:column;gap:10px;display:flex}.canvas-wrap{width:min(100%,100dvh - 380px);min-width:min(100%,250px);box-shadow:0 5px 0 var(--ink);align-self:center}.canvas-wrap canvas{touch-action:none;cursor:crosshair}.inks{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.ink{border:3px solid var(--ink);border-radius:12px;height:40px;padding:0}.ink[aria-checked=true]{box-shadow:0 0 0 3px var(--paper), 0 0 0 6px var(--ink)}.tools{grid-template-columns:repeat(3,48px) 1fr 1fr;gap:8px;display:grid}.tool{border:3px solid var(--ink);background:#fff;border-radius:12px;place-items:center;height:48px;padding:0;font-weight:900;display:grid}.tool span{border-radius:50%}.tool[aria-pressed=true]{background:var(--yellow)}.tool:disabled{opacity:.4}.handed{width:min(100%,100dvh - 385px);min-width:min(100%,230px);box-shadow:0 5px 0 var(--ink);align-self:center;transform:rotate(1deg)}.pencil .nib{transform-origin:90px 90px;animation:.9s ease-in-out infinite scribble}.pencil .squig{stroke-dasharray:160;animation:1.8s linear infinite draw}@keyframes scribble{50%{transform:translate(-18px,8px)rotate(-6deg)}}@keyframes draw{0%{stroke-dashoffset:160px}to{stroke-dashoffset:-160px}}.night{background:radial-gradient(ellipse 90% 60% at 50% -8%, #3e3270 0%, var(--night) 62%) var(--night);color:var(--cream)}.page.night{min-height:100dvh}body:has(.night){background:var(--night)}.night .label{color:#b9b0d6}.night .lede,.night .waiting-note{color:#d8d1ee}.night .hl{color:var(--yellow);background:0 0}.night .mini-logo{color:var(--yellow)}.night .code-chip{color:var(--cream);background:#2e2650}.night .dock{background:linear-gradient(transparent, var(--night) 22px)}.night .link{color:#d8d1ee}.chain{flex-direction:column;gap:18px;margin:0;padding:0;list-style:none;display:flex}.chain li:nth-child(odd) .entry{transform:rotate(-1deg)}.chain li:nth-child(2n) .entry{transform:rotate(1deg)}.chain li.fresh{animation:.55s cubic-bezier(.2,1.4,.4,1) both deal}@keyframes deal{0%{opacity:0;transform:translateY(40px)rotate(-5deg)scale(.9)}}.entry{color:var(--ink);border:3px solid var(--ink);background:#fff;border-radius:16px;margin:0;padding:10px;box-shadow:0 7px #00000059}.entry figcaption{align-items:center;gap:8px;min-width:0;margin-bottom:8px;display:flex}.entry .late{background:var(--pink);margin-left:auto}.who{align-items:center;gap:6px;min-width:0;font-size:15px;display:inline-flex}.who b{text-overflow:ellipsis;white-space:nowrap;font-weight:900;overflow:hidden}.who span:last-child{color:var(--dim);font-weight:700}.who .blob{border-width:2px}.entry.text{background:color-mix(in srgb, var(--who) 16%, #fffbea)}.said{font-family:var(--display);overflow-wrap:anywhere;margin:2px 4px 6px;font-size:28px;font-weight:700;line-height:1.12}.entry .paper{border-width:2px;border-radius:10px}.entry.small .said{font-size:19px}.entry.small .blank{font-size:15px}.reel .chain{padding-bottom:6px}.remote{gap:10px;display:flex}.remote .btn:not(.sq){flex:1}.gallery{flex-direction:column;gap:8px;display:flex}.strip{scroll-snap-type:x mandatory;grid-auto-columns:min(62vw,210px);grid-auto-flow:column;align-items:start;gap:10px;padding:4px 2px 12px;display:grid;overflow-x:auto}.strip>*{scroll-snap-align:start}.tv{width:100vw;height:100dvh;padding:4vh 3.4vw;overflow:hidden}.tv.center{place-items:center;display:grid}.tv.lobby{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:4vw;display:grid}.join{flex-direction:column;gap:2.6vh;display:flex}.join .logo{font-size:15vh!important}.join .tag{font-size:3.6vh}.joincard{align-items:center;gap:2.4vw;padding:2.4vh;display:flex;transform:rotate(-1deg)}.qr{border-radius:10px;flex:none;width:24vh;height:24vh}.url{font-family:var(--display);overflow-wrap:anywhere;margin:.4vh 0 1.2vh;font-size:4vh;font-weight:800}.bigcode{font-family:var(--display);letter-spacing:.1em;color:var(--pink);text-shadow:4px 4px 0 var(--ink);margin:0;font-size:12vh;font-weight:900;line-height:1}.wall{flex-direction:column;justify-content:center;gap:3vh;height:100%;display:flex}.wall .h2{font-size:5vh}.wall ul{grid-template-columns:repeat(4,1fr);gap:3vh 1.4vw;margin:0;padding:0;list-style:none;display:grid}.wall li{transform:rotate(var(--r));flex-direction:column;align-items:center;gap:1vh;font-size:2.6vh;font-weight:900;display:flex}.wall li .blob{border-width:4px;width:11vh!important;height:11vh!important;font-size:5.5vh!important}.wall li.gone{opacity:.4}.wall li.empty{color:#b9b1c4}.wall li.empty .ghost{width:11vh;height:11vh}.pop{animation:.5s cubic-bezier(.2,1.6,.4,1) both pop}@keyframes pop{0%{opacity:0;transform:scale(.3)rotate(-20deg)}}.tv.progress{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;align-items:center;gap:6vh 3vw;padding-top:8vh;display:grid}.desks{flex-wrap:wrap;grid-column:1/-1;justify-content:center;align-self:center;gap:4vh 3vw;margin:0;padding:0;list-style:none;display:flex;margin-bottom:6vh!important}.desks li{flex-direction:column;align-items:center;gap:1.2vh;font-size:2.8vh;font-weight:900;display:flex;position:relative}.desks .blob{border-width:4px;transition:opacity .3s;width:15vh!important;height:15vh!important;font-size:7vh!important}.desks li.done .blob{animation:.45s cubic-bezier(.2,1.6,.4,1) both pop}.desks li.gone span{text-decoration:line-through}.stamp{border:3px solid var(--ink);background:var(--green);color:#fff;border-radius:8px;padding:.4vh 1.2vh;font-size:2.4vh;animation:.4s cubic-bezier(.2,1.6,.4,1) both pop;position:absolute;top:-1vh;right:-3vh;transform:rotate(12deg)}.reel-tv,.over-tv{grid-template-rows:auto minmax(0,1fr) auto;gap:2.6vh;display:grid}.reel-tv header,.over-tv header{justify-content:space-between;align-items:center;gap:2vw;display:flex}.reel-tv header .h2{align-items:center;gap:1vw;font-size:4.4vh;display:flex}.reel-tv header .label{font-size:2vh}.stage{grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);align-items:center;gap:2.4vw;min-height:0;display:grid}.stage.solo{grid-template-columns:minmax(0,1fr);justify-items:center}.stage .entry{padding:1.4vh}.stage .entry figcaption{margin-bottom:1.2vh}.stage .who{font-size:2.4vh}.stage .who .blob{width:3.6vh!important;height:3.6vh!important;font-size:1.8vh!important}.stage .was{justify-self:end}.stage .was .entry{transform:rotate(-2.5deg)}.stage .was .paper{width:44vh}.stage .was .said{max-width:34vw;font-size:4.6vh}.stage .now{justify-self:start;animation:.6s cubic-bezier(.2,1.4,.4,1) both deal}.stage .now .entry{transform:rotate(1.5deg)}.stage .now .paper{width:60vh}.stage .now .said{max-width:44vw;font-size:6.6vh}.stage.solo .now{justify-self:center}.stage.solo .now .said{text-align:center;max-width:70vw;padding:2vh 3vw;font-size:9vh}.arrow{font-family:var(--display);color:var(--yellow);font-size:10vh}.reel-tv footer{justify-content:space-between;align-items:center;gap:2vw;display:flex}.film{background:#0b0915;border-top:6px dotted #3a3260;border-bottom:6px dotted #3a3260;border-radius:10px;gap:.8vw;margin:0;padding:.8vh;list-style:none;display:flex}.film li{background:#241e3d;border-radius:6px;place-items:center;width:5.4vh;height:5.4vh;transition:transform .2s;display:grid}.film li .blob{border-width:2px;width:3.8vh!important;height:3.8vh!important;font-size:1.9vh!important}.film .hole{background:#3a3260;border-radius:50%;width:1.4vh;height:1.4vh}.film li.at{background:var(--yellow);transform:scale(1.12);box-shadow:0 0 18px #ffd23f99}.reel-tv .remote{width:34vw}.over-tv header .mega{font-size:7vh}.posters{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));align-content:start;gap:2.4vh 1.6vw;margin:0;padding:1vh .4vw 2vh;list-style:none;display:grid;overflow-y:auto}.poster{color:var(--ink);transform:rotate(var(--r));flex-direction:column;gap:.8vh;display:flex}.poster .from{font-family:var(--display);margin:0;font-size:2.6vh;font-weight:800;line-height:1.1}.poster .to .entry{box-shadow:none}.poster .to .paper{width:min(100%,26vh)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.kick{min-width:34px;min-height:34px;color:var(--ink);background:#1e1b2e17;border:0;border-radius:999px;padding:0 9px;font-size:14px;font-weight:900;line-height:1}.kick.yes{background:var(--pink);color:#fff}.kick-ask{align-items:center;gap:6px;font-size:14px;font-weight:900;display:inline-flex}.tv .kick{min-width:3.4vh;min-height:3.4vh;font-size:1.8vh}.tv .kick-ask{flex-wrap:wrap;justify-content:center;font-size:2vh}.wall li,.desks li{position:relative}.wall li>.kick,.desks li>.kick{opacity:.6;position:absolute;top:0;right:0}.desks li>.kick{left:0;right:auto}.players li{flex-wrap:wrap}.kick{white-space:nowrap}.desks li .tag-left{text-transform:uppercase;color:var(--dim);font-size:1.8vh;font-weight:900}.modal{z-index:45;background:#1e1b2e8c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal .card{flex-direction:column;gap:12px;width:min(420px,100%);display:flex}.howto-art{background:#1e1b2e0f;border-radius:12px;place-items:center;height:180px;padding:10px;display:grid;overflow:hidden}.howto-art .paper{aspect-ratio:1;border-width:2px;width:auto;height:100%}.howto-art .said{text-align:center;font-size:24px}.passing{font-family:var(--display);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:26px;font-weight:900;display:flex}.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2vw;margin:0;padding:0;list-style:none;display:grid}.steps li{color:var(--ink-2);flex-direction:column;gap:1vh;font-size:2vh;font-weight:800;display:flex}.steps .howto-art{height:14vh;padding:.8vh}.steps .howto-art .said{font-size:2.2vh}.steps .passing{font-size:2.4vh}.steps .passing .blob{width:4vh!important;height:4vh!important;font-size:2vh!important}.steps b{color:var(--ink)}.center-text{text-align:center}.page{position:relative}.page:not(.night):not(.center):before{content:"";pointer-events:none;background:radial-gradient(circle at 11px 16px,#1e1b2e8c 3.5px,#0000 4.2px) 0 0/22px 22px repeat-x,linear-gradient(90deg,#0000 8px,#5c5774 8px,#c9c4d8 10px,#5c5774 13px,#0000 13px) 0 -6px/22px 20px repeat-x;height:22px;position:absolute;top:0;left:0;right:0}.page:not(.night):not(.center){padding-top:max(26px, env(safe-area-inset-top))}.flip{transform-origin:50% 0;animation:.62s cubic-bezier(.2,.75,.25,1) backwards flipin}@keyframes flipin{0%{opacity:0;transform:perspective(1600px)rotateX(-70deg)}55%{opacity:1}}.hl{background-repeat:no-repeat;background-size:100% 100%;animation:.6s ease-out .55s backwards hl}@keyframes hl{0%{background-size:0% 100%}}@keyframes ink-in{0%{clip-path:inset(-12px 100% -12px -12px)}to{clip-path:inset(-12px)}}.logo span{animation:drop .5s calc(.1s + var(--i) * 60ms) cubic-bezier(.2, 1.6, .4, 1) backwards, wobble 2.4s ease-in-out var(--d) infinite;translate:0}@keyframes drop{0%{opacity:0;translate:0 -.7em}}.btn{transition:transform .12s,box-shadow .12s;position:relative}@media (hover:hover){.btn:hover:not(:disabled){box-shadow:0 7px 0 var(--ink);transform:translateY(-2px)rotate(-.4deg)}}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(4px)scale(1.02,.96)}.btn.big{font-family:var(--display);overflow:hidden}.btn.big:not(:disabled):after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000 30%,#fff6 45%,#0000 60%);animation:3.6s ease-in-out 1.6s infinite sheen;position:absolute;inset:0;transform:translate(-120%)}@keyframes sheen{40%,to{transform:translate(120%)}}.corner{z-index:3;top:max(28px, env(safe-area-inset-top));pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;left:16px;right:16px}.corner>*{pointer-events:auto}.tv .corner{top:2.4vh;left:2vw;right:2vw}.hub{flex:none;display:inline-flex}.top .kick,.corner .kick{min-width:44px;min-height:44px;font-size:17px}.top{gap:6px}.top .mini-logo{font-size:20px}.top .code-chip{letter-spacing:.08em;padding:4px 8px}.doodles{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.doodles svg{transform:rotate(var(--r));animation:idle 5s calc(var(--i) * -.7s) ease-in-out infinite;position:absolute}.doodles path{stroke-dasharray:1;stroke-dashoffset:1px;animation:draw-in .9s calc(.35s + var(--i) * .2s) ease-out forwards}@keyframes draw-in{to{stroke-dashoffset:0}}@keyframes idle{50%{transform:rotate(calc(var(--r) * -1)) translateY(-6px)}}.page.landing{text-align:center;padding-top:max(84px, env(safe-area-inset-top));align-items:center;gap:18px;overflow:hidden}.landing .hero{z-index:1;flex-direction:column;align-items:center;gap:8px;display:flex;position:relative}.landing .menu{z-index:1;flex-direction:column;gap:12px;width:100%;max-width:420px;display:flex;position:relative}.landing .menu>*{animation:ink-in .55s calc(.7s + var(--i) * .14s) cubic-bezier(.3, .7, .2, 1) backwards}.btn.big.cta{flex-direction:column;justify-content:center;align-items:center;min-height:88px;font-size:32px;line-height:1;display:flex}.cta small{font-family:var(--font);opacity:.9;margin-top:6px;font-size:14px;font-weight:800;display:block}.joinrow{gap:10px;display:flex}.joinrow .btn{flex:none;width:112px}.duo{grid-template-columns:1fr 1fr;gap:10px;display:grid}.duo .btn{padding:0 10px;font-size:18px}.sketch{background:#fff;border-radius:4px;width:min(56vw,210px);margin:6px 0 4px;padding:9px 9px 8px;position:relative;transform:rotate(-3deg);box-shadow:0 12px 26px #1e1b2e2e,0 2px #1e1b2e33}.sketch:before{content:"";background:#ffd23fb3;width:84px;height:24px;position:absolute;top:-12px;left:50%;translate:-50%;rotate:4deg}.sketch .paper{border:0;border-radius:2px}.sketch figcaption{font-family:var(--display);color:var(--ink-2);margin-top:6px;font-size:19px;font-weight:700;animation:.5s ease-out 2.4s backwards ink-in}.page.join{text-align:center;gap:10px}.spot{background:radial-gradient(closest-side,#ffd23f99,#ffd23f00 80%);place-items:center;height:200px;display:grid;position:relative}.spot .shadow{background:#1e1b2e29;border-radius:50%;width:116px;height:16px;position:absolute;bottom:14px}.hero-blob{z-index:1;animation:.6s cubic-bezier(.2,1.4,.4,1) both hop;display:inline-block;position:relative}.hero-blob .blob{box-shadow:inset -12px -14px 0 #0000001f, inset 10px 10px 0 #ffffff47, 0 6px 0 var(--ink);border-width:5px;animation:2.6s ease-in-out infinite breathe}@keyframes hop{30%{transform:translateY(-36px)scale(.9,1.1)}60%{transform:translateY(0)scale(1.14,.86)}80%{transform:scale(.97,1.03)}}@keyframes breathe{50%{transform:scale(1.04,.97)translateY(2px)}}.blob.face{position:relative;overflow:hidden}.blob .eye{background:radial-gradient(circle at 55% 62%, var(--ink) 0 40%, #fff 43%);border-radius:50%;width:22%;height:26%;animation:4.2s infinite blink;position:absolute;top:30%}.blob .eye:first-child{left:24%}.blob .eye:nth-child(2){right:24%}.blob .grin{background:var(--ink);border-radius:0 0 99px 99px;width:28%;height:14%;position:absolute;top:58%;left:36%}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.namecard{background:var(--yellow);border-radius:4px 16px 6px 12px;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:10px 12px 14px 16px;display:grid;position:relative;rotate:-1.2deg;box-shadow:0 10px 22px #1e1b2e24}.namecard .label{color:var(--ink-2);grid-column:1/-1}.namefield{text-align:center;min-height:50px;font-family:var(--display);background:linear-gradient(transparent calc(100% - 3px), var(--ink) 0) no-repeat;border:0;border-radius:0;padding:0 6px;font-size:30px}.dicebtn{width:54px;height:54px;box-shadow:0 4px 0 var(--ink);background:#fff;border:0;border-radius:16px;font-size:26px;transition:transform .15s}.dicebtn:hover{transform:rotate(-12deg)scale(1.06)}.dicebtn:active{transform:rotate(20deg)scale(.94)}.paints{grid-template-columns:repeat(6,1fr);gap:12px 10px;padding:8px 4px 6px;display:grid}.paint{aspect-ratio:1;background:radial-gradient(circle at 32% 28%, #fffc 0 11%, transparent 13%), radial-gradient(circle at 45% 40%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%);box-shadow:0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 7px 12px #1e1b2e29;animation:pop .45s calc(.2s + var(--i) * 35ms) cubic-bezier(.2, 1.6, .4, 1) backwards;border:0;border-radius:58% 42% 52% 48%/46% 56% 44% 54%;padding:0;transition:transform .2s cubic-bezier(.2,1.6,.4,1),opacity .2s,box-shadow .2s}.paint:nth-child(3n+2){border-radius:44% 56% 40% 60%/58% 42%}.paint:nth-child(3n){border-radius:52% 48% 61% 39%/41% 52% 48% 59%}.paints:has([aria-checked=true]) .paint:not([aria-checked=true]):not(:disabled){opacity:.6;transform:scale(.88)}.paint[aria-checked=true]{box-shadow:0 6px 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 26px var(--c);transform:translateY(-8px)scale(1.2)rotate(-6deg)}.paint:disabled{opacity:.14;transform:scale(.7)}.page.lobby{gap:16px}.invite{text-align:center;background:#fff;border-radius:6px 18px 8px 16px;padding:18px 16px 16px;animation:.6s ease-out .25s backwards ink-in;position:relative;rotate:-.8deg;box-shadow:0 12px 28px #1e1b2e24,0 2px #1e1b2e2e}.invite:before{content:"";background:#2e5bff47;width:96px;height:24px;position:absolute;top:-11px;left:50%;translate:-50%;rotate:-3deg}.tiles{flex-direction:column;align-items:center;gap:6px;margin:0;display:flex}.tilerow{gap:9px;display:flex}.tilerow b{width:60px;height:68px;font-family:var(--display);color:#fff;background:var(--pink);box-shadow:0 5px 0 var(--ink);animation:pop .5s calc(.35s + var(--i) * 90ms) cubic-bezier(.2, 1.6, .4, 1) backwards;border-radius:14px;place-items:center;font-size:44px;font-weight:900;display:grid;rotate:-4deg}.tilerow b:nth-child(2){background:var(--blue);rotate:3deg}.tilerow b:nth-child(3){background:var(--green);rotate:-2deg}.tilerow b:nth-child(4){background:#ff7a1f;rotate:5deg}.invite-row{text-align:left;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px;margin-top:14px;display:grid}.invite .qr{width:112px;height:112px}.invite .lede{font-size:15px;line-height:1.35}.invite .btn{min-height:50px;font-size:18px}.crowd ul{flex-wrap:wrap;justify-content:center;gap:14px 16px;margin:10px 0 0;padding:0;list-style:none;display:flex}.crowd li{width:84px;rotate:var(--r);flex-direction:column;align-items:center;gap:4px;animation:.5s cubic-bezier(.2,1.6,.4,1) backwards pop;display:flex;position:relative}.crowd li .blob:not(.ghost){box-shadow:0 4px 0 var(--ink);border-width:3px}.crowd .nm{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-family:var(--display);font-size:17px;font-weight:800;overflow:hidden}.crowd em{white-space:nowrap;background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;font-size:14px;font-style:normal;font-weight:900}.crowd li.gone{opacity:.45}.crowd li.empty{color:var(--dim)}.crowd li.empty .ghost{width:64px;height:64px}.crowd li>.kick{min-width:30px;min-height:30px;position:absolute;top:-8px;right:-2px}.crowd .kick-ask{z-index:4;background:#fff;border-radius:12px;flex-direction:column;padding:8px;position:absolute;top:100%;box-shadow:0 8px 20px #1e1b2e33}@media (width>=720px){body:not(:has(.tv)):not(:has(.night)){background-color:#1e6b52;background-image:linear-gradient(#ffffff17 1px,#0000 1px),linear-gradient(90deg,#ffffff17 1px,#0000 1px),linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:130px 130px,130px 130px,26px 26px,26px 26px}.page:not(.night){background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:26px 26px;border-radius:8px 8px 18px 18px;max-width:580px;min-height:calc(100dvh - 56px);margin:28px auto;padding:40px 34px 30px;box-shadow:0 30px 70px #00000059,0 3px #e8dcc4,0 6px #d9cbb0}.page:not(.night) .dock{background:linear-gradient(transparent, var(--paper) 22px)}.page.landing{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"logo sketch""tag sketch""menu sketch";align-content:center;gap:18px 56px;max-width:1060px;padding:90px 70px 70px;display:grid}.landing .hero{display:contents}.landing .logo{grid-area:logo;align-self:end}.landing .tag{grid-area:tag;font-size:28px}.landing .menu{grid-area:menu;justify-self:center}.landing .sketch{grid-area:sketch;justify-self:center;width:360px;transform:rotate(3deg)}.landing .sketch figcaption{font-size:26px}.landing .corner{top:34px;left:34px;right:34px}.doodles svg{scale:1.3}}@media (width<=719px){.doodles{opacity:.55}.doodles svg{scale:.62}}.page.join>:not(.doodles):not(.dock),.page.lobby>:not(.doodles):not(.dock){z-index:1;position:relative}.doodles.few svg:nth-child(odd){display:none}.tv.lobby{padding-top:10vh;position:relative}.tv.lobby>section{z-index:1;position:relative}.badge{border-radius:50%;line-height:0;position:absolute;top:40px;left:6px;box-shadow:0 3px 8px #1e1b2e4d}.wall li .badge{top:7vh;left:auto;right:0}.badge svg{border-radius:50%;display:block}.invite-friends{min-height:46px;font-size:16px}.tv .invite-friends{margin-top:1vh}.stp:empty{display:none}.stp{margin-top:1.2vh}.page.draw{height:100dvh;min-height:0;padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right));gap:8px;overflow:hidden}.drawtop{align-items:center;gap:8px}.drawtop .brief{min-width:0;min-height:52px;box-shadow:0 3px 0 var(--ink);align-items:center;padding:5px 12px 7px;display:flex;transform:rotate(-.6deg)}.drawtop .prompt{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:21px;display:-webkit-box;overflow:hidden}.page.draw .pad{flex:1;min-height:0}.pad-area{flex:1;place-items:center;min-height:0;display:grid;container-type:size}.pad-area .canvas-wrap{width:min(100cqw,100cqh - 6px);min-width:0}.page.draw>.btn{flex:none;margin-bottom:2px}.top .hub{z-index:5;width:44px;position:relative}.page.lobby>.crowd:not(.doodles):not(.dock){z-index:3}.page.draw .ink{height:clamp(40px,5.6dvh,50px)}.page.draw .tool{height:clamp(48px,6.4dvh,56px)}.page.draw .tools{grid-template-columns:repeat(3,clamp(48px,6.4dvh,56px)) 1fr 1fr}.crowd li>.kick:after{content:"";position:absolute;inset:-7px}.modal{padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));overflow-y:auto}.page.join .dock{margin-top:4px}@media (width>=720px){.page.draw{height:calc(100dvh - 56px);min-height:0}}@media (height<=720px) and (width<=719px){.page.landing{gap:10px}.sketch{width:min(40vw,150px);margin:2px 0 0}.sketch figcaption{font-size:16px}.page.join .h1{font-size:32px}.spot{height:150px}.spot .hero-blob{scale:.74}.spot .shadow{bottom:10px}.paints{gap:8px 10px}}