:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f7fbff;background:#101820;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: rgba(14, 24, 32, .68);--panel-border: rgba(255, 255, 255, .18);--accent: #f7b844;--accent-cool: #47d0c9;--danger: #f26d5b}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}#scene{display:block;width:100vw;height:100vh;background:#7bb8dd;touch-action:none}.hud{position:fixed;z-index:5;border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 40px #040b113d}.top-left{top:18px;left:18px;display:grid;grid-template-columns:74px minmax(130px,1fr);gap:14px;width:min(330px,calc(100vw - 36px));padding:12px;border-radius:8px}.top-right{top:18px;right:18px;display:grid;gap:12px;width:min(310px,calc(100vw - 36px));padding:12px;border-radius:8px}.bottom-right{right:18px;bottom:18px;border-radius:8px}.wind-generator{display:grid;gap:11px;width:min(285px,calc(100vw - 36px));padding:12px}.wind-generator button{height:38px;border:1px solid rgba(255,255,255,.3);border-radius:7px;color:#121820;background:var(--accent);cursor:pointer}.wind-generator-readouts{display:grid;gap:7px}.wind-generator-readouts p{display:flex;justify-content:space-between;margin:0;gap:12px;font-size:13px}.wind-generator-readouts span{color:#f7fbffb8}.wind-generator-readouts strong{font-variant-numeric:tabular-nums}.wind-control-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px;font-size:13px}.wind-control-row span{color:#f7fbffb8}.wind-control-row input[type=range]{width:100%;accent-color:var(--accent-cool)}.point-label{position:fixed;top:118px;left:calc(50% + 170px);z-index:4;display:grid;gap:3px;min-width:178px;padding:11px 16px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#121820;background:#f7b844e6;box-shadow:0 12px 30px #040b112e;font-size:16px;font-weight:750;text-align:center;white-space:nowrap}#maneuverText{min-height:0;font-size:0;line-height:1}.point-label.maneuvering #maneuverText{min-height:24px;font-size:20px;font-weight:850}.dial{position:relative;width:74px;height:74px;border:2px solid rgba(255,255,255,.32);border-radius:50%;background:radial-gradient(circle at center,rgba(255,255,255,.18) 0 3px,transparent 4px),conic-gradient(from 0deg,#47d0c947,#ffffff0d,#f7b8443d,#47d0c947)}.compass-north{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-31px);transform-origin:50% 50%;font-size:11px;font-weight:700;color:#f7fbff;text-shadow:0 1px 3px rgba(4,11,17,.55)}.boat-bow{position:absolute;left:50%;top:50%;width:18px;height:34px;transform:translate(-50%,-55%);z-index:1}.boat-bow:before{content:"";position:absolute;left:50%;top:-1px;width:0;height:0;transform:translate(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:16px solid rgba(247,251,255,.92);filter:drop-shadow(0 1px 3px rgba(4,11,17,.35))}.boat-bow:after{content:"";position:absolute;left:50%;top:13px;width:9px;height:18px;border-radius:0 0 5px 5px;transform:translate(-50%);background:#f7fbffc7;box-shadow:inset 0 -6px 8px #0e182033}.wind-arrow{position:absolute;left:50%;top:50%;z-index:2;width:5px;height:29px;border-radius:999px;background:var(--accent);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(45deg)}.wind-arrow:before{content:"";position:absolute;left:50%;top:-8px;width:0;height:0;transform:translate(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid var(--accent)}.readouts{display:grid;gap:7px;align-content:center}.readouts p{display:flex;justify-content:space-between;margin:0;gap:10px;font-size:13px}.readouts span,.control-row span,.side-label{color:#f7fbffb8}.readouts strong{font-variant-numeric:tabular-nums}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mode-switch button{height:38px;border:1px solid rgba(255,255,255,.16);border-radius:7px;color:#f7fbff;background:#ffffff14;cursor:pointer}.mode-switch button.active{color:#121820;background:var(--accent);border-color:#ffffff4d}.control-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:12px;font-size:13px}input[type=range]{width:100%;accent-color:var(--accent-cool)}.lee-windward-view{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;min-height:82px;padding:8px 4px 2px}.side-label{font-size:13px;font-weight:750;text-align:center}.side-label.windward{color:#f7b844}.top-boat{position:relative;width:76px;height:76px;justify-self:center;border-radius:50%;background:radial-gradient(circle at center,rgba(255,255,255,.14) 0 3px,transparent 4px),#ffffff0f}.top-boat-hull{position:absolute;left:50%;top:29px;width:18px;height:34px;border-radius:0 0 8px 8px;transform:translate(-50%);background:#f7fbffd1;box-shadow:inset 0 -9px 10px #0e18202e}.top-boat-bow{position:absolute;left:50%;top:12px;width:0;height:0;transform:translate(-50%);border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:22px solid rgba(247,251,255,.92);filter:drop-shadow(0 2px 3px rgba(4,11,17,.28))}.relative-wind-mini{position:absolute;left:50%;top:50%;width:4px;height:33px;border-radius:999px;background:var(--accent);transform:translate(-50%,-50%) rotate(45deg);transform-origin:50% 50%;box-shadow:0 2px 6px #040b1147}.relative-wind-mini:before{content:"";position:absolute;left:50%;top:-7px;width:0;height:0;transform:translate(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--accent)}.relative-wind-mini:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;border-radius:50%;transform:translate(-50%);background:#f7b8446b}.trim-meter{display:none;grid-template-columns:42px 1fr 32px;align-items:center;gap:10px;font-size:12px}.meter-track{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--danger),var(--accent),var(--accent-cool));overflow:hidden}#trimNeedle{position:absolute;top:-4px;left:50%;width:4px;height:20px;border-radius:999px;background:#fff;box-shadow:0 0 12px #ffffffe6}@media(max-width:720px){.top-left,.top-right{left:12px;right:12px;width:auto}.top-right{top:auto;bottom:190px}.bottom-right{left:12px;right:12px;bottom:12px;width:auto}.point-label{top:130px;left:auto;right:12px;max-width:calc(100vw - 24px)}}