/* mhub.mx
   One dark, cinematic system for every page: the landing, the community, the
   portal and the review desk. Tokens first, then the shell, then the parts.
   No framework, no build: class names are the API and they are stable. */

:root {
  --bg: #07080d;
  --bg-2: #0b0d15;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.065);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #f3f5f9;
  --text-dim: #a5adbd;
  --text-faint: #6d7588;
  --accent: #7c9cff;
  --accent-2: #b28cff;
  --accent-3: #ff6aa9;
  --accent-dim: rgba(124, 156, 255, 0.14);
  --grad: linear-gradient(120deg, #5b8cff 0%, #a06bff 55%, #ff5fa2 100%);
  --grad-soft: linear-gradient(120deg, rgba(91, 140, 255, 0.35), rgba(160, 107, 255, 0.35) 55%, rgba(255, 95, 162, 0.35));
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  /* Code and the prompt: a deeper black inside the dark, with a hairline. */
  --ink: #04050a;
  --ink-line: rgba(255, 255, 255, 0.1);
  --ink-text: #e9ecf3;
  --ink-dim: #9aa3b5;
  --ink-faint: #656d80;
  --lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shot-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(124, 156, 255, 0.35);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Nothing pans sideways: the value propagates to the viewport, so the
     page cannot be swiped wider than the screen. `clip` is the modern word,
     `hidden` the fallback; both stay on <body>, never also on <html>, or
     <body> turns into its own scroller and the sticky header lets go. */
  overflow-x: hidden;
  overflow-x: clip;
  /* A short page still puts the footer at the bottom edge: the body is a
     column, the content column grows, <main> takes the slack. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
body > .wrap > main { flex: 1; }
::selection { background: rgba(160, 107, 255, 0.4); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: rgba(124, 156, 255, 0.5); }
b, strong { font-weight: 650; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
pre code { background: none; border: 0; padding: 0; }
img { max-width: 100%; }
pre, .snippet { scrollbar-width: thin; scrollbar-color: var(--ink-line) transparent; -webkit-user-select: text; user-select: text; }
pre { position: relative; }
pre .copy-btn { position: absolute; top: 8px; right: 8px; padding: 5px 9px; font-size: 11px; opacity: 0; transition: opacity 140ms ease; }
pre:hover .copy-btn, pre:focus-within .copy-btn, pre .copy-btn:focus-visible { opacity: 1; }
@media (hover: none) { pre .copy-btn { opacity: 1; } }
pre::-webkit-scrollbar, .snippet::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-thumb, .snippet::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 3px; }

.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  position: relative;
}

/* ---- the sky ----
   Three soft lights drifting behind everything. Fixed, so they do not
   scroll; blurred by their own gradients, so no filter runs per frame. */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(1200px 600px at 50% -10%, rgba(124, 156, 255, 0.12), transparent 60%), var(--bg); }
.aurora i {
  position: absolute; border-radius: 50%; opacity: 0.55;
  width: 60vmax; height: 60vmax; filter: blur(10px);
  background: radial-gradient(closest-side, rgba(91, 140, 255, 0.28), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) { left: 45%; top: 10%; background: radial-gradient(closest-side, rgba(160, 107, 255, 0.24), transparent 70%); animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { left: -10%; top: 40%; background: radial-gradient(closest-side, rgba(255, 95, 162, 0.16), transparent 70%); animation-duration: 38s; animation-delay: -16s; }
.aurora i:nth-child(1) { left: 20%; top: -30%; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(12vw, 10vh, 0) scale(1.15); }
}
/* A faint grid gives the dark a floor. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
}

/* ---- reading progress: one gradient hairline along the top ---- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 40; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ---- header: a floating glass bar ---- */
.header-bar { position: sticky; top: 0; z-index: 30; padding-top: 14px; transition: padding 200ms ease; }
.scroll-sentinel { position: absolute; top: 0; width: 1px; height: 1px; }
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 16px;
  border: 1px solid transparent; border-radius: 999px;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.header-bar.scrolled header {
  background: rgba(11, 13, 21, 0.72);
  border-color: var(--line);
  box-shadow: 0 10px 40px -16px rgba(0, 0, 0, 0.8);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header-bar.scrolled header { -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
}
section[id] { scroll-margin-top: 96px; }
.brand { display: inline-flex; align-items: center; color: var(--text); font-weight: 750; font-size: 18px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; box-shadow: 0 6px 18px -6px rgba(160, 107, 255, 0.8); transition: transform 300ms var(--ease-spring); }
.brand:hover .logo { transform: rotate(-8deg) scale(1.06); }
.wordmark b { font-weight: 750; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav { display: flex; align-items: center; }
nav a { color: var(--text-dim); font-size: 14px; margin-left: 4px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; transition: color 140ms ease, background 140ms ease; }
nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
nav .account {
  margin-left: 10px; color: var(--text); font-weight: 600; font-size: 13.5px;
  border: 1px solid var(--line-2); background: var(--surface);
}
nav .account:hover { border-color: var(--accent); }

/* ---- type ---- */
h1 {
  font-size: clamp(40px, 7.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 14ch;
  text-wrap: balance;
}
.grad, h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 750;
  margin-top: 14px;
  max-width: 22ch;
  text-wrap: balance;
}
.lede { margin-top: 18px; max-width: 60ch; color: var(--text-dim); font-size: 17px; }
.kicker {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid rgba(178, 140, 255, 0.35); background: rgba(178, 140, 255, 0.08);
  border-radius: 999px; padding: 5px 12px;
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); margin-right: 8px; box-shadow: 0 0 10px var(--accent-2); }
section { padding: 120px 0 0; }

/* ---- hero ---- */
.hero { padding: 96px 0 24px; position: relative; text-align: left; }
.hero .pill {
  display: inline-flex; align-items: center; font-size: 13px; color: var(--text-dim);
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px 6px 8px;
}
.hero .pill i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); margin-right: 10px; box-shadow: 0 0 16px rgba(160, 107, 255, 0.7); }
.hero h1 { margin-top: 22px; }
.hero-line { margin-top: 22px; font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
/* The rotating word: the gradient sits on each letter (an inline-block
   child cannot borrow its parent's clipped background), so the letters are
   the accent and the glow does the rest. */
.hero-line .morph .ch { color: #c4b0ff; text-shadow: 0 0 24px rgba(160, 107, 255, 0.55); }
.hero-line .morph .ch.spin { color: transparent; }
.hero p.sub { margin: 18px 0 0; max-width: 56ch; font-size: 18px; color: var(--text-dim); }
.hero p.sub strong { color: var(--text); font-weight: 600; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; }
.hero-actions .btn { margin: 0 12px 12px 0; }
.hero-proof { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--text-faint); }
.hero-proof span { margin: 0 18px 6px 0; display: inline-flex; align-items: center; }
.hero-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--good); margin-right: 8px; box-shadow: 0 0 8px var(--good); }

/* ---- buttons ---- */
.btn {
  position: relative; display: inline-block;
  margin-top: 22px;
  color: #fff; font-weight: 650; font-size: 15px; letter-spacing: -0.005em;
  border-radius: 12px; padding: 13px 24px;
  background: var(--grad); background-size: 200% 200%;
  box-shadow: 0 10px 30px -10px rgba(160, 107, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  border: 0; cursor: pointer; font-family: inherit; line-height: 1.3;
  transition: transform 160ms var(--ease-spring), box-shadow 200ms ease, background-position 400ms ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); background-position: 100% 50%; box-shadow: 0 16px 40px -12px rgba(160, 107, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.25) inset; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; padding: 12px 23px; }
.btn.ghost:hover { border-color: var(--accent); background: var(--surface-2); box-shadow: none; }
.btn.danger { color: var(--bad); border-color: rgba(251, 113, 133, 0.35); }
.btn.danger:hover { border-color: var(--bad); }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.copy-btn {
  font: 12px/1 system-ui, sans-serif; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 10px; flex: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), color 140ms ease, border-color 140ms ease;
}
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.copy-btn:active { transform: scale(0.96); }

/* ---- screenshots: framed, glowing ---- */
.shot { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shot-shadow); background: #0a0b12; }
.hero-shot { margin: 64px 0 8px; position: relative; }
.hero-shot::before {
  content: ""; position: absolute; inset: -10% -6% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 40%, rgba(124, 156, 255, 0.28), transparent 70%);
  filter: blur(20px);
}
figcaption { margin-top: 16px; font-size: 13.5px; color: var(--text-faint); max-width: 64ch; }
.hero-shot figcaption { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- ticker: every curated addon, walking by ---- */
.ticker { margin: 56px 0 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { display: inline-flex; align-items: center; margin-right: 36px; font-size: 14px; color: var(--text-dim); white-space: nowrap; }
.ticker-track span img { width: 20px; height: 20px; border-radius: 6px; margin-right: 10px; object-fit: cover; background: var(--surface-2); }
.ticker-track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); margin-left: 36px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- feature blocks ---- */
.feature { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-text h3 { font-size: 26px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.feature-text h3::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--grad); margin-bottom: 16px; }
.feature-text p { margin-top: 12px; color: var(--text-dim); }
.feature-text .feature-links { margin-top: 16px; font-size: 15px; }
.feature.flip .feature-text { order: 2; }
.feature-shot { min-width: 0; position: relative; }
.feature-shot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(160, 107, 255, 0.2), transparent 70%); filter: blur(24px); }
.phone-row { display: flex; justify-content: center; }
.phone-row .device { width: min(44%, 266px); }
.phone-row .phone { width: 100%; border-radius: 26px; }
.phone-row .device + .device { margin-left: 20px; }
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: 26px; margin-top: 56px; }
  .feature.flip .feature-text { order: 0; }
}

/* ---- cards: glass with a spotlight that follows the cursor ---- */
.grid { margin-top: 40px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.card, .step, .caddon, .paddon, .live, .report, .stats div, .empty, .notice, .table-wrap, .prompt, .hero-code {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--lift);
}
.card, .step { padding: 22px; transition: border-color 200ms ease, transform 200ms var(--ease-out), background 200ms ease; }
.spot { --mx: 50%; --my: 50%; }
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(160, 107, 255, 0.18), transparent 60%);
  transition: opacity 250ms ease;
}
.spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  padding: 1px; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 250ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .spot:hover::before, .spot:hover::after { opacity: 1; }
  .card:hover, .step:hover, .caddon:hover, .paddon:hover { transform: translateY(-2px); border-color: var(--line-2); background: var(--surface-2); }
}
.card.wide { grid-column: 1 / -1; }
.card h3 { font-family: var(--mono); font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--accent); }
.card p { margin-top: 8px; font-size: 14.5px; color: var(--text-dim); }
.card pre, .step pre {
  margin-top: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  color: var(--ink-dim); background: var(--ink); border: 1px solid var(--ink-line); border-radius: 10px;
  padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto;
}
.card pre .c { color: var(--ink-faint); }
.card pre .k, .step pre .k { color: var(--ink-text); }
.card.plain h3 { font-family: inherit; font-size: 16.5px; font-weight: 650; color: var(--text); }
.card.plain p a { overflow-wrap: anywhere; }
.badge { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px; }

/* steps */
.steps { margin-top: 40px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.step .n { font-family: var(--mono); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { margin-top: 12px; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.step p { margin-top: 6px; font-size: 14.5px; color: var(--text-dim); }

/* the prompt and the snippet: the dark inside the dark */
.prompt { margin-top: 36px; background: var(--ink); padding: 20px 22px; }
.prompt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); }
.prompt pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: var(--ink-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt .copy-btn { margin-top: 14px; }
#promptIdea { color: var(--ink-dim); transition: color 300ms ease; }
#promptIdea.filled { color: #ff8cc0; }
.prompt.flash { animation: flash 900ms ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent-2), 0 0 60px rgba(160, 107, 255, 0.5); } 100% { box-shadow: var(--lift); } }
.hero-code { margin-top: 34px; display: inline-flex; align-items: center; background: var(--ink); padding: 14px 18px; font-family: var(--mono); font-size: 14.5px; color: var(--ink-text); max-width: 100%; border-radius: 12px; }
.hero-code .snippet { white-space: nowrap; overflow-x: auto; min-width: 0; margin-right: 14px; }
.hero-code .tag { color: var(--ink-faint); }
.hero-code .attr { color: #8ab4ff; }
.hero-code .val { color: #7ee787; }

/* ---- live panel ---- */
.live { margin: 46px 0 0; padding: 20px 22px; }
.live-head { display: flex; align-items: flex-start; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex: none; margin: 8px 14px 0 0; transition: background 300ms ease; }
.live[data-state="hosted"] .dot { background: var(--good); box-shadow: 0 0 12px var(--good); }
.live[data-state="waiting"] .dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.live b { font-weight: 600; color: var(--text); }
.live .msg { font-size: 15px; color: var(--text-dim); }
.readout { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.readout .row { display: flex; align-items: baseline; padding: 4px 0; }
.readout dt { width: 132px; flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.readout dd { font-family: var(--mono); font-size: 13.5px; color: var(--text-dim); }
.readout .val { color: var(--text); }
.tag-chip { display: inline-block; font-family: var(--mono); font-size: 12.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; margin: 0 6px 4px 0; }
.tag-chip small { color: var(--text-faint); font-size: 11px; }
.live[data-state="hosted"] .readout .cap { color: var(--accent); }
.live .msg, .live .readout { transition: opacity 200ms ease; }
.live.swap .msg, .live.swap .readout { opacity: 0; }

.status { margin-top: 20px; border-left: 2px solid transparent; border-image: var(--grad) 1; padding: 2px 0 2px 16px; color: var(--text-dim); font-size: 15px; max-width: 64ch; }

/* ---- the big call ---- */
.cta { margin: 120px 0 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; padding: 64px 36px; text-align: center; background: var(--surface); }
.cta::before { content: ""; position: absolute; inset: -40% -20%; z-index: -1; background: conic-gradient(from 180deg at 50% 50%, rgba(91, 140, 255, 0.25), rgba(160, 107, 255, 0.25), rgba(255, 95, 162, 0.25), rgba(91, 140, 255, 0.25)); filter: blur(60px); animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta h2 { margin: 0 auto; max-width: none; }
.cta h2 span { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta p { margin: 14px auto 0; color: var(--text-dim); max-width: 50ch; }
.cta-actions { margin-top: 4px; }
.cta-actions .btn { margin: 14px 6px 0; }

footer { margin-top: 120px; border-top: 1px solid var(--line); padding: 28px 0 clamp(100px, 18vw, 230px); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--text-faint); font-size: 13.5px; position: relative; }
footer code { color: var(--text-dim); }
.foot-mark { position: absolute; left: 0; right: 0; bottom: -0.08em; text-align: center; font-size: clamp(80px, 22vw, 260px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; }
footer .foot-row { position: relative; z-index: 1; }

/* ---- scroll reveal ---- */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---- the intro: letters that become other letters ----
   A full-screen curtain on the first visit of a session. Every character is
   its own element so it can spin through glyphs and settle; the widths are
   animated too, so the line reflows like liquid. Skipped for reduced
   motion, for deep links, and once seen. */
.intro { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); cursor: pointer; transition: opacity 700ms ease, visibility 0s linear 700ms; }
.intro.out { opacity: 0; visibility: hidden; }
.intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% 50%, rgba(124, 156, 255, 0.18), transparent 70%); animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.5; transform: scale(1.1); } }
.intro .logo { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(160, 107, 255, 0.9); transform: scale(0.6) rotate(-12deg); opacity: 0; animation: logoIn 900ms var(--ease-spring) forwards; }
.intro.out .logo { animation: logoOut 600ms ease forwards; }
@keyframes logoIn { to { transform: none; opacity: 1; } }
@keyframes logoOut { to { transform: scale(1.6); opacity: 0; filter: blur(8px); } }
.intro .logo path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 700ms ease 500ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.intro-text { margin-top: 34px; font-size: clamp(30px, 6.4vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--text); white-space: nowrap; min-height: 1.2em; text-align: center; }
.intro-skip { position: absolute; bottom: 32px; font-size: 13px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.intro.out .intro-text { transition: transform 700ms ease, filter 700ms ease; transform: scale(1.12); filter: blur(10px); }

/* The morph: any element whose text is spun character by character. */
/* vertical-align: top, not baseline: an inline-block with overflow hidden
   puts its baseline on its bottom edge and the letters float up. The box is
   one line tall like its parent, so top-aligned it sits where text sits. */
.morph .ch { display: inline-block; white-space: pre; vertical-align: top; will-change: transform, width; transition: width 420ms var(--ease-out); overflow: hidden; }
.morph .ch.spin { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; filter: blur(0.6px) brightness(1.3); animation: chSpin 90ms linear infinite; }
.morph .ch.settle { animation: chSettle 480ms var(--ease-spring); }
@keyframes chSpin { 0% { transform: translateY(-6%) rotateX(20deg); } 100% { transform: translateY(6%) rotateX(-20deg); } }
@keyframes chSettle { 0% { transform: scale(1.25) translateY(-4%); filter: blur(3px); opacity: 0.4; } 100% { transform: none; filter: none; opacity: 1; } }

/* ---- focus (a TV remote's only pointer) ---- */
a:focus, .btn:focus, .copy-btn:focus, .ex-use:focus, .filter:focus, .form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
a:focus:not(:focus-visible), .btn:focus:not(:focus-visible), .copy-btn:focus:not(:focus-visible), .ex-use:focus:not(:focus-visible) { outline: none; }

/* ---- pages that are not the story ---- */
.page { padding: 64px 0 0; }
.page h1 { font-size: clamp(34px, 5.6vw, 60px); max-width: 20ch; }
.page.narrow { max-width: 560px; }
.page.narrow h1 { max-width: none; }
.addons { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; }
.addon { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; }
.addon .icon { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--surface-2); overflow: hidden; }
.addon .icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.addon h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.addon p { margin-top: 4px; color: var(--text-dim); font-size: 14px; }
.addon code { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); background: none; border: 0; padding: 0; }
.note { margin-top: 28px; color: var(--text-dim); font-size: 14px; max-width: 70ch; }
.legal { padding: 64px 0 64px; max-width: 62ch; }
.legal h1 { font-size: clamp(34px, 5.6vw, 60px); max-width: none; margin-bottom: 8px; }
/* Die Abschnitte der Rechtsseite sind Absätze, keine Bühnen: das Polster,
   das die Landing-Sections voneinander trennt, gilt hier nicht. */
.legal section { padding: 0; }
.legal h2 { font-size: 26px; margin: 44px 0 16px; max-width: none; }
.legal h3 { font-size: 17px; font-weight: 650; margin: 28px 0 8px; }
.legal p { margin: 0 0 16px; color: var(--text-dim); line-height: 1.65; }
.legal ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-dim); line-height: 1.65; }
.legal li { margin-bottom: 12px; }
.legal li strong { color: var(--text); font-weight: 650; }
.legal-meta { font-size: 14px; }
.legal-lede { margin-top: -6px; }
/* Der Betreiber: eine Karte wie die anderen auf der Seite, der Name als
   Zeile für sich, Adresse und Kontakt darunter. */
.imprint { padding: 22px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.imprint p { margin: 0 0 14px; line-height: 1.6; }
.imprint p:last-child { margin-bottom: 0; }
.imprint .imprint-who strong { display: block; font-size: 18px; font-weight: 650; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; }
.imprint a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
.imprint a:hover { border-bottom-color: var(--accent); }

/* ---- the example gallery ---- */
.ex-legend { margin-top: 26px; display: flex; flex-wrap: wrap; font-size: 13.5px; color: var(--text-dim); }
.ex-legend span { margin: 0 22px 6px 0; display: inline-flex; align-items: center; }
.ex-legend i { margin-right: 8px; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ex-group { margin-top: 44px; }
.ex-h { font-size: 13px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; }
.ex-h::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 16px; }
.ex-grid { margin-top: 16px; }
.card.ex { display: flex; flex-direction: column; padding: 20px 20px 16px; }
.card.ex h4 { margin-top: 12px; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.card.ex p { flex: 1; }
.card.ex p a { overflow-wrap: anywhere; }
.ex-tag { align-self: flex-start; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(124, 156, 255, 0.3); }
.ex-tag.site { color: #5eead4; background: rgba(94, 234, 212, 0.1); border-color: rgba(94, 234, 212, 0.3); }
.ex-tag.app { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); }
i.ex-tag { padding: 0; border: 0; background: var(--accent); }
i.ex-tag.site { background: #5eead4; }
i.ex-tag.app { background: #fbbf24; }
.ex-use { margin-top: 16px; align-self: flex-start; font: 600 13.5px/1 system-ui, sans-serif; color: var(--text); background: transparent; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; }
.ex-use::after { content: "\2192"; margin-left: 8px; transition: transform 200ms var(--ease-spring); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-use:hover::after { transform: translateX(4px); }

/* ---- community cards ---- */
.caddons { margin-top: 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.caddon { display: flex; align-items: flex-start; padding: 16px; color: var(--text); transition: border-color 200ms ease, transform 200ms var(--ease-out), background 200ms ease; }
.caddon:hover { text-decoration: none; }
.caddon.featured { border-color: rgba(178, 140, 255, 0.45); }
.caddon .icon, .paddon .icon, .addon-hero .icon { width: 46px; height: 46px; border-radius: 12px; flex: none; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin-right: 14px; }
.caddon .icon img, .paddon .icon img, .addon-hero .icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.caddon .body, .paddon .body { min-width: 0; flex: 1; }
.caddon .title, .paddon .title { display: block; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; line-height: 1.3; }
.caddon .star { color: var(--accent-2); font-size: 13px; }
.caddon .desc { display: block; margin-top: 4px; font-size: 14px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caddon .meta, .paddon .meta { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.sub-h { font-size: 22px; margin-top: 48px; max-width: none; }
.sub-h3 { font-size: 16px; font-weight: 650; margin-top: 24px; }
.list-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.list-head .sub-h { margin-right: 16px; }
.filter { margin-top: 48px; width: min(320px, 100%); font: 14px system-ui, sans-serif; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; }
.empty-filter { margin-top: 24px; color: var(--text-faint); }
.how { margin-top: 64px; }
.community .hero-actions { margin-top: 26px; }
.add-url { margin-top: 30px; }
.add-url-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.add-url .hero-code { margin-top: 0; }
.addon-hero { display: flex; align-items: flex-start; }
.addon-hero .icon.big { width: 84px; height: 84px; border-radius: 22px; margin-right: 24px; margin-top: 6px; box-shadow: 0 20px 50px -20px rgba(160, 107, 255, 0.6); }
.byline { margin-top: 12px; font-size: 14.5px; color: var(--text-dim); }
.crumbs { font-size: 13.5px; color: var(--text-faint); margin-bottom: 10px; }
.crumbs a { color: var(--text-dim); }

/* ---- portal ---- */
.portal-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.portal-head > div:first-child { flex: 1 1 320px; min-width: 0; margin-right: 16px; }
.portal-head h1 { font-size: clamp(30px, 4.6vw, 44px); }
.portal-actions { display: flex; flex-wrap: wrap; margin-top: 14px; }
.portal-actions .btn { margin: 8px 8px 0 0; }
.paddons { margin-top: 24px; display: grid; gap: 10px; }
.paddon { display: flex; align-items: center; padding: 14px 16px; color: var(--text); transition: border-color 200ms ease, transform 200ms var(--ease-out), background 200ms ease; }
.paddon:hover { text-decoration: none; }
.paddon .state { flex: none; margin-left: 12px; text-align: right; }
.paddon .state .chip { margin-left: 6px; }
.chip { display: inline-block; font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 6px 10px; white-space: nowrap; vertical-align: middle; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); }
.chip.is-live { color: var(--good); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); }
.chip.pending { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.chip.rejected { color: var(--bad); background: rgba(251, 113, 133, 0.12); border-color: rgba(251, 113, 133, 0.35); }
.muted { color: var(--text-faint); font-weight: 400; }
.warn-text { color: var(--warn); }
.empty { margin-top: 28px; border-style: dashed; padding: 40px 28px; text-align: center; box-shadow: none; }
.empty h2 { max-width: none; margin: 0; font-size: 24px; }
.empty p { margin: 10px auto 0; color: var(--text-dim); max-width: 48ch; }
.empty.small { padding: 22px; }
.empty.small p { margin: 0; }
.stats { margin-top: 24px; display: flex; flex-wrap: wrap; }
.stats div { margin: 0 10px 10px 0; min-width: 130px; padding: 16px 18px; }
.stats b { display: block; font-size: 28px; letter-spacing: -0.03em; font-weight: 750; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- forms ---- */
.form { margin-top: 28px; }
.form label { display: block; margin-top: 18px; font-weight: 600; font-size: 14.5px; }
.form label .opt { font-weight: 400; color: var(--text-faint); font-size: 13px; margin-left: 6px; }
.form input[type="text"], .form input[type="email"], .form input[type="url"], .form textarea, .form input[type="file"] {
  display: block; width: 100%; margin-top: 8px;
  font: 15px system-ui, sans-serif; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.18); }
.form input:disabled { color: var(--text-faint); background: rgba(255, 255, 255, 0.02); }
.form input::placeholder, .form textarea::placeholder { color: var(--text-faint); }
.form input[type="file"] { color: var(--text-dim); }
.form input[type="file"]::file-selector-button { font: 600 13px system-ui, sans-serif; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 12px; margin-right: 12px; cursor: pointer; }
.form textarea { resize: vertical; line-height: 1.5; }
.form .help { display: block; margin-top: 6px; font-weight: 400; font-size: 13px; color: var(--text-faint); }
.form .btn { margin-top: 26px; }
.form.inline { margin-top: 12px; }
.form.inline .btn { margin-top: 0; }
.prefix-input { display: flex; margin-top: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; }
.prefix-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.18); }
.prefix-input .prefix { flex: none; padding: 12px 0 12px 14px; font-family: var(--mono); font-size: 14px; color: var(--text-faint); white-space: nowrap; }
.form .prefix-input input { margin: 0; border: 0; border-radius: 0; padding-left: 2px; font-family: var(--mono); min-width: 0; background: none; }
.form .prefix-input input:focus { box-shadow: none; }
.form fieldset.kind { border: 0; margin-top: 18px; }
.form legend { font-weight: 600; font-size: 14.5px; }
.form .radio, .form .check { display: flex; align-items: flex-start; font-weight: 400; margin-top: 10px; cursor: pointer; }
.form .radio input, .form .check input { margin: 4px 12px 0 0; flex: none; accent-color: var(--accent-2); }
.form .radio b { display: block; font-weight: 600; }
.form .radio small { display: block; color: var(--text-faint); font-size: 13px; }
.form .check span { color: var(--text-dim); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; margin-top: 12px; }
.actions form { margin: 8px 8px 0 0; }
.actions .btn { margin: 0; }
.notice { margin-top: 22px; border-radius: 12px; padding: 12px 16px; font-size: 14.5px; color: var(--text); background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); box-shadow: none; }
.notice.bad { background: rgba(251, 113, 133, 0.08); border-color: rgba(251, 113, 133, 0.3); }
.notice a { overflow-wrap: anywhere; }

/* ---- the check report ---- */
.report { margin-top: 18px; padding: 18px 20px; }
.report-head { display: flex; align-items: center; font-size: 15px; }
.report-head .dot { margin: 0 12px 0 0; background: var(--good); box-shadow: 0 0 10px var(--good); }
.report.bad .report-head .dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.report-warn { margin-left: 12px; font-size: 13px; color: var(--warn); }
.report-list { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.report-list.errors { color: #ffb4c0; }
.report-list.warnings { color: #fde68a; }
.report-list li { margin-top: 4px; }
.facts { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.facts > div { display: flex; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.facts dt { width: 110px; flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.facts dd { font-size: 13.5px; color: var(--text-dim); }
.table-wrap { margin-top: 14px; overflow-x: auto; }
table.files, table.history { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.files td, table.history td { padding: 10px 16px; border-top: 1px solid var(--line); vertical-align: top; }
table.files tr:first-child td, table.history tr:first-child td { border-top: 0; }
table.files td:first-child { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
table.files .num, table.history .num { text-align: right; white-space: nowrap; color: var(--text-faint); font-family: var(--mono); font-size: 12px; }
table.files tr.removed td { color: var(--text-faint); text-decoration: line-through; }
.diff { font: 600 11px/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 4px 8px; }
.diff.add { color: var(--good); background: rgba(52, 211, 153, 0.12); }
.diff.mod { color: var(--warn); background: rgba(251, 191, 36, 0.12); }
.diff.del { color: var(--bad); background: rgba(251, 113, 133, 0.12); text-decoration: none; }
/* The recovery key's page (/key): the code and the key it holds. */
.keycard { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); }
.keycard-qr { width: min(64vw, 240px); padding: 8px; border-radius: 12px; background: #fff; }
.keycard-qr svg { display: block; width: 100%; height: auto; }
/* The heading is one long word in German: sized so it holds its line on a phone. */
.page.keypage h1 { font-size: clamp(21px, 5.8vw, 60px); }
.keycard-key { font-size: min(1.05rem, 3.4vw); font-weight: 600; white-space: nowrap; text-align: center; user-select: all; }
.keycard-actions { justify-content: center; }
.keycard-warn { color: var(--text); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,170,60,.4); background: rgba(255,170,60,.1); }
.review-actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; }
.review-actions > * { margin: 0 8px 8px 0; }
.review-actions .inline { display: inline; }
.review-actions .btn { margin-top: 0; }
.review-actions .reject { position: relative; }
.review-actions .reject summary { list-style: none; cursor: pointer; }
.review-actions .reject summary::-webkit-details-marker { display: none; }
.review-actions .reject[open] summary { border-color: var(--accent); }
.review-actions .reject .form { position: absolute; z-index: 5; margin-top: 8px; width: min(420px, 90vw); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); padding: 16px; }
.review-actions .reject .form label { margin-top: 0; }
.manifest { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-text); background: var(--ink); border: 1px solid var(--ink-line); border-radius: 14px; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 520px; overflow: auto; }


/* ---- liquid glass ----
   Frosted panes with a specular edge: the backdrop blurred and saturated, a
   light on the top-left rim, a grain so the frost is not flat, and a soft
   inner shadow at the foot. The blur itself runs only where a pointer hovers
   (desktops), because a TV browser pays dearly for it and gains nothing. */
.glass, .card, .step, .caddon, .paddon, .live, .report, .stats div, .empty, .notice, .table-wrap, .prompt, .hero-code, header, .device, .intro-pane, .orb {
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -20px 40px -30px rgba(0, 0, 0, 0.6),
    0 24px 60px -24px rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.14);
}
/* the grain: an SVG noise, tiled, almost invisible, on every pane */
.grain::after, .card::after, .step::after, .live::after, .report::after, header::after, .device::after, .intro-pane::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* the spotlight's rim light already owns .spot::after; the grain moves to
   ::before's sibling on those, so both survive. */
.spot.card::after, .spot.step::after, .spot.live::after, .spot.report::after { opacity: 0; mix-blend-mode: normal; background-image: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 60%); }
@media (hover: hover) and (pointer: fine) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .card, .step, .caddon, .paddon, .live, .report, .stats div, .notice, .table-wrap, header, .device, .intro-pane, .orb, .form input, .form textarea, .prefix-input, .filter {
      -webkit-backdrop-filter: blur(22px) saturate(1.7);
      backdrop-filter: blur(22px) saturate(1.7);
    }
  }
}
header { position: relative; border-color: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; background-color: rgba(11, 13, 21, 0.55); }
.header-bar.scrolled header { background-color: rgba(11, 13, 21, 0.72); }
header > * { position: relative; z-index: 1; }

/* buttons: a gloss on the upper half and a light that sweeps across on hover */
.btn { overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0) 52%); }
.btn::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg) translateX(-100%); transition: transform 0s; }
.btn:hover::after { transform: skewX(-20deg) translateX(520%); transition: transform 900ms var(--ease-out); }
.btn.ghost { background-image: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px -18px rgba(0, 0, 0, 0.8); }
.btn.ghost::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 50%); }

/* the device: a glass bezel around every screenshot */
.device { position: relative; padding: 10px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 10px); background-color: rgba(255, 255, 255, 0.03); }
.device .shot { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 80px -30px rgba(0, 0, 0, 0.9); border-radius: var(--radius); }
.device.phones { display: inline-block; }
.phone-row .device { padding: 8px; border-radius: 34px; }
.phone-row .device .phone { border-radius: 26px; }

/* the orbs: three panes of glass adrift over the hero */
.orbs { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: -1; }
.orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background-color: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -30px 60px -30px rgba(160, 107, 255, 0.5), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  animation: bob 9s ease-in-out infinite alternate; }
.orb::before { content: ""; position: absolute; left: 14%; top: 10%; width: 40%; height: 22%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); filter: blur(2px); }
.orb.a { width: 220px; height: 220px; right: 4%; top: 30px; }
.orb.b { width: 120px; height: 120px; right: 26%; top: 300px; animation-duration: 12s; animation-delay: -4s; }
.orb.c { width: 70px; height: 70px; right: 12%; top: 380px; animation-duration: 7s; animation-delay: -2s; }
@keyframes bob { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-18px, 26px, 0) rotate(8deg); } }

/* the intro pane: the curtain has a console of glass in the middle */
.intro-pane { position: relative; display: flex; flex-direction: column; align-items: center; padding: 56px 64px 48px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 36px; background-color: rgba(255, 255, 255, 0.03); max-width: min(92vw, 1000px); }
.intro-pane > * { position: relative; z-index: 1; }
.intro .logo { display: block; }

/* inputs are glass too */
.form input[type="text"], .form input[type="email"], .form input[type="url"], .form textarea, .prefix-input, .filter { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.form .prefix-input input { background-image: none; box-shadow: none; }

/* kickers and chips: small glass pills */
.kicker, .chip, .tag-chip, .hero .pill, nav .account { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }

/* ---- /browser: the promo ---- */
.promo { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 40px; border: 1px solid var(--line); border-radius: 28px; position: relative; overflow: hidden; }
.promo::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: conic-gradient(from 90deg at 30% 40%, rgba(91, 140, 255, 0.28), rgba(160, 107, 255, 0.22), rgba(255, 95, 162, 0.2), rgba(91, 140, 255, 0.28)); filter: blur(70px); animation: spin 30s linear infinite; }
.promo h2 { margin-top: 18px; max-width: none; }
.promo-brand { display: inline-flex; align-items: center; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.promo-brand img { width: 44px; height: 44px; border-radius: 12px; margin-right: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.platforms { margin-top: 24px; display: grid; gap: 8px; }
.platform { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease-out); }
.platform:hover { text-decoration: none; border-color: var(--accent); background: var(--surface-2); transform: translateX(3px); }
.platform-name { font-weight: 600; font-size: 14.5px; }
.platform-label { font-size: 13px; color: var(--text-dim); white-space: nowrap; margin-left: 12px; }
.promo-shot { min-width: 0; }
.promo .hero-actions { margin-top: 26px; }
/* The browser under an invitation (server.mjs joinBrowser). */
.join-browser { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.join-browser h2 { font-size: 20px; margin: 0 0 8px; }
.join-browser > p { color: var(--text-dim); margin: 0 0 16px; }
.join-steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; }
.join-steps li { position: relative; padding: 0 0 12px 40px; counter-increment: step; line-height: 1.45; }
.join-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; text-align: center; line-height: 26px; font-size: 13px; font-weight: 700; color: #fff; background: var(--grad, #5b8cff); }
.join-browser-card { display: flex; align-items: center; margin-bottom: 14px; }
.join-browser-card img { border-radius: 12px; margin-right: 14px; }
.join-browser-name b { display: block; font-size: 17px; }
.join-browser-name span { color: var(--text-dim); font-size: 14px; }
.join-browser-more { margin-top: 14px; font-size: 14px; }
.browser-row .state { color: var(--text-dim); font-size: 13.5px; }
.hero-proof a { color: inherit; }
.hero-proof a:hover { color: var(--text); }
@media (max-width: 880px) { .promo { grid-template-columns: 1fr; padding: 28px; } }


/* ---- language: the flag in the header and the dialog it opens ----
   The same twenty languages and flags as vypn.net. A glass sheet over a dim,
   blurred page; System first, then a grid, the page's language marked. */
.lang-btn {
  display: inline-flex; align-items: center; margin-left: 8px;
  font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0.06em; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 10px 6px 7px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.lang-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.flag { display: block; flex: none; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.lang-btn .flag { width: 22px; height: 16px; border-radius: 3px; }
.lang-code { margin-inline-start: 7px; }

.lang-dialog {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px max(16px, env(safe-area-inset-left));
  background: rgba(4, 5, 10, 0.55);
  animation: fadeIn 180ms ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lang-dialog { -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
}
html.lang-open { overflow: hidden; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.lang-panel {
  position: relative; width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 26px; padding: 22px;
  background-color: rgba(14, 16, 26, 0.86);
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%), linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(160, 107, 255, 0.45);
  animation: sheetIn 260ms var(--ease-out);
}
.lang-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lang-head h2 { margin: 0; font-size: 20px; max-width: none; }
.lang-close {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  font: 400 22px/1 system-ui, sans-serif; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--line-2); cursor: pointer;
}
.lang-close:hover { color: var(--text); border-color: var(--accent); }
.lang-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lang-item {
  display: flex; align-items: center; min-width: 0;
  padding: 11px 12px; border-radius: 14px; color: var(--text);
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.03);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out);
}
.lang-item:hover, .lang-item:focus-visible { text-decoration: none; background: var(--surface-2); border-color: var(--line-2); outline: none; }
.lang-item:active { transform: scale(0.98); }
.lang-item .flag { margin-inline-end: 12px; }
.lang-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-faint); white-space: normal; }
.lang-item.current { border-color: rgba(178, 140, 255, 0.55); background: rgba(160, 107, 255, 0.14); }
.lang-item.system { grid-column: 1 / -1; padding: 13px 14px; }
.lang-item.system.active { border-color: rgba(178, 140, 255, 0.55); background: rgba(160, 107, 255, 0.10); }
.lang-globe { display: inline-flex; width: 24px; margin-inline-end: 12px; color: var(--accent-2); }
.lang-check { flex: none; margin-inline-start: 8px; color: var(--accent-2); }
.arrow { display: inline-block; }

/* ---- motion off ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { transform: none; transition: opacity 300ms ease; }
  .live[data-state="waiting"] .dot, .aurora i, .cta::before, .ticker-track, .intro::before, .lang-dialog, .lang-panel { animation: none; }
  .morph .ch { transition: none; }
  .btn:hover, .card:hover, .step:hover, .caddon:hover, .paddon:hover { transform: none; }
  .orb { animation: none; }
  .btn::after { display: none; }
}

/* ---- phones ----
   One breakpoint for the whole system. Everything small lives here. */
/* ---- admin panel (lib/admin-views.mjs) ---- */
.admin-nav { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.admin-nav a { display: inline-flex; align-items: center; font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0.02em; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; text-decoration: none; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.admin-nav a:hover { color: var(--text); border-color: var(--line-2); text-decoration: none; }
.admin-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); border-color: var(--accent); }
.admin-nav a b { margin-left: 8px; font-size: 11px; color: var(--warn); }
.admin-search { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-search input[type="search"] { flex: 1 1 240px; min-width: 0; font: 15px system-ui, sans-serif; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 14px; }
.admin-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.18); }
.admin-search .btn { margin: 0; }
.admin-filters { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-filters .chip { text-decoration: none; }
.admin-filters .chip:hover { border-color: var(--line-2); color: var(--text); }
.admin-sort { margin-left: auto; font-size: 12.5px; color: var(--text-faint); }
.admin-sort a { color: var(--text-dim); margin-left: 6px; }
.admin-sort a[aria-current="true"] { color: var(--text); text-decoration: underline; }
.admin-hint { margin-top: 10px; font-size: 13px; color: var(--text-faint); }
.admin .stats div small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
table.admin th { text-align: left; padding: 8px 16px; font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.admin tr:first-child td { border-top: 0; }
table.admin td code { font-size: 11.5px; color: var(--text-faint); }
table.admin tr.is-suspended td { color: var(--text-faint); }
table.admin .inline { display: inline; }
table.admin .btn { padding: 8px 12px; font-size: 12.5px; }
.admin-grid { margin-top: 0; }
.admin-facts { margin-top: 24px; }
.admin-facts dt { width: 170px; }
.admin-facts dd { overflow-wrap: anywhere; }
.admin-avatar { width: 44px; height: 44px; border-radius: 50%; vertical-align: middle; margin-right: 10px; object-fit: cover; }
.admin-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; background: var(--surface-2); }
/* A report: the words someone revealed, each message its own pane, as text. */
.report-msgs { margin-top: 14px; display: grid; gap: 10px; }
.report-msg { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.report-msg .meta { font-size: 12px; margin-bottom: 4px; }
.report-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-meta { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dim); }
.report-text { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--line-2); color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.review-form { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.review-form input[type="text"] { min-width: min(360px, 80vw); margin: 0; }
.admin-pager { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.admin-suspend { position: relative; margin: 8px 8px 0 0; }
.admin-suspend summary { list-style: none; cursor: pointer; }
.admin-suspend summary::-webkit-details-marker { display: none; }
.admin-suspend .form { position: absolute; right: 0; z-index: 5; margin-top: 8px; width: min(420px, 90vw); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); padding: 16px; }
.admin-suspend .form label { margin-top: 0; }
.admin-suspend .form .help { margin-top: 10px; font-size: 13px; color: var(--text-faint); }
.admin-suspend .form .btn { margin-top: 14px; }
.review-actions .inline { display: inline; }

@media (max-width: 560px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .header-bar { padding-top: 10px; }
  header { padding: 8px 8px 8px 12px; }
  section[id] { scroll-margin-top: 80px; }
  nav a { margin-left: 0; padding: 7px 9px; font-size: 13px; }
  nav .nav-more { display: none; }
  nav .account { margin-left: 4px; padding: 6px 10px; }
  .lang-btn { margin-left: 2px; padding: 6px 8px; }
  .lang-code { display: none; }
  .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-panel { padding: 16px; border-radius: 20px; }
  .brand .logo { width: 26px; height: 26px; margin-right: 8px; }
  .brand { font-size: 16px; }
  .hero { padding: 48px 0 16px; }
  section { padding: 80px 0 0; }
  .cta { margin-top: 72px; padding: 40px 20px; }
  footer { margin-top: 72px; }
  .hero-shot { margin-top: 44px; }
  /* The glow behind the hero shot reaches 6% past the frame; on a phone that
     is wider than the gutter and the page grew by a few pixels. The glow is
     transparent out there anyway, so it stops at the gutter. */
  .hero-shot::before { left: -16px; right: -16px; }
  .shot { border-radius: 12px; }
  .phone-row .phone { border-radius: 18px; }
  .phone-row .device + .device { margin-left: 12px; }
  .hero-code { display: flex; flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .hero-code .snippet { font-size: 13px; margin: 0 0 12px; }
  .copy-btn { padding: 12px; font-size: 13px; }
  .live { padding: 18px; }
  .readout .row { display: block; padding: 8px 0 4px; }
  .readout dt { width: auto; margin-bottom: 6px; }
  .addon { padding: 14px; }
  .addon .icon { width: 32px; height: 32px; }
  .addon-hero { display: block; }
  .addon-hero .icon.big { margin: 0 0 14px; }
  .portal-head { display: block; }
  .stats div { min-width: calc(50% - 10px); }
  .facts dt { width: 100%; margin-bottom: 4px; }
  .review-actions .reject .form { position: static; width: auto; margin-top: 8px; }
  .admin-suspend .form { position: static; width: auto; }
  .admin-facts dt { width: 100%; margin-bottom: 4px; }
  .admin-sort { margin-left: 0; width: 100%; }
  .intro-text { font-size: 26px; padding: 0 8px; }
  .intro-pane { padding: 36px 20px 32px; border-radius: 26px; }
  /* The big orb bleeds off the right edge on purpose. Its container clips
     at the screen edge (the wrap's gutter undone), so the bleed never makes
     the page wider than the phone. Room above so the orb is not cut flat. */
  .orbs { overflow: hidden; top: -120px; left: min(-16px, calc(-1 * env(safe-area-inset-left, 0px))); right: min(-16px, calc(-1 * env(safe-area-inset-right, 0px))); }
  .orb.a { width: 130px; height: 130px; right: -50px; top: 80px; }
  .orb.b { width: 64px; height: 64px; right: 6%; top: 680px; }
  .orb.c { display: none; }
  .device { padding: 6px; border-radius: 18px; }
  footer { padding-bottom: 90px; }
  .promo { padding: 20px; border-radius: 20px; }
}

/* ---- touch ---- */
@media (pointer: coarse) {
  .brand, footer a { display: inline-flex; padding: 10px 0; }
  nav a { padding: 10px 12px; }
  .copy-btn { min-height: 44px; }
  .btn { padding: 15px 24px; }
  .ex-use { padding: 12px 0; }
  .form input[type="text"], .form input[type="email"], .form input[type="url"], .form textarea { padding: 14px 12px; }
}