@font-face{font-family:Bricolage;src:url("/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Manrope;src:url("/fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Plex;src:url("/fonts/ibm-plex-mono.woff2") format("woff2");font-weight:400 600;font-display:swap}

:root{
  --ink:#14151a;--ink-dim:#5c5e56;--bg:#ffffff;--bg-alt:#f6f4ee;--line:#e6e3da;
  --accent:#6c4fb8;--accent-dark:#4a3480;--accent-bright:#9a7ce0;--accent-soft:#efe9fb;
  --surface:#ffffff;--surface-line:#e6e3da;--good:#2d6a4f;--bad:#9b3427;
  --shadow:0 20px 44px rgba(20,21,26,.08);
}
[data-theme="dark"]{
  --ink:#f3efe5;--ink-dim:#aaa99f;--bg:#0e0f0c;--bg-alt:#1c1f14;--line:#34372a;
  --accent:#9a7ce0;--accent-dark:#6c4fb8;--accent-bright:#c3b0f0;--accent-soft:#241d38;
  --surface:#181a12;--surface-line:#34372a;--good:#77b494;--bad:#ed8d7c;
  --shadow:0 20px 44px rgba(0,0,0,.45);
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:15px/1.6 Manrope,system-ui,sans-serif}

main.book-demo .back{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--surface-line);color:var(--ink-dim);font-size:12px;font-weight:700;text-decoration:none}
main.book-demo .back:hover{color:var(--accent)}
main.book-demo .eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 11px Plex,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
main.book-demo .eyebrow::before{content:"";width:16px;height:2px;background:var(--accent);border-radius:2px}
main.book-demo h1,main.book-demo h2,main.book-demo h3{font-family:Bricolage,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}
main.book-demo p{color:var(--ink-dim)}
main.book-demo .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;transition:transform .15s ease,background .15s ease}
main.book-demo .button:hover{background:var(--accent-dark);transform:translateY(-1px)}
main.book-demo .secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--surface-line);background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
main.book-demo .secondary-button:hover{border-color:var(--accent);color:var(--accent)}
main.book-demo .secondary-button:disabled{opacity:.4;cursor:not-allowed}

.reader-stage{border-radius:24px;border:1px solid var(--surface-line);background:var(--surface);box-shadow:var(--shadow)}
.book-reader:after{background:linear-gradient(color-mix(in srgb,var(--ink) 0%,transparent),color-mix(in srgb,var(--ink) 22%,transparent) 12%,color-mix(in srgb,var(--ink) 26%,transparent) 88%,transparent)}
.book-underlay{border:1px solid var(--accent-dark);background:linear-gradient(160deg,var(--accent-dark),var(--accent));color:#fff}
.book-underlay-left span{border-color:rgba(255,255,255,.4)}
.book-underlay-right{background:linear-gradient(160deg,var(--accent),var(--accent-bright))}
.book-underlay-right span{color:#fff;opacity:.85}
.book-underlay-right a{color:#fff}
.book-page{border:1px solid var(--surface-line);background:#fff}
.book-page figcaption{background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink-dim);border-radius:4px}
.reader-controls p{color:var(--ink-dim)}
.reader-controls i{background:var(--surface-line);border-radius:999px;overflow:hidden}
.reader-controls i b{background:linear-gradient(90deg,var(--accent-dark),var(--accent))}
.book-method{border-radius:24px;background:var(--bg-alt)}
.method-pair{border:1px solid var(--surface-line);border-radius:16px;overflow:hidden}
.method-pair article+article{border-left:1px solid var(--surface-line)}
.method-pair span{color:var(--accent);font:700 10px Plex,monospace;text-transform:uppercase}

@media(max-width:520px){.method-pair article+article{border-top:1px solid var(--surface-line);border-left:0}}
@media(prefers-reduced-motion:reduce){main.book-demo .button,main.book-demo .secondary-button{transition:none}}