:root{--midnight:#16213e;--navy:#1d3358;--teal:#0f5560;--glass:#7cc6b8;--foam:#f3ecdf;--paper:#efe6d4;--tangerine:#f28c38;--butter:#f6cf62;--coral:#ec6f7c;--brass:#c9a24a;--btn:88px;--gap:12px;--edge:max(14px, env(safe-area-inset-left));--bottom:max(14px, env(safe-area-inset-bottom));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--midnight);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;height:100%;margin:0;overflow:hidden}#app{position:fixed;inset:0}canvas.sea{width:100%;height:100%;display:block;position:absolute;inset:0}canvas.sub-rive{pointer-events:none;transform-origin:50%;width:420px;height:300px;display:none;position:absolute;top:0;left:0}html.rive-sub canvas.sub-rive{display:block}.btn{width:var(--btn);height:var(--btn);cursor:pointer;background:var(--foam);box-shadow:4px 5px 0 #16213e8c, inset 0 0 0 4px var(--midnight);touch-action:manipulation;border:0;border-radius:50%;place-items:center;padding:0;transition:box-shadow 80ms,transform 80ms,filter .2s;display:grid;position:relative}.btn svg{width:64%;height:64%;overflow:visible}.btn:active{box-shadow:1px 1px 0 #16213e8c, inset 0 0 0 4px var(--midnight);transform:translate(3px,4px)}.btn.hit{animation:.32s cubic-bezier(.34,1.56,.64,1) press}@keyframes press{0%{box-shadow:1px 1px 0 #16213e8c, inset 0 0 0 4px var(--midnight), 0 0 0 0 #f6cf62e6;transform:translate(3px,4px)scale(.9)}60%{box-shadow:4px 5px 0 #16213e8c, inset 0 0 0 4px var(--midnight), 0 0 0 10px #f6cf6299;transform:scale(1.08)}to{transform:none}}.btn.on{background:var(--butter)}.btn.echo:after{content:"";border:8px solid var(--butter);pointer-events:none;border-radius:50%;animation:.7s ease-out forwards echo;position:absolute;inset:-12px}@keyframes echo{0%{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.3)}}.hud{pointer-events:none;position:absolute;inset:0}.hud>*{pointer-events:auto}.band{left:var(--edge);right:var(--edge);bottom:var(--bottom);pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:absolute}.band>*{pointer-events:auto}.cluster{gap:var(--gap);display:flex}.centre{gap:var(--gap);justify-content:center;align-items:flex-end;display:flex}.btn.big{--btn:100px;background:var(--butter)}.centre.problem .map{display:none}.ideas{gap:16px;display:none}.centre.problem .ideas{display:flex}.btn.idea{--btn:112px;background:radial-gradient(circle at 35% 30%, #fffdf4, var(--glass) 75%);box-shadow:4px 5px 0 #16213e8c, inset 0 0 0 5px var(--butter), 0 0 0 4px var(--midnight);animation:.45s cubic-bezier(.34,1.56,.64,1) both idea-in}.btn.idea:nth-child(2){animation-delay:80ms}.btn.idea:nth-child(3){animation-delay:.16s}@keyframes idea-in{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}.ideas.nudge .btn.idea{animation:1.2s ease-in-out 3 idea-glow}@keyframes idea-glow{50%{filter:brightness(1.18) drop-shadow(0 0 14px var(--butter))}}.drawer{opacity:0;pointer-events:none;justify-content:center;align-items:flex-end;gap:14px;transition:opacity .2s,transform .25s;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(24px)}.band .drawer.open{opacity:1;pointer-events:auto;transform:none}.band.map-open .cluster,.band.map-open .centre{opacity:0;pointer-events:none}.cluster,.centre{transition:opacity .2s}.btn.place{--btn:96px;background:var(--paper)}.btn.place.shut{--btn:72px;background:var(--midnight);margin-left:18px}.portrait{pointer-events:none;border-radius:50%;position:absolute}.portrait .face{background:var(--glass) center / cover no-repeat;border-radius:50%;position:absolute;inset:9px;overflow:hidden}.portrait .ring{background:var(--brass);box-shadow:4px 5px 0 #16213e8c, inset 0 0 0 4px var(--midnight);border-radius:50%;position:absolute;inset:0}.portrait canvas{width:100%;height:100%;position:absolute;inset:0}.mate{left:var(--edge);top:max(14px, env(safe-area-inset-top));width:138px;height:138px}.mate .face{background-image:url(/art/mate-talk.webp);background-position:50% 30%;background-size:112%}.mate[data-mood=cheer] .face{background-image:url(/art/mate-cheer.webp)}.mate[data-mood=wow] .face{background-image:url(/art/mate-wow.webp)}.mate[data-mood=think] .face{background-image:url(/art/mate-think.webp)}.lookout[data-mood=alert] .face{background-image:url(/art/lookout-alert.webp)}.lookout[data-mood=cheer] .face{background-image:url(/art/lookout-cheer.webp)}.portrait.pop .face{animation:.5s cubic-bezier(.34,1.56,.64,1) pop}@keyframes pop{0%{transform:scale(.86)rotate(-4deg)}to{transform:none}}.lookout{transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1)}.lookout[data-mood=alert]{width:132px;height:132px;animation:.9s ease-in-out 3 lookout-wiggle}.lookout[data-mood=cheer]{width:120px;height:120px;animation:.45s ease-out 4 alternate lookout-hop}@keyframes lookout-wiggle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes lookout-hop{to{transform:translateY(-14px)}}.lookout{right:calc(var(--edge) + 58px);top:max(14px, env(safe-area-inset-top));width:112px;height:112px}.lookout .face{background-image:url(/art/lookout-idle.webp);background-color:var(--glass)}.mate.speaking .ring{animation:.5s ease-in-out infinite alternate talk}@keyframes talk{to{box-shadow:0 0 0 8px #f6cf62b3, inset 0 0 0 4px var(--midnight)}}.mate.speaking .face{animation:.32s ease-in-out infinite alternate bob}@keyframes bob{to{transform:translateY(-3px)rotate(-1.5deg)}}.lookout.alert .face{animation:.6s ease-in-out 4 alternate peek}@keyframes peek{to{transform:translateY(-6px)rotate(6deg)}}.ear{opacity:calc(.35 + var(--level,0) * .65);align-items:center;gap:5px;display:flex;position:absolute;top:46px;right:-40px}.ear i{background:var(--foam);width:8px;height:calc(12px + var(--level,0) * 26px);border-radius:4px;display:block;box-shadow:2px 2px #16213e80}.ear i:nth-child(2){height:calc(18px + var(--level,0) * 34px)}.mate.hearing .ear i{background:var(--butter)}.mate[data-voice=off] .ear,.mate[data-voice=connecting] .ear{opacity:.2}.plan{left:50%;top:max(14px, env(safe-area-inset-top));pointer-events:none;gap:22px;display:flex;position:absolute;transform:translate(-50%)}.plan .step{box-shadow:4px 5px 0 #16213e80, inset 0 0 0 4px var(--midnight);background:#f3ecdff2;border-radius:22px;gap:2px;padding:8px;animation:.4s cubic-bezier(.34,1.56,.64,1) both idea-in;display:flex;position:relative}.plan .step:nth-child(2){animation-delay:.1s}.plan .step:nth-child(3){animation-delay:.2s}.plan .step.now{background:var(--butter)}.plan .step.done{background:var(--glass)}.plan .mini svg{width:64px;height:64px;display:block}.plan .tick{background:var(--kelp,#3f8a5a);width:34px;height:34px;color:var(--foam);border-radius:50%;padding:5px;display:none;position:absolute;top:-10px;right:-10px;box-shadow:2px 3px #16213e80}.plan .step.done .tick{animation:.45s cubic-bezier(.34,1.56,.64,1) pop;display:block}.plan .arrow{border-left:12px solid var(--foam);border-top:9px solid #0000;border-bottom:9px solid #0000;width:0;height:0;position:absolute;top:50%;right:-20px;transform:translateY(-50%)}.knot{right:var(--edge);top:max(14px, env(safe-area-inset-top));color:#f3ecdf8c;background:#16213e59;border:0;border-radius:50%;width:44px;height:44px;padding:8px;position:absolute}.knot svg{width:100%;height:100%}.knot.holding{animation:2s linear forwards hold}@keyframes hold{to{color:var(--midnight);background:#f6cf62e6}}.dock{padding-bottom:calc(var(--bottom) + 40px);z-index:5;background:linear-gradient(#16213e00 60%,#16213e40);place-items:end center;display:grid;position:absolute;inset:0}.btn.sail{--btn:168px;background:var(--tangerine);animation:1.6s ease-in-out infinite sail-pulse}@keyframes sail-pulse{50%{filter:brightness(1.12)drop-shadow(0 0 22px #f6cf62e6)}}html:not(.sailing) .band,html:not(.sailing) .plan{display:none}.gate,.parent{z-index:10;color:var(--midnight);-webkit-user-select:text;user-select:text;touch-action:auto;background:#16213ed1;place-items:center;font:17px/1.4 -apple-system,system-ui,sans-serif;display:grid;position:absolute;inset:0}.gate .card,.parent .sheet{background:var(--foam);border-radius:18px;padding:22px 26px;box-shadow:6px 7px #00000059}.gate .card{text-align:center;width:380px}.gate .pad{grid-template-columns:repeat(3,72px);justify-content:center;gap:10px;margin:14px 0;display:grid}.gate .key{background:var(--paper);border:0;border-radius:12px;height:64px;font-size:26px;box-shadow:2px 3px #16213e66}.text-btn{background:var(--midnight);color:var(--foam);font:inherit;border:0;border-radius:10px;padding:10px 16px}.parent .sheet{width:min(860px,92vw);max-height:88vh;overflow:auto}.parent header{justify-content:space-between;align-items:center;gap:12px;display:flex}.parent h2,.parent h3{margin:0}.parent .row{flex-wrap:wrap;align-items:end;gap:18px;margin:16px 0;display:flex}.parent label{gap:4px;font-size:14px;display:grid}.parent input,.parent select{font:inherit;border:2px solid var(--midnight);background:#fff;border-radius:8px;padding:8px 10px}.parent .facts p{margin:6px 0}.parent .log ol{margin:10px 0 0;padding:0;font-size:15px;list-style:none}.parent .log li{border-bottom:1px solid #16213e1f;padding:4px 0}.parent .log li span{color:#667;font-size:13px}.parent .log li.game{color:#778;font-size:13px}.captions{pointer-events:none;text-align:center;z-index:4;width:560px;font:600 15px/1.3 -apple-system,system-ui,sans-serif;position:absolute;top:10px;left:50%;transform:translate(-50%)}.captions p:first-child{animation:.35s ease-out cap-in}@keyframes cap-in{0%{opacity:0;transform:translateY(-6px)}}.captions p{color:var(--foam);background:#16213eb3;border-radius:8px;margin:0 0 3px;padding:3px 10px;display:inline-block}.captions p.captain{color:var(--midnight);background:#f28c38e6}.captions p:not(:first-child){opacity:.6}html.portrait #app:after{content:"";z-index:20;background:var(--midnight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='30' y='15' width='40' height='70' rx='8' fill='none' stroke='%23f3ecdf' stroke-width='5' transform='rotate(-90 50 50)'/%3E%3Cpath d='M20 22 A40 40 0 0 1 80 22' fill='none' stroke='%23f6cf62' stroke-width='5'/%3E%3Cpath d='M80 22 l-10 -2 6 10z' fill='%23f6cf62'/%3E%3C/svg%3E") center / 160px no-repeat;position:absolute;inset:0}@media (max-width:1100px){:root{--btn:78px;--gap:9px}.btn.idea{--btn:92px}.btn.place{--btn:80px}}.band.problem .cluster .btn{--btn:76px}.portrait.rive .face{background-image:none!important;animation:none!important}.portrait.rive.speaking .face{animation:none!important}.plan.leaving{opacity:0;transition:opacity .4s,transform .4s;transform:translate(-50%,-16px)}.centre.problem .ideas{animation:none}