@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--orange:#f05f43;--blue:#183b73;--ink:#14213d;--paper:#fff9ee;--yellow:#ffc94a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',Arial,sans-serif}.phone{width:min(100%,560px);height:100svh;min-height:600px;margin:auto;position:relative;overflow:hidden;background:var(--orange);box-shadow:0 0 0 1px rgba(20,33,61,.25)}header{position:absolute;z-index:5;top:0;width:100%;height:max(65px,calc(48px + env(safe-area-inset-top)));padding:calc(14px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between;color:var(--ink);font:10px 'DM Mono';letter-spacing:.1em}header a,header button{color:inherit;background:none;border:0;text-decoration:none;font:10px 'DM Mono';padding:5px}header a{font:20px 'Space Grotesk'}header p{margin:0}.screen{position:absolute;inset:0;padding:calc(78px + env(safe-area-inset-top)) 24px 28px;opacity:0;pointer-events:none;transform:translate3d(0,20px,0);transition:opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1)}.screen.on{opacity:1;pointer-events:auto;transform:none}.kicker{font:10px 'DM Mono';letter-spacing:.12em;margin:0}.stamp{position:absolute;right:23px;top:94px;width:72px;height:72px;border:1px solid var(--ink);border-radius:50%;display:grid;place-content:center;text-align:center;font:500 21px/1 'DM Mono';transform:rotate(13deg)}.stamp span{font-size:7px;letter-spacing:.08em;margin-top:4px}.cover{display:flex;flex-direction:column}.cover h1{font:400 clamp(78px,20vw,115px)/.73 'Instrument Serif';letter-spacing:-.085em;margin:55px 0 33px}.cover h1 i{font-style:italic;color:var(--paper)}.intro{font-size:17px;line-height:1.22;max-width:315px;margin:0}.button{background:var(--blue);color:var(--paper);border:0;padding:16px 18px;min-height:54px;font:600 15px 'Space Grotesk';display:flex;justify-content:space-between;align-items:center;gap:35px}.button b{font:20px 'DM Mono'}.start{margin-top:auto;z-index:2}.cover small{display:block;margin:14px 0 0;font:9px 'DM Mono';position:relative;z-index:2}.waves{position:absolute;inset:auto -50px -55px;height:270px;overflow:hidden}.waves i{position:absolute;width:150%;height:150px;left:-20%;border-radius:45%;border-top:3px solid var(--blue);transform:rotate(-7deg);animation:drift 7s linear infinite}.waves i:nth-child(1){top:35px}.waves i:nth-child(2){top:84px;left:-42%;border-top-color:var(--paper);animation-duration:9s}.waves i:nth-child(3){top:139px;left:-14%;border-top-width:7px;animation-duration:12s}.play{padding:0;background:var(--paper)}.scorebar{position:absolute;z-index:3;top:max(75px,calc(63px + env(safe-area-inset-top)));left:22px;right:22px;color:var(--ink);display:grid;grid-template-columns:1fr 1.2fr 1fr}.scorebar div:nth-child(2){text-align:center}.scorebar div:last-child{text-align:right}.scorebar small{display:block;font:9px 'DM Mono';letter-spacing:.08em}.scorebar b{font:600 27px 'Space Grotesk';font-variant-numeric:tabular-nums}.scorebar div:nth-child(2) b{color:var(--orange)}canvas{display:block;width:100%;height:100%;touch-action:none}.instruction{position:absolute;z-index:3;left:0;right:0;bottom:95px;text-align:center;color:var(--blue);font:10px 'DM Mono';letter-spacing:.06em;transition:opacity .25s}.instruction b{display:block;font-size:25px;animation:down .8s ease-in-out infinite alternate}.power{position:absolute;z-index:4;left:22px;bottom:25px;right:22px;height:9px;border:1px solid var(--ink);padding:2px}.power i{display:block;height:100%;width:0;background:var(--orange);transition:width .08s linear}.tip{position:absolute;bottom:44px;left:26px;margin:0;color:var(--blue);font:10px 'DM Mono';opacity:.75}.end{background:var(--blue);color:var(--paper);overflow:auto;padding-top:max(100px,calc(90px + env(safe-area-inset-top)))}.seal{width:108px;height:108px;margin:31px 0 20px;border:1px solid var(--paper);border-radius:50%;display:grid;place-items:center;position:relative;font:400 57px 'Instrument Serif'}.seal:after{content:"";position:absolute;inset:7px;border:5px solid var(--yellow);border-right-color:transparent;border-radius:50%;transform:rotate(-25deg)}.end h2,.manifest h2,.handoff h2{font:400 clamp(47px,12vw,68px)/.84 'Instrument Serif';letter-spacing:-.075em;margin:0}.end>p:not(.kicker){font-size:14px;line-height:1.35;max-width:360px}.receipt{margin:27px 0;border-top:1px solid rgba(255,249,238,.7);border-bottom:1px solid rgba(255,249,238,.7);display:grid;grid-template-columns:repeat(3,1fr)}.receipt div{padding:12px 6px;border-right:1px solid rgba(255,249,238,.5)}.receipt div:first-child{padding-left:0}.receipt div:last-child{border:0}.receipt span{display:block;font:7px 'DM Mono';letter-spacing:.08em}.receipt b{font-size:20px}.end .button{background:var(--yellow);color:var(--ink);width:100%;margin-bottom:14px}.text{border:0;background:none;color:var(--paper);font:10px 'DM Mono';border-bottom:1px solid rgba(255,249,238,.7);padding:0 0 4px;margin:10px 14px 0 0}.manifest{padding:100px clamp(24px,8vw,140px);background:var(--paper)}.manifest>div{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:68px}.manifest article{border-top:2px solid var(--orange);padding-top:12px}.manifest b{font-size:16px}.manifest p{font-size:15px;line-height:1.3}.handoff{padding:100px clamp(24px,8vw,140px);background:var(--yellow)}.handoff nav{margin-top:52px;border-top:1px solid var(--ink)}.handoff a{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ink);padding:14px 0;color:inherit;text-decoration:none;font-size:17px}.handoff a span{font:10px/1.3 'DM Mono';text-align:right}dialog{border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:28px;width:min(420px,calc(100% - 32px));box-shadow:12px 12px 0 var(--orange)}dialog::backdrop{background:rgba(20,33,61,.55)}dialog h2{font:400 39px/.9 'Instrument Serif';letter-spacing:-.06em}.x{float:right;border:0;background:none;font-size:24px}.x.button{float:none;font-size:14px;margin-top:16px}@keyframes drift{to{transform:translateX(22%) rotate(-7deg)}}@keyframes down{to{transform:translateY(7px)}}@media(max-width:600px){.manifest,.handoff{padding:80px 24px}.manifest>div{grid-template-columns:1fr;gap:25px;margin-top:45px}.handoff a{display:block}.handoff a span{display:block;text-align:left;margin-top:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.screen{transform:none!important}}