.sea-tools{position:absolute;top:40px;left:4vw;z-index:9;display:flex;gap:12px}
.sea-tool{width:46px;height:42px;display:grid;place-items:center;border:1px solid #defff933;border-radius:999px;background:#04223129;color:rgba(255,250,232,.78);backdrop-filter:blur(8px);cursor:pointer}
.sea-tool svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.sea-tool:hover,.sea-tool[aria-pressed=true],.sea-tool[aria-expanded=true]{background:#08455b57;color:#f7fff7}
.sea-tool[aria-pressed=false] .sound-waves{opacity:.25}
.sea-panel{position:absolute;top:94px;left:4vw;z-index:12;width:min(320px,calc(100vw - 40px));padding:20px;border:1px solid #cde7db33;border-radius:14px;background:#163a49f5;box-shadow:0 16px 50px #00132133;color:#e2e8dd;font-size:13px;line-height:1.8;backdrop-filter:blur(15px)}
.sea-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:15px}
.sea-panel button{font:inherit;color:inherit;cursor:pointer}
.sea-panel-head button{border:0;background:none;font-size:24px;line-height:1;padding:2px 8px}
.sea-panel p{font-size:12px;line-height:1.9;color:#c2d4cf;margin:10px 0}
.sea-presence{font-size:11px;color:#a9c5bb;min-height:20px}
.sea-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.sea-actions button{border:1px solid #d9eee633;background:#c9e6d80c;border-radius:999px;padding:7px 13px;font-size:12px}
.sea-actions button:hover:not(:disabled){background:#c9e6d820}
.sea-actions button:disabled{opacity:.4;cursor:default}
.sea-actions .sea-send{background:#c9e6d824}
.sea-draft{height:30px;display:flex;align-items:center;gap:8px}
.sea-draft span{width:6px;height:6px;border-radius:50%;background:#d6e8bc;box-shadow:0 0 8px #d6e8bc44}
.sea-volume{display:flex;align-items:center;gap:12px;font-size:11px;margin-top:14px;padding-top:12px;border-top:1px solid #d7e7df22}
.sea-volume input{width:110px;accent-color:#adcebe}
.sea-credit{font-size:10px!important;opacity:.65;margin-bottom:0!important}.sea-credit a{color:inherit}
.sea-floats{position:absolute;top:calc(38% - 22px);left:0;width:100%;height:44px;z-index:7;pointer-events:none}
.sea-float{position:absolute;top:0;width:44px;height:44px;margin-left:-22px;border:0;background:transparent;cursor:pointer;pointer-events:auto;color:#e4f3d7;border-radius:50%;padding:0}
.sea-float::before{content:"";position:absolute;left:18px;top:18px;width:8px;height:8px;border:1px solid #efffd5aa;border-radius:50%;background:#d5eedc55;box-shadow:0 0 16px 5px #d5eedc18;transition:transform .5s,box-shadow .5s}
.sea-float::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:5px;border-bottom:1px solid #d9ecd766;border-radius:50%;opacity:.6}
.sea-float:hover::before,.sea-float:focus-visible::before{transform:scale(1.35);box-shadow:0 0 20px 8px #d5eedc33}
.sea-float.is-ringing::before{animation:sea-ring 1.1s ease-out}
@keyframes sea-ring{0%{transform:scale(2);box-shadow:0 0 35px 12px #d5eedc66}100%{transform:scale(1)}}
.sea-sky{position:absolute;left:15%;right:15%;top:13%;height:17%;z-index:6;pointer-events:none;transform:translate(var(--sea-look-x,0px),var(--sea-look-y,0px));transition:transform 1.4s ease-out}
.sea-memory{position:absolute;pointer-events:auto;border:0;background:none;color:#e9edd0;cursor:pointer;width:58px;height:44px;padding:4px;opacity:.65;transition:opacity .3s,filter .3s}
.sea-memory:hover,.sea-memory:focus-visible{opacity:1;filter:drop-shadow(0 0 5px #e3efc8)}
.sea-memory svg{width:100%;height:100%;overflow:visible}
.sea-memory.is-listening{opacity:1;filter:drop-shadow(0 0 6px #e8f0ce)}
.sea-ripples{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.sea-ripple{position:absolute;width:18px;height:6px;border:1px solid #d8efc777;border-radius:50%;animation:sea-ripple 2.8s ease-out forwards}
.sea-ripple.remote{border-color:#b5e2f0aa}.sea-streak{position:absolute;width:1px;height:42px;background:linear-gradient(transparent,#e7eccca0,transparent);transform-origin:bottom;animation:sea-streak 2.8s ease-out forwards}
@keyframes sea-ripple{to{transform:translate(-50%,-50%) scale(12);opacity:0}}
@keyframes sea-streak{0%{opacity:0;transform:translateY(20px) rotate(24deg)}35%{opacity:.7}100%{opacity:0;transform:translateY(-24px) rotate(24deg)}}
.stage.is-reading .sea-ripples,.stage.is-reading .sea-sky,.stage.is-reading .sea-floats{visibility:hidden}
@media(max-width:820px){.sea-tools{top:28px;left:20px}.sea-panel{top:80px;left:20px;max-height:calc(100svh - 110px);overflow:auto}.sea-sky{left:5%;right:5%;top:16%;height:12%}}
@media(prefers-reduced-motion:reduce){.sea-sky{transform:none;transition:none}.sea-ripple,.sea-streak{animation-duration:.1s}.sea-float.is-ringing::before{animation:none}}

.sea-recording{position:absolute;top:100px;left:50%;transform:translateX(-50%);z-index:9;color:#e2e8dd;background:#163a49cc;border:1px solid #cde7db33;border-radius:999px;padding:8px 15px;font-size:12px;cursor:pointer;white-space:nowrap}

.sea-timbres{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid #d7e7df22;padding-top:12px}.sea-timbres button{border:1px solid #d7e7df33;background:transparent;border-radius:999px;padding:5px 9px;font-size:11px}.sea-timbres button[aria-pressed=true]{background:#c9e6d82b;border-color:#c9e6d866}#seaSeason{font-size:11px;color:#a9c5bb}