.sailboat-loader { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; box-sizing:border-box; color:#184f6f; background:linear-gradient(180deg,#dff6ff 0%,#b9eafa 64%,#9bdaee 64%,#82cfe7 100%); font:20px/1.4 'Trebuchet MS',sans-serif; text-align:center; }
.sailboat-loader .sb-loader-card { width:100%; max-width:400px; margin:auto; }
.sailboat-loader .sb-loader-boat { display:block; width:112px; height:98px; margin:0 auto 12px; animation:sb-loader-bob 2.4s ease-in-out infinite; }
.sailboat-loader h2 { margin:0 0 8px; font-size:clamp(28px,4vw,38px); line-height:1.15; }
.sailboat-loader .sb-loader-detail { margin:0 0 24px; font-size:clamp(16px,2vw,20px); }
.sailboat-loader .sb-loader-meter { display:flex; align-items:center; gap:14px; }
.sailboat-loader progress { flex:1; min-width:0; height:16px; overflow:hidden; border:0; border-radius:10px; appearance:none; background:#fffdf1; color:#e85e43; accent-color:#e85e43; }
.sailboat-loader progress::-webkit-progress-bar { border-radius:10px; background:#fffdf1; }
.sailboat-loader progress::-webkit-progress-value { border-radius:10px; background:#e85e43; }
.sailboat-loader progress::-moz-progress-bar { border-radius:10px; background:#e85e43; }
.sailboat-loader .sb-loader-percent { min-width:3.5ch; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
@keyframes sb-loader-bob { 0%,100% { transform:translateY(2px) rotate(-2deg); } 50% { transform:translateY(-4px) rotate(2deg); } }
@media (max-height:380px) { .sailboat-loader { padding:12px; } .sailboat-loader .sb-loader-boat { width:72px; height:62px; margin-bottom:4px; } .sailboat-loader .sb-loader-detail { margin-bottom:12px; } }
@media (prefers-reduced-motion:reduce) { .sailboat-loader .sb-loader-boat { animation:none; } }
.sailboat-ui { position:absolute; pointer-events:none; z-index:5; color:#184f6f; font-family:'Trebuchet MS',sans-serif; }
.sailboat-ui * { box-sizing:border-box; }
.sailboat-ui button { pointer-events:auto; cursor:pointer; border:0; color:#184f6f; font-family:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.sailboat-ui button:focus-visible { outline:5px solid #125b86; outline-offset:5px; }
.sailboat-ui button:disabled { cursor:default; opacity:.6; }
.sailboat-ui .sb-icon { position:absolute; top:30em; width:78em; height:78em; min-width:44px; min-height:44px; border-radius:50%; background:#fffdf1e8; box-shadow:0 6em 16em #19689224; font-size:inherit; display:grid; place-items:center; }
.sailboat-ui .sb-back { left:34em; }
.sailboat-ui .sb-sound { right:34em; }
.sailboat-ui svg { width:38em; height:38em; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.sailboat-ui .sb-levels { position:absolute; top:31em; left:50%; transform:translateX(-50%); display:flex; gap:5em; padding:6em; border-radius:42em; background:#fffdf1e8; box-shadow:0 6em 16em #1968921c; }
.sailboat-ui .sb-levels button { min-width:126px; min-height:64px; padding:0 20px; border-radius:34px; background:transparent; font-size:max(24em,16px); font-weight:700; }
.sailboat-ui .sb-levels button[aria-pressed="true"] { color:#fff; background:#e85e43; box-shadow:0 4px 0 #a83c2a42; }
.sailboat-ui .sb-panel { position:absolute; left:50%; bottom:28em; transform:translateX(-50%); text-align:center; width:min(720em,92%); }
.sailboat-ui .sb-prompt { display:inline-block; max-width:680px; margin:0 0 12px; padding:10px 24px; border-radius:26px; color:#174a67; background:#fffdf1d9; box-shadow:0 5px 18px #195e7f1d; font-size:max(27em,18px); font-weight:700; }
.sailboat-ui .sb-action { display:flex; align-items:center; justify-content:center; gap:14em; margin:0 auto; min-width:max(210em,148px); min-height:max(72em,48px); padding:14em 28em; border-radius:38em; color:#fff; background:#e85e43; box-shadow:0 6em 0 #a83c2a4a,0 10em 22em #1759762b; font-size:inherit; }
.sailboat-ui .sb-action span { font-size:max(25em,17px); font-weight:700; }
.sailboat-ui .sb-listening { display:inline-flex; align-items:center; gap:10em; min-height:64em; padding:11em 24em; border-radius:34em; background:#fffdf1e8; font-size:inherit; }
.sailboat-ui .sb-listening span { font-size:max(23em,16px); font-weight:700; }
.sailboat-ui .sb-listening i { width:10em; height:10em; border-radius:50%; background:#2a9ad1; animation:sb-breath 1.2s ease-in-out infinite; }
.sailboat-ui .sb-listening i:nth-last-child(2) { animation-delay:.15s; }
.sailboat-ui .sb-listening i:last-child { animation-delay:.3s; }
.sailboat-ui .sb-help { margin:12px auto 0; max-width:650px; padding:8px 18px; border-radius:20px; color:#174a67; background:#fffdf1e8; font-size:max(19em,14px); line-height:1.35; }
.sailboat-ui [hidden] { display:none !important; }
.sailboat-ui.sb-compact .sb-icon { top:4px; width:44px; height:44px; }
.sailboat-ui.sb-compact .sb-back { left:8px; }
.sailboat-ui.sb-compact .sb-sound { right:8px; }
.sailboat-ui.sb-compact .sb-icon svg { width:24px; height:24px; }
.sailboat-ui.sb-compact .sb-levels { top:4px; gap:2px; padding:2px; }
.sailboat-ui.sb-compact .sb-levels button { min-width:100px; min-height:44px; padding:0 10px; font-size:16px; }
.sailboat-ui.sb-compact .sb-panel { bottom:4px; width:220px; }
.sailboat-ui.sb-compact .sb-prompt { max-width:220px; margin-bottom:4px; padding:4px 8px; border-radius:18px; font-size:18px; line-height:1.08; }
.sailboat-ui.sb-compact .sb-action { min-width:148px; min-height:44px; padding:7px 18px; }
.sailboat-ui.sb-compact .sb-action svg { width:23px; height:23px; }
.sailboat-ui.sb-compact .sb-action span { font-size:17px; }
.sailboat-ui.sb-compact .sb-listening { min-height:44px; padding:6px 12px; }
.sailboat-ui.sb-compact .sb-listening svg { width:23px; height:23px; }
.sailboat-ui.sb-compact .sb-listening span { font-size:16px; }
.sailboat-ui.sb-compact .sb-help { position:absolute; left:50%; bottom:48px; transform:translateX(-50%); width:270px; margin:0; padding:5px 9px; font-size:14px; }
@keyframes sb-breath { 0%,100% { transform:scale(.7); opacity:.45; } 50% { transform:scale(1.25); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .sailboat-ui * { animation:none !important; transition:none !important; } }