html:not([data-theme="dark"]) {
  --color-paper: #edf2f6;
  --color-card: #ffffff;
  --color-well: #e3eaf0;
  --color-ink: #0c1a24;
  --color-ink2: #455868;
  --color-ink3: #536576;
  --color-current: #0a6f93;
  --color-current-soft: #8fddff;
  --color-current-tint: #e3f6fd;
  --color-holo-a: #8fddff;
  --color-holo-b: #c9b8ff;
  --color-holo-c: #ffc58a;
  --color-warm-ring: #c97614;
  --color-answer: #167a50;
  --color-end: #c2362b;
  --color-grid: rgba(10,111,147,0.11);
  --color-hud: rgba(10,111,147,0.55);
  --glass-fill: rgba(255,255,255,0.68);
  --glass-sheet: rgba(255,255,255,0.86);
  --shadow-lift: 0 18px 44px rgba(12,26,36,0.10), 0 2px 6px rgba(12,26,36,0.05);
  --shadow-float: 0 24px 60px rgba(12,26,36,0.16);
  --radius-card: 22px;
  --radius-key: 18px;
  --font-ui: 'Sora', 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --holo: linear-gradient(115deg, var(--color-holo-a), var(--color-holo-b) 52%, var(--color-holo-c));

  --bg: var(--color-paper);
  --surface: var(--glass-fill);
  --surface2: var(--color-card);
  --surface3: var(--color-well);
  --border: rgba(10,111,147,0.18);
  --border-soft: rgba(10,111,147,0.10);
  --cyan: var(--color-current);
  --cyan-bright: #075a78;
  --cyan-dim: var(--color-current-tint);
  --cyan-glow: rgba(10,111,147,0.16);
  --green: var(--color-answer);
  --yellow: var(--color-current);
  --red: var(--color-end);
  --text: var(--color-ink);
  --text-dim: var(--color-ink2);
  --text-faint: var(--color-ink3);
  --mono: var(--font-mono);
  --sans: var(--font-ui);

  color-scheme: light;
}

html:not([data-theme="dark"]) body {
  background-color: var(--color-paper);
  background-image:
    radial-gradient(70% 38% at 12% 0%, rgba(143,221,255,.30), transparent 70%),
    radial-gradient(60% 34% at 100% 100%, rgba(201,184,255,.22), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--color-grid) 1px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
html:not([data-theme="dark"]) body::before,
html:not([data-theme="dark"]) body::after { background: none !important; }

html:not([data-theme="dark"]) :is(button, input, select, textarea) { font-family: inherit; }

html:not([data-theme="dark"]) button:not([class]),
html:not([data-theme="dark"]) button[class=""] {
  background: var(--glass-sheet); border: 1px solid rgba(10,111,147,.18);
  color: var(--color-current); border-radius: 14px; box-shadow: var(--shadow-lift);
}
html:not([data-theme="dark"]) button:not([class]):hover,
html:not([data-theme="dark"]) button[class=""]:hover { background: #fff; border-color: rgba(10,111,147,.32); }
html:not([data-theme="dark"]) input:not([class]):not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),
html:not([data-theme="dark"]) textarea:not([class]) {
  background: #fff; border: 1px solid rgba(10,111,147,.18); color: var(--color-ink);
  border-radius: 14px; caret-color: var(--color-current);
}
html:not([data-theme="dark"]) input:not([class]):focus,
html:not([data-theme="dark"]) textarea:not([class]):focus { border-color: var(--color-current); box-shadow: 0 0 0 3px var(--color-current-tint); }
html:not([data-theme="dark"]) :focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-current); }
html:not([data-theme="dark"]) ::selection { background: var(--color-current-tint); color: var(--color-ink); }
html:not([data-theme="dark"]) body ::-webkit-scrollbar-thumb { background: rgba(10,111,147,.22); }
html:not([data-theme="dark"]) body ::-webkit-scrollbar-thumb:hover { background: rgba(10,111,147,.38); }

.cl-glass {
  position: relative;
  background: var(--glass-fill);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), var(--shadow-lift);
}
.cl-corners {
  position: absolute; inset: 9px; pointer-events: none;
  --hl: 12px; --hw: 1.5px;
  background:
    linear-gradient(var(--color-hud) 0 0) 0 0 / var(--hl) var(--hw),
    linear-gradient(var(--color-hud) 0 0) 0 0 / var(--hw) var(--hl),
    linear-gradient(var(--color-hud) 0 0) 100% 0 / var(--hl) var(--hw),
    linear-gradient(var(--color-hud) 0 0) 100% 0 / var(--hw) var(--hl),
    linear-gradient(var(--color-hud) 0 0) 0 100% / var(--hl) var(--hw),
    linear-gradient(var(--color-hud) 0 0) 0 100% / var(--hw) var(--hl),
    linear-gradient(var(--color-hud) 0 0) 100% 100% / var(--hl) var(--hw),
    linear-gradient(var(--color-hud) 0 0) 100% 100% / var(--hw) var(--hl);
  background-repeat: no-repeat;
}
.cl-micro { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink3); }

*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not([data-theme="dark"]) { --glass-fill: rgba(255,255,255,0.92) !important; --glass: rgba(255,255,255,0.92) !important; --glass-strong: rgba(255,255,255,0.96) !important; --glass-sheet: rgba(255,255,255,0.96) !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }