:root{color-scheme:light;--ink:#23464b;--muted:#4d696a;--paper:#e0ebe5}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#c5cfdb;color:var(--ink);font:18px/1.65 Georgia,serif}main{max-width:1180px;margin:24px auto;background:var(--paper);border:1px solid #e9f4ec;box-shadow:0 24px 70px #31464f40;overflow:hidden}nav{padding:22px 36px;font:13px Tahoma,sans-serif}a{color:#245f88}header{padding:10px 50px 30px}h1{font-size:clamp(38px,5.8vw,70px);line-height:1.08;font-weight:400;letter-spacing:-.04em;margin:15px 0 25px;max-width:850px}header p{font-size:22px;max-width:770px}section{padding:35px 50px}h2{font-size:34px;line-height:1.2;font-weight:400;margin:0 0 22px;letter-spacing:-.025em}h3{font-weight:400;font-size:25px}p{max-width:900px}.landscape{padding:0}#scene{height:570px;position:relative;background:#a7c7c3}#scene img{width:100%;height:100%;object-fit:cover}#scene canvas{position:absolute;inset:0;width:100%;height:100%}.scene-controls,.tide-control{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:16px 24px;background:linear-gradient(#edf9efd9,#b6d1ca);box-shadow:inset 0 1px #fff}.scene-controls label{font:14px Tahoma,sans-serif;display:flex;align-items:center;gap:6px}button{font:14px Tahoma,sans-serif;min-height:44px;padding:10px 16px;border:1px solid #6e9daf;border-radius:5px;background:linear-gradient(#c3e6ed,#72a9bc 50%,#357696);color:#113950;box-shadow:inset 0 1px #f1ffff,0 3px 7px #3b69702a;cursor:pointer}button:hover{filter:brightness(1.07)}button:active,button[aria-pressed=true]{box-shadow:inset 0 2px 5px #23465a66}button:focus-visible,input:focus-visible{outline:3px solid #287bb8;outline-offset:3px}#scene-note{padding:0 30px;font:13px/1.6 Tahoma,sans-serif}.tide-instrument{padding:25px 24px;background:linear-gradient(120deg,#e4f2e8,#cee0d5)}.tide-control{border:1px solid #f3fcf4;border-radius:9px}.tide-control input{flex:1;min-width:140px;accent-color:#2d7494}.tide-control label,.tide-control strong{font:14px Tahoma,sans-serif}#section-diagram{overflow-x:auto}#section-diagram svg{display:block;width:100%;min-width:730px;height:auto}#phase-note{font-size:20px;margin:12px 20px}.small{font:14px/1.65 Tahoma,sans-serif;color:var(--muted)}.tide-instrument .small{margin-inline:20px}form{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;margin:25px 0}form label{font:14px/1.45 Tahoma,sans-serif;display:flex;flex-direction:column;gap:7px}form small{color:var(--muted);font-size:12px}input[type=number]{width:100%;min-height:44px;padding:8px 12px;border:1px solid #99ada9;border-radius:4px;font:17px Tahoma,sans-serif;background:linear-gradient(#eff2e8,#fff);color:#203d47;box-shadow:inset 0 2px 4px #3657451a}.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:25px 0;border-block:1px solid #a4c0b8;margin:25px 0}.readouts div{font:14px/1.5 Tahoma,sans-serif}.readouts strong{display:block;font:36px/1.3 Georgia,serif;color:#205764;letter-spacing:-.02em}.readouts small{font-size:12px;color:var(--muted)}.chart{margin:35px 0}#cycle-chart{display:block;width:100%;height:auto;background:linear-gradient(#f0f7e8,#cbdfd4);border-radius:6px}.key{display:flex;gap:20px;font:13px Tahoma,sans-serif}.key span:nth-child(1){color:#266f83}.key span:nth-child(2){color:#779752}.key span:nth-child(3){color:#98743e}.scale-line{height:17px;background:#b9cec5;border-radius:20px;overflow:hidden}#scale-progress{height:100%;background:linear-gradient(90deg,#347f83,#89b897)}#error{color:#8c372c;font:15px Tahoma,sans-serif}.embed main{margin:0;border:0;box-shadow:none}.embed nav,.embed header,.embed .full-study,.embed .tide-instrument{display:none}.embed #scene{height:470px}.embed #scene-note{margin:12px 22px;padding:0}.embed .scene-controls{padding:12px}.embed main{max-width:none}@media(max-width:720px){main{margin:0 10px}nav{padding:18px 22px}header,section{padding:25px}#scene{height:420px}form{grid-template-columns:repeat(2,1fr);gap:16px}.readouts{grid-template-columns:1fr;gap:18px}.readouts strong{font-size:32px}.scene-controls{padding:12px}.scene-controls button{flex:1;white-space:nowrap}.tide-instrument{padding:15px}.key{flex-wrap:wrap}h2{font-size:29px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}