:root{font-family:system-ui,sans-serif;background:#eef3f5;color:#183445;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}main{max-width:1250px;margin:auto;padding:30px 48px}header{display:flex;justify-content:space-between;gap:20px;font-size:13px;align-items:center}a{color:#235d83;text-underline-offset:5px}header span{color:#536c7a}.intro{margin:44px 0 35px;display:flex;align-items:baseline;gap:28px}.intro h1{font-size:52px;font-weight:650;letter-spacing:.04em;line-height:1.2;margin:0}.intro p{font-size:16px;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:40px}.map-panel{background:white;border-radius:9px;overflow:hidden;align-self:start}.map-top{display:flex;justify-content:space-between;align-items:center;padding:24px 27px 0;font-size:15px}.map-top span{color:#536c7a}svg{width:100%;display:block;min-height:220px}path{stroke-width:9;transition:opacity .2s,stroke-width .2s}#path-shore{stroke:#a45d24}#path-direct{stroke:#235d83}#path-grove{stroke:#277064}.route-labels{font-size:18px;fill:#183445}.endpoint{fill:#183445;stroke:white;stroke-width:3}.endpoint-label{fill:#4d6573;font-size:16px}.map-foot{display:flex;gap:20px;align-items:center;font-size:12px;padding:0 27px;color:#536c7a}.you-key{color:#183445;display:inline-flex;align-items:center;gap:7px}.you-key:before{content:'';display:block;width:10px;height:10px;border-radius:50%;background:#183445;border:2px solid white;outline:2px solid #183445}#map-observation{padding:15px 27px 22px;margin:0;font-size:14px;font-weight:550}.step{font-size:13px;color:#536c7a;margin:0 0 12px}.controls h2{font-size:26px;font-weight:650;margin:0 0 12px}#hint{min-height:40px;line-height:1.7;font-size:14px;margin:0 0 18px}#choices{display:grid;gap:10px}.route-choice{text-align:left;background:white;border:2px solid transparent;border-radius:5px;min-height:72px;padding:12px 16px;color:#183445;display:grid;grid-template-columns:1fr auto;gap:4px 12px}.route-choice .route-name{font-size:17px;font-weight:650}.route-choice .time{font-size:20px;align-self:center;grid-column:2;grid-row:1 / 3}.route-choice .detail{font-size:12px;color:#49616f}.route-choice[aria-pressed=true]{border-color:#235d83;background:#e3eef5}.recommend{font-size:11px;font-weight:500;margin-left:8px;background:#d8e8f1;padding:3px 7px;border-radius:3px;color:#1c4a69}.selection-status{font-size:13px;line-height:1.7;min-height:22px;margin:16px 0 12px}.primary{background:#235d83;color:#fff;border:0;border-radius:5px;padding:15px 23px;min-height:48px;font-weight:600}.controls .primary{width:100%}.primary:disabled{background:#bfccd4;color:#324c5c;cursor:default}.back{background:transparent;color:#235d83;border:0;padding:13px 3px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.controls .back{display:block;margin:8px auto 0}.controls .back[hidden]{display:none}button:focus-visible,a:focus-visible{outline:3px solid #a45d24;outline-offset:4px}button:not(:disabled):hover{filter:brightness(.97)}footer{font-size:13px;display:flex;gap:40px;margin:35px 0 0;line-height:1.8;color:#49616f}footer strong{color:#183445;font-weight:650}.ending{margin:24px 0;padding:35px 40px;background:#fff;border-radius:9px}.ending>p:first-child{color:#536c7a;margin:0 0 12px}.ending h2{font-size:31px;font-weight:650;margin:0 0 24px}#journey{display:flex;flex-wrap:wrap;gap:16px}#journey span{padding:12px 16px;background:#eef3f5;border-radius:4px;font-size:14px}#ending-minutes{font-size:23px;font-weight:600;margin:28px 0 12px}#ending-observation{font-size:14px;line-height:1.8}.ending-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:25px}[hidden]{display:none!important}
@media(max-width:850px){main{padding:24px}.layout{gap:24px;grid-template-columns:minmax(0,1fr) minmax(260px,1fr)}.intro{display:block;margin:32px 0 25px}.intro h1{font-size:40px}.intro p{margin-top:12px}.route-labels{font-size:26px}.endpoint-label{font-size:24px}.map-top{padding:20px 18px 0}.map-foot{padding:0 18px;display:block;line-height:1.8}#map-observation{padding:14px 18px}footer{display:block}footer span{display:block;margin-bottom:8px}}@media(max-width:640px){main{padding:20px}.layout{grid-template-columns:1fr;gap:28px}header span{display:none}.intro h1{font-size:38px}.map-panel svg{max-height:280px}.map-foot{display:flex;gap:12px}.map-top{padding:18px 18px 0}.controls h2{font-size:24px}#hint{min-height:auto}.ending{padding:28px 23px}.ending h2{font-size:27px}.ending-actions{gap:12px}}@media(prefers-reduced-motion:reduce){path{transition:none}}