:root{color-scheme:dark;--ink:#071f2c;--foam:#f4f8ee;--mint:#8ce4dc;--muted:#bad0d2;--gold:#ffc77c}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--ink);color:var(--foam);font:14px/1.5 'Avenir Next','Trebuchet MS',sans-serif}body>canvas{display:block;position:fixed;inset:0}button,select,a{font:inherit}button,select{color:var(--foam);background:#103342e8;border:1px solid #70989866;border-radius:8px;padding:11px 15px;min-height:44px;cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:hover{background:#245062}button:disabled{opacity:.55;cursor:default}a{color:var(--mint)}[hidden]{display:none!important}h1,h2,p{margin:0}.eyebrow{font:10px/1.5 monospace;letter-spacing:.15em;color:var(--mint)}#arrival{position:fixed;inset:0;z-index:5;background:#071f2c url('/static/assets/marina-menu.jpg') center/cover}#arrival.loading{background-image:url('/static/assets/ocean-loading.jpg')}.arrival-shade{position:absolute;inset:0;background:linear-gradient(90deg,#071f2cf5,#071f2c99 45%,#071f2c00)}.arrival-copy{position:relative;padding:7vh 7vw;max-width:780px}.arrival-copy img{border-radius:20px;margin-bottom:20px}.arrival-copy h1{font-size:clamp(56px,6vw,100px);font-weight:500;letter-spacing:-.06em;line-height:1.03;margin:20px 0}.arrival-copy h1 span{color:var(--mint)}.arrival-copy>p:not(.eyebrow){font-size:18px;color:var(--muted)}.primary{background:var(--mint);color:var(--ink);font-size:18px;min-width:245px;margin:28px 0 15px;text-align:left;border:0;font-weight:600}.arrival-copy #loading-status{font-size:13px;margin-bottom:18px}.arrival-copy>a{font-size:13px}#hud{position:fixed;inset:0;pointer-events:none}#hud button,#hud a,#hud select,#hud details,#pair{pointer-events:auto}header{position:absolute;top:26px;left:34px;text-shadow:0 2px 12px #061b2c}.wordmark{display:block;font-size:42px;font-weight:800;letter-spacing:-3px;text-decoration:none;color:var(--foam);line-height:1}header .eyebrow{font-size:9px}#status{font-size:12px;color:var(--muted);margin-top:9px}#pair{position:absolute;right:28px;top:28px;background:#071f2cf0;border:1px solid #44677770;padding:22px;width:244px;border-radius:16px;box-shadow:0 15px 50px #0004}#pair h2{font-size:22px;margin:8px 0}#qr{display:block;width:180px;height:180px;margin:14px auto;border:8px solid white;border-radius:8px}#pair a{font-size:12px;display:block;text-align:center}#pair p{font-size:11px;color:var(--muted);text-align:center;margin-top:12px}.instruments{position:absolute;left:34px;bottom:110px;display:flex;gap:24px;align-items:center;text-shadow:0 2px 10px #062333}.speed{display:flex;align-items:baseline;gap:8px}.speed strong{font-size:70px;line-height:1;font-weight:500;letter-spacing:-4px;font-variant-numeric:tabular-nums}.speed>span{font:10px monospace;color:var(--muted)}.destination{border-left:1px solid #a1cbcc55;padding-left:24px;display:flex;flex-direction:column}.destination strong{font-size:25px;font-weight:500}.destination>span:last-child{font-size:12px}.chart{position:absolute;bottom:110px;right:28px;width:250px;background:#071f2ce6;border:1px solid #668f9c55;border-radius:14px;overflow:hidden}.chart canvas{width:250px;height:190px;display:block}.chart>span{display:flex;justify-content:space-between;padding:0 12px 10px;font:9px monospace;color:var(--mint)}.chart b{font-weight:400;color:var(--muted)}#standings{position:absolute;left:34px;top:140px;min-width:205px;font-size:12px;background:#071f2cb8;padding:12px 16px;border:1px solid #628b9933;border-radius:10px}#standings summary{cursor:pointer}#my-score{color:var(--gold);margin-left:15px}#score{padding-top:12px;max-height:180px;overflow:auto;line-height:2}footer{position:absolute;bottom:24px;left:34px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:15px}.toolbar{display:flex;align-items:center;gap:8px}.toolbar a{font-size:12px;margin-left:8px}.boat-select{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}#nav{font-size:11px;color:var(--muted)}#toast{position:absolute;top:30%;left:50%;transform:translateX(-50%);padding:14px 25px;background:#071f2ce8;border:1px solid var(--gold);border-radius:10px;color:var(--gold);font-size:22px;opacity:0;transition:opacity .2s}#toast.show{opacity:1}@media(max-width:850px){header{left:20px;top:20px}#standings{left:20px;top:125px}.instruments{left:20px;bottom:160px}.speed strong{font-size:50px}.destination{padding-left:14px}.chart{bottom:160px;right:20px;width:190px}.chart canvas{width:190px;height:145px}.chart>span{font-size:8px}footer{left:20px;right:20px;bottom:18px;align-items:start;flex-direction:column}.toolbar{flex-wrap:wrap}.toolbar button,.toolbar select{font-size:12px;padding:8px}#pair{top:20px;right:20px;width:215px;padding:14px}#qr{width:160px;height:160px}.arrival-copy{padding:6vh 6vw}}@media(max-width:500px){.chart{display:none}#pair{top:150px;right:18px}header .eyebrow{font-size:8px}.arrival-copy h1{font-size:60px}.arrival-copy img{width:58px;height:58px}.instruments{bottom:180px}#standings{top:105px}#toast{top:42%;font-size:17px;width:max-content;max-width:90%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Pairing and chart occupy the same corner; the QR takes priority. */
#hud:has(#pair:not([hidden])) .chart{display:none}