@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap";:root{font-family:Nunito,system-ui,sans-serif;color:#17213a;background:#19c8c5;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{min-height:100dvh;overflow-x:hidden}button{font:inherit}button:focus-visible{outline:4px solid #17213a;outline-offset:4px}.screen{position:relative;display:grid;width:100%;min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow:hidden}h1,p{margin-top:0}h1{font-family:"Baloo 2",Arial Rounded MT Bold,sans-serif;line-height:.93}.menu-screen,.photo-screen,.result-screen{place-items:center;background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.55) 0 6px,transparent 7px),radial-gradient(circle at 88% 75%,rgba(255,255,255,.35) 0 10px,transparent 11px),linear-gradient(145deg,#20d3ce,#65e2cf 48%,#ffe47b)}.menu-card,.content-card,.result-card{width:min(100%,620px);text-align:center}.menu-card{position:relative;z-index:1;padding:clamp(28px,8vw,64px) clamp(20px,7vw,56px);border:4px solid #17213a;border-radius:38px;background:#fffbe5f5;box-shadow:10px 12px #17213af2}.eyebrow{margin-bottom:10px;color:#ea5969;font-size:.84rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.menu-card h1{margin-bottom:18px;font-size:clamp(3.2rem,15vw,6.8rem)}.menu-card h1 span{color:#ea5969}.intro{max-width:410px;margin:0 auto 28px;font-size:clamp(1rem,4vw,1.25rem);line-height:1.5}.camera-note{margin:18px 0 0;color:#5c6478;font-size:.82rem}.runner-menu-button{width:min(100%,360px);margin-top:24px;border:3px solid #17213a;background:#ffe56f;box-shadow:0 6px #17213a73;font-size:1.05rem}.primary-button,.secondary-button,.text-button{min-height:52px;border:0;border-radius:17px;cursor:pointer;font-weight:800;transition:transform .14s ease,box-shadow .14s ease}.primary-button{width:min(100%,360px);padding:14px 22px;color:#fff;background:#ea5969;box-shadow:0 7px #a53046;font-size:1.12rem}.primary-button:hover,.secondary-button:hover,.text-button:hover{transform:translateY(-2px)}.primary-button:active,.secondary-button:active,.text-button:active{transform:translateY(4px);box-shadow:0 2px #a53046}.hero-button{min-height:62px}.secondary-button{padding:10px 16px;color:#17213a;background:#fffbe5;box-shadow:0 5px #17213a61}.text-button{min-height:44px;padding:8px 12px;color:#17213a;background:#fffbe5;box-shadow:0 4px #17213a40}.confetti{position:absolute;width:70px;height:70px;border:14px solid #ffe56f;transform:rotate(18deg)}.confetti-one{top:4%;left:-24px}.confetti-two{right:-35px;bottom:4%;border-color:#ea5969;border-radius:50%}.camera-screen{grid-template-rows:auto minmax(0,1fr) auto;gap:16px;background:#17213a}.top-bar{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;align-items:center;gap:8px;color:#fff}.top-bar h1{margin:0;font-size:clamp(1.35rem,5vw,2rem);text-align:center}.top-spacer{width:76px}.camera-view{position:relative;width:min(100%,760px);min-height:0;margin:auto;overflow:hidden;border:4px solid #fffbe5;border-radius:28px;background:#050913}.camera-view video{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}.camera-guide{position:absolute;inset:12%;border:3px dashed rgba(255,255,255,.88);border-radius:42% 42% 28% 28%;pointer-events:none}.camera-guide span{position:absolute;top:18%;bottom:16%;left:50%;border-left:3px dashed rgba(255,255,255,.55)}.camera-actions{position:relative;display:flex;min-height:84px;align-items:center;justify-content:center}.switch-camera{position:absolute;left:0;max-width:112px}.shutter-button{display:grid;width:76px;height:76px;padding:7px;place-items:center;border:4px solid #fff;border-radius:50%;background:transparent;cursor:pointer}.shutter-button span{width:100%;height:100%;border-radius:50%;background:#ea5969;transition:transform .12s ease}.shutter-button:active span{transform:scale(.84)}.error-card{width:min(100%,520px);margin:auto;padding:30px;border-radius:28px;background:#fffbe5;text-align:center}.error-card strong{display:block;margin-bottom:10px;font:800 1.8rem "Baloo 2",sans-serif}.content-card,.result-card{padding:clamp(20px,5vw,34px);border:4px solid #17213a;border-radius:32px;background:#fffbe5;box-shadow:8px 10px #17213ae6}.content-card h1,.result-card h1{margin-bottom:10px;font-size:clamp(2.4rem,10vw,4.5rem)}.captured-photo,.result-image{display:block;width:min(100%,440px);margin:18px auto 24px;border:4px solid #17213a;border-radius:24px;background:#fff;object-fit:cover}.captured-photo{max-height:52dvh;aspect-ratio:4 / 3}.result-image{aspect-ratio:1}.result-detail{margin-bottom:8px;color:#5c6478}.result-percentage{color:#737b8d;font-size:.78rem;letter-spacing:.04em;opacity:.78}.countdown-screen{place-items:center;background:#17213a}.countdown-content{width:min(100%,600px);text-align:center}.countdown-content h1{margin-bottom:8px;color:#fff;font-size:clamp(3rem,12vw,6rem)}.countdown-image{width:min(82vw,58dvh,560px);margin-bottom:0}.countdown-overlay{position:fixed;z-index:2;inset:0;pointer-events:none}.countdown-canvas{display:block;width:100%;height:100%}.dom-countdown{display:grid;width:100%;height:100%;place-items:center;color:#fff;font:900 min(72vw,72dvh) "Baloo 2",sans-serif;-webkit-text-stroke:8px #17213a;text-shadow:0 24px 30px rgba(23,33,58,.55)}.finish-panel{position:fixed;z-index:4;right:20px;bottom:max(26px,env(safe-area-inset-bottom));left:20px;width:min(calc(100% - 40px),460px);margin:auto;padding:18px;border:4px solid #17213a;border-radius:24px;background:#fffbe5;box-shadow:8px 8px #ea5969;text-align:center}.finish-panel strong{display:block;margin-bottom:10px;color:#ea5969;font:800 2.2rem "Baloo 2",sans-serif}.runner-screen{display:grid;min-height:100dvh;place-items:center;overflow:hidden;background:#17213a}.runner-host{position:relative;width:min(100%,520px);height:100dvh;min-height:520px;overflow:hidden;background:#77ddd4;box-shadow:0 0 38px #0000005c;touch-action:none;-webkit-user-select:none;user-select:none}.runner-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.runner-ui{position:absolute;z-index:2;inset:0;pointer-events:none}.runner-hud{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));left:max(12px,env(safe-area-inset-left));display:grid;grid-template-columns:auto auto 1fr auto;gap:7px;align-items:center}.runner-stat,.runner-icon-button{min-height:42px;border:3px solid #17213a;border-radius:15px;color:#17213a;background:#fffbe5f0;box-shadow:0 4px #17213a6b}.runner-stat{display:flex;min-width:58px;padding:7px 10px;gap:5px;align-items:center;justify-content:center;font-size:.98rem}.runner-stat>span{color:#ef3f62;font-size:1.15rem;line-height:1}.runner-cupcake-stat>span{font-size:1.25rem;filter:drop-shadow(0 1px 0 rgba(23,33,58,.35))}.runner-distance-stat{justify-self:end;white-space:nowrap}.runner-icon-button{width:44px;padding:0;cursor:pointer;font-size:1rem;font-weight:900;pointer-events:auto}.runner-icon-button:disabled{cursor:default;opacity:.55}.runner-tutorial{position:absolute;top:max(70px,calc(env(safe-area-inset-top) + 64px));left:50%;width:max-content;max-width:calc(100% - 24px);padding:8px 14px;border:2px solid #17213a;border-radius:999px;color:#17213a;background:#fffbe5eb;box-shadow:0 3px #17213a59;font-size:clamp(.78rem,3.4vw,.94rem);font-weight:800;text-align:center;transform:translate(-50%)}.runner-overlay{position:absolute;z-index:4;inset:0;display:grid;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));place-items:center;background:#17213ab8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto}.runner-panel{width:min(100%,390px);padding:clamp(22px,6vw,34px);border:4px solid #17213a;border-radius:30px;background:#fffbe5;box-shadow:8px 9px #ea5969;text-align:center}.runner-panel h1{margin-bottom:22px;font-size:clamp(2.5rem,12vw,4.6rem)}.runner-panel .primary-button,.runner-panel .secondary-button{display:block;width:min(100%,300px);margin-right:auto;margin-left:auto;pointer-events:auto}.runner-panel .secondary-button{margin-top:14px;border:3px solid #17213a}.runner-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}.runner-results p{display:grid;gap:2px;margin:0;padding:10px 8px;border:2px solid rgba(23,33,58,.18);border-radius:14px;background:#fff}.runner-results span{color:#5c6478;font-size:.76rem;font-weight:800;text-transform:uppercase}.runner-results strong{font:800 1.35rem "Baloo 2",sans-serif}.runner-error-screen{place-items:center;background:#17213a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:430px){.menu-card{box-shadow:7px 8px #17213af2}.content-card,.result-card{padding:18px 14px 22px}.captured-photo,.result-image{margin-top:12px;margin-bottom:18px}.switch-camera{max-width:92px;padding:8px;font-size:.78rem}.runner-hud{gap:5px}.runner-stat{min-width:52px;padding-right:7px;padding-left:7px}.runner-icon-button{width:42px}}@media(min-width:800px){.camera-screen{padding-right:clamp(32px,6vw,80px);padding-left:clamp(32px,6vw,80px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}