:root {
  color-scheme: dark;

  --bg: #0b0b12;
  --bg-elev: #12121c;
  --surface: #16161f;
  --surface-2: #1e1e2b;
  --surface-3: #262636;
  --border: #2a2a3d;
  --border-soft: #22222f;

  --text: #ecedf5;
  --muted: #9a9ab4;
  --faint: #6b6b85;

  --accent: #8b5cf6;
  --accent-2: #ec4899;
  --accent-grad: linear-gradient(100deg, #7c3aed, #db2777);
  --accent-soft: rgba(139, 92, 246, 0.14);

  /* One radius scale. Eight different corner sizes were in use side by side, which
     is the sort of thing you feel rather than notice. Every stray value maps onto the
     nearest step here, none moving by more than 2px. */
  --radius-xs: 8px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  --header-h: 64px;
  --bottomnav-h: 62px;
  --maxw: min(1660px, 95vw);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* Ambient background: soft accent glows behind everything (fixed, non-scrolling). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 640px at 12% -12%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(1000px 560px at 100% -8%, rgba(219, 39, 119, 0.13), transparent 58%),
    radial-gradient(900px 900px at 88% 108%, rgba(124, 58, 237, 0.08), transparent 60%),
    var(--bg);
}

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 20px; border: 2px solid var(--bg); transition: background 0.2s; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ===== Boot screen =====
   Covers the shell until the first view is on screen. Built from the brand mark rather
   than a spinner, because the name is the idea: "kaze" is wind. Two streaks blow in
   from the left, the triangle draws itself along the path they cut, the fill floods in,
   and a ring breathes outward — then it holds. One shape, one ring, one hairline.

   It plays ONCE and settles rather than looping: a loop meant the screen was always cut
   off mid-cycle when the app was ready. Now the build finishes at 2.2s, the mark simply
   rests, and the hairline keeps moving to show something is still happening. app.js
   holds the screen until the build has finished, so it is never chopped in half.

   Lives in base.css, the first stylesheet, so it is painted before anything else. */
.boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; align-content: center; gap: 34px;
  background: var(--bg);
  transition: opacity 0.5s ease, visibility 0.5s;
}
/* A slow wash of brand colour, drifting, so the screen breathes instead of sitting flat. */
.boot::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(38% 30% at 42% 42%, rgba(139, 92, 246, 0.20), transparent 70%),
    radial-gradient(32% 26% at 60% 60%, rgba(236, 72, 153, 0.16), transparent 70%);
  animation: boot-drift 9s ease-in-out infinite alternate;
}
@keyframes boot-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}
.boot.done { opacity: 0; visibility: hidden; }

.boot-stage { position: relative; display: grid; place-items: center; }
.boot-mark { position: relative; width: clamp(120px, 22vw, 190px); height: auto; overflow: visible; }

/* The gust: streaks sweep in, then leave before the triangle lands. Plays once. */
.boot-streak { opacity: 0; transform-box: fill-box; }
.boot-streak-1 { animation: boot-gust 1.5s var(--ease) 0.1s forwards; }
.boot-streak-2 { animation: boot-gust 1.5s var(--ease) 0.28s forwards; }
@keyframes boot-gust {
  0%   { opacity: 0; transform: translateX(-110px) scaleX(0.25); }
  30%  { opacity: 0.95; transform: translateX(0) scaleX(1); }
  62%  { opacity: 0.9; transform: translateX(0) scaleX(1); }
  100% { opacity: 0; transform: translateX(34px) scaleX(0.5); }
}

/* The triangle draws itself as one continuous outline, then floods with colour and
   stays. No loop — the finished mark is the resting state. */
.boot-tri {
  stroke-dasharray: 1180; stroke-dashoffset: 1180;
  fill-opacity: 0;
  animation: boot-draw 2.2s var(--ease) forwards;
}
@keyframes boot-draw {
  0%   { stroke-dashoffset: 1180; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0;    fill-opacity: 0; }
  78%  { fill-opacity: 1; }
  100% { stroke-dashoffset: 0;    fill-opacity: 1; }
}

/* One ring, breathing outward as the mark completes. */
.boot-ring {
  position: absolute; width: clamp(120px, 22vw, 190px); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid rgba(167, 139, 250, 0.45);
  opacity: 0; pointer-events: none;
  animation: boot-ring 2.2s var(--ease) forwards;
}
@keyframes boot-ring {
  0%, 62% { opacity: 0; transform: scale(0.55); }
  74%     { opacity: 0.5; }
  100%    { opacity: 0; transform: scale(1.85); }
}

/* The hairline keeps looping — it is the "still working" signal after the mark rests. */
.boot-bar {
  position: relative; width: clamp(120px, 18vw, 190px); height: 2px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden;
}
.boot-bar i {
  position: absolute; inset: 0; display: block; width: 38%;
  border-radius: inherit; background: var(--accent-grad);
  animation: boot-slide 1.9s var(--ease) infinite;
}
@keyframes boot-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(370%); }
}

/* Motion sensitivity: keep the screen, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .boot::before, .boot-streak, .boot-tri, .boot-ring, .boot-bar i { animation: none; }
  .boot-streak { opacity: 0.85; }
  .boot-tri { stroke-dashoffset: 0; fill-opacity: 1; }
  .boot-ring { opacity: 0; }
  .boot-bar i { width: 100%; }
}