:root{--color-paper: oklch(97% .012 95);--color-paper-2: oklch(94% .016 95);--color-paper-3: oklch(91% .02 95);--color-ink: oklch(20% .012 250);--color-ink-soft: oklch(38% .015 250);--color-muted: oklch(48% .012 250);--color-rule: oklch(76% .018 95);--color-accent: oklch(86% .18 95);--color-accent-deep: oklch(65% .16 95);--color-accent-ink: oklch(20% .012 250);--color-accent-2: oklch(66% .18 235);--color-accent-2-soft: oklch(91% .055 235);--color-accent-3: oklch(68% .24 18);--color-accent-3-soft: oklch(92% .045 18);--color-mint: oklch(80% .16 150);--color-mint-soft: oklch(93% .04 150);--color-lavender: oklch(74% .16 305);--color-focus: oklch(42% .17 265);--color-error: oklch(44% .18 25);--color-ink-shadow: oklch(20% .012 250 / .28);--color-ink-shadow-soft: oklch(20% .012 250 / .24);--color-ink-shadow-strong: oklch(20% .012 250 / .34);--color-ink-cast: oklch(20% .012 250 / .18);--color-accent-cast: oklch(76% .2 95 / .45);--color-ice: oklch(98% .01 235 / .65);--color-tea: oklch(73% .07 65);--color-matcha: oklch(76% .11 135);--color-lemon: oklch(87% .16 102);--color-berry: oklch(72% .2 8);--color-coffee: oklch(48% .07 55);--color-taro: oklch(78% .1 310);--color-mango: oklch(80% .17 70);--color-soda: oklch(76% .13 225);--font-display: "Plus Jakarta Sans", "Arial Rounded MT Bold", sans-serif;--font-body: "Plus Jakarta Sans", "Arial Rounded MT Bold", sans-serif;--font-label: "JetBrains Mono", ui-monospace, monospace;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-md: 1.25rem;--text-lg: 1.5625rem;--text-xl: 1.953rem;--text-display: clamp(2.5rem, 7vw, 5rem);--radius-input: .75rem;--radius-card: 1.25rem;--radius-cup: 1.75rem;--radius-pill: 999px;--rule-thin: 1px;--rule-heavy: 2px;--dur-fast: .14s;--dur-base: .22s;--dur-slow: .42s;--dur-swap: .26s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-button: cubic-bezier(.2, .7, .3, 1);--page-gutter: clamp(1rem, 4vw, 3rem);--shell: 72rem}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{background:var(--color-paper)}body{min-width:20rem;color:var(--color-ink);background:var(--color-paper);font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;font-feature-settings:"ss01" on,"cv11" on;font-variant-numeric:tabular-nums}button,select{color:inherit;font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.nav-slab{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:4rem;padding:var(--space-sm) var(--page-gutter);border-bottom:var(--rule-heavy) solid var(--color-ink);background:var(--color-paper)}.nav-slab p{display:none;margin:0;font-family:var(--font-label);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase}.slab-mark{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-ink);font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}.logo-cup{position:relative;width:1.55rem;height:1.75rem;border:var(--rule-heavy) solid var(--color-ink);border-radius:.3rem .3rem .6rem .6rem;background:var(--color-accent-2);transform:rotate(-5deg);transition:transform var(--dur-base) var(--ease-spring)}.logo-cup:before{position:absolute;content:"";width:.18rem;height:.85rem;inset-block-start:-.65rem;inset-inline-start:.85rem;border-radius:var(--radius-pill);background:var(--color-ink);transform:rotate(8deg)}.logo-cup i{position:absolute;width:.28rem;height:.28rem;inset:auto auto .25rem .25rem;border-radius:50%;background:var(--color-ink);box-shadow:.42rem .1rem var(--color-ink),.78rem -.05rem var(--color-ink)}.slab-mark:hover .logo-cup{transform:rotate(4deg)}.page-shell{width:min(100%,var(--shell));margin-inline:auto;padding:var(--space-2xl) var(--page-gutter) var(--space-3xl)}.intro{display:grid;gap:var(--space-lg);align-items:end;padding-block:var(--space-lg) var(--space-2xl)}.mono-label{margin:0 0 var(--space-xs);color:var(--color-ink-soft);font-family:var(--font-label);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase}h1,h2,p{overflow-wrap:anywhere}h1,h2{min-width:0;margin:0;font-family:var(--font-display);font-style:normal;letter-spacing:-.04em}h1{max-width:11ch;font-size:var(--text-display);font-weight:700;line-height:1.04}h2{font-size:clamp(1.5rem,3vw,var(--text-xl));font-weight:700;line-height:1.15}.intro-copy{max-width:32rem;margin:0;color:var(--color-ink-soft);font-size:var(--text-md)}.game-card{position:relative;padding:var(--space-lg);border:var(--rule-heavy) solid var(--color-ink);border-radius:var(--radius-card);background:var(--color-paper-2);box-shadow:0 .5rem 0 var(--color-ink),0 1.25rem 2.5rem -1.5rem var(--color-ink-shadow)}.game-toolbar,.board-heading,.submit-row,.history-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md)}.game-toolbar{padding-block-end:var(--space-lg);border-bottom:var(--rule-thin) dashed var(--color-rule)}.field-group{display:grid;grid-template-columns:auto auto;align-items:center;gap:var(--space-xs) var(--space-sm)}.field-group label{font-weight:700}.field-group span{grid-column:1 / -1;color:var(--color-muted);font-size:var(--text-sm)}select{min-width:6.5rem;min-height:2.75rem;padding-inline:var(--space-sm) var(--space-xl);border:var(--rule-thin) solid var(--color-ink);border-radius:var(--radius-input);background:var(--color-paper);cursor:pointer;outline:2px solid transparent;outline-offset:1px}select:hover,select:active{background:var(--color-paper-3)}select[aria-invalid=true],select.is-error{border-color:var(--color-error)}select.is-success{border-color:var(--color-accent-deep)}select[data-state=loading]{cursor:progress}select:disabled{cursor:not-allowed;opacity:.5}.board-heading{align-items:end;padding-block:var(--space-xl) var(--space-sm)}.current-score{display:flex;align-items:baseline;color:var(--color-ink)}.current-score>span{color:var(--color-accent-3);font-family:var(--font-display);font-size:clamp(2.75rem,8vw,4.75rem);font-weight:700;line-height:.9}.current-score small{font-weight:600}.board-help{margin:0 0 var(--space-lg);color:var(--color-muted);font-size:var(--text-sm)}.drink-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);padding:0;margin:0;list-style:none}.drink-slot{position:relative;min-width:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}.drink-slot.is-reordering{transition:transform var(--dur-swap) var(--ease-in-out)}.drink-slot.is-drop-target{transform:translateY(-.25rem)}.position-number{position:absolute;z-index:2;inset-block-start:var(--space-xs);inset-inline-start:var(--space-xs);display:grid;width:1.75rem;height:1.75rem;place-items:center;border-radius:50%;color:var(--color-paper);background:var(--color-ink);font-family:var(--font-body);font-size:var(--text-xs)}.drink-token{display:grid;width:100%;min-height:9.5rem;padding:var(--space-lg) var(--space-sm) var(--space-sm);place-items:center;border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);color:var(--color-ink);background:var(--color-paper);box-shadow:0 .3rem 0 var(--color-rule),0 .75rem 1.5rem -1rem var(--color-ink-shadow-soft);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}.drink-token:active,.drink-token.is-dragging{z-index:3;cursor:grabbing;background:var(--color-accent-2-soft);box-shadow:0 .15rem 0 var(--color-accent-2),0 1rem 2rem -1rem var(--color-ink-shadow-strong);transform:translateY(-.45rem) rotate(-1deg);opacity:.92}.drink-token.is-just-moved{border-color:var(--color-accent-2);background:var(--color-accent-2-soft);box-shadow:0 .35rem 0 var(--color-accent-2),0 1rem 2rem -1rem var(--color-ink-shadow)}.drink-token.is-dropping{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}.drink-token:disabled{cursor:default;opacity:.72;transform:none}.drink-name{font-weight:700;white-space:nowrap}.drag-dots{color:var(--color-muted);font-family:var(--font-label);letter-spacing:.15em;line-height:1}.drink-cup{position:relative;display:block;width:3.35rem;height:4.6rem;margin-block-end:var(--space-xs);border:var(--rule-heavy) solid var(--color-ink);border-radius:.45rem .45rem var(--radius-cup) var(--radius-cup);background:var(--drink-color);overflow:visible}.drink-cup:before{position:absolute;content:"";inset:-.35rem -.25rem auto;height:.5rem;border:var(--rule-heavy) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-paper)}.drink-straw{position:absolute;z-index:-1;width:.35rem;height:2rem;inset-block-start:-1.75rem;inset-inline-start:2.15rem;border:var(--rule-heavy) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--straw-color, var(--color-accent-3));transform:rotate(8deg)}.drink-liquid{position:absolute;inset:1.15rem .2rem .2rem;border-radius:0 0 1.15rem 1.15rem;background:color-mix(in oklch,var(--drink-color) 55%,var(--color-ink))}.drink-topping{position:absolute;z-index:1}.drink-topping--pearls{width:.38rem;height:.38rem;inset:auto auto .45rem .45rem;border-radius:50%;background:var(--color-ink);box-shadow:.75rem .12rem var(--color-ink),1.45rem -.08rem var(--color-ink),1.9rem .12rem var(--color-ink)}.drink-topping--foam{width:2.4rem;height:.55rem;inset:.25rem auto auto .28rem;border-radius:var(--radius-pill);background:var(--color-paper)}.drink-topping--ice{width:.7rem;height:.7rem;inset:.65rem auto auto .45rem;border:var(--rule-thin) solid var(--color-ink-soft);border-radius:.2rem;background:var(--color-ice);box-shadow:.8rem .35rem var(--color-ice),1.55rem -.12rem var(--color-ice);transform:rotate(10deg)}.drink-topping--slice{width:1rem;height:1rem;inset:-.55rem -.25rem auto auto;border:var(--rule-heavy) solid var(--color-ink);border-radius:50%;background:var(--color-accent)}.drink-cup--tea{--drink-color: var(--color-tea)}.drink-cup--matcha{--drink-color: var(--color-matcha);--straw-color: var(--color-lavender)}.drink-cup--lemon{--drink-color: var(--color-lemon);--straw-color: var(--color-accent-2)}.drink-cup--berry{--drink-color: var(--color-berry);--straw-color: var(--color-accent)}.drink-cup--coffee{--drink-color: var(--color-coffee);--straw-color: var(--color-accent-2)}.drink-cup--taro{--drink-color: var(--color-taro);--straw-color: var(--color-accent)}.drink-cup--mango{--drink-color: var(--color-mango);--straw-color: var(--color-mint)}.drink-cup--soda{--drink-color: var(--color-soda);--straw-color: var(--color-accent-3)}.submit-row{margin-block-start:var(--space-xl);padding-block-start:var(--space-lg);border-top:var(--rule-thin) dashed var(--color-rule)}.game-status{flex:1 1 18rem;margin:0;color:var(--color-ink-soft);font-weight:500}.game-status.is-error{color:var(--color-error)}.game-status.is-success{color:var(--color-ink);font-weight:700}.btn{--btn-face: var(--color-accent);--btn-ink: var(--color-ink);--btn-edge: var(--color-accent-deep);--btn-cast: var(--color-accent-cast);--btn-line: var(--color-accent-deep);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:2.75rem;padding:.8rem 1.4rem;border:0;border-radius:var(--radius-pill);color:var(--btn-ink);background:var(--btn-face);box-shadow:0 4px 0 0 var(--btn-edge),0 6px 12px -3px var(--btn-cast);font-weight:600;cursor:pointer;transform:translateY(0);transition:transform var(--dur-fast) var(--ease-button),box-shadow var(--dur-fast) var(--ease-button),background-color var(--dur-fast) var(--ease-out);white-space:nowrap}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 var(--btn-edge),0 12px 22px -4px var(--btn-cast)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--btn-edge),0 2px 6px -2px var(--btn-cast);transition-duration:70ms}.btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.btn[disabled]{pointer-events:none;cursor:not-allowed;opacity:.5;box-shadow:0 4px 0 0 var(--btn-edge);transform:none}.btn[data-state=loading]{cursor:progress;opacity:.72}.btn.is-error{outline:3px solid var(--color-error)}.btn.is-success{background:var(--color-mint)}.btn--soft{--btn-face: var(--color-paper);--btn-edge: var(--color-rule);--btn-cast: var(--color-ink-cast);border:var(--rule-thin) solid var(--color-ink)}.btn--lg{min-height:3.25rem;padding-inline:var(--space-xl)}.star-burst{position:absolute;width:1.5rem;height:1.5rem;inset:-.75rem -.25rem auto auto;background:linear-gradient(90deg,transparent 47%,var(--color-accent-3) 47% 53%,transparent 53%),linear-gradient(0deg,transparent 47%,var(--color-accent-3) 47% 53%,transparent 53%);pointer-events:none;animation:star-burst var(--dur-slow) var(--ease-out) forwards}@keyframes star-burst{0%{opacity:1;transform:scale(0) rotate(0)}60%{opacity:.9;transform:scale(1.2) rotate(35deg)}to{opacity:0;transform:scale(1.4) rotate(45deg)}}.history-section{margin-block-start:var(--space-3xl)}.history-heading{padding-block-end:var(--space-md);border-bottom:var(--rule-heavy) solid var(--color-ink)}.attempt-count{padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--color-accent-2-soft);font-family:var(--font-body);font-size:var(--text-sm);white-space:nowrap}.history-empty{display:flex;align-items:center;gap:var(--space-md);min-height:8rem;padding-block:var(--space-lg);color:var(--color-muted)}.history-empty[hidden]{display:none}.history-empty p{margin:0}.empty-cup{width:2.5rem;height:3rem;border:var(--rule-heavy) dashed var(--color-rule);border-radius:.4rem .4rem 1rem 1rem;transform:rotate(5deg)}.history-list{display:grid;gap:var(--space-sm);padding:var(--space-md) 0 0;margin:0;list-style:none}.history-entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-md);align-items:center;min-height:4rem;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-input);background:var(--color-paper-2)}.history-entry.is-win{color:var(--color-ink);background:var(--color-mint-soft)}.history-number{font-family:var(--font-label);font-size:var(--text-sm)}.mini-order{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.mini-dot{width:1.25rem;height:1.25rem;border:var(--rule-thin) solid var(--color-ink);border-radius:50%;background:var(--dot-color)}.mini-dot--tea{--dot-color: var(--color-tea)}.mini-dot--matcha{--dot-color: var(--color-matcha)}.mini-dot--lemon{--dot-color: var(--color-lemon)}.mini-dot--berry{--dot-color: var(--color-berry)}.mini-dot--coffee{--dot-color: var(--color-coffee)}.mini-dot--taro{--dot-color: var(--color-taro)}.mini-dot--mango{--dot-color: var(--color-mango)}.mini-dot--soda{--dot-color: var(--color-soda)}.history-entry strong{font-size:var(--text-sm);white-space:nowrap}.foot-marquee{overflow:hidden;border-top:var(--rule-heavy) solid var(--color-ink);color:var(--color-ink);background:var(--color-paper-2)}.foot-marquee__track{display:flex;width:max-content;gap:var(--space-2xl);padding-block:var(--space-md);white-space:nowrap;animation:foot-marquee 32s linear infinite}.foot-marquee__track span{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.5rem);font-weight:700;letter-spacing:.04em}@keyframes foot-marquee{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--space-lg)))}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(hover:hover)and (pointer:fine){.drink-token:hover{background:var(--color-accent-2-soft);box-shadow:0 .45rem 0 var(--color-accent-2),0 1.1rem 2rem -1rem var(--color-ink-shadow);transform:translateY(-.25rem)}}@media(min-width:40rem){.nav-slab p{display:block}.page-shell{padding-block-start:var(--space-3xl)}.intro{grid-template-columns:minmax(0,1.35fr) minmax(15rem,.65fr)}.game-card{padding:var(--space-xl)}.drink-board{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:60rem){.drink-board{display:flex;gap:var(--space-md)}.drink-slot{flex:1 1 0}.drink-token{min-height:12rem}}@media(pointer:coarse){.btn,select{min-height:3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.foot-marquee__track{animation:none}.star-burst{display:none}}