.sea-learning-tool{margin:2rem 0;padding:clamp(1rem,3vw,1.5rem);border:1px solid #cadbe4;border-radius:16px;background:#f4f9fc;color:#17344a;overflow-wrap:anywhere}
.sea-learning-tool [hidden]{display:none!important}
.sea-learning-tool h2{margin-top:0;scroll-margin-top:1rem}
.sea-learning-tool h2:target,.sea-learning-tool h2:focus{outline:2px solid #217d8d;outline-offset:4px}
.sea-learning-tool .sea-tool-warning{padding:.8rem 1rem;background:#fff;border-left:4px solid #b26723}
.sea-tool-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.sea-tool-fields label{display:grid;gap:.45rem;font-weight:650;min-width:0}
.sea-tool-fields input,.sea-tool-fields select{width:100%;min-width:0;min-height:44px;box-sizing:border-box;font:inherit;padding:.65rem;border:1px solid #657e8d;border-radius:8px;background:#fff;color:#17344a}
.sea-tool-fields input[aria-invalid=true]{border:2px solid #a33422}
.sea-learning-tool .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}
.sea-learning-tool button{min-height:44px;max-width:100%;white-space:normal;text-align:center}
.sea-learning-tool button:disabled{cursor:not-allowed;opacity:.65}
.sea-learning-tool button:focus-visible,.sea-learning-tool input:focus-visible,.sea-learning-tool select:focus-visible{outline:3px solid #217d8d;outline-offset:3px}
.sea-tool-result{display:block;margin:1rem 0;padding:1rem;background:#fff;border:1px solid #b5ccd7;border-radius:8px;font-weight:650}
.sea-tool-error{color:#932c1d;font-weight:650}
.sea-learning-tool summary{min-height:44px;padding:.65rem 0;cursor:pointer;font-weight:650}
.sea-learning-tool table{width:100%;border-collapse:collapse;font-size:1rem;table-layout:fixed}
.sea-learning-tool th,.sea-learning-tool td{padding:.5rem;text-align:left;border-bottom:1px solid #cadbe4}
.sea-signal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sea-signal-card{display:flex;flex-direction:column;align-items:flex-start;padding:1rem;border:1px solid #cadbe4;border-radius:12px;background:white;min-width:0}
.sea-signal-card h3{margin:0}
.sea-signal-card button{margin-top:auto}
.sea-signal-pattern{display:flex;gap:.5rem;align-items:center;min-height:1rem}
.sea-tone{display:inline-block;height:.6rem;border-radius:.3rem;background:#196574}
.sea-tone-short{width:1rem}.sea-tone-long{width:4rem}
.sea-signal-grid>.actions,.sea-signal-grid>[role=status]{grid-column:1/-1;margin:.25rem 0}
@media(max-width:560px){.sea-tool-fields,.sea-signal-grid{grid-template-columns:minmax(0,1fr)}.sea-learning-tool{padding:1rem}.sea-learning-tool .actions>*{flex:1 1 100%}.sea-signal-card button{width:100%}}

/* 0.10.49: user-controlled teaching motion; no perpetual decorative animation. */
.sea-reaction-scene{margin:1rem 0 0;padding:1rem;border:1px solid #b5ccd7;border-radius:12px;background:#fff}
.sea-reaction-scene figcaption{display:grid;gap:.4rem;font-size:.95rem}
.sea-reaction-track{display:block;width:100%;height:auto;margin:.5rem 0;overflow:visible}
.sea-motion-water{fill:#edf6fa}.sea-motion-axis{fill:none;stroke:#637e8d;stroke-width:2}
.sea-motion-travel{fill:none;stroke:#217d8d;stroke-width:4;stroke-linecap:round}
.sea-motion-hull{fill:#17344a}.sea-motion-cabin{fill:#217d8d}.sea-motion-window{fill:#fff}
.sea-motion-tick{font:18px system-ui,sans-serif;fill:#17344a}
.sea-motion-readout{font-variant-numeric:tabular-nums;font-weight:650;min-height:1.6em}
.sea-reaction-scene [data-motion-status]{min-height:3em;margin:.75rem 0}
.sea-sound-meter-slot{width:100%;height:1.35rem}
.sea-sound-meter{width:100%;height:.35rem;margin:0;background:#e0edf1;border-radius:.2rem;overflow:hidden}
.sea-sound-meter>span{display:block;width:100%;height:100%;background:#217d8d;transform-origin:left;transform:scaleX(0)}
.sea-tone.is-sounding{outline:2px solid #17344a;outline-offset:4px;background:#c28c21}
@media(prefers-reduced-motion:reduce){.sea-reaction-track *,.sea-sound-meter *,.sea-tone{animation:none!important;transition:none!important}}
@media(max-width:560px){.sea-reaction-scene{padding:.75rem}.sea-motion-tick{font-size:28px}.sea-motion-tick[data-motion-tick="1"],.sea-motion-tick[data-motion-tick="3"]{display:none}}