@font-face { font-family: "Fredoka"; src: url("/fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root { --bun: #F28C0F; --bun-hot: #FF8C1A; --patty: #6B3A1E; --lettuce: #3DAE4A; --tomato: #E63946; --cheese: #FFC21A;
  --ink: #1F1A17; --cream: #FFF8E7; --muted: #d9cbb8; --display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--ink); color: var(--cream); font-family: var(--text); line-height: 1.6;
  background-image: radial-gradient(rgba(255,248,231,.09) 1px, transparent 1.4px); background-size: 22px 22px; }
a { color: var(--cream); }
.soon { min-height: calc(100dvh - 48px); display: grid; place-content: center; justify-items: center; text-align: center; gap: 1rem; padding: 2.5rem max(16px, 4vw) 3rem; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.3rem var(--display); margin-bottom: 1.5rem; }
.brand span { color: var(--bun-hot); }
h1 { font: 600 clamp(2.6rem, 1.6rem + 6vw, 5.5rem)/1.05 var(--display); margin: .6rem 0 0; opacity: 0; animation: rise .6s 2.4s forwards; }
.lead { font: 600 clamp(1.15rem, 1rem + .5vw, 1.35rem) var(--display); color: var(--bun-hot); margin: 0; opacity: 0; animation: rise .6s 2.7s forwards; }
.sub { max-width: 34em; color: var(--muted); margin: 0; opacity: 0; animation: rise .6s 2.9s forwards; }
@keyframes rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

.stack { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4vw, 10px); width: min(420px, 78vw); -webkit-tap-highlight-color: transparent; }
.stack:focus-visible { outline: 3px solid var(--bun); outline-offset: 10px; border-radius: 20px; }
.ly { display: block; width: 100%; translate: 0 -120vh; opacity: 0; }
.stack.go .ly { animation: drop .75s cubic-bezier(.45,0,.55,1) forwards; animation-delay: calc(var(--i) * .32s + .15s); }
.ly-top { height: clamp(80px, 14vw, 128px); background: var(--bun); border-radius: 220px 220px 16px 16px; position: relative; width: 88%; }
.ly-top i { position: absolute; width: 16px; height: 8px; border-radius: 50%; background: var(--cream); rotate: -15deg; }
.s1 { left: 28%; top: 36%; } .s2 { left: 47%; top: 20%; } .s3 { left: 66%; top: 38%; } .s4 { left: 38%; top: 58%; } .s5 { left: 57%; top: 56%; }
.ly-lettuce { height: clamp(14px, 2.4vw, 22px); background: var(--lettuce); border-radius: 12px; width: 94%; }
.ly-tomato { height: clamp(11px, 1.8vw, 17px); background: var(--tomato); border-radius: 10px; width: 84%; }
.ly-patty { height: clamp(54px, 8vw, 76px); background: var(--patty); border-radius: 22px; display: grid; place-items: center; font: 700 clamp(22px, 4vw, 34px) ui-monospace, Menlo, Consolas, monospace; color: var(--cream); }
.ly-cheese { height: clamp(13px, 2vw, 20px); background: var(--cheese); border-radius: 10px; width: 94%; }
.ly-bottom { height: clamp(38px, 6vw, 54px); background: var(--bun); border-radius: 20px; width: 86%; }
@keyframes drop { 0% { translate: 0 -120vh; opacity: 1; scale: 1 1; } 70% { translate: 0 0; scale: 1 1; } 80% { translate: 0 0; scale: 1.06 .8; } 90% { translate: 0 -8px; scale: .98 1.05; } 100% { translate: 0 0; opacity: 1; scale: 1 1; } }

.doc { display: none; max-width: 46rem; margin: 0 auto; padding: 3rem max(16px, 4vw) 4rem; }
.doc h2 { font: 600 clamp(1.8rem, 1.3rem + 2.4vw, 2.75rem)/1.1 var(--display); margin: 0 0 1rem; }
.doc h3 { font: 600 1.3rem var(--display); margin: 2em 0 .4em; }
.doc p { color: var(--muted); }
#privacy:target { display: block; }
body:has(#privacy:target) .soon { display: none; }

footer { color: #8f8275; font-size: .8rem; text-align: center; padding: 0 16px 20px; }
footer a { color: #b8ab9f; }

@media (prefers-reduced-motion: reduce) { .ly, h1, .lead, .sub { animation: none !important; translate: 0 0; opacity: 1; } }