/* Copyright (C) 2026 LIghtJUNction; SPDX-License-Identifier: AGPL-3.0-or-later */
@font-face { font-family: Bodoni; src: url('./bodoni-moda.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; --poster-ground: #0b100e; --ink: #f3ecdf; --muted: #b4bbae; --line: #424b42; --accent: #d4b48b; }
:root.light { color-scheme: light; --poster-ground: #f1ede4; --ink: #222d25; --muted: #566252; --line: #b1b9aa; --accent: #73482a; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 5.2vw; background: var(--poster-ground); color: var(--ink); font: 15px/1.6 ui-sans-serif, system-ui, sans-serif; }
::selection { background: var(--accent); color: var(--poster-ground); }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
header { height: 96px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { font-family: Bodoni, Georgia, serif; font-size: 26px; text-decoration: none; }
nav { display: flex; gap: 32px; }
nav a { text-decoration: none; }
nav svg { margin-left: 5px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }
main { position: relative; min-height: calc(100svh - 177px); display: grid; grid-template-columns: 34% 66%; grid-template-rows: 1fr auto; }
.intro { position: relative; z-index: 1; align-self: center; padding: 0 0 32px; pointer-events: none; }
h1 { font-family: Bodoni, Georgia, serif; font-size: clamp(52px, 6.4vw, 92px); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; margin: 0 0 28px; }
h1 em { font-weight: 400; color: var(--accent); }
.intro p { color: var(--muted); font-size: 15px; max-width: 32ch; margin: 0; }
.stage { position: relative; min-width: 0; height: max(420px, calc(100svh - 278px)); align-self: center; }
canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; }
.interaction { position: absolute; bottom: 10px; inset-inline: 0; text-align: center; color: var(--muted); font-size: 13px; pointer-events: none; margin: 0; }
.fallback { position: absolute; inset: 35% 10% auto; }
.cursor { display: none; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; transform: translate(-100px,-100px); }
.capture .cursor[data-active] { display: block; }
.controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.scenes, .settings { display: flex; gap: 28px; }
button { cursor: pointer; font: inherit; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 10px 0; min-height: 44px; }
button:hover, button[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
button:disabled { opacity: .6; cursor: default; }
footer { min-height: 81px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
footer p { margin: 0; }
@media (max-width: 700px) {
  body { padding: 0 6vw; }
  header { height: 76px; }
  .wordmark { font-size: 21px; }
  nav { gap: 17px; font-size: 12px; }
  nav a:first-child { display: none; }
  main { display: flex; flex-direction: column; min-height: calc(100svh - 156px); }
  .intro { width: 100%; align-self: auto; padding: 38px 0 0; }
  h1 { font-size: clamp(48px, 12vw, 70px); margin-bottom: 17px; }
  h1 br { display: none; }
  h1 br::after { content: ' '; }
  .intro p { font-size: 13px; max-width: 40ch; }
  .stage { width: 100%; height: 360px; min-height: 300px; }
  .controls { width: 100%; gap: 12px; min-height: 85px; flex-wrap: wrap; }
  .scenes { gap: 20px; }
  .settings { gap: 18px; }
  button { font-size: 13px; }
  footer { align-items: start; flex-direction: column; justify-content: center; gap: 5px; padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }