:root{color-scheme:light;--ink:#293d35;--muted:#617067;--track:#cbd5ca;--ease-out:cubic-bezier(0.23,1,0.32,1);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bfd1cc}
button,select,input{font:inherit}
button,select{cursor:pointer;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #95642f;outline-offset:5px}
.scene{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}
.diorama-image,.diorama-render{position:absolute;inset:0;width:100%;height:100%;display:block}
.diorama-image{object-fit:cover;object-position:50% 50%;filter:blur(var(--mid-blur,.7px))}
.diorama-render{opacity:0;pointer-events:none}
.diorama-render[data-ready=true]{opacity:1}
.diorama-fallback-haze{position:absolute;inset:0;background:linear-gradient(var(--haze-top,#dcded4),var(--haze-bottom,#e8dfce));opacity:var(--veil,.35);pointer-events:none}
.scene[data-renderer=depth] .diorama-fallback-haze{display:none}
.scene[data-available=false] .diorama-render{filter:saturate(.35)}
@media(max-aspect-ratio:17/20){.diorama-image{object-position:46% 50%}}
.controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 32px));padding:16px 20px 12px;background:#fafbf3ed;border:1px solid #ffffff82;border-radius:20px;box-shadow:0 8px 36px #193d2a15;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.control-top,.value-row,.actions,.slider-ends{display:flex;align-items:center;justify-content:space-between}
.region-wrap{position:relative}
.region-trigger{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--ink);font-size:13px;font-weight:500;padding:6px 8px;margin-left:-8px;min-height:36px;border-radius:7px}
.region-trigger:hover,.region-trigger[aria-expanded=true]{background:#e7ebdf}
.region-trigger svg{transition:transform 150ms ease}
.region-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
.region-menu{position:fixed;left:var(--menu-left,16px);top:var(--menu-top,16px);z-index:10;width:210px;padding:6px;background:#fafbf3;border:1px solid #ffffffb0;border-radius:13px;box-shadow:0 8px 32px #1b352830;max-height:calc(100dvh - 16px);overflow-y:auto}
.region-menu[hidden]{display:none}
.region-menu [role=option]{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;text-align:left;font-size:13px;padding:9px 11px;color:var(--ink);background:transparent;border:0;border-radius:7px}
.region-menu [role=option]:hover,.region-menu [role=option]:focus-visible{background:#e7ebdf}
.region-menu [role=option][aria-selected=true]{background:#e1e8dc;font-weight:500}
.option-check{opacity:0;font-size:13px;color:#42603e}
.region-menu [aria-selected=true] .option-check{opacity:1}
.readout-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;margin:5px 0 12px}
.psi-readout .value-row{margin:0;min-height:41px}
.psi-readout .band{display:block;font-size:11px;margin-top:3px}
.pm-readout{border-left:1px solid #d8dfd1;padding-left:18px;color:var(--muted)}
.pm-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
#pm-mode{font-size:9px;color:#62765b}
.pm-readout[data-status=stale] #pm-mode,.pm-readout[data-status=error] #pm-mode{color:#91662f}
.pm-number-row{display:flex;align-items:baseline;gap:6px;margin-top:4px}
#pm-value{font-size:25px;line-height:1.1;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pm-unit{font-size:10px}
.pm-detail{font-size:10px;line-height:1.4;margin-top:4px}
.status{display:flex;align-items:center;gap:6px;font-size:11px;color:#53664f}
.status-controls{display:flex;align-items:center;gap:12px}
.reset-link{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#42603e;padding:8px 0;min-height:36px;font-size:10px;white-space:nowrap}
.reset-link[hidden]{display:none}
.reset-link:hover{text-decoration:underline;text-underline-offset:3px}
.status-dot{height:5px;width:5px;border-radius:50%;background:#889588}
.status[data-mode=live] .status-dot{background:#55774c}
.status[data-mode=preview] .status-dot{background:#ad7840}
.status[data-mode=preview]{color:#8b622f}
.status[data-mode=stale],.status[data-mode=error]{color:#8b622f}
.status[data-mode=stale] .status-dot,.status[data-mode=error] .status-dot{background:#ad7840}
.value-row{gap:12px;margin:5px 0 10px;min-height:43px}
.psi-label{display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--muted)}
.psi-label output{color:var(--ink);font-size:36px;line-height:1.1;font-weight:450;letter-spacing:-1.6px;font-variant-numeric:tabular-nums;min-width:66px}
.band{font-size:12px;font-weight:500;color:#5e695f}
.band[data-tone=good]{color:#436541}
.band[data-tone=moderate]{color:#796d36}
.band[data-tone=unhealthy]{color:#986b35}
.band[data-tone=very-unhealthy]{color:#a35c3f}
.band[data-tone=hazardous]{color:#963f38}
.slider-wrap{width:100%}
input[type=range]{display:block;-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:linear-gradient(to right,#365645 0 var(--progress,0%),var(--track) var(--progress,0%) 100%)}
input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:var(--track)}
input[type=range]::-moz-range-progress{height:4px;border-radius:3px;background:#365645}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;margin-top:-7.5px;border:3px solid #fafbf3;border-radius:50%;background:#365645;box-shadow:0 1px 4px #25463240}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:3px solid #fafbf3;border-radius:50%;background:#365645;box-shadow:0 1px 4px #25463240}
.slider-ends{font-size:10px;color:#748074;margin-top:0}
.actions{gap:10px;margin-top:12px}
.actions button{min-height:40px;padding:10px 14px;border-radius:9px;font-size:12px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:7px;transition:background 140ms ease}
.blow-button{position:relative;flex:1;border:1px solid #365645;background:#365645;color:#fafbf3}
.actions .blow-button{transition:transform 160ms var(--ease-out),background 140ms ease}
.blow-button:active{transform:scale(.97)}
.blow-button[aria-pressed=true]{background:#426751}
.mic-light{display:none;width:6px;height:6px;border-radius:50%;background:#c9edb8}
.blow-button[data-mic=listening] .mic-light,.blow-button[data-mic=calibrating] .mic-light{display:block}
.mic-feedback{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;min-height:16px;font-size:11px;line-height:1.4;color:#52664f;text-align:center}
.mic-feedback[data-error=true]{color:#8b522f}
.mic-meter{flex:0 0 40px;height:4px;overflow:hidden;border-radius:3px;background:#cbd5ca}
.mic-meter[hidden]{display:none}
#mic-level{display:block;width:100%;height:100%;background:#426751;transform:scaleX(0);transform-origin:left}
.controls{z-index:2}
@media(hover:hover) and (pointer:fine){.blow-button:hover{background:#294735}}
.source-status{display:block;text-align:center;font-size:10px;line-height:1.4;color:#718071;text-decoration:none;margin-top:11px;min-height:14px}
.source-status:hover{text-decoration:underline;text-underline-offset:3px}
.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}
@media(pointer:coarse){.region-trigger,.reset-link{min-height:44px}.region-menu [role=option]{min-height:44px}.actions button{min-height:44px}input[type=range]{height:36px}.source-status{padding:3px 0;font-size:11px}}
@media(max-width:600px){.controls{bottom:max(16px,env(safe-area-inset-bottom));padding:12px 18px 10px;border-radius:17px}.value-row{margin-top:0}.psi-label output{font-size:34px}.actions{margin-top:9px}.source-status{font-size:10px}.control-top{min-height:34px}}
@media(max-height:480px) and (min-width:601px){.controls{width:350px;left:auto;right:max(16px,env(safe-area-inset-right));bottom:16px;transform:none;padding:10px 16px}.value-row{margin:0}.actions{margin-top:6px}.source-status{margin-top:8px}.psi-label output{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.blow-button:active{transform:none}}