/* Lana shared styles: tokens, base elements, buttons, labels, brand and the pixel scene. */
:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --surface: #12151c;
  --surface-2: #181c25;
  --surface-3: #1f2430;
  --line: rgba(255,255,255,.06);
  --line-2: rgba(255,255,255,.11);
  --text: #f5f6fa;
  --muted: #8d92a2;
  --faint: #5d6272;
  --chrome: #e4e6ec;
  --chrome-grad: linear-gradient(180deg, #ffffff 0%, #d5d8df 50%, #a9adb8 100%);
  --live: #4ade80;
  --esp: #ff4d6d;
  --gold: #f5c542;
  --display: "Instrument Serif", Georgia, serif;
  --font: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font: inherit; color: inherit; }
.wrap { width: min(1100px, 100% - 32px); margin: 0 auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #fff; color: #0b0c10; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--chrome); outline-offset: 3px; }

/* ---------- Buttons & labels ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 16px; border: 0; border-radius: 999px; font: 700 13px var(--font); white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn:hover { transform: translateY(-1px); }
.btn i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-style: normal; transition: transform .25s var(--ease); }
.btn:hover i { transform: rotate(45deg); }
.btn i svg { width: 11px; height: 11px; }
.btn-chrome { background: var(--chrome-grad); color: #0b0d12; box-shadow: inset 0 1px 0 #fff, 0 8px 30px rgba(220,224,235,.16); }
.btn-chrome i { background: rgba(11,13,18,.1); }
.btn-chrome:hover { box-shadow: inset 0 1px 0 #fff, 0 10px 40px rgba(220,224,235,.28); }
.btn-ghost { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost i { background: rgba(255,255,255,.07); }
.btn-lg { height: 46px; padding: 0 9px 0 22px; font-size: 14px; }
.btn-lg i { width: 28px; height: 28px; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--chrome); font-weight: 600; font-size: 13px; }
.link svg { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.link:hover svg { transform: translate(2px,-2px); }
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: #c9ccd5; font-size: 12px; font-weight: 500; }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chrome); box-shadow: 0 0 10px rgba(228,230,236,.8); }
.mono { font-family: var(--mono); }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(230,232,240,.25)); }
.brand b { font-weight: 700; font-size: 15px; letter-spacing: .22em; }

/* ---------- Pixel night scene (drawn by scene.js) ---------- */
.scene, .scene-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { object-fit: cover; image-rendering: pixelated; }
.scene-fx { pointer-events: none; }