:root{color:#163039;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#163039;--muted:#6b7d80;--line:#ccd7d4;--paper:#f8faf7;--teal:#15969a;--orange:#e56a3d;--blue:#397da5;--yellow:#c9922a;--violet:#7b5ea7;--drive:#2f7d55;--alert:#c0392b;--water:#e6ecea;background:#eef2ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #15969a4d}#root{min-height:100vh}main{width:min(1460px,100%);margin:0 auto;padding:32px clamp(18px,4vw,64px) 24px}.app-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:32px;padding:12px 0 30px;display:flex}.eyebrow{color:var(--teal);letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-size:.68rem;font-weight:750}h1,h2,p{margin-top:0}h1{color:var(--ink);letter-spacing:-.055em;text-transform:uppercase;margin-bottom:0;font-size:clamp(2.15rem,5vw,4.5rem);font-weight:420;line-height:.93}h2{margin-bottom:0;font-size:1.15rem;font-weight:600}.header-readout{border:1px solid var(--line);background:#f8faf799;display:flex}.header-readout div{border-right:1px solid var(--line);min-width:105px;padding:14px 16px 12px}.header-readout div:last-child{border-right:0}.header-readout span,.header-readout strong{display:block}.header-readout span{color:var(--muted);letter-spacing:.13em;margin-bottom:5px;font-size:.58rem;font-weight:700}.header-readout strong{font-family:SFMono-Regular,Consolas,monospace;font-size:1.05rem;font-weight:500}.workspace{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) 320px;min-height:680px;display:grid}.diagram-shell{border-right:1px solid var(--line);min-width:0;padding:22px 26px 18px 0}.diagram-toolbar{color:var(--muted);letter-spacing:.14em;justify-content:space-between;font-size:.6rem;font-weight:700;display:flex}.sailboat-diagram{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;max-height:670px;display:block}.diagram-bg{fill:var(--water)}.heading-ring{fill:none;stroke:var(--line);stroke-dasharray:3 8;stroke-width:1px}.compass-label{fill:var(--muted);text-anchor:middle;font:700 10px SFMono-Regular,Consolas,monospace}.hull{fill:none;stroke:var(--ink);stroke-width:2.5px;pointer-events:none}.hull-hit{fill:#0000;cursor:grab}.hull-hit:active{cursor:grabbing}.main-sail,.jib-sail{fill:none;stroke:var(--teal);stroke-width:3.5px;stroke-linecap:round}.drag-handle{cursor:grab;fill:var(--paper);stroke:var(--teal);stroke-dasharray:3 2;stroke-width:2px}.drag-handle:active{cursor:grabbing}.heading-handle{cursor:grab}.heading-handle path{fill:none;stroke:var(--teal);stroke-width:1.5px}.wind-vector line{stroke:var(--blue);stroke-width:8px}.wind-vector text{fill:var(--blue);letter-spacing:.12em;font:700 11px SFMono-Regular,Consolas,monospace}.drag-handle--wind{fill:#f8faf7e0;stroke:var(--blue)}.marker-wind{fill:var(--blue)}.windex-tabs line{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1.6px}.windex--in-irons .windex-tabs line{stroke:var(--alert);stroke-dasharray:none}.windex-shaft{stroke:#111;stroke-width:3px}.windex-tip{fill:#fff;stroke:#111;stroke-width:2px;stroke-linejoin:round}.windex-tail{fill:var(--alert)}.windex-pivot{fill:#111}.in-irons-badge rect{fill:var(--alert)}.in-irons-badge text{fill:#fff;letter-spacing:.16em;text-anchor:middle;font:700 11px SFMono-Regular,Consolas,monospace}.force-vector line{stroke-linecap:butt;stroke-width:9px}.force-vector text{letter-spacing:.08em;font:700 9px SFMono-Regular,Consolas,monospace}.force-vector--sail line{stroke:var(--orange)}.force-vector--sail text,.marker-sail{fill:var(--orange)}.force-vector--keel line{stroke:var(--violet)}.force-vector--keel text,.marker-keel{fill:var(--violet)}.force-vector--resultant line{stroke:var(--drive);stroke-width:12px}.force-vector--resultant text,.marker-resultant{fill:var(--drive)}.telltale path{fill:none;stroke-width:2px;stroke-linecap:round;transform-box:fill-box;transform-origin:0 0}.telltale--leeward circle,.telltale--leeward path{fill:var(--teal);stroke:var(--teal)}.telltale--leeward path{fill:none}.telltale--windward circle,.telltale--windward path{fill:var(--yellow);stroke:var(--yellow)}.telltale--windward path{fill:none}.telltale--unsettled path{animation:.3s ease-in-out infinite alternate flutter}@keyframes flutter{0%{transform:rotate(-9deg)}to{transform:rotate(11deg)}}.control-panel{padding:24px 0 24px 28px}.panel-heading{justify-content:space-between;align-items:flex-start;margin-bottom:28px;display:flex}.reset-button{color:var(--muted);border:1px solid var(--line);cursor:pointer;text-transform:uppercase;background:0 0;border-radius:2px;padding:7px 11px;font-size:.72rem;font-weight:650}.slider-list{gap:22px;display:grid}.slider-control>span{color:var(--muted);justify-content:space-between;margin-bottom:8px;font-size:.76rem;font-weight:600;display:flex}.slider-control output{color:var(--ink);font-family:SFMono-Regular,Consolas,monospace;font-weight:500}input[type=range]{width:100%;height:3px;accent-color:var(--teal);cursor:pointer;margin:0}.visibility-section{border-top:1px solid var(--line);margin-top:35px;padding-top:27px}.section-heading{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.toggle-grid{grid-template-columns:1fr 1fr;gap:14px 10px;display:grid}.toggle-control{color:var(--muted);cursor:pointer;align-items:center;gap:8px;font-size:.7rem;font-weight:600;display:flex}.toggle-control input{opacity:0;width:1px;height:1px;position:absolute}.toggle-control span{pointer-events:none;border:1px solid var(--line);background:#dce3e0;border-radius:10px;width:25px;height:14px;transition:background .15s;position:relative}.toggle-control span:after{content:"";background:#fff;border-radius:50%;width:8px;height:8px;transition:transform .15s;position:absolute;top:2px;left:2px}.toggle-control input:checked+span{border-color:var(--teal);background:var(--teal)}.toggle-control input:checked+span:after{transform:translate(11px)}.toggle-control input:focus-visible+span{outline-offset:2px;outline:3px solid #15969a4d}.app-footer{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;padding:18px 0;font-size:.65rem;display:flex}.legend{flex-wrap:wrap;gap:22px;display:flex}.legend span{align-items:center;gap:7px;display:flex}.legend i{width:18px;height:3px;display:inline-block}.legend-sail{background:var(--orange)}.legend-keel{background:var(--violet)}.legend-resultant{background:var(--drive)}.legend-telltale-out{background:var(--teal)}.legend-telltale-in{background:var(--yellow)}@media (width<=920px){.app-header{flex-direction:column;align-items:flex-start}.workspace{grid-template-columns:1fr}.diagram-shell{border-right:0;border-bottom:1px solid var(--line);padding-right:0}.control-panel{padding-left:0}}@media (width<=560px){main{padding-top:14px}.header-readout{width:100%}.header-readout div{flex:1;min-width:0;padding:10px}.workspace{min-height:0}.diagram-shell{padding-top:16px}.app-footer{flex-direction:column;align-items:flex-start;gap:12px}}@media (prefers-reduced-motion:reduce){.telltale--unsettled path{animation:none}}