:root{--ink:#eaf5fb;--muted:#9ab9ca;--line:#294b65;--sea:#78f4e7;--storm:#c7adff;--surface:#102a45;--deep:#07192c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% -10%,#184467 0,transparent 34%),var(--deep);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.65}button,input{font:inherit}button{cursor:pointer}a{color:var(--sea)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #f9d991;outline-offset:3px}.page{width:min(1180px,calc(100% - 36px));margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;height:70px;gap:16px}.brand{text-decoration:none;color:#fff;font-weight:900;font-size:19px;letter-spacing:-.04em}.brand span{font-size:12px;color:#9fc5d0;font-weight:700;letter-spacing:0}.header-tag{border:1px solid #528099;border-radius:999px;padding:5px 11px;color:#a8eff0;font-size:10px;font-weight:900;letter-spacing:.16em}
.hero{display:flex;justify-content:space-between;position:relative;overflow:hidden;min-height:265px;padding:38px 46px;border:1px solid #3d6680;border-radius:24px;background:linear-gradient(115deg,#133a57,#0e2948 57%,#09223d)}.eyebrow{margin:0;color:var(--sea);font-size:11px;font-weight:900;letter-spacing:.2em}.hero h1{position:relative;z-index:1;margin:11px 0;font-size:clamp(38px,5vw,66px);line-height:1.1;letter-spacing:-.06em}.hero h1 em{color:#88fcf2;font-style:normal}.hero p:last-child{position:relative;z-index:1;max-width:665px;margin:14px 0 0;color:#c6deea;font-size:14px}.hero-mark{position:absolute;right:50px;top:11px;width:270px;height:260px;opacity:.7}.hero-mark i{position:absolute;border:3px solid #61d7e5;border-radius:50%;transform:rotate(-27deg)}.hero-mark i:nth-child(1){inset:10px 0}.hero-mark i:nth-child(2){inset:40px 30px}.hero-mark i:nth-child(3){inset:70px 60px}.hero-mark b{position:absolute;left:82px;top:55px;color:#9ffff4;font-size:95px;font-weight:400}
.verdict{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:18px 0;padding:17px 24px;border:1px solid #4e8a94;border-left:5px solid var(--sea);border-radius:15px;background:#123d50}.verdict-kicker{color:#a9d8db;font-size:11px;font-weight:900}.verdict h2{margin:0;color:#a6fff0;font-size:clamp(20px,2.5vw,28px);letter-spacing:-.04em}.verdict p{margin:0 0 0 auto;color:#d3e5e9;font-size:13px}
.workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(270px,.8fr);gap:16px}.scene-panel,.controls-panel{min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px}.panel-heading span{color:#7cded8;font-size:10px;font-weight:900;letter-spacing:.12em}.panel-heading h2{margin:2px 0 0;font-size:19px;letter-spacing:-.04em}.panel-heading>strong{padding:5px 10px;border:1px solid #477787;border-radius:9px;color:#c1fff4;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}.scene-wrap{background:#0b243e}.scene-wrap svg{display:block;width:100%;height:auto}.scene-label{fill:#8dcedc;font-size:23px;font-weight:800}.land-label{fill:#443920}.scene-caption{fill:#b5d3dd;font-size:16px;font-weight:700}.marker-label{font-size:20px;font-weight:900}.swell-label{fill:#075964}.storm-label{fill:#483068}.scene-bottom{padding:16px 22px 21px}.legend{display:flex;gap:18px;flex-wrap:wrap;color:#c4d9df;font-size:11px;font-weight:700}.legend span{display:flex;align-items:center;gap:7px}.legend i,.number-dot{display:inline-block;width:11px;height:11px;flex:none;border-radius:50%}.swell-dot{background:var(--sea)}.storm-dot{background:var(--storm)}.timeline-markers{position:relative;height:17px;margin:10px 3px 0;border-bottom:2px solid #457189}.tick{position:absolute;bottom:-5px;width:7px;height:12px;border-radius:3px;transform:translateX(-50%)}.swell-tick{background:var(--sea)}.storm-tick{background:var(--storm)}.scrub-label{display:flex;justify-content:space-between;margin:12px 0 4px;color:#bfdae4;font-size:11px;font-weight:800}.scrub-label span{color:#8aaebf;font-weight:600}.scene-bottom input[type=range]{display:block;width:100%;margin:8px 0 17px;accent-color:var(--sea)}.transport{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.transport button{border:1px solid #5c9f9c;border-radius:10px;padding:9px 14px;background:#66e4d6;color:#082a35;font-size:12px;font-weight:900}.transport button+button{background:transparent;color:#c6ece9}.transport span{margin-left:auto;color:#8fb1be;font-size:10px}
.controls-panel .panel-heading{padding-bottom:9px}.presets{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 15px}.presets button{padding:6px 9px;border:1px solid #497087;border-radius:999px;background:#173b57;color:#cae0e8;font-size:10px;font-weight:800}.presets button.active{background:#aaf9eb;border-color:#aaf9eb;color:#0c3640}.control{margin:0 20px;padding:15px 0 18px;border-top:1px solid #31516a}.control label{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#d6e8ed;font-size:12px;font-weight:800}.control label strong{color:var(--sea);font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}.control input[type=range]{width:100%;margin:13px 0 3px;accent-color:var(--sea)}.ends{display:flex;justify-content:space-between;color:#85a8b7;font-size:10px}.control p{margin:12px 0 0;color:#9dc0cb;font-size:11px}
.numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.numbers>div{position:relative;padding:18px 22px 18px 45px;border:1px solid var(--line);border-radius:16px;background:#112d49}.numbers .number-dot{position:absolute;left:22px;top:24px}.numbers small,.numbers span:last-child{display:block;color:#9bb7c6;font-size:11px}.numbers strong{display:block;margin:4px 0;color:#fff;font-size:27px;font-variant-numeric:tabular-nums}.explainer{display:grid;grid-template-columns:250px 1fr;gap:25px;margin:33px 0;padding:27px 30px;border-top:1px solid #42627a;border-bottom:1px solid #42627a}.step{color:var(--sea);font-size:11px;font-weight:900;letter-spacing:.16em}.explainer h2{margin:8px 0;font-size:25px;line-height:1.35;letter-spacing:-.04em}.explainer p{margin:0 0 12px;color:#bfd7df;font-size:13px}.explainer .formula{display:inline-block;padding:8px 12px;border:1px solid #4b8592;border-radius:8px;color:#abf6ed;font-size:13px;font-weight:900}.explainer .safety{color:#d4c7a7;font-size:11px}.explainer .sources{font-size:11px}footer{display:flex;justify-content:space-between;gap:16px;padding:0 0 35px;color:#7f9da9;font-size:11px}footer a{text-decoration:none;font-weight:800}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.controls-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.controls-panel .panel-heading,.presets{grid-column:1/-1}.control{margin:0 14px}.control label{display:block}.control label strong{display:block}.hero-mark{right:-50px;opacity:.25}.verdict p{margin-left:0}}
@media(max-width:640px){.page{width:calc(100% - 24px)}.site-header{height:59px}.brand{font-size:16px}.brand span{font-size:10px}.header-tag{font-size:8px}.hero{padding:27px 22px;min-height:0;border-radius:17px}.hero h1{font-size:42px}.hero p:last-child{font-size:12px}.verdict{display:block;padding:15px 17px}.verdict h2{margin:4px 0}.verdict p{font-size:12px}.panel-heading{padding:16px}.panel-heading h2{font-size:16px}.scene-bottom{padding:13px 16px 17px}.transport span{width:100%;margin:0}.controls-panel{display:block}.controls-panel .panel-heading{padding-bottom:8px}.presets{padding:0 16px 12px}.control{margin:0 16px}.control label{display:flex}.control label strong{display:inline}.numbers{gap:9px}.numbers>div{padding:14px 10px 13px 25px}.numbers .number-dot{left:10px;top:21px;width:8px;height:8px}.numbers strong{font-size:20px}.explainer{display:block;padding:22px 8px}.explainer h2{font-size:22px;margin-bottom:15px}.explainer .formula{font-size:11px}.hero-mark{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}