@font-face { font-family:"Satoshi"; src:url("/static/satoshi-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/static/satoshi-medium.woff2") format("woff2"); font-weight:500 650; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/static/satoshi-bold.woff2") format("woff2"); font-weight:700 900; font-display:swap; }
:root { color-scheme:light; --ink:#171b24; --muted:#687384; --line:#dce2ea; --paper:#fff; --canvas:#f4f6f9; --accent:#2d4a8a; --accent-dark:#20376a; --soft:#eef2f8; font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { overflow-x:hidden; font-size:14px; line-height:1.48; }
button,input,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
[hidden] { display:none !important; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid rgba(45,74,138,.72); outline-offset:2px; }
.eyebrow { margin-bottom:7px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.tutorial-header { height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:0 18px; border-bottom:1px solid var(--line); background:rgba(248,249,251,.97); }
.tutorial-brand { display:flex; align-items:center; gap:9px; font-weight:650; text-decoration:none; }
.brand-mark { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--accent-dark); font-weight:800; }
.tutorial-header > p { margin:0; color:var(--muted); font-size:11px; }
.demo-dot { width:7px; height:7px; display:inline-block; margin-right:7px; border-radius:50%; background:#cf7b3f; }
.tutorial-header nav { justify-self:end; display:flex; gap:4px; }
.tutorial-header nav a { padding:6px 8px; border-radius:7px; color:var(--muted); font-size:11px; text-decoration:none; }
.tutorial-header nav a:hover { background:var(--soft); color:var(--ink); }
.tutorial-shell { min-height:calc(100vh - 58px); display:grid; grid-template-columns:minmax(250px,310px) minmax(0,1fr); }
.tutorial-sidebar { min-width:0; display:flex; flex-direction:column; gap:30px; padding:36px 24px 24px; border-right:1px solid var(--line); background:#f8f9fb; }
.tutorial-sidebar h1 { margin-bottom:11px; font-size:25px; line-height:1.08; letter-spacing:-.035em; }
.tutorial-sidebar > div > p:last-child { color:var(--muted); font-size:12px; }
#tutorial-steps { min-width:0; max-width:100%; display:grid; gap:3px; }
.step-button { width:100%; min-height:39px; display:grid; grid-template-columns:25px minmax(0,1fr); align-items:center; gap:8px; padding:8px 9px; border:0; border-radius:8px; background:transparent; color:#576274; font-size:11px; text-align:left; }
.step-button span:first-child { color:#9ba4b2; font-size:9px; font-weight:700; letter-spacing:.06em; }
.step-button:hover { background:#f0f3f7; }
.step-button[aria-current="step"] { background:#e9eef6; color:var(--accent-dark); font-weight:650; }
.sidebar-note { margin-top:auto; display:grid; gap:4px; padding:13px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.sidebar-note strong { font-size:11px; }
.sidebar-note span { color:var(--muted); font-size:10px; line-height:1.5; }
.tutorial-main { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--canvas); }
.tutorial-progress { display:grid; grid-template-columns:50px minmax(80px,360px) 40px; justify-content:center; align-items:center; gap:12px; padding:16px 22px 9px; color:var(--muted); font-size:10px; }
.tutorial-progress > div { height:3px; overflow:hidden; border-radius:999px; background:#dde2e9; }
#tutorial-progress-bar { height:100%; display:block; background:var(--accent); transition:width .22s ease; }
.tutorial-stage { min-width:0; width:min(1120px,calc(100% - 44px)); align-self:center; justify-self:center; padding:22px 0 32px; }
.stage-heading { max-width:790px; margin-bottom:22px; }
.stage-heading h2 { margin-bottom:8px; font-size:clamp(27px,3.2vw,43px); line-height:1.06; letter-spacing:-.04em; }
.stage-heading p { margin:0; color:var(--muted); font-size:14px; }
.demo-window { overflow:hidden; border:1px solid #d5dce6; border-radius:14px; background:var(--paper); box-shadow:0 18px 45px rgba(31,43,62,.08); }
.demo-window-bar { min-height:41px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 13px; border-bottom:1px solid var(--line); background:#f8f9fb; }
.demo-window-bar strong { font-size:11px; }
.status-pill { padding:3px 7px; border-radius:999px; background:#e8eefb; color:#294c91; font-size:8px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.demo-body { padding:clamp(18px,3vw,32px); }
.question-brief { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.38fr); gap:24px; }
.question-brief blockquote { margin:0; padding:18px; border-left:3px solid var(--accent); background:#f3f6fa; font-size:17px; line-height:1.55; }
.context-card,.mini-card { padding:16px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; }
.context-card dl { display:grid; gap:9px; margin:0; }
.context-card div { display:grid; gap:2px; }
.context-card dt { color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; }
.context-card dd { margin:0; font-size:12px; }
.decision-stack { display:grid; gap:13px; }
.decision-card { padding:16px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.decision-heading { display:flex; justify-content:space-between; gap:15px; margin-bottom:11px; }
.decision-heading h3 { margin:0; font-size:15px; }
.clarify-icon { width:28px; height:28px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--accent-dark); }
.clarify-icon.active { background:#e8eefb; }
.option-list { display:grid; gap:7px; }
.option { display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:9px; align-items:start; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fbfcfd; cursor:pointer; }
.option:hover,.option.selected { border-color:#9cafd2; background:#f0f4fb; }
.option input { margin:2px 0 0; accent-color:var(--accent); }
.option strong { display:block; font-size:12px; }
.option span { color:var(--muted); font-size:10px; }
.recommended { color:#355aa1 !important; font-size:8px !important; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.freeform { width:100%; margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:8px; resize:vertical; }
.inline-note { margin:9px 0 0; padding:10px; border-left:2px solid #cf7b3f; background:#fff7f0; color:#74543d; font-size:10px; }
.history-row,.asset-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); }
.history-row:last-child,.asset-row:last-child { border-bottom:0; }
.history-row div,.asset-row div { display:grid; gap:2px; }
.history-row span,.asset-row span { color:var(--muted); font-size:10px; }
.wrong-question { border:0; background:transparent; color:#9c4c3d; font-size:10px; }
.research-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.research-choice { padding:20px; border:1px solid var(--line); border-radius:11px; background:#fbfcfd; }
.research-choice.featured { border-color:#a9b9d8; background:#f1f5fb; }
.research-choice strong { display:block; margin-bottom:7px; font-size:15px; }
.research-choice p { margin-bottom:14px; color:var(--muted); font-size:11px; }
.research-choice ul { margin:0; padding-left:17px; color:#566276; font-size:10px; }
.agent-grid { display:grid; grid-template-columns:minmax(220px,.38fr) minmax(0,1fr); min-height:330px; }
.agent-stream { padding:18px; border-right:1px solid var(--line); background:#f8f9fb; }
.agent-event { display:grid; grid-template-columns:12px minmax(0,1fr); gap:8px; padding:8px 0; color:var(--muted); font-size:10px; }
.agent-event::before { width:7px; height:7px; margin-top:4px; border-radius:50%; background:#87a18f; content:""; }
.agent-event.running::before { background:#cf7b3f; box-shadow:0 0 0 4px rgba(207,123,63,.12); animation:pulse 1.3s infinite; }
.agent-detail { padding:24px; }
.source-table { width:100%; border-collapse:collapse; font-size:10px; }
.source-table th,.source-table td { padding:9px; border-bottom:1px solid var(--line); text-align:left; }
.source-table th { color:var(--muted); font-size:8px; text-transform:uppercase; }
.slide-demo { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); min-height:390px; }
.slide-surface { position:relative; min-height:390px; overflow:hidden; padding:38px; background:linear-gradient(145deg,#263b54,#4a647d); color:#fff; }
.slide-surface h3 { max-width:620px; font-size:28px; line-height:1.05; }
.pipeline { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px; margin-top:46px; }
.pipeline span { min-height:72px; display:grid; place-items:center; padding:10px; border:1px solid rgba(255,255,255,.28); border-radius:10px; background:rgba(255,255,255,.08); font-size:11px; text-align:center; }
.pipeline b { color:rgba(255,255,255,.65); }
.pin { position:absolute; top:59%; left:53%; width:25px; height:25px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; background:#cf7b3f; box-shadow:0 7px 16px rgba(0,0,0,.24); font-size:11px; cursor:pointer; }
.pin-note { position:absolute; top:calc(59% + 31px); left:53%; width:220px; padding:10px; border-radius:8px; background:#fff; color:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,.2); font-size:10px; }
.supplement { overflow:auto; max-height:430px; padding:26px; border-left:1px solid var(--line); }
.supplement h3 { font-size:17px; }
.supplement p,.supplement li { color:#566276; font-size:11px; line-height:1.62; }
.supplement mark { padding:1px 2px; background:#fff0d6; color:inherit; }
.asset-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.asset-column { padding:18px; border:1px solid var(--line); border-radius:10px; }
.asset-column h3 { margin-bottom:4px; }
.asset-column > p { color:var(--muted); font-size:10px; }
.asset-kind { padding:3px 7px; border-radius:999px; background:#edf0f4; color:#586477; font-size:8px !important; text-transform:uppercase; }
.submission-bar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:18px; padding:14px 16px; border:1px solid #bdd0c3; border-radius:10px; background:#f1f7f3; }
.submission-bar p { margin:0; color:#52685a; font-size:10px; }
.tutorial-footer { min-height:64px; display:grid; grid-template-columns:90px minmax(0,1fr) 110px; align-items:center; gap:14px; padding:10px 22px; border-top:1px solid var(--line); background:#f8f9fb; }
.tutorial-footer button { min-height:36px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-weight:600; }
.tutorial-footer button.primary { border-color:var(--ink); background:var(--ink); color:#fff; }
.tutorial-footer button:disabled { opacity:.35; cursor:not-allowed; }
.tutorial-footer p { margin:0; color:var(--muted); font-size:10px; text-align:center; }
@keyframes pulse { 50% { transform:scale(.72); opacity:.72; } }
@media (max-width:820px) { .tutorial-header { grid-template-columns:1fr auto; } .tutorial-header > p { display:none; } .tutorial-shell { min-width:0; grid-template-columns:minmax(0,1fr); } .tutorial-sidebar { gap:18px; padding:24px 18px 14px; border-right:0; border-bottom:1px solid var(--line); } .tutorial-sidebar h1 { overflow-wrap:anywhere; font-size:22px; } #tutorial-steps { width:100%; display:flex; overflow-x:auto; overscroll-behavior-inline:contain; } .step-button { min-width:max-content; flex:0 0 auto; grid-template-columns:20px auto; } .sidebar-note { display:none; } .question-brief,.agent-grid,.slide-demo,.asset-columns { grid-template-columns:minmax(0,1fr); } .agent-stream,.supplement { border:0; border-bottom:1px solid var(--line); } .research-choice-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) { .tutorial-header { padding:0 12px; } .tutorial-header nav a:first-child { display:none; } .tutorial-stage { width:calc(100% - 24px); padding-top:12px; } .stage-heading h2 { font-size:29px; } .demo-body { padding:14px; } .pipeline { grid-template-columns:1fr; margin-top:24px; } .pipeline b { transform:rotate(90deg); text-align:center; } .slide-surface { min-height:520px; padding:26px 20px; } .pin { top:61%; left:56%; } .pin-note { top:calc(61% + 31px); left:20px; width:calc(100% - 40px); } .tutorial-footer { grid-template-columns:72px minmax(0,1fr) 90px; padding:9px 12px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }