@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink: #2c3e50; --strong: #163033; --muted: #5a6a7c;
  --soft: #f4f7f6; --soft-2: #eef5f3; --line: #d8e3e0;
  --line-strong: #a9bfba; --accent: #006666; --accent-dark: #004d4d;
  --accent-2: #3b9a92; --warm: #d9674f;
  --shadow: 0 18px 45px rgba(0,77,77,.10);
}
* { box-sizing: border-box; }
body { margin:0; font-family:Inter,sans-serif; color:var(--ink); background:#fff; }
.root { max-width:1080px; min-height:100vh; margin:0 auto; padding-bottom:2.75rem; border-top:5px solid var(--accent); box-shadow:0 0 0 1px rgba(0,102,102,.04); position:relative; }
.root::before { content:''; position:absolute; inset:0 0 auto; height:160px; pointer-events:none; background:linear-gradient(135deg,rgba(0,102,102,.09),transparent 58%),repeating-linear-gradient(165deg,rgba(0,102,102,.055) 0 1px,transparent 1px 28px); }
.header { position:relative; display:flex; align-items:center; justify-content:space-between; padding:1.35rem 1.9rem 1.05rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(10px); }
.logo { font:700 14px 'Space Mono',monospace; letter-spacing:.13em; color:var(--accent-dark); display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; }
.logo::before { content:''; width:30px; height:30px; border-radius:7px; background:url('favicon.png') center/cover no-repeat; box-shadow:0 6px 16px rgba(0,77,77,.16); }
.logo span { color:var(--accent-2); font-weight:400; }
.nav { display:flex; gap:1.25rem; }
.nav a { color:var(--muted); text-decoration:none; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.08em; padding-bottom:.2rem; border-bottom:1px solid transparent; }
.nav a:hover,.nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
.hero { position:relative; max-width:850px; padding:5rem 1.9rem 2.5rem; }
.kicker { font:700 12px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
h1 { color:var(--strong); font-size:clamp(2.35rem,6vw,4.9rem); line-height:.98; letter-spacing:-.04em; margin:0 0 1.25rem; }
.lead { max-width:720px; color:var(--muted); font-size:clamp(1.02rem,2vw,1.24rem); line-height:1.75; margin:0; }
.actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:.85rem 1.2rem; text-decoration:none; font-weight:700; font-size:.92rem; border:1px solid var(--line-strong); color:var(--accent-dark); background:#fff; }
.button.primary { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 14px 30px rgba(0,102,102,.22); }
.notice { margin:1rem 1.9rem 2.5rem; padding:1.15rem 1.25rem; border:1px solid rgba(217,103,79,.42); border-left:5px solid var(--warm); border-radius:8px; background:rgba(217,103,79,.07); line-height:1.65; }
.notice strong { display:block; color:var(--warm); font:700 12px 'Space Mono',monospace; letter-spacing:.11em; text-transform:uppercase; margin-bottom:.35rem; }
.content { position:relative; padding:1.5rem 1.9rem 2.5rem; }
.card { background:#fff; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:8px; box-shadow:var(--shadow); padding:1.5rem; }
.controls { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
select,.control { font:600 13px Inter,sans-serif; padding:.55rem .85rem; border:1px solid var(--line-strong); border-radius:7px; background:#fff; color:var(--strong); }
.map-frame { height:clamp(330px,56vw,560px); border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.map-frame img { width:100%; height:100%; object-fit:contain; }
.forecast-summary { margin-top:1rem; border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.summary-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--soft); }
.summary-head h2 { margin:0 0 .25rem; color:var(--strong); font-size:1rem; }
.summary-head p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.45; }
.summary-legend { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.summary-legend span { padding:.25rem .4rem; border-radius:3px; font-size:.65rem; font-weight:700; white-space:nowrap; }
.summary-scroll { max-width:100%; overflow-x:auto; padding-bottom:.25rem; }
.summary-table { border-collapse:separate; border-spacing:0; min-width:max-content; width:100%; font-size:.68rem; }
.summary-table th,.summary-table td { height:25px; padding:0; border-right:1px solid #fff; border-bottom:1px solid #fff; text-align:center; }
.summary-table thead th { position:sticky; top:0; z-index:2; min-width:27px; padding:.3rem .15rem; background:var(--soft-2); color:var(--strong); font-family:'Space Mono',monospace; border-color:var(--line); }
.summary-table .beach-head { left:0; z-index:4; min-width:175px; }
.summary-table tbody th { position:sticky; left:0; z-index:3; width:175px; max-width:175px; padding:.25rem .5rem; background:#fff; color:var(--ink); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-color:var(--line); font-weight:600; }
.summary-table tbody th span { display:inline-flex; align-items:center; justify-content:center; width:20px; height:18px; margin-right:.4rem; border-radius:3px; background:var(--accent-dark); color:#fff; font-size:.62rem; }
.summary-cell { display:block; width:100%; min-width:27px; height:25px; padding:0; border:0; cursor:pointer; opacity:.9; }
.summary-cell:hover { opacity:1; outline:2px solid var(--ink); outline-offset:-2px; }
.summary-cell.current { box-shadow:inset 3px 0 #111,inset -3px 0 #111; opacity:1; }
.summary-loading { padding:1rem; color:var(--muted); font-size:.8rem; }
.timeline-head,.player { display:flex; align-items:center; gap:.6rem; margin-top:1rem; }
.timeline-head { justify-content:space-between; }
.time { font:12px 'Space Mono',monospace; color:var(--accent-dark); background:var(--soft-2); padding:.38rem .7rem; border:1px solid var(--line); border-radius:6px; }
.count { font-size:11px; color:var(--muted); font-weight:700; }
input[type=range] { width:100%; accent-color:var(--accent); margin:.8rem 0 .2rem; }
.gc-slider { width:100%; height:3px; appearance:none; background:linear-gradient(90deg,var(--accent),var(--accent-2) 55%,var(--line)); border-radius:2px; outline:none; cursor:pointer; }
.gc-slider::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent-dark); cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--accent-dark),0 2px 9px rgba(0,102,102,.28); }
.gc-player-row { display:flex; align-items:center; gap:.55rem; margin-top:1rem; margin-bottom:1.1rem; }
.gc-play-btn { font-size:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; flex-shrink:0; position:relative; color:transparent; }
.gc-play-btn:hover { background:var(--soft); border-color:var(--muted); }
.gc-play-btn:focus { outline:none; box-shadow:0 0 0 3px rgba(59,154,146,.2); }
.gc-play-btn.playing { background:var(--accent); border-color:var(--accent); color:#fff; }
.gc-play-btn::before,.gc-play-btn::after { content:''; position:absolute; top:50%; transform:translateY(-50%); transition:all .12s; pointer-events:none; }
.gc-play-btn::before { left:50%; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid var(--accent-dark); transform:translate(-38%,-50%); }
.gc-play-btn::after { opacity:0; }
.gc-play-btn.playing::before,.gc-play-btn.playing::after { width:4px; height:14px; border:0; border-radius:1px; background:#fff; opacity:1; transform:translateY(-50%); }
.gc-play-btn.playing::before { left:calc(50% - 5px); }
.gc-play-btn.playing::after { left:calc(50% + 1px); }
.gc-step-btn { font-size:11px; width:28px; height:28px; border-radius:4px; border:1px solid var(--line-strong); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; color:#4b535b; }
.gc-step-btn:hover { background:var(--soft); border-color:var(--muted); color:var(--ink); }
.gc-step-btn:focus { outline:none; box-shadow:0 0 0 3px rgba(59,154,146,.2); }
.gc-speed-select { font-family:Inter,sans-serif; font-size:11px; font-weight:600; padding:.36rem .5rem; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; outline:none; }
.days { display:flex; gap:4px; flex-wrap:wrap; margin-top:1rem; }
.day { border:1px solid var(--line); background:#fff; border-radius:5px; min-width:55px; padding:.35rem; text-align:center; cursor:pointer; color:var(--muted); }
.day.active { color:#fff; background:var(--accent-dark); border-color:var(--accent-dark); }
.day b { display:block; font:700 12px 'Space Mono',monospace; }
.error { color:var(--warm); font-weight:700; text-align:center; padding:2rem; }
.article { max-width:960px; margin:1.8rem auto 0; padding:2rem; background:#fff; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:8px; box-shadow:var(--shadow); position:relative; }
.article h1 { font-size:clamp(2rem,5vw,3.5rem); }
.article h2 { color:var(--accent-dark); margin:2rem 0 .7rem; padding-top:.7rem; border-top:1px solid var(--line); }
.article p,.article li { line-height:1.72; }
.article table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.88rem; }
.article th,.article td { border:1px solid var(--line); padding:.65rem; text-align:center; }
.article th { background:var(--soft-2); color:var(--strong); }
.low{background:#0b6b25;color:#fff}.moderate{background:#f2c94c}.high{background:#f28c18}.very-high{background:#8b0015;color:#fff}.extreme{background:#6f087f;color:#fff}.na{background:#ddd}
.technical { font-family:'Space Mono',monospace; font-size:.87rem; background:var(--soft); border-left:4px solid var(--accent-2); padding:1rem; overflow:auto; }
.validation-head { margin-bottom:1.2rem; }
.validation-head h1 { font-size:clamp(2rem,5vw,3.4rem); margin-bottom:.8rem; }
.chart-wrap { position:relative; width:100%; height:520px; border:1px solid var(--line); border-radius:8px; padding:.8rem; background:#fff; box-shadow:var(--shadow); }
.chart-status { margin:.8rem 0; padding:.7rem 1rem; background:var(--soft-2); border-left:4px solid var(--accent-2); font-size:.88rem; }
.chart-tools { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.5rem 0; color:var(--muted); font-size:.8rem; }
.chart-tools button { border:1px solid var(--line); border-radius:5px; padding:.4rem .75rem; background:#fff; color:var(--ink); cursor:pointer; }
.chart-tools button:hover { border-color:var(--accent-2); color:var(--accent-2); }
.method-note { margin-top:1.2rem; color:var(--muted); font-size:.88rem; line-height:1.65; }
.footer { position:relative; margin:0 1.9rem; padding:1.35rem 0 0; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.footer a { color:var(--accent); text-decoration:none; font-weight:700; }
@media(max-width:700px){.header{align-items:flex-start;flex-direction:column;gap:1rem;padding:1rem}.nav{width:100%;justify-content:space-between;gap:.35rem}.nav a{font-size:9px}.hero,.content{padding-left:1rem;padding-right:1rem}.notice,.footer{margin-left:1rem;margin-right:1rem}.article{margin:1rem;padding:1.2rem}.map-frame{height:78vw}.controls select{width:100%;font-size:16px}.article table{font-size:.72rem}.article th,.article td{padding:.35rem}.logo{font-size:16px}.chart-wrap{height:420px}.summary-head{display:block}.summary-legend{justify-content:flex-start;margin-top:.65rem}.summary-table .beach-head{min-width:140px}.summary-table tbody th{width:140px;max-width:140px}}