@font-face{font-family:Kid Sans;src:local("Nunito"),local("Trebuchet MS"),local("Verdana")}:root{--paper: #f3ede0;--ink: #2a2420;--next: #c91a09;--next-ink: #fff8f0}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--paper);color:var(--ink);font-family:Kid Sans,Nunito,Trebuchet MS,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none}#page{position:relative;height:100%;display:grid;grid-template-rows:1fr auto;background:var(--paper)}#stage{position:relative;min-height:0;touch-action:none}#stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#stage canvas.orbiting{cursor:grabbing}#callout-view canvas{display:block;width:100%;height:100%;touch-action:none;pointer-events:none}#step-num{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));font-size:clamp(48px,12vw,96px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--ink);pointer-events:none}#callout{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:min(32vw,240px);height:min(32vw,240px);pointer-events:none;background:#7eb7e6;border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 3px #5a9ed4}#callout-view{width:100%;height:100%}#callout-qty{position:absolute;left:12px;bottom:6px;font-size:clamp(28px,6vw,48px);font-weight:800;color:var(--ink)}#drop-arrow{position:absolute;top:max(28px,8vw);right:calc(min(32vw,240px) + 16px);width:min(12vw,96px);height:8px;background:var(--ink);pointer-events:none}#drop-arrow:after{content:"";position:absolute;left:0;top:50%;width:0;height:0;border-top:18px solid transparent;border-bottom:18px solid transparent;border-right:26px solid var(--ink);transform:translate(-100%,-50%)}#page[data-phase=reveal] #drop-arrow{display:none}#reveal-name{position:absolute;left:0;right:0;bottom:28%;text-align:center;font-size:clamp(36px,8vw,72px);font-weight:800;padding:0 24px;pointer-events:none}#page[data-phase=build] #reveal-name{display:none!important}#reset{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:calc(clamp(88px,18vh,140px) + 24px + max(16px,env(safe-area-inset-bottom)));z-index:2;height:clamp(52px,8vh,64px);padding:0 22px;border:0;border-radius:18px;background:#3a332e;color:var(--next-ink);font:inherit;font-size:clamp(22px,5vw,32px);font-weight:800;cursor:pointer;box-shadow:0 5px #1f1b18}#reset:active{transform:translateY(3px);box-shadow:0 2px #1f1b18}#actions{display:flex;gap:12px;margin:12px 16px max(16px,env(safe-area-inset-bottom))}#back,#next{height:clamp(88px,18vh,140px);border:0;border-radius:28px;font:inherit;font-size:clamp(32px,7vw,64px);font-weight:800;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}#back{flex:0 1 38%;min-width:0;padding:0 10px;background:#3a332e;color:var(--next-ink);box-shadow:0 8px #1f1b18}@media(max-width:520px){#back{flex:1 1 44%;font-size:clamp(26px,7vw,36px);gap:6px}#next{flex:1 1 56%;font-size:clamp(32px,8vw,48px)}}#next{flex:1 1 60%;background:var(--next);color:var(--next-ink);font-size:clamp(40px,9vw,72px);box-shadow:0 8px #7a1008}#back:active:not(:disabled){transform:translateY(4px);box-shadow:0 4px #1f1b18}#next:active:not(:disabled){transform:translateY(4px);box-shadow:0 4px #7a1008}#back:disabled{opacity:.35;cursor:default;box-shadow:0 8px #1f1b18}#back-arrow,#next-arrow{font-size:1.2em;line-height:1}#page[data-phase=reveal] #step-num,#page[data-phase=reveal] #callout{display:none}