:root {
  color-scheme: light;
  --bg: #f4efe5;
  --panel: rgba(255, 250, 241, 0.88);
  --line: rgba(59, 39, 18, 0.12);
  --text: #26180b;
  --ink: var(--text);
  --muted: #715942;
  --text-muted: var(--muted);
  --accent: #b24f2f;
  --accent-deep: #7f2f15;
  --brand-ink: #24140c;
  --brand-highlight: #f7dbc0;
  --brand-dot: #d96a3b;
  --shadow: 0 24px 60px rgba(61, 36, 10, 0.12);
  --radius: 22px;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: rgba(255, 251, 245, 0.98);
  --surface-soft: rgba(255, 255, 255, 0.55);
  --surface-hover: rgba(255, 247, 237, 0.92);
  --surface-input: rgba(255, 255, 255, 0.7);
  --surface-accent: rgba(255, 245, 235, 0.95);
  --surface-accent-hover: rgba(255, 240, 225, 0.9);
  --surface2: rgba(38, 24, 11, 0.06);
  --bg-2: rgba(38, 24, 11, 0.04);
  --control-border: rgba(178, 79, 47, 0.22);
  --focus-ring: rgba(178, 79, 47, 0.26);
  --message-user-bg: linear-gradient(180deg, #fff6ed 0%, #f8e0cb 100%);
  --app-background:
    radial-gradient(circle at top left, rgba(242, 170, 118, 0.22), transparent 28%),
    radial-gradient(circle at top right, rgba(150, 57, 24, 0.16), transparent 24%),
    linear-gradient(180deg, #f8f3eb 0%, #eee3d4 100%);
  --font-mono: "JetBrains Mono", monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111513;
  --panel: rgba(23, 29, 26, 0.9);
  --line: rgba(240, 226, 207, 0.14);
  --text: #f4efe7;
  --ink: var(--text);
  --muted: #b8a895;
  --text-muted: var(--muted);
  --accent: #df7a4d;
  --accent-deep: #f0a66f;
  --brand-ink: #090c0b;
  --brand-highlight: #ffd7b5;
  --brand-dot: #ff8757;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --surface: rgba(35, 43, 39, 0.82);
  --surface-strong: rgba(30, 37, 34, 0.98);
  --surface-soft: rgba(39, 47, 43, 0.62);
  --surface-hover: rgba(54, 63, 58, 0.78);
  --surface-input: rgba(14, 18, 16, 0.5);
  --surface-accent: rgba(70, 48, 37, 0.72);
  --surface-accent-hover: rgba(88, 58, 42, 0.82);
  --surface2: rgba(255, 255, 255, 0.07);
  --bg-2: rgba(255, 255, 255, 0.05);
  --control-border: rgba(223, 122, 77, 0.32);
  --focus-ring: rgba(223, 122, 77, 0.3);
  --message-user-bg: linear-gradient(180deg, rgba(96, 57, 40, 0.95) 0%, rgba(70, 42, 32, 0.96) 100%);
  --app-background:
    radial-gradient(circle at top left, rgba(223, 122, 77, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(92, 136, 116, 0.12), transparent 26%),
    linear-gradient(180deg, #161a18 0%, #0e1210 100%);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  background: var(--app-background);
}

body {
  padding: 24px;
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 24%, rgba(242, 170, 118, 0.24), transparent 24%),
    radial-gradient(circle at 76% 20%, rgba(217, 106, 59, 0.2), transparent 22%),
    linear-gradient(180deg, #21120b 0%, #120905 100%);
  color: #fff6ef;
  transition: opacity 520ms ease, visibility 520ms ease;
}

.app-splash--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-splash__glow {
  position: absolute;
  width: 42vw;
  height: 42vw;
  min-width: 240px;
  min-height: 240px;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.42;
}

.app-splash__glow--left {
  left: -8vw;
  bottom: -12vw;
  background: radial-gradient(circle, rgba(242, 170, 118, 0.45) 0%, rgba(242, 170, 118, 0) 70%);
}

.app-splash__glow--right {
  right: -10vw;
  top: -14vw;
  background: radial-gradient(circle, rgba(217, 106, 59, 0.34) 0%, rgba(217, 106, 59, 0) 72%);
}

.app-splash__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
}

.app-splash__badge {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 34px;
  border: 1px solid rgba(247, 219, 192, 0.16);
  background:
    linear-gradient(145deg, rgba(247, 219, 192, 0.08), rgba(247, 219, 192, 0.02)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 56px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.app-splash__badge::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 24px;
  border: 1px solid rgba(247, 219, 192, 0.12);
}

.app-splash__badge-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.92em;
  height: 1.38em;
  transform: translateX(0.3em);
  font-family: "JetBrains Mono", monospace;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.08em;
  color: var(--brand-highlight);
}

.app-splash__badge-letter,
.app-splash__glyph {
  position: absolute;
  top: 50%;
  line-height: 1;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, -50%, 0) scale(1);
  will-change: transform, opacity;
}

.app-splash__badge-letter--k {
  left: 0;
}

.app-splash__badge-letter--stem {
  left: 0.69em;
}

.app-splash__badge-dot,
.app-splash__dot {
  position: absolute;
  top: 0.18em;
  width: 0.13em;
  height: 0.13em;
  border-radius: 999px;
  background: var(--brand-dot);
  box-shadow: 0 0 18px rgba(217, 106, 59, 0.28);
  transform: translate3d(0, -0.25em, 0) scale(1);
  will-change: transform, opacity;
}

.app-splash__badge-dot {
  top: 0.16em;
  transform: translate3d(0, -0.22em, 0) scale(1);
}

.app-splash__badge-letter--stem .app-splash__badge-dot--lead {
  left: 0.08em;
}

.app-splash__badge-letter--stem .app-splash__badge-dot--trail {
  left: 0.24em;
}

.app-splash__word {
  position: relative;
  width: min(78vw, 3.78em);
  height: 1.16em;
  font-size: clamp(2.4rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--brand-highlight);
}

.app-splash__glyph--a1 {
  left: 0;
}

.app-splash__glyph--n {
  left: 0.76em;
}

.app-splash__glyph--k {
  left: 1.46em;
}

.app-splash__glyph--a2 {
  left: 2.14em;
}

.app-splash__glyph--stem {
  left: 2.79em;
  overflow: visible;
}

.app-splash__glyph--stem .app-splash__dot--lead {
  left: -0.03em;
}

.app-splash__glyph--stem .app-splash__dot--trail {
  left: 0.15em;
}

.app-splash__tag {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 219, 192, 0.72);
}

.app-splash--play .app-splash__badge-letter--k {
  animation: splashBadgeK 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__badge-letter--stem {
  animation: splashBadgeStem 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__badge-dot--lead {
  animation: splashBadgeLeadDot 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__badge-dot--trail {
  animation: splashBadgeTrailDot 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__glyph--k {
  animation: splashWordK 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__glyph--a1 {
  animation: splashWordA1 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__glyph--n {
  animation: splashWordN 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__glyph--a2 {
  animation: splashWordA2 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__glyph--stem {
  animation: splashWordStem 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__dot--lead {
  animation: splashWordLeadDot 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.app-splash--play .app-splash__dot--trail {
  animation: splashWordTrailDot 2.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splashBadgeK {
  0%, 20% {
    opacity: 1;
    transform: translate3d(0.54em, -50%, 0) scale(1);
  }

  52%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashBadgeStem {
  0%, 20% {
    opacity: 1;
    transform: translate3d(-0.52em, -50%, 0) scale(1);
  }

  52%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashBadgeLeadDot {
  0%, 22% {
    opacity: 1;
    transform: translate3d(0.12em, -0.22em, 0) scale(1);
  }

  58%, 72% {
    opacity: 1;
    transform: translate3d(0.12em, -0.22em, 0) scale(1);
  }

  86%, 100% {
    opacity: 1;
    transform: translate3d(0, -0.22em, 0) scale(1);
  }
}

@keyframes splashBadgeTrailDot {
  0%, 76% {
    opacity: 0;
    transform: translate3d(0, -0.22em, 0) scale(0.3);
  }

  90%, 100% {
    opacity: 1;
    transform: translate3d(0, -0.22em, 0) scale(1);
  }
}

@keyframes splashWordK {
  0%, 18% {
    opacity: 1;
    transform: translate3d(0.52em, -50%, 0) scale(1);
  }

  50%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashWordA1 {
  0%, 24% {
    opacity: 0;
    transform: translate3d(0.22em, -38%, 0) scale(0.9);
  }

  54%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashWordN {
  0%, 32% {
    opacity: 0;
    transform: translate3d(0.18em, -36%, 0) scale(0.92);
  }

  60%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashWordA2 {
  0%, 40% {
    opacity: 0;
    transform: translate3d(0.12em, -36%, 0) scale(0.94);
  }

  68%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashWordStem {
  0%, 18% {
    opacity: 1;
    transform: translate3d(-0.28em, -50%, 0) scale(1);
  }

  54%, 100% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

@keyframes splashWordLeadDot {
  0%, 18% {
    opacity: 1;
    transform: translate3d(0.1em, -0.25em, 0) scale(1);
  }

  56%, 70% {
    opacity: 1;
    transform: translate3d(0.1em, -0.25em, 0) scale(1);
  }

  84%, 100% {
    opacity: 1;
    transform: translate3d(0, -0.25em, 0) scale(1);
  }
}

@keyframes splashWordTrailDot {
  0%, 76% {
    opacity: 0;
    transform: translate3d(0, -0.25em, 0) scale(0.3);
  }

  90%, 100% {
    opacity: 1;
    transform: translate3d(0, -0.25em, 0) scale(1);
  }
}