:root{--floor:#d9cfa5;--floor-bottom:#bbb186;--ink:#2a2620;--ink-soft:#5b5442;--paper:#f3eedd;--tile:#262626;--tile-edge:#0f0f0f;--tile-letter:#f3eedd;--accent:#3f9d94;--accent-dark:#2f7f77}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:var(--floor-bottom);margin:0;font-family:Cormorant Garamond,Georgia,serif}#root{min-height:100vh;overflow:clip}main{text-align:center;max-width:980px;margin:0 auto;padding:56px 20px 96px}h1{letter-spacing:-.01em;max-width:16em;margin:0 auto 36px;font-size:clamp(3rem,5vw,4rem);font-weight:500;line-height:1.1}.sub-header{font-size:1.5rem}.logo{position:relative}.logo:before{content:"";z-index:-1;background:linear-gradient(to top, color-mix(in srgb, var(--floor), black 13%), color-mix(in srgb, var(--floor), black 20%) 400px);width:100vw;position:absolute;top:-3000px;bottom:54%;left:calc(50% - 50vw)}.logo:after{content:"";z-index:-1;background:linear-gradient(var(--floor), var(--floor-bottom));width:100vw;height:600px;position:absolute;top:46%;left:calc(50% - 50vw)}.logo{--hop:27;--dur:.7s;margin:56px auto 36px}.logo svg{width:100%;height:auto;display:block;overflow:visible}.logo .hop{transform-box:fill-box;transform-origin:50% 100%;cursor:pointer}.logo .hop.go{animation:logo-hop var(--dur) cubic-bezier(.3,.6,.4,1) both;animation-delay:var(--d,0s)}@keyframes logo-hop{0%{transform:translateY(0)scale(1)}15%{transform:translateY(0)scale(1.04,.93)}50%{transform:translateY(calc(var(--hop) * -1px)) scale(.98, 1.03)}80%{transform:translateY(0)scale(1.04,.94)}to{transform:translateY(0)scale(1)}}.logo .shadow{transform-box:fill-box;transform-origin:50%}.logo .shadow.go{animation:logo-shadow var(--dur) cubic-bezier(.3,.6,.4,1) both;animation-delay:var(--d,0s)}@keyframes logo-shadow{15%,80%{opacity:.6;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.composer{max-width:640px;margin:0 auto}.field{position:relative}textarea,.from{resize:vertical;width:100%;min-height:150px;font:inherit;color:var(--ink);background:var(--paper);border:0;border-radius:10px;padding:18px 20px 44px;font-size:1.3rem;transition:box-shadow .2s,border-color .2s;display:block;box-shadow:0 8px 24px #2a26201f,inset 0 1px #fff9}textarea::placeholder,.from::placeholder{color:var(--ink-soft);opacity:.8}textarea:focus,.from:focus{box-shadow:0 8px 24px #2a262029, 0 0 0 2px var(--accent);outline:none}.from{min-height:0;margin-top:10px;padding:12px 20px;font-size:1.15rem}.composer-row{margin-top:14px}.count{pointer-events:none;color:var(--ink-soft);font-size:1.05rem;position:absolute;bottom:12px;right:20px}.send{font:inherit;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);cursor:pointer;box-shadow:0 4px 0 var(--accent-dark), 0 8px 16px #00000026;border:0;border-radius:8px;padding:12px 28px;font-size:1.1rem;text-decoration:none;transition:transform 80ms,box-shadow 80ms,background .15s;display:inline-block}.send:hover{background:#48aea4}.send:active{box-shadow:0 1px 0 var(--accent-dark), 0 3px 8px #00000026;transform:translateY(3px)}.send:disabled{opacity:.5;cursor:not-allowed}.share{background:var(--paper);border-radius:10px;max-width:640px;margin:0 auto;padding:24px 28px;box-shadow:0 8px 24px #2a26201f}.share h2{outline:none;margin:0;font-size:2rem;font-weight:500}.share p{color:var(--ink-soft);margin:4px 0 16px;font-size:1.2rem}.share-link{width:100%;color:var(--ink);background:#fff;border:0;border-radius:8px;padding:10px 14px;font:1rem ui-monospace,Menlo,monospace}.share-buttons{flex-wrap:wrap;justify-content:center;gap:12px;margin:18px 0 10px;display:flex}.secondary{font:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:2px solid var(--accent);cursor:pointer;background:0 0;border-radius:8px;padding:10px 24px;font-size:1.1rem;text-decoration:none}.secondary:hover{background:#3f9d941f}.link-button{font:inherit;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;font-size:1.05rem;text-decoration:underline}.preview-label{color:var(--ink);margin:56px 0 6px;font-size:1.25rem}.progress{color:var(--ink-soft);min-height:1.4em;margin:0 0 28px;font-size:1.05rem}.board{flex-wrap:wrap;justify-content:center;gap:14px 26px;min-height:120px;display:flex}.write-own{margin-top:36px}.word{gap:8px;display:inline-flex}.tile{--w:clamp(34px, 8vw, 62px);width:var(--w);height:calc(var(--w) * 1.4);perspective:700px;cursor:pointer;font:inherit;animation:.35s cubic-bezier(.2,.9,.3,1.3) backwards pop;animation-delay:calc(var(--i) * 18ms);-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}.tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}.tile-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.2,1);display:block;position:relative}.tile.flipped .tile-inner{transform:rotateY(180deg)}.tile:not(.flipped):hover .tile-inner{transform:translateY(-4px)rotateY(12deg)}.face{backface-visibility:hidden;background:linear-gradient(160deg, #363636 0%, var(--tile) 55%, #1b1b1b 100%);box-shadow:inset 0 0 0 1px #ffffff12, 0 4px 0 var(--tile-edge), 0 6px 6px #0000004d;border-radius:7px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.face.front:after{content:"";border:1px solid #ffffff0f;border-radius:4px;position:absolute;inset:6px}.face.back{color:var(--tile-letter);font-family:Montserrat,system-ui,sans-serif;font-weight:300;font-size:calc(var(--w) * .78);text-transform:uppercase;transform:rotateY(180deg)}.tile.flipped{cursor:default}.empty{color:var(--ink-soft);align-self:center;font-size:1.15rem}@keyframes pop{0%{opacity:0;transform:translateY(14px)scale(.9)}to{opacity:1;transform:none}}.buddy{width:120px;height:171px;margin:14px auto 0;position:relative}.buddy-art,.buddy svg{width:100%;height:100%;display:block;overflow:visible}.buddy :is(#buddy-fig,.look){transform-box:view-box;transform-origin:393px 266px}.buddy .look{transform:rotate(var(--tilt,0deg));transition:transform .25s ease-out}.buddy .pupil{transform:translate(var(--px,0px), var(--py,0px));transition:transform .15s}.buddy :is(#buddy-eye-l,#buddy-eye-r){transform-box:fill-box;transform-origin:50%;transition:transform .2s}.buddy[data-state=idle] :is(#buddy-eye-l,#buddy-eye-r){animation:5s infinite blink}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}.buddy[data-state=sleepy] :is(#buddy-eye-l,#buddy-eye-r){transform:scaleY(.12)}.buddy #buddy-shadow{transform-box:fill-box;transform-origin:50%}.buddy :is(#buddy-arm-l,#buddy-arm-r){transform-box:fill-box;transition:transform .25s cubic-bezier(.3,.7,.3,1.2)}.buddy #buddy-arm-l{transform-origin:87% 4%}.buddy #buddy-arm-r{transform-origin:22% 5%}.buddy[data-state=hop] #buddy-arm-l{transform:rotate(28deg)}.buddy[data-state=hop] #buddy-arm-r{transform:rotate(-28deg)}.buddy[data-state=shrug] #buddy-arm-l{transform:rotate(38deg)}.buddy[data-state=shrug] #buddy-arm-r{transform:rotate(-38deg)}.buddy[data-state=idle] #buddy-fig{animation:2.8s ease-in-out infinite breathe}@keyframes breathe{50%{transform:scaleY(1.02)}}.buddy[data-state=hop] #buddy-fig{animation:.5s cubic-bezier(.3,.7,.4,1) hop}.buddy[data-state=hop] #buddy-shadow{animation:.5s cubic-bezier(.3,.7,.4,1) shadow-hop}@keyframes hop{0%{transform:scale(1.06,.94)}35%{transform:translateY(-30px)scale(.97,1.04)}70%{transform:translateY(0)scale(1.06,.94)}to{transform:none}}@keyframes shadow-hop{35%{opacity:.6;transform:scale(.7)}}.buddy[data-state=cheer] #buddy-fig{animation:.7s .3s cheer-jump}.buddy[data-state=cheer] .look{animation:.7s .3s spin}.buddy[data-state=cheer] #buddy-shadow{animation:.7s ease-in-out .3s shadow-lift}.buddy[data-state=cheer] #buddy-arm-l{animation:.7s ease-in-out .3s cheer-arm-l}.buddy[data-state=cheer] #buddy-arm-r{animation:.7s ease-in-out .3s cheer-arm-r}@keyframes cheer-jump{0%{animation-timing-function:ease-out;transform:translateY(0)}50%{animation-timing-function:ease-in;transform:translateY(-34px)}to{transform:translateY(0)}}@keyframes spin{0%{animation-timing-function:ease-in;transform:scaleX(1)}25%{animation-timing-function:ease-out;transform:scaleX(0)}50%{animation-timing-function:ease-in;transform:scaleX(-1)}75%{animation-timing-function:ease-out;transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes shadow-lift{50%{opacity:.5;transform:scale(.65)}}@keyframes cheer-arm-l{20%,75%{transform:rotate(135deg)}}@keyframes cheer-arm-r{20%,75%{transform:rotate(-135deg)}}.buddy[data-state=shrug] #buddy-fig{animation:1.2s ease-in-out shrug}@keyframes shrug{0%,to{transform:rotate(0)}30%{transform:rotate(-6deg)scaleY(.96)}65%{transform:rotate(5deg)scaleY(.96)}}.buddy[data-state=sleepy] #buddy-fig{transform-origin:455px 266px;animation:4s ease-in-out infinite sleepy}@keyframes sleepy{0%,to{transform:rotate(5deg)}50%{transform:rotate(8deg)}}.bubble{background:var(--paper);white-space:nowrap;opacity:0;pointer-events:none;border-radius:14px;margin-left:8px;padding:6px 14px;font-size:1.1rem;transition:opacity .2s,transform .2s;position:absolute;top:14px;left:100%;transform:translate(-6px);box-shadow:0 4px 12px #2a262026}.bubble:before{content:"";border:6px solid #0000;border-right-color:var(--paper);border-left:0;position:absolute;top:12px;left:-6px}.bubble.show{opacity:1;transform:none}.confetti{pointer-events:none;position:absolute;top:35%;left:50%}.confetti span{background:var(--c);opacity:0;width:7px;height:11px;animation:confetti 1.4s var(--d) forwards;border-radius:1px;margin:-5px 0 0 -3px;position:absolute}@keyframes confetti{0%{opacity:1;animation-timing-function:ease-out;transform:translate(0)rotate(0)}35%{opacity:1;transform:translate(var(--x), var(--y)) rotate(calc(var(--r) * .4));animation-timing-function:ease-in}to{opacity:0;transform:translate(calc(var(--x) * 1.4), 140px) rotate(var(--r))}}@media (prefers-reduced-motion:reduce){.tile,.tile-inner,.logo .hop.go,.logo .shadow.go,.buddy :is(#buddy-fig,#buddy-shadow,.look,#buddy-arm-l,#buddy-arm-r,#buddy-eye-l,#buddy-eye-r){transition:none;animation:none!important}.confetti{display:none}}