:root {
    --void: #000;
    --marble: #f3ead6;
    --gold: #e3b04b;
    --terra: #c8553d;
    --clay: #d9a48f;
    --dim: rgba(243, 234, 214, .5);
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { height: 100%; background: var(--void); color: var(--marble); overflow: hidden; }
  body { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; -webkit-font-smoothing: antialiased; }
  @media (pointer: fine) { body, a { cursor: none; } }

  #warp { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

  /* ---- cockpit of the Starship Bistromath: bronze canopy, HUD on the glass, flight deck ---- */
  .cockpit {
    position: fixed; inset: 0; pointer-events: none; will-change: transform;
    opacity: 0; animation: arrive 1.6s .2s cubic-bezier(.2, .7, .2, 1) forwards;
    --canopy-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M11 3.2H89Q91.5 3.2 92.8 5.2L98.6 14V100H1.4V14L7.2 5.2Q8.5 3.2 11 3.2Z'/%3E%3C/svg%3E");
    --deck-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 30C16 30 30 30 36 16C40 5 44 0 50 0S60 5 64 16C70 30 84 30 100 30V100H0Z'/%3E%3C/svg%3E");
  }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
  .canopy, .canopy-edge { position: absolute; inset: 0; width: 100%; height: 100%; }
  .canopy {
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .62)), url(/assets/bronze.jpg) center / cover;
    -webkit-mask: var(--canopy-shape) 0 0 / 100% 100% no-repeat;
            mask: var(--canopy-shape) 0 0 / 100% 100% no-repeat;
  }
  .glow { position: absolute; inset: 0; box-shadow: inset 0 0 160px rgba(200, 85, 61, .55); opacity: 0; }

  header {
    position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center;
    padding: 7px clamp(20px, 5vw, 64px); font-size: 9.5px; letter-spacing: .32em; color: var(--dim);
  }
  header .mark { color: var(--gold); font-size: 12px; letter-spacing: .12em; }
  @media (max-width: 520px) { header .trio { display: none; } }

  .hud { position: absolute; inset: 0; color: var(--gold); opacity: .62; }
  .reticle { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; }
  .hud-label {
    position: absolute; left: 50%; top: calc(50% + 78px); transform: translateX(-50%);
    font-size: 9px; letter-spacing: .4em; padding-left: .4em; white-space: nowrap;
  }
  .tape {
    position: absolute; top: clamp(40px, 7vh, 64px); left: 50%; transform: translateX(-50%);
    width: min(440px, 64vw); height: 26px;
    background:
      linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 100% / 12px 7px repeat-x,
      linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 100% / 60px 14px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  }
  .tape-read {
    position: absolute; top: calc(clamp(40px, 7vh, 64px) + 30px); left: 50%; transform: translateX(-50%);
    font-size: 9px; letter-spacing: .3em; padding-left: .3em;
  }
  .tape-read::before { content: '▲'; display: block; text-align: center; font-size: 7px; margin-bottom: 3px; }

  .dash {
    position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 26vh, 246px); isolation: isolate;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(16px, 3vw, 44px);
    padding: 0 clamp(20px, 4.5vw, 64px) 30px;
  }
  .dash-plate {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(180deg, rgba(255, 214, 150, .1), rgba(0, 0, 0, .22) 32%, rgba(0, 0, 0, .55)),
      url(/assets/bronze.jpg) center top / cover;
    -webkit-mask: var(--deck-shape) 0 0 / 100% 100% no-repeat;
            mask: var(--deck-shape) 0 0 / 100% 100% no-repeat;
  }
  .dash-shell { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
  .trim {
    position: absolute; left: 0; right: 0; bottom: 0; height: 9px; opacity: .85;
    background: url(/assets/trim.jpg) 0 50% / auto 100% repeat-x;
  }
  .dash-hint {
    position: absolute; left: 0; right: 0; bottom: 13px; text-align: center;
    font-size: 8.5px; letter-spacing: .38em; color: rgba(243, 234, 214, .42);
  }
  .dash-hint b { color: var(--gold); font-weight: 400; }

  /* instruments are recessed glass set into the bronze */
  .glass {
    background: linear-gradient(180deg, rgba(12, 9, 5, .86), rgba(0, 0, 0, .92));
    border: 1px solid rgba(227, 176, 75, .3); border-radius: 4px; padding: 8px 12px 10px;
    box-shadow: inset 0 1px 14px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 220, 160, .1), 0 0 0 3px rgba(0, 0, 0, .35);
  }
  .panel { width: min(300px, 100%); }
  .panel.left { justify-self: end; }
  .panel.right { justify-self: start; }
  .panel h2 { font-size: 8px; font-weight: 400; letter-spacing: .5em; color: var(--gold); opacity: .8; margin-bottom: 7px; }
  .cells { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
  .cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cell.wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .cell span, .cells > .lamp { font-size: 7.5px; letter-spacing: .3em; color: rgba(243, 234, 214, .5); white-space: nowrap; }
  .cell b {
    font-size: 11.5px; font-weight: 400; letter-spacing: .08em; color: #f2cf7f; white-space: nowrap;
    text-shadow: 0 0 8px rgba(227, 176, 75, .45);
  }
  .cell sup { font-size: .72em; }
  .lamp::before {
    content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 7px; vertical-align: 1px;
    background: var(--gold); box-shadow: 0 0 7px var(--gold);
  }
  .lamp.hot::before { background: var(--terra); box-shadow: 0 0 11px var(--terra); }
  .lamp.off::before { background: #3b2a1c; box-shadow: none; animation: blink 1.6s steps(2) infinite; }
  @keyframes blink { 50% { background: var(--terra); box-shadow: 0 0 8px var(--terra); } }

  .core { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .placard {
    font-weight: 600; font-size: clamp(11px, 1.1vw, 13.5px); letter-spacing: .3em;
    padding: 5px 12px 5px calc(12px + .3em); border-radius: 3px; color: #2a1c08;
    background: linear-gradient(180deg, #dcb86c, #a07836 55%, #7a5824);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, .6), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .7);
    text-shadow: 0 1px 0 rgba(255, 235, 190, .45);
    transition: box-shadow .3s, filter .3s;
  }
  .placard.lit {
    filter: brightness(1.3) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, .7), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 0 26px rgba(227, 176, 75, .85);
  }
  .dial { width: clamp(88px, 12vh, 114px); height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .8)); }
  .dial text { font-family: inherit; text-anchor: middle; }
  .plate { font-size: 8.5px; letter-spacing: .42em; padding-left: .42em; color: var(--gold); white-space: nowrap; }

  @media (max-width: 760px), (max-height: 620px) {
    .panel { display: none; }
    .dash { grid-template-columns: 1fr; justify-items: center; }
  }

  .cursor {
    position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    pointer-events: none; z-index: 10; will-change: transform;
  }
  .cursor svg { width: 100%; height: 100%; display: block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .cursor.warp svg { transform: scale(1.6) rotate(45deg); }
  @media (pointer: coarse) { .cursor { display: none; } }

  .numeral { color: var(--dim); }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .noscript {
    position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
    font-size: 12px; letter-spacing: .3em; color: var(--gold); z-index: 20;
  }

  /* 404 */
  body.lost-page { overflow: auto; cursor: auto; }
  .lost {
    min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px;
    padding: 32px 16px; text-align: center;
  }
  .lost-code { font-size: 11px; letter-spacing: .5em; padding-left: .5em; color: var(--gold); }
  .lost h1 { font-weight: 600; font-size: clamp(20px, 3vw, 32px); letter-spacing: .06em; max-width: 22ch; }
  .lost p { color: var(--dim); font-size: 13px; letter-spacing: .08em; }
  .lost a {
    margin-top: 10px; color: #2a1c08; text-decoration: none; font-weight: 600; font-size: 12px; letter-spacing: .3em;
    padding: 8px 16px 8px calc(16px + .3em); border-radius: 3px;
    background: linear-gradient(180deg, #dcb86c, #a07836 55%, #7a5824);
  }
  .lost a:focus-visible { outline: 2px solid var(--marble); outline-offset: 3px; }
  @media (pointer: fine) { body.lost-page, body.lost-page a { cursor: auto; } }