/* kunst · sitio en desarrollo · cs6 — engine styles (forked from prototypes/01-formation/kunst.css, v6j) */
@font-face {
  font-family: "Univers Next Typewriter";
  src: url("fonts/univers-next-typewriter.woff2") format("woff2");
  font-display: block;
}
:root { --bg: #0E0E0F; --fg: #E6E4DF; --fg-2: #B8B4AC; --muted: #8C8A85; --line: #3A3A3D; --faint: #2A2A2D; --signal: #FF4D1A; --mono: "Univers Next Typewriter", monospace; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; }   /* one screen: nothing scrolls */
html { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg); }
html.lock, html.lock body { overflow: hidden; }   /* while the intro plays */
body { color: var(--fg); font-family: var(--mono); }
#stage { position: fixed; inset: 0 var(--panel-w, 0px) var(--panel-h, 0px) 0; overflow: hidden; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }   /* the engine layers only (the footer frame is a canvas too) */
#scene { z-index: 0; } #field { z-index: 1; touch-action: manipulation; } #fill { z-index: 2; pointer-events: none; mix-blend-mode: difference; } #print { z-index: 3; pointer-events: none; } #intro { z-index: 6; pointer-events: none; }
/* fake nav (N1): mono labels on grid A column starts; decodes once, then hover only shifts colour */
#nav { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 48px; font: 12px/1 var(--mono); color: var(--fg); }   /* as bright as the logo glyphs (Germán, 2026-10-10) */
#nav a { position: absolute; top: 18px; color: inherit; text-decoration: none; white-space: pre; padding: 2px 3px; margin: -2px -3px; transition: color 120ms cubic-bezier(.2,0,0,1), background-color 120ms cubic-bezier(.2,0,0,1); }
#nav a:hover, #nav a:focus-visible { color: var(--bg); background: var(--fg); outline: none; }   /* hover: reverse video */
#nav a.home { top: 16px; line-height: 0; } #nav a.home svg { height: 14px; width: auto; display: block; fill: currentColor; }
#nav[hidden] { display: none; }
#tune .mac.tog { grid-template-columns: 1fr auto; } #tune .mac.tog input { accent-color: var(--fg-2); margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* One quiet entry prompt inside the landing's frame; the prelude is drawn from the engine's own frame, lines and glyph field. */
#intro-gate { position: fixed; z-index: 20; inset: 0; overflow: hidden; background: var(--bg); cursor: pointer; }   /* anywhere on the start screen starts it */
#intro-gate.is-running { cursor: default; }
#intro-gate[hidden] { display: none; }
#intro-gate.is-running { background: transparent; }
#intro-gate.is-shutdown { background: #000; }
#intro-start { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; display: block; margin: 0; padding: 0; border: 0; background: none; color: var(--fg); font: 400 14px/18px var(--mono); white-space: pre; text-align: left; cursor: pointer; }   /* intro.js centres it on the character grid; the size of SITIO EN DESARROLLO */
#intro-start.is-placed { transform: none; opacity: 1; }   /* shown with the sheet: until the engine lays out, it waits unseen at the centre */
#intro-start span:first-child { color: var(--muted); }
#intro-start:focus-visible { outline: 1px solid var(--signal); outline-offset: 4px; }
#intro-start[hidden] { display: none; }
.intro-caret { color: var(--signal); animation: intro-caret 560ms steps(2, end) infinite; }
@keyframes intro-caret { 50% { opacity: 0; } }
#intro-print { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.landing-fallback { position: fixed; inset: 0; display: grid; align-content: center; justify-items: start; gap: 16px; padding: max(24px, calc((100vw - 1120px) / 2)); color: var(--fg); font: 12px/1.4 var(--mono); }
.landing-fallback[hidden] { display: none; }
.landing-fallback h2 { margin: 0 0 20px; font: 400 clamp(54px, 14vw, 180px)/.9 var(--mono); }
.landing-fallback p { margin: 0; color: var(--fg-2); }
@media (max-width: 699px) { .landing-fallback { padding: 24px; } #intro-start { font-size: 12px; line-height: 16px; } }
@media (prefers-reduced-motion: reduce) { .intro-caret { animation: none; } }
/* tune: docked beside the page (never over it); the stage shrinks to make room */
body.tuning { --panel-w: 272px; }
body.tuning.tmin { --panel-w: 32px; }
#tune details.adv summary { cursor: pointer; padding: 4px 0; } #tune details.adv { border-top: 1px solid var(--line); margin-top: 4px; }
#tune { position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; width: var(--panel-w); box-sizing: border-box; overflow: auto; background: var(--bg); border-left: 1px solid var(--line); font: 11px/16px var(--mono); text-transform: uppercase; color: var(--muted); }
#tune header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; color: var(--fg); }
#tune header span { color: var(--muted); }
#tune .body { padding: 0 12px 16px; display: grid; gap: 10px; }
body.tmin #tune header { flex-direction: column; padding: 10px 0; } body.tmin #tune header b, body.tmin #tune header span, body.tmin #tune .body { display: none; }
#tune .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#tune button, #tune select, #tune .file { font: inherit; text-transform: inherit; color: var(--fg); background: none; border: 0; outline: 1px solid var(--line); padding: 2px 6px; cursor: pointer; }
#tune button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
#tune button:focus-visible, #tune select:focus-visible, #tune input:focus-visible { outline: 1px solid var(--signal); }
#tune .file input { display: none; }
#tune .stars button { outline: 0; padding: 0 2px; color: var(--muted); }
#tune .stars button.on { color: var(--fg); }
#tune h4 { font: inherit; color: var(--fg-2); margin: 6px 0 0; display: flex; justify-content: space-between; align-items: center; }
#tune h4 button { padding: 0 4px; }
#tune .mac { display: grid; grid-template-columns: 1fr 36px; column-gap: 8px; }
#tune .mac input[type=range] { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--fg-2); }
#tune .mac output { text-align: right; color: var(--fg); }
#tune .mac select { grid-column: 1 / -1; margin-top: 2px; }
#tune .note { text-transform: none; }
@media (max-width: 699px) {
  body.tuning { --panel-w: 0px; --panel-h: 40svh; } body.tuning.tmin { --panel-w: 0px; --panel-h: 34px; }
  #tune { top: auto; left: 0; width: auto; height: var(--panel-h); border-left: 0; border-top: 1px solid var(--line); }
  body.tmin #tune header { flex-direction: row; justify-content: flex-end; padding: 6px 12px; }
}