.s57-wrap{max-width:1120px;margin:auto;padding:1rem 1.25rem 4rem;color:#182033}
.s57-hero{margin:1.5rem 0 2rem;padding:clamp(1.25rem,3vw,2rem);border-radius:1.2rem;background:linear-gradient(135deg,#eff4ff,#effaf7);border:1px solid #dce5f3}
.s57-hero .eyebrow{color:#405681;font-weight:750;letter-spacing:.04em}
.s57-hero h1{margin:.5rem 0;color:#17213b;line-height:1.15}
.s57-hero p{max-width:78ch;line-height:1.65}
.s57-chip{display:inline-block;padding:.25rem .65rem;border-radius:999px;background:#e6f2ef;color:#16554f;font-size:.88rem;font-weight:750}
.s57-panel{margin:1.25rem 0;padding:clamp(1rem,2.4vw,1.5rem);background:#fff;border:1px solid #dbe2ed;border-radius:1rem;box-shadow:0 8px 26px #17213b0c}
.s57-panel h2{margin-top:0;color:#1c2d4f}
.s57-panel h3{color:#213752}
.s57-iframe{display:block;width:min(100%,980px);height:clamp(360px,68vh,650px);margin:1rem auto;border:1px solid #26314d;border-radius:.9rem;background:#05060a}
.s57-note{padding:.9rem 1rem;border-left:4px solid #507f79;background:#f2f8f6;color:#273b39;border-radius:.3rem .65rem .65rem .3rem;line-height:1.6}
.s57-warning{border-left-color:#a9632e;background:#fff7ec;color:#583414}
.s57-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:.8rem}
.s57-card{padding:1rem;border:1px solid #dbe2ed;border-radius:.8rem;background:#f8faff;line-height:1.6}
.s57-card strong{display:block;margin-bottom:.35rem;color:#1b5e57}
.s57-code{overflow:auto;padding:1rem;border-radius:.7rem;background:#111827;color:#e6edf7;font:500 .95rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}
.s57-quiz{padding:1.1rem;border:1px solid #cfd9e8;border-radius:.9rem;background:#f8faff}
.s57-quiz-progress{color:#4b5870;font-weight:700}
.s57-quiz-prompt{white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem;border-radius:.65rem;background:#111827;color:#e8eef8;font:500 .98rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.s57-quiz-options{display:flex;flex-wrap:wrap;gap:.55rem}
.s57-quiz button,.s57-controls button{min-height:42px;padding:.55rem .8rem;border:1px solid #91a0b5;border-radius:.6rem;background:#fff;color:#17213b;font:inherit;cursor:pointer}
.s57-quiz button:hover,.s57-controls button:hover{background:#edf4f5;border-color:#176d67}
.s57-quiz button:focus-visible,.s57-controls button:focus-visible,.s57-controls input:focus-visible{outline:3px solid #1b82a0;outline-offset:2px}
.s57-quiz-feedback{display:block;min-height:3.4em;margin:.8rem 0;color:#173f52;font-weight:700;line-height:1.55}
.s57-quiz-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.s57-quiz button[disabled]{opacity:.65;cursor:default}
.s57-canvas{display:block;width:100%;height:auto;min-height:280px;border:1px solid #25334a;border-radius:.75rem;background:#0b1019}
.s57-controls{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:center;margin:1rem 0}
.s57-controls label{font-weight:750;color:#25324a}
.s57-controls input[type=range]{grid-column:1/-1;width:100%;accent-color:#176d67}
.s57-controls output{color:#125d58;font-weight:800;font-variant-numeric:tabular-nums}
.s57-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.75rem;margin:.8rem 0}
.s57-metric{padding:.9rem;border:1px solid #dbe2ed;border-radius:.7rem;background:#f8faff}
.s57-metric span{display:block;color:#4b5870;font-size:.9rem}
.s57-metric output{display:block;margin-top:.25rem;color:#173f52;font-size:1.2rem;font-weight:800}
.s57-formula{overflow-x:auto;padding:.75rem 1rem;background:#f6f8fc;border-radius:.65rem;color:#1e3152;font:600 1rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}
.s57-related a{color:#125d79;text-underline-offset:3px}.s57-related a:hover{color:#0b3d53}
.s57-related details{margin:.6rem 0;padding:.7rem .9rem;border:1px solid #dbe2ed;border-radius:.65rem;background:#f8faff}
.s57-related summary{cursor:pointer;font-weight:700;color:#1b5e57}
@media(max-width:600px){.s57-wrap{padding-inline:.8rem}.s57-panel{padding:1rem}.s57-iframe{height:430px}.s57-controls{grid-template-columns:1fr auto}}