:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#24404a;background:#fff;font-size:16px;line-height:1.55}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #d0dedf;border-radius:6px;background:#fff;color:#38545e;min-height:40px;padding:7px 13px}button:hover{background:#edf5f4}button:focus-visible,input:focus-visible{outline:3px solid #75b7c1;outline-offset:3px}button[aria-pressed=true]{background:#e3f1f1;color:#0c6876;border-color:#7db5bf;font-weight:650}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}#module{max-width:1220px;margin:auto;padding:22px 26px 12px}.eyebrow{color:#56818c;font-size:16px;letter-spacing:.1em;margin:0 0 3px}h1{font-size:26px;line-height:1.35;font-weight:650;margin:0 0 18px}.cases,.steps,.views,.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.cases{margin-bottom:15px}.steps{border-bottom:1px solid #d6e3e3;gap:4px;padding-bottom:9px;margin-bottom:10px}.steps button{border-color:transparent;background:transparent;padding:6px 12px}.steps button[aria-pressed=true]{background:#147f8c;color:white;border-color:#147f8c}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.views button{font-size:16px;min-height:35px;padding:4px 13px}.quiet{border-color:transparent;background:transparent;color:#437782;padding:6px 9px}#stage{height:460px;background:#f7faf9;position:relative;overflow:hidden;border:1px solid #dce7e5;border-radius:8px}#canvas{position:absolute;inset:0}#canvas canvas{display:block;width:100%;height:100%;touch-action:none}.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.marker{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;padding:3px 7px;background:#fffffff0;border:1px solid #bfd6d7;border-radius:4px;font-size:17px;font-weight:600;color:#246b77}.view-badge,#view-badge{position:absolute;top:11px;left:14px;font-size:16px;color:#496b72;background:#ffffffe6;padding:3px 8px;border-radius:4px;pointer-events:none}#direction{position:absolute;bottom:9px;left:14px;font-size:16px;color:#4f6d72;background:#ffffffe0;padding:2px 6px;pointer-events:none}.lesson-control{padding-top:17px}.lesson-control label{display:flex;justify-content:space-between;gap:12px;font-size:18px;font-weight:550}output{color:#107b88;font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:30px;margin:9px 0 0;accent-color:#137f8c}#lesson-feedback{font-size:18px;line-height:1.65;min-height:30px;margin:7px 0 13px;color:#295963}#lesson-feedback.contact{color:#a14c36}.primary{background:#147f8c;color:#fff;border-color:#147f8c;font-weight:550}.primary:hover{background:#106e79}.subnote{font-size:16px;line-height:1.6;color:#657c83;margin:12px 0 0}footer{font-size:16px;color:#809093;border-top:1px solid #e3eceb;margin-top:19px;padding-top:9px}#fallback{padding:100px 25px;color:#a3493d}@media(max-width:600px){#module{padding:17px 13px 11px}h1{font-size:23px;margin-bottom:13px}.eyebrow{letter-spacing:.04em}.cases{gap:5px;margin-bottom:10px}.cases button{padding:6px 8px;flex:1}.steps{gap:3px}.steps button{padding:6px 8px;font-size:16px}.toolbar{gap:3px}.views{gap:4px}.views button{padding:5px 9px}.quiet{padding:5px 6px}#stage{height:435px}.marker{font-size:16px;padding:3px 5px}#direction{left:8px;bottom:8px;font-size:16px}#view-badge{left:8px;top:8px}#lesson-feedback{font-size:17px}.lesson-control label{font-size:17px}.actions{gap:6px}.actions button{padding:6px 10px}.subnote,footer{font-size:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border:1px solid #d6e3e3;border-radius:7px;background:#f8fbfa}#metrics div{padding:10px 12px;border-right:1px solid #d6e3e3}#metrics div:last-child{border:0}#metrics span{display:block;font-size:15px;color:#61777b}#metrics strong{display:block;font-size:22px;font-weight:600;color:#167d87;font-variant-numeric:tabular-nums}#metrics div:nth-child(2) strong{color:#9a6b3d}#metrics strong.negative{color:#b44335}canvas{cursor:grab}canvas.dragging{cursor:grabbing}footer a{color:#437782}.marker{font-size:15px;border:0;background:#ffffffe0}#stage{height:490px}@media(max-width:600px){#metrics div{padding:8px 6px}#metrics span{font-size:13px}#metrics strong{font-size:19px}#stage{height:410px}#direction{font-size:13px;max-width:95%}.marker{font-size:13px;padding:2px 4px}}

#approach-options{margin-bottom:8px}#approach-legend{display:flex;gap:24px;margin:9px 0 12px;font-size:15px}#approach-legend span:before{content:'';display:inline-block;width:20px;height:8px;margin-right:7px;border-radius:2px;background:#527f8a}#approach-legend .approach-key:before{background:#c28c43}#approach-legend .shore-key:before{background:#76816c}.approach-metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #d6e3e3;border-radius:6px;margin-top:12px}.approach-metrics div{padding:9px 11px}.approach-metrics span{display:block;color:#60747a;font-size:14px}.approach-metrics strong{display:block;font-size:22px;color:#28717d;font-weight:600}.approach-only .marker{font-size:14px;background:#ffffffe8}.approach-only #stage{height:460px}@media(max-width:600px){.approach-metrics div{padding:8px 6px}.approach-metrics span{font-size:12px}.approach-metrics strong{font-size:16px}.approach-only #stage{height:530px}#approach-legend{gap:13px}.approach-only .marker{font-size:12px}}