@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;650;700&display=swap');
:root{--paper:#f7f5ec;--ink:#2b484f;--muted:#768680;--line:#cbd3c5;--white:#fffdf4;--teal:#44766b;--coral:#bc7759;--pen:'Caveat',cursive;--ui:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,select{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #8570a2;outline-offset:4px}button:hover:not(:disabled){background:#e8eada}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.topbar{height:83px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font:700 39px var(--pen);letter-spacing:-1.6px;display:flex;gap:6px;align-items:center;white-space:nowrap;transform:rotate(-2deg)}.brand span{color:var(--coral);margin-left:-6px}.brand svg{width:31px;height:37px;margin-right:3px}.scenario-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px}.scenario-anchor{position:relative}#scenario-button{min-width:176px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:15px;font-size:12px;border-radius:6px}.scenario-num{font:600 18px var(--pen);color:#7c9080;margin-right:8px}.chevron{font-size:17px;color:var(--muted)}.tools{display:flex;gap:7px;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;padding:8px;color:var(--ink);flex-shrink:0}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.floating{background:var(--white);border:1.3px solid #8c9b8e;border-radius:9px 13px 8px 11px;box-shadow:3px 4px 0 #3d594f12,0 7px 20px #3d594f0b}.floating:after{content:'';position:absolute;inset:2px 3px 3px 2px;border:1px solid #63796b16;border-radius:inherit;pointer-events:none}#scenario-menu{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:253px;padding:7px;z-index:20;max-height:min(440px,75dvh);overflow:auto}#scenario-menu button{width:100%;text-align:left;font-size:12px;display:flex;align-items:center;padding:10px;border-radius:5px}#scenario-menu button.active{background:#e9eed8}#scenario-menu button .scenario-num{width:28px;flex-shrink:0}#scenario-menu button .check{margin-left:auto;color:var(--teal)}#playground{position:relative;height:calc(100dvh - 98px);min-height:400px;margin:0 18px 15px;border:1.3px solid #a2b8ad;border-radius:12px 18px 13px 17px;background-color:#e9f0e8;background-image:none;isolation:isolate}#playground:before{content:'';position:absolute;inset:3px -2px -2px 2px;border:1px solid #96ac9b52;border-radius:15px 9px 18px 10px;pointer-events:none;z-index:-1}#playground:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:15;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}#sea{display:block;width:100%;height:100%;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:inherit}#sea text{pointer-events:none}#sea [data-drag=boat]{cursor:grab}#sea [data-drag=heading]{cursor:crosshair}#sea.dragging{cursor:grabbing}#sea [data-point]{cursor:pointer}.path-hit{fill:none;stroke:transparent;stroke-width:24;pointer-events:stroke}.boat-ring{opacity:.26}.boat-item:hover .boat-ring,.boat-item:focus-within .boat-ring,.boat-item.selected .boat-ring{opacity:.8}.boat-name-svg{font-family:var(--pen);font-weight:650}.boat-speed-svg{font-family:var(--ui);fill:#627b71}.wind-caption{display:block;text-align:center;font:500 18px var(--pen);margin-top:-4px;color:#718477}.wind-caption b{font-weight:650;color:var(--ink)}#wind-control{position:absolute;top:20px;left:25px;width:108px;touch-action:none;user-select:none;cursor:crosshair;border-radius:50%}#wind-compass{width:108px;height:108px;display:block;overflow:visible}.north-mark{position:absolute;top:28px;right:31px;pointer-events:none;display:flex;flex-direction:column;align-items:center;color:#7b9183}.north-mark span{font:600 18px var(--pen)}.north-mark svg{width:16px;height:36px;fill:none;stroke:#78917e;stroke-width:1.1;stroke-linecap:round;transform:rotate(2deg)}.map-scale{position:absolute;bottom:22px;right:28px;font:500 14px var(--pen);color:#8a9b8d;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}.map-scale i{display:block;height:5px;border:1px solid #9aaf9e;border-top:0;transform:rotate(-1deg);width:80px}.boat-popover{position:absolute;width:245px;padding:13px 15px 15px;z-index:10;max-height:calc(100% - 26px);overflow-x:hidden;overflow-y:auto}.popover-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.popover-top h2{font:600 24px var(--pen);margin:0;display:flex;gap:8px;align-items:center}.boat-token{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border:1.3px solid var(--boat-color);color:var(--boat-color);border-radius:48% 55% 45% 51%;font:700 23px var(--pen);transform:rotate(-5deg)}.popover-top .icon-button{width:27px;height:27px;padding:5px}.popover-top .icon-button svg{width:17px;height:17px}.type-row{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:#f4f5e9;padding:0 7px;margin-bottom:16px}.type-row img{width:26px;height:35px;object-fit:contain;margin-right:7px}.type-row select{background:transparent;border:0;font-size:12px;min-height:38px;flex:1;min-width:0;padding-right:5px}.field{margin-top:13px}.field-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.field-top label{font-size:11px}.value-input{display:flex;gap:4px;align-items:center;font-size:10px;color:var(--muted)}.value-input input{width:51px;min-height:28px;padding:4px;text-align:right;border:1px solid #d3dbca;border-radius:5px;background:#fbfcf2;font-size:12px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.value-input input::-webkit-inner-spin-button{-webkit-appearance:none}input[type=range]{width:100%;height:4px;margin:1px 0 6px;accent-color:var(--teal);cursor:pointer;display:block}.heading-field{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.heading-field label{font-size:11px}.tack-note{font:500 18px var(--pen);color:var(--boat-color);margin:10px 0 0}.boat-more{border-top:1px solid #dfe3d6;margin-top:11px;padding-top:9px}.boat-more summary{font-size:10px;color:var(--muted);cursor:pointer}.advanced-field{margin-top:12px}.advanced-field>label{display:block;font-size:10px;margin-bottom:6px}.advanced-field select{width:100%;padding:6px;border:1px solid var(--line);border-radius:5px;background:#f7f9ef;font-size:10px}.coords{display:flex;gap:12px;margin-top:11px}.coords label{font-size:10px;display:flex;align-items:center;gap:5px}.coords input{width:58px;min-height:27px;border:1px solid var(--line);border-radius:4px;font-size:11px;padding:3px 5px;background:#fbfcf2}.remove-row{display:flex;justify-content:flex-end;margin-top:8px}.remove-row .icon-button{width:28px;height:28px}.setup-note{font-size:10px;color:#9b6747;margin:9px 0 0}.point-popover{position:absolute;width:220px;padding:13px 15px;z-index:11}.point-popover .popover-top{margin-bottom:10px}.point-popover h2{font-size:21px}.point-popover dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px;font-size:11px}.point-popover dt{color:var(--muted)}.point-popover dd{margin:0;font-variant-numeric:tabular-nums}#answer-tray{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:12;max-width:calc(100% - 26px)}.reveal-button{background:#314f52;color:#fffdf0;border:1.6px solid #233f47;border-radius:9px 12px 8px 11px;box-shadow:2px 3px 0 #263e4333;padding:11px 28px;min-width:132px;min-height:48px;font:600 24px var(--pen);display:flex;align-items:center;justify-content:center;gap:10px;transform:rotate(-1deg)}.reveal-button:hover:not(:disabled){background:#3b5e5d}.reveal-button svg{width:20px;height:20px;fill:none;stroke:#eef2e3;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.answer-card{width:350px;max-width:100%;padding:13px 18px 15px;max-height:48dvh;overflow:auto;background:#fffdf1;box-shadow:3px 4px 0 #3d594f19}.answer-card>.icon-button{float:right;width:26px;height:26px;padding:5px;margin:-2px -7px 0 8px}.answer-card>.icon-button svg{width:17px;height:17px}.answer-row{padding:8px 0}.answer-row+.answer-row{border-top:1px dashed #c5cfbc}.answer-row h3{font:600 26px/1.12 var(--pen);letter-spacing:-.25px;margin:0 0 5px}.answer-row details{font-size:11px}.answer-row summary{font-size:10px;cursor:pointer;color:#778778;width:fit-content;padding:3px 0}.answer-row p{color:#566e61;line-height:1.7;font-size:11px;margin:9px 0}.answer-row a{font-size:10px;color:#5c7b66;text-decoration:underline;text-underline-offset:3px}.answer-row .context-note{font-size:10px;color:#7f8e7c}.answer-card .pair-note{font-size:10px;color:#788774;margin:7px 0 0;line-height:1.6}dialog{border:1.3px solid #7e9585;border-radius:12px 17px 11px 16px;background:var(--white);color:var(--ink);max-width:min(450px,calc(100% - 32px));max-height:85dvh;padding:26px 28px;box-shadow:5px 7px 0 #314c4115}dialog::backdrop{background:#2b454338;backdrop-filter:blur(3px)}dialog h1{font:600 34px var(--pen);margin:0 0 20px}.dialog-close{position:absolute;top:12px;right:10px}.help-actions{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#6b8070;margin-bottom:20px}.help-actions b{font-weight:600;color:var(--ink)}dialog p{font-size:12px;line-height:1.8;color:#6b7c70}dialog details{border-top:1px solid var(--line);padding-top:14px;margin-top:17px}dialog summary{cursor:pointer;font-size:12px}dialog a{font-size:11px;text-decoration:underline;text-underline-offset:3px}.margin-setting{font-size:11px;display:flex;align-items:center;justify-content:space-between}.margin-setting select{font-size:11px;border:1px solid var(--line);border-radius:5px;background:var(--white);padding:6px}
@media(max-width:1000px){.topbar{padding:0 23px}.brand{font-size:34px}.brand svg{width:28px}.scenario-nav{gap:3px}.tools{gap:3px}.icon-button{width:34px;height:34px}.scenario-num{margin-right:6px}#scenario-button{min-width:158px;padding:10px}#playground{margin-inline:14px}.map-scale{right:22px}}
@media(max-width:660px){.topbar{height:113px;padding:8px 18px 47px;gap:10px;align-items:center}.brand{font-size:34px}.brand svg{width:27px}.scenario-nav{top:65px;gap:12px;width:auto}.tools{gap:6px}.tools .icon-button{width:32px;height:32px;padding:7px}#scenario-button{min-width:195px;font-size:12px;padding:6px 10px}#scenario-menu{top:41px}.scenario-nav>.icon-button{width:30px;height:30px}.scenario-num{font-size:19px}#playground{height:calc(100dvh - 126px);min-height:340px;margin:0 10px 13px;border-radius:10px 14px 11px 12px}#wind-control{left:13px;top:12px;width:90px}#wind-compass{width:90px;height:90px}.wind-caption{font-size:16px;margin-top:-7px}.north-mark{right:22px;top:21px}.north-mark span{font-size:16px}.north-mark svg{height:28px}.map-scale{display:none}#answer-tray{bottom:20px}.reveal-button{min-height:47px;font-size:24px;padding:9px 25px}.boat-popover{width:220px;padding:11px 13px 13px;max-height:calc(100% - 18px)}.popover-top h2{font-size:22px}.type-row{margin-bottom:12px}.type-row select{font-size:12px}.boat-more{margin-top:10px;padding-top:8px}.tack-note{font-size:16px}.answer-card{width:min(350px,calc(100vw - 50px));max-height:52dvh;padding:12px 17px}.answer-row h3{font-size:25px}dialog{padding:23px}.help-actions{font-size:9px}}
@media(max-height:650px) and (min-width:661px){.topbar{height:63px}#playground{height:calc(100dvh - 76px);min-height:300px}.boat-popover{max-height:calc(100% - 14px)}#answer-tray{bottom:17px}.wind-caption{font-size:16px}#wind-control{transform:scale(.8);transform-origin:top left}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.pair-id{display:block;font:600 16px var(--pen);color:#879780;margin-bottom:3px}

.topbar{position:relative;z-index:30}.boat-popover{max-height:calc(100% - 120px)}

.speed-label{display:flex;align-items:center;gap:12px}.auto-speed{display:flex;align-items:center;gap:4px;color:var(--muted);cursor:pointer}.auto-speed input{width:12px;height:12px;margin:0;accent-color:var(--teal)}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;height:22px;margin:-5px 0 0;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#c4cebc;border-radius:3px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:0;border-radius:50%;background:var(--teal);margin-top:-6px}input[type=range]::-moz-range-track{height:3px;background:#c4cebc;border-radius:3px}input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--teal)}