:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #eef3f3; background: #101c25; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
canvas { display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 1px solid #ffffff24; background: #13273165; border-radius: 7px; padding: 10px 14px; transition: background .2s, border-color .2s; }
button:hover { background: #ffffff18; border-color: #ffffff55; }
button:focus-visible { outline: 2px solid #a6ddd2; outline-offset: 4px; }
button[aria-pressed="true"] { background: #b3dfd322; border-color: #b3dfd375; }
[hidden] { display: none !important; }
#loading-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #101c25; transition: opacity .8s ease, visibility .8s; }
#loading-screen.complete { opacity: 0; visibility: hidden; pointer-events: none; }
#loading-bar { width: min(180px, 42vw); height: 2px; overflow: hidden; background: #ffffff13; border-radius: 2px; }
#loading-fill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #c1d9d5; box-shadow: 0 0 9px #bce0d330; will-change: transform; }
#loading-error { position: absolute; top: calc(50% + 28px); text-align: center; font-size: 13px; color: #bdc9ce; max-width: 310px; line-height: 1.6; }
#interface { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1s ease; background: linear-gradient(#08172260, transparent 24%, transparent 60%, #06171d85); }
body.ready #interface { opacity: 1; }
#interface button { pointer-events: auto; }
.topbar { position: absolute; top: 30px; left: 36px; right: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 13px; letter-spacing: 3px; font-weight: 600; }
.brand-mark { font-size: 36px; line-height: 1; font-weight: 300; color: #bbd8d4; }
.eyebrow { display: block; font-size: 9px; letter-spacing: 2px; font-weight: 500; color: #c0d0d1; }
.brand .eyebrow { margin-top: 7px; font-size: 8px; letter-spacing: 1.6px; opacity: .7; }
.session { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #d7e5e4; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #b2d9c6; box-shadow: 0 0 8px #b2d9c633; }
nav { display: flex; gap: 8px; }
nav button { font-size: 11px; backdrop-filter: blur(12px); }
#current-state { margin-left: 8px; color: #b6d8cc; }
.heading-display { position: absolute; top: 114px; left: 50%; transform: translateX(-50%); text-align: center; width: 160px; }
.heading-display > span:nth-child(2) { display: block; margin-top: 8px; font-size: 25px; font-weight: 300; font-variant-numeric: tabular-nums; }
.heading-display small { font-size: 14px; color: #b9cccc; }
.compass-scale { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 8px; border-top: 1px solid #ffffff30; font-size: 8px; color: #c1d1d1; }
.compass-scale i { width: 1px; height: 4px; background: #ffffff50; }
.bottom-ui { position: absolute; bottom: 26px; left: 36px; right: 36px; }
.voyage-label { margin-bottom: 19px; }
.voyage-label > span:last-child { display: block; margin-top: 7px; font-size: 19px; letter-spacing: .5px; font-weight: 400; }
.voyage-label small { font-size: 10px; color: #b6ccca; margin-left: 6px; }
.instruments { display: flex; width: fit-content; border: 1px solid #ffffff20; border-radius: 12px; background: #10272d66; backdrop-filter: blur(20px); padding: 20px 4px; }
.instrument { min-width: 145px; padding: 0 24px; border-left: 1px solid #ffffff1f; position: relative; }
.instrument:first-child { border: 0; min-width: 192px; }
.instrument > div:not(.engine-track) { margin-top: 9px; font-size: 29px; font-weight: 300; font-variant-numeric: tabular-nums; }
.instrument small { font-size: 11px; color: #b8cecc; margin-left: 7px; }
.engine-track { position: absolute; bottom: -8px; left: 24px; right: 24px; height: 2px; background: #ffffff15; }
#engine-fill { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: #b9dad0; transition: transform .12s linear; }
.controls-hint { display: flex; align-items: center; gap: 22px; margin-top: 17px; color: #c2d0d0; font-size: 10px; }
.controls-hint > span { display: flex; align-items: center; gap: 4px; }
kbd { display: inline-grid; place-items: center; width: 18px; height: 20px; border: 1px solid #ffffff30; border-radius: 4px; font-family: inherit; font-size: 9px; color: #e0ebeb; }
kbd:last-of-type { margin-right: 4px; }
#camera-button { padding: 5px 9px; font-size: 10px; }
#ship-label-container { padding: 5px 10px; border: 1px solid #ffffff30; border-radius: 30px; background: #17343c66; color: #edf4f2; font-size: 10px; letter-spacing: .7px; }
#pause-notice { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 22px; font-weight: 300; padding: 20px 28px; border-radius: 10px; background: #10232c99; backdrop-filter: blur(15px); }
#pause-notice span { display: block; margin-top: 9px; font-size: 10px; color: #bacdce; }
.touch-controls { display: none; position: absolute; right: 22px; bottom: 230px; align-items: center; gap: 7px; }
.touch-controls div { display: grid; gap: 7px; }
.touch-controls button { width: 44px; height: 44px; touch-action: none; user-select: none; }
@media (pointer: coarse) { .touch-controls { display: flex; } }
@media (max-width: 700px) {
    .topbar { top: 20px; left: 20px; right: 20px; gap: 10px; flex-wrap: wrap; }
    .session { display: none; }
    .brand { font-size: 11px; letter-spacing: 2px; }
    .brand-mark { display: none; }
    nav { gap: 5px; } nav button { padding: 9px 8px; font-size: 10px; }
    .heading-display { top: 105px; width: 120px; }
    .bottom-ui { left: 20px; right: 20px; bottom: 20px; }
    .instruments { width: 100%; padding: 16px 0; }
    .instrument, .instrument:first-child { min-width: 0; flex: 1; padding: 0 12px; }
    .instrument .eyebrow { font-size: 7px; letter-spacing: 1px; min-height: 18px; }
    .instrument > div:not(.engine-track) { font-size: 22px; margin-top: 4px; }
    .instrument small { font-size: 9px; margin-left: 3px; }
    .engine-track { left: 12px; right: 12px; }
    .controls-hint { gap: 12px; flex-wrap: wrap; font-size: 9px; margin-top: 12px; }
    .controls-hint > span:nth-child(3) { display: none; }
    .voyage-label { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }