:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #173d48; letter-spacing: 0; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #b8dde8; }
button, input { font: inherit; }
#wind-map { position: absolute; inset: 0; touch-action: none; }
#wind-map .tok-wind, #wind-map .tok-wind-viewport, #wind-map .maplibregl-canvas-container { pointer-events: auto; }
.topbar { position: absolute; z-index: 8; top: max(12px, env(safe-area-inset-top)); left: 14px; right: 14px; min-height: 46px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.brand, .models, .icon-button { pointer-events: auto; background: rgba(250,253,253,.94); border: 1px solid rgba(41,81,91,.18); box-shadow: 0 4px 16px rgba(6,39,49,.13); backdrop-filter: blur(10px); }
.brand { height: 42px; display: flex; align-items: baseline; gap: 5px; padding: 0 14px; border-radius: 6px; white-space: nowrap; }
.brand strong { font-size: 19px; line-height: 42px; color: #0c6870; }
.brand span { font-size: 15px; font-weight: 650; }
.models { margin-left: auto; display: flex; gap: 3px; padding: 3px; border-radius: 6px; overflow-x: auto; scrollbar-width: none; }
.models[hidden] { display: none; }
.models::-webkit-scrollbar { display: none; }
.models button { height: 34px; min-width: 66px; padding: 0 11px; border: 0; border-radius: 4px; color: #315a67; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.models button[aria-pressed="true"] { color: #fff; background: #0f6674; }
.models button:disabled { opacity: .45; cursor: wait; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: #0f6674; cursor: pointer; }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.notice { position: absolute; z-index: 9; top: 70px; left: 50%; max-width: min(420px, calc(100% - 28px)); transform: translateX(-50%); padding: 9px 13px; border-radius: 5px; color: #fff; background: rgba(121,35,35,.92); font-size: 12px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.layer-control { position: absolute; z-index: 9; top: 68px; right: 14px; display: grid; justify-items: end; gap: 5px; }
.layer-toggle { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(41,81,91,.18); border-radius: 5px; color: #174c57; background: rgba(250,253,253,.94); box-shadow: 0 4px 16px rgba(6,39,49,.13); cursor: pointer; }
.layer-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.layer-menu { width: 104px; padding: 4px; border: 1px solid rgba(41,81,91,.18); border-radius: 5px; background: rgba(250,253,253,.96); box-shadow: 0 4px 16px rgba(6,39,49,.16); }
.layer-menu[hidden] { display: none; }
.layer-menu button { width: 100%; height: 32px; border: 0; border-radius: 3px; color: #315a67; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.layer-menu button[aria-pressed="true"] { color: #fff; background: #0f6674; }
.wave-status { position: absolute; z-index: 8; right: 14px; bottom: 112px; color: #173d48; font-size: 9px; font-weight: 750; text-shadow: 0 1px 2px rgba(255,255,255,.95); pointer-events: none; }
.wave-particles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.bottom-ui { position: absolute; z-index: 8; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 7px; pointer-events: none; }
.legend { width: min(430px, 78vw); height: 22px; display: grid; grid-template-columns: 34px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 4px; color: #fff; background: #313695; box-shadow: 0 3px 12px rgba(4,30,38,.22); pointer-events: auto; }
.unit { display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.legend-bar { grid-column: 2; grid-row: 1; background: linear-gradient(90deg,#313695 0%,#4575b4 10%,#4fc3f7 20%,#00bfa5 30%,#4caf50 40%,#a6d854 50%,#ffe34d 60%,#fdae3b 70%,#f46d43 80%,#d73027 90%,#7f0000 100%); }
.legend.wave .legend-bar { background: linear-gradient(90deg,#296291 0%,#30a9bd 12%,#3ab771 25%,#dcca3e 38%,#f59430 50%,#dc4237 63%,#9f3483 78%,#532d7d 90%,#2d1948 100%); }
.legend-labels { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; font-size: 8px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.75); }
.timeline-shell { width: min(980px, 92vw); height: 68px; display: grid; grid-template-columns: 58px minmax(0,1fr) 126px; align-items: stretch; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 6px; background: rgba(5,38,48,.82); box-shadow: 0 4px 18px rgba(4,30,38,.24); backdrop-filter: blur(8px); pointer-events: auto; }
.now-button { border: 0; border-right: 1px solid rgba(255,255,255,.17); color: #d7f8ff; background: transparent; font-size: 10px; font-weight: 850; cursor: pointer; }
.now-button:hover { background: rgba(34,211,238,.12); }
.timeline { position: relative; min-width: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.timeline.dragging { cursor: grabbing; }
.timeline-content { position: absolute; inset: 0 auto 0 0; min-width: 100%; will-change: transform; pointer-events: none; }
.days { position: absolute; inset: 3px 0 auto; height: 18px; display: flex; pointer-events: none; }
.day { display: grid; place-items: center; min-width: 0; border-left: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 10px; font-weight: 800; text-shadow: 0 1px 2px #062f3a; }
.day:first-child { border-left: 0; }
#forecast { position: absolute; z-index: 3; inset: 17px 0 auto; width: 100%; height: 28px; margin: 0; opacity: 0; pointer-events: none; }
.timeline-track { position: absolute; left: 0; right: 0; top: 28px; height: 8px; background: linear-gradient(90deg,rgba(8,47,73,.94),rgba(254,249,195,.9),rgba(8,47,73,.94)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.17); }
.selected-marker { position: absolute; z-index: 2; left: 50%; top: 20px; width: 2px; height: 26px; margin-left: -1px; border-radius: 1px; background: #22d3ee; box-shadow: 0 0 0 1px rgba(255,255,255,.75); pointer-events: none; }
.now-marker { position: absolute; top: -5px; width: 2px; height: 18px; margin-left: -1px; background: #fff; }
.hours { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: flex-start; color: #fff; font-size: 9px; font-weight: 750; pointer-events: none; }
.hours span { flex: 0 0 auto; text-align: center; white-space: nowrap; }
#selected-time { display: grid; place-items: center; padding: 0 8px; border-left: 1px solid rgba(255,255,255,.17); color: #fff; font-size: 10px; line-height: 1.35; font-weight: 850; text-align: center; font-variant-numeric: tabular-nums; }
.tok-wind-status { right: 14px !important; bottom: 112px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #173d48 !important; font-size: 9px !important; font-weight: 750; text-shadow: 0 1px 2px rgba(255,255,255,.95); }
.wave-mode .tok-wind-status { display: none !important; }
@media (max-width: 700px) { .topbar { left: 8px; right: 8px; gap: 6px; } .brand { padding: 0 10px; } .brand strong { font-size: 17px; } .brand span { display: none; } .models button { min-width: 57px; padding: 0 8px; font-size: 10px; } .icon-button { width: 40px; height: 40px; } .bottom-ui { left: 8px; right: 8px; } .legend { width: 78vw; } .timeline-shell { width: 100%; grid-template-columns: 48px minmax(0,1fr) 84px; } #selected-time { font-size: 9px; } }
@media (max-width: 470px) { .topbar { align-items: flex-start; } .models { position: static; max-width: calc(100vw - 16px); margin-left: auto; } .timeline-shell { grid-template-columns: 44px minmax(0,1fr); } #selected-time { position: absolute; bottom: 68px; right: 0; width: 108px; height: 28px; border: 0; border-radius: 4px; background: rgba(5,38,48,.82); } .tok-wind-status, .wave-status { bottom: 108px !important; } }