:root {
  --bg: #080a0f;
  --bg-2: #0d1018;
  --panel: rgba(17, 21, 31, 0.78);
  --panel-solid: #11151f;
  --panel-soft: #151a26;
  --text: #f6f7fb;
  --muted: #aab0bf;
  --dim: #767d8e;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --accent: #7c5cff;
  --accent-2: #2ad2ff;
  --accent-3: #b98cff;
  --good: #60d394;
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1220px;
  --shadow: 0 24px 80px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(124,92,255,.20), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(42,210,255,.12), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

::selection { background: rgba(124,92,255,.45); color: white; }

.site-shell { min-height: 100vh; overflow: clip; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(8,10,15,.72);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar { min-height: 74px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .12em; font-size: .92rem; }
.brand-mark {
  display:inline-block;
  flex:0 0 32px;
  width:32px;
  height:36px;
  background:url("/assets/images/branding/ruchmair-icon.png") center / contain no-repeat;
}
.nav-links { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.nav-links a { color: #c7cbd5; font-size: .93rem; transition: .2s ease; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-cta { padding: 10px 15px; border:1px solid var(--line-strong); border-radius: 11px; background: rgba(255,255,255,.04); }
.menu-button { display:none; margin-left:auto; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:white; }

.hero { padding: 92px 0 72px; position: relative; }
.hero-grid { display:grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items:center; }
.eyebrow { display:inline-flex; gap:9px; align-items:center; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:#cbd0dd; background:rgba(255,255,255,.035); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 16px var(--accent); }
h1 { font-size: clamp(3.15rem, 7vw, 6.65rem); line-height: .92; margin: 23px 0 26px; letter-spacing: -.065em; max-width: 940px; }
.gradient-text { background:linear-gradient(92deg,#fff 10%,#cac1ff 52%,#8fe7ff 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy { max-width: 650px; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.22rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; border-radius:12px; border:1px solid var(--line); font-weight:700; font-size:.92rem; transition:.2s ease; cursor:pointer; }
.btn:hover { transform: translateY(-1px); border-color:var(--line-strong); }
.btn-primary { background:linear-gradient(135deg,var(--accent),#5b46d8); box-shadow:0 12px 34px rgba(124,92,255,.25); border-color:rgba(255,255,255,.12); }
.btn-secondary { background:rgba(255,255,255,.04); }
.btn-ghost { background:transparent; }
.btn[aria-disabled="true"] { opacity:.52; pointer-events:none; }
.mini-note { margin-top:16px; color:var(--dim); font-size:.81rem; }

.hero-visual { position:relative; min-height:580px; }
.glow-orb { position:absolute; width:400px; height:400px; border-radius:50%; filter:blur(80px); background:rgba(124,92,255,.15); top:70px; right:5%; }
.visual-card { position:absolute; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#10131b; box-shadow:var(--shadow); }
.visual-card img { width:100%; height:100%; object-fit:cover; }
.visual-main { width:78%; height:390px; right:0; top:58px; transform:rotate(1.2deg); }
.visual-secondary { width:55%; height:270px; left:0; bottom:20px; transform:rotate(-3deg); }
.visual-badge { position:absolute; right:18px; bottom:0; padding:13px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(13,16,24,.88); backdrop-filter:blur(18px); box-shadow:var(--shadow); }
.visual-badge strong { display:block; font-size:1.05rem; }
.visual-badge span { color:var(--muted); font-size:.8rem; }

.section { padding: 88px 0; }
.section-sm { padding: 58px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:34px; }
.section-kicker { color:#a99cff; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:800; }
h2 { margin:8px 0 0; font-size:clamp(2.15rem,4vw,4rem); line-height:1; letter-spacing:-.045em; }
.section-head p { max-width:520px; color:var(--muted); margin:0; }

.product-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.product-card { grid-column:span 6; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); border-radius:var(--radius); overflow:hidden; position:relative; transition:.25s ease; }
.product-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.20); box-shadow:var(--shadow); }
.product-media { height:290px; position:relative; overflow:hidden; background:#10131b; }
.product-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .product-media img { transform:scale(1.025); }
.product-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(7,9,13,.78)); }
.product-status { position:absolute; z-index:2; top:16px; left:16px; padding:7px 10px; border-radius:999px; background:rgba(8,10,15,.72); backdrop-filter:blur(14px); border:1px solid var(--line); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; }
.product-body { padding:24px; }
.product-title-row { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.product-title { margin:0; font-size:1.55rem; letter-spacing:-.03em; }
.product-type { color:#9fa6b6; font-size:.8rem; }
.product-desc { color:var(--muted); margin:12px 0 19px; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; }
.tag { padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.045); border:1px solid var(--line); color:#c9ced9; font-size:.75rem; }

.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.feature { padding:22px; min-height:195px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.027); }
.feature-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(135deg,rgba(124,92,255,.20),rgba(42,210,255,.10)); border:1px solid rgba(124,92,255,.26); margin-bottom:28px; font-size:1.05rem; }
.feature h3 { margin:0 0 8px; font-size:1rem; }
.feature p { margin:0; color:var(--muted); font-size:.89rem; }

.story-section { border:1px solid var(--line); border-radius:28px; overflow:hidden; background:linear-gradient(135deg,rgba(124,92,255,.08),rgba(255,255,255,.02)); }
.story-grid { display:grid; grid-template-columns: .92fr 1.08fr; min-height:560px; }
.story-copy { padding:54px; align-self:center; }
.story-copy h2 { font-size:clamp(2.4rem,4.8vw,4.8rem); }
.story-copy p { color:var(--muted); max-width:540px; }
.flow { margin:32px 0; display:grid; gap:11px; }
.flow-step { display:flex; gap:14px; align-items:center; color:#d9dce5; }
.flow-num { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(124,92,255,.13); border:1px solid rgba(124,92,255,.28); color:#c8bdff; font-size:.75rem; font-weight:800; }
.story-image { min-height:500px; position:relative; overflow:hidden; background:#0c0e14; }
.story-image img { width:100%; height:100%; object-fit:cover; }
.story-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,14,20,.85),transparent 36%); }

.cta-panel { padding:54px; border-radius:28px; border:1px solid var(--line); background:
  radial-gradient(circle at 86% 30%, rgba(42,210,255,.15), transparent 24%),
  radial-gradient(circle at 18% 100%, rgba(124,92,255,.18), transparent 32%),
  var(--panel-solid); display:flex; justify-content:space-between; gap:34px; align-items:center; }
.cta-panel h2 { font-size:clamp(2rem,4vw,3.5rem); max-width:720px; }
.cta-panel p { color:var(--muted); max-width:600px; }

.page-hero { padding:76px 0 44px; }
.page-hero h1 { font-size:clamp(3rem,6vw,5.8rem); margin-bottom:20px; }
.page-hero p { max-width:760px; color:var(--muted); font-size:1.12rem; }
.breadcrumbs { color:var(--dim); font-size:.82rem; margin-bottom:20px; }
.breadcrumbs a:hover { color:white; }

.product-hero { padding:74px 0 36px; }
.product-hero-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:50px; align-items:center; }
.product-hero h1 { font-size:clamp(3.6rem,7vw,6.8rem); }
.product-hero .lead { color:var(--muted); font-size:1.13rem; max-width:620px; }
.product-meta { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 0; }
.product-shot { min-height:520px; border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:var(--shadow); background:#0f1219; }
.product-shot img { width:100%; height:100%; object-fit:cover; }

.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.gallery-item { grid-column:span 6; min-height:340px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#10131a; position:relative; }
.gallery-item.wide { grid-column:span 12; min-height:440px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.gallery-label { position:absolute; left:14px; bottom:14px; z-index:2; padding:8px 11px; border-radius:9px; background:rgba(8,10,15,.78); backdrop-filter:blur(12px); border:1px solid var(--line); font-size:.78rem; }

.docs-layout { display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.docs-nav { position:sticky; top:96px; max-height:calc(100vh - 116px); overflow-y:auto; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:16px; padding:14px; }
.docs-nav a { display:block; padding:9px 10px; border-radius:9px; color:var(--muted); font-size:.88rem; }
.docs-nav a:hover { background:rgba(255,255,255,.045); color:white; }
.docs-content { max-width:820px; }
.docs-content h2 { font-size:2rem; margin:45px 0 15px; }
.docs-content h2:first-child { margin-top:0; }
.docs-content h3 { margin-top:28px; }
.docs-content p, .docs-content li { color:var(--muted); }
.code-block { background:#0c0f15; border:1px solid var(--line); border-radius:13px; padding:18px; overflow:auto; color:#d9dce8; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.84rem; }
.notice { border:1px solid rgba(124,92,255,.25); background:rgba(124,92,255,.075); padding:17px 18px; border-radius:13px; color:#d6d0ff; }

.support-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.support-card { border:1px solid var(--line); border-radius:18px; padding:26px; background:rgba(255,255,255,.028); min-height:225px; }
.support-card h3 { margin:26px 0 9px; }
.support-card p { color:var(--muted); }
.support-card .btn { margin-top:8px; }

.site-footer { border-top:1px solid var(--line); margin-top:76px; padding:42px 0 30px; background:rgba(0,0,0,.12); }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,.7fr); gap:40px; }
.footer-brand p { color:var(--muted); max-width:390px; font-size:.9rem; }
.footer-col strong { font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; color:#c8ccd6; }
.footer-col a { display:block; color:var(--muted); font-size:.87rem; margin-top:11px; }
.footer-col a:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:34px; padding-top:20px; color:var(--dim); font-size:.8rem; }

.reveal { opacity:1; transform:none; transition:opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:none; }
@media (min-width:981px) and (prefers-reduced-motion:no-preference) {
  .js-reveals .reveal:not(.in) { opacity:0; transform:translateY(14px); }
}

@media (max-width: 980px) {
  .nav-links { display:none; position:absolute; top:74px; left:20px; right:20px; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(12,15,22,.97); flex-direction:column; align-items:stretch; gap:4px; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:10px 8px; }
  .menu-button { display:block; }
  .hero { padding-top:64px; }
  .hero-grid, .product-hero-grid, .story-grid { grid-template-columns:1fr; }
  .hero-visual { min-height:520px; }
  .story-image { order:-1; min-height:400px; }
  .story-image::after { background:linear-gradient(180deg,transparent 55%,rgba(12,14,20,.95)); }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .docs-layout { grid-template-columns:1fr; }
  .docs-nav { position:static; display:flex; max-height:none; overflow:auto; white-space:nowrap; }
  .support-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .hero { padding:50px 0 30px; }
  .hero-grid { gap:32px; }
  h1 { font-size:clamp(3rem,16vw,5rem); }
  .hero-visual { min-height:430px; }
  .visual-main { width:88%; height:285px; }
  .visual-secondary { width:68%; height:220px; }
  .section { padding:64px 0; }
  .section-head { align-items:start; flex-direction:column; gap:14px; }
  .product-card { grid-column:span 12; }
  .product-media { height:245px; }
  .feature-grid { grid-template-columns:1fr; }
  .story-copy, .cta-panel { padding:30px; }
  .cta-panel { align-items:flex-start; flex-direction:column; }
  .gallery-item, .gallery-item.wide { grid-column:span 12; min-height:290px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}

/* Documentation learning guide */
.docs-nav-label {
  display:block;
  padding:12px 10px 5px;
  color:#777f91;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.docs-nav-label:first-child { padding-top:4px; }
.docs-content { max-width:900px; }
.docs-content strong { color:#f2f3f8; }
.doc-intro-card {
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  background:linear-gradient(135deg,rgba(124,92,255,.085),rgba(42,210,255,.025));
}
.doc-intro-card h2 { margin-top:8px !important; }
.doc-intro-card > p { max-width:760px; }
.path-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:25px 0; }
.path-card {
  min-height:112px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(8,10,15,.34);
  transition:.2s ease;
}
.path-card:hover { transform:translateY(-2px); border-color:var(--line-strong); background:rgba(255,255,255,.04); }
.path-card span { display:block; color:#a99cff; font-size:.72rem; font-weight:800; letter-spacing:.09em; }
.path-card strong { display:block; margin-top:12px; font-size:.98rem; }
.path-card small { display:block; color:var(--muted); margin-top:2px; font-size:.75rem; }
.guide-step { padding:56px 0 8px; scroll-margin-top:90px; }
.guide-step-heading { display:flex; gap:17px; align-items:flex-start; margin-bottom:24px; }
.guide-step-heading h2 { margin:4px 0 0; font-size:clamp(1.9rem,3vw,2.65rem); line-height:1.08; }
.guide-step-number {
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(124,92,255,.3);
  background:linear-gradient(135deg,rgba(124,92,255,.17),rgba(42,210,255,.07));
  color:#c7bdff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
}
.guide-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:30px; align-items:start; }
.guide-copy h3 { margin:27px 0 8px; font-size:1.08rem; letter-spacing:-.015em; }
.guide-copy > h3:first-child { margin-top:0; }
.guide-copy p { margin:0 0 15px; }
.instruction-list { margin:17px 0 20px; padding-left:23px; }
.instruction-list li { padding-left:5px; margin:8px 0; }
.node-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:20px 0 24px; }
.node-type-grid > div { border:1px solid var(--line); border-radius:11px; padding:13px 14px; background:rgba(255,255,255,.025); }
.node-type-grid strong { display:block; font-size:.84rem; }
.node-type-grid span { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; line-height:1.45; }
.guide-tip { margin:20px 0 0; border-left:3px solid #7c5cff; padding:13px 15px; border-radius:0 10px 10px 0; background:rgba(124,92,255,.065); color:var(--muted); font-size:.89rem; }
.guide-details { margin-top:18px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.022); }
.guide-details summary { cursor:pointer; padding:12px 14px; color:#daddE6; font-weight:700; font-size:.86rem; }
.guide-details p { padding:0 14px 13px; margin:0; font-size:.86rem; }
.doc-media-frame {
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:17px;
  background:#0c0f16;
  position:sticky;
  top:96px;
}
.doc-media-frame img,
.doc-media-frame video { width:100%; aspect-ratio:16/10; object-fit:cover; background:#0a0d13; }
.doc-media-tall .doc-media-placeholder { min-height:390px; }
.doc-media-placeholder {
  min-height:300px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg,transparent 15%,rgba(8,10,15,.8)),
    radial-gradient(circle at 25% 20%,rgba(124,92,255,.20),transparent 34%),
    radial-gradient(circle at 80% 45%,rgba(42,210,255,.10),transparent 32%),
    #0d1119;
}
.doc-media-placeholder::before {
  content:"";
  width:46px;
  height:34px;
  margin-bottom:auto;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(42,210,255,.08));
}
.doc-media-placeholder span { color:#9388d7; font-size:.69rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.doc-media-placeholder strong { margin-top:7px; font-size:1.08rem; }
.doc-media-placeholder p { color:var(--muted); margin:7px 0 0; font-size:.82rem; }
.doc-media-frame figcaption { padding:12px 14px 14px; color:var(--dim); font-size:.76rem; line-height:1.45; border-top:1px solid var(--line); }
.docs-divider { display:flex; align-items:center; gap:15px; margin:75px 0 10px; color:#8b91a0; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.docs-divider::before,.docs-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.doc-topic { padding:48px 0 12px; scroll-margin-top:90px; }
.doc-topic h2 { margin:7px 0 13px; font-size:clamp(2.1rem,4vw,3.35rem); }
.topic-lead { max-width:760px; font-size:1.02rem; margin-bottom:26px; }
.docs-end-card { margin-top:65px; padding:28px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.027); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.docs-end-card h2 { margin:6px 0 8px; font-size:1.55rem; }
.docs-end-card p { margin:0; max-width:650px; }
.docs-end-card .btn { flex:0 0 auto; }

@media (max-width: 980px) {
  .docs-nav-label { display:none; }
  .guide-grid { grid-template-columns:1fr; }
  .doc-media-frame { position:static; }
  .path-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px) {
  .doc-intro-card { padding:22px; }
  .path-grid { grid-template-columns:1fr 1fr; }
  .guide-step { padding-top:46px; }
  .guide-step-heading { gap:12px; }
  .guide-step-number { width:42px; height:42px; border-radius:12px; }
  .node-type-grid { grid-template-columns:1fr; }
  .doc-media-placeholder { min-height:250px; padding:22px; }
  .docs-end-card { align-items:flex-start; flex-direction:column; }
}

/* Storyteller 2 -> Storyteller 3 migration */
.migration-section { padding-top:22px; }
.migration-panel {
  border:1px solid var(--line);
  border-radius:28px;
  padding:42px;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 12%,rgba(42,210,255,.09),transparent 27%),
    radial-gradient(circle at 6% 100%,rgba(124,92,255,.13),transparent 34%),
    rgba(255,255,255,.024);
}
.migration-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:34px; align-items:start; }
.migration-copy h2 { margin:9px 0 18px; font-size:clamp(2.2rem,4.4vw,4.25rem); }
.migration-copy p { color:var(--muted); max-width:700px; }
.migration-copy strong { color:#eef0f6; }
.migration-copy code,.migration-steps code { padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:#0c0f15; color:#dfe2eb; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.88em; }
.migration-lead { font-size:1.06rem; }
.migration-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:26px; }
.migration-file-note { color:var(--dim); font-size:.79rem; }
.migration-side { display:grid; gap:12px; }
.migration-card { border:1px solid var(--line); border-radius:17px; padding:21px; background:rgba(7,9,14,.38); }
.migration-card-label { display:block; margin-bottom:11px; color:#bdb4ff; font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.migration-card ul { margin:0; padding-left:19px; color:var(--muted); }
.migration-card li { margin:7px 0; }
.migration-card p { margin:0; color:var(--muted); }
.migration-card-warn { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.025); }
.migration-card-warn .migration-card-label { color:#d7d9e1; }
.migration-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:34px; }
.migration-steps > div { min-height:190px; padding:18px; border:1px solid var(--line); border-radius:14px; background:rgba(8,10,15,.34); }
.migration-steps > div > span { display:block; color:#9888ff; font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.migration-steps strong { display:block; margin-top:25px; color:#f1f2f6; font-size:.93rem; }
.migration-steps p { margin:7px 0 0; color:var(--muted); font-size:.82rem; }
.migration-note { display:flex; gap:20px; align-items:flex-start; margin-top:22px; padding:17px 18px; border-left:3px solid var(--accent); border-radius:0 11px 11px 0; background:rgba(124,92,255,.055); }
.migration-note strong { flex:0 0 240px; color:#eeeaff; }
.migration-note span { color:var(--muted); font-size:.88rem; }

@media (max-width:980px) {
  .migration-grid { grid-template-columns:1fr; }
  .migration-steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .migration-panel { padding:26px 21px; border-radius:22px; }
  .migration-steps { grid-template-columns:1fr; }
  .migration-steps > div { min-height:0; }
  .migration-note { flex-direction:column; gap:7px; }
  .migration-note strong { flex:auto; }
}

/* Story Viewer */
.story-viewer-site code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.9em; }
.viewer-intro { padding:76px 0 88px; }
.viewer-intro-grid { display:grid; grid-template-columns:1fr .88fr; gap:54px; align-items:center; min-height:620px; }
.viewer-intro-copy h1 { font-size:clamp(3.4rem,7vw,6.4rem); max-width:800px; }
.viewer-intro-copy > p { max-width:720px; color:var(--muted); font-size:1.1rem; }
.viewer-privacy { display:flex; gap:14px; max-width:700px; margin-top:30px; padding:17px 18px; border:1px solid rgba(96,211,148,.22); border-radius:15px; background:rgba(96,211,148,.055); }
.viewer-privacy-icon { flex:0 0 32px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(96,211,148,.12); color:var(--good); font-weight:900; }
.viewer-privacy strong, .viewer-privacy span { display:block; }
.viewer-privacy span { color:var(--muted); font-size:.86rem; margin-top:3px; }
.viewer-loader-card { border:1px solid var(--line); border-radius:26px; padding:18px; background:linear-gradient(155deg,rgba(124,92,255,.09),rgba(255,255,255,.025)); box-shadow:var(--shadow); }
.viewer-file-input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.viewer-dropzone { min-height:390px; padding:38px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; border:1px dashed rgba(255,255,255,.22); border-radius:20px; background:rgba(7,9,14,.46); cursor:pointer; transition:.2s ease; }
.viewer-dropzone:hover, .viewer-dropzone.dragging { border-color:rgba(124,92,255,.7); background:rgba(124,92,255,.09); transform:translateY(-2px); }
.viewer-dropzone.loading { opacity:.6; pointer-events:none; }
.viewer-drop-icon { width:64px; height:64px; margin-bottom:14px; display:grid; place-items:center; border-radius:18px; border:1px solid rgba(124,92,255,.28); background:rgba(124,92,255,.11); color:#c8bdff; font-size:2rem; }
.viewer-dropzone strong { font-size:1.15rem; }
.viewer-dropzone > span:not(.viewer-drop-icon) { color:var(--muted); }
.viewer-dropzone small { max-width:350px; color:var(--dim); margin-top:18px; }
.viewer-loader-meta { display:flex; flex-wrap:wrap; gap:8px; padding-top:13px; }
.viewer-loader-meta span { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--dim); font-size:.72rem; }
.viewer-error { margin-top:14px; padding:13px 15px; border:1px solid rgba(255,118,118,.25); border-radius:12px; background:rgba(255,96,96,.07); color:#ffb4b4; font-size:.88rem; }
.viewer-app { padding:34px 0 88px; min-height:80vh; }
.viewer-app-container { width:min(calc(100% - 40px),1420px); }
.viewer-topbar { position:sticky; top:74px; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 18px; border:1px solid var(--line); border-radius:17px; background:rgba(10,13,19,.9); backdrop-filter:blur(20px); box-shadow:0 14px 45px rgba(0,0,0,.2); }
.viewer-story-id { display:grid; }
.viewer-story-id strong { font-size:1.02rem; }
.viewer-story-id > span:last-child { color:var(--dim); font-size:.72rem; }
.viewer-story-kicker { color:#a99cff !important; font-size:.67rem !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.viewer-topbar-actions { display:flex; align-items:center; gap:10px; }
.viewer-language-label { color:var(--dim); font-size:.72rem; display:flex; align-items:center; gap:8px; }
.viewer-language { min-height:42px; max-width:220px; border:1px solid var(--line); border-radius:10px; padding:0 34px 0 11px; background:#11151f; color:var(--text); }
.viewer-tabs { display:flex; gap:7px; overflow:auto; margin:18px 0 24px; padding:6px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.024); }
.viewer-tabs button { white-space:nowrap; border:0; border-radius:10px; padding:10px 13px; background:transparent; color:var(--muted); cursor:pointer; }
.viewer-tabs button:hover { color:white; background:rgba(255,255,255,.035); }
.viewer-tabs button.active { color:white; background:rgba(124,92,255,.14); box-shadow:inset 0 0 0 1px rgba(124,92,255,.26); }
.viewer-tabs button span { margin-left:6px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--dim); font-size:.7rem; }
.viewer-panel { display:none; }
.viewer-panel.active { display:block; animation:viewerFade .22s ease; }
@keyframes viewerFade { from { opacity:.4; transform:translateY(4px); } to { opacity:1; transform:none; } }
.viewer-story-hero { display:grid; grid-template-columns:360px 1fr; min-height:490px; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:linear-gradient(135deg,rgba(124,92,255,.08),rgba(255,255,255,.02)); }
.viewer-cover { min-height:490px; background:#0d1018; overflow:hidden; }
.viewer-cover img { width:100%; height:100%; object-fit:cover; }
.viewer-cover-placeholder, .viewer-profile-placeholder, .viewer-environment-placeholder, .viewer-scene-placeholder { display:grid; place-items:center; background:radial-gradient(circle at 30% 20%,rgba(124,92,255,.16),transparent 36%),#0e1119; color:#5e6474; font-size:.72rem; font-weight:900; letter-spacing:.18em; }
.viewer-story-hero-copy { align-self:center; padding:48px; }
.viewer-story-hero-copy h2 { margin:10px 0 20px; font-size:clamp(2.7rem,5vw,5rem); }
.viewer-story-hero-copy > p { max-width:820px; color:var(--muted); }
.viewer-story-hero-copy .viewer-lead { color:#e4e6ed; font-size:1.1rem; }
.viewer-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.viewer-chip-row > span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:#cbd0db; font-size:.77rem; }
.viewer-chip-row.compact > span { padding:5px 8px; font-size:.7rem; }
.viewer-stat-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:30px; }
.viewer-stat-row > div { padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.14); }
.viewer-stat-row strong, .viewer-stat-row span { display:block; }
.viewer-stat-row strong { font-size:1.25rem; }
.viewer-stat-row span { color:var(--dim); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.viewer-info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
.viewer-info-grid.compact { margin:0; }
.viewer-info-card { padding:22px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.025); }
.viewer-info-card > span, .viewer-sub-label { color:#a99cff; font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.viewer-info-card h3 { margin:8px 0 8px; }
.viewer-info-card p { margin:0; color:var(--muted); white-space:pre-wrap; }
.viewer-info-card.compact { margin-top:12px; }
.viewer-section-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin:18px 0 25px; }
.viewer-section-heading h2 { font-size:clamp(2.2rem,4vw,3.8rem); }
.viewer-section-heading p { max-width:600px; margin:0; color:var(--muted); }
.viewer-scene-list { display:grid; gap:12px; }
.viewer-scene { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.023); overflow:hidden; }
.viewer-scene > summary { list-style:none; display:grid; grid-template-columns:170px 1fr auto; gap:20px; align-items:center; cursor:pointer; padding:12px; }
.viewer-scene > summary::-webkit-details-marker, .viewer-profile-card summary::-webkit-details-marker { display:none; }
.viewer-scene > summary img, .viewer-scene-placeholder { width:170px; height:110px; object-fit:cover; border-radius:12px; }
.viewer-scene > summary span:first-child { color:#a99cff; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.viewer-scene > summary h3 { margin:2px 0 4px; font-size:1.25rem; }
.viewer-scene > summary p { margin:0 0 10px; color:var(--muted); font-size:.86rem; max-width:800px; }
.viewer-scene > summary b { color:var(--dim); padding:10px; }
.viewer-scene[open] > summary { border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.viewer-scene-body { padding:20px; }
.viewer-scene-nodes { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.viewer-node-card { border:1px solid var(--line); border-radius:16px; padding:18px; background:#0e1118; overflow:hidden; }
.viewer-node-card.viewer-node-dialogue { border-left:3px solid rgba(124,92,255,.72); }
.viewer-node-card.viewer-node-action { border-left:3px solid rgba(42,210,255,.65); }
.viewer-node-card.viewer-node-route { border-left:3px solid rgba(185,140,255,.78); }
.viewer-node-card.compact { padding:15px; }
.viewer-node-head { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; }
.viewer-node-type { padding:5px 8px; border:1px solid var(--line); border-radius:8px; color:#c7cbd5; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }
.viewer-node-head strong, .viewer-node-head small { display:block; }
.viewer-node-head small { color:var(--dim); font-size:.7rem; }
.viewer-node-head time { color:var(--dim); font-size:.75rem; }
.viewer-node-text { margin:14px 0 0; white-space:pre-wrap; color:#e5e7ed; }
.viewer-associated { margin-top:12px; padding:11px 12px; border-left:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.025); }
.viewer-associated span { color:var(--dim); font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }
.viewer-associated p { margin:3px 0 0; color:var(--muted); }
.viewer-storyboard { width:100%; margin-top:14px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0b0d12; cursor:zoom-in; }
.viewer-storyboard img { width:100%; max-height:330px; object-fit:cover; }
.viewer-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }
.viewer-gallery-image { padding:0; height:100px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0c0f15; cursor:zoom-in; }
.viewer-gallery-image img { width:100%; height:100%; object-fit:cover; }
.viewer-audio { display:grid; grid-template-columns:80px 1fr auto; gap:9px; align-items:center; margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); }
.viewer-audio > span { color:var(--dim); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.viewer-audio audio { width:100%; height:34px; }
.viewer-audio small { color:var(--dim); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-route-options { display:grid; gap:7px; margin-top:14px; }
.viewer-route-option { display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:10px; background:rgba(124,92,255,.055); }
.viewer-route-option > span { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(124,92,255,.14); color:#c8bdff; font-size:.7rem; font-weight:800; }
.viewer-route-option small { color:var(--dim); }
.viewer-node-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.viewer-node-meta > span { color:var(--dim); font-size:.7rem; }
.viewer-node-meta strong { color:#cdd1da; font-weight:600; }
.viewer-profile-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.viewer-profile-card { display:grid; grid-template-columns:220px 1fr; overflow:hidden; min-height:330px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.025); }
.viewer-profile-image { width:100%; min-height:330px; padding:0; border:0; background:#0d1018; overflow:hidden; cursor:zoom-in; }
.viewer-profile-image img { width:100%; height:100%; object-fit:cover; }
.viewer-profile-copy { padding:24px; }
.viewer-profile-copy h3, .viewer-environment-copy h3 { margin:7px 0 9px; font-size:1.6rem; }
.viewer-profile-copy > p { color:var(--muted); }
.viewer-profile-copy details { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.viewer-profile-copy summary { display:flex; justify-content:space-between; cursor:pointer; color:#d9dce5; font-size:.83rem; }
.viewer-profile-details { padding-top:15px; }
.viewer-detail-list { display:grid; gap:0; margin:0; }
.viewer-detail-row { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.viewer-detail-row dt { color:var(--dim); font-size:.75rem; }
.viewer-detail-row dd { margin:0; color:#d7dae3; white-space:pre-wrap; }
.viewer-profile-details .viewer-info-card { margin-top:10px; padding:15px; }
.viewer-trait-groups { display:grid; gap:10px; margin-top:14px; }
.viewer-traits { padding:12px; border:1px solid var(--line); border-radius:12px; }
.viewer-traits > span { display:block; color:var(--dim); font-size:.7rem; margin-bottom:8px; }
.viewer-traits > div { display:grid; grid-template-columns:140px 1fr 38px; gap:8px; align-items:center; font-size:.75rem; }
.viewer-traits meter { width:100%; }
.viewer-traits small { color:var(--dim); text-align:right; }
.viewer-environment-list { display:grid; gap:16px; }
.viewer-environment-card { display:grid; grid-template-columns:minmax(300px,.75fr) 1.25fr; border:1px solid var(--line); border-radius:21px; overflow:hidden; background:rgba(255,255,255,.024); }
.viewer-environment-image { width:100%; min-height:520px; padding:0; border:0; background:#0d1018; overflow:hidden; cursor:zoom-in; }
.viewer-environment-image img { width:100%; height:100%; object-fit:cover; }
.viewer-environment-copy { padding:30px; }
.viewer-lead-small { color:var(--muted); font-size:1rem; }

.viewer-node-items { display:grid; gap:9px; margin-top:12px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.022); }
.viewer-item-reference-row { display:flex; flex-wrap:wrap; gap:7px; }
.viewer-item-reference-row > span { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:#cbd0db; font-size:.72rem; }
.viewer-item-reference-row b { margin:0 4px; color:#a99cff; }
.viewer-node-item-events { display:grid; gap:7px; }
.viewer-node-item-events article { padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.13); }
.viewer-node-item-events article > strong { font-size:.78rem; }
.viewer-node-item-events article p { margin:6px 0 0; color:var(--muted); font-size:.78rem; }
.viewer-item-list { display:grid; gap:16px; }
.viewer-item-card { display:grid; grid-template-columns:250px 1fr; overflow:hidden; border:1px solid var(--line); border-radius:21px; background:rgba(255,255,255,.024); }
.viewer-item-image { width:100%; min-height:320px; padding:0; border:0; background:#0d1018; overflow:hidden; cursor:zoom-in; }
.viewer-item-image img { width:100%; height:100%; object-fit:cover; }
.viewer-item-placeholder { display:grid; place-items:center; color:#5e6474; font-size:.72rem; font-weight:900; letter-spacing:.18em; cursor:default; }
.viewer-item-copy { padding:26px; }
.viewer-item-copy h3 { margin:7px 0 9px; font-size:1.65rem; }
.viewer-item-state-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.viewer-item-aliases { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.018); }
.viewer-item-aliases .viewer-chip-row { margin-top:8px; }
.viewer-item-history { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.viewer-item-history-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; }
.viewer-item-history-heading > strong { color:var(--dim); font-size:.74rem; font-weight:600; }
.viewer-item-history-entry { display:grid; grid-template-columns:34px 1fr; gap:10px; margin-top:9px; padding:10px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.12); }
.viewer-item-history-entry > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(124,92,255,.14); color:#c8bdff; font-size:.68rem; font-weight:800; }
.viewer-item-history-entry strong, .viewer-item-history-entry small { display:block; }
.viewer-item-history-entry small { margin-top:2px; color:var(--dim); font-size:.7rem; }
.viewer-item-history-entry .viewer-chip-row { margin-top:7px; }
.viewer-item-history-entry p { margin:7px 0 0; color:var(--muted); font-size:.8rem; }

.viewer-content-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.02); margin-bottom:15px; }
.viewer-content-tools input { flex:1; min-width:200px; min-height:42px; border:1px solid var(--line); border-radius:10px; background:#0d1018; color:white; padding:0 13px; outline:none; }
.viewer-content-tools input:focus { border-color:rgba(124,92,255,.58); }
.viewer-filter-row { display:flex; gap:5px; }
.viewer-filter-row button { border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); padding:8px 10px; cursor:pointer; }
.viewer-filter-row button.active { border-color:rgba(124,92,255,.28); color:white; background:rgba(124,92,255,.12); }
.viewer-content-list { display:grid; gap:10px; }
.viewer-content-item { display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:start; }
.viewer-content-scene { position:sticky; top:160px; padding:13px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:.78rem; background:rgba(255,255,255,.02); }
.viewer-empty { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:7px; padding:30px; border:1px dashed var(--line-strong); border-radius:18px; color:var(--muted); }
.viewer-empty strong { color:white; font-size:1.05rem; }
.viewer-muted { color:var(--muted); }
.viewer-lightbox { width:min(92vw,1200px); max-height:92vh; padding:0; border:1px solid var(--line-strong); border-radius:18px; background:#080a0f; box-shadow:var(--shadow); }
.viewer-lightbox::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }
.viewer-lightbox img { display:block; max-width:90vw; max-height:88vh; margin:auto; object-fit:contain; }
.viewer-lightbox button { position:absolute; z-index:2; right:12px; top:12px; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:rgba(8,10,15,.82); color:white; cursor:pointer; }

@media (max-width:1100px) {
  .viewer-intro-grid { grid-template-columns:1fr; min-height:auto; }
  .viewer-loader-card { max-width:780px; }
  .viewer-story-hero { grid-template-columns:300px 1fr; }
  .viewer-profile-grid { grid-template-columns:1fr; }
  .viewer-environment-card { grid-template-columns:340px 1fr; }
  .viewer-item-card { grid-template-columns:210px 1fr; }
}
@media (max-width:800px) {
  .viewer-intro { padding-top:48px; }
  .viewer-intro-grid { gap:30px; }
  .viewer-dropzone { min-height:300px; padding:24px; }
  .viewer-topbar { position:static; align-items:flex-start; flex-direction:column; }
  .viewer-topbar-actions { width:100%; flex-wrap:wrap; }
  .viewer-language-label { flex:1; }
  .viewer-language { flex:1; max-width:none; }
  .viewer-story-hero, .viewer-environment-card { grid-template-columns:1fr; }
  .viewer-cover { min-height:360px; max-height:480px; }
  .viewer-story-hero-copy { padding:28px; }
  .viewer-stat-row { grid-template-columns:repeat(2,1fr); }
  .viewer-item-card { grid-template-columns:1fr; }
  .viewer-item-image { min-height:280px; max-height:420px; }
  .viewer-item-state-grid { grid-template-columns:1fr; }
  .viewer-info-grid, .viewer-scene-nodes { grid-template-columns:1fr; }
  .viewer-section-heading { align-items:flex-start; flex-direction:column; }
  .viewer-scene > summary { grid-template-columns:120px 1fr auto; gap:13px; }
  .viewer-scene > summary img, .viewer-scene-placeholder { width:120px; height:90px; }
  .viewer-profile-card { grid-template-columns:160px 1fr; }
  .viewer-profile-image { min-height:300px; }
  .viewer-environment-image { min-height:330px; }
  .viewer-content-tools { align-items:stretch; flex-direction:column; }
  .viewer-filter-row { overflow:auto; }
  .viewer-content-item { grid-template-columns:1fr; }
  .viewer-content-scene { position:static; }
}
@media (max-width:560px) {
  .viewer-app-container { width:min(calc(100% - 24px),1420px); }
  .viewer-loader-card { padding:10px; }
  .viewer-dropzone { min-height:260px; }
  .viewer-story-hero-copy { padding:22px; }
  .viewer-story-hero-copy h2 { font-size:2.5rem; }
  .viewer-scene > summary { grid-template-columns:1fr auto; }
  .viewer-scene > summary img, .viewer-scene-placeholder { grid-column:1 / -1; width:100%; height:180px; }
  .viewer-profile-card { grid-template-columns:1fr; }
  .viewer-profile-image { min-height:360px; max-height:460px; }
  .viewer-detail-row { grid-template-columns:1fr; gap:4px; }
  .viewer-gallery { grid-template-columns:repeat(2,1fr); }
  .viewer-audio { grid-template-columns:1fr; }
  .viewer-route-option { grid-template-columns:26px 1fr; }
  .viewer-route-option small { grid-column:2; }
}

/* Story Viewer — scene browser and interactive narrative path */
.viewer-topbar-actions .btn-secondary { color:var(--text); }
.viewer-scene-browser { display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; align-items:start; }
.viewer-scene-sidebar { position:sticky; top:158px; display:grid; gap:8px; max-height:calc(100vh - 190px); overflow:auto; padding:9px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02); }
.viewer-scene-select { width:100%; display:grid; grid-template-columns:72px 1fr; gap:11px; align-items:center; padding:8px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--text); text-align:left; cursor:pointer; transition:.18s ease; }
.viewer-scene-select:hover { background:rgba(255,255,255,.035); border-color:var(--line); }
.viewer-scene-select.active { background:rgba(124,92,255,.12); border-color:rgba(124,92,255,.34); box-shadow:inset 3px 0 0 rgba(124,92,255,.8); }
.viewer-scene-select img, .viewer-scene-thumb-placeholder { width:72px; height:54px; object-fit:cover; border-radius:9px; }
.viewer-scene-thumb-placeholder { display:grid; place-items:center; background:#11151d; color:var(--dim); font-size:.55rem; font-weight:800; letter-spacing:.1em; }
.viewer-scene-select > span:last-child { min-width:0; display:grid; gap:2px; }
.viewer-scene-select small { color:#a99cff; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }
.viewer-scene-select strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.viewer-scene-select em { color:var(--dim); font-size:.68rem; font-style:normal; }
.viewer-scene-display { min-width:0; border:1px solid var(--line); border-radius:21px; padding:18px; background:rgba(255,255,255,.018); }
.viewer-scene-hero-image { width:100%; aspect-ratio:16/6; padding:0; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:#0d1018; cursor:zoom-in; }
.viewer-scene-hero-image img { width:100%; height:100%; object-fit:cover; }
.viewer-scene-title { padding:20px 4px 4px; }
.viewer-scene-title h3 { margin:5px 0 12px; font-size:clamp(2rem,4vw,3.5rem); }
.viewer-scene-info { margin-top:14px; }
.viewer-scene-story-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:28px 0 14px; padding-top:22px; border-top:1px solid var(--line); }
.viewer-scene-story-heading h4 { margin:4px 0 0; font-size:1.35rem; }
.viewer-scene-story-heading p { max-width:520px; margin:0; color:var(--muted); font-size:.82rem; }
.viewer-story-stream { display:grid; gap:0; }
.viewer-story-beat { display:grid; grid-template-columns:82px minmax(0,1fr); gap:14px; align-items:stretch; }
.viewer-story-beat + .viewer-story-beat { margin-top:8px; }
.viewer-story-time { position:relative; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; min-height:100%; padding:13px 0 7px; color:var(--dim); }
.viewer-story-time span { padding:4px 7px; border:1px solid var(--line); border-radius:8px; background:#0c0f15; font-size:.7rem; font-variant-numeric:tabular-nums; }
.viewer-story-time i { width:1px; min-height:24px; margin:6px 0; background:linear-gradient(to bottom,rgba(124,92,255,.65),rgba(255,255,255,.08)); }
.viewer-story-time small { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:999px; background:#0c0f15; color:#a9afbd; font-size:.6rem; }
.viewer-route-option { width:100%; border:1px solid var(--line); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.viewer-route-option:hover { border-color:rgba(124,92,255,.42); background:rgba(124,92,255,.1); }
.viewer-route-option.active { border-color:rgba(124,92,255,.62); background:rgba(124,92,255,.16); box-shadow:inset 3px 0 0 rgba(124,92,255,.82); }
.viewer-route-option.active small { color:#c7bdff; }
.viewer-path-explainer { display:flex; align-items:center; gap:14px; margin:-4px 0 14px; padding:13px 15px; border:1px solid rgba(124,92,255,.24); border-radius:13px; background:rgba(124,92,255,.055); }
.viewer-path-explainer strong { flex:0 0 auto; color:#c9c0ff; font-size:.78rem; }
.viewer-path-explainer span { color:var(--muted); font-size:.78rem; }
.viewer-content-list { display:grid; gap:20px; }
.viewer-content-scene-group { display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; align-items:start; }
.viewer-content-scene-header { position:sticky; top:160px; display:grid; gap:3px; padding:14px; border:1px solid var(--line); border-radius:13px; background:rgba(12,15,21,.9); backdrop-filter:blur(12px); }
.viewer-content-scene-header span { color:#a99cff; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.viewer-content-scene-header strong { font-size:.88rem; }
.viewer-content-scene-header small { color:var(--dim); font-size:.68rem; }
.viewer-content-item { display:grid; grid-template-columns:82px minmax(0,1fr); gap:14px; align-items:stretch; }
.viewer-environment-card { display:block; overflow:hidden; }
.viewer-environment-image { width:100%; aspect-ratio:16/6; min-height:0; max-height:430px; }
.viewer-environment-image img { width:100%; height:100%; object-fit:cover; }
.viewer-environment-copy { padding:28px 30px 32px; }
.viewer-environment-copy .viewer-detail-list { margin-top:18px; }

@media (max-width:900px) {
  .viewer-scene-browser { grid-template-columns:1fr; }
  .viewer-scene-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }
  .viewer-content-scene-group { grid-template-columns:1fr; }
  .viewer-content-scene-header { position:static; }
  .viewer-scene-story-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width:620px) {
  .viewer-scene-sidebar { grid-template-columns:1fr; }
  .viewer-scene-display { padding:12px; }
  .viewer-scene-hero-image, .viewer-environment-image { aspect-ratio:16/9; }
  .viewer-story-beat, .viewer-content-item { grid-template-columns:58px minmax(0,1fr); gap:8px; }
  .viewer-story-time span { font-size:.6rem; padding:3px 5px; }
  .viewer-path-explainer { align-items:flex-start; flex-direction:column; gap:5px; }
  .viewer-environment-copy { padding:22px; }
}

.story-viewer-site [hidden] { display:none !important; }


/* Ruchmair site theme toggle */
/* Keep browser auto-darkening off; data-theme controls the authored palette. */
html { color-scheme: only light; }
body, .site-header, .theme-toggle, .menu-button { transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.theme-toggle {
  flex:0 0 auto;
  min-width:44px;
  height:44px;
  display:inline-flex;
  place-items:center;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.theme-toggle [data-theme-label] { font-size:.76rem; font-weight:700; }
.theme-toggle, .menu-button, .btn { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.theme-toggle:focus-visible, .menu-button:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; }
.theme-toggle:hover { border-color:var(--line-strong); transform:translateY(-1px); }
.theme-toggle-icon { display:block; line-height:1; font-size:1.08rem; }
@media (max-width:980px) {
  .theme-toggle { margin-left:auto; }
  .menu-button { margin-left:0; }
}

/* Light mode */
html[data-theme="light"] {
  --bg:#f6f7fb;
  --bg-2:#eef1f6;
  --panel:rgba(255,255,255,.86);
  --panel-solid:#ffffff;
  --panel-soft:#f1f3f7;
  --text:#181b23;
  --muted:#606777;
  --dim:#7d8491;
  --line:rgba(19,24,34,.10);
  --line-strong:rgba(19,24,34,.18);
  --accent:#6e50e8;
  --accent-2:#159fc4;
  --accent-3:#8b63e8;
  --good:#258c5c;
  --shadow:0 24px 70px rgba(31,38,55,.13);
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% -10%,rgba(110,80,232,.12),transparent 34%),
    radial-gradient(circle at 90% 8%,rgba(21,159,196,.09),transparent 30%),
    var(--bg);
}
html[data-theme="light"] ::selection { background:rgba(110,80,232,.24); color:#171920; }
html[data-theme="light"] .site-header { background:rgba(248,249,252,.82); border-bottom-color:rgba(19,24,34,.08); }
html[data-theme="light"] .nav-links a { color:#555d6c; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color:var(--text); }
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .menu-button { background:rgba(255,255,255,.78); }
html[data-theme="light"] .menu-button { color:var(--text); }
html[data-theme="light"] .eyebrow { color:#555e6e; background:rgba(255,255,255,.64); }
html[data-theme="light"] .gradient-text {
  background:linear-gradient(92deg,#171a22 10%,#5e4fc2 56%,#117f9c 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
html[data-theme="light"] .btn-primary { color:#fff; }
html[data-theme="light"] .btn-secondary { background:rgba(255,255,255,.75); color:var(--text); }
html[data-theme="light"] .btn-ghost { color:var(--text); }
html[data-theme="light"] .visual-card,
html[data-theme="light"] .product-media,
html[data-theme="light"] .product-shot,
html[data-theme="light"] .gallery-item { background:#e9ecf2; }
html[data-theme="light"] .visual-badge { background:rgba(255,255,255,.90); }
html[data-theme="light"] .product-card,
html[data-theme="light"] .feature,
html[data-theme="light"] .support-card,
html[data-theme="light"] .docs-nav,
html[data-theme="light"] .docs-end-card,
html[data-theme="light"] .node-type-grid > div,
html[data-theme="light"] .guide-details { background:rgba(255,255,255,.64); }
html[data-theme="light"] .product-card:hover { border-color:rgba(19,24,34,.18); }
html[data-theme="light"] .product-status { background:rgba(255,255,255,.85); color:#333944; }
html[data-theme="light"] .product-media::after { background:linear-gradient(180deg,transparent 56%,rgba(34,40,53,.34)); }
html[data-theme="light"] .product-type { color:#737a88; }
html[data-theme="light"] .tag { background:rgba(19,24,34,.035); color:#555d6b; }
html[data-theme="light"] .flow-step { color:#353b47; }
html[data-theme="light"] .story-image { background:#e7eaf0; }
html[data-theme="light"] .story-image::after { background:linear-gradient(90deg,rgba(246,247,251,.78),transparent 38%); }
html[data-theme="light"] .cta-panel { background:
  radial-gradient(circle at 86% 30%,rgba(21,159,196,.11),transparent 24%),
  radial-gradient(circle at 18% 100%,rgba(110,80,232,.11),transparent 32%),
  #fff; }
html[data-theme="light"] .breadcrumbs a:hover,
html[data-theme="light"] .footer-col a:hover { color:var(--text); }
html[data-theme="light"] .code-block,
html[data-theme="light"] .migration-copy code,
html[data-theme="light"] .migration-steps code { background:#eef1f6; color:#353b47; }
html[data-theme="light"] .notice { color:#5f50a8; }
html[data-theme="light"] .docs-content strong,
html[data-theme="light"] .migration-copy strong,
html[data-theme="light"] .migration-steps strong { color:var(--text); }
html[data-theme="light"] .guide-details summary { color:#353b47; }
html[data-theme="light"] .doc-media-frame { background:#e7eaf0; }
html[data-theme="light"] .doc-media-frame img,
html[data-theme="light"] .doc-media-frame video { background:#e2e6ed; }
html[data-theme="light"] .doc-media-placeholder {
  background:
    linear-gradient(180deg,transparent 15%,rgba(246,247,251,.78)),
    radial-gradient(circle at 25% 20%,rgba(110,80,232,.14),transparent 34%),
    radial-gradient(circle at 80% 45%,rgba(21,159,196,.10),transparent 32%),
    #eef1f6;
}
html[data-theme="light"] .doc-media-placeholder::before { border-color:rgba(19,24,34,.14); }
html[data-theme="light"] .migration-panel { background:
  radial-gradient(circle at 92% 12%,rgba(21,159,196,.08),transparent 27%),
  radial-gradient(circle at 6% 100%,rgba(110,80,232,.10),transparent 34%),
  rgba(255,255,255,.62); }
html[data-theme="light"] .migration-card,
html[data-theme="light"] .migration-steps > div { background:rgba(255,255,255,.62); }
html[data-theme="light"] .migration-card-warn { background:rgba(19,24,34,.025); }
html[data-theme="light"] .migration-card-warn .migration-card-label { color:#555d6b; }
html[data-theme="light"] .migration-note strong { color:#5d4fb0; }
html[data-theme="light"] .site-footer { background:rgba(255,255,255,.38); }
html[data-theme="light"] .footer-col strong { color:#4d5461; }

/* Story Viewer light mode */
html[data-theme="light"] .viewer-loader-card,
html[data-theme="light"] .viewer-story-hero { background:linear-gradient(155deg,rgba(110,80,232,.07),rgba(255,255,255,.72)); }
html[data-theme="light"] .viewer-dropzone { border-color:rgba(19,24,34,.19); background:rgba(255,255,255,.66); }
html[data-theme="light"] .viewer-topbar { background:rgba(249,250,252,.91); box-shadow:0 14px 40px rgba(31,38,55,.10); }
html[data-theme="light"] .viewer-language,
html[data-theme="light"] .viewer-content-tools input { background:#fff; color:var(--text); }
html[data-theme="light"] .viewer-tabs,
html[data-theme="light"] .viewer-info-card,
html[data-theme="light"] .viewer-scene,
html[data-theme="light"] .viewer-profile-card,
html[data-theme="light"] .viewer-environment-card,
html[data-theme="light"] .viewer-node-items,
html[data-theme="light"] .viewer-item-card,
html[data-theme="light"] .viewer-item-aliases,
html[data-theme="light"] .viewer-content-tools,
html[data-theme="light"] .viewer-content-scene,
html[data-theme="light"] .viewer-scene-sidebar,
html[data-theme="light"] .viewer-scene-display { background:rgba(255,255,255,.68); }
html[data-theme="light"] .viewer-tabs button:hover { color:var(--text); background:rgba(19,24,34,.04); }
html[data-theme="light"] .viewer-tabs button.active,
html[data-theme="light"] .viewer-filter-row button.active { color:#5b49b7; }
html[data-theme="light"] .viewer-cover,
html[data-theme="light"] .viewer-profile-image,
html[data-theme="light"] .viewer-environment-image,
html[data-theme="light"] .viewer-item-image,
html[data-theme="light"] .viewer-scene-hero-image,
html[data-theme="light"] .viewer-storyboard,
html[data-theme="light"] .viewer-gallery-image { background:#e6e9ef; }
html[data-theme="light"] .viewer-cover-placeholder,
html[data-theme="light"] .viewer-profile-placeholder,
html[data-theme="light"] .viewer-environment-placeholder,
html[data-theme="light"] .viewer-scene-placeholder,
html[data-theme="light"] .viewer-scene-thumb-placeholder { background:radial-gradient(circle at 30% 20%,rgba(110,80,232,.12),transparent 36%),#e9ecf2; color:#8b919e; }
html[data-theme="light"] .viewer-story-hero-copy .viewer-lead,
html[data-theme="light"] .viewer-node-text,
html[data-theme="light"] .viewer-node-meta strong,
html[data-theme="light"] .viewer-profile-copy summary,
html[data-theme="light"] .viewer-detail-row dd,
html[data-theme="light"] .viewer-empty strong { color:var(--text); }
html[data-theme="light"] .viewer-chip-row > span,
html[data-theme="light"] .viewer-item-reference-row > span,
html[data-theme="light"] .viewer-node-type { color:#555d6b; background:rgba(19,24,34,.025); }
html[data-theme="light"] .viewer-stat-row > div,
html[data-theme="light"] .viewer-node-item-events article,
html[data-theme="light"] .viewer-item-history-entry { background:rgba(19,24,34,.025); }
html[data-theme="light"] .viewer-node-card { background:#fff; }
html[data-theme="light"] .viewer-associated { border-left-color:rgba(19,24,34,.15); background:rgba(19,24,34,.025); }
html[data-theme="light"] .viewer-detail-row { border-bottom-color:rgba(19,24,34,.07); }
html[data-theme="light"] .viewer-filter-row button.active { background:rgba(110,80,232,.10); }
html[data-theme="light"] .viewer-scene-select:hover { background:rgba(19,24,34,.035); }
html[data-theme="light"] .viewer-story-time span,
html[data-theme="light"] .viewer-story-time small { background:#fff; }
html[data-theme="light"] .viewer-content-scene-header { background:rgba(249,250,252,.92); }
html[data-theme="light"] .viewer-lightbox { background:#f6f7fb; }
html[data-theme="light"] .viewer-lightbox::backdrop { background:rgba(20,24,32,.68); }
html[data-theme="light"] .viewer-lightbox button { background:rgba(255,255,255,.90); color:var(--text); }

@media (max-width:980px) {
  html[data-theme="light"] .nav-links { background:rgba(249,250,252,.98); }
}

/* ========================================================================== 
   Story Viewer — synchronized Canvas + Timeline workspaces
   ========================================================================== */
.viewer-node-link-actions,
.viewer-workspace-jump-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.viewer-node-link-actions button,
.viewer-workspace-jump-row button,
.viewer-workspace-toolbar button{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);border-radius:10px;padding:8px 11px;font:inherit;font-size:.78rem;font-weight:750;cursor:pointer;transition:.18s ease}
.viewer-node-link-actions button:hover,
.viewer-workspace-jump-row button:hover,
.viewer-workspace-toolbar button:hover{border-color:rgba(133,112,255,.5);background:rgba(110,80,232,.12)}
.viewer-story-beat.selected .viewer-node-card{box-shadow:0 0 0 1px rgba(133,112,255,.72),0 16px 45px rgba(0,0,0,.16)}

.viewer-workspace-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.viewer-workspace-scene-label,.viewer-timeline-zoom-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.viewer-workspace-scene-label select{min-width:220px;max-width:340px;border:1px solid var(--line);background:#0d1017;color:var(--text);border-radius:9px;padding:8px 30px 8px 10px;font:inherit;text-transform:none;letter-spacing:normal;font-weight:650}
.viewer-workspace-toolbar-group{display:flex;align-items:center;gap:6px;margin-left:auto}
.viewer-workspace-toolbar-group span{min-width:50px;text-align:center;color:var(--muted);font-size:.78rem;font-weight:800}
.viewer-workspace-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.72rem}
.viewer-workspace-legend span{display:flex;align-items:center;gap:6px}
.viewer-workspace-legend i{display:block;width:9px;height:9px;border-radius:50%;background:#68707f}
.viewer-workspace-legend i.active,.viewer-workspace-legend i.dialogue{background:#7963ee}
.viewer-workspace-legend i.inactive{background:#434a57;opacity:.62}
.viewer-workspace-legend i.action{background:#1e9fc4}
.viewer-workspace-legend i.route{background:#dd8b30}

.viewer-canvas-layout,.viewer-timeline-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.viewer-canvas-viewport{position:relative;height:min(70vh,720px);min-height:500px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
  radial-gradient(circle at 50% 35%,rgba(93,73,181,.09),transparent 44%),
  #080b11;background-size:24px 24px,24px 24px,auto,auto;cursor:grab;touch-action:none;user-select:none}
.viewer-canvas-viewport.dragging{cursor:grabbing}
.viewer-canvas-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.viewer-canvas-connections{position:absolute;inset:0;overflow:visible;pointer-events:none}
.viewer-canvas-edge{fill:none;stroke-width:2.25;stroke-linecap:round;transition:opacity .18s ease,stroke .18s ease}
.viewer-canvas-edge.active{stroke:rgba(137,117,255,.78);opacity:.86}
.viewer-canvas-edge.inactive{stroke:rgba(112,120,137,.42);opacity:.34;stroke-dasharray:5 7}
.viewer-canvas-node{position:absolute;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding:12px 13px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:linear-gradient(150deg,rgba(27,31,43,.98),rgba(15,18,26,.98));color:var(--text);box-shadow:0 10px 24px rgba(0,0,0,.22);cursor:pointer;overflow:hidden;transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.viewer-canvas-node:hover{border-color:rgba(142,122,255,.66);transform:translateY(-1px)}
.viewer-canvas-node.inactive{opacity:.36;filter:saturate(.55)}
.viewer-canvas-node.inactive:hover{opacity:.68}
.viewer-canvas-node.selected{opacity:1;filter:none;border-color:#8f78ff;box-shadow:0 0 0 2px rgba(123,96,255,.18),0 18px 38px rgba(0,0,0,.30)}
.viewer-canvas-node-type{font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;color:#a7afbd;font-weight:850}
.viewer-canvas-node strong{display:block;max-width:100%;font-size:.9rem;line-height:1.18;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-canvas-node small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:.72rem;line-height:1.32}
.viewer-canvas-node time{margin-top:auto;color:#9f91ee;font-size:.67rem;font-weight:800}
.viewer-canvas-route-label{position:absolute;right:9px;top:9px;padding:3px 6px;border-radius:999px;background:rgba(221,139,48,.13);color:#e4a252;font-size:.59rem;font-weight:850}
.viewer-canvas-node-dialogue{border-left:3px solid #7963ee}
.viewer-canvas-node-action{border-left:3px solid #1e9fc4}
.viewer-canvas-node-route{border-left:3px solid #dd8b30}
.viewer-canvas-node-character{border-left:3px solid #a657ca}
.viewer-canvas-node-environment{border-left:3px solid #4e9a78}
.viewer-canvas-node-link{border-left:3px solid #7b8494}
.viewer-canvas-node-end{border-left:3px solid #b85555}

.viewer-workspace-inspector{position:sticky;top:104px;max-height:calc(100vh - 124px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(11,14,20,.94);box-shadow:0 18px 45px rgba(0,0,0,.18)}
.viewer-workspace-inspector-heading{display:grid;gap:3px;padding:4px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.viewer-workspace-inspector-heading strong{font-size:1rem}
.viewer-workspace-inspector-heading small{color:var(--muted)}
.viewer-workspace-inspector .viewer-node-card{border-radius:12px;box-shadow:none}
.viewer-workspace-inspector .viewer-node-link-actions{display:none}
.viewer-workspace-inspector-empty{min-height:180px;display:grid;place-content:center;text-align:center;gap:5px;color:var(--muted)}
.viewer-workspace-inspector-empty strong{color:var(--text)}

.viewer-timeline-zoom-label input{width:150px;accent-color:#7b63ee}
.viewer-timeline-zoom-label output{min-width:54px;text-transform:none;letter-spacing:normal;color:var(--text);font-size:.74rem}
.viewer-timeline-scroll{overflow:auto;max-height:min(68vh,700px);border:1px solid var(--line);border-radius:16px;background:#080b11}
.viewer-timeline-stage{min-width:calc(var(--timeline-track-width) + 180px)}
.viewer-timeline-ruler-row,.viewer-timeline-lane{display:grid;grid-template-columns:180px var(--timeline-track-width);min-width:max-content}
.viewer-timeline-ruler-row{position:sticky;top:0;z-index:7;background:rgba(9,12,18,.98);border-bottom:1px solid var(--line)}
.viewer-timeline-lane{min-height:86px;border-bottom:1px solid rgba(255,255,255,.055)}
.viewer-timeline-lane:last-child{border-bottom:0}
.viewer-timeline-lane-label{position:sticky;left:0;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 13px;border-right:1px solid var(--line);background:rgba(10,13,19,.98)}
.viewer-timeline-lane-label strong{font-size:.78rem}
.viewer-timeline-lane-label small{color:var(--muted);font-size:.65rem}
.viewer-timeline-lane-label.ruler{font-size:.7rem;color:var(--muted);font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.viewer-timeline-ruler,.viewer-timeline-track{position:relative}
.viewer-timeline-ruler{height:44px}
.viewer-timeline-ruler>span{position:absolute;top:0;height:44px;border-left:1px solid rgba(255,255,255,.10)}
.viewer-timeline-ruler>span i{display:block;height:10px}
.viewer-timeline-ruler>span b{display:block;transform:translateX(5px);font-size:.61rem;color:#8c95a4;font-weight:750}
.viewer-timeline-track{min-height:86px}
.viewer-timeline-gridline{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.045);pointer-events:none}
.viewer-timeline-block{position:absolute;top:14px;height:58px;border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:7px 9px;text-align:left;color:#f6f7fb;overflow:hidden;cursor:pointer;box-shadow:0 7px 18px rgba(0,0,0,.20);transition:.16s ease}
.viewer-timeline-block:hover{transform:translateY(-1px);filter:brightness(1.12)}
.viewer-timeline-block.selected{box-shadow:0 0 0 2px rgba(255,255,255,.48),0 8px 20px rgba(0,0,0,.25)}
.viewer-timeline-block>span{display:block;font-size:.54rem;text-transform:uppercase;letter-spacing:.1em;opacity:.75;font-weight:850}
.viewer-timeline-block>strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.71rem;line-height:1.25;margin-top:2px}
.viewer-timeline-block>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.57rem;opacity:.7;margin-top:3px}
.viewer-timeline-block-dialogue{background:linear-gradient(145deg,#4f3ab8,#342878)}
.viewer-timeline-block-action{background:linear-gradient(145deg,#147b98,#0c5267)}
.viewer-timeline-block-route{background:linear-gradient(145deg,#9f5f20,#674019)}

/* Story Viewer Canvas + Timeline light theme */
html[data-theme="light"] .viewer-workspace-toolbar,
html[data-theme="light"] .viewer-workspace-inspector{background:rgba(255,255,255,.72)}
html[data-theme="light"] .viewer-workspace-scene-label select{background:#fff;color:var(--text)}
html[data-theme="light"] .viewer-node-link-actions button,
html[data-theme="light"] .viewer-workspace-jump-row button,
html[data-theme="light"] .viewer-workspace-toolbar button{background:rgba(19,24,34,.025);color:var(--text)}
html[data-theme="light"] .viewer-canvas-viewport{background:
  linear-gradient(rgba(24,30,42,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(24,30,42,.045) 1px,transparent 1px),
  radial-gradient(circle at 50% 35%,rgba(110,80,232,.075),transparent 44%),
  #eef1f6;background-size:24px 24px,24px 24px,auto,auto}
html[data-theme="light"] .viewer-canvas-node{background:linear-gradient(150deg,#fff,#f5f6f9);color:var(--text);border-color:rgba(19,24,34,.12);box-shadow:0 9px 22px rgba(31,38,55,.10)}
html[data-theme="light"] .viewer-canvas-node-type{color:#707887}
html[data-theme="light"] .viewer-canvas-edge.active{stroke:rgba(92,69,205,.72)}
html[data-theme="light"] .viewer-canvas-edge.inactive{stroke:rgba(95,103,118,.38)}
html[data-theme="light"] .viewer-timeline-scroll{background:#eef1f6}
html[data-theme="light"] .viewer-timeline-ruler-row{background:rgba(249,250,252,.98)}
html[data-theme="light"] .viewer-timeline-lane{border-bottom-color:rgba(19,24,34,.07)}
html[data-theme="light"] .viewer-timeline-lane-label{background:rgba(249,250,252,.98)}
html[data-theme="light"] .viewer-timeline-ruler>span{border-left-color:rgba(19,24,34,.11)}
html[data-theme="light"] .viewer-timeline-gridline{border-left-color:rgba(19,24,34,.055)}

@media (max-width:1100px){
  .viewer-canvas-layout,.viewer-timeline-layout{grid-template-columns:1fr}
  .viewer-workspace-inspector{position:static;max-height:none}
}
@media (max-width:760px){
  .viewer-workspace-toolbar{align-items:stretch}
  .viewer-workspace-scene-label{width:100%;align-items:stretch;flex-direction:column;gap:5px}
  .viewer-workspace-scene-label select{width:100%;max-width:none}
  .viewer-workspace-toolbar-group{margin-left:0}
  .viewer-workspace-legend{width:100%}
  .viewer-canvas-viewport{height:60vh;min-height:430px}
  .viewer-timeline-ruler-row,.viewer-timeline-lane{grid-template-columns:130px var(--timeline-track-width)}
  .viewer-timeline-stage{min-width:calc(var(--timeline-track-width) + 130px)}
  .viewer-timeline-lane-label{padding:9px}
  .viewer-timeline-zoom-label{width:100%;justify-content:space-between}
  .viewer-timeline-zoom-label input{flex:1;min-width:90px}
}

/* Expanded product features and long documentation navigation. */
.authoring-feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.authoring-feature-grid .feature { display:flex; flex-direction:column; }
.authoring-feature-grid .feature > a { margin-top:auto; padding-top:12px; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.docs-content { min-width:0; }
.docs-content code { overflow-wrap:anywhere; }
.docs-content a:not(.btn):not(.path-card) { color:var(--accent-3); text-decoration:underline; text-underline-offset:3px; }
html[data-theme="light"] .docs-content a:not(.btn):not(.path-card) { color:var(--accent); }
@media(max-width:980px) { .authoring-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .authoring-feature-grid { grid-template-columns:1fr; } }

/* Keep theme and navigation controls reachable on narrow screens. */
@media (max-width:1100px) {
  .navbar { gap:12px; }
  .theme-toggle { margin-left:auto; }
  .menu-button { display:grid; place-items:center; margin-left:0; flex:0 0 44px; width:44px; height:44px; }
  .nav-links {
    display:none;
    position:absolute;
    top:100%; left:14px; right:14px;
    max-height:calc(100vh - 90px);
    max-height:calc(100dvh - 90px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:14px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--panel-solid);
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }
  .nav-links.open { display:flex; }
  .nav-links a { display:flex; align-items:center; min-height:44px; padding:10px 12px; }
}
@media (max-width:720px) {
  html[data-theme="dark"] {
    --bg:#111827;
    --bg-2:#182235;
    --panel-solid:#1b2638;
    --panel-soft:#202d41;
    --muted:#c1cbda;
    --dim:#a8b5c8;
    --line:rgba(203,213,230,.18);
  }
  .navbar { min-height:68px; gap:10px; }
  body { min-width:0; }
  .brand { gap:8px; font-size:.84rem; letter-spacing:.09em; }
  .site-header { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .theme-toggle, .menu-button { background:var(--panel-soft); color:var(--text); }
  .hero { padding:36px 0 26px; }
  .hero-grid { gap:26px; }
  h1, .page-hero h1, .product-hero h1 { font-size:clamp(2.5rem,11.5vw,3.6rem); line-height:1.04; letter-spacing:-.045em; overflow-wrap:break-word; }
  .hero h1 { margin:22px 0; }
  .eyebrow { max-width:100%; font-size:.65rem; letter-spacing:.07em; }
  .eyebrow-dot { flex:0 0 7px; }
  .hero-copy, .page-hero p, .product-hero .lead { font-size:1.03rem; line-height:1.65; }
  .hero-actions { margin-top:24px; gap:10px; }
  .hero .hero-actions .btn { flex:1 1 150px; }
  .hero-visual { min-height:340px; }
  .visual-main { width:88%; height:240px; top:12px; }
  .visual-secondary { width:65%; height:180px; bottom:16px; }
  .visual-badge { right:6px; bottom:0; padding:10px 12px; }
  .glow-orb { max-width:100%; width:280px; height:280px; }
  .section { padding:44px 0; }
  .section-sm { padding:34px 0; }
  .page-hero, .product-hero { padding:36px 0 22px; }
  .product-hero-grid { gap:28px; }
  .product-shot { min-height:0; }
  .product-shot img { height:auto; aspect-ratio:4 / 3; }
  .product-card, .feature, .support-card, .docs-nav { background:var(--panel-solid); }
  .product-media::after { background:linear-gradient(180deg,transparent 65%,rgba(7,9,13,.24)); }
  .story-image { min-height:240px; }
  .story-image img { height:auto; max-height:360px; aspect-ratio:4 / 3; }
  .story-image::after { background:none; }
  .story-copy, .cta-panel { padding:24px; }
  .story-copy h2 { font-size:clamp(2rem,9vw,3rem); }
  .feature-icon { margin-bottom:18px; }
  .mini-note { font-size:.84rem; line-height:1.6; }
  html[data-theme="light"] .site-header { background:#fff; }
  html[data-theme="light"] body { background:linear-gradient(180deg,#fff 0,#f6f7fb 700px); }
  html[data-theme="light"] .theme-toggle, html[data-theme="light"] .menu-button { background:#f1f3f7; }
  html[data-theme="light"] .product-media::after { background:linear-gradient(180deg,transparent 70%,rgba(34,40,53,.14)); }
  html[data-theme="light"] .story-image::after { background:none; }
  html[data-theme="light"] .mini-note { color:#565f70; }
  html[data-theme="light"] .section-kicker, html[data-theme="light"] .path-card span, html[data-theme="light"] .flow-num { color:#6542c0; }
}
@media (max-width:420px) {
  .hero .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero .hero-actions .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal, body, .site-header, .theme-toggle, .menu-button { transition:none; }
}

/* Publisher-wide introduction and three-product portfolio. */
.publisher-hero { isolation:isolate; overflow:hidden; padding:86px 0 28px; background:var(--bg); }
.publisher-backdrop { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.publisher-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(8,10,15,.98) 0%,rgba(8,10,15,.94) 26%,rgba(8,10,15,.65) 43%,rgba(8,10,15,.08) 72%),linear-gradient(0deg,var(--bg),transparent 25%); }
.publisher-intro { width:48%; max-width:590px; padding-bottom:80px; }
.publisher-intro h1 { font-size:clamp(3rem,5.3vw,5.4rem); line-height:1.02; margin:28px 0; }
.publisher-intro .eyebrow { max-width:100%; font-size:.65rem; }
.publisher-intro .hero-copy { font-size:1.08rem; }
.publisher-lineup { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; list-style:none; margin:0; padding:0; }
.publisher-lineup li { position:relative; padding:22px 0 8px; font-weight:750; font-size:1.05rem; }
.publisher-lineup li::before { content:""; position:absolute; top:8px; left:0; width:32px; height:3px; background:var(--accent); }
html[data-theme="light"] .publisher-hero::after { background:linear-gradient(90deg,rgba(248,248,255,.99) 0%,rgba(248,248,255,.95) 26%,rgba(248,248,255,.78) 41%,rgba(248,248,255,.08) 67%),linear-gradient(0deg,#f6f7fb,transparent 28%); }
html[data-theme="light"] .publisher-hero { background:#f6f7fb; }
.product-card { grid-column:span 4; display:flex; flex-direction:column; }
.product-card .product-media { height:auto; aspect-ratio:1.15; flex-shrink:0; }
.product-card .product-media::after { background:linear-gradient(180deg,transparent 80%,rgba(7,9,13,.18)); }
.product-card .product-body { display:flex; flex-direction:column; flex:1; }
.product-card .product-title { font-size:clamp(1.25rem,1.8vw,1.55rem); }
.product-card .tag-row { margin-top:auto; padding-top:20px; }
.product-card .product-desc { margin-bottom:0; font-size:.92rem; }
.product-coming-soon:hover { transform:none; box-shadow:none; border-color:var(--line); }
.product-coming-soon:hover .product-media img { transform:none; }
.product-coming-soon .product-status { color:#d1c6ff; }
html[data-theme="light"] .product-coming-soon .product-status { color:#6e50e8; }
.coming-soon-note { min-height:116px; align-items:flex-end; }
@media (max-width:1000px) {
  .publisher-intro { width:58%; }
  .publisher-intro .eyebrow { font-size:.58rem; letter-spacing:.05em; }
  .product-card .product-body { padding:20px; }
}
@media (max-width:720px) {
  .publisher-hero { padding:38px 0 22px; }
  .publisher-intro { width:100%; max-width:540px; padding-bottom:230px; }
  .publisher-intro h1 { font-size:clamp(2.5rem,10vw,3.6rem); }
  .publisher-intro .eyebrow { font-size:.54rem; }
  .publisher-intro .hero-copy { font-size:1.03rem; }
  .publisher-backdrop { top:auto; bottom:45px; height:300px; object-position:center; }
  .publisher-hero::after { background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 51%,transparent 80%,var(--bg) 97%); }
  html[data-theme="light"] .publisher-hero::after { background:linear-gradient(180deg,#fff 0%,#f6f7fb 51%,rgba(246,247,251,.06) 80%,#f6f7fb 97%); }
  .publisher-lineup { gap:12px; }
  .publisher-lineup li { font-size:.72rem; padding-top:18px; }
  .product-card { grid-column:span 12; }
  .product-card .product-media { aspect-ratio:1.5; }
  .product-card .product-title { font-size:1.55rem; }
  .coming-soon-note { min-height:80px; }
}

/* Show the actual Storyteller canvas with the character layered in front. */
.product-card .storyteller-product-art { isolation:isolate; background:#292930; }
.product-card .storyteller-product-art > img:first-child { object-position:right center; opacity:.9; }
.product-card .storyteller-product-art::before { content:""; position:absolute; z-index:1; inset:0; background:radial-gradient(ellipse at 78% 58%,rgba(124,92,255,.30),transparent 58%),linear-gradient(90deg,transparent 28%,rgba(15,13,28,.35)); }
.product-card .storyteller-product-art .storyteller-character-overlay { position:absolute; z-index:1; width:56%; height:132%; right:-1%; bottom:-34%; object-fit:contain; object-position:top center; filter:drop-shadow(-8px 2px 12px rgba(8,6,20,.55)); }
.product-card .storyteller-product-art::after { z-index:1; pointer-events:none; }
.product-card .storyteller-product-art .product-status { z-index:2; }

/* Keep the original banner in view on desktop instead of magnifying a crop. */
@media (min-width:1101px) {
  .publisher-backdrop { inset:0 auto 0 50%; width:auto; max-width:min(100%,1920px); transform:translateX(-50%); object-fit:contain; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .publisher-hero::after { background:linear-gradient(90deg,var(--bg) calc(50% - 960px),rgba(8,10,15,.96) calc(50% - 610px),rgba(8,10,15,.90) calc(50% - 140px),rgba(8,10,15,.06) calc(50% + 340px),transparent calc(50% + 800px)),linear-gradient(0deg,var(--bg),transparent 18%); }
  html[data-theme="light"] .publisher-hero::after { background:linear-gradient(90deg,#f6f7fb calc(50% - 960px),rgba(248,248,255,.97) calc(50% - 610px),rgba(248,248,255,.90) calc(50% - 140px),rgba(248,248,255,.02) calc(50% + 340px),transparent calc(50% + 800px)),linear-gradient(0deg,#f6f7fb,transparent 18%); }
}

/* Compact publisher navigation; product resources belong in the page body. */
.navbar { min-height:56px; gap:20px; }
.brand-mark { flex-basis:34px; width:34px; height:34px; background-image:url('/assets/images/branding/ruchmair-icon-v4.svg?v=20261101-brand12'); }
.nav-links { gap:24px; }
.nav-links .nav-cta { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:4px 12px; font-size:.8rem; border-radius:9px; }
.theme-toggle { height:32px; min-width:38px; padding:0 9px; border-radius:9px; }
.theme-toggle [data-theme-label] { font-size:.73rem; }
.theme-toggle-icon { font-size:.95rem; }
.product-resources { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding-top:18px; }
.product-resources a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:32px; padding:4px 11px; border:1px solid var(--line-strong); border-radius:9px; color:var(--text); background:var(--panel-soft); font-size:.78rem; font-weight:650; }
.product-resources a:hover { border-color:var(--accent); }
.product-resources a:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; }
.product-resources + .product-hero { padding-top:28px; }
.viewer-topbar { top:56px; }
@media(max-width:1100px) {
  .navbar { min-height:56px; gap:10px; }
  .menu-button { width:36px; height:36px; flex-basis:36px; border-radius:9px; }
  .theme-toggle { height:36px; }
  .nav-links .nav-cta { min-height:36px; }
}
@media(max-width:720px) {
  .navbar { min-height:52px; }
  .brand-mark { flex-basis:30px; width:30px; height:30px; }
  .product-resources { gap:7px; padding-top:14px; }
  .product-resources a { min-height:36px; font-size:.74rem; }
  .product-resources + .product-hero { padding-top:22px; }
  .viewer-topbar { top:52px; }
}

/* Real authoring screens behind a separate conversational foreground. */
.workflow-art { isolation:isolate; min-height:640px; background:radial-gradient(ellipse at 60% 60%,#30334c,#141722 75%); perspective:1000px; }
.workflow-art img { position:absolute; display:block; transition:transform .65s ease; pointer-events:none; }
.workflow-art .workflow-interface { top:3%; left:3%; width:94%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; border-radius:10px; border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 45px rgba(0,0,0,.3); }
.workflow-art .workflow-canvas { top:27%; left:5%; width:90%; height:54%; max-height:none; aspect-ratio:auto; object-fit:cover; object-position:center; border:1px solid rgba(170,153,255,.45); border-radius:12px; box-shadow:0 18px 35px rgba(0,0,0,.35); }
.workflow-art .workflow-characters { z-index:2; bottom:-1%; left:-3%; width:106%; height:76%; max-height:none; aspect-ratio:auto; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
.workflow-art::after, html[data-theme="light"] .workflow-art::after { z-index:1; background:linear-gradient(180deg,transparent 20%,rgba(16,18,32,.1) 60%,rgba(16,18,32,.35)); pointer-events:none; }
html[data-theme="light"] .workflow-art { background:radial-gradient(ellipse at 60% 60%,#474561,#222635 80%); }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .workflow-art:hover .workflow-interface { transform:translate3d(-3px,-3px,0) rotate(-.6deg); }
  .workflow-art:hover .workflow-canvas { transform:translate3d(3px,-7px,0) rotate(.6deg) scale(1.015); }
  .workflow-art:hover .workflow-characters { transform:translate3d(-2px,-5px,0) scale(1.035); }
}
@media(max-width:1100px) { .workflow-art { min-height:540px; } }
@media(max-width:720px) {
  .workflow-art { min-height:390px; }
  .workflow-art .workflow-interface { top:3%; left:3%; width:94%; }
  .workflow-art .workflow-canvas { top:25%; height:56%; }
  .workflow-art .workflow-characters { height:76%; }
}
.product-resources + .page-hero { padding-top:28px; }
.product-resources + .viewer-intro { padding-top:28px; }
@media(prefers-reduced-motion:reduce) { .workflow-art img { transition:none; } }

/* Official Storyteller product identity: landscape, word art and clear feature paths. */
.storyteller-product-page .product-resources { padding-top:12px; padding-bottom:10px; }
.storyteller-product-page .nav-links .nav-cta { background:#7047eb; color:#fff; border-color:#7047eb; }
.storyteller-brand-hero { position:relative; isolation:isolate; overflow:hidden; min-height:550px; display:grid; place-items:center; text-align:center; background:#69c2e3; }
.storyteller-landscape { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.storyteller-brand-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 48%,rgba(250,251,255,.97) 0%,rgba(250,251,255,.86) 19%,rgba(250,251,255,.15) 43%,transparent 65%); }
.storyteller-brand-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,var(--bg) 0%,transparent 23%); }
.storyteller-brand-content { padding:80px 20px 100px; display:flex; flex-direction:column; align-items:center; }
.storyteller-brand-content h1 { margin:0; width:min(680px,80vw); max-width:none; line-height:1; }
.storyteller-brand-content h1 img { display:block; width:100%; height:auto; }
.storyteller-brand-tagline { max-width:760px; margin:24px 0 0; color:#151c39; font-size:clamp(1rem,1.6vw,1.3rem); font-weight:650; line-height:1.5; text-wrap:balance; }
.storyteller-brand-content .hero-actions { justify-content:center; margin-top:22px; }
.storyteller-brand-content .btn-secondary { color:#151c39; background:rgba(250,252,255,.83); border-color:rgba(31,42,82,.55); }
.storyteller-brand-intro { position:relative; padding:8px 0 60px; text-align:center; }
.storyteller-brand-intro h2 { font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.15; letter-spacing:-.035em; margin:12px 0 8px; text-wrap:balance; }
.storyteller-brand-intro > .container > p { color:var(--muted); margin:0 auto; max-width:940px; }
.storyteller-highlights { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px; text-align:left; }
.storyteller-highlights > a { display:flex; gap:15px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.storyteller-highlights > a:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }
.storyteller-highlights > a:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; }
.storyteller-highlights h3 { font-size:.94rem; line-height:1.3; margin:0 0 8px; }
.storyteller-highlights p { font-size:.84rem; line-height:1.55; color:var(--muted); margin:0; }
.highlight-icon { flex:0 0 32px; color:#8955ed; }
.highlight-icon svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.storyteller-highlights a:nth-child(2) .highlight-icon { color:#23b9c8; }
.storyteller-highlights a:nth-child(3) .highlight-icon { color:#e86191; }
.storyteller-highlights a:nth-child(4) .highlight-icon { color:#458ce9; }
.storyteller-brand-intro .storyteller-release-note { margin-top:22px; font-size:.78rem; color:var(--dim); }
html[data-theme="light"] .storyteller-highlights > a { background:rgba(255,255,255,.64); border-color:rgba(123,92,235,.13); }
html[data-theme="light"] .storyteller-highlights > a:hover { border-color:#8057dc; }
@media(max-width:1000px) {
  .storyteller-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .storyteller-brand-hero { min-height:500px; }
}
@media(max-width:560px) {
  .storyteller-brand-hero { min-height:440px; }
  .storyteller-brand-content { padding:65px 0 85px; }
  .storyteller-brand-content h1 { width:92vw; }
  .storyteller-brand-tagline { max-width:340px; margin-top:24px; }
  .storyteller-brand-content .hero-actions { flex-direction:column; width:min(100%,320px); }
  .storyteller-brand-content .hero-actions .btn { width:100%; }
  .storyteller-brand-hero::before { background:radial-gradient(ellipse at 50% 48%,rgba(250,251,255,.96) 0%,rgba(250,251,255,.85) 34%,rgba(250,251,255,.1) 75%); }
  .storyteller-highlights { grid-template-columns:1fr; }
  .storyteller-brand-intro { padding-bottom:36px; }
  .storyteller-brand-intro h2 { font-size:1.85rem; }
}
@media(prefers-reduced-motion:reduce) { .storyteller-highlights > a { transition:none; } }
/* The editor word art uses translucent ink; repeat the original layer for web legibility. */
.storyteller-brand-content h1 { background:url('/assets/images/storyteller/official-wordmark.webp') center / contain no-repeat; }
.storyteller-brand-hero::before { background:radial-gradient(ellipse at 50% 42%,rgba(250,251,255,.64) 0%,rgba(250,251,255,.42) 22%,rgba(250,251,255,.08) 43%,transparent 65%); }
html[data-theme="light"] body.storyteller-product-page { --bg:#f8f8ff; background:#f8f8ff; }
@media(max-width:560px) {
  .storyteller-brand-hero::before { background:radial-gradient(ellipse at 50% 44%,rgba(250,251,255,.72) 0%,rgba(250,251,255,.5) 34%,rgba(250,251,255,.04) 75%); }
}