/* One Degree — first-time onboarding (see onboarding.js).
   Graphite, navy and brushed metal; restrained cyan / icy-blue light with subtle amber accents. */
html[data-onboarding="active"] #site { visibility: hidden; }
html[data-onboarding="active"] #site .initiate-button-label { visibility: hidden; }   /* its own "visible" states must not show through the sign-in screen */

.odb {
  --c: 140, 225, 255;
  --ice: #d9f4ff;
  --ink: #e2ebef;
  --muted: rgba(196, 214, 222, .62);
  --amber: #e8b06a;
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #0b1520 0%, #060b11 55%, #030508 100%);
  color: var(--ink); font-family: var(--sans);
  transition: opacity .9s ease;
}
.odb[hidden], .odi[hidden] { display: none; }
.odb.to-black { opacity: 0; }
.odb-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.odb-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55)); }
.odb-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--c), .38) 25%, rgba(var(--c), .38) 75%, transparent); box-shadow: 0 0 10px rgba(var(--c), .35); opacity: .55; animation: odb-scan 11s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes odb-scan { 0% { transform: translateY(-2vh); opacity: 0; } 8% { opacity: .55; } 92% { opacity: .55; } 100% { transform: translateY(102vh); opacity: 0; } }

/* Stages fade and drift between each other. */
.odb-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 26px); padding: clamp(20px, 4vh, 48px) 16px; box-sizing: border-box; overflow-y: auto; opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }
.odb-stage.active { opacity: 1; transform: none; filter: none; }
.odb-stage.leaving { opacity: 0; transform: translateY(-10px); filter: blur(6px); transition-duration: .5s; }

/* Shared type and controls */
.odb-label { display: block; color: rgba(var(--c), .8); font: 500 var(--fs-small) var(--mono); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-sub { margin: 0; color: var(--muted); font-size: var(--fs-h3); letter-spacing: var(--ls-body); }
.odb-head { text-align: center; }
.odb-kicker { margin: 0 0 10px; color: var(--muted); font: var(--fs-small) var(--mono); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-kicker b { color: rgba(var(--c), .95); font-weight: 500; }
.odb-head h2 { margin: 0 0 10px; color: var(--ice); font: 300 var(--fs-title) var(--sans); letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); text-shadow: 0 0 18px rgba(var(--c), .25); font-stretch: var(--stretch-instrument); }
.odb-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 46px; padding: 0 18px; box-sizing: border-box; overflow: hidden;
  border: 1px solid rgba(170, 205, 220, .2); border-radius: 9px;
  background: linear-gradient(180deg, rgba(42, 52, 60, .72), rgba(14, 19, 24, .86)); box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 6px 18px rgba(0, 0, 0, .35);
  color: var(--ink); font: 400 var(--fs-body) var(--sans); letter-spacing: var(--ls-body); cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .12s, filter .2s, background .25s;
}
.odb-btn::after { position: absolute; inset: 0; content: ''; background: linear-gradient(105deg, transparent 35%, rgba(var(--c), .12) 50%, transparent 65%); transform: translateX(-100%); transition: transform .7s ease; pointer-events: none; }
.odb-btn:hover:not(:disabled), .odb-btn:focus-visible { border-color: rgba(var(--c), .5); box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 0 16px rgba(var(--c), .1), 0 0 16px rgba(var(--c), .12); outline: none; }
.odb-btn:hover:not(:disabled)::after { transform: translateX(100%); }
.odb-btn:active:not(:disabled) { transform: translateY(1px) scale(.995); filter: brightness(1.15); }
.odb-btn:disabled { opacity: .4; cursor: default; }
.odb-btn svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.odb-btn svg rect, .odb-btn svg path[d^="M3.6"] { fill: none; stroke: currentColor; stroke-width: 1.5; }
.odb-primary { width: auto; min-width: 170px; border-color: rgba(var(--c), .42); background: linear-gradient(180deg, rgba(24, 58, 74, .7), rgba(9, 24, 33, .88)); color: var(--ice); font: 500 var(--fs-body) var(--mono); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-link { padding: 10px 4px; border: 0; background: none; color: var(--muted); font: var(--fs-small) var(--mono); letter-spacing: var(--ls-wide); cursor: pointer; transition: color .2s; font-stretch: var(--stretch-instrument); }
.odb-link:hover, .odb-link:focus-visible { color: var(--ice); outline: none; }
.odb-input { width: 100%; height: 46px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(170, 205, 220, .22); border-radius: 9px; outline: none; background: rgba(6, 12, 18, .7); color: #fff; font: var(--fs-body) var(--sans); letter-spacing: var(--ls-body); caret-color: #bff1ff; transition: border-color .25s, box-shadow .25s; }
.odb-input::placeholder { color: rgba(196, 214, 222, .42); }
.odb-input:focus { border-color: rgba(var(--c), .6); box-shadow: 0 0 0 3px rgba(var(--c), .08), 0 0 14px rgba(var(--c), .14); }
.odb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(760px, 100%); }
.odb-need, .odb-count { flex: 1; margin: 0; color: var(--muted); font: var(--fs-small) var(--mono); letter-spacing: var(--ls-caps); text-align: center; text-transform: uppercase; font-stretch: var(--stretch-instrument); }

/* ---------- STAGE 1: SIGN IN ---------- */
.odb-col { display: flex; flex-direction: column; align-items: center; width: min(400px, 100%); text-align: center; }
@keyframes odb-orbit { to { transform: rotate(360deg); } }
.odb-auth { width: 100%; min-height: 170px; }
.odb-choose { display: grid; gap: 10px; transition: opacity .26s, transform .26s; }
.odb-choose.out { opacity: 0; transform: translateY(-6px); }
.odb-email { display: grid; gap: 10px; text-align: left; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.odb-email.in { opacity: 1; transform: none; }
.odb-hint { margin: 0; color: var(--muted); font-size: var(--fs-body); }
.odb-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.odb-consent { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; width: 100%; margin-top: 22px; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); text-align: left; cursor: pointer; }
.odb-consent input { position: absolute; opacity: 0; pointer-events: none; }
.odb-box { position: relative; width: 16px; height: 16px; margin-top: 1px; border: 1px solid rgba(170, 205, 220, .35); border-radius: 4px; background: rgba(6, 12, 18, .7); transition: border-color .2s, background .2s, box-shadow .2s; }
.odb-box::after { position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; content: ''; border: solid #04121a; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .18s ease; }
.odb-consent input:checked + .odb-box { border-color: rgba(var(--c), .9); background: #9fe9ff; box-shadow: 0 0 10px rgba(var(--c), .4); }
.odb-consent input:checked + .odb-box::after { transform: rotate(45deg) scale(1); }
.odb-consent input:focus-visible + .odb-box { box-shadow: 0 0 0 3px rgba(var(--c), .2); }
.odb-status { min-height: 18px; margin: 18px 0 0; color: rgba(var(--c), .9); font: var(--fs-small)/1.5 var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.odb-status.busy::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 10px; border: 1.5px solid rgba(var(--c), .3); border-top-color: rgba(var(--c), 1); border-radius: 50%; vertical-align: -1px; animation: odb-orbit .9s linear infinite; }
.odb-status.warn { color: var(--amber); }
.odb-proto { margin: 14px 0 0; color: rgba(196, 214, 222, .42); font-size: var(--fs-small); letter-spacing: var(--ls-body); }

/* ---------- STAGE 2: MEET YOUR PILOT ---------- */
.odb-field { width: min(420px, 100%); display: grid; gap: 9px; }
.odb-name { text-align: center; font-size: var(--fs-h3); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.odb-avatar-head { display: grid; gap: 6px; justify-items: center; margin-top: 4px; }
.odb-pads { display: flex; justify-content: center; gap: clamp(18px, 4vw, 56px); width: 100%; }
.odb-pad { position: relative; width: clamp(180px, 21vw, 280px); height: clamp(280px, 44vh, 420px); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.odb-pad:focus-visible { outline: none; }
.odb-holo { position: absolute; left: 0; right: 0; top: 0; bottom: 44px; pointer-events: none; --holo-under: 26px; }   /* the figure keeps its frame; the 26px strip below it holds the pad light and reflection */
.odb-holo canvas { display: block; width: 100%; height: 100%; }
/* Scanlines and a soft glow live on the hologram itself (masked canvas), not on the empty pad. */
.odb-holo canvas { -webkit-mask: repeating-linear-gradient(0deg, #000 0 2px, rgba(0, 0, 0, .74) 2px 3px); mask: repeating-linear-gradient(0deg, #000 0 2px, rgba(0, 0, 0, .74) 2px 3px); filter: drop-shadow(0 0 3px rgba(120, 215, 255, .3)); }
/* The pad light and beam follow the projected figure: --holo is its live brightness (0..1), --holo-x its sway. */
.odb-base { position: absolute; left: 50%; bottom: 52px; width: 72%; height: 30px; transform: translateX(-50%); border: 1px solid rgba(var(--c), .3); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(var(--c), .14), rgba(var(--c), .03) 60%, transparent 72%); box-shadow: inset 0 0 12px rgba(var(--c), .12); transition: border-color .35s, box-shadow .35s, background .35s; }
.odb-base::before { position: absolute; inset: 7px 18%; content: ''; border: 1px dashed rgba(var(--c), .3); border-radius: 50%; }
.odb-base::after { position: absolute; left: 50%; top: 50%; width: 120%; height: 160%; content: ''; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--c), .12), transparent 65%); opacity: 0; transition: opacity .4s; }
.odb-beam { position: absolute; left: 50%; bottom: 66px; width: 70%; height: 72%; transform: translateX(-50%); pointer-events: none; opacity: 0; background: linear-gradient(0deg, rgba(var(--c), .16), rgba(var(--c), .04) 55%, transparent); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); transition: opacity .6s ease; }
.odb-pad-label { position: absolute; left: 0; right: 0; bottom: 14px; color: var(--muted); font: 500 var(--fs-body) var(--mono); letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); transition: color .3s; font-stretch: var(--stretch-instrument); }
.odb-check { position: absolute; left: 50%; bottom: -18px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; transform: translate(-50%, 4px); border: 1px solid rgba(var(--c), .6); border-radius: 999px; background: rgba(8, 30, 42, .8); color: var(--ice); font: 500 var(--fs-micro) var(--mono); letter-spacing: var(--ls-caps); opacity: 0; transition: opacity .35s, transform .35s; font-stretch: var(--stretch-instrument); }
.odb-check svg { width: 12px; height: 12px; fill: none; stroke: #bff1ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.odb-pad:hover .odb-base, .odb-pad:focus-visible .odb-base, .odb-pad.projecting .odb-base { border-color: rgba(var(--c), .6); box-shadow: inset 0 0 16px rgba(var(--c), .25), 0 0 18px rgba(var(--c), .2); }
.odb-pad.projecting .odb-beam { opacity: calc(.3 + .7 * var(--holo, 1)); }
.odb-pad.projecting .odb-base::after { opacity: var(--holo, 1); transform: translate(calc(-50% + var(--holo-x, 0px)), -50%); }
.odb-pad:hover .odb-pad-label, .odb-pad:focus-visible .odb-pad-label, .odb-pad.projecting .odb-pad-label { color: var(--ice); }
.odb-pad.selected .odb-base { border-color: rgba(var(--c), .95); background: radial-gradient(ellipse at center, rgba(var(--c), .3), rgba(var(--c), .06) 60%, transparent 72%); box-shadow: inset 0 0 18px rgba(var(--c), .35), 0 0 24px rgba(var(--c), .3); }
.odb-pad.selected .odb-pad-label { color: #fff; text-shadow: 0 0 10px rgba(var(--c), .6); }
.odb-pad.selected .odb-check { opacity: 1; transform: translate(-50%, 0); }
.odb-pad.selected .odb-base::before { border-style: solid; border-color: rgba(var(--c), .55); animation: odb-pulse 2.8s ease-in-out infinite; }
@keyframes odb-pulse { 50% { opacity: .35; } }

/* ---------- STAGE 3: CHART YOUR INTERESTS ---------- */
.odb-interests { justify-content: flex-start; }
.odb-chart { position: relative; display: grid; grid-template-columns: 1fr clamp(220px, 24vw, 320px) 1fr; align-items: center; gap: clamp(12px, 2vw, 36px); width: min(1180px, 100%); }
.odb-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.odb-links path { fill: none; stroke: rgba(var(--c), .16); stroke-width: 1; stroke-dasharray: 3 5; animation: odb-flow 2.4s linear infinite; transition: stroke .3s; }
.odb-links path.on { stroke: rgba(var(--c), .55); stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(var(--c), .7)); animation: none; }
.odb-links circle { fill: rgba(var(--c), .3); }
.odb-links circle.on { fill: #bff1ff; filter: drop-shadow(0 0 3px rgba(var(--c), .9)); }
@keyframes odb-flow { to { stroke-dashoffset: -16; } }
.odb-tiles { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: min(330px, 100%); }
.odb-tiles.left { justify-self: end; }
.odb-tiles.right { justify-self: start; }
.odb-tile { border: 1px solid rgba(var(--c), .17); border-radius: 11px; background: linear-gradient(160deg, rgba(14, 26, 36, .7), rgba(6, 12, 18, .7)); box-shadow: inset 0 1px rgba(255, 255, 255, .04); backdrop-filter: blur(3px); transition: border-color .3s, box-shadow .3s, background .3s, transform .3s; }
.odb-stage.active .odb-tile { animation: odb-tile-in .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.35s + var(--i) * .11s); }
.odb-tiles.left .odb-tile { --from: 26px; } .odb-tiles.right .odb-tile { --from: -26px; }
@keyframes odb-tile-in { 0% { opacity: 0; transform: translateX(var(--from)) scale(.96); filter: blur(4px); clip-path: inset(0 50% 0 50%); } 60% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; transform: none; filter: none; } }
.odb-tile-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.odb-tile-head:focus-visible { outline: none; }
.odb-tile-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: rgba(var(--c), .65); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, filter .3s; }
.odb-tile-name { flex: 1; font: 500 var(--fs-body) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.odb-tick { flex: none; position: relative; width: 16px; height: 16px; border: 1px solid rgba(var(--c), .35); border-radius: 50%; transition: background .25s, border-color .25s, box-shadow .25s; }
.odb-tick::after { position: absolute; left: 5px; top: 2.5px; width: 3.5px; height: 7px; content: ''; border: solid #04121a; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform .2s; }
.odb-tile:hover, .odb-tile:focus-within { border-color: rgba(var(--c), .42); }
.odb-tiles.left .odb-tile:hover { transform: translateX(-3px); } .odb-tiles.right .odb-tile:hover { transform: translateX(3px); }
.odb-tile.on { border-color: rgba(var(--c), .75); background: linear-gradient(160deg, rgba(20, 56, 74, .72), rgba(7, 20, 30, .78)); box-shadow: 0 0 20px rgba(var(--c), .16), inset 0 0 18px rgba(var(--c), .08); }
.odb-tile.on .odb-tile-icon { stroke: #bff1ff; filter: drop-shadow(0 0 4px rgba(var(--c), .8)); }
.odb-tile.on .odb-tick { border-color: #bff1ff; background: #9fe9ff; box-shadow: 0 0 8px rgba(var(--c), .6); }
.odb-tile.on .odb-tick::after { transform: rotate(45deg) scale(1); }
.odb-chips { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.odb-chips > div { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; overflow: hidden; padding: 0 14px; }
.odb-tile.on .odb-chips { grid-template-rows: 1fr; }
.odb-tile.on .odb-chips > div { padding-bottom: 14px; }
.odb-chip { padding: 5px 11px; border: 1px solid rgba(var(--c), .24); border-radius: 999px; background: rgba(6, 14, 20, .6); color: rgba(226, 235, 239, .82); font: var(--fs-body) var(--sans); cursor: pointer; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.odb-chip:hover, .odb-chip:focus-visible { border-color: rgba(var(--c), .6); color: #fff; outline: none; }
.odb-chip.on { border-color: rgba(var(--c), .85); background: rgba(var(--c), .18); color: #fff; box-shadow: 0 0 10px rgba(var(--c), .2); }
.odb-center { position: relative; height: clamp(320px, 50vh, 480px); }
.odb-pads, .odb-center { translate: calc(var(--par-x, 0) * -12px) calc(var(--par-y, 0) * -8px); }   /* in the scene: a little pointer parallax (see anchorHolos) */
.odb-holo.big { bottom: 38px; }
.odb-beam.big { bottom: 60px; width: 64%; height: 80%; opacity: calc(.3 + .7 * var(--holo, 1)); }
.odb-base.big { bottom: 46px; width: 64%; border-color: rgba(var(--c), .7); box-shadow: inset 0 0 18px rgba(var(--c), .3), 0 0 24px rgba(var(--c), .22); }
.odb-base.big::before { border-style: solid; border-color: rgba(var(--c), .4); }
.odb-pilot-tag { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; justify-items: center; }
.odb-pilot-tag b { color: #fff; font: 500 var(--fs-body) var(--mono); letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); text-transform: uppercase; font-stretch: var(--stretch-instrument); }
.odb-pilot-tag span { color: rgba(var(--c), .75); font: var(--fs-micro) var(--mono); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-custom { display: grid; gap: 9px; width: min(640px, 100%); }
.odb-tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 6px 6px 10px; box-sizing: border-box; border: 1px solid rgba(170, 205, 220, .22); border-radius: 10px; background: rgba(6, 12, 18, .7); transition: border-color .25s, box-shadow .25s; }
.odb-tagbox:focus-within { border-color: rgba(var(--c), .6); box-shadow: 0 0 14px rgba(var(--c), .12); }
.odb-tags { display: contents; }
.odb-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border: 1px solid rgba(var(--c), .6); border-radius: 999px; background: rgba(var(--c), .14); color: #fff; font: var(--fs-body) var(--sans); animation: odb-pop .25s ease both; }
@keyframes odb-pop { from { opacity: 0; transform: scale(.9); } }
.odb-tag-x { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.odb-tag-x svg { width: 10px; height: 10px; stroke: #cfefff; stroke-width: 1.6; stroke-linecap: round; }
.odb-tag-x:hover, .odb-tag-x:focus-visible { background: rgba(var(--c), .25); outline: none; }
.odb-tag-input { flex: 1; min-width: 160px; height: 32px; border: 0; outline: none; background: transparent; color: #fff; font: var(--fs-body) var(--sans); caret-color: #bff1ff; }
.odb-tag-input::placeholder { color: rgba(196, 214, 222, .42); }
.odb-add { height: 32px; padding: 0 14px; border: 1px solid rgba(var(--c), .4); border-radius: 7px; background: rgba(12, 36, 48, .7); color: var(--ice); font: 500 var(--fs-small) var(--mono); letter-spacing: var(--ls-caps); cursor: pointer; font-stretch: var(--stretch-instrument); }
.odb-add:hover, .odb-add:focus-visible { border-color: #bff1ff; outline: none; }

/* ---------- STAGE 4: ARRIVAL SEQUENCE ---------- */
.odi { position: fixed; inset: 0; z-index: 2100; overflow: hidden; background: #020408; color: var(--ice, #d9f4ff); transition: background 1.4s ease, opacity .6s ease; }
.odi-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.odi.s1 .odi-stars { opacity: 1; }
@keyframes odi-engine { from { opacity: .75; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes odi-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
.odi-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 236, 214, .95), rgba(255, 196, 132, .5) 25%, rgba(10, 16, 24, 0) 70%); }
.odi.s4 .odi-flash { animation: odi-flash 1.6s ease-in both; }
@keyframes odi-flash { 0% { opacity: 0; } 70% { opacity: .9; } 100% { opacity: 0; background-color: #020408; } }
.odi-bars i { position: absolute; left: 0; right: 0; height: 8vh; background: #000; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
.odi-bars i:first-child { top: 0; } .odi-bars i:last-child { bottom: 0; }
.odi-bars i:first-child { transform: translateY(-100%); } .odi-bars i:last-child { transform: translateY(100%); }
.odi.play .odi-bars i { transform: none; }
.odi-cap { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 400 var(--fs-body) var(--mono); letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); color: rgba(217, 244, 255, .8); opacity: 0; transform: translateY(6px); transition: opacity 1s ease, transform 1.2s ease; text-shadow: 0 0 12px rgba(140, 225, 255, .35); font-stretch: var(--stretch-instrument); }
.odi-cap.c1, .odi-cap.c2 { bottom: 13vh; }
.odi-cap.c3 { top: 15vh; font-size: var(--fs-h2); color: #fff; letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); transition-delay: .9s; font-stretch: var(--stretch-instrument); }
.odi.s1 .c1 { opacity: 1; transform: none; }
.odi.s3 .c1 { opacity: 0; transform: translateY(-6px); }
.odi.s3 .c2 { opacity: 1; transform: none; }
.odi.s4 .c2, .odi.c2-out .c2 { opacity: 0; transform: translateY(-6px); }
.odi.s5 { background: transparent; }
.odi.s5 .odi-stars { opacity: 0; transition-duration: .6s; }
.odi.s5 .odi-bars i:first-child { transform: translateY(-100%); }
.odi.s5 .odi-bars i:last-child { transform: translateY(100%); }
.odi.s5 .c3 { opacity: 1; transform: none; }
.odi.out { opacity: 0; }
.odi-controls { position: absolute; right: 28px; bottom: calc(8vh + 18px); z-index: 2; display: flex; gap: 10px; align-items: center; transition: bottom 1.4s cubic-bezier(.6, 0, .2, 1); }
.odi.s5 .odi-controls { bottom: 28px; }
.odi-skip, .odi-sound { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(140, 225, 255, .3); border-radius: 8px; background: rgba(4, 10, 16, .5); color: rgba(217, 244, 255, .85); font: 500 var(--fs-small) var(--mono); letter-spacing: var(--ls-wide); cursor: pointer; transition: border-color .25s, box-shadow .25s, color .25s, bottom 1.4s cubic-bezier(.6, 0, .2, 1); font-stretch: var(--stretch-instrument); }
.odi-skip svg, .odi-sound svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.odi-sound .cross { display: none; } .odi-sound.off .cross { display: inline; } .odi-sound.off .wave { display: none; } .odi-sound.off { color: rgba(217, 244, 255, .55); }
.odi-skip:hover, .odi-skip:focus-visible, .odi-sound:hover, .odi-sound:focus-visible { border-color: rgba(140, 225, 255, .7); box-shadow: 0 0 14px rgba(140, 225, 255, .2); color: #fff; outline: none; }
/* The cockpit's reveal: a slow pull back from a closer, darker view. */
#site.od-arrive { animation: od-arrive 3.1s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 44%; }
#site.od-arrive-quick { animation: od-arrive-quick .8s ease both; }
@keyframes od-arrive { 0% { transform: scale(1.24); filter: brightness(.12) blur(3px); } 55% { filter: brightness(.8) blur(0); } 100% { transform: none; filter: none; } }
@keyframes od-arrive-quick { from { filter: brightness(.35); } to { filter: none; } }

/* ---------- Responsive ---------- */
@media (max-height: 760px) {
  .odb-stage { gap: 12px; }
  .odb-pad { height: clamp(240px, 40vh, 340px); }
  .odb-tile-head { padding: 11px 14px; }
  .odb-center { height: clamp(260px, 44vh, 400px); }
}
@media (max-width: 860px) {
  .odb-chart { grid-template-columns: 1fr; justify-items: center; }
  .odb-center { order: -1; width: min(260px, 70vw); height: 300px; }
  .odb-tiles, .odb-tiles.left, .odb-tiles.right { justify-self: center; width: min(460px, 100%); }
  .odb-links { display: none; }
  .odb-tiles.left .odb-tile, .odb-tiles.right .odb-tile { --from: 0px; }
}
@media (max-width: 520px) {
  .odb-btn { gap: 8px; padding: 0 12px; font-size: var(--fs-small); }
  .odb-panel .odb-soon { margin-left: 2px; padding: 2px 5px; letter-spacing: var(--ls-body); }
  .odb-pads { gap: 10px; }
  .odb-pad { width: 46vw; height: 300px; }
  .odb-pad-label { font-size: var(--fs-micro); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
  .odi-controls { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .odb-scan, .odb-links path, .odb-pad.selected .odb-base::before { animation: none; }
  .odb-stage, .odb-stage.active .odb-tile { transition-duration: .01s; animation-duration: .01s; animation-delay: 0s; }
}

/* Inputs here use their own cyan focus treatment, never the cockpit's amber outline. */
.odb input:focus-visible, .odb button:focus-visible { outline: none; }
.odb-email[hidden], .odb-choose[hidden] { display: none; }

/* Hidden stages must not cover the active one (the layout rule above would otherwise override [hidden]). */
.odb-stage[hidden] { display: none; }
.odb-stage:not(.active) { pointer-events: none; }
/* Google / Apple: visible but clearly not available in this prototype. */
.odb-unavailable { opacity: .55; cursor: not-allowed; }
.odb-unavailable:hover:not(:disabled) { border-color: rgba(170, 205, 220, .2); box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 6px 18px rgba(0, 0, 0, .35); }
.odb-unavailable:hover::after { transform: translateX(-100%); }
.odb-unavailable:active:not(:disabled) { transform: none; filter: none; }
.odb-soon { margin-left: 4px; padding: 2px 7px; border: 1px solid rgba(232, 176, 106, .45); border-radius: 999px; color: #e8b06a; font: 500 var(--fs-nano) var(--mono); font-style: normal; letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }

/* Developer / presentation tool (hidden unless opened with Ctrl+Shift+O or ?dev). */
.od-dev { position: fixed; left: 16px; bottom: 16px; z-index: 3000; display: grid; gap: 8px; width: 250px; padding: 10px; box-sizing: border-box; border: 1px solid rgba(140, 225, 255, .3); border-radius: 10px; background: rgba(4, 12, 18, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); color: #d8f2fb; font-family: var(--mono); }
.od-dev[hidden] { display: none; }
.od-dev-bar { display: flex; align-items: center; justify-content: space-between; color: rgba(196, 214, 222, .6); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.od-dev-x { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: rgba(196, 214, 222, .7); font-size: var(--fs-h3); line-height: var(--lh-tight); cursor: pointer; }
.od-dev-x:hover, .od-dev-x:focus-visible { background: rgba(140, 225, 255, .14); color: #fff; outline: none; }
.od-dev-reset, .od-dev-row button { height: 32px; border: 1px solid rgba(232, 176, 106, .5); border-radius: 7px; background: rgba(40, 26, 10, .5); color: #f0c48a; font: 500 var(--fs-small) var(--mono); letter-spacing: var(--ls-caps); cursor: pointer; font-stretch: var(--stretch-instrument); }
.od-dev-reset:hover, .od-dev-reset:focus-visible, .od-dev-row button:hover, .od-dev-row button:focus-visible { border-color: #f0c48a; color: #fff; outline: none; }
.od-dev-confirm { display: grid; gap: 10px; padding-top: 4px; }
.od-dev-confirm[hidden] { display: none; }
.od-dev-confirm p { margin: 0; color: #e6f4f8; font: var(--fs-body)/1.45 var(--sans); }
.od-dev-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.od-dev-row .od-dev-cancel { border-color: rgba(140, 225, 255, .35); background: rgba(8, 26, 36, .6); color: #cdefff; }

/* ===== Refinement pass: brand mark, labels and alignment ===== */

/* Centred, letter-spaced text: balance the trailing tracking so each line sits on the central axis. */
.odb-kicker { letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-field { justify-items: center; }
.odb-field .odb-label, .odb-avatar-head .odb-label { text-align: center; text-indent: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-avatar-head { margin-top: 6px; }
.odb-pad-label { text-indent: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-check { letter-spacing: var(--ls-caps); padding-left: 9px; font-stretch: var(--stretch-instrument); }

/* One navigation row for every onboarding screen: same column, same height above the bottom edge.
   BACK on the left edge, the primary action on the right edge, any status exactly on the centre line. */
.odb-pilot, .odb-interests { padding-bottom: clamp(96px, 13vh, 124px); }
.odb-foot { position: absolute; left: 50%; bottom: clamp(26px, 4.5vh, 44px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; width: min(1180px, calc(100% - 96px)); transform: translateX(-50%); }
.odb-foot > :first-child { justify-self: start; }
.odb-foot > :last-child { justify-self: end; }
.odb-foot .odb-link { padding-left: 0; }
.odb-foot-mid, .odb-count { justify-self: center; text-align: center; }
.odb-count { flex: none; letter-spacing: var(--ls-caps); text-indent: var(--ls-caps); font-stretch: var(--stretch-instrument); }

/* Pilot registration: the two crew pads are mirror images about the centre line. */
.odb-pads { display: grid; grid-template-columns: repeat(2, clamp(180px, 21vw, 280px)); justify-content: center; column-gap: clamp(24px, 5vw, 72px); }

/* Chart your interests: the pilot's name only, on the central axis under the projection. */
.odb-pilot-tag { display: block; color: #fff; font: 500 var(--fs-body) var(--mono); letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); text-align: center; text-transform: uppercase; font-stretch: var(--stretch-instrument); }
.odb-chart { grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 320px) minmax(0, 1fr); }
@media (max-width: 860px) { .odb-chart { grid-template-columns: 1fr; } }
.odb-proto { text-wrap: balance; max-width: 360px; }
.odb-interests { justify-content: center; }
@media (max-width: 860px) {
  .odb-interests { justify-content: flex-start; padding-top: 88px; }
  .odb-interests .odb-foot { position: relative; left: auto; bottom: auto; flex: none; width: 100%; margin-top: 6px; transform: none; }
}

/* ===== Brand identity: primary logo (assets/brand-identity/primary-logo.svg, embedded inline) =====
   Activation sequence (~2.8 s): points light in turn, the connecting line draws, the navigation arc traces,
   the destination star ignites (restrained amber-white), then the wordmark and the tagline. The sign-in
   controls are never delayed. Reduced motion shows the finished logo. */
.odb-logo { width: min(400px, 82vw); margin: 0 0 30px; line-height: var(--lh-tight); }
.odb-logo-svg { display: block; width: 100%; height: auto; overflow: visible; shape-rendering: geometricPrecision; }
.odb-logo .lg-pt, .odb-logo .lg-star-core { transform-box: fill-box; transform-origin: center; }
.odb-logo .lg-pt { animation: lg-point .42s cubic-bezier(.2, .7, .2, 1) both; }
.odb-logo .lg-pt.p1 { animation-delay: .15s; } .odb-logo .lg-pt.p2 { animation-delay: .32s; }
.odb-logo .lg-pt.p3 { animation-delay: .49s; } .odb-logo .lg-pt.p4 { animation-delay: .66s; }
.odb-logo .lg-link { stroke-dasharray: 1; animation: lg-draw 1.05s cubic-bezier(.45, 0, .3, 1) .3s both; }
.odb-logo .lg-arc { stroke-dasharray: 1; }
.odb-logo .lg-arc.a1 { animation: lg-draw .7s cubic-bezier(.45, 0, .3, 1) 1.05s both; }
.odb-logo .lg-arc.a2 { animation: lg-draw-dim .5s cubic-bezier(.45, 0, .3, 1) 1.6s both; }
.odb-logo .lg-ticks { animation: lg-fade .5s ease 1.3s both; }
.odb-logo .lg-star-ray { animation: lg-fade .45s ease 1.85s both; }
.odb-logo .lg-star-core { animation: lg-ignite .7s cubic-bezier(.2, .7, .2, 1) 1.85s both; }
.odb-logo .lg-star { filter: drop-shadow(0 0 3px rgba(245, 216, 167, .55)); }
.odb-logo .lg-wordmark { animation: lg-rise .6s cubic-bezier(.2, .7, .2, 1) 2.05s both; }
.odb-logo .lg-tagline { animation: lg-rise .6s cubic-bezier(.2, .7, .2, 1) 2.3s both; }
@keyframes lg-point { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }
@keyframes lg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lg-draw-dim { from { stroke-dashoffset: 1; opacity: .65; } to { stroke-dashoffset: 0; opacity: .65; } }
@keyframes lg-fade { from { opacity: 0; } }
@keyframes lg-ignite { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: none; } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .odb-logo * { animation: none !important; } }

/* ===== Continuous outer-space onboarding (onboarding-space.js) =====
   The universe is one fixed WebGL canvas behind the onboarding layer; each screen is a camera position. */
.od-space { position: fixed; inset: 0; z-index: 1990; display: block; width: 100vw; height: 100vh; background: #02050a; }
.odb.gl { background: transparent; }
.odb.gl .odb-stars { display: none; }
.odb.gl .odb-vignette { background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(0, 0, 0, .35)); }
.odb.gl .odb-scan { opacity: .3; }
.odb.moving .odb-stage { pointer-events: none; }

/* HUD corners: fine technical markings that update as the camera moves deeper. */
.odb-hud { position: absolute; inset: 0; pointer-events: none; color: rgba(190, 214, 224, .5); font: 400 var(--fs-micro) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.odb-hud span { position: absolute; display: flex; align-items: center; gap: 10px; transition: opacity .6s ease; }
.odb-hud .hud-tl { left: clamp(20px, 3vw, 44px); top: clamp(18px, 3vh, 32px); }
.odb-hud .hud-tr { right: clamp(20px, 3vw, 44px); top: clamp(18px, 3vh, 32px); }
.odb-hud .hud-bl { left: clamp(20px, 3vw, 44px); bottom: clamp(18px, 3vh, 32px); }
.odb-hud .hud-br { right: clamp(20px, 3vw, 44px); bottom: clamp(18px, 3vh, 32px); }
.odb-hud .hud-tl::before { width: 6px; height: 6px; content: ''; border-radius: 50%; background: #e8b06a; box-shadow: 0 0 6px rgba(232, 176, 106, .7); }
.odb-hud .hud-sector { color: rgba(var(--c), .85); font-weight: 500; }
.odb[data-stage="pilot"] .hud-bl, .odb[data-stage="pilot"] .hud-br, .odb[data-stage="interests"] .hud-bl, .odb[data-stage="interests"] .hud-br { opacity: 0; } /* the navigation row lives there */
.odb.moving .hud-sector { animation: odb-pulse 0.6s ease-in-out infinite; }

/* ---------- SIGN IN: asymmetric composition ---------- */
.odb-signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; justify-content: stretch; gap: 6vw; padding: 0 clamp(32px, 7.5vw, 128px); overflow: hidden; }
.odb-brand { position: relative; align-self: start; width: min(500px, 38vw); margin-top: clamp(120px, 24vh, 240px); }
.odb-wordmark { margin: 0; line-height: var(--lh-tight); animation: lg-rise .8s cubic-bezier(.2, .7, .2, 1) .3s both; }
.odb-wordmark svg { display: block; width: 100%; height: auto; overflow: visible; shape-rendering: geometricPrecision; filter: drop-shadow(0 0 14px rgba(242, 234, 219, .12)); }
.odb-tagline { margin: 26px 0 0; color: #c7a77a; font: 500 var(--fs-body) var(--sans); letter-spacing: var(--ls-wide); animation: lg-rise .7s cubic-bezier(.2, .7, .2, 1) .7s both; font-stretch: var(--stretch-instrument); }
.odb-panel { position: relative; align-self: center; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 30px 28px 24px; border: 1px solid rgba(140, 225, 255, .14); border-radius: 3px; background: linear-gradient(165deg, rgba(10, 22, 32, .56), rgba(3, 9, 15, .62)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); animation: lg-rise .7s cubic-bezier(.2, .7, .2, 1) .25s both; }
.odb-panel::before, .odb-panel::after { position: absolute; width: 16px; height: 16px; content: ''; border: solid rgba(var(--c), .7); pointer-events: none; }
.odb-panel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.odb-panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.odb-panel-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: rgba(var(--c), .85); font: 500 var(--fs-small) var(--mono); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.odb-panel-kicker::after { flex: 1; height: 1px; content: ''; background: linear-gradient(90deg, rgba(var(--c), .35), transparent); }
.odb-panel .odb-auth { min-height: 158px; }
.odb-panel .odb-consent { margin-top: 20px; }
.odb-panel .odb-status { text-align: left; }
.odb-panel .odb-proto { max-width: none; text-align: left; text-wrap: pretty; }

/* ---------- PILOT REGISTRATION: two-part composition ---------- */
.odb-pilot { justify-content: center; }
.odb-reg { display: grid; grid-template-columns: minmax(280px, 360px) auto; align-items: center; justify-content: center; column-gap: clamp(48px, 7vw, 120px); width: min(1180px, 100%); }
.odb-reg-left { position: relative; display: grid; gap: 18px; padding: 24px 24px 26px; border: 1px solid rgba(140, 225, 255, .14); border-radius: 3px; background: linear-gradient(165deg, rgba(10, 22, 32, .5), rgba(3, 9, 15, .56)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.odb-reg-left::before, .odb-reg-left::after { position: absolute; width: 16px; height: 16px; content: ''; border: solid rgba(var(--c), .7); }
.odb-reg-left::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.odb-reg-left::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.odb-reg-left .odb-head { text-align: left; }
.odb-reg-left .odb-kicker { text-indent: 0; }
.odb-reg-left .odb-head h2 { margin: 0; font-size: var(--fs-h2); letter-spacing: var(--ls-caps); text-indent: 0; font-stretch: var(--stretch-instrument); }
.odb-reg-left .odb-field { width: 100%; justify-items: stretch; }
.odb-reg-left .odb-field .odb-label { text-align: left; text-indent: 0; }
.odb-reg-left .odb-name { text-align: left; }
.odb-reg-right { display: grid; gap: 18px; justify-items: center; }
.odb-reg-right .odb-avatar-head { margin: 0; }

/* ---------- CHART YOUR INTERESTS: the universe shows through; avatar remains the focal point ---------- */
.odb.gl .odb-tile { background: linear-gradient(160deg, rgba(10, 22, 32, .62), rgba(3, 9, 15, .62)); backdrop-filter: blur(6px); }

@media (max-width: 960px) {
  .odb-signin { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 28px; overflow-y: auto; }
  .odb-brand { width: min(420px, 86vw); margin-top: 0; }
  .odb-panel { max-width: 420px; }
  .odb-reg { grid-template-columns: 1fr; row-gap: 28px; justify-items: center; }
  .odb-reg-left { width: min(360px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .odb-wordmark, .odb-tagline, .odb-panel { animation: none; }
}
.odb-signin { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); }
.odb-panel .odb-btn span { white-space: nowrap; }
.odb-panel .odb-soon { white-space: nowrap; letter-spacing: var(--ls-label); padding: 2px 6px; font-stretch: var(--stretch-instrument); }
.odb-reg-left .odb-head h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-caps); white-space: nowrap; font-stretch: var(--stretch-instrument); }
/* Arrival through the shared universe: the intro layer is transparent so the WebGL scene shows through. */
.odi.gl { background: transparent; }
.odi.gl .odi-stars { display: none; }
.odi.gl .odi-flash { background: radial-gradient(circle at 50% 50%, rgba(255, 236, 214, .95), rgba(255, 196, 132, .5) 25%, rgba(10, 16, 24, 0) 70%); }
/* Opening sequence: the warm cockpit light as the camera passes through the canopy glass, peaking at the hand-over. */
.odi.gl.s4 .odi-flash { animation: odi-board 1s ease-in-out both; }
@keyframes odi-board { 0%, 28% { opacity: 0; } 62% { opacity: .82; } 100% { opacity: 0; } }
.od-space { transition: opacity 1.2s ease; }
.od-space.out { opacity: 0; }
.od-space.out { transition-duration: .35s; } /* hidden under the canopy flash, so the cockpit appears behind it */
/* Sound control on the onboarding screens: mute and volume, quiet and out of the way (top right, under the HUD line). */
.odb-sound { position: absolute; right: clamp(20px, 3vw, 44px); top: calc(clamp(18px, 3vh, 32px) + 24px); z-index: 3; display: flex; align-items: center; gap: 10px; opacity: .72; transition: opacity .3s ease; }
.odb-sound:hover, .odb-sound:focus-within { opacity: 1; }
.odb-sound .odi-sound { padding: 6px 10px; gap: 8px; font-size: var(--fs-micro); }
.odb-vol { width: 76px; height: 14px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --fill: 62%; }
.odb-vol::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(140, 225, 255, .7) var(--fill), rgba(140, 225, 255, .2) var(--fill)); }
.odb-vol::-moz-range-track { height: 2px; background: rgba(140, 225, 255, .2); }
.odb-vol::-moz-range-progress { height: 2px; background: rgba(140, 225, 255, .7); }
.odb-vol::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; border: 1px solid rgba(217, 244, 255, .8); border-radius: 50%; background: #06121a; -webkit-appearance: none; }
.odb-vol::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid rgba(217, 244, 255, .8); border-radius: 50%; background: #06121a; }
.odb-vol:focus-visible { outline: 1px solid rgba(140, 225, 255, .7); outline-offset: 3px; }
.odb.to-black .odb-sound { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .odb-vol { display: none; } }
.odb-signin-link { justify-self: center; padding: 4px; }   /* returning pilots: sign in to a pilot profile kept on this device */