/* Nuvforge — Blueprint Glass theme
 * Ported from the approved prototypes into our stack: one stylesheet, no build
 * step, self-hosted fonts. Dark and light both ship; the visitor chooses.
 *
 * Theme mechanics
 * ---------------
 * A tiny inline script in <head> sets data-theme on <html> before first paint,
 * from localStorage('nf-theme') or the OS preference, so there is no flash.
 * The :root defaults below are the no-JS fallback and must stay in sync with
 * the [data-theme] blocks.
 */

/* ---------- fonts: self-hosted, no third-party request ---------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/sora-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

/* ---------- theme tokens ---------- */
:root,
[data-theme="dark"] {
  --bg: #0f172a;
  --bg2: #0b1120;
  --bg3: #1e293b;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --subtle: #8291a8;
  --line: #1e293b;
  --glass: rgba(255, 255, 255, 0.055);
  --glass2: rgba(255, 255, 255, 0.09);
  --gb: rgba(255, 255, 255, 0.10);
  --ghi: rgba(255, 255, 255, 0.16);
  --gsh: rgba(0, 0, 0, 0.70);
  --accent: #2dd4bf;
  --wash: rgba(20, 184, 166, 0.12);
  --grid: rgba(255, 255, 255, 0.045);
  --glow: rgba(20, 184, 166, 0.22);
  --mock: #0b1120;
  --mock2: #1e293b;
  --dot: #334155;
  --nav: rgba(15, 23, 42, 0.70);
  --ok: #4ade80;
  --ember: #f5a524;
  --frame: rgba(0, 0, 0, 0.80);
}

/* Light tokens, applied both by explicit choice and -- for visitors with no
   JS -- by OS preference. The :not([data-theme]) guard stops the media query
   overriding someone who has deliberately chosen dark. */
[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --bg3: #e2e8f0;
  --ink: #0f172a;
  --muted: #64748b;
  --subtle: #5b6b80;
  --line: #e2e8f0;
  --glass: rgba(255, 255, 255, 0.66);
  --glass2: rgba(255, 255, 255, 0.92);
  --gb: rgba(15, 23, 42, 0.09);
  --ghi: rgba(255, 255, 255, 0.95);
  --gsh: rgba(15, 23, 42, 0.16);
  --accent: #0f766e;
  --wash: rgba(20, 184, 166, 0.12);
  --grid: rgba(15, 23, 42, 0.055);
  --glow: rgba(20, 184, 166, 0.20);
  --mock: #ffffff;
  --mock2: #e2e8f0;
  --dot: #cbd5e1;
  --nav: rgba(248, 250, 252, 0.78);
  --ok: #15803d;
  --ember: #b45309;
  --frame: rgba(15, 23, 42, 0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f8fafc;
    --bg2: #f1f5f9;
    --bg3: #e2e8f0;
    --ink: #0f172a;
    --muted: #64748b;
    --subtle: #5b6b80;
    --line: #e2e8f0;
    --glass: rgba(255, 255, 255, 0.66);
    --glass2: rgba(255, 255, 255, 0.92);
    --gb: rgba(15, 23, 42, 0.09);
    --ghi: rgba(255, 255, 255, 0.95);
    --gsh: rgba(15, 23, 42, 0.16);
    --accent: #0f766e;
    --grid: rgba(15, 23, 42, 0.055);
    --glow: rgba(20, 184, 166, 0.20);
    --mock: #ffffff;
    --mock2: #e2e8f0;
    --dot: #cbd5e1;
    --nav: rgba(248, 250, 252, 0.78);
    --ok: #15803d;
    --ember: #b45309;
    --frame: rgba(15, 23, 42, 0.22);
  }
}

/* Keyboard focus must stay obvious in both themes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- components (from the approved prototypes) ---------- */

body{margin:0}

.nf{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;transition:background .22s,color .22s}
.nf a{color:var(--accent);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.glass{background:var(--glass);border:1px solid var(--gb);box-shadow:inset 0 1px 0 0 var(--ghi),0 24px 48px -24px var(--gsh);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.btnp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:14px;background:#14b8a6;color:#0f172a !important;font:600 15px/20px Inter,sans-serif;box-shadow:0 10px 32px -12px rgba(20,184,166,0.60)}
.btnp:hover{background:#2dd4bf}
.btns{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:14px;background:var(--glass);border:1px solid var(--gb);color:var(--ink) !important;font:600 15px/20px Inter,sans-serif}
.btns:hover{background:var(--glass2)}
.eb{font:500 13px/20px 'JetBrains Mono',monospace;color:var(--accent);margin-bottom:14px}
.h2{margin:0;font:600 46px/52px Sora,sans-serif;letter-spacing:-0.03em}
.mu{color:var(--muted)}.su{color:var(--subtle)}
.mono{font-family:'JetBrains Mono',monospace;font-weight:500}
.row{display:flex;gap:24px;align-items:flex-start;padding:28px 12px;border-bottom:1px solid var(--line);color:var(--ink) !important}
.row:hover{background:var(--glass)}
.svc:hover{background:var(--glass)}
.navi{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 13px;border-radius:10px;color:var(--muted) !important;font:500 14px/20px Inter,sans-serif;transition:background .2s,color .2s}.navi:hover{background:var(--glass2);color:var(--ink) !important}
.navl{color:var(--muted) !important;font:500 15px/20px Inter,sans-serif}.navl:hover{color:var(--ink) !important}
.tog{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:transparent;border:1px solid var(--gb);color:var(--ink);cursor:pointer}
.tog:hover{background:var(--glass2)}
.grid-bg{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px}
.foot a{display:block;color:var(--muted);font:400 15px/28px Inter,sans-serif}.foot a:hover{color:var(--ink)}
.soc{display:grid !important;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--gb);color:var(--muted) !important}
@keyframes nfA{0%,100%{transform:translateY(0) rotateX(6deg)}50%{transform:translateY(-12px) rotateX(6deg)}}
@keyframes nfB{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(-3deg)}}
@keyframes nfC{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes nfD{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes nfBar{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
@keyframes nfMarq{0.00%{transform:translateX(-0.0000%)}13.33%{transform:translateX(-0.0000%)}16.67%{transform:translateX(-8.3333%)}30.00%{transform:translateX(-8.3333%)}33.33%{transform:translateX(-16.6667%)}46.67%{transform:translateX(-16.6667%)}50.00%{transform:translateX(-25.0000%)}63.33%{transform:translateX(-25.0000%)}66.67%{transform:translateX(-33.3333%)}80.00%{transform:translateX(-33.3333%)}83.33%{transform:translateX(-41.6667%)}96.67%{transform:translateX(-41.6667%)}100%{transform:translateX(-50%)}}
.nf-track{animation:nfMarq 11s cubic-bezier(0.65,0,0.35,1) infinite}
.nf-marquee:hover .nf-track{animation-play-state:paused}
@keyframes nfDot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.nf-float-a{animation:nfA 7s ease-in-out infinite;transform-origin:center}
.nf-float-b{animation:nfB 6s ease-in-out infinite}
.nf-float-c{animation:nfC 8s ease-in-out infinite}
.nf-float-d{animation:nfD 5s ease-in-out infinite}
.nf-float-e{animation:nfD 6s ease-in-out 1s infinite}
.nf-bar{transform-origin:bottom;animation:nfBar 1.8s ease-in-out infinite alternate}
.nf-dot{animation:nfDot 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nf-float-a,.nf-float-b,.nf-float-c,.nf-float-d,.nf-float-e,.nf-bar,.nf-dot,.nf-track{animation:none}}
@media (max-width:720px){.nf-track{width:600% !important}.nf-track span{font-size:17px !important}}
@media (max-width:720px){.nf-stage{height:330px !important}.nf-float-a{width:auto !important;left:0 !important;right:0 !important;margin-left:0 !important;max-width:none !important}}

.lbl{display:flex;flex-direction:column;gap:8px;font:600 14px/20px Inter,sans-serif}
.lbl span.o{font-weight:400;color:var(--subtle)}
.fld{min-height:48px;padding:0 14px;border-radius:12px;background:var(--field);border:1px solid var(--gb);color:var(--ink);font:400 15px/22px Inter,sans-serif;box-sizing:border-box;width:100%}
textarea.fld{padding:12px 14px;min-height:120px;resize:vertical}
.toc a{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;color:var(--muted) !important;font:500 14px/20px Inter,sans-serif}.toc a:hover{background:var(--glass2);color:var(--ink) !important}
.card{display:flex;flex-direction:column;gap:12px;border-radius:22px;padding:28px;color:var(--ink) !important;box-sizing:border-box;transition:background .25s,transform .25s}
.card:hover{background:var(--glass2);transform:translateY(-3px)}
.chip{display:inline-flex;align-items:center;font:500 12px/18px 'JetBrains Mono',monospace;color:var(--accent);background:var(--wash);border-radius:8px;padding:3px 9px}
.crumb{font:500 13px/20px 'JetBrains Mono',monospace;color:var(--subtle);margin-bottom:22px}.crumb a{color:var(--subtle) !important}
ul.ck{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.ck li{display:flex;gap:10px;font-size:15px;line-height:23px}
ul.ck li::before{content:"✓";color:var(--accent);font-weight:600}
details summary{cursor:pointer}
@media (max-width:720px){.hide-sm{display:none !important}.h1{font-size:42px !important;line-height:46px !important}.h2{font-size:30px !important;line-height:36px !important}.pad{padding:64px 0 !important}.span2{grid-column:auto !important}}