body{margin:0;background:#f2f2ef}
a{color:#121212}a:hover{color:#55585a}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #ff5b14;outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}
.disp{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.9;margin:0}
.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.tag{display:inline-block;background:#ff5b14;color:#121212;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:14px;line-height:1;padding:6px 9px}
.pyr{display:flex;flex-direction:column;align-items:center}
.prow{display:flex;justify-content:center;margin-top:-1px}
.prow img{display:block;height:100%;width:auto}
.dcan{display:block;width:clamp(48px,6vw,76px);height:auto}
.hero-cans{margin:0;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1vw,12px);font-size:0}
.hero-cans img{display:block;width:clamp(44px,8vw,104px);height:auto;transform:rotate(var(--r));animation:land .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes land{from{transform:translateY(-60px) rotate(0deg);opacity:0}to{transform:rotate(var(--r));opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-cans img{animation:none}}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:2px solid #121212;background:#ffffff;overflow:hidden}
.step{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.6vw,32px);border-right:2px solid #121212;border-bottom:2px solid #121212;margin-right:-2px;margin-bottom:-2px}
.size{border:2px solid #121212;background:#ffffff;padding:14px 16px;cursor:pointer;border-radius:0;text-align:left;display:flex;flex-direction:column;gap:4px;min-width:0;color:#121212;font:inherit}
.size:hover{background:#ffe9dc}
.pick{border:2px solid #121212;background:#ffffff;padding:8px 10px;cursor:pointer;border-radius:0;min-width:64px;min-height:44px;transition:transform .12s}
.pick img{display:block;width:clamp(40px,5vw,56px);height:auto}
.pick:hover{transform:translateY(-4px) rotate(-3deg);background:#ffe9dc}
.pick:active{transform:translateY(2px) scale(.94)}
.placed{border:0;background:none;padding:0;cursor:pointer;min-width:44px;min-height:44px}
.placed img{display:block;width:clamp(44px,5.6vw,64px);height:auto}
.placed:hover img{opacity:.6}
.ghost{border:2px solid #121212;background:transparent;color:#121212;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;border-radius:0;min-height:40px}
.ghost:hover{background:#121212;color:#f2f2ef}
.board{border:2px dashed #121212;background:#ffffff;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.chip{font-size:12px;font-weight:600;padding:5px 9px;border:2px solid #121212}
.gate{position:fixed;inset:0;z-index:50;background:#f2f2ef;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.gate[hidden]{display:none}
.gate-box{border:2px solid #121212;background:#ffffff;padding:clamp(24px,5vw,48px);max-width:520px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.gate-actions{display:flex;gap:10px;width:100%}
.gate-actions button{flex:1;min-height:52px;border:2px solid #121212;font-size:15px;font-weight:600;cursor:pointer;border-radius:0}
.gate-yes{background:#ff5b14;color:#121212}.gate-no{background:#ffffff;color:#121212}
.gate-yes:hover{background:#121212;color:#f2f2ef}.gate-no:hover{background:#e4e6e7}
body.gated{overflow:hidden}
html.needs-gate #age-gate{display:flex}