/* Comma: the lattice fills the window; a few quiet words sit at the edges and fold away once you listen. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2"); }

:root {
  --bg: #0b0c0f; --ink: #ece7dc; --dim: #9a958b; --faint: #5d5951; --accent: #f06a2e;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans: "Inter Tight", system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #ebe8e1; --ink: #1c1714; --dim: #5f5850; --faint: #a39a8f; --accent: #b5370f; color-scheme: light; }
}
:root[data-theme="light"] { --bg: #ebe8e1; --ink: #1c1714; --dim: #5f5850; --faint: #a39a8f; --accent: #b5370f; color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 12px/1.5 var(--mono); overflow: hidden;
  -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

canvas { position: fixed; display: block; }
#ground { opacity: 0; transition: opacity 1.6s ease-out; will-change: transform; }
#sky { inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
#sky:focus-visible { outline: none; }
body.on #ground { opacity: 1; }

header { position: fixed; left: max(24px, env(safe-area-inset-left)); top: 24px; pointer-events: none; }
h1 { margin: 0; font: 300 22px/1.1 var(--sans); letter-spacing: .01em; }
/* back to the homepage, above the name */
.back { display: inline-block; margin: 0 0 12px; pointer-events: auto; font: 12px/1 var(--mono); color: var(--dim); text-decoration: none; }
.back:hover { color: var(--ink); }
.back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

#caption { position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom));
  max-width: calc(100% - 140px); pointer-events: none; }
#chord { margin: 0; font: 300 26px/1.15 var(--sans); }
#line { margin: 6px 0 0; color: var(--dim); font-variant-numeric: tabular-nums; transition: opacity 1.2s; }
#line b { font-weight: 400; color: var(--ink); }
body.folded #line { opacity: 0; }

#hint { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); margin: 0; color: var(--dim);
  pointer-events: none; transition: opacity 1.2s; white-space: nowrap; opacity: 0; }
#hint.on { opacity: 1; }

button { font: inherit; color: var(--dim); background: none; border: 0; padding: 12px 10px; cursor: pointer;
  border-radius: 4px; min-height: 44px; }
button:hover { color: var(--ink); }
#sound { position: fixed; right: max(14px, env(safe-area-inset-right)); top: 10px; color: var(--accent); }
#aboutBtn { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
#aboutBtn[aria-expanded="true"] { color: var(--ink); }

#about { box-sizing: border-box; position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(66px + env(safe-area-inset-bottom));
  width: min(340px, calc(100% - 48px)); margin: 0; padding: 16px 18px; color: var(--dim);
  background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#about p { margin: 0 0 9px; }
#about p:last-child { margin: 0; }
#about .quiet { color: var(--faint); }
#about .nums { color: var(--ink); font-variant-numeric: tabular-nums; }
#about .nums + .nums { color: var(--dim); }
#about b { color: var(--accent); font-weight: inherit; }

/* the three moves as buttons: out of sight until a keyboard reaches them */
.sr, .dest:not(:focus) { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dest:focus { position: fixed; left: 50%; transform: translateX(-50%); top: 64px; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 86%, transparent); white-space: nowrap; }

#lab { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; color: var(--faint); font-size: 11px;
  pointer-events: none; white-space: nowrap; }

@media (max-width: 560px) {
  h1 { font-size: 20px; }
  #hint { top: auto; left: 24px; transform: none; bottom: calc(108px + env(safe-area-inset-bottom)); }
  #caption { bottom: calc(22px + env(safe-area-inset-bottom)); max-width: calc(100% - 110px); }
  #chord { font-size: 23px; }
  /* on a phone the panel takes the caption's place, and scrolls if it must */
  #about { left: 16px; right: 16px; width: auto; bottom: calc(56px + env(safe-area-inset-bottom));
    max-height: calc(100% - 200px); overflow-y: auto; font-size: 13px; }
  body.about #caption { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #ground, #hint, #line { transition: none; }
}