:root{--deep:#061f32;--water:#148fa9;--cyan:#6fe5ee;--lime:#d5ff5f;--paper:#eff2eb;--ink:#0a2638;--line:#d7dedb;--muted:#688087}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}.boat-page{overflow:hidden}.boat-kicker{margin:0;color:#74dbe6;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:900}.boat-hero{min-height:280px;padding:52px 7vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#061f32,#0b5269);color:#fff}.boat-hero h1{margin:12px 0 10px;font:900 clamp(48px,7vw,86px)/.95 Arial;letter-spacing:-5px}.boat-hero h1 em{color:var(--lime);font-style:normal}.boat-hero>div>p:last-child{color:#bdd7dc;font-size:17px}.hero-boat{position:relative;width:190px;height:150px;animation:boatBob 2.2s ease-in-out infinite}.hero-boat:before,.hero-boat:after,.hero-boat i{content:"";position:absolute}.hero-boat:before{left:15px;top:40px;border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:72px solid #f8f4df;filter:drop-shadow(0 14px 12px #001c2c66)}.hero-boat:after{left:38px;top:70px;width:114px;height:46px;background:#7edee6;clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}.hero-boat i{left:90px;top:18px;width:3px;height:68px;background:#f6f0d5}.hero-boat i:after{content:"";position:absolute;right:3px;top:0;border-top:31px solid transparent;border-bottom:31px solid transparent;border-left:54px solid var(--lime)}@keyframes boatBob{50%{transform:translateY(-9px) rotate(2deg)}}.boat-shell{width:min(1000px,94vw);margin:-32px auto 70px;position:relative}.boat-toolbar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px 20px 0 0;overflow:hidden}.boat-toolbar span{padding:14px;text-align:center;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:1.2px}.boat-toolbar span+span{border-left:1px solid var(--line)}.boat-toolbar strong{display:block;margin-top:4px;color:var(--ink);font-size:21px}.boat-stage{position:relative;height:min(67vh,610px);min-height:470px;border:1px solid #0c6075;border-top:0;border-radius:0 0 24px 24px;overflow:hidden;background:#168faa;box-shadow:0 24px 55px #08243522;touch-action:none}.boat-stage canvas{display:block;width:100%;height:100%}.boat-pause{position:absolute;z-index:5;right:12px;top:12px;min-height:42px;padding:0 16px;border:1px solid #b6edf2;border-radius:999px;background:#062d3ddd;color:#fff;font-weight:900}.boat-message{position:absolute;z-index:4;left:50%;top:72px;transform:translateX(-50%) translateY(-8px);padding:8px 14px;border-radius:999px;background:#062d3ddd;color:#fff;font-size:11px;font-weight:900;opacity:0;transition:.2s}.boat-message.show{opacity:1;transform:translateX(-50%) translateY(0)}.boat-overlay{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;color:#fff;background:linear-gradient(#052c3bbb,#041d2add);backdrop-filter:blur(3px)}.boat-overlay.hidden{display:none}.boat-overlay h2{margin:10px 0;font-size:clamp(31px,6vw,52px);letter-spacing:-2px}.boat-overlay>p:not(.boat-kicker){max-width:520px;color:#c5dfe4;line-height:1.55}.boat-overlay button{min-width:190px;min-height:52px;margin-top:16px;border:0;border-radius:14px;background:var(--lime);color:var(--ink);font-weight:900;font-size:15px}.boat-overlay>a{margin-top:13px;color:#fff;font-weight:900}.boat-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.boat-legend span{padding:8px 11px;border:1px solid #77aeb9;border-radius:999px;background:#063444aa;font-size:11px;font-weight:800}.boat-legend i{margin-right:5px;color:var(--cyan);font-style:normal}.boat-result{display:flex;gap:8px}.boat-result span{min-width:105px;padding:10px;border:1px solid #6593a0;border-radius:12px;color:#a9ced5;font-size:9px;text-transform:uppercase}.boat-result strong{display:block;margin-top:3px;color:#fff;font-size:21px}.boat-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;margin-top:14px}.boat-controls button{min-height:72px;border:1px solid #a9b9b5;border-radius:17px;background:#fff;color:var(--ink);font-size:25px;font-weight:1000;touch-action:manipulation}.boat-controls small{display:block;margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:1px}.fan-button{position:relative!important;display:grid!important;grid-template-columns:56px 1fr;align-items:center;text-align:left;padding:8px 20px!important;background:var(--lime)!important;border-color:#a8ca35!important}.fan-button i{grid-row:1/3;display:block;width:46px;height:50px;background:repeating-conic-gradient(from 250deg at 12% 90%,#ff6f65 0 11deg,#ffd7a5 12deg 23deg);clip-path:polygon(0 100%,12% 75%,28% 50%,47% 25%,70% 7%,100% 0,88% 38%,70% 67%,48% 90%);transform-origin:10% 90%}.fan-button.flap i{animation:fanSnap .13s ease-out}.fan-button b{font-size:22px}.fan-button small{grid-column:2}@keyframes fanSnap{50%{transform:rotate(-13deg) scale(.94)}}.boat-how{margin-top:18px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:20px}.boat-how .boat-kicker{color:#268ca0}.boat-how h2{margin:7px 0 0;font-size:28px}.boat-how>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.boat-how article{padding:20px;border-radius:15px;background:#edf6f4}.boat-how article>b{color:#218ba0;font-size:11px}.boat-how h3{margin:11px 0 7px}.boat-how article p{margin:0;color:#647a7c;line-height:1.5;font-size:13px}@media(max-width:720px){.boat-hero{min-height:220px;padding:36px 20px 52px}.boat-hero h1{font-size:47px;letter-spacing:-3px}.hero-boat{display:none}.boat-shell{width:auto;margin:-25px 9px 50px}.boat-toolbar span{padding:11px 4px}.boat-toolbar strong{font-size:17px}.boat-stage{height:calc(100dvh - 300px);min-height:410px;max-height:610px}.boat-controls{position:sticky;bottom:max(7px,env(safe-area-inset-bottom));z-index:8}.boat-controls button{min-height:68px}.fan-button{padding:7px 12px!important}.fan-button b{font-size:18px}.boat-how{padding:22px 18px}.boat-how>div{grid-template-columns:1fr}.boat-overlay{justify-content:flex-start;overflow-y:auto;padding:58px 17px 24px}.boat-overlay#boatPaused{justify-content:center}.boat-result span{min-width:82px}}@media(prefers-reduced-motion:reduce){.hero-boat,.fan-button.flap i{animation:none}.boat-message{transition:none}}