:root { color-scheme: dark; }
.navlink { color: rgb(203 213 225); }
.navlink:hover { color: white; }
.section-title { font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; }
.card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.card-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; }
.btn-primary { display: inline-block; background: #06b6d4; color: #0b1220; padding: .75rem 1rem; border-radius: .9rem; font-weight: 700; box-shadow: 0 10px 30px rgba(6,182,212,.35); transition: transform .15s ease, background .2s ease; }
.btn-primary:hover { transform: translateY(-2px); background: #22d3ee; }
.btn-ghost { display:inline-block; padding:.75rem 1rem; border-radius:.9rem; border:1px solid rgba(255,255,255,.15); color:#e2e8f0; }
.input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: .8rem; padding: .8rem 1rem; outline: none; color: #e2e8f0; }
.input:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.2); }
.terminal { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: rgba(2,6,23,.6); border: 1px solid rgba(255,255,255,.12); padding: 1rem; border-radius: .75rem; display: grid; gap: .5rem; }
.t-line { opacity: 0; transform: translateX(-20px); }
#bookModal.hidden { display: none; }
#bookModal { display: none; }
#bookModal.flex { display: flex; }

/* blinking cursor for transcript lines */
.t-line.typing::after { content: "▍"; margin-left: 6px; animation: blink 1s steps(1) infinite; opacity: 0.9; }
@keyframes blink { 50% { opacity: 0; } }


/* FAQ boxes */
#faqBoxes .faq-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem; overflow: hidden; }
#faqBoxes .faq-toggle { width: 100%; text-align: left; padding: 1rem 3rem 1rem 1.25rem; font-weight: 700; position: relative; }
#faqBoxes .faq-toggle .faq-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-weight: 800; }
#faqBoxes .faq-body { display: none; padding: 0 1.25rem 1rem; color: rgb(203 213 225); }
#faqBoxes .faq-box.open .faq-body { display: block; }
#faqBoxes .faq-box.open .faq-toggle .faq-icon { content: "–"; }
.btn-primary, [data-open-book]{ cursor: pointer; }