/* Promptwalla.in — shared styles for the home page (AI engine) and the book page.
   Dark "AI machine" theme: near-black surfaces, faint grid, cyan → violet accent glow, mono system labels.
   --saffron is kept as the name of the main accent so older selectors keep working. */
:root {
  --bg: #05070D;
  --surface: #0A0E18;
  --card: #0C1120;
  --fg: #E6EDF7;
  --muted: #8B97AD;
  --line: #1A2338;
  --band: #070A13;
  --band-2: #0D1322;
  --band-3: #1A2440;
  --on-band: #E6EDF7;
  --on-band-muted: #8B97AD;
  --accent: #22D3EE;
  --accent-2: #A78BFA;
  --grad: linear-gradient(100deg, #22D3EE 0%, #818CF8 55%, #C084FC 100%);
  --glow: 0 0 0 1px rgba(34,211,238,.35), 0 0 28px rgba(34,211,238,.25);
  --saffron: var(--accent);
  --saffron-ink: #03121A;
  --ph: #C4B5FD;
  --field: #070B15;
  --field-line: #1F2B47;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; position: relative; min-height: 100vh; }
/* faint machine grid + glow behind everything */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(129,140,248,.18), transparent 60%),
    radial-gradient(760px 480px at 0% 10%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px) 0 0 / 44px 44px; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.eyebrow { font-family: var(--font-mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: var(--font-mono); }
.ph { color: var(--ph); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulse 1.8s ease-out infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } }

/* ---------- buttons ---------- */
.buy, .btn { display: inline-flex; align-items: center; gap: .6em; font: inherit; font-weight: 700; text-decoration: none; padding: .85em 1.5em; border-radius: 12px; font-size: 1rem; cursor: pointer; border: 0; transition: transform .15s ease, box-shadow .2s ease, background .15s ease, color .15s ease, filter .15s ease; }
.buy { background: var(--grad); color: var(--saffron-ink); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 30px rgba(56,189,248,.28); }
.buy:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 38px rgba(129,140,248,.45); }
.buy:active { transform: translateY(1px); }
.buy svg, .btn svg { width: 1.1em; height: 1.1em; flex: none; }
.buy.small { padding: .5em 1.05em; font-size: .88rem; }
.btn.light { background: var(--accent); color: var(--saffron-ink); box-shadow: 0 8px 30px rgba(34,211,238,.25); }
.btn.light:hover { filter: brightness(1.1); }
.btn.ghost { background: rgba(255,255,255,.02); color: var(--on-band); box-shadow: inset 0 0 0 1px var(--band-3); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.btn.dark { background: var(--fg); color: var(--bg); }
.btn.dark:hover { opacity: .9; }
.btn.outline { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn.outline:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }

/* ---------- header + menu ---------- */
header.site { position: sticky; top: 0; z-index: 20; background: rgba(5,7,13,.72); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
header.site .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; text-decoration: none; color: var(--fg); flex: none; }
.logo b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .mark { width: 32px; height: 26px; background: var(--band-2); border: 1px solid rgba(34,211,238,.45); box-shadow: 0 0 16px rgba(34,211,238,.25); border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; }
nav.menu { margin-left: auto; }
nav.menu .menu-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
nav.menu .menu-list > li > a, .drop-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font: inherit; font-size: .9rem; font-weight: 500; color: var(--muted); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
nav.menu .menu-list > li > a:hover, .drop-btn:hover, .drop-btn[aria-expanded="true"] { color: var(--fg); background: rgba(255,255,255,.04); }
nav.menu .free-link { color: var(--fg); font-weight: 600; border: 1px solid rgba(34,211,238,.4); margin-left: 8px; }
nav.menu .free-link:hover { box-shadow: var(--glow); }
nav.menu .badge { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; background: var(--accent); color: var(--saffron-ink); padding: 1px 6px; border-radius: 4px; margin-left: 2px; }
.menu-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; place-items: center; }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .close { display: none; }
.menu-toggle[aria-expanded="true"] .open { display: none; }
.menu-toggle[aria-expanded="true"] .close { display: block; }
@media (max-width: 860px) {
  .menu-toggle { display: grid; }
  nav.menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px rgba(0,0,0,.5); display: none; margin: 0; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; }
  nav.menu.open { display: block; }
  nav.menu .menu-list { flex-direction: column; align-items: stretch; padding: 10px max(18px, env(safe-area-inset-left, 0px)) 18px; gap: 2px; }
  nav.menu .menu-list > li > a { width: 100%; padding: 12px; font-size: 1rem; }
  nav.menu .free-link { margin: 8px 0 0; }
  header.site .wrap { gap: 12px; }
  .menu-toggle { margin-left: 0; }
  .logo { margin-right: auto; }
}

/* ---------- section scaffolding ---------- */
section.block { padding-block: 88px; border-top: 1px solid var(--line); }
section.block.tint { background: rgba(10,14,24,.6); }
.head { display: grid; gap: 12px; max-width: 46em; margin-bottom: 38px; }
.head p { color: var(--muted); font-size: 1.05rem; }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 30px; margin-bottom: 30px; }
.head-row .head { margin-bottom: 0; }

/* ---------- engine intro ---------- */
.engine-head { display: grid; gap: 18px; max-width: 900px; padding: 36px 0 30px; scroll-margin-top: 90px; }
.engine-head .sys { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); border: 1px solid var(--line); background: rgba(10,14,24,.7); border-radius: 999px; padding: 6px 14px; }
.engine-head h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); font-weight: 700; line-height: 1.02; }
.engine-head h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.engine-head .lede { font-size: 1.1rem; color: var(--muted); max-width: 40em; }
.spec { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--fg); }
.spec li { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(12,17,32,.8); border-radius: 8px; padding: 5px 10px; }
.spec b { color: var(--accent); font-weight: 700; letter-spacing: .06em; }
@media (max-width: 900px) { .engine-head { padding: 22px 0 20px; } }

/* ---------- capabilities ---------- */
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mode { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 22px; background: linear-gradient(180deg, rgba(14,20,38,.9), rgba(9,13,24,.9)); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.mode:hover { border-color: rgba(34,211,238,.45); box-shadow: 0 0 30px rgba(34,211,238,.12); transform: translateY(-2px); }
.mode svg { width: 30px; height: 30px; color: var(--accent); }
.mode-id { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.mode h3 { font-size: 1.25rem; font-weight: 700; }
.mode p { font-size: .9rem; color: var(--muted); }
@media (max-width: 940px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .modes { grid-template-columns: 1fr; } }

/* ---------- presets ---------- */
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sample { background: rgba(12,17,32,.85); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; grid-template-rows: auto auto 1fr auto; transition: border-color .2s ease; }
.sample:hover { border-color: rgba(167,139,250,.5); }
.sample .num { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.sample h3 { font-size: 1.1rem; font-weight: 700; }
.sample p { font-size: .92rem; line-height: 1.65; color: #C3CCDB; }
.copy-btn { justify-self: start; font: inherit; font-size: .82rem; font-weight: 600; background: transparent; color: var(--fg); border: 1px solid var(--band-3); border-radius: 8px; padding: .4em 1em; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) { .samples { grid-template-columns: 1fr; } }
.sample-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.test-btn { font: inherit; font-size: .82rem; font-weight: 700; background: var(--grad); color: var(--saffron-ink); border: 0; border-radius: 8px; padding: .45em 1.05em; cursor: pointer; }
.test-btn:hover { filter: brightness(1.1); box-shadow: 0 0 20px rgba(34,211,238,.3); }

/* ---------- engine console (prompt tester) ---------- */
.ask-top { padding: 0 0 48px; }
.ask-top .tester { margin-top: 0; scroll-margin-top: 80px; }
.tester { position: relative; margin-top: 34px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: linear-gradient(180deg, rgba(13,19,34,.95), rgba(7,10,19,.95)); color: var(--on-band); border: 1px solid rgba(34,211,238,.22); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(129,140,248,.08), 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(34,211,238,.08); scroll-margin-top: 90px; }
.tester::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grad); opacity: .8; }
.tester-in { padding: 32px; display: grid; gap: 18px; align-content: start; }
.tester-head { display: grid; gap: 8px; }
.tester-head h2, .tester-head h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; }
.tester-head p { color: var(--on-band-muted); font-size: .95rem; }
.tester-warn { color: #FBBF24; font-size: .84rem; }
#tester-form { display: grid; gap: 10px; }
#tester-form textarea { width: 100%; resize: vertical; min-height: 170px; font: inherit; font-size: .95rem; line-height: 1.6; color: var(--fg); background: var(--field); border: 1px solid var(--field-line); border-radius: 12px; padding: 14px 16px; caret-color: var(--accent); }
#tester-form textarea::placeholder { color: #5D6880; opacity: 1; }
#tester-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.tester-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tester-count { font-family: var(--font-mono); font-size: .76rem; color: var(--on-band-muted); }
#tester-run[disabled] { opacity: .75; cursor: progress; transform: none; }
.tester-fine { font-size: .78rem; color: var(--on-band-muted); }
.tester-out { padding: 32px 32px 32px 0; display: grid; grid-template-rows: auto auto auto; align-content: start; color: var(--fg); }
.tester-out .bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #0B1120; border: 1px solid var(--field-line); border-radius: 12px 12px 0 0; font-size: .78rem; color: var(--muted); }
.tester-out .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--band-3); }
.tester-out .bar i:first-child { background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,.7); }
.tester-out .bar span { margin-left: 8px; font-family: var(--font-mono); }
.copy-btn.light { margin-left: auto; font-size: .74rem; padding: .25em .85em; }
/* fixed-size output window: long answers scroll inside it */
.tester-answer { background: var(--field); border: 1px solid var(--field-line); border-top: 0; border-radius: 0 0 12px 12px; padding: 22px 24px; height: 440px; overflow-y: auto; font-family: var(--font-body); font-size: .95rem; line-height: 1.65; display: grid; gap: 10px; align-content: start; overflow-wrap: anywhere; color: #D7DEEA; scrollbar-color: var(--band-3) transparent; }
.tester-answer h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 6px 0 0; color: var(--fg); }
.tester-answer strong, .tester-answer b { color: var(--fg); }
.tester-answer ul, .tester-answer ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.tester-answer code { font-family: var(--font-mono); font-size: .9em; background: #111A2E; color: #A5F3FC; padding: 1px 5px; border-radius: 4px; }
.tester-answer hr { border: 0; border-top: 1px dashed var(--field-line); width: 100%; margin: 4px 0; }
.tester-empty { color: var(--muted); }
.tester-empty .mono { color: var(--accent); font-size: .85rem; }
.tw-cursor { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--accent); box-shadow: 0 0 10px rgba(34,211,238,.7); animation: pw-blink 1s steps(2, start) infinite; }
.tester-error { color: #F87171; }
.dots { display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pw-blink 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; background: #818CF8; } .dots i:nth-child(3) { animation-delay: .3s; background: #C084FC; }
@keyframes pw-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 900px) { .ask-top { padding-bottom: 30px; } .tester { grid-template-columns: 1fr; } .tester-in { padding: 24px 18px; } .tester-out { padding: 0 18px 24px; } .tester-answer { height: 380px; } }

/* ---------- pipeline steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; padding: 0; margin: 0; }
.steps li { list-style: none; display: grid; gap: 8px; align-content: start; counter-increment: s; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(12,17,32,.7); position: relative; }
.steps li::before { content: "0" counter(s) " →"; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.steps h3 { font-size: 1.15rem; font-weight: 700; }
.steps p { font-size: .92rem; color: var(--muted); }
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .steps, .steps.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps, .steps.three { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq { max-width: 820px; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: rgba(12,17,32,.7); padding: 0 18px; }
.faq details[open] { border-color: rgba(34,211,238,.3); }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; padding: 16px 30px 16px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); font-size: .95rem; }

/* ---------- CTA band ---------- */
.cta-band { border-top: 1px solid var(--line); background: radial-gradient(600px 220px at 20% 50%, rgba(34,211,238,.12), transparent 70%), radial-gradient(600px 220px at 85% 50%, rgba(192,132,252,.12), transparent 70%); color: var(--on-band); }
.cta-band .wrap { padding-block: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.cta-band p { color: var(--on-band-muted); margin-top: 6px; }
.cta-band .acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
footer.site { background: rgba(5,7,13,.9); border-top: 1px solid var(--line); color: var(--on-band-muted); font-size: .9rem; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-block: 52px 32px; }
footer.site .logo { color: var(--on-band); }
footer.site .brand { display: grid; gap: 14px; align-content: start; max-width: 28em; }
footer.site h4 { margin: 0 0 12px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-band); }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--accent); }
footer.site .legal { border-top: 1px solid var(--line); padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .8rem; }
footer.site .legal .mono { letter-spacing: .1em; }
footer.site .legal b { color: #34D399; }
@media (max-width: 700px) { footer.site .cols { grid-template-columns: 1fr 1fr; } footer.site .brand { grid-column: 1 / -1; } }

/* ---------- book page ---------- */
.seal { position: absolute; top: -14px; right: -12px; background: var(--grad); color: var(--saffron-ink); width: 88px; height: 88px; border-radius: 50%; display: grid; place-content: center; text-align: center; font-weight: 700; font-size: .7rem; line-height: 1.15; transform: rotate(10deg); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.seal b { font-family: var(--font-display); font-size: 1.45rem; display: block; }
.price { display: grid; line-height: 1.1; }
.price strong { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; }
.price small { font-size: .8rem; color: var(--on-band-muted); }

/* ---------- book page (continued) ---------- */
.hero { background: var(--band); color: var(--on-band); overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; right: -180px; bottom: -260px; width: 620px; height: 620px; border-radius: 50%; background: repeating-radial-gradient(circle, var(--band-2) 0 26px, transparent 26px 52px); opacity: .9; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-block: 64px 72px; }
.hero .copy { min-width: 0; display: grid; gap: 22px; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); font-weight: 700; letter-spacing: -.01em; }
.hero h1 em { font-style: normal; color: var(--saffron); }
.hero .lede { font-size: 1.12rem; color: var(--on-band-muted); max-width: 34em; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.free-link { color: var(--saffron); font-weight: 600; font-size: .95rem; text-underline-offset: 4px; justify-self: start; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--on-band-muted); padding: 0; margin: 0; list-style: none; }
.trust li { display: flex; align-items: center; gap: 6px; }
.trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); }
.book { justify-self: center; position: relative; max-width: 360px; width: 100%; }
.book img { display: block; width: 100%; height: auto; border-radius: 4px 10px 10px 4px; box-shadow: -10px 0 0 -4px #0A0618 inset, 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); transform: rotate(-3deg); transition: transform .4s ease; }
.book:hover img { transform: rotate(0deg) scale(1.02); }
.book .seal { width: 92px; height: 92px; right: -10px; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 40px 56px; } .book { max-width: 280px; order: -1; } }
.figures { border-bottom: 1px solid var(--line); }
.figures .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 26px; gap: 12px; }
.fig { display: grid; gap: 2px; }
.fig b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fig span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 620px) { .figures .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }
.index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--fg); }
.part { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 14px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.part:nth-child(odd) { border-right: 1px solid var(--line); }
.part:nth-child(even) { padding-left: 22px; }
.range { font-family: var(--font-mono); font-size: .76rem; color: var(--ph); font-weight: 700; padding-top: 4px; font-variant-numeric: tabular-nums; }
.part h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 4px; }
.part p { font-size: .88rem; color: var(--muted); }
@media (max-width: 760px) { .index { grid-template-columns: 1fr; } .part:nth-child(odd) { border-right: 0; } .part:nth-child(even) { padding-left: 0; } }
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pages figure { margin: 0; display: grid; gap: 10px; }
.pages img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.pages figcaption { font-size: .86rem; color: var(--muted); }
@media (max-width: 760px) { .pages { grid-template-columns: 1fr; max-width: 420px; } }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.who div { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.who h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.who p { font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .who { grid-template-columns: 1fr; } }
.offer { background: var(--band-2); color: var(--on-band); }
.offer .wrap { padding-block: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.offer h2 { color: var(--on-band); }
.offer .includes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.offer .includes li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--on-band-muted); }
.offer .includes li::before { content: "✓"; color: var(--saffron); font-weight: 700; }
.ticket { background: var(--band); border: 1px dashed var(--band-3); border-radius: 18px; padding: 32px; display: grid; gap: 16px; justify-items: start; }
.ticket .big { font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1; }
.ticket .note { font-size: .88rem; color: var(--on-band-muted); }
.payicons { display: flex; flex-wrap: wrap; gap: 8px; }
.payicons span { font-size: .74rem; font-weight: 600; letter-spacing: .04em; border: 1px solid var(--band-3); color: var(--on-band-muted); border-radius: 6px; padding: 3px 8px; }
@media (max-width: 820px) { .offer .wrap { grid-template-columns: 1fr; } }
.mobile-bar { display: none; }
@media (max-width: 620px) {
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; background: var(--band); color: var(--on-band); align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--band-2); }
  .mobile-bar b { font-family: var(--font-display); font-size: 1.4rem; }
  .mobile-bar small { display: block; font-size: .72rem; color: var(--on-band-muted); }
  .has-mobile-bar footer.site .legal { padding-bottom: 96px; }
}

/* ---------- studio under the output window: create image / document / video, open in other apps, bring results back ---------- */
.studio { margin-top: 14px; display: grid; gap: 12px; color: var(--on-band); }
.studio-row { display: grid; gap: 7px; }
.studio-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--on-band-muted); }
.studio-btns, .studio-bring-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--on-band); background: rgba(255,255,255,.03); border: 1px solid var(--band-3); border-radius: 9px; padding: .45em 1.05em; cursor: pointer; text-decoration: none; }
.studio-btn svg { width: 17px; height: 17px; }
.studio-btn:hover { border-color: var(--accent); color: var(--accent); }
.studio-btn:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.studio-btn[disabled] { opacity: .55; cursor: progress; }
.studio-btns [data-create] { background: rgba(34,211,238,.1); color: #A5F3FC; border-color: rgba(34,211,238,.5); }
.studio-btns [data-create]:hover { background: var(--accent); color: var(--saffron-ink); box-shadow: 0 0 20px rgba(34,211,238,.35); }
.studio-btn.ext::after { content: "↗"; font-size: .9em; opacity: .75; }
.studio-btn .app-ico { width: 20px; height: 20px; flex: none; margin-left: -.35em; }
.studio-opt { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--on-band-muted); cursor: pointer; }
.studio-opt input { width: 16px; height: 16px; accent-color: var(--saffron); margin: 0; }
.studio-own { border: 1px dashed var(--band-3); border-radius: 14px; padding: 4px 14px; }
.studio-own summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--on-band); padding: 8px 0; }
.studio-own summary:hover, .studio-own[open] summary { color: var(--accent); }
.studio-own-body { display: grid; gap: 14px; padding: 4px 0 12px; }
.studio-own-part { display: grid; gap: 8px; }
.studio-own .own-lines { color: var(--on-band); background: rgba(255,255,255,.06); border-radius: 10px; padding: 10px 12px; margin: 0; }
.studio-own .own-lines b { color: var(--accent); }
.own-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8rem; color: var(--on-band-muted); }
.own-item audio { height: 36px; max-width: 100%; }
.own-item img, .own-item video { width: 96px; height: 60px; object-fit: cover; border-radius: 8px; background: #03050A; }
.own-item video { width: 160px; height: 90px; }
.own-prompt { width: 100%; resize: vertical; font: inherit; font-size: .88rem; line-height: 1.5; color: var(--fg); background: var(--field); border: 1px solid var(--field-line); border-radius: 12px; padding: 10px 14px;  }
.own-prompt::placeholder { color: #5D6880; opacity: 1; }
.own-prompt:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.own-gen { padding: 12px; border-radius: 12px; background: rgba(34,211,238,.05); border: 1px solid rgba(34,211,238,.3); }
.own-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .8rem; color: var(--on-band-muted); }
.own-opts label { display: inline-flex; align-items: center; gap: 7px; }
.own-opts select { font: inherit; font-size: .82rem; color: var(--fg); background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; padding: 4px 8px;  }
.studio-btn.go { color: var(--saffron-ink); background: var(--grad); border-color: transparent; }
.studio-btn.go:hover { color: var(--saffron-ink); filter: brightness(1.1); }
.studio-btn.rec { color: #FFFFFF; background: #C2312B; border-color: #C2312B; }
.studio-btn.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; animation: recblink 1s steps(2) infinite; }
@keyframes recblink { 50% { opacity: .2; } }
.studio-note { font-size: .8rem; color: var(--on-band-muted); }
.studio-note.bad { color: #FBBF24; }
.studio-bring { display: grid; gap: 7px; padding-top: 12px; border-top: 1px dashed var(--band-3); }
.studio-drop { display: grid; gap: 8px; border-radius: 14px; }
.studio-drop.over { outline: 2px dashed var(--saffron); outline-offset: 4px; }
.studio-drop textarea { width: 100%; resize: vertical; font: inherit; font-size: .88rem; line-height: 1.5; color: var(--fg); background: var(--field); border: 1px solid var(--field-line); border-radius: 12px; padding: 10px 14px;  }
.studio-drop textarea::placeholder { color: #5D6880; opacity: 1; }
.studio-drop textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.studio-fine { font-size: .74rem; color: var(--on-band-muted); }
.studio-out { margin-top: 4px; color: var(--fg); }
.studio-out .bar { flex-wrap: wrap; }
.studio-out .bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.studio-dl { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.studio-btn.dl { font-size: .74rem; padding: .25em .85em; }

.studio-view { background: var(--field); color: #D7DEEA; border: 1px solid var(--field-line); border-top: 0; border-radius: 0 0 12px 12px; padding: 18px; max-height: 620px; overflow-y: auto; font-size: .9rem; line-height: 1.65; }
.studio-img, .studio-video { display: block; width: 100%; height: auto; border-radius: 10px; background: #03050A; }
.studio-pdf { width: 100%; height: 520px; border: 0; border-radius: 8px; }
.studio-doc { display: grid; gap: 8px; font-family: var(--font-body); }
.studio-doc h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--fg); }
.studio-doc h3 { font-size: 1.05rem; font-weight: 700; margin-top: 8px; color: #A5F3FC; }
.studio-doc h4 { font-size: .95rem; font-weight: 700; }
.studio-doc ul, .studio-doc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.studio-doc .ph { color: var(--ph); font-weight: 700; }
.studio-doc code { font-family: var(--font-mono); background: #111A2E; color: #A5F3FC; padding: 1px 5px; border-radius: 4px; }
.studio-doc hr { border: 0; border-top: 1px dashed var(--field-line); }
.studio-edits { margin: 10px 0 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.studio-edits b { color: var(--ph); }
.studio-vo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.studio-vo b { font-family: var(--font-mono); font-size: .78rem; color: var(--ph); margin-right: 6px; }
.studio-scenes { display: grid; gap: 12px; margin-bottom: 10px; }
.studio-scenes img { width: 100%; border-radius: 10px; display: block; }
.studio-scenes figcaption { font-size: .85rem; margin-top: 4px; }

/* ---------- four options under the prompt ---------- */
.gen { display: grid; gap: 10px; }
.gen-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gen-btn { display: flex; align-items: center; gap: 9px; font: inherit; font-size: .88rem; font-weight: 600; color: #CFFAFE; background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.35); border-radius: 11px; padding: .7em .9em; cursor: pointer; text-align: left; transition: background .15s ease, box-shadow .2s ease, color .15s ease, border-color .15s ease; }
.gen-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.gen-btn:hover { background: rgba(34,211,238,.16); border-color: var(--accent); box-shadow: 0 0 22px rgba(34,211,238,.22); color: #fff; }
.gen-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gen-btn[disabled] { opacity: .55; cursor: progress; }
.gen-btn#gen-copy { color: var(--fg); background: rgba(255,255,255,.03); border-color: var(--band-3); }
.gen-btn#gen-copy svg { color: var(--accent-2); }
.gen-btn#gen-copy:hover { border-color: var(--accent-2); box-shadow: 0 0 22px rgba(167,139,250,.2); }
.gen-btn.done { border-color: #34D399 !important; color: #A7F3D0 !important; }
@media (max-width: 380px) { .gen-btns { grid-template-columns: 1fr; } }

/* credit meter under the options */
.pw-meter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 10px 12px; border: 1px dashed var(--band-3); border-radius: 11px; font-size: .82rem; color: var(--on-band-muted); }
.pw-meter b { color: var(--fg); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; }
.pw-meter button { margin-left: auto; font: inherit; font-size: .78rem; font-weight: 700; color: var(--saffron-ink); background: var(--grad); border: 0; border-radius: 8px; padding: .4em .9em; cursor: pointer; }
.m-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,.7); flex: none; }
.m-dot.off { background: var(--band-3); box-shadow: none; }
.m-dot.warn { background: #FBBF24; box-shadow: 0 0 8px rgba(251,191,36,.6); }

/* typing sound toggle in the output bar */
.snd-btn { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 24px; border-radius: 7px; border: 1px solid var(--band-3); background: transparent; color: var(--accent); cursor: pointer; padding: 0; }
.snd-btn svg { width: 15px; height: 15px; }
.snd-btn .off { display: none; }
.snd-btn.muted { color: var(--muted); }
.snd-btn.muted .on { display: none; }
.snd-btn.muted .off { display: block; }
.snd-btn:hover { border-color: var(--accent); }
.snd-btn + .copy-btn.light { margin-left: 6px; }

/* reprompt window under the output it changes */
.refine { margin-top: 12px; display: grid; gap: 9px; padding: 14px; border: 1px solid rgba(167,139,250,.4); border-radius: 14px; background: linear-gradient(180deg, rgba(129,140,248,.08), rgba(7,11,21,.6)); box-shadow: 0 0 30px rgba(129,140,248,.08); }
.refine-head { display: grid; gap: 3px; }
.refine-head .studio-label b { color: var(--accent-2); font-weight: 700; }
.refine-tip { font-size: .8rem; color: var(--on-band-muted); }
.refine textarea { width: 100%; resize: vertical; min-height: 78px; font: inherit; font-size: .9rem; line-height: 1.55; color: var(--fg); background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; padding: 10px 12px; caret-color: var(--accent-2); }
.refine textarea::placeholder { color: #5D6880; opacity: 1; }
.refine textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(167,139,250,.18); }
.refine-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.refine-bar .go { margin-left: auto; }
.refine-files { display: flex; flex-wrap: wrap; gap: 8px; }
.refine-att { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--band-3); background: #000; }
.refine-att img, .refine-att video { width: 100%; height: 100%; object-fit: cover; display: block; }
.refine-att button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.75); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
#refine-note.bad { color: #FBBF24; }

/* ---------- account: header chip, login + plan modal, toast ---------- */
.acct { display: flex; align-items: center; gap: 6px; flex: none; }
.acct:empty { display: none; }
.acct-btn { font: inherit; font-size: .84rem; font-weight: 600; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: .45em .9em; cursor: pointer; white-space: nowrap; }
.acct-btn:hover { border-color: var(--accent); color: var(--accent); }
.acct-btn.primary { color: var(--saffron-ink); background: var(--grad); border-color: transparent; }
.acct-btn.primary:hover { color: var(--saffron-ink); filter: brightness(1.08); }
.acct-menu { position: relative; }
.acct-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .82rem; color: var(--muted); background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.35); border-radius: 999px; padding: .38em .85em; cursor: pointer; white-space: nowrap; }
.acct-chip b { color: var(--fg); font-family: var(--font-mono); font-size: .8rem; }
.acct-chip:hover { box-shadow: var(--glow); }
.acct-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(34,211,238,.8); }
.acct-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: grid; gap: 4px; padding: 12px; background: var(--card); border: 1px solid var(--band-3); border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.5); z-index: 30; }
.acct-pop[hidden] { display: none; }
.acct-pop p { margin: 0; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.acct-pop .acct-email { color: var(--fg); font-weight: 600; }
.acct-pop .acct-plan { margin-bottom: 6px; font-family: var(--font-mono); font-size: .72rem; }
.acct-pop button { font: inherit; font-size: .86rem; text-align: left; color: var(--fg); background: transparent; border: 0; border-top: 1px solid var(--line); padding: 8px 2px 4px; cursor: pointer; }
.acct-pop button:hover { color: var(--accent); }
@media (max-width: 1120px) and (min-width: 861px) { .acct-btn:not(.primary) { display: none; } nav.menu .menu-list > li > a { padding: 8px 9px; } }
@media (max-width: 460px) { .acct-btn:not(.primary) { display: none; } .acct-btn { padding: .42em .7em; font-size: .8rem; } .acct-chip { padding: .35em .7em; } }

.pw-modal { width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; padding: 26px; border: 1px solid rgba(34,211,238,.3); border-radius: 18px; background: linear-gradient(180deg, #0D1322, #070A13); color: var(--fg); box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(34,211,238,.1); }
.pw-modal::backdrop { background: rgba(2,4,9,.72); backdrop-filter: blur(4px); }
.pw-modal h2 { font-size: 1.45rem; margin: 4px 0 6px; }
.pw-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.pw-x:hover { color: var(--fg); border-color: var(--accent); }
.pw-sys { margin: 0; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--accent); }
.pw-sub { margin: 0 0 16px; font-size: .9rem; color: var(--muted); }
.pw-sub b { color: var(--fg); }
.pw-form { display: grid; gap: 12px; }
.pw-field { display: grid; gap: 5px; font-size: .8rem; color: var(--muted); }
.pw-field input { font: inherit; font-size: .95rem; color: var(--fg); background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; padding: 11px 12px; }
.pw-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.pw-form .buy { justify-content: center; }
.pw-form .buy[disabled] { opacity: .7; cursor: progress; }
.pw-msg { margin: 0; font-size: .84rem; color: #A7F3D0; }
.pw-msg.bad { color: #FCA5A5; }
.pw-alt { margin: 16px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.pw-alt button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pw-plan { display: grid; gap: 8px; padding: 18px; border: 1px solid rgba(167,139,250,.45); border-radius: 14px; background: radial-gradient(400px 160px at 100% 0%, rgba(129,140,248,.18), transparent 70%), rgba(12,17,32,.8); }
.pw-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pw-plan-name { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.pw-price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
.pw-price small { font-size: .9rem; color: var(--muted); font-weight: 500; }
.pw-plan-cr { margin: 0; font-size: .95rem; }
.pw-plan-cr b { color: var(--accent); }
.pw-plan-fine { margin: 0; font-size: .78rem; color: var(--muted); }
.pw-plan-fine b { color: var(--fg); }
.pw-uses { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .84rem; color: var(--muted); }
.pw-uses b { color: var(--fg); font-family: var(--font-mono); }
.pw-pay { justify-content: center; margin-top: 6px; }
.pw-after { display: grid; gap: 10px; margin-top: 14px; }
.pw-after > .studio-btn { justify-self: start; }
.pw-claim summary { cursor: pointer; font-size: .84rem; color: var(--muted); }
.pw-claim[open] summary { margin-bottom: 10px; color: var(--fg); }
.pw-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 11px 18px; border-radius: 12px; background: #0D1322; color: var(--fg); border: 1px solid rgba(34,211,238,.4); box-shadow: 0 16px 40px rgba(0,0,0,.6); font-size: .9rem; transition: opacity .35s ease, transform .35s ease; }
.pw-toast.out { opacity: 0; transform: translate(-50%, 10px); }