/* Fonts are served from our own /fonts folder (SIL Open Font License, see fonts/LICENSE-*.txt):
   no third-party requests, so nothing about visitors leaks to a font CDN. */
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/rubik-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/rubik-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/rubik-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* Stand-ins for the web fonts while they load: a local system font stretched and shifted (size-adjust and the metric
   overrides, measured from the font files against Arial) so text takes the same room before and after the swap and the
   page does not move. The fonts are also preloaded in every page's <head>, so the swap is seldom seen at all. */
@font-face { font-family: "Rubik Fallback"; font-weight: 400 500; src: local("Arial"), local("Liberation Sans"), local("Arimo"); size-adjust: 105%; ascent-override: 89%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 103%; ascent-override: 91%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Pixelify Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 107%; ascent-override: 86%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; font-weight: 400 500; src: local("Consolas"); size-adjust: 109%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; }

/* Lantern-lit night garden: deep moss night, lantern amber for actions, azalea pink for the
   person's own words. One dark look on purpose (builds read best on a night sky). */
:root {
  --bg: #111814;
  --grid: rgba(200, 230, 210, .022);
  --grid-major: rgba(200, 230, 210, .04);
  --panel: #18211c;
  --panel-2: #212c26;
  --ink: #e8eee6;
  --ink-2: #9eaca2;
  --line: #2c3932;
  --edge: #3a4a41;
  --edge-shadow: transparent;
  --accent: #f3b23c;
  --accent-ink: #1f1503;
  --accent-soft: #3a2e17;
  --azalea: #ee9cc3;
  --azalea-soft: #3a2230;
  --teal: #8fd0bc;
  --teal-soft: #1b332d;
  --good: #86d39c;
  --good-soft: #183424;
  --warn: #f0c26a;
  --warn-soft: #382d16;
  --bad: #ff9086;
  --bad-soft: #3d1d1c;
  --sky: #1c2930;
  --ground: #4b7430;
  --code: #222d27;
  --focus: #f3b23c;
  --radius: 14px;
  --font: "Rubik", "Rubik Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Rubik", "Rubik Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Pixelify Sans", "Pixelify Fallback", "Rubik", "Rubik Fallback", system-ui, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  color: var(--ink); font: 16px/1.55 var(--font); overflow-wrap: break-word;
}
main { flex: 1; min-width: 0; }
img, svg, canvas { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font: 700 clamp(2rem, 6vw, 3.4rem)/1.05 var(--font-pixel); letter-spacing: 0; }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); font-weight: 600; }
h3 { font-size: 1.08rem; font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
code, kbd, .mono { font-family: var(--mono); font-size: .9em; background: var(--code); padding: .1em .4em; border-radius: 6px; }
kbd { border: 1px solid var(--line);  }
ul, ol { padding-left: 1.3em; }
hr { border: 0; border-top: 2px dashed var(--line); margin: 2rem 0; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 10px; z-index: 100; font-weight: 700; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
.section-tight { padding: 32px 0; }
.eyebrow { display: inline-block; font: 500 .9rem/1 var(--font); color: var(--accent); margin-bottom: .7rem; }
.eyebrow::before { content: none; }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }

/* ---------- header / footer ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 10px 18px; min-height: 64px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 700 1.3rem/1 var(--font-pixel); letter-spacing: 0; }
.logo:hover { color: var(--ink); }
.logo-mark-wrap { display: inline-flex; color: var(--ink); }
.main-nav { display: flex; gap: 4px 6px; flex-wrap: wrap; margin-left: 6px; flex: 1; min-width: 0; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 12px; font-size: .95rem; }
.main-nav a:hover, .main-nav a.is-active { background: var(--panel-2); color: var(--ink); }
.main-nav a.is-active { box-shadow: inset 0 -3px 0 var(--accent); }
.header-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.balance-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--teal-soft); color: var(--ink); border: 1px solid var(--line); font-weight: 600; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.balance-pill::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); border: 1px solid var(--line); transform: rotate(45deg); }
.balance-pill:hover { color: var(--ink); background: var(--accent-soft); }
.chip { display: inline-flex; align-items: center; font: 700 .72rem/1 var(--mono); letter-spacing: .06em; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--warn-soft); color: var(--warn); cursor: pointer; }
.chip-mock { }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; align-items: center; justify-content: center; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 20px; height: 3px; background: var(--ink); border-radius: 2px; position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -7px; } .menu-bars::after { top: 7px; }
.nav-extra { display: none; font: 600 .95rem var(--font); background: none; border: 0; color: var(--ink); text-align: left; padding: 12px; border-radius: 12px; cursor: pointer; }
.nav-extra:hover { background: var(--panel-2); }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; order: 3; }
  .header-end { order: 2; }
  .logo { flex: 1 1 auto; }
  .header-inner { flex-wrap: wrap; gap: 6px 10px; }
  .header-end .chip-mock, .header-end .logout-desktop { display: none; }
  .main-nav.open .nav-extra { display: block; }
  .main-nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; margin: 0 0 8px; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px; }
}

.site-footer { margin-top: 64px; background: var(--bg); border-top: 1px solid var(--line); padding: 28px 0 36px; }
.footer-inner { display: grid; gap: 12px; }
.disclaimer { font: 500 .78rem/1.45 var(--mono); margin: 0; padding: 10px 14px; border: 1px dashed var(--edge); border-radius: 10px; background: transparent; color: var(--ink-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--ink); font-weight: 600; }
.footer-small { margin: 0; color: var(--ink-2); font-size: .82rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 12px 22px; min-height: 48px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--accent); color: var(--accent-ink); font: 600 .98rem/1.1 var(--font); text-decoration: none; text-align: center;
  box-shadow: none; transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
.btn:hover { color: var(--accent-ink); transform: translateY(-1px); box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background: var(--panel); color: var(--ink); }
.btn-secondary:hover { color: var(--ink); background: var(--panel-2); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; border-width: 2px; }
.btn-ghost:hover { background: var(--panel-2); color: var(--ink); box-shadow: none; transform: none; }
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { color: #fff; }
.btn-small { padding: 7px 13px; min-height: 38px; font-size: .88rem; border-radius: 11px; border-width: 2px; box-shadow: none; }
.btn-small:hover { box-shadow: none; }
.btn-small:active { transform: translateY(1px); box-shadow: none; }
.btn-small.btn-ghost { box-shadow: none; }
.btn-block { width: 100%; }
.btn-toggle { background: var(--panel); color: var(--ink); }
.btn-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- cards, badges, notices ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: none; min-width: 0; }
.card-flat { box-shadow: none; border-width: 2px; }
.card > :last-child { margin-bottom: 0; }
.card-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 500 .76rem/1.3 var(--font); border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); vertical-align: middle; }
.badge-accent { background: var(--accent); color: var(--accent-ink); }
.badge-good { background: var(--good-soft); color: var(--good); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-teal { background: var(--teal-soft); color: var(--teal); }
.notice { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); margin: 0 0 16px; }
.notice-error { background: var(--bad-soft); color: var(--ink); border-color: var(--bad); }
.notice-warn { background: var(--warn-soft); border-color: var(--warn); }
.notice-good, .notice-success { background: var(--good-soft); border-color: var(--good); }
.notice-info { background: var(--teal-soft); border-color: var(--teal); }
.notice > :last-child { margin-bottom: 0; }
.toasts { position: fixed; right: 12px; bottom: 12px; z-index: 90; display: grid; gap: 8px; max-width: min(92vw, 380px); }
.toast { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: none; font-weight: 600; }
.toast-error { background: var(--bad-soft); } .toast-success { background: var(--good-soft); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field > label, .field > .label, legend { font-weight: 600; font-size: .95rem; }
.hint { color: var(--ink-2); font-size: .86rem; margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit;
}
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .7; }
textarea { min-height: 120px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
input[type=file] { max-width: 100%; }
input[type=range] { accent-color: var(--accent); }
fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.check > span { flex: 1; min-width: 0; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); }
.field-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.input-error { border-color: var(--bad); }
.error-text { color: var(--bad); font-weight: 700; font-size: .9rem; margin: 0; }
.age-cards { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .age-cards { grid-template-columns: 1fr; } }
.choice { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel); cursor: pointer; font-weight: 600; min-height: 52px; }
.choice:has(input:checked) { background: var(--accent-soft); box-shadow: none; }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice small { display: block; font-weight: 500; color: var(--ink-2); }

.auth-wrap { max-width: 520px; margin: 40px auto; }
.auth-card h1 { font-size: 2rem; }

/* ---------- single sign-on buttons (login, signup, account) ---------- */
.sso { margin-top: 20px; }
.sso-or { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--ink-2); font-size: .86rem; }
.sso-or::before, .sso-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sso-buttons { display: grid; gap: 10px; }
.btn-sso { justify-content: flex-start; gap: 12px; padding-left: 18px; }
.btn-sso .sso-icon { flex: none; }
.btn-sso span { flex: 1; text-align: center; padding-right: 30px; }
.sso-methods { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.sso-methods li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.sso-methods .sso-icon { flex: none; }
.sso-methods .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- landing ---------- */
.hero { padding: 48px 0 36px; }
.hero-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--accent-soft) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-cta { margin: 24px 0 14px; }
.hero-note { font-size: .9rem; color: var(--ink-2); }
.hero-art { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: none; }
.hero-art svg { display: block; width: 100%; height: auto; }
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { counter-increment: step; position: relative; padding-top: 34px; }
.step::before { content: counter(step); position: absolute; top: -18px; left: 20px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--line); font: 600 1.3rem var(--font-head); box-shadow: none; }
.step h3 { margin-top: .5rem; }
.feature { display: grid; gap: 6px; }
.feature .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); border: 1px solid var(--line); font-size: 1.3rem; }
.feature h3 { margin: 6px 0 0; }
.feature p { margin: 0; color: var(--ink-2); }
.split { display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.holo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.holo-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.holo-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); }
.holo-blue { background: #62c8ff; } .holo-red { background: #ff6a3d; } .holo-pink { background: #ff6fd0; }
.mock-ui { font: 600 .92rem/1.4 var(--mono); border: 1px solid var(--line); border-radius: 12px; background: #2b2b2b; color: #e8e8e8; padding: 14px; }
.mock-ui .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 6px; }
.mock-ui .row.hl { background: #3d6b1f; color: #fff; outline: 2px dashed #fff; }
.mock-ui .dim { color: #aaa; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 .86rem/1.3 var(--font); background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.yes { color: var(--good); font-weight: 600; } .no { color: var(--ink-2); }
.compare th:nth-child(3), .compare td:nth-child(3) { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); }
.pack-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pack-card { display: grid; gap: 6px; align-content: start; position: relative; }
.pack-card .credits { font: 600 2.4rem/1 var(--font-head); }
.pack-card .price { font: 600 1.3rem var(--font-head); }
.pack-card .badge { position: absolute; top: -14px; right: 14px; }
.pack-card.is-best { background: var(--accent-soft); }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 12px; padding: 0; }
.faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font: 600 1.4rem/1 var(--font-head); color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details > div { padding: 0 18px 14px; }
.cta-band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; text-align: center; }

/* ---------- dashboard ---------- */
.page-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; margin: 36px 0 24px; }
.page-head h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0; }
.balance-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; justify-content: space-between; }
.balance-card .big { font: 600 2.6rem/1 var(--font-head); }
/* as many columns as fit (3 on a desktop, 1 on a phone), each stretching so no empty third is left on the right */
.project-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.project-card { display: grid; gap: 12px; align-content: start; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.project-card h3 { margin: 0; overflow-wrap: anywhere; word-break: break-word; }   /* a long title wraps onto more lines, never cut off */
.thumb { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--sky); display: grid; place-items: center; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb svg { width: 56%; height: auto; color: var(--ink); opacity: .75; }
.thumb .thumb-3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb { background: radial-gradient(ellipse 70% 60% at 50% 70%, rgba(243, 178, 60, .1), transparent 70%), linear-gradient(180deg, #121c22, var(--sky)); }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--ink-2); font-size: .88rem; }
.empty-state { text-align: center; padding: 40px 18px; border: 1px dashed var(--edge); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 70%, transparent); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 -3px; position: relative; z-index: 1; }
.tab { padding: 10px 16px; border: 1px solid var(--line); border-bottom-color: transparent; border-radius: 14px 14px 0 0; background: var(--panel-2); font: 600 .95rem var(--font); color: var(--ink); cursor: pointer; min-height: 44px; }
.tab[aria-selected="true"] { background: var(--panel); border-bottom-color: var(--panel); }
.tab .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); margin-left: 6px; }
.tab .dot.warn { background: var(--accent); }
.btn:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.tabpanel { border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--panel); padding: 22px; min-width: 0; }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font-size: 1.1rem; color: var(--ink); }
.icon-btn:hover { background: var(--bad-soft); }
details.help { border: 1px dashed var(--edge); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; background: var(--panel-2); }
details.help summary { cursor: pointer; font-weight: 600; }
details.help ol, details.help ul { margin: 10px 0 0; }

.dl-group { margin-bottom: 22px; }
.dl-group h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 2px dashed var(--line); }
.file-row .name { font-weight: 600; }
.file-row .sub { color: var(--ink-2); font-size: .85rem; word-break: break-all; }
@media (max-width: 520px) { .file-row { grid-template-columns: minmax(0, 1fr); } }
.xyz-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-soft); margin: 10px 0 18px; }
.xyz { font: 600 clamp(1.4rem, 5vw, 2.3rem)/1 var(--mono); letter-spacing: .02em; user-select: all; overflow-wrap: anywhere; }
.checklist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.checklist li { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; background: var(--panel); }
.checklist li:has(input:checked) { background: var(--good-soft); }
.reminder { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 12px 16px; border: 3px solid var(--warn); border-radius: 14px; background: var(--warn-soft); margin-bottom: 16px; }
.steps-list details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--panel); }
.steps-list summary { padding: 10px 14px; cursor: pointer; font-weight: 600; }
.steps-list ol { margin: 0; padding: 0 16px 14px 36px; display: grid; gap: 8px; }
.issue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-top: 2px dashed var(--line); }
.issue:first-child { border-top: 0; }
.issue .badge { align-self: start; }
.issue .samples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mats { list-style: none; padding: 0; margin: 0; columns: 2 240px; column-gap: 28px; }
.mats li { display: flex; align-items: center; gap: 10px; padding: 5px 0; break-inside: avoid; }
.mats .sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.mats .n { margin-left: auto; font: 700 .88rem var(--mono); }
pre.script { background: var(--code); border: 1px solid var(--line); border-radius: 12px; padding: 14px; overflow: auto; max-height: 60vh; font: .85rem/1.5 var(--mono); white-space: pre; }


/* ---------- billing / account / prose ---------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.4rem; }
.prose .draft { display: inline-block; margin-bottom: 14px; }
.fake-banner { background: repeating-linear-gradient(45deg, var(--warn-soft), var(--warn-soft) 14px, var(--panel) 14px, var(--panel) 28px); border: 3px dashed var(--warn); border-radius: 14px; padding: 14px 18px; font-weight: 600; margin-bottom: 18px; }
.danger-zone { border-color: var(--bad); }
.ledger td.pos { color: var(--good); font-weight: 600; } .ledger td.neg { color: var(--bad); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.kv .sk { grid-column: 1 / -1; }
#banners:not(:empty) { margin-top: 20px; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  /* phone: label above value, so a long email is not squeezed into a narrow column */
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
}
.guide-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.guide-step .n { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 600 1.3rem var(--font-head); box-shadow: none; }
.callout { border-left: 8px solid var(--accent); background: var(--panel); border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 16px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } .btn { transition: none; } }
@media (max-width: 480px) {
  .section { padding: 40px 0; }
  .card { padding: 16px; }
  .tabpanel { padding: 14px; }
  .field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- no pop-in: header, gated pages, skeletons, 3D views ---------- */
/* Header: the static header in each HTML file already has the right shape; the links and the credits pill are swapped
   in by script, so they are held back (still taking their space) and faded in once drawn. */
.main-nav, .header-end { transition: opacity .18s ease; }
.js .site-header:not(.is-ready) .main-nav, .js .site-header:not(.is-ready) .header-end { opacity: 0; }
.header-end { min-height: 36px; }
.balance-pill { min-width: 104px; justify-content: center; font-variant-numeric: tabular-nums; }

/* A page that depends on who is signed in (login, sign-up, the private pages) holds its <main> back until the session
   is known: no sign-up form flashing at someone who is signed in. The footer and header stay; a spinner shows only
   after a moment (session.gate). Without scripts nothing is held back. */
main[data-gate] { position: relative; }
.js main[data-gate="wait"] { visibility: hidden; }
main[data-gate="open"] { animation: pw-fade .18s ease-out; }
.gate-spin { position: absolute; left: 0; right: 0; top: 120px; display: grid; place-items: center; visibility: visible; }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }

/* Skeletons: grey blocks with the size of what will load, so the page does not jump when the data arrives. */
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--panel) 0 40%, var(--panel-2) 50%, var(--panel) 60%); background-size: 300% 100%; animation: sk-shimmer 1.6s linear infinite; }
.sk-line { height: 1em; margin: .35em 0; }
.sk-card { min-height: 150px; border-radius: var(--radius); border: 1px solid var(--line); }
.sk-thumb { aspect-ratio: 16 / 9; border-radius: 12px; }
.pack-card.is-skeleton { min-height: 200px; }
.card.pack-card.is-skeleton { min-height: 236px; }
.project-card.is-skeleton { min-height: 340px; }
.sso-methods li.is-skeleton { min-height: 62px; border-color: transparent; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.is-fading-in { animation: pw-fade .2s ease-out; }

/* 3D views: a canvas stays see-through until its first frame is drawn, then fades in (js/showcase.js, js/viewer.js).
   The box was reserved (aspect ratio / fixed height) and shows a soft placeholder behind it in the meantime. */
.js canvas.live3d { opacity: 0; transition: opacity .22s ease; }
.js canvas.live3d[data-ready] { opacity: var(--live-opacity, 1); }
.thumb svg { transition: opacity .22s ease; }
.thumb.is-live svg { opacity: 0; }
.big, .balance-pill, .credits { font-variant-numeric: tabular-nums; }
.balance-card .big { min-width: 3ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* no fades, no shimmer: things simply appear */
  main[data-gate="open"], .is-fading-in { animation: none; }
  .sk { animation: none; }
  .js canvas.live3d { transition: none; }
}

/* the in-page confirmation dialog (ui.js confirmDialog: My builds, the owner dashboard) */
.pw-dialog { width: min(92vw, 520px); max-height: 90vh; overflow: auto; padding: 22px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
.pw-dialog::backdrop { background: rgba(6, 10, 8, .72); }
.pw-dialog h2 { font-size: 1.3rem; margin: 0 0 12px; }
.pw-dialog .field { margin-bottom: 12px; }
.pw-dlg-actions { justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pw-dialog .btn-danger, .pw-dialog .btn-danger:hover { color: #2a0b09; }