:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f8fb;--surface:#ffffffdb;--surface-strong:#fff;--line:#d7e4ec;--text:#10212b;--muted:#5e7684;--primary:#11739c;--primary-strong:#0b5d7e;--success:#2f855a;--error:#c53030;--shadow:0 24px 60px #113c531f}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(circle at top left, #11739c2e, transparent 32%), linear-gradient(180deg, #f5fbff 0%, var(--bg) 52%, #edf6fb 100%);color:var(--text);margin:0;font-family:Hiragino Sans,Yu Gothic,Noto Sans JP,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}.page-shell{max-width:1380px;margin:0 auto;padding:32px 20px 48px}.hero{box-shadow:var(--shadow);background:linear-gradient(135deg,#ffffffeb,#f1f9fdd6),linear-gradient(120deg,#11739c24,#0000 50%);border:1px solid #fffc;border-radius:28px;justify-content:space-between;gap:24px;padding:28px 32px;display:flex}.eyebrow,.section-kicker,.meta-chip span,.stat-card span,.field span{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.78rem}.hero h1,.section-header h2{margin:8px 0 0}.hero h1{font-size:clamp(2.5rem,5vw,4.4rem);line-height:.95}.hero-copy{max-width:42rem;color:var(--muted);margin:16px 0 0;font-size:1rem;line-height:1.7}.selection-strip{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.selection-pill{color:var(--muted);background:#ffffffb8;border:1px solid #11739c1f;border-radius:999px;padding:8px 12px;font-size:.9rem}.selection-pill.is-strong{color:var(--text);border-color:#11739c59;font-weight:700}.hero-meta{align-content:start;gap:14px;min-width:250px;display:grid}.meta-chip,.card,.stat-card{background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);border:1px solid #fffc}.meta-chip{border-radius:18px;padding:16px 18px}.meta-chip strong{margin-top:6px;font-size:1.1rem;display:block}.main-layout{grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:24px;margin-top:24px;display:grid}.card{border-radius:24px;padding:24px}.sidebar{align-self:start;position:sticky;top:20px}.content-column{gap:24px;display:grid}.section-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.sidebar-total{color:var(--muted);justify-items:end;display:grid}.sidebar-total strong{color:var(--text);font-size:1.35rem}.pill-grid,.stack-list,.target-grid,.button-row,.stats-grid{gap:12px;display:grid}.pill-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pill,.list-button,.ghost-button,.primary-button,.secondary-button{border:1px solid var(--line);color:var(--text);background:#ffffffb3;border-radius:16px;transition:transform .18s,border-color .18s,background .18s}.pill,.ghost-button,.primary-button,.secondary-button{padding:12px 14px}.pill:hover,.list-button:hover,.ghost-button:hover,.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.pill.is-active,.list-button.is-selected{background:#11739c1f;border-color:#11739c99}.subsection{margin-top:20px}.subsection h3{margin:0 0 10px;font-size:.95rem}.subsection-header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;display:flex}.subsection-header span,.helper-copy,.overview-caption{color:var(--muted);font-size:.92rem}.helper-copy{margin:10px 0 0;line-height:1.6}.stack-list{max-height:300px;overflow:auto}.station-list{max-height:420px}.list-button{text-align:left;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.list-button span{font-weight:700}.list-button span,.list-button small{display:block}.list-button small,.muted-copy,.trend-label{color:var(--muted)}.field{gap:8px;display:grid}.field input{border:1px solid var(--line);width:100%;color:var(--text);background:#ffffffd6;border-radius:14px;padding:12px 14px}.field input:focus{border-color:var(--primary);outline:2px solid #11739c2e}.ghost-button,.secondary-button{background:#ffffffd1}.primary-button{background:var(--primary);border-color:var(--primary);color:#fff}.primary-button:hover{background:var(--primary-strong)}.primary-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.button-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}.chart-panel{background:linear-gradient(180deg, #11739c17, transparent 55%), var(--surface-strong);border:1px solid #11739c1f;border-radius:20px;padding:14px}.tide-chart{width:100%;height:auto;display:block}.chart-grid{stroke:var(--line);stroke-width:1px}.chart-label{fill:var(--muted);font-size:11px}.chart-line{fill:none;stroke:var(--primary);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.chart-now{stroke:#db8a15;stroke-width:2px;stroke-dasharray:6 6}.chart-target{stroke:var(--primary-strong);stroke-width:2px;stroke-dasharray:8 4}.chart-high{fill:#d94841}.chart-low{fill:var(--success)}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}.stat-card{border-radius:18px;padding:18px}.stat-card strong{margin-top:8px;font-size:1.5rem;display:block}.stat-card.is-featured{background:linear-gradient(135deg, #11739c29, #ffffffd9), var(--surface);border-color:#11739c47}.stat-card small{color:var(--muted);margin-top:4px;display:block}.target-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.error-banner{color:var(--error);background:#c5303014;border:1px solid #c5303047;border-radius:16px;margin-bottom:18px;padding:14px 16px}.hourly-table{display:grid}.hourly-row{border-top:1px solid #d7e4eccc;grid-template-columns:70px minmax(0,1fr) 90px 60px;align-items:center;gap:14px;padding:12px 0;display:grid}.hourly-row.is-current{background:linear-gradient(90deg,#11739c1a,#0000 72%);border-radius:14px;padding-inline:12px}.hourly-row:first-child{border-top:none}.progress-track{background:#11739c1f;border-radius:999px;height:10px;overflow:hidden}.progress-bar{background:linear-gradient(90deg, #6dcbe0, var(--primary));border-radius:999px;height:100%}.hour-label,.value-label{font-weight:700}@media (width<=1120px){.main-layout,.stats-grid,.target-grid{grid-template-columns:1fr}.sidebar{position:static}}@media (width<=720px){.page-shell{padding:20px 14px 36px}.hero,.hourly-row{grid-template-columns:1fr}.hero{padding:22px}.hero-meta{min-width:0}.pill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-header,.subsection-header{flex-direction:column;align-items:flex-start}.button-row{grid-template-columns:1fr}.hourly-row{gap:8px}}.page-footer{text-align:center;margin-top:48px;padding:32px 0}.footer-copy{max-width:800px;color:var(--muted);margin:0 auto;font-size:.6rem;line-height:1.6}