:root {
  --bg: #07080c;
  --fg: #eef0f6;
  --muted: #8b93a7;
  --line: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.035);
  --a1: #ff6b3d;   /* fuse orange */
  --a2: #7c5cff;   /* violet */
  --a3: #22d3ee;   /* cyan */
  --ok: #34d399;
  --display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f6fb;
    --fg: #12141b;
    --muted: #5d6578;
    --line: rgba(18, 20, 27, 0.09);
    --card: rgba(255, 255, 255, 0.7);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }

/* ---------- ambient background ---------- */
.aurora {
  position: fixed; inset: -20vmax; z-index: 0; pointer-events: none;
  filter: blur(60px) saturate(130%);
  opacity: .55;
}
.aurora span {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  mix-blend-mode: screen; animation: drift 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: radial-gradient(circle, var(--a2), transparent 60%); top: 5%; left: 10%; }
.aurora span:nth-child(2) { background: radial-gradient(circle, var(--a1), transparent 60%); top: 35%; left: 45%; animation-delay: -8s; animation-duration: 32s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, var(--a3), transparent 60%); top: 50%; left: 0%; animation-delay: -16s; animation-duration: 38s; }
@media (prefers-color-scheme: light) {
  .aurora { opacity: .28; }
  .aurora span { mix-blend-mode: multiply; }
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8vmax, -6vmax) scale(1.12); }
  100% { transform: translate(-6vmax, 5vmax) scale(.95); }
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- home ---------- */
.hero {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 16px 96px; text-align: center;
}
.mark { width: 120px; height: 120px; margin-bottom: 28px; filter: drop-shadow(0 12px 40px rgba(124, 92, 255, .35)); }
.mark .body { fill: var(--fg); }
.mark .cap { fill: var(--fg); opacity: .85; }
.mark .shine { fill: var(--bg); opacity: .5; }
.mark .fuse { stroke: var(--muted); }
.mark .cut { stroke: var(--muted); }
.mark .check { stroke: var(--ok); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 1s .9s cubic-bezier(.65,0,.35,1) forwards; }
.mark .spark { fill: var(--a1); transform-origin: 107px 4px; animation: fizzle .9s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fizzle {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(1.6); opacity: .8; }
  100% { transform: scale(0);   opacity: 0; }
}

.wordmark {
  font-family: var(--display);
  font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1; margin: 0;
  background: linear-gradient(100deg, var(--fg) 0%, var(--fg) 40%, var(--a2) 70%, var(--a1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }

.status {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--muted); font-size: .95rem; letter-spacing: .02em;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 22px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  font-size: .85rem; color: var(--muted);
}
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--fg); }

/* ---------- legal pages (device style, matches home) ---------- */
:root { --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --safe: #34d399; --hot: #ff5a3c; }
.topbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 860px; margin: 0 auto; padding: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.wm { text-decoration: none; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; font-size: 1.3rem; white-space: nowrap; }
.wm .b { background: linear-gradient(180deg, #ffb27a, #ff5a3c 55%, #d6283c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm .d { background: linear-gradient(90deg, #34d399, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm .t { color: var(--muted); opacity: .6; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #12141b; border: 1px solid rgba(255,255,255,.08); }
.tabs a { text-decoration: none; padding: 6px 12px; border-radius: 8px; font: 700 .72rem/1 var(--mono); letter-spacing: .14em; color: #8790a3; transition: color .2s, background .2s; }
.tabs a:hover { color: #eef0f6; }
.tabs a[aria-current="page"] { background: #0a0b0f; color: var(--safe); box-shadow: inset 0 0 0 1px rgba(52,211,153,.25); }

.doc { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 8px 16px 72px; }
.doc header { text-align: center; padding: 44px 0 30px; }
.lcdtag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: #0a0b0f; border: 1px solid rgba(255,255,255,.07); font: 700 .7rem/1 var(--mono); letter-spacing: .22em; color: var(--safe); }
.lcdtag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 10px var(--safe); }
.doc h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.045em;
  font-size: clamp(2.3rem, 7vw, 4rem); line-height: 1.02; margin: 18px 0 0;
}
.doc h1 .hl { background: linear-gradient(90deg, #34d399, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.doc .lede { color: var(--muted); font-size: 1.08rem; margin: 14px auto 0; max-width: 54ch; }

.panel {
  position: relative; border-radius: 22px; padding: 26px 24px 18px;
  background: linear-gradient(180deg, #262a35 0, #171a22 28px, #101219 100%);
  border: 1px solid rgba(255,255,255,.08); color: #e7e9ee;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.panel::before, .panel::after { content: ""; position: absolute; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #2a2e39; }
.panel::before { left: 14px; } .panel::after { right: 14px; }
.panel-label { display: flex; justify-content: space-between; align-items: center; padding: 0 14px 14px; font: 700 .68rem/1 var(--mono); letter-spacing: .26em; color: #8790a3; }
.panel-label span:last-child { color: #3c4250; letter-spacing: .12em; }
.sections { display: grid; gap: 10px; counter-reset: sec; }
.section {
  counter-increment: sec; display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px;
  padding: 18px 20px; border-radius: 14px; background: #0a0b0f; border: 1px solid rgba(255,255,255,.06);
}
.section::before {
  content: counter(sec, decimal-leading-zero);
  font: 700 1.5rem/1 var(--mono); letter-spacing: 2px; color: var(--safe);
  text-shadow: 0 0 14px rgba(52,211,153,.35); padding-top: 2px;
}
.section h2 { margin: 0 0 6px; font-family: var(--display); font-size: 1.14rem; letter-spacing: -0.01em; color: #eef0f6; }
.section p, .section ul { margin: 0; color: #9aa3b5; }
.section > div > * + * { margin-top: 10px; }
.section ul { padding-left: 1.1em; }
.section li + li { margin-top: 4px; }
.section li::marker { color: var(--safe); }
.section strong { color: #eef0f6; font-weight: 600; }
.section a { color: #eef0f6; text-decoration-color: var(--safe); text-underline-offset: 3px; }
.panel-foot { display: flex; justify-content: center; gap: 8px; padding-top: 16px; font: 600 .66rem/1 var(--mono); letter-spacing: .2em; color: #5d6474; }
.wires { display: block; width: 100%; height: 34px; margin-top: 12px; }
.backlink { display: block; width: max-content; margin: 28px auto 0; text-decoration: none; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .9rem; transition: color .2s; }
.backlink:hover { color: var(--fg); }

@media (max-width: 560px) {
  .section { grid-template-columns: 1fr; padding: 16px; }
  .panel { padding: 24px 12px 14px; }
  .tabs a { padding: 6px 9px; }
  .wm { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mark .check { stroke-dashoffset: 0; }
  .mark .spark { opacity: 0; }
}