@font-face { font-family: 'Cabinet Grotesk'; src: url('./fonts/cabinet-grotesk-8d5d1213c391.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
  @font-face { font-family: 'Satoshi'; src: url('./fonts/satoshi-e739aff9b4d0.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
  :root {
    color-scheme: dark;
    --bg: #040405;
    --ink: #EAE4D6;
    --fog: #B0B0AB;
    --ember: #E58A0F;
    --glass: rgba(14, 12, 11, 0.62);
    --line: rgba(234, 228, 214, 0.14);
    --line-strong: rgba(234, 228, 214, 0.34);
    --edge: 28px;
    --t: max(var(--edge), env(safe-area-inset-top, 0px));
    --r: max(var(--edge), env(safe-area-inset-right, 0px));
    --b: max(var(--edge), env(safe-area-inset-bottom, 0px));
    --l: max(var(--edge), env(safe-area-inset-left, 0px));
    --hit: 38px;
    --display: 'Cabinet Grotesk', 'Satoshi', ui-sans-serif, system-ui, sans-serif;
    --text: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
  body { font-family: var(--text); -webkit-font-smoothing: antialiased; }
  [hidden] { display: none !important; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  button { font: inherit; color: inherit; }

  #stage { position: fixed; inset: 0; outline: none; touch-action: none; cursor: default; background: var(--bg); }
  #stage canvas { display: block; width: 100%; height: 100%; }
  #stage.grab { cursor: grab; }
  #stage.grabbing { cursor: grabbing; }
  #stage:focus-visible::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line-strong); pointer-events: none; }

  /* The approved flat mark is the first paint, and the fallback for every failure. */
  #poster { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 2; pointer-events: none;
    transition: opacity 700ms cubic-bezier(.16,1,.3,1), visibility 0s linear 700ms; }
  #poster svg { width: min(40vh, 52vw); height: auto; fill: var(--ink); display: block; }
  #poster p { position: absolute; left: var(--l); right: var(--r); bottom: var(--b); margin: 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--fog); letter-spacing: 0.02em; }
  .live #poster { opacity: 0; visibility: hidden; }

  .chrome { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.2s ease 0.6s; }
  /* a quiet scrim under the text, so captions stay legible over bright water */
  .chrome::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: min(42%, 320px); pointer-events: none;
    background: linear-gradient(to top, rgba(4, 4, 5, 0.62), rgba(4, 4, 5, 0.28) 45%, rgba(4, 4, 5, 0)); }
  .live .chrome { opacity: 1; }
  .failed .chrome { display: none; }
  .top { position: absolute; top: var(--t); left: var(--l); right: var(--r); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .wordmark { height: 17px; width: auto; fill: var(--ink); display: block; }
  .where { margin: 0; font: 500 11px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); }

  .state { position: absolute; left: var(--l); bottom: var(--b); display: grid; gap: 9px; max-width: 46ch; }
  .state .label { margin: 0; display: flex; align-items: center; gap: 11px; font: 700 13px/1 var(--display); letter-spacing: 0.24em; text-transform: uppercase; }
  .state .readout { font: 500 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: none; color: var(--fog); font-variant-numeric: tabular-nums; padding-left: 12px; border-left: 1px solid var(--line); }
  .dot { width: 7px; height: 7px; transform: rotate(45deg); background: var(--fog); opacity: 0.5; transition: background 600ms ease, opacity 600ms ease; flex: none; }
  .is-steady .dot { background: var(--ember); opacity: 1; }
  .state .caption { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fog); }

  .tagline { position: absolute; left: 50%; bottom: calc(var(--b) + 4px); transform: translateX(-50%); margin: 0; white-space: nowrap;
    font: 500 15px/1 var(--display); letter-spacing: 0.04em; color: var(--ink);
    opacity: 0; transition: opacity 1.4s cubic-bezier(.16,1,.3,1); }
  .tagline.on { opacity: 0.92; }

  .controls { position: absolute; right: var(--r); bottom: var(--b); display: flex; gap: 6px; align-items: center; pointer-events: auto; }
  .btn { appearance: none; min-height: var(--hit); padding: 0 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--glass);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); cursor: pointer;
    font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    transition: border-color 160ms ease, background 160ms ease; }
  .btn:hover { border-color: var(--line-strong); }
  .btn:disabled { opacity: 0.5; cursor: progress; }
  .btn[aria-pressed="true"], .btn[aria-expanded="true"] { background: rgba(234, 228, 214, 0.1); border-color: var(--line-strong); }
  .btn.icon { width: var(--hit); padding: 0; justify-content: center; }
  .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; }
  .btn.primary { padding: 0 18px; }
  :focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

  .panel { position: absolute; right: var(--r); bottom: calc(var(--b) + var(--hit) + 10px); width: min(340px, calc(100vw - var(--l) - var(--r)));
    padding: 16px; display: grid; gap: 16px; pointer-events: auto; background: var(--glass); border: 1px solid var(--line); border-radius: 2px;
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); max-height: calc(100% - var(--t) - var(--b) - 90px); overflow: auto; }
  .group { display: grid; gap: 8px; }
  .glabel { margin: 0; font: 700 10.5px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); }
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 2px; }
  .seg button { appearance: none; background: transparent; border: 0; color: var(--fog); cursor: pointer; min-height: var(--hit); padding: 7px 10px; text-align: left; font-size: 12.5px; display: grid; gap: 2px; }
  .seg button + button { border-left: 1px solid var(--line); }
  .seg button small { font-size: 10.5px; opacity: 0.75; }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-checked="true"] { color: var(--ink); background: rgba(234, 228, 214, 0.1); }
  .list { display: grid; gap: 6px; }
  .list .btn { justify-content: space-between; width: 100%; }
  .list .btn small { color: var(--fog); font-size: 11px; }
  .note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--fog); }
  .keys { margin: 0; font-size: 11px; line-height: 1.6; color: var(--fog); border-top: 1px solid var(--line); padding-top: 12px; }
  .keys kbd { font: 500 10.5px/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }

  /* narrower screens: the tagline rises above the bottom row instead of meeting it */
  @media (max-width: 1100px) {
    .tagline { bottom: calc(var(--b) + var(--hit) + 26px); }
  }
  /* small landscape windows: one compact row, no caption */
  @media (max-width: 700px) and (orientation: landscape) {
    :root { --edge: 16px; }
    .state .caption { display: none; }
    .tagline { bottom: auto; top: calc(var(--t) + 30px); font-size: 13px; }
    .keys { display: none; }
  }
  @media (max-width: 700px) and (orientation: portrait) {
    :root { --edge: 16px; --hit: 42px; }
    .wordmark { height: 14px; }
    .state { bottom: calc(var(--b) + var(--hit) + 14px); max-width: calc(100vw - 2 * var(--edge)); }
    .controls { left: var(--l); right: var(--r); justify-content: space-between; }
    .controls .btn.primary { flex: 1; justify-content: center; }
    .tagline { bottom: auto; top: calc(var(--t) + 34px); font-size: 13px; }
    .keys { display: none; }
  }
  @media (pointer: coarse) { :root { --hit: 44px; } .keys { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  }

#poster{background:#040405 url("./poster.webp") center/cover no-repeat}#poster svg{opacity:0}.failed #poster{opacity:1;visibility:visible}.fallback-assets{display:none;position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:7;color:var(--ink);text-decoration:none}.failed .fallback-assets{display:inline-flex}body[data-embed="true"] .fallback-assets{display:none!important}.asset-download{text-decoration:none}.explore{position:fixed;z-index:5;top:var(--t);left:50%;transform:translateX(-50%);color:var(--fog);font:500 11px/1 var(--text);letter-spacing:.12em;text-decoration:none;padding:8px}.explore:hover{color:var(--ink)}.start-gallery{position:fixed;z-index:6;left:50%;bottom:max(84px,14vh);transform:translateX(-50%)}body[data-embed="true"] .chrome,body[data-embed="true"] .explore,body[data-embed="true"] .start-gallery,body[data-embed="true"] #poster p{display:none!important}body[data-embed="true"] #stage{pointer-events:none}body[data-embed="true"] #poster{background:#040405 url("./poster.webp") center/cover no-repeat}body[data-embed="true"] #poster svg{opacity:0}body[data-embed="true"].failed #poster svg{opacity:1}@media(max-width:650px){.explore{top:calc(var(--t) + 36px);left:var(--l);transform:none;padding:0;font-size:10px}}