.app-shell{min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));background:radial-gradient(circle at 50% 32%, #2a463842, transparent 45%), var(--surface-deep);isolation:isolate;grid-template-rows:auto 1fr auto;display:grid;position:relative;overflow:hidden}.instrument-grid{z-index:-1;opacity:.12;background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:28px 28px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 72%);mask-image:linear-gradient(#000,#0000 72%)}.app-header,.app-footer{align-items:center;display:flex}.app-header{z-index:2;gap:12px}.brand-mark{border:1px solid #9df3b261;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;display:grid;position:relative}.brand-mark:before,.brand-mark:after{content:"";background:#9df3b252;position:absolute}.brand-mark:before{width:70%;height:1px}.brand-mark:after{width:1px;height:70%}.brand-mark span{z-index:1;background:var(--phosphor);border-radius:50%;width:12px;height:12px;box-shadow:0 0 16px #9df3b299}.app-kicker,.instrument-label,.app-footer,.app-status{letter-spacing:.12em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Roboto Mono,monospace}.app-kicker{color:var(--muted);margin:0 0 2px;font-size:.62rem}.app-header h1{letter-spacing:.08em;margin:0;font-size:clamp(1.25rem,5vw,1.65rem);font-weight:740}.app-status{color:var(--muted);align-items:center;gap:7px;margin:0 0 0 auto;font-size:.62rem;display:flex}.app-status:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.status-active{color:var(--phosphor)}.app-stage{place-items:center;width:100%;min-height:0;padding-block:18px 12px;display:grid}.start-view,.level-display,.message-view{width:min(100%,920px)}.start-view{align-items:center;gap:clamp(26px,7vw,70px);display:grid}.start-illustration{aspect-ratio:1;background:repeating-conic-gradient(from 0deg, #9df3b252 0 .7deg, transparent .7deg 10deg), radial-gradient(circle, var(--surface-raised) 0 62%, #0b120fc7 63% 100%);border:1px solid #9df3b242;border-radius:50%;justify-self:center;width:min(66vw,38vh,330px);position:relative;box-shadow:inset 0 0 40px #00000061,0 28px 70px #00000057}.preview-crosshair:before,.preview-crosshair:after{content:"";background:#9df3b22e;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-crosshair:before{width:78%;height:1px}.preview-crosshair:after{width:1px;height:78%}.preview-target{border:2px solid #9df3b257;border-radius:50%;position:absolute;inset:31%}.preview-bubble{aspect-ratio:1;background:var(--phosphor);border:1px solid #ffffff85;border-radius:50%;width:19%;position:absolute;top:43%;left:54%;box-shadow:inset -8px -10px 18px #2a974d59,inset 6px 7px 10px #ffffff7a,0 0 28px #74f29359}.start-copy{max-width:480px}.instrument-label{color:var(--phosphor);margin:0 0 10px;font-size:.68rem}.start-copy h2,.message-view h2,.measurement-heading h2{text-wrap:balance}.start-copy h2{letter-spacing:.01em;margin:0;font-size:clamp(1.7rem,7vw,3.1rem);line-height:1.18}.start-copy>p:not(.instrument-label,.privacy-note),.message-view>p:not(.instrument-label){color:var(--muted);line-height:1.75}.privacy-note{color:#bfd0c5;align-items:center;gap:9px;margin:20px 0;font-size:.82rem;display:flex}.privacy-note span{color:var(--phosphor);font-size:.48rem}.primary-action,.secondary-action{cursor:pointer;border-radius:14px;justify-content:center;align-items:center;min-height:52px;padding:0 20px;font-weight:750;transition:transform .16s,background-color .16s;display:inline-flex}.primary-action{border:1px solid var(--phosphor);color:#0a1a0f;background:var(--phosphor);gap:28px}.primary-action span{font-size:1.2em}.secondary-action{color:var(--text);background:#18241fc7;border:1px solid #9df3b252}.primary-action:active,.secondary-action:active{transform:scale(.98)}.message-view{text-align:center;justify-items:center;max-width:520px;display:grid}.message-view h2{margin:4px 0 2px;font-size:clamp(1.6rem,7vw,2.5rem)}.sensor-spinner,.error-symbol{aspect-ratio:1;border-radius:50%;place-items:center;width:128px;margin-bottom:30px;display:grid}.sensor-spinner{background:conic-gradient(from 0deg, transparent, var(--phosphor));animation:1.4s linear infinite rotate-sensor}.sensor-spinner:before{aspect-ratio:1;background:var(--surface-deep);content:"";border-radius:50%;width:118px;position:absolute}.sensor-spinner span{z-index:1;aspect-ratio:1;background:var(--phosphor);border-radius:50%;width:20px;box-shadow:0 0 22px #9df3b28a}.error-symbol{color:var(--warning);background:#f6c17714;border:1px solid #f6c1776b;font-family:ui-monospace,SFMono-Regular,monospace;font-size:3rem}.error-view .instrument-label{color:var(--warning)}.error-view .primary-action{margin-top:12px}.error-view details{width:100%;color:var(--muted);margin-top:22px;font-size:.85rem}.error-view summary{color:#c7d6cc;cursor:pointer;padding:10px}.error-view details p{line-height:1.65}.level-display{align-items:center;display:grid}.measurement-heading{text-align:center}.measurement-heading h2{margin:0;font-size:clamp(1.45rem,6vw,2.15rem)}.measurement-state{color:var(--muted);align-items:center;gap:8px;margin:8px 0 0;font-size:.78rem;display:inline-flex}.state-light{background:var(--warning);border-radius:50%;width:7px;height:7px}.is-level .state-light{background:var(--phosphor);box-shadow:0 0 12px #9df3b2b3}.measurement-layout{gap:18px;margin-top:18px;display:grid}.level-dial{aspect-ratio:1;background:radial-gradient(circle at 45% 40%, #35534370, transparent 30%), radial-gradient(circle, var(--surface-raised) 0 62%, var(--surface) 63% 100%);border:1px solid #9df3b24d;border-radius:50%;justify-self:center;width:min(78vw,49vh,430px);position:relative;overflow:hidden;box-shadow:inset 0 0 0 8px #050b083d,inset 0 0 55px #00000070,0 24px 65px #00000059}.dial-ticks{background:repeating-conic-gradient(from 0deg, #9df3b261 0 .55deg, transparent .55deg 5deg);border-radius:50%;position:absolute;inset:4%;-webkit-mask:radial-gradient(circle,#0000 0 91%,#000 91.5% 100%);mask:radial-gradient(circle,#0000 0 91%,#000 91.5% 100%)}.dial-crosshair:before,.dial-crosshair:after{content:"";background:#9df3b236;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dial-crosshair:before{width:76%;height:1px}.dial-crosshair:after{width:1px;height:76%}.target-ring{border:2px solid #9df3b261;border-radius:50%;position:absolute;inset:32%;box-shadow:0 0 20px #9df3b20d}.target-ring:before,.target-ring:after{content:"";border:1px solid #9df3b21f;border-radius:50%;position:absolute}.target-ring:before{inset:-48%}.target-ring:after{inset:-95%}.bubble{top:calc(50% + var(--bubble-y));left:calc(50% + var(--bubble-x));aspect-ratio:1;background:#74f293;border:1px solid #ffffff85;border-radius:50%;width:18%;transition:top 90ms linear,left 90ms linear,box-shadow .18s;position:absolute;transform:translate(-50%,-50%);box-shadow:inset -10px -12px 20px #198b3d61,inset 7px 8px 12px #ffffff85,0 7px 20px #00000057}.bubble span{background:#ffffff9e;border-radius:50%;width:24%;height:14%;position:absolute;top:18%;left:22%;transform:rotate(-25deg)}.is-level .level-dial{border-color:#9df3b2ad;box-shadow:inset 0 0 0 8px #050b083d,inset 0 0 55px #00000070,0 0 54px #74f29324}.is-level .bubble{box-shadow:inset -10px -12px 20px #198b3d61,inset 7px 8px 12px #ffffff94,0 0 34px #74f29394}.axis-mark{color:#9df3b28f;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.65rem;position:absolute}.axis-mark-top{top:11%;left:50%;transform:translate(-50%)}.axis-mark-right{top:50%;right:11%;transform:translateY(-50%)}.instrument-panel{justify-self:center;gap:12px;width:min(100%,430px);display:grid}.angle-readouts{grid-template-columns:repeat(2,1fr);gap:10px;margin:0;display:grid}.angle-readouts div{background:#18241f8c;border-top:1px solid #9df3b247;border-bottom:1px solid #9df3b21f;padding:10px 12px 9px}.angle-readouts dt{color:var(--muted);font-size:.68rem}.angle-readouts dd{color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin:3px 0 0;font-family:ui-monospace,SFMono-Regular,Roboto Mono,monospace;font-size:clamp(1.55rem,7vw,2.2rem)}.calibration-state{color:var(--muted);justify-content:center;align-items:center;gap:8px;margin:0;font-size:.76rem;display:flex}.calibration-state span{color:var(--phosphor)}.instrument-panel .primary-action,.instrument-panel .secondary-action{width:100%}.app-footer{color:#9aada1b8;justify-content:space-between;font-size:.56rem}@keyframes rotate-sensor{to{transform:rotate(360deg)}}@media (width>=720px){.start-view{grid-template-columns:minmax(300px,.9fr) minmax(340px,1fr)}.measurement-layout{grid-template-columns:minmax(350px,1fr) minmax(280px,.72fr);align-items:center;gap:40px}.level-dial{width:min(52vw,58vh,470px)}}@media (orientation:landscape) and (height<=600px){.app-shell{padding-block:max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom))}.app-header h1{font-size:1.15rem}.app-stage{padding-block:0}.app-footer{display:none}.start-view,.measurement-layout{grid-template-columns:minmax(240px,1fr) minmax(280px,.92fr)}.start-illustration,.level-dial{width:min(57vh,360px)}.measurement-heading{top:max(14px, env(safe-area-inset-top));position:absolute;left:50%;transform:translate(-50%)}.measurement-heading .instrument-label{display:none}.measurement-heading h2{font-size:1rem}.measurement-heading .measurement-state{display:none}.angle-readouts dd{font-size:1.65rem}}@media (prefers-reduced-motion:reduce){.bubble,.primary-action,.secondary-action{transition:none}.sensor-spinner{animation:none}}:root{--surface-deep:#0b120f;--surface:#111a17;--surface-raised:#18241f;--grid:#2a4638;--phosphor:#9df3b2;--text:#eef7f1;--muted:#9aada1;--warning:#f6c177;color:var(--text);background:var(--surface-deep);font-synthesis:none;text-rendering:optimizelegibility;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic UI,sans-serif}*{box-sizing:border-box}html{background:var(--surface-deep);min-height:100%}body,#root{min-height:100dvh;margin:0}body{overscroll-behavior:none;min-width:320px}button,summary{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible{outline:3px solid var(--text);outline-offset:4px}