:root{font-family:'Trebuchet MS',system-ui,sans-serif;color:#30382e;background:#f9efda;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:700;cursor:pointer;color:inherit;border:1px solid #30382e55;border-radius:8px;background:#fff7e7;min-height:44px;padding:10px 15px;touch-action:manipulation}button:hover{background:#f6d86a}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #235fba;outline-offset:-4px}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid #30382e22;gap:12px}header a{color:inherit;font-size:23px;letter-spacing:-1px;font-weight:900;text-decoration:none}header a span{display:block;font-size:8px;letter-spacing:2px;margin-top:4px}header>div{display:flex;align-items:center;gap:10px}.build-label{font-size:9px;letter-spacing:2px;margin-right:16px}header button{font-size:12px}main{max-width:1600px;margin:0 auto}#viewport{height:calc(100svh - 136px);min-height:460px;max-height:900px;position:relative;overflow:hidden;background:#dce9d6}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;inset:24px 30px auto;display:flex;justify-content:space-between;gap:20px;pointer-events:none}.mission{background:#fff8e9ed;border:2px solid #333b2d;border-radius:4px 12px 7px 10px;padding:13px 20px;box-shadow:3px 4px 0 #32362e22;max-width:75%}.mission small{display:block;font-size:9px;letter-spacing:1.5px;margin-bottom:5px}.mission strong{font-size:16px}.collection{text-align:center;background:#f8ce4b;border:2px solid #333b2d;border-radius:50%;width:79px;height:79px;padding-top:15px;font-size:23px;font-weight:bold;transform:rotate(8deg)}.collection span{display:block;font-size:8px;letter-spacing:1px;margin-top:2px}.intro{position:absolute;left:7%;top:50%;transform:translateY(-50%);max-width:570px;background:#fff5dfed;padding:34px 40px;border:2px solid #384331;border-radius:6px 30px 12px 25px;box-shadow:8px 9px 0 #39443324}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold;color:#3d6348}h1{font-size:clamp(50px,6vw,83px);line-height:.98;letter-spacing:-4px;margin:18px 0 22px}h1 em{font-style:normal;color:#b34b31}.intro>p:not(.eyebrow){font-size:16px;line-height:1.6}.primary{display:block;background:#345b42;color:#fff7e1;border:0;box-shadow:0 4px 0 #223d2d;padding:17px 23px;font-size:15px}.primary:hover{background:#25462f}.primary span{margin-left:20px}.intro>small{display:block;margin-top:22px;font-size:11px}.intro .preview-note{font-size:10px!important;margin:14px 0 0;color:#64664f}.below{min-height:60px;padding:10px 25px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:11px}.below button{font-size:11px}.below b{margin-left:3px}#toast{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);max-width:85%;background:#fff8e8f2;border-radius:12px;padding:11px 20px;font-size:15px;font-weight:bold;text-align:center;pointer-events:none;opacity:0;transition:opacity .15s}#toast.visible{opacity:1}.stamp-hint{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);padding:9px 15px;background:#f5c94c;border:2px solid #343c2c;border-radius:8px;font-size:13px;pointer-events:none}.touch{position:absolute;bottom:15px;left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none}.touch>div{display:flex;gap:10px}.touch button{pointer-events:auto;width:62px;height:62px;border:2px solid #333e2a;background:#fff7e4dc;box-shadow:0 4px 0 #333e2a3a;font-size:28px;touch-action:none;user-select:none;-webkit-user-select:none}.touch .stamp-control{font-size:11px;background:#f6cd50;width:72px}.touch .jump-control{background:#b5d6b1}.touch button.pressed{transform:translateY(3px);box-shadow:none}dialog{max-width:470px;width:calc(100% - 30px);border:2px solid #30382e;background:#fff4dd;border-radius:20px;color:inherit;padding:30px;overscroll-behavior:contain}dialog::backdrop{background:#21342788}dialog h2{font-size:34px;letter-spacing:-1.2px;margin:15px 0}dialog p{font-size:14px;line-height:1.6}dialog button{margin-top:12px;margin-right:10px}[hidden]{display:none!important}.nojs{padding:30px}
@media(pointer:coarse){#toast{bottom:96px}.stamp-hint{bottom:145px}.below>span:first-child{display:none}}
@media(max-width:700px){header{height:62px;padding:0 13px}header a{font-size:18px}header button{padding:8px;font-size:11px}.build-label{display:none}#viewport{height:calc(100svh - 120px);min-height:430px}.intro{left:5%;width:90%;padding:25px;max-width:410px}.intro h1{font-size:58px}.intro>p:not(.eyebrow){font-size:14px}.hud{inset:14px 12px auto;gap:8px}.mission{padding:10px 12px;max-width:78%}.mission small{font-size:7px;letter-spacing:.7px}.mission strong{font-size:12px}.collection{width:57px;height:57px;font-size:18px;padding-top:8px;flex-shrink:0}.collection span{font-size:6px}.below{padding:8px 12px;font-size:9px}.below>span:first-child{display:none}.touch{left:12px;right:12px}.touch button{width:52px;height:56px}.touch>div{gap:6px}#toast{font-size:12px}.stamp-hint{font-size:11px;text-align:center;max-width:80%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-height:520px) and (orientation:landscape){header{height:48px}#viewport{height:calc(100svh - 48px);min-height:250px}.below{display:none}.intro{top:50%;padding:15px 25px;max-width:500px}.intro h1{font-size:36px;margin:7px 0}.intro h1 br{display:none}.intro>p:not(.eyebrow){font-size:11px;margin:6px 0}.intro>small,.preview-note{display:none}.intro .primary{padding:10px 15px}.hud{top:8px}.mission{padding:7px 12px}.collection{height:55px;width:55px;font-size:18px;padding-top:7px}}
