/* mewndo.in v3 — site tokens, type and the motion-kit primitives' look. The app's tokens.css loads first
   (from /app-ui) so the site and the interface in the film share one palette. DESIGN-NOTES.md has the decisions. */

@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-full-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --site-bg: #F4F6F3;
  --site-grid: rgba(21, 23, 26, 0.045);
  --ink: #15171A;
  --ink-2: #4E5551;
  --ink-3: #7A817C;
  --ink-dark: #121416;
  --hud-ink: #15171A;
  --watch: #08725F;
  --watch-needs: #C98A1E;
  --watch-stop: #B5332D;
  --key-face: #1B1D20;
  --line: rgba(21, 23, 26, 0.10);

  --e-pop: cubic-bezier(0.2, 1.4, 0.35, 1);
  --e-glide: cubic-bezier(0.65, 0, 0.35, 1);
  --e-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --e-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --e-ui: cubic-bezier(0.2, 0, 0, 1);

  --f-display: "Fraunces", Georgia, serif;
  --f-ui: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", Consolas, monospace;
  --axes: "SOFT" 30, "WONK" 0, "opsz" 144;
  --axes-italic: "SOFT" 60, "WONK" 1, "opsz" 144;
}
.dark-scene { --hud-ink: #EEF1EC; --watch: #34D6B6; --watch-needs: #F2B04A; --watch-stop: #F27A70; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--site-bg); color: var(--ink); font: 450 17px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- type --- */
.display { font-family: var(--f-display); font-weight: 380; font-variation-settings: var(--axes); letter-spacing: -0.02em; line-height: 1; margin: 0; }
.display em, .film-h em, .section-h em { font-style: italic; font-variation-settings: var(--axes-italic); }
.film-h { font: 400 58px/1.04 var(--f-display); font-variation-settings: var(--axes); letter-spacing: -0.02em; margin: 0; color: var(--hud-ink); }
.section-h { font: 380 64px/1.04 var(--f-display); font-variation-settings: var(--axes); letter-spacing: -0.02em; margin: 0; }
.caption { font: 450 18px/1.45 var(--f-ui); color: var(--ink-2); margin: 14px 0 0; max-width: 34ch; }
.dark-scene .caption { color: #A7ADA8; }
.mono { font-family: var(--f-mono); font-size: 12.5px; }
.w { display: inline-block; transform-origin: 0 100%; will-change: transform; }

/* --- buttons --- */
.btn { --h: 52px; display: inline-flex; align-items: center; gap: 10px; height: var(--h); padding: 0 24px; border-radius: 999px;
  font: 650 16px/1 var(--f-ui); text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink); transition: transform 120ms var(--e-ui), box-shadow 120ms var(--e-ui), background 120ms; }
.btn svg, .btn img { width: 18px; height: 18px; flex: none; }
.btn-ink { background: var(--ink); color: #F4F6F3; box-shadow: 0 3px 0 var(--mint-ink); }
.btn-ink:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--mint-ink); }
.btn-ink:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mint-ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: rgba(21, 23, 26, 0.04); }
.btn-soon { border-style: dashed; color: var(--ink-2); cursor: default; }
.chip-soon { font: 600 11.5px/1 var(--f-ui); padding: 4px 8px; border-radius: 999px; background: rgba(21, 23, 26, 0.06); color: var(--ink-2); }
.dark-scene .btn-line, .on-dark .btn-line { color: #EEF1EC; border-color: #EEF1EC; }

/* --- the watcher: four L corners, positioned by transform only --- */
.watcher { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 60; color: var(--watch); }
.watcher i { position: absolute; left: 0; top: 0; width: 18px; height: 18px; will-change: transform; }
.watcher i svg { display: none; } /* the corners only move; the braces draw */
.watcher .braces { position: absolute; left: 0; top: 0; overflow: visible; }
.watcher .braces path { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- keycaps --- */
.keys { position: absolute; display: flex; gap: 10px; z-index: 50; pointer-events: none; }
.keycap { --press: 0; position: relative; min-width: 78px; height: 78px; padding: 0 22px; border-radius: 18px; display: grid; place-items: center;
  background: var(--key-face); color: #F4F6F3; font: 600 20px/1 var(--f-ui);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 calc(-3px + var(--press) * 2px) 0 rgba(0, 0, 0, 0.35), 0 calc(6px - var(--press) * 4px) calc(14px - var(--press) * 8px) rgba(21, 23, 26, 0.25);
  transform: translateY(calc(var(--press) * 4px)); }
.keycap.word { font-size: 19px; }
.keycap .hold { position: absolute; left: 12px; right: 12px; bottom: -10px; height: 2px; border-radius: 2px; background: var(--mint); transform-origin: 0 50%; transform: scaleX(0); }
.key-hint { align-self: center; font: 600 19px/1 var(--f-ui); color: var(--ink-2); margin-left: 10px; white-space: nowrap; }

/* --- pointer label (Kivi style) --- */
.plabel { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 55; }
.plabel svg { position: absolute; left: 0; top: 0; overflow: visible; }
.plabel path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plabel .note { position: absolute; left: 0; top: 0; white-space: nowrap; display: flex; flex-direction: column; gap: 4px; color: var(--ink);
  font: italic 380 30px/1.1 var(--f-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; letter-spacing: -0.01em; }
.plabel .src { font: 500 14px/1 var(--f-mono); font-style: normal; color: var(--ink-2); letter-spacing: 0; }
.dark-scene .plabel path { stroke: #EEF1EC; } .dark-scene .plabel .note { color: #EEF1EC; } .dark-scene .plabel .src { color: #A7ADA8; }
.srclabel { font: 450 12.5px/1 var(--f-mono); color: var(--ink-2); }

/* --- cursors --- */
.cursor { position: absolute; left: 0; top: 0; z-index: 58; pointer-events: none; will-change: transform; }
.cursor svg { width: 30px; height: 30px; overflow: visible; }
.cursor .tag { position: absolute; left: 24px; top: 28px; white-space: nowrap; height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 6px;
  border-radius: 8px; font: 600 15px/1 var(--f-ui); }
.cursor.you .tag { background: var(--site-bg); border: 1px solid var(--ink); color: var(--ink); }
.cursor.agent .tag { background: #1C1F22; color: #EEF1EC; border-left: 3px solid var(--bar, #78A8FF); }
.cursor.agent.paused .tag { color: #A7ADA8; border-left-color: #A7ADA8; }
.cursor .ring { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--watch); opacity: 0; }

/* --- context windows (not Mewndo: plain, generic, no product chrome) --- */
.win { position: absolute; background: #FBFCFA; border: 1px solid rgba(21, 23, 26, 0.12); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(21, 23, 26, 0.28), 0 2px 6px rgba(21, 23, 26, 0.06); color: var(--ink); }
.win .bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(21, 23, 26, 0.08); font: 600 12.5px/1 var(--f-ui); }
.win .bar .dots { display: flex; gap: 5px; margin-right: 4px; } .win .bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #D7DBD6; }
.win .bar img { width: 16px; height: 16px; }
.win .bar .where { color: var(--ink-3); font-weight: 500; }
.win .body { padding: 12px 14px; font: 450 13px/1.55 var(--f-mono); }
.win.term { background: #16181B; color: #D9DED9; border-color: rgba(255, 255, 255, 0.06); }
.win.term .bar { border-color: rgba(255, 255, 255, 0.06); color: #D9DED9; } .win.term .bar .dots i { background: #2E3236; }
.win.term .bar .where { color: #8C938E; }
.term .p { color: #6FD3BC; } .term .dim { color: #8C938E; } .term .ok { color: #34D6B6; } .term .bad { color: #F27A70; }
.caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -0.18em; background: currentColor; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- the stage canvas --- */
.grid-bg { background-color: var(--site-bg);
  background-image: linear-gradient(var(--site-grid) 1px, transparent 1px), linear-gradient(90deg, var(--site-grid) 1px, transparent 1px);
  background-size: 32px 32px; }
.vignette::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(21, 23, 26, 0.035)); }

/* --- the real interface, embedded --- */
.appui { position: absolute; border: 0; background: transparent; color-scheme: normal; }

/* --- chips used across scenes --- */
.tag-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--site-bg);
  border: 1px solid var(--ink); font: 600 13px/1 var(--f-ui); white-space: nowrap; }
.tag-chip svg { width: 14px; height: 14px; }
.rewind-chip { position: fixed; left: 50%; top: 76px; transform: translate(-50%, -12px); opacity: 0; z-index: 90; pointer-events: none; transition: opacity 180ms, transform 220ms var(--e-enter); }
.rewind-chip.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }