:root,
html[data-theme="aurora"] {
  --bg-0: #05060a;
  --txt: #e6e9f2;
  --ink-700: #161a2e;
  --ink-800: #0f1220;
  --ink-900: #0a0c14;
  --ink-950: #05060a;
  --arc-300: #7be3ff;
  --arc-400: #36d2ff;
  --arc-500: #00b6ff;
  --grad-a: #36d2ff;
  --grad-b: #a78bfa;
  --grad-c: #f0abfc;
}
html[data-theme="cyber"] { --bg-0:#06070d; --txt:#d6f5ff; --arc-300:#00ffd1; --arc-400:#00ffaa; --arc-500:#00e89a; --grad-a:#00ffaa; --grad-b:#00d1ff; --grad-c:#ff2bd6; }
html[data-theme="solar"] { --bg-0:#0c0806; --txt:#fff3e8; --arc-300:#ffd27b; --arc-400:#ffa83b; --arc-500:#ff7a1a; --grad-a:#ff7a1a; --grad-b:#ffd27b; --grad-c:#ff4d8d; }
html[data-theme="mono"]  { --bg-0:#07080a; --txt:#ececec; --arc-300:#cfcfcf; --arc-400:#ffffff; --arc-500:#d8d8d8; --grad-a:#ffffff; --grad-b:#888; --grad-c:#444; }
html[data-theme="rose"]  { --bg-0:#0c0710; --txt:#ffe8f3; --arc-300:#ffb1d9; --arc-400:#ff5fa2; --arc-500:#e93b80; --grad-a:#ff5fa2; --grad-b:#c084fc; --grad-c:#f0abfc; }

html, body { background: var(--bg-0); color: var(--txt); }
body { font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.02em; }
.bg-ink-950 { background-color: var(--ink-950); }
.bg-ink-900 { background-color: var(--ink-900); }
.bg-ink-800 { background-color: var(--ink-800); }
.bg-arc-500 { background-color: var(--arc-500); }
.bg-arc-400 { background-color: var(--arc-400); }
.text-arc-400 { color: var(--arc-400); }
.text-arc-300 { color: var(--arc-300); }
.hover\:bg-arc-400:hover { background-color: var(--arc-400); }
.bg-ink-950\/70 { background-color: color-mix(in oklab, var(--ink-950) 70%, transparent); }
.text-ink-950 { color: var(--ink-950); }
.focus\:border-arc-400:focus { border-color: var(--arc-400); }

.glass { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); border-radius: 12px; }
.chip { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
.gradient-text { background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 50%, var(--grad-c) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.link-underline { position: relative; }
.link-underline::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); transition: right .35s ease; }
.link-underline:hover::after { right: 0; }
.logo-mark { display:inline-block; width:22px; height:22px; border-radius:9999px; background: conic-gradient(from 200deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a)); box-shadow: 0 0 20px color-mix(in oklab, var(--grad-a) 40%, transparent); }
.theme-pick { width:14px; height:14px; border-radius:9999px; border:1px solid rgba(255,255,255,0.2); margin:0 2px; cursor:pointer; }
.theme-pick[data-theme="aurora"] { background: linear-gradient(135deg, #36d2ff, #a78bfa); }
.theme-pick[data-theme="cyber"]  { background: linear-gradient(135deg, #00ffaa, #ff2bd6); }
.theme-pick[data-theme="solar"]  { background: linear-gradient(135deg, #ff7a1a, #ffd27b); }
.theme-pick[data-theme="mono"]   { background: linear-gradient(135deg, #ffffff, #555); }
.theme-pick[data-theme="rose"]   { background: linear-gradient(135deg, #ff5fa2, #c084fc); }
#globe { position: absolute; inset: 0; pointer-events: none; opacity: .9; }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.toast { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:10px 12px; font-size:12px; color:#e6e9f2; backdrop-filter: blur(8px); animation: pop .25s ease; }
.toast.ok { border-color: color-mix(in oklab, #34d399 50%, transparent); }
.toast.err { border-color: color-mix(in oklab, #f87171 50%, transparent); }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmdk-item { padding:8px 12px; font-size:13px; color:rgba(255,255,255,0.8); display:flex; align-items:center; gap:10px; border-radius:8px; cursor:pointer; }
.cmdk-item:hover, .cmdk-item.active { background: rgba(255,255,255,0.06); color:#fff; }
.cmdk-item .hint { margin-left:auto; font-size:10px; color:rgba(255,255,255,0.5); }
.block-row { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); padding:6px 8px; border-bottom:1px dashed rgba(255,255,255,0.05); }
.block-row:hover { background: rgba(255,255,255,0.03); }
.snippet-item { padding:8px 10px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
.snippet-item:hover { background: rgba(255,255,255,0.04); }
.snippet-item.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
input::placeholder { color: rgba(255,255,255,0.35); }
select { color: var(--txt); background-color: var(--ink-800); }