*{box-sizing:border-box;margin:0}:root{--bg: #0b1220;--panel: #121b2e;--text: #e8eefc;--muted: #8595b3;--accent: #4cc2ff}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.shell{display:flex;flex-direction:column;height:100%;max-width:720px;margin:0 auto;padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 12px)}.center{align-items:center;justify-content:center}header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px 8px}h1{flex:none;font-size:1.25rem;font-weight:700;letter-spacing:.02em}.accent{color:var(--accent);font-weight:400}.runinfo{display:flex;align-items:center;gap:8px;min-width:0;font-size:.85rem}.runinfo>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.muted{color:var(--muted)}.error{color:#ff9d9d;padding:24px;text-align:center}.rects{display:flex;gap:8px;overflow-x:auto;padding:0 4px 8px}.chip{border:1px solid #2a3a5c;background:var(--panel);color:var(--text);border-radius:999px;padding:6px 14px;font-size:.85rem;white-space:nowrap}.chip.active{border-color:var(--accent);color:var(--accent)}main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;background:var(--panel);border-radius:12px;overflow:hidden}.frame{width:100%;height:auto;max-height:100%;object-fit:contain}footer{padding:12px 4px 0}.timerow{display:flex;align-items:center;gap:12px;padding-bottom:8px}.play{width:44px;height:44px;border-radius:50%;border:1px solid #2a3a5c;background:var(--panel);color:var(--accent);font-size:.9rem}.timelabel{display:flex;flex-direction:column;line-height:1.25}.timelabel strong{font-size:1.05rem}.timelabel .muted{font-size:.8rem}input[type=range]{width:100%;height:44px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#243450}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#243450}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}.ticks{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);padding-top:2px}.info{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;color:var(--muted);font-size:1.05rem;line-height:1;padding:0}.about-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#040810b3;display:flex;align-items:flex-end;justify-content:center;z-index:10}.about{background:var(--panel);border-radius:16px 16px 0 0;max-width:720px;width:100%;max-height:85vh;overflow-y:auto;padding:20px 20px calc(env(safe-area-inset-bottom) + 20px);font-size:.9rem;line-height:1.5}.about-head{display:flex;justify-content:space-between;align-items:center}.about h2{font-size:1.1rem}.about h3{font-size:.95rem;margin-top:16px;color:var(--accent)}.about p,.about ul{margin-top:8px;color:var(--text)}.about ul{padding-left:20px}.about li{margin-bottom:6px}.about a{color:var(--accent)}.about-close{border:none;background:none;color:var(--muted);font-size:1rem;padding:8px}.windmap-wrap>.windmap{position:absolute;top:0;right:0;bottom:0;left:0}main{position:relative}.controls{padding-bottom:8px}.chips{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:0 4px}.spacer{flex:1}.legend{position:absolute;left:10px;bottom:10px;z-index:5;background:#0b1220c7;border-radius:8px;padding:4px 8px 6px}.legend-toggle{display:flex;align-items:center;gap:5px;width:100%;border:none;background:none;padding:2px 0 4px;cursor:pointer}.legend-chevron{font-size:.6rem;color:var(--muted);line-height:1}.legend-strip{display:flex;flex-direction:column-reverse;width:16px;border-radius:2px;overflow:hidden}.legend-strip span{height:7px}.legend-bands{display:flex;flex-direction:column;gap:2px}.legend-band{display:flex;align-items:center;gap:6px;font-size:.65rem;color:var(--text)}.legend-swatch{width:16px;height:9px;border-radius:2px;flex:none}.legend-unit{font-size:.6rem;color:var(--muted)}.windmap-wrap .maplibregl-ctrl-attrib,.windmap-wrap .maplibregl-ctrl-attrib.maplibregl-compact{font-size:9px;background:#0b122099;color:var(--muted)}.windmap-wrap .maplibregl-ctrl-attrib a{color:var(--muted)}.windmap-wrap .maplibregl-ctrl-attrib-button{background-color:transparent;filter:invert(1) opacity(.6)}.windmap-wrap .maplibregl-ctrl-group{background:#121b2ed9;border:1px solid #2a3a5c;border-radius:8px;box-shadow:none;overflow:hidden}.windmap-wrap .maplibregl-ctrl-group button+button{border-top:1px solid #2a3a5c}.windmap-wrap .maplibregl-ctrl-group button{background:transparent;width:30px;height:30px}.windmap-wrap .maplibregl-ctrl-group button:hover{background:#4cc2ff24}.windmap-wrap .maplibregl-ctrl-group button:disabled .maplibregl-ctrl-icon{opacity:.35}.windmap-wrap .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) opacity(.82)}.windmap-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.wind-arrows{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.setting-row{display:flex;gap:8px;margin-top:10px}.about p.setting-hint{font-size:.8rem;color:var(--muted);margin-top:6px}.setting-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.theme-option{display:flex;align-items:center;gap:12px;border:1px solid #2a3a5c;background:#0b122080;color:var(--text);border-radius:10px;padding:10px 12px;font-size:.85rem;text-align:left}.theme-option.active{border-color:var(--accent);color:var(--accent)}.theme-name{min-width:64px}.theme-swatch{display:flex;flex:1;height:12px;border-radius:3px;overflow:hidden}.theme-swatch span{flex:1}.theme-range{font-size:.75rem}.zone{display:flex;align-items:center;gap:4px;pointer-events:none}.zone-dot{width:5px;height:5px;border-radius:50%;background:#ffffffbf;flex:none}.zone-label{font-size:10px;color:#e8eefcd1;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);white-space:nowrap}.zone-emphasis .zone-dot{width:7px;height:7px;background:var(--accent)}.zone-emphasis .zone-label{font-size:11.5px;font-weight:600;color:#fff}.view-chips{position:absolute;left:10px;top:10px;z-index:5;display:flex;gap:6px}.view-chips .chip{background:#0b1220c7;font-size:.75rem;padding:5px 11px}