html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;height:100%;overflow:hidden}body{background:var(--ink);color:var(--paper)}#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex;position:fixed;inset:0}.pad,.bar,.btn,.dpad,.swatch,.chip,.pill{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input{font:inherit;font-size:16px}.join{-webkit-overflow-scrolling:touch;color:var(--ink);background:radial-gradient(130% 80% at 80% 0,#f7d7a8 0%,#e9b98a 55%,#c98a5c 100%);flex-direction:column;flex:1;gap:14px;width:100%;padding:18px 16px 28px;display:flex;overflow:auto}.join>*{width:100%;max-width:560px;animation:enter var(--dur-enter) var(--ease-out) both;margin-inline:auto}.join>:nth-child(2){animation-delay:40ms}.join>:nth-child(3){animation-delay:80ms}.join>:nth-child(4){animation-delay:.12s}.join>:nth-child(n+5){animation-delay:.16s}.join .logo{align-items:baseline;gap:8px;font-size:2.4rem;display:flex}.join .logo .plate{box-shadow:0 4px 0 var(--ink);font-size:2rem;transform:skew(-6deg)}.field label,.row-label{letter-spacing:.08em;text-transform:uppercase;color:#5b4a3a;margin-bottom:6px;font-size:.75rem;font-weight:800;display:block}.field input{border:3px solid var(--ink);background:var(--paper);width:100%;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color var(--dur-fast) var(--ease-out);border-radius:14px;padding:10px 12px;font-weight:800}.field input:focus{border-color:var(--royal);outline:none}.field input.code{font-family:var(--font-display);letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;text-align:center;padding:4px 12px;font-size:2rem}.error-text{color:#9b1c0c;text-wrap:pretty;min-height:1.4em;font-size:.95rem}.editor{grid-template-columns:112px 1fr;align-items:start;gap:10px 14px;padding:12px;display:grid}.editor .preview{flex-direction:column;align-items:center;gap:8px;display:flex;position:sticky;top:0}.swatches{flex-wrap:wrap;gap:6px;display:flex}.swatch{width:32px;height:32px;transition-property:transform,box-shadow;transition-duration:var(--dur-press);transition-timing-function:var(--ease-out);border:0;border-radius:50%;padding:0;box-shadow:inset 0 0 0 1px #0000002e}.swatch:active{transform:scale(.92)}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--ink)}.chip{border:2px solid var(--ink);background:var(--paper);transition-property:background-color,transform;transition-duration:var(--dur-press);transition-timing-function:var(--ease-out);border-radius:999px;padding:5px 12px;font-size:.85rem}.chip:active{transform:scale(.96)}.chip[aria-pressed=true]{background:var(--sun)}.bar{background:#0c0c0c;align-items:center;gap:8px;min-height:36px;padding:6px 12px;font-size:.85rem;display:flex;box-shadow:0 1px #ffffff0f}.bar .who{text-overflow:ellipsis;white-space:nowrap;font-weight:900;overflow:hidden}.bar .spacer{flex:1}.bar .code{font-family:var(--font-display);color:var(--sun);letter-spacing:.1em;font-size:1.05rem}.banner{background:var(--red);color:#fff;text-align:center;animation:fade-in .2s var(--ease-out) both;padding:6px 12px;font-size:.9rem}.view{flex:1;min-height:0;position:relative}.center-card{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;display:flex;position:absolute;inset:0}.center-card>*,.center-card.split>div>*{animation:enter var(--dur-enter) var(--ease-out) both}.center-card>:nth-child(2),.center-card.split>div>:nth-child(2){animation-delay:60ms}.center-card>:nth-child(3),.center-card.split>div>:nth-child(3){animation-delay:.12s}.center-card>:nth-child(n+4),.center-card.split>div>:nth-child(n+4){animation-delay:.18s}.center-card .big{font-family:var(--font-display);letter-spacing:-.01em;color:var(--sun);text-wrap:balance;font-variant-numeric:tabular-nums;font-size:clamp(2.4rem,11vw,4.6rem);font-style:italic;line-height:1}.center-card .mid{text-wrap:balance;font-size:1.15rem}.center-card .small{opacity:.75;text-wrap:pretty;max-width:34ch;font-size:.95rem}.center-card img.results{outline-offset:-1px;max-width:80vw;max-height:46vh;box-shadow:var(--shadow-lg);border-radius:12px;outline:1px solid #ffffff1a}@media (orientation:landscape) and (height<=500px){.center-card.split{flex-direction:row;gap:24px}.center-card img.results{max-height:72vh}}.pad{touch-action:none;grid-template-columns:1fr minmax(0,1.5fr) 1fr;grid-template-areas:"stick screen buttons";gap:12px;padding:12px;display:grid;position:absolute;inset:0}.rotate-hint{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:none;position:absolute;inset:0}.rotate-hint .big{font-family:var(--font-display);color:var(--sun);font-size:2.6rem;font-style:italic;line-height:1}.rotate-hint .small{opacity:.75;text-wrap:pretty;max-width:26ch}.rotate-icon{border:4px solid var(--paper);width:56px;height:92px;animation:rotate-phone 2.4s var(--ease-in-out) infinite;border-radius:12px;position:relative}.rotate-icon:after{content:"";background:var(--paper);border-radius:2px;width:14px;height:4px;position:absolute;bottom:6px;left:50%;translate:-50%}@keyframes rotate-phone{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media (orientation:portrait){.pad{display:none}.rotate-hint{display:flex}}@media (prefers-reduced-motion:reduce){.rotate-icon{animation:none;transform:rotate(-90deg)}}.stick-zone{touch-action:none;background:#ffffff09;border-radius:22px;grid-area:stick;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffff12}.stick-zone .hint{text-align:center;letter-spacing:.08em;text-transform:uppercase;opacity:.45;pointer-events:none;font-size:.75rem;position:absolute;inset:auto 0 12px}.stick-base,.stick-knob{pointer-events:none;border-radius:50%;position:absolute;translate:-50% -50%}.stick-base{background:#ffffff12;width:130px;height:130px;box-shadow:inset 0 0 0 3px #fff3}.stick-knob{background:var(--sun);border:3px solid var(--ink);width:64px;height:64px;box-shadow:0 4px #00000080}.dpad{aspect-ratio:1;grid-area:stick;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:4px;width:min(100%,220px);max-width:100%;max-height:100%;margin:auto;display:grid}.dpad button{border:3px solid var(--ink);touch-action:none;transition-property:transform,box-shadow,background-color;transition-duration:var(--dur-press);transition-timing-function:var(--ease-out);background:#3a3a3a;border-radius:14px;font-size:1.4rem;box-shadow:0 4px #000}.dpad button.down-state{background:var(--sun);color:var(--ink);transform:translateY(3px);box-shadow:0 1px #000}.screen-wrap{box-shadow:inset 0 0 0 3px #333, var(--shadow-md);background:#2b2622;border-radius:18px;grid-area:screen;min-height:0;position:relative;overflow:hidden}.screen-wrap canvas{touch-action:none;width:100%;height:100%;position:absolute;inset:0}.buttons{grid-area:buttons;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;place-items:center;gap:10px;display:grid;position:relative}.btn{--face:var(--sun);aspect-ratio:1;border:4px solid var(--ink);background:var(--face);width:min(100%,120px);color:var(--ink);font-family:var(--font-display);letter-spacing:.03em;touch-action:none;transition-property:transform,box-shadow;transition-duration:var(--dur-press);transition-timing-function:var(--ease-out);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;font-size:clamp(.95rem,3.6vw,1.35rem);line-height:1;display:flex;box-shadow:0 6px #000}.btn small{font-family:var(--font-ui);opacity:.65;margin-top:2px;font-size:.7em;font-weight:900}.btn.down-state{transform:translateY(5px)scale(.96);box-shadow:0 1px #000}.btn.a{grid-area:2/2;width:min(100%,140px)}.btn.b{grid-area:1/1/span 2}.btn.c{grid-area:1/2}.toast-phone{background:var(--paper);color:var(--ink);z-index:10;box-shadow:var(--shadow-lg);animation:enter var(--dur-enter) var(--ease-out) both;border-radius:999px;padding:8px 14px;font-weight:900;position:absolute;bottom:14px;left:50%;translate:-50%}.sheet{z-index:50;animation:fade-in .24s var(--ease-out) both;background:#0000008c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet .inner{width:min(560px,100%);max-height:92dvh;color:var(--ink);padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);background:radial-gradient(130% 80% at 80% 0,#f7d7a8 0%,#e9b98a 100%);border-radius:24px 24px 0 0;flex-direction:column;gap:12px;animation:.32s cubic-bezier(.32,.72,0,1) both sheet-in;display:flex;overflow:auto}.sheet.closing{animation:fade-out .2s var(--ease-out) both}.sheet.closing .inner{animation:sheet-out .2s var(--ease-out) both}@keyframes sheet-in{0%{transform:translateY(100%)}}@keyframes sheet-out{to{transform:translateY(100%)}}@keyframes fade-out{to{opacity:0}}@media (prefers-reduced-motion:reduce){.sheet .inner{animation-name:fade-in}.sheet.closing .inner{animation-name:fade-out}.btn.down-state{transform:none}}