:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#173c46;background:#f7f4ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #d4dcd5;border-radius:12px;background:#fffdf7;padding:11px 14px;transition:background .15s,transform .15s}button:hover{background:#edf3eb}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #d78d5d;outline-offset:3px}button:disabled{cursor:default;opacity:.45}main{max-width:1240px;margin:auto;padding:0 40px}header{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid #dbe1d6}.brand{text-decoration:none;display:flex;gap:14px;align-items:center;color:#214d50;font:italic 27px Georgia,serif}.brand span{font:600 10px system-ui;letter-spacing:2px}header button{border:none;background:transparent;font-size:12px}header button span{display:inline-flex;justify-content:center;align-items:center;border:1px solid #bacbc5;width:22px;height:22px;border-radius:50%;margin-left:8px}.intro{display:flex;justify-content:space-between;align-items:center;padding:28px 0 26px;gap:24px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#65827d;margin:0 0 10px}h1{font:52px/1.05 Georgia,serif;letter-spacing:-1.8px;margin:0}h1 span{font:14px system-ui;display:block;letter-spacing:.1px;margin-top:9px;color:#738a84}.lede{font-size:13px;line-height:1.8;color:#6a807c;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:24px;align-items:start}.poolcard{background:#fffdf8;border:1px solid #dce3d9;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px #173c4605}.pooltop{display:flex;align-items:center;justify-content:space-between;padding:24px 26px 12px;gap:10px}.pooltop .eyebrow{font-size:9px}h2{font:25px/1.15 Georgia,serif;margin:0;letter-spacing:-.5px}.metrics{display:flex;gap:17px;font-size:10px;color:#75908a}.metrics span{white-space:nowrap}.metrics b{display:block;font-size:19px;font-weight:500;color:#295b5c;margin-bottom:3px}#scene{position:relative;width:100%;aspect-ratio:1.08;background:radial-gradient(ellipse at 55% 40%,#e7f5e9,#dfefea 54%,#d2e7e1);overflow:hidden}#water{position:absolute;border:1px solid #87b9b230;border-radius:6px;background-image:linear-gradient(#8dbbb322 1px,transparent 1px),linear-gradient(90deg,#8dbbb322 1px,transparent 1px)}#scene:after{position:absolute;inset:0;pointer-events:none;content:'';box-shadow:inset 0 0 40px #f7f9ee88}#trail{position:absolute;inset:0;pointer-events:none;overflow:visible}.trailpath{fill:none;stroke:#65978c;stroke-width:2;stroke-dasharray:2 7;opacity:.6}#objects{position:absolute;inset:0}.poolobj{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.coral{border-radius:36% 54% 43% 49%;background:linear-gradient(140deg,#c8ac94,#a4ad98);box-shadow:inset 0 2px 2px #f3e3c4,0 3px 0 #a4c6b055;color:#fff9dc;font:20px Georgia}.coral:after{content:'✦';opacity:.5}.pearl{background:radial-gradient(circle at 32% 24%,#fff5c0,#e7ba5c 52%,#d89a40);border:2px solid #fff6ca;border-radius:50%;box-shadow:0 0 0 6px #e9ce8830,0 3px 7px #ba984c30;z-index:2}.pearl.collected{opacity:.14;box-shadow:none}.dockimg{object-fit:contain;filter:drop-shadow(0 3px 2px #437c6b22)}#swimmer{position:absolute;inset:0;pointer-events:none;z-index:3}.bead{position:absolute;object-fit:contain;transform:translate(-50%,-50%);transition:left .35s ease,right .35s ease,top .35s ease,transform .35s;filter:drop-shadow(0 3px 2px #306b5733)}.bead.center{outline:2px solid #d5a853;border-radius:50%;outline-offset:2px}.bead.front{outline:1px solid #34888488;border-radius:50%}#swimmer i{position:absolute;background:linear-gradient(#d5b574,#f1dfb4,#b1915c);height:5px;transform-origin:0 50%;border-radius:5px;transition:width .35s,left .35s,top .35s,transform .35s}#nose{position:absolute;transform:translate(-50%,-50%);color:#245e67;font-size:18px;transition:left .35s,top .35s}.preview{position:absolute;width:22px;height:22px;border:2px dashed #b7864b;border-radius:50%;transform:translate(-50%,-50%);z-index:4;display:none;pointer-events:none}#message{min-height:64px;padding:19px 26px 12px;font-size:13px;line-height:1.6;color:#426a66}#message.won{color:#996320;background:#fcf4df}#message.warning{color:#aa6353}#next{display:block;margin:10px 26px 16px;background:#194c51;color:#fff7e8;border:none;width:calc(100% - 52px)}#next[hidden]{display:none}.legend{display:flex;gap:15px;flex-wrap:wrap;padding:13px 26px 21px;color:#81928b;font-size:9px}.legend span{display:flex;gap:6px;align-items:center}.sun{width:9px;height:9px;border-radius:50%;background:#e6b861}.rockkey{width:9px;height:9px;background:#b7b19b;border-radius:3px}aside{display:grid;gap:18px}.controlcard{padding:25px;border:1px solid #dce3d9;border-radius:22px;background:#fffdf8}.controlcard h2{font-size:27px}.explain{font-size:12px;line-height:1.7;color:#72857c;margin:13px 0 18px}.explain strong{color:#96723a;font-weight:600}.armbuttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.armbuttons button{position:relative;text-align:left;padding:17px 12px 12px;background:#edf4ed;border-color:#cbdcd0;min-height:130px}.armbuttons button strong{display:block;font:19px Georgia;margin-top:8px;margin-bottom:9px}.armbuttons button>span:not(.key){display:block;letter-spacing:1px;font-size:8px;font-weight:700;color:#5e837b}.armbuttons small{display:block;font-size:10px;min-height:24px;margin-top:9px;line-height:1.4;color:#64817a}.key{position:absolute;right:10px;top:9px;font-size:9px;opacity:.6;border:1px solid #adc4ba;border-radius:4px;padding:1px 4px}.turns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.turns button{font-size:11px}.turnnote{text-align:center;font-size:9px;color:#85978e;margin:9px 0 16px}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.tools button{padding:8px 4px;font-size:10px;border:none;background:#f4f3eb}.tools kbd{font-size:8px;opacity:.5;margin-left:3px}.cycle{border-top:1px solid #e0e5d8;padding-top:17px;margin-top:20px}.cycle p{font-size:8px;letter-spacing:1.6px;color:#829080;margin:0 0 10px}.cycle>div{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px}.cycle span{border:1px solid #d9ddcd;padding:5px 8px;border-radius:6px;background:#fbf9f0}.cycle b{font-weight:400;color:#b4bcab}.cycle small{display:block;color:#8b978a;font-size:10px;line-height:1.6;margin-top:9px}.voyages{padding:22px 24px;background:#eaf0e6;border-radius:18px}.voyages>div{display:flex;justify-content:space-between}.voyages>div span{font-size:11px;color:#5f7f70}#levels{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}#levels button{padding:8px 0;font-size:11px;background:#fffdf5;border:none;border-radius:7px}#levels button.active{background:#275a58;color:#fff8e3}#levels button.sealed:not(.active){color:#aa7b32;background:#fff2d1}#tip{font-size:11px;line-height:1.7;color:#6a8175;margin:15px 0 0}.hinted{outline:3px solid #d8ab67!important;outline-offset:2px}footer{display:flex;justify-content:space-between;align-items:center;color:#91a093;font-size:10px;padding:24px 0 34px}footer button{font-size:10px;border:none;background:transparent;color:#708e7d}dialog{max-width:610px;width:calc(100% - 30px);border:1px solid #bed1c6;background:#fffcf4;border-radius:20px;color:#31584f;padding:32px;box-shadow:0 30px 100px #092c3755}dialog::backdrop{background:#0d303d88}dialog p,dialog li{font-size:13px;line-height:1.8}dialog li{padding-bottom:8px}dialog ol{padding-left:20px}dialog .fine{font-size:10px;color:#7a8c7b}dialog a{color:#367e78}#close{float:right;padding:0;width:30px;height:30px;font-size:23px}dialog h2{font-size:34px}dialog:focus{outline:none}@media(max-width:800px){main{padding:0 20px}.intro{align-items:start}.lede{font-size:11px}.layout{grid-template-columns:1.2fr 1fr;gap:14px}.controlcard{padding:19px}.pooltop{padding:20px 18px 12px}.metrics{gap:10px}.pooltop h2{font-size:21px}.armbuttons button strong{font-size:16px}.armbuttons button{padding:13px 10px;min-height:132px}.cycle span{padding:5px}.legend{padding:12px 18px 18px;gap:9px}#message{padding:16px 18px}#next{margin-left:18px;width:calc(100% - 36px)}}@media(max-width:620px){main{padding:0 16px}header{padding:15px 0}.brand{font-size:24px}.brand span{font-size:8px;letter-spacing:1.3px}header button{font-size:11px;padding:8px 0}.intro{display:block;padding:22px 0}.intro .eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:44px}h1 span{font-size:12px}.lede{display:none}.layout{display:flex;flex-direction:column;gap:16px}.poolcard,aside{width:100%}.pooltop{padding:18px 18px 10px}.pooltop h2{font-size:22px}.metrics b{font-size:17px}#scene{aspect-ratio:1.13}.controlcard{padding:21px}.controlcard h2{font-size:26px}.armbuttons button{min-height:116px;padding:13px}.armbuttons button strong{font-size:20px}.armbuttons small{min-height:14px}.legend{font-size:8px}#message{min-height:65px;font-size:12px}.explain{font-size:12px}.turns button{padding:13px}.tools button{padding:13px 4px;font-size:11px}.cycle>div{justify-content:start;gap:10px}.cycle span{padding:5px 11px}.voyages{padding:20px}footer{font-size:9px;gap:8px;align-items:start}footer button{white-space:nowrap;padding:0}dialog{padding:25px}dialog h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Keep the pool and primary strokes in one phone-sized view. */
@media(max-width:620px){header{padding:10px 0}.intro{padding:15px 0}.intro .eyebrow{font-size:7px;margin-bottom:7px}h1{font-size:37px}h1 span{margin-top:6px;font-size:11px}.pooltop{padding:14px 16px 9px}.pooltop .eyebrow{font-size:8px;margin-bottom:7px}.pooltop h2{font-size:20px}#scene{aspect-ratio:1.3}#message{min-height:43px;padding:11px 16px;font-size:11px}.legend{padding:8px 16px 12px;gap:7px;font-size:7px}.layout{gap:11px}.controlcard{padding:13px}.controlcard>.eyebrow,.controlcard>h2,.controlcard>.explain{display:none}.armbuttons button{min-height:91px;padding:10px 12px}.armbuttons button strong{font-size:19px;margin:3px 0 7px}.armbuttons small{margin-top:7px;font-size:9px}.turns{margin-top:8px}.turns button{padding:11px}.turnnote{margin:6px 0 10px}.tools button{padding:10px 4px}.cycle{margin-top:13px;padding-top:13px}.cycle small{font-size:9px}#next{margin-top:5px;margin-bottom:9px}.voyages{padding:17px}}