:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#f7f0e8;--ink:#211914;--muted:#7f6e61;--line:#2119141f;--tim-red:#c8102e;--leaf-red:#dd1f2d;--forest:#115d47;--lake:#246a8f;--cream:#fffaf2;--shadow:0 18px 48px #21191424}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at 50% -10%, #c8102e21, transparent 34%), linear-gradient(180deg, #fffaf4 0%, var(--paper) 46%, #ebe8df 100%);min-height:100svh;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{color:inherit;font:inherit;border:0}.app-shell{width:min(100%,440px);min-height:100svh;padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));grid-template-rows:auto minmax(300px,1fr) auto auto auto;gap:16px;margin:0 auto;display:grid}.topbar{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.eyebrow,.status,.metric span{color:var(--muted);letter-spacing:0;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}h1{letter-spacing:0;max-width:280px;margin:4px 0 0;font-size:clamp(1.35rem,8vw,2.2rem);line-height:1.02}.icon-button{border:1px solid var(--line);background:#fffaf2b8;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-size:1.35rem;display:grid;box-shadow:0 8px 24px #21191414}.icon-button:active,.primary-button:active{transform:translateY(1px)}.compass-stage{place-items:center;min-height:300px;display:grid;position:relative}.distance-pill{z-index:2;border:1px solid var(--line);min-width:138px;color:var(--forest);text-align:center;background:#fffaf2db;border-radius:999px;padding:9px 14px;font-weight:800;position:absolute;top:8px;box-shadow:0 10px 26px #2119141a}.compass{aspect-ratio:1;width:min(78vw,330px);box-shadow:var(--shadow);background:conic-gradient(#246a8f24,#0000 16%,#115d4729 33%,#0000 50%,#c8102e29 68%,#0000 84%,#246a8f24),radial-gradient(circle,#fffaf2f2 0 54%,#fffaf294 55% 100%);border:1px solid #21191424;border-radius:50%;position:relative}.compass:before,.compass:after{content:"";border:1px solid #2119141a;border-radius:50%;position:absolute;inset:14%}.compass:after{inset:28%}.compass-ring{border-radius:50%;position:absolute;inset:0}.cardinal{width:30px;height:30px;color:var(--muted);place-items:center;font-size:.82rem;font-weight:900;display:grid;position:absolute}.north{color:var(--tim-red);top:15px;left:calc(50% - 15px)}.east{top:calc(50% - 15px);right:15px}.south{bottom:15px;left:calc(50% - 15px)}.west{top:calc(50% - 15px);left:15px}.needle{transform:rotate(var(--rotation,0deg));transform-origin:50%;will-change:transform;position:absolute;inset:14%}.needle-head,.needle-tail{border-radius:999px 999px 4px 4px;width:24px;position:absolute;left:50%;transform:translate(-50%)}.needle-head{background:linear-gradient(180deg, var(--tim-red), #8f0f20);clip-path:polygon(50% 0,100% 100%,50% 82%,0 100%);height:48%;top:2%}.needle-tail{clip-path:polygon(50% 100%,100% 0,50% 18%,0 0);background:linear-gradient(#246a8fa6,#115d47b8);height:35%;bottom:6%}.center-cap{place-items:center;display:grid;position:absolute;inset:0}.center-cap span{aspect-ratio:1;background:radial-gradient(circle at 50% 44%, #fff 0 17%, transparent 18%), linear-gradient(180deg, var(--cream), #e7ddd0);border:8px solid #21191414;border-radius:50%;width:58px;box-shadow:0 12px 26px #2119142e}.info-panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.metric{border:1px solid var(--line);background:#fffaf2b8;border-radius:8px;min-height:74px;padding:12px 10px}.metric strong{overflow-wrap:anywhere;margin-top:8px;font-size:clamp(.92rem,4.8vw,1.12rem);line-height:1;display:block}.actions{display:grid}.primary-button{background:var(--tim-red);color:#fff;border-radius:8px;min-height:50px;font-weight:850;box-shadow:0 12px 28px #c8102e47}.primary-button:disabled{cursor:wait;opacity:.7}.status{text-transform:none;min-height:18px}.celebration{z-index:10;pointer-events:none;opacity:0;background:#f7f0e800;place-items:center;transition:opacity .22s,background .22s,transform .22s;display:grid;position:fixed;inset:0;overflow:hidden;transform:scale(1.02)}.celebration.is-visible{opacity:1;background:#f7f0e8eb;transform:scale(1)}.celebration-sky{position:absolute;inset:0}.burst{aspect-ratio:1;background:var(--leaf-red);opacity:0;border-radius:50%;width:12px;position:absolute}.celebration.is-visible .burst{animation:1.1s ease-out infinite burst}.burst-one{top:20%;left:24%}.burst-two{background:var(--lake);animation-delay:.18s;top:28%;right:22%}.burst-three{background:var(--forest);animation-delay:.32s;top:13%;left:52%}.cup{width:146px;height:170px;position:relative;transform:translateY(18px)}.celebration.is-visible .cup{animation:.9s cubic-bezier(.2,1.35,.28,1) both cup-pop}.cup-lid{background:#3d2b24;border-radius:10px 10px 5px 5px;width:110px;height:32px;position:absolute;top:0;left:18px;box-shadow:inset 0 7px #ffffff24}.cup-body{clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);background:linear-gradient(#cf1732,#9c1026);border-radius:8px 8px 22px 22px;width:90px;height:130px;position:absolute;top:26px;left:28px;box-shadow:0 22px 34px #21191438}.cup-label{width:54px;height:32px;color:var(--tim-red);background:#fffaf2;border-radius:5px;place-items:center;font-weight:950;display:grid;position:absolute;top:78px;left:46px}.celebration-copy{bottom:max(62px, env(safe-area-inset-bottom));text-align:center;position:absolute}.celebration-copy p{color:var(--muted);text-transform:uppercase;margin:0 0 4px;font-weight:800}.celebration-copy strong{font-size:clamp(1.8rem,10vw,3rem);line-height:.95;display:block}.leaf{opacity:0;background:var(--leaf-red);clip-path:polygon(50% 0,58% 24%,80% 12%,72% 38%,100% 43%,72% 55%,86% 80%,58% 70%,50% 100%,42% 70%,14% 80%,28% 55%,0 43%,28% 38%,20% 12%,42% 24%);width:72px;height:72px;position:absolute}.celebration.is-visible .leaf{animation:1.6s ease-in-out infinite leaf-fall}.leaf-one{top:-80px;left:16%}.leaf-two{width:52px;height:52px;animation-delay:.26s;top:-110px;right:14%}.leaf-three{background:#b60d28;width:60px;height:60px;animation-delay:.48s;top:-95px;left:48%}@keyframes burst{0%{opacity:.9;transform:scale(.3);box-shadow:0 0,0 0}to{opacity:0;transform:scale(2.4);box-shadow:0 -64px 0 3px #0000,48px 38px 0 3px #0000,-48px 38px 0 3px #0000}}@keyframes cup-pop{0%{transform:translateY(90px)scale(.72)rotate(-6deg)}70%{transform:translateY(8px)scale(1.08)rotate(3deg)}to{transform:translateY(18px)scale(1)rotate(0)}}@keyframes leaf-fall{0%{opacity:0;transform:translateY(0)rotate(0)}12%{opacity:1}to{opacity:0;transform:translateY(92vh)rotate(360deg)}}@media (max-height:680px){.app-shell{grid-template-rows:auto minmax(250px,1fr) auto auto auto;gap:10px}.compass{width:min(68vw,276px)}.metric{min-height:64px;padding:10px 8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}