:root { --bg:#f8fafc; --border:#e2e8f0; --brand:#4f46e5; --brand-strong:#4338ca; --shadow:0 16px 48px rgba(30,41,59,.07); }
body.site { background:#fafbfe; }
[hidden] { display:none !important; }
.muted { color:var(--muted); }
.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; }
.btn-primary { background:var(--brand); box-shadow:0 4px 12px rgba(79,70,229,.16); }
.btn { border-radius:10px; }
.btn:disabled { opacity:.55; cursor:wait; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:3px solid #a5b4fc; outline-offset:3px; }
.brand { white-space:nowrap; font-size:1.1rem; letter-spacing:-.4px; }
.brand-badge { width:32px; height:32px; border-radius:9px; background:var(--brand); }
.nav { gap:16px; font-size:.88rem; white-space:nowrap; }
.nav .nav-studio, .nav a[aria-current="page"] { color:var(--brand); }
.nav-actions { gap:8px; font-size:.83rem; }
.nav-actions .btn { padding:9px 12px; }
.nav-actions.desktop-only { flex-wrap:wrap; justify-content:flex-end; max-width:230px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:.72rem; letter-spacing:.14em; font-weight:600; color:var(--brand); }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px #ede9fe; }
.studio-hero { padding:88px 0 74px; background:radial-gradient(ellipse at 85% 25%,#eef0ff,transparent 55%); }
.studio-hero .hero-grid { grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.studio-hero h1 { font-size:clamp(2.7rem,4.6vw,4.1rem); line-height:1.1; letter-spacing:-2px; margin:22px 0; }
.studio-hero p { font-size:1.03rem; line-height:1.8; max-width:520px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 16px; }
.hero-note { color:var(--muted); font-size:.81rem; }
.studio-preview { border:1px solid #dfe3f2; border-radius:20px; background:white; box-shadow:0 24px 65px rgba(67,56,202,.09); overflow:hidden; }
.preview-header { display:flex; align-items:center; gap:10px; padding:20px 24px; border-bottom:1px solid var(--border); }
.preview-mark { display:grid; place-items:center; background:#ede9fe; color:var(--brand); width:30px; height:30px; border-radius:9px; }
.preview-label { margin-left:auto; color:var(--muted); font-size:.72rem; }
.preview-tabs { display:flex; gap:14px; padding:16px 24px 0; font-size:.72rem; color:var(--muted); }
.preview-tabs span { padding:7px 0; white-space:nowrap; }
.preview-tabs .selected { color:var(--brand); border-bottom:2px solid var(--brand); }
.preview-body { padding:20px 24px; }
.preview-caption { font-size:.64rem; letter-spacing:.12em; color:var(--muted); font-weight:600; }
.studio-hero .preview-body p { font-size:.89rem; margin:10px 0 20px; }
.preview-input { padding:14px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
.preview-result { color:var(--brand); font-size:.76rem; padding-top:4px; }
.preview-footer { display:flex; justify-content:space-between; padding:16px 24px; color:var(--brand); border-top:1px solid var(--border); font-size:.85rem; background:#f8f9ff; }
.studio-tools { border-top:1px solid var(--border); background:white; }
.section-title h2 { margin:10px 0; font-size:clamp(1.7rem,2.5vw,2.2rem); letter-spacing:-.6px; }
.studio-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.studio-feature { display:block; border:1px solid var(--border); border-radius:16px; padding:26px; background:#fff; transition:transform .2s,border-color .2s; }
.studio-feature:hover { transform:translateY(-4px); border-color:#a5b4fc; }
.feature-icon { width:42px; height:42px; display:grid; place-items:center; background:#eef2ff; color:var(--brand); border-radius:12px; font-weight:600; font-size:1.3rem; }
.studio-feature h3 { font-size:1.1rem; margin:20px 0 8px; }
.studio-feature p { color:var(--muted); font-size:.91rem; }
.feature-link { display:block; color:var(--brand); font-size:.8rem; margin-top:22px; }
.adventure-callout { display:grid; grid-template-columns:1.25fr 1fr; gap:70px; padding:42px; border:1px solid #dddaf5; background:#f3f1ff; border-radius:20px; }
.adventure-callout h2 { font-family:'Fraunces',serif; font-size:2.1rem; line-height:1.25; margin:16px 0; }
.adventure-callout p { color:var(--muted); font-size:.95rem; }
.adventure-steps { list-style:none; padding:0; margin:8px 0; display:grid; gap:24px; align-content:center; }
.adventure-steps li { display:flex; gap:18px; }
.adventure-steps li>span { display:grid; place-items:center; background:white; color:var(--brand); border:1px solid #dddaf5; border-radius:12px; width:40px; height:40px; flex-shrink:0; font-size:.8rem; }
.adventure-steps p { margin:4px 0 0; font-size:.85rem; }
.collection-section { border-top:1px solid var(--border); background:white; }
.collection-search { display:grid; grid-template-columns:1fr 200px auto; gap:12px; margin:24px 0 40px; }
.collection-rails { display:grid; gap:36px; }
.rail-block .section-title { margin-bottom:12px; }
.rail-block h3 { margin:0; }
.rail-shell, .book-card { box-shadow:none; }
.book-card { border-color:var(--border); }
.platform-note { display:flex; justify-content:space-between; gap:16px; align-items:center; color:var(--muted); }
.site-footer { background:#f4f6fb; border-top:1px solid var(--border); }
.site-footer a { font-size:.85rem; overflow-wrap:anywhere; }
.footer-grid { grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:24px; }
.footer-bottom { margin-top:30px; padding-top:20px; border-top:1px solid var(--border); font-size:.8rem; color:var(--muted); }
.adventure-container { max-width:880px; }
.adventure-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:32px; }
.adventure-heading h1 { font-family:'Fraunces',serif; font-size:clamp(1.9rem,3.5vw,2.6rem); line-height:1.25; letter-spacing:-1px; margin:14px 0; }
.adventure-heading p { color:var(--muted); max-width:610px; margin:0; }
.safe-label { color:#166534; background:#ecfdf5; border:1px solid #bbf7d0; padding:6px 10px; border-radius:20px; white-space:nowrap; font-size:.72rem; margin-top:8px; }
.adventure-chat { background:white; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.adventure-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--border); }
.adventure-toolbar strong { display:block; }
.adventure-toolbar span { display:block; font-size:.79rem; color:var(--muted); margin-top:3px; }
.adventure-messages { padding:24px; display:flex; flex-direction:column; gap:20px; max-height:640px; overflow-y:auto; scroll-behavior:smooth; }
.chat-message { padding:18px 20px; border-radius:14px; max-width:92%; border:1px solid var(--border); }
.chat-message.assistant { background:#f8fafc; align-self:flex-start; }
.chat-message.user { background:#eef2ff; border-color:#d8defb; align-self:flex-end; }
.chat-author { display:block; font-size:.72rem; font-weight:600; color:var(--brand); }
.chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.94rem; line-height:1.8; margin:10px 0 0; }
.chat-question { font-weight:600; }
.adventure-picker, .adventure-composer { padding:24px; border-top:1px solid var(--border); }
.adventure-picker label, .adventure-composer>label { display:block; font-size:.86rem; font-weight:500; margin-bottom:8px; }
.adventure-picker .form { margin-top:22px; }
.adventure-search>div { display:flex; gap:10px; }
.adventure-search .input { flex:1; min-width:0; }
.adventure-pagination { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:16px; font-size:.8rem; }
.adventure-composer fieldset { margin:0 0 20px; padding:0; border:0; }
.adventure-composer legend { font-weight:600; font-size:.94rem; margin-bottom:14px; }
#adventure-choice-list { display:grid; gap:8px; }
.adventure-choice { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:.87rem; }
.adventure-choice:has(input:checked) { border-color:var(--brand); background:#eef2ff; }
.adventure-choice input { margin-top:5px; accent-color:var(--brand); }
.adventure-composer textarea { width:100%; resize:vertical; font-family:inherit; }
.composer-actions { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:12px; }
.composer-actions small { color:var(--muted); }
.adventure-status, .adventure-error { margin:0 24px 20px; padding:12px 16px; border-radius:10px; font-size:.85rem; }
.adventure-status { background:#eef2ff; color:var(--brand); }
.adventure-error { background:#fef2f2; color:#991b1b; }
.adventure-complete { padding:24px; background:#f0fdf4; border-top:1px solid #bbf7d0; }
.adventure-complete p { font-size:.9rem; }
.adventure-footnote { border-top:1px solid var(--border); padding:14px 24px; font-size:.71rem; color:var(--muted); text-align:center; }
@media(min-width:901px) and (max-width:1180px) {
  .nav { position:fixed; top:70px; right:16px; background:white; border-radius:16px; padding:16px; flex-direction:column; align-items:flex-start; box-shadow:var(--shadow); border:1px solid var(--border); transform:translateY(-16px); opacity:0; pointer-events:none; }
  body.nav-open .nav { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-actions.desktop-only { display:none; }
  .nav-actions.mobile-only { display:flex; }
  .nav-toggle { display:inline-flex; }
}
@media(max-width:900px) {
  .studio-hero .hero-grid { grid-template-columns:1fr; gap:36px; }
  .studio-hero { padding:48px 0; }
  .studio-hero p { max-width:none; }
  .studio-feature-grid { gap:12px; }
  .studio-feature { padding:20px; }
  .adventure-callout { gap:32px; padding:28px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
  .studio-feature-grid, .adventure-callout { grid-template-columns:1fr; }
  .collection-search { grid-template-columns:1fr; }
  .studio-hero h1 { letter-spacing:-1.2px; }
  .preview-tabs { gap:12px; padding-left:16px; padding-right:16px; }
  .preview-header, .preview-body, .preview-footer { padding-left:18px; padding-right:18px; }
  .adventure-heading { flex-direction:column; gap:12px; }
  .adventure-heading .safe-label { margin-top:0; }
  .adventure-toolbar, .adventure-picker, .adventure-composer, .adventure-messages { padding:16px; }
  .chat-message { max-width:100%; padding:14px; }
  .adventure-messages { max-height:520px; }
  .composer-actions { flex-wrap:wrap; }
  .composer-actions .btn { flex:1; }
  .adventure-toolbar .btn { font-size:.75rem; padding:8px; flex-shrink:0; }
  .platform-note { flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }