.frame{position:relative;max-width:1180px;margin:28px auto 64px;padding:14px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 4px var(--ink),0 30px 60px #14120840}.rivet{position:absolute;width:18px;height:18px;background:var(--paper);border:2px solid var(--ink);border-radius:50%}.rivet.tl{top:-10px;left:-10px}.rivet.tr{top:-10px;right:-10px}.rivet.bl{bottom:-10px;left:-10px}.rivet.br{bottom:-10px;right:-10px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 24px;color:#fff;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),linear-gradient(180deg,#0d1130,#161a3d);border-radius:6px}.back{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-decoration:none;opacity:.7}.back:hover{opacity:1}.hero h1{margin:10px 0 0;font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:.06em;text-shadow:0 2px 0 rgba(0,0,0,.6)}.hero h1 span{font-size:.45em;letter-spacing:.2em;opacity:.65}.subtitle{margin:8px 0 0;opacity:.85}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;white-space:nowrap;background:var(--card);border:2px solid var(--ink);border-radius:5px;box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s}.btn:not(:disabled):active{transform:translate(2px,2px);box-shadow:none}.btn.icon{width:36px;padding:0}.btn.wide{width:100%}.btn.light{color:#fff;background:#ffffff14;border-color:#ffffff80;box-shadow:none}.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;margin-top:14px}.main{display:grid;gap:14px;align-content:start;min-width:0}.panel{background:var(--paper-2);border:2px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink);overflow:hidden}.panel .head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;background:linear-gradient(180deg,#2236a8,#1a2887);border-bottom:2px solid var(--ink)}.panel .body{padding:14px 16px}.rail{align-self:start;position:sticky;top:14px}.rail-list{display:grid;gap:6px;padding:10px}.rail .btn.wide{width:calc(100% - 20px);margin:0 10px 12px}.rail-item{display:grid;padding:7px 10px;text-align:left;background:var(--card);border:1.5px solid var(--ink);border-radius:5px}.rail-item small{color:var(--muted);font-size:11px}.rail-item:hover{background:#fff}.rail-item.active{color:#fff;background:var(--navy)}.rail-item.active small{color:#ffffffb3}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.station-trigger{display:flex;align-items:center;gap:10px;padding:0;text-align:left;background:none;border:0}.station-trigger span{display:grid}.station-trigger small{color:var(--muted);font-size:12px}.station-trigger strong{font-size:24px;line-height:1.2}.week{display:flex;gap:8px}.date-strip{display:grid;grid-template-columns:repeat(7,minmax(64px,1fr));gap:6px;padding:0 14px 14px;overflow-x:auto}.date-day{display:grid;justify-items:center;padding:6px 4px;background:var(--card);border:1.5px solid var(--ink);border-radius:5px}.date-day small,.date-day span{font-size:11px;color:var(--muted)}.date-day strong{font-size:16px}.date-day.active{color:#fff;background:var(--blue)}.date-day.active small,.date-day.active span{color:#fffc}.summary{display:grid;grid-template-columns:1.4fr 1fr 1fr;color:#fff;background:var(--navy);border:2px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink)}.summary>div{padding:14px 18px}.summary>div+div{border-left:1px solid rgba(255,255,255,.18)}.summary small{font-size:12px;opacity:.7}.next-type{display:flex;align-items:center;gap:6px;font-weight:600}.next-time{font-size:clamp(36px,6vw,52px);font-weight:700;line-height:1.05}.next-time span{margin-left:6px;font-size:13px;opacity:.6}.stat{display:grid;align-content:end}.stat strong{font-size:28px}.stat strong span{margin-left:4px;font-size:13px;opacity:.6}.legend{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500}.legend i{width:9px;height:9px;border:1.5px solid #fff;border-radius:50%}.legend i.high{background:var(--blue-2)}.legend i.low{background:var(--rust);margin-left:6px}.event-list{display:grid}.event-row{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:12px;padding:10px 16px}.event-row+.event-row{border-top:1px dashed rgba(21,22,26,.3)}.event-row time{font-size:20px;font-weight:600}.event-row strong{font-size:18px}.event-row strong span{font-size:12px;font-weight:400;color:var(--muted)}.event-type{display:inline-flex;align-items:center;gap:4px;font-weight:600}.event-type.high{color:var(--blue)}.event-type.low{color:var(--rust)}.empty{margin:0;padding:14px 16px;color:var(--muted)}.state{display:grid;justify-items:start;gap:10px;padding:24px}.state p{margin:0}.note p{margin:0 0 8px}.note a{display:inline-flex;align-items:center;gap:4px;color:var(--blue)}.tide-chart{position:relative}.tide-chart svg{display:block;width:100%;height:auto;touch-action:pan-y}.chart-grid{stroke:#15161a26;stroke-dasharray:3 4}.chart-y-label,.chart-x-label{fill:var(--muted);font-size:11px}.chart-area{fill:#2a3fb224}.chart-line{fill:none;stroke:var(--blue);stroke-width:2.5}.event-marker line{stroke-dasharray:2 4;stroke-width:1}.event-marker circle{stroke:var(--ink);stroke-width:1.5}.event-marker text{font-size:11px;font-weight:600}.event-marker.high line{stroke:var(--blue)}.event-marker.high circle{fill:var(--blue-2)}.event-marker.high text{fill:var(--blue)}.event-marker.low line{stroke:var(--rust)}.event-marker.low circle{fill:var(--rust)}.event-marker.low text{fill:var(--rust)}.now-line line{stroke:var(--ink);stroke-width:1.5}.now-line text{fill:var(--ink);font-size:11px;font-weight:600}.active-point line{stroke:var(--ink);stroke-opacity:.4}.active-point circle{fill:#fff;stroke:var(--ink);stroke-width:2}.chart-tooltip{position:absolute;top:0;display:grid;padding:4px 10px;pointer-events:none;color:#fff;background:var(--navy);border-radius:4px;transform:translate(-50%)}.chart-tooltip span{font-size:11px;opacity:.7}.chart-tooltip small{opacity:.7}.chart-unit{margin-top:4px;font-size:11px;color:var(--muted);text-align:right}.chart-empty{padding:40px 0;color:var(--muted);text-align:center}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#11142a8c}.modal{display:flex;flex-direction:column;width:min(560px,100%);max-height:min(720px,calc(100dvh - 32px))}.modal .body{overflow-y:auto}.modal p{margin:0 0 10px}.modal-close{display:grid;padding:2px;color:#fff;background:none;border:0}.filters{display:flex;gap:8px}.search{display:flex;flex:1;min-width:0;align-items:center;gap:8px;padding:0 10px;background:#fff;border:2px solid var(--ink);border-radius:5px}.search input{flex:1;min-width:0;min-height:36px;background:none;border:0;outline:none}.filters select{max-width:40%;padding:0 8px;background:var(--card);border:2px solid var(--ink);border-radius:5px}.modal .result-count{margin:10px 0 6px;font-size:12px;color:var(--muted)}.station-list{display:grid;gap:4px}.station-list button{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;text-align:left;background:var(--card);border:1.5px solid transparent;border-radius:5px}.station-list button span{display:grid}.station-list button small{font-size:11px;color:var(--muted)}.station-list button:hover{border-color:var(--ink)}.station-list button.active{border-color:var(--ink);background:#fff}.mobile-only{display:none}@media(max-width:760px){.frame{margin:12px 8px 32px;padding:8px;border-radius:10px}.hero{flex-wrap:wrap;padding:16px}.layout{grid-template-columns:1fr;margin-top:8px;gap:10px}.main{gap:10px}.rail{display:none}.mobile-only{display:block}.summary{grid-template-columns:1fr 1fr}.summary .next{grid-column:1 / -1;border-bottom:1px solid rgba(255,255,255,.18)}.summary>div+div+div{border-left:1px solid rgba(255,255,255,.18)}.summary>.next+.stat{border-left:0}.event-row{grid-template-columns:76px 1fr auto;padding:10px 12px}}:root{--bg: #c9c2a8;--paper: #ece6cf;--paper-2: #e3dcc1;--card: #efe9d2;--ink: #15161a;--muted: #5b5a52;--navy: #11142a;--blue: #2a3fb2;--blue-2: #3858e0;--rust: #b5532a;font-family:IBM Plex Mono,PingFang SC,Hiragino Sans,Noto Sans CJK SC,Microsoft YaHei,ui-monospace,monospace;color:var(--ink);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100dvh;background:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),var(--bg);font-size:14px;line-height:1.6}button,input,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}a{color:inherit}:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}::selection{background:var(--blue);color:#fff}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}