#seasonal-guide { --ww-bg:#f7f7f7;--ww-surface:#fff;--ww-ink:#555;--ww-muted:#777;--ww-line:#ddd;--ww-sea:#2e9cc1;--ww-sea-soft:#c5ebfe;color:var(--ww-ink);background:var(--ww-bg);font-family:inherit;font-size:14px;line-height:1.5;isolation:isolate; }
    #seasonal-guide * {box-sizing:border-box}
    #seasonal-guide button,#seasonal-guide select {font:inherit;color:inherit}
    #seasonal-guide button {cursor:pointer}
    #seasonal-guide a {color:var(--ww-sea)}
    #seasonal-guide a:hover {color:#0081ad;text-decoration:underline}

    #seasonal-guide .ww-main {padding:26px 32px 30px;max-width:1200px;margin:auto}
    #seasonal-guide h2 {font-size:21px;line-height:1.25;margin:0 0 5px;font-weight:650;letter-spacing:-.35px;color:var(--ww-ink)}
    #seasonal-guide h3 {font-size:15px;font-weight:650;margin:0;color:var(--ww-ink)}
    #seasonal-guide p {margin:0}
    #seasonal-guide .ww-muted {color:var(--ww-muted);font-size:12px}
    #seasonal-guide .ww-overview {background:var(--ww-surface);border:1px solid var(--ww-line);border-radius:16px;overflow:hidden}
    #seasonal-guide .ww-panel-head {padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--ww-line)}
    #seasonal-guide .ww-switch {display:flex;flex-wrap:wrap;max-width:100%;gap:4px;background:var(--ww-bg);padding:4px;border-radius:9px}
    #seasonal-guide .ww-switch button {border:0;background:transparent;border-radius:6px;padding:6px 12px;min-height:34px;font-weight:650;font-size:12px}
    #seasonal-guide .ww-switch button[aria-pressed="true"] {background:var(--ww-sea);color:var(--ww-surface)}
    #seasonal-guide .ww-month-grid {display:grid;grid-template-columns:52px minmax(100px,1fr) 70px 96px 94px;gap:12px;align-items:center}
    #seasonal-guide .ww-axis {border-left:3px solid transparent;padding:14px 22px 8px;color:var(--ww-muted);font-size:11px}
    #seasonal-guide .ww-axis > span:nth-last-child(-n+3) {text-align:right}
    #seasonal-guide .ww-row {width:100%;border:0;background:transparent;text-align:left;padding:9px 22px;min-height:44px;position:relative;border-left:3px solid transparent}
    #seasonal-guide .ww-row[aria-pressed="true"] {background:var(--ww-sea-soft);border-left-color:var(--ww-sea)}
    #seasonal-guide .ww-row:hover {background:var(--ww-bg)}
    #seasonal-guide .ww-row[aria-pressed="true"]:hover {background:var(--ww-sea-soft)}
    #seasonal-guide .ww-month {font-weight:600;font-size:13px}
    #seasonal-guide .ww-bar-track {height:25px;margin-right:32px;position:relative;background:linear-gradient(to right,transparent calc(25% - 1px),var(--ww-line) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),var(--ww-line) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),var(--ww-line) 75%,transparent calc(75% + 1px));}
    #seasonal-guide .ww-bar {position:absolute;top:6px;height:14px;left:0;min-width:0;background:var(--ww-sea);border-radius:3px;transition:width .25s ease}
    #seasonal-guide .ww-bar-num {position:absolute;top:2px;left:0;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
    #seasonal-guide .ww-wind {font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
    #seasonal-guide .ww-temp {font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
    #seasonal-guide .ww-chart-note {padding:15px 22px;color:var(--ww-muted);font-size:12px;border-top:1px solid var(--ww-line)}
    #seasonal-guide .ww-detail {margin-top:28px;scroll-margin-top:20px}
    #seasonal-guide .ww-detail-head {display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
    #seasonal-guide .ww-detail-head label {position:relative;margin:0}
    #seasonal-guide .ww-detail-head label:after {content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:2px solid var(--ww-muted);border-bottom:2px solid var(--ww-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
    #seasonal-guide .ww-detail-head select {appearance:none;-webkit-appearance:none;background:var(--ww-surface);border:1px solid var(--ww-line);padding:8px 36px 8px 12px;border-radius:8px;min-height:42px}
    #seasonal-guide .ww-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
    #seasonal-guide .ww-stat {background:var(--ww-surface);border:1px solid var(--ww-line);border-radius:12px;padding:17px 18px}
    #seasonal-guide .ww-stat-label {font-size:12px;color:var(--ww-muted)}
    #seasonal-guide .ww-number {font-size:29px;font-weight:650;letter-spacing:-.8px;margin:3px 0;font-variant-numeric:tabular-nums}
    #seasonal-guide .ww-number small {font-size:13px;font-weight:500;color:var(--ww-muted);letter-spacing:0}
    #seasonal-guide .ww-panels {display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
    #seasonal-guide .ww-panel {padding:20px;background:var(--ww-surface);border:1px solid var(--ww-line);border-radius:12px;min-width:0}
    #seasonal-guide .ww-subtitle {font-size:12px;color:var(--ww-muted);margin-top:4px}
    #seasonal-guide .ww-hour-chart {margin-top:22px;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px;align-items:end;height:150px}
    #seasonal-guide .ww-hour {height:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
    #seasonal-guide .ww-hour-fill {width:100%;max-width:23px;border-radius:4px 4px 0 0;background:var(--ww-sea);min-height:2px}
    #seasonal-guide .ww-hour-label {font-size:11px;color:var(--ww-muted);height:18px;font-variant-numeric:tabular-nums}
    #seasonal-guide .ww-hour-percent {font-size:11px;color:var(--ww-ink);font-variant-numeric:tabular-nums;height:16px}
    #seasonal-guide .ww-direction-summary {margin-top:12px;font-size:15px;font-weight:650;color:var(--ww-ink)}
    #seasonal-guide .ww-direction-bars {list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:13px}
    #seasonal-guide .ww-direction-label {display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px;font-size:12px}
    #seasonal-guide .ww-direction-label strong {font-size:14px;font-variant-numeric:tabular-nums}
    #seasonal-guide .ww-direction-track {height:10px;background:var(--ww-bg);border-radius:6px;overflow:hidden}
    #seasonal-guide .ww-direction-fill {height:100%;background:var(--ww-sea);border-radius:6px}
    #seasonal-guide .ww-compass-toggle {border-top:1px solid var(--ww-line);margin-top:18px;padding-top:14px}
    #seasonal-guide .ww-compass-toggle summary {cursor:pointer;color:var(--ww-sea)}
    #seasonal-guide .ww-rose {height:210px;max-width:250px;margin:8px auto 0}
    #seasonal-guide .ww-rose svg {width:100%;height:100%;overflow:visible}
    #seasonal-guide .ww-rose text {fill:var(--ww-muted);font-size:13px;font-family:inherit}
    #seasonal-guide .ww-about {margin-top:28px;background:var(--ww-surface);border:1px solid var(--ww-line);border-radius:12px;padding:16px 20px}
    #seasonal-guide summary {font-size:13px;font-weight:600;cursor:pointer}
    #seasonal-guide .ww-about-body {padding-top:16px;display:grid;gap:12px;font-size:12px;color:var(--ww-muted);line-height:1.6}
    #seasonal-guide .ww-about-body strong {color:var(--ww-ink);font-weight:600}
    @media(max-width:700px) {#seasonal-guide .ww-main {padding:22px 18px}#seasonal-guide .ww-panels {grid-template-columns:1fr}#seasonal-guide .ww-month-grid {grid-template-columns:30px minmax(25px,1fr) 44px 82px 55px;gap:8px}#seasonal-guide .ww-row,#seasonal-guide .ww-axis {padding-left:12px;padding-right:12px}#seasonal-guide .ww-stat {padding:13px 11px}#seasonal-guide .ww-number {font-size:24px}#seasonal-guide .ww-hour-chart {gap:4px}}
    #seasonal-guide [hidden] {display:none!important}
    #seasonal-guide .ww-water {margin-top:24px;background:var(--ww-surface);border:1px solid var(--ww-line);border-radius:16px;overflow:hidden}
    #seasonal-guide .ww-water-body {padding:20px 22px}
    #seasonal-guide .ww-water select {max-width:100%;padding:8px;border:1px solid var(--ww-line);border-radius:8px;background:var(--ww-bg)}
    #seasonal-guide .ww-water-curve svg {display:block;width:100%;height:auto;margin:14px 0 4px;overflow:visible}
    #seasonal-guide .ww-water-curve text {fill:var(--ww-muted);font-family:inherit;font-size:12px}
    #seasonal-guide .ww-water-months {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:14px 0}
    #seasonal-guide .ww-water-months button {border:0;background:var(--ww-bg);padding:8px 2px;border-radius:7px;font-size:11px;cursor:pointer}
    #seasonal-guide .ww-water-months strong {display:block;font-size:13px;font-weight:650}
    #seasonal-guide .ww-water-months button[aria-pressed="true"] {background:var(--ww-sea-soft);color:var(--ww-sea);outline:1px solid var(--ww-sea)}
    @media(max-width:700px) {#seasonal-guide .ww-water-body {padding:16px 12px}#seasonal-guide .ww-water-months {grid-template-columns:repeat(6,minmax(0,1fr))}#seasonal-guide .ww-water-curve text {font-size:14px}}
    @media(prefers-reduced-motion:reduce) {#seasonal-guide .ww-bar {transition:none}}
#seasonal-guide {margin:0 0 24px;border-radius:12px;overflow:hidden}
#seasonal-guide .ww-status {padding:30px 20px;background:#f7f7f7}
#seasonal-guide .ww-main {padding:24px 18px}
#seasonal-guide .ww-axis {font-size:11px}
#seasonal-guide .ww-bar-track {background:#f5f5f5;border-radius:4px}
#seasonal-guide .ww-hour-chart {grid-template-columns:repeat(15,minmax(0,1fr));height:165px}
#seasonal-guide button:focus-visible,#seasonal-guide select:focus-visible,#seasonal-guide summary:focus-visible {outline:3px solid #0081ad;outline-offset:2px}
#seasonal-guide .ww-rose {max-width:240px}
#seasonal-guide .ww-detail-head h2 {font-size:22px}
@media(max-width:480px) {
 #seasonal-guide .ww-main {padding:16px 8px}
 #seasonal-guide .ww-stats {grid-template-columns:1fr}
 #seasonal-guide .ww-stat {display:grid;grid-template-columns:1fr 85px;gap:4px 8px;align-items:center}
 #seasonal-guide .ww-stat .ww-number {text-align:right;font-size:26px}
 #seasonal-guide .ww-stat .ww-muted {grid-column:1/-1}
 #seasonal-guide .ww-panel {padding:16px 12px}
 #seasonal-guide .ww-hour-chart {gap:2px}
 #seasonal-guide .ww-hour-percent {font-size:9px}
 #seasonal-guide .ww-month-grid {grid-template-columns:28px minmax(16px,1fr) 38px 76px 45px;gap:4px}
 #seasonal-guide .ww-bar-track {margin-right:24px}
 #seasonal-guide .ww-wind,#seasonal-guide .ww-temp {font-size:11px}
}
/* Match Unify's site blue, hover blue and neutral panels; SVGs share this palette. */
#seasonal-guide .ww-switch button:hover {background:#c5ebfe}
#seasonal-guide .ww-switch button[aria-pressed="true"]:hover {background:#0081ad}
#seasonal-guide .ww-chart-grid {stroke:var(--ww-line)}
#seasonal-guide .ww-chart-area,#seasonal-guide .ww-chart-point {fill:var(--ww-sea)}
#seasonal-guide .ww-chart-line {stroke:var(--ww-sea)}
#seasonal-guide .ww-recent-years {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:14px 0 0}
#seasonal-guide .ww-recent-years li {display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ww-ink);font-size:12px;font-variant-numeric:tabular-nums}
#seasonal-guide .ww-recent-track {height:52px;width:20px;display:flex;align-items:flex-end;background:var(--ww-bg)}
#seasonal-guide .ww-recent-fill {width:100%;background:var(--ww-sea)}
#seasonal-guide .ww-recent-year {font-size:11px;color:var(--ww-muted)}
@media(max-width:480px) {#seasonal-guide .ww-recent-years {grid-column:1/-1}}
#seasonal-guide .ww-prevailing {display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;font-size:11px;line-height:16px;max-width:100%}
#seasonal-guide .ww-wind-arrow {display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;font-size:17px;line-height:1}
#seasonal-guide .ww-direction-cell {min-width:0;text-align:right}
#seasonal-guide .ww-axis > span {min-width:0;overflow-wrap:anywhere}
#seasonal-guide .ww-direction-list {flex-direction:column;align-items:flex-end;gap:0;line-height:14px}
#seasonal-guide .ww-direction-sample {display:inline-flex;flex-direction:column;align-items:flex-end;max-width:100%}
#seasonal-guide .ww-direction-sample small,#seasonal-guide .ww-direction-empty {font-size:10px;line-height:13px;white-space:normal}
#seasonal-guide .ww-direction-line {display:flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
#seasonal-guide .ww-direction-primary {font-weight:600}
#seasonal-guide .ww-direction-secondary {font-size:10px;color:var(--ww-muted);line-height:14px}