:root { --page-line: rgba(239,233,222,.1); --page-line-strong: rgba(239,233,222,.16); --page-panel: #191816; --page-panel-soft: rgba(28,26,23,.76); --page-max: 1440px; --topbar-size: 64px; }
html { scroll-behavior: smooth; }
body { min-width: 320px; background: var(--bg); color: var(--fg); }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 20; padding: 8px 12px; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); transform: translateY(-160%); transition: transform .15s ease-out; }
.skip-link:focus { transform: translateY(0); }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 32px; height: var(--topbar-size); padding: 0 24px; border-bottom: 1px solid var(--page-line); background: rgba(21,20,19,.92); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.2px; text-decoration: none; }
.brand img { flex: 0 0 auto; }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav a, .topbar-link { padding: 7px 10px; border-radius: var(--radius); color: var(--fg-2); font-size: 13px; text-decoration: none; transition: color .15s ease-out, background .15s ease-out; }
.topnav a:hover, .topnav a:focus-visible, .topbar-link:hover, .topbar-link:focus-visible { color: var(--fg); background: var(--hover); }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.menu-button { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-2); border-radius: var(--radius); background: transparent; color: var(--fg); cursor: pointer; }
.site-layout { display: grid; grid-template-columns: 224px minmax(0,1fr) 320px; gap: 0; max-width: var(--page-max); min-height: calc(100vh - var(--topbar-size)); margin: 0 auto; }
.left-rail, .right-rail { min-width: 0; padding: 24px 16px; }
.left-rail { border-right: 1px solid var(--page-line); }
.right-rail { border-left: 1px solid var(--page-line); }
.rail-inner, .faq-panel { position: sticky; top: calc(var(--topbar-size) + 24px); }
.rail-inner { padding: 20px 4px; }
.rail-kicker, .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font: 500 11px/16px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(255,128,95,.12); }
.rail-inner h2 { max-width: 180px; margin: 0; color: var(--fg); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.2px; }
.rail-inner > p:not(.rail-kicker):not(.rail-note) { margin: 12px 0 20px; color: var(--fg-2); font-size: 13px; line-height: 20px; }
.rail-cta { width: 100%; }
.rail-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 16px; }
.rail-rule { height: 1px; margin: 28px 0 20px; background: var(--page-line); }
.rail-meta { display: grid; grid-template-columns: 28px 1fr; gap: 8px; margin: 0 0 12px; color: var(--fg-2); font-size: 12px; line-height: 16px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rail-meta .mono { color: var(--primary); }
.site-main { min-width: 0; overflow: hidden; }
.hero, .story-section, .diagram-section { padding: 72px 56px; }
.hero { position: relative; min-height: 560px; border-bottom: 1px solid var(--page-line); overflow: hidden; }
.hero::before { position: absolute; right: -180px; bottom: -250px; width: 580px; height: 580px; border: 1px solid rgba(255,128,95,.14); border-radius: 50%; content: ""; }
.hero::after { position: absolute; right: 110px; bottom: -190px; width: 360px; height: 360px; border: 1px solid rgba(255,128,95,.12); border-radius: 50%; content: ""; }
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--primary); }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(42px,6vw,76px); line-height: 1.02; font-weight: 500; letter-spacing: -.055em; }
.hero-copy { max-width: 560px; margin: 24px 0 0; color: var(--fg-2); font-size: 17px; line-height: 28px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 13px; text-decoration: none; transition: color .15s ease-out; }
.text-link:hover, .text-link:focus-visible { color: var(--fg); }
.hero-signal { display: flex; align-items: center; width: 220px; margin-top: 68px; }
.signal-node { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(255,128,95,.12); }
.signal-node-last { box-shadow: 0 0 0 5px rgba(255,128,95,.12); }
.signal-line { height: 1px; flex: 1; background: rgba(255,128,95,.45); }
.story-section { border-bottom: 1px solid var(--page-line); }
.section-heading { max-width: 680px; }
.section-heading h2, .section-heading-inline h2 { margin: 0; font-size: clamp(28px,3vw,40px); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; }
.section-heading > p:last-child { max-width: 560px; margin: 16px 0 0; color: var(--fg-2); font-size: 15px; line-height: 24px; }
.story-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 40px; }
.story-card { min-height: 220px; padding: 20px; border: 1px solid var(--page-line); border-radius: var(--radius-lg); background: var(--page-panel-soft); }
.story-card-accent { border-color: rgba(255,128,95,.34); background: rgba(255,128,95,.06); }
.card-index { color: var(--primary); font-size: 12px; }
.story-card h3 { margin: 52px 0 10px; font-size: 17px; line-height: 24px; font-weight: 500; }
.story-card p { margin: 0; color: var(--fg-2); font-size: 13px; line-height: 20px; }
.diagram-section { border-bottom: 1px solid var(--page-line); }
.section-heading-inline { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.section-heading-inline .eyebrow { margin-bottom: 10px; }
.section-aside { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.diagram-card { margin-top: 32px; padding: 20px; border: 1px solid var(--page-line); border-radius: var(--radius-lg); background: var(--page-panel); overflow: hidden; }
.flow-diagram, .manager-diagram { display: block; width: 100%; height: auto; min-width: 620px; }
.diagram-node rect, .manager-node rect { fill: var(--card-2); stroke: var(--border-2); stroke-width: 1; }
.diagram-node-primary rect, .manager-node-main rect { fill: rgba(255,128,95,.12); stroke: rgba(255,128,95,.45); }
.diagram-node text, .manager-node text { fill: var(--fg); font: 500 13px/20px var(--font-sans); }
.diagram-node .node-icon, .manager-icon { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram-path { fill: none; stroke: rgba(255,128,95,.55); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 6; }
.manager-path { fill: none; stroke: rgba(255,128,95,.45); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 6; }
.diagram-path-muted { stroke: rgba(255,128,95,.32); stroke-dasharray: 3 6; }
.diagram-label, .manager-sub { fill: var(--muted); font: 400 11px/16px var(--font-mono); }
.diagram-caption { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 16px; }
.preview-window { margin-top: 32px; border: 1px solid var(--page-line-strong); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.preview-topbar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--page-line); color: var(--muted); font-size: 11px; }
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.preview-title { margin-left: 8px; color: var(--fg-2); }
.preview-live { margin-left: auto; color: var(--success); font-size: 10px; }
.preview-body { display: grid; grid-template-columns: 128px minmax(0,1fr); min-height: 220px; }
.preview-sidebar { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; border-right: 1px solid var(--page-line); color: var(--muted); font-size: 11px; }
.preview-sidebar span { padding: 7px 8px; border-radius: 6px; }
.preview-sidebar-active { background: var(--active); color: var(--fg); }
.preview-content { padding: 24px; }
.preview-content-head, .preview-release { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-label { display: block; margin-bottom: 6px; color: var(--muted); font: 400 10px/14px var(--font-mono); text-transform: uppercase; }
.preview-content-head strong, .preview-release strong { font-size: 17px; line-height: 24px; font-weight: 500; }
.preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 28px 0; }
.preview-stats > div { padding: 12px; border: 1px solid var(--page-line); border-radius: var(--radius); background: var(--card); }
.preview-stats span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.preview-stats strong { font: 400 22px/24px var(--font-mono); }
.preview-release { padding-top: 16px; border-top: 1px solid var(--page-line); }
.preview-check { color: var(--success); font: 400 12px/16px var(--font-mono); }
.handoff-section { padding-bottom: 80px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 56px 40px; color: var(--muted); font-size: 12px; }
.site-footer a { color: var(--fg-2); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--fg); }
.faq-panel { padding: 20px; border: 1px solid var(--page-line); border-radius: var(--radius-lg); background: var(--page-panel-soft); }
.faq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.faq-head .eyebrow { margin-bottom: 8px; }
.faq-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.faq-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 400 10px/16px var(--font-mono); white-space: nowrap; }
.faq-status .status-dot { width: 6px; height: 6px; background: var(--success); box-shadow: none; }
.faq-intro, .faq-note { color: var(--muted); font-size: 12px; line-height: 18px; }
.faq-intro { margin: 16px 0; }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; padding: 12px; border: 1px solid var(--page-line); border-radius: var(--radius); background: var(--inset); }
.chat-message { max-width: 92%; }
.chat-message-user { align-self: flex-end; padding: 8px 10px; border-radius: 10px 10px 2px 10px; background: var(--active); }
.chat-message-bot { padding: 8px 10px; border-left: 2px solid var(--primary); }
.chat-label { display: block; margin-bottom: 3px; color: var(--primary); font: 400 10px/14px var(--font-mono); }
.chat-message-user .chat-label { color: var(--fg-2); }
.chat-message p { margin: 0; color: var(--fg-2); font-size: 12px; line-height: 18px; }
.faq-questions { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.faq-questions button { width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--fg-2); font: 400 12px/18px var(--font-sans); text-align: left; cursor: pointer; transition: color .15s ease-out, background .15s ease-out, border-color .15s ease-out; }
.faq-questions button:hover, .faq-questions button:focus-visible { border-color: var(--border); background: var(--hover); color: var(--fg); }
.faq-form { display: flex; gap: 6px; margin-top: 12px; }
.faq-form .input { min-width: 0; font-size: 12px; }
.faq-form .btn { flex: 0 0 auto; }
.faq-note { margin: 10px 0 0; }
@media (max-width:1120px) { .site-layout { grid-template-columns: 200px minmax(0,1fr) 288px; } .hero, .story-section, .diagram-section { padding-right: 32px; padding-left: 32px; } .site-footer { padding-right: 32px; padding-left: 32px; } .flow-diagram, .manager-diagram { min-width: 560px; } }
@media (max-width:900px) { .site-layout { display: block; } .left-rail, .right-rail { padding: 0; border: 0; } .left-rail { padding: 24px 24px 0; } .rail-inner { position: static; padding: 20px; border: 1px solid var(--page-line); border-radius: var(--radius-lg); background: var(--page-panel-soft); } .rail-inner h2 { max-width: none; } .rail-cta { width: auto; } .rail-rule, .rail-meta { display: none; } .right-rail { padding: 0 24px 32px; } .faq-panel { position: static; } .site-main { overflow: visible; } }
@media (max-width:720px) { .topbar { gap: 16px; padding: 0 16px; } .topnav { position: absolute; top: calc(var(--topbar-size) - 1px); right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border: 1px solid var(--page-line-strong); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-toast); } .topnav.is-open { display: flex; } .topnav a { padding: 10px; } .topbar-link { display: none; } .menu-button { display: inline-flex; } .hero, .story-section, .diagram-section { padding: 56px 20px; } .hero { min-height: 520px; } .hero h1 { font-size: clamp(40px,12vw,60px); } .hero-copy { font-size: 15px; line-height: 24px; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; } .hero-signal { margin-top: 56px; } .story-grid { grid-template-columns: 1fr; margin-top: 28px; } .story-card { min-height: 0; } .story-card h3 { margin-top: 32px; } .section-heading-inline { align-items: flex-start; flex-direction: column; gap: 12px; } .diagram-card { margin-top: 24px; padding: 12px; overflow-x: auto; } .flow-diagram, .manager-diagram { min-width: 620px; } .preview-body { grid-template-columns: 96px minmax(0,1fr); } .preview-content { padding: 16px; } .preview-content-head { align-items: flex-start; flex-direction: column; gap: 12px; } .preview-stats { gap: 4px; margin: 20px 0; } .preview-stats > div { padding: 8px; } .preview-stats strong { font-size: 17px; } .preview-release { align-items: flex-start; flex-direction: column; gap: 8px; } .site-footer { align-items: flex-start; flex-direction: column; padding: 24px 20px 32px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }