/* Shared foundations */
 :root {
 color-scheme: light;
 --bg:#faf7f3; --paper:#fff; --ink:#24201e; --muted:#665a54;
 --line:#d7c5ba; --soft:#f4e2d7; --dark:#30231f;
 --accent:#984832; --terracotta:#bf765b; --peach:#e8b79d;
 --tint:#f4e2d7; --line-accent:#d7c5ba;
 --shadow-panel:0 20px 48px rgba(75,40,27,.12);
 --shadow-hover:0 8px 20px rgba(75,40,27,.12);
 --motion-fast:160ms; --motion-normal:240ms; --motion-enter:420ms;
 --motion-ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-underline-offset:4px}button,input,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}.skip{position:absolute;top:-100px;left:20px;background:var(--paper);padding:12px;z-index:10}.skip:focus{top:12px}.header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-block:26px;gap:20px}.wordmark{font-size:26px;font-weight:650;letter-spacing:-1px;text-decoration:none}.header nav{display:flex;gap:26px;font-size:13px}.header nav a{text-decoration:none}.header nav a:hover{text-decoration:underline}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(40px,4.3vw,60px);line-height:1.08;letter-spacing:-2.8px;font-weight:600;margin-bottom:26px;max-width:12ch}h2{font-size:38px;line-height:1.15;letter-spacing:-1.5px;font-weight:600;margin-bottom:22px;max-width:17ch}h3{font-size:17px;line-height:1.4;margin-bottom:10px;font-weight:600}p{margin-bottom:18px}.intro{font-size:17px;color:var(--muted);line-height:1.8;max-width:46ch}.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;padding-block:40px 44px}.actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:28px 0 18px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;min-height:46px}.primary{background:var(--dark);color:#fff}.primary:hover{background:#424352}.watch{font-size:13px;text-decoration:none}.watch span{margin-left:8px}.small{font-size:11px}.muted{color:var(--muted)}.relationship-map{margin:0;border:1px solid var(--line);background:linear-gradient(140deg,#fff,#f0f0f0);border-radius:20px;padding:22px;box-shadow:0 18px 50px #20202008}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);grid-template-rows:auto 48px auto;align-items:center}.entity{border:1px solid #d0d0d9;background:var(--paper);border-radius:12px;padding:16px 13px;text-align:left;display:flex;flex-direction:column;gap:7px;min-width:0;min-height:148px;align-self:stretch;color:var(--ink)}.entity[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.entity-icon{font-size:24px;line-height:1.2}.entity strong{font-size:13px;line-height:1.5}.entity>span:last-child{font-size:10px;color:var(--muted)}.source{grid-area:1/1}.rule{grid-area:1/3}.scenario{grid-area:3/1}.check{grid-area:3/3}.edge{font-size:10px;text-align:center;line-height:1.5;color:var(--muted)}.informs{grid-area:1/2}.context{grid-area:3/2}.assesses{grid-area:2/3}.entity-detail{border-top:1px solid var(--line);margin-top:20px;padding-top:15px;font-size:12px;min-height:86px;line-height:1.8}.relationship-map figcaption{font-size:10px;color:var(--muted);margin-top:12px}.map-description{margin-top:8px;font-size:10px;color:var(--muted)}summary{cursor:pointer}.map-description p{font-size:11px;margin:12px 0 0}.section{padding-block:64px;border-top:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-bottom:36px;align-items:end}.section-heading h2{margin-bottom:0}.section-heading>p{font-size:14px;max-width:47ch;color:var(--muted);margin-bottom:0}.conversation-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center}.demo{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 12px 30px #20202006}.demo figcaption{padding:14px 20px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.chat-window{padding:20px;display:flex;flex-direction:column;gap:14px;max-height:460px;overflow-y:auto;scroll-behavior:auto}.js .chat-window{height:360px;max-height:none}.bubble{font-size:13px;line-height:1.65;max-width:88%;border-radius:10px;padding:13px 16px;flex-shrink:0}.bubble span{display:block;font-size:10px;font-weight:650;margin-bottom:5px}.user{align-self:flex-end;background:#f0f0f0}.agent{align-self:flex-start;border:1px solid var(--line)}.js .bubble.entering{animation:arrive .25s ease-out}.playback{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:14px 20px}.playback button{border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:8px 12px;font-size:11px;min-height:36px}.playback button:first-child{background:var(--dark);color:white;border-color:var(--dark)}.playback button:disabled{opacity:.5;cursor:default}#playback-state{font-size:10px;color:var(--muted);margin-left:auto}.transcript{border-top:1px solid var(--line);padding:14px 20px;font-size:11px}.transcript ol{padding-left:16px}.transcript li{margin:10px 0}.typing{display:flex;gap:5px;padding:17px;background:var(--soft);width:fit-content;border-radius:10px;flex-shrink:0}.typing i{height:5px;width:5px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}.artifact-stage{background:var(--paper);border:1px solid var(--line);border-radius:14px;transform:rotate(1deg);overflow:hidden;box-shadow:0 12px 24px #20202006}.artifact-top{display:flex;gap:10px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font:11px ui-monospace,monospace}.artifact-top>.pill{margin-left:auto}.pill{display:inline-block;font:10px/1.6 system-ui,sans-serif;border:1px solid var(--line);border-radius:5px;padding:3px 7px}.artifact-top>span:first-child{font-size:19px;color:var(--muted)}#draft-artifact{min-height:210px;padding:24px}#draft-artifact h3{font-size:19px}#draft-artifact p{font-size:13px;color:var(--muted)}.artifact-footer{padding:13px 20px;background:#f9f9fb;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}.explorer{display:grid;grid-template-columns:260px 1fr;border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}.explorer-context{background:#eeeef2;border-right:1px solid var(--line);padding:28px}.explorer-symbol{font-size:34px;display:block;line-height:1;margin-bottom:20px}.explorer-context p{font-size:12px;color:var(--muted)}.context-chip{border-top:1px solid #d4d4de;padding-top:18px;font-size:10px;color:var(--muted);margin-top:24px}.context-chip strong{display:block;color:var(--ink);font-size:12px;margin-top:6px}.explorer-context>.small{font-size:10px;margin-top:22px;margin-bottom:0}.explorer-main{padding:24px 32px}.tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);margin-bottom:28px}.tabs button{padding:10px 16px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-size:12px}.tabs button[aria-selected=true]{border-bottom-color:var(--ink);color:var(--ink);font-weight:600}.explorer-main [role=tabpanel]{min-height:177px}.explorer-main p{font-size:14px;max-width:54ch;color:var(--muted)}.word-swap{display:flex;align-items:center;gap:24px;font-size:30px;letter-spacing:-1px;margin:20px 0}.word-swap>span:first-child{text-decoration:line-through;color:#787984}.word-swap>span:nth-child(2){font-size:20px;color:var(--muted)}.mini-link{padding:14px 18px;border:1px solid var(--line);border-radius:8px;font-size:12px;display:flex;gap:16px;align-items:center;width:fit-content}.supporting{font-size:11px;color:var(--muted);margin:16px 0 0;max-width:90ch}.evaluation-band{background:var(--dark);color:#fff}.evaluation-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-block:64px;align-items:center}.evaluation-layout>div>p{font-size:14px;color:#dddddd;max-width:44ch}.evaluation-layout>div>p.small{font-size:11px;color:#cccccc}.evaluation-example{border:1px solid #555555;border-radius:14px;padding:22px 24px;background:#ffffff04}.evaluation-item{display:flex;gap:18px;padding-bottom:20px}.glyph{width:32px;height:32px;display:grid;place-items:center;border:1px solid #626372;border-radius:8px;flex-shrink:0;font-size:20px}.evaluation-item h3{font-size:11px;color:#cccccc;margin-bottom:6px}.evaluation-item p{font-size:14px;margin-bottom:8px}.evaluation-item .pill{border-color:#666777;color:#dddddd}.result-example{font-size:11px;border-top:1px solid #555555;padding-top:16px;color:#dddddd}.result-example p{margin:14px 0}.agent-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.agent-options button{padding:22px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}.agent-options button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.agent-options strong{display:block;font-size:20px;letter-spacing:-.5px;font-weight:600}.agent-options span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.agent-detail{padding:18px 22px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:13px;min-height:84px;margin:16px 0}.start{display:grid;grid-template-columns:1fr 1fr;gap:90px}.start>div>p{font-size:14px;color:var(--muted);max-width:44ch}.setup{align-self:center}.copy-field{margin-bottom:22px}.copy-field label{display:block;font-size:11px;font-weight:600;margin-bottom:9px}.copy-field>div{display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:9px}.copy-field input,.copy-field textarea{border:0;background:transparent;resize:none;color:var(--ink);font:11px/1.8 ui-monospace,monospace;width:100%;min-width:0;padding:4px}.copy-field button{align-self:start;border:1px solid var(--line);background:var(--bg);border-radius:5px;font-size:10px;padding:7px 10px;min-height:32px}.copy-field button:hover{background:var(--soft)}#copy-status{min-height:18px;margin-bottom:6px}.footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-block:25px;font-size:10px;color:var(--muted)}[hidden]{display:none!important}body:not(.js) [role=tabpanel]{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}body:not(.js) .tabs{display:none}body:not(.js) .agent-options{display:none}
@keyframes dot{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.hero{gap:30px}h1{font-size:48px}.section-heading,.evaluation-layout,.start{gap:40px}.map-layout{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}.relationship-map{padding:16px}.entity{padding:12px}.edge{font-size:9px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-block:48px;gap:32px}h1{max-width:16ch}.intro{max-width:56ch}.relationship-map{max-width:580px;width:100%}.section-heading,.evaluation-layout,.start{grid-template-columns:1fr;gap:24px}.conversation-layout{grid-template-columns:1fr;gap:24px}.artifact-stage{transform:none}.section{padding-block:48px}.section-heading{margin-bottom:28px}h2{font-size:33px;max-width:22ch}.section-heading>p{max-width:60ch}.explorer{grid-template-columns:200px 1fr}.explorer-context{padding:24px}.explorer-main{padding:22px}.evaluation-layout{padding-block:48px}.agent-options strong{font-size:16px}.agent-options button{padding:18px}.footer{flex-direction:column;gap:8px}}
@media(max-width:480px){.wrap{width:calc(100% - 36px)}.header{padding-block:20px;gap:14px}.header nav{gap:12px}.header nav a{font-size:10px}.wordmark{font-size:23px}h1{font-size:40px;letter-spacing:-1.8px}.intro{font-size:15px}.map-layout{display:flex;flex-direction:column;gap:10px}.entity{width:100%;min-height:0;display:grid;grid-template-columns:32px 1fr;gap:3px 8px;padding:12px 15px}.entity-icon{grid-row:1/3;align-self:center}.entity strong{font-size:13px}.source{order:0}.informs{order:1}.rule{order:2}.assesses{order:3}.check{order:4}.context{order:5}.scenario{order:6}.edge{font-size:10px}.informs::after{content:' ↓'}.informs{font-size:0}.informs::after{content:'Informs ↓';font-size:10px}.context{font-size:0}.context::after{content:'↑ Provides context for';font-size:10px}.entity-detail{min-height:100px}.relationship-map{padding:18px}.explorer{grid-template-columns:1fr}.explorer-context{border-right:0;border-bottom:1px solid var(--line);padding:20px}.explorer-symbol{display:none}.context-chip{margin-top:12px;padding-top:12px}.explorer-context>.small{margin-top:12px}.explorer-main{padding:20px}.tabs{gap:0}.tabs button{padding:10px 13px}.word-swap{font-size:26px;gap:16px}.mini-link{flex-wrap:wrap;gap:8px}.agent-options{grid-template-columns:1fr}.agent-options button{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.agent-options strong{font-size:18px}.agent-options span{margin:0}.playback{padding:12px;gap:8px}.playback button{padding:8px 10px}#playback-state{font-size:9px}.bubble{font-size:12px;max-width:94%}.js .chat-window{height:330px}.artifact-top{padding:14px}.artifact-footer{font-size:9px}.evaluation-example{padding:18px}.actions{gap:16px}}
@media(pointer:coarse){button,.header nav a,summary{min-height:44px}.header nav a{display:inline-flex;align-items:center}.copy-field button{min-width:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.typing i,.js .bubble.entering{animation:none}}

.ontology {padding:20px 16px}.ontology-graph {display:block;width:100%;height:auto}.ontology-node {cursor:pointer}.ontology-node ellipse {fill:#fff;stroke:#ceced7;stroke-width:1.5}.ontology-node text {fill:#202020;font:500 16px system-ui,sans-serif}.ontology-node[aria-pressed=true] rect {stroke:#292321;stroke-width:2.5;fill:#f0f0f0}.ontology-node:focus-visible {outline:none}.ontology-node:focus-visible rect {stroke:var(--accent);stroke-width:3}.edge-labels text {font:14px system-ui,sans-serif;fill:#626262}.mobile-entities {display:none}.setup-companion {padding:26px 10px 26px 28px;border-left:2px solid var(--line)}.setup-companion h3 {font-size:24px;letter-spacing:-.7px}.setup-companion p {font-size:14px;color:var(--muted)}.setup-companion ul {list-style:none;padding:0;margin:24px 0 0}.setup-companion li {padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.concept-tags {display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}.concept-tags span {border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:12px}.evaluation-item:not(:last-of-type) {border-bottom:1px solid #555555;margin-bottom:20px}.evaluation-item h3 {font-size:15px;color:#fff}.evaluation-item p {font-size:13px;color:#dddddd}.ontology .entity-detail {min-height:0}
@media(max-width:640px){.ontology-graph{display:none}.mobile-entities{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-entities button{border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:14px 10px;font-size:12px;text-align:left;min-height:56px}.mobile-entities button[aria-pressed=true]{border-color:var(--ink);background:var(--soft)}.setup-companion{padding:20px;border-left:0;border-top:2px solid var(--line)}.ontology .entity-detail{min-height:0}}

.graph-scroll{max-width:100%;overflow-x:auto;padding:8px 0}.ontology .ontology-graph{display:block;min-width:600px;width:100%}.ontology .mobile-entities{display:none}.ontology-node ellipse{fill:#fff;stroke:#cecece;stroke-width:1.6}.ontology-node[aria-pressed=true] ellipse{fill:#f0f0f0;stroke:#292321;stroke-width:2.5}.ontology-node:focus-visible ellipse{stroke:var(--accent);stroke-width:3}.ontology{min-width:0}.setup-topics{list-style:none!important;padding:0!important;counter-reset:topic}.setup-topics>li{counter-increment:topic;padding:0!important}.setup-topics summary{display:flex;gap:12px;align-items:center;padding:15px 0;font-size:13px;list-style:none}.setup-topics summary::before{content:counter(topic,decimal-leading-zero);font:11px ui-monospace,monospace;color:var(--muted)}.setup-topics summary::after{content:'+';margin-left:auto;color:var(--muted);font-size:18px}.setup-topics details[open] summary::after{content:'−'}.setup-topics details p{font-size:13px;line-height:1.8;padding-left:30px;margin:0 0 16px}.system-browser{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 30px}.system-browser .tabs{margin:0}.system-fields{margin:8px 0}.system-fields>div{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}.system-fields>div:last-child{border:0}.system-fields dt{font-size:16px;font-weight:600}.system-fields dd{margin:0;color:var(--muted);font-size:14px}.evaluation-flow{text-align:center}.eval-node{border:1px solid #747583;border-radius:28px;padding:15px;font-size:15px}.eval-connector{display:block;font-size:24px;color:#cccccc;line-height:1.5}.eval-branches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.eval-branches>div{padding:8px 12px 18px;border-bottom:1px solid #555555}.eval-branches h3{font-size:15px;margin:8px 0}.eval-branches p{font-size:12px;color:#d6d6d6;margin:0}.eval-outcome{padding:14px 18px;background:#ffffff0b;border-radius:10px;font-size:14px}.eval-caption{font-size:10px;color:#cccccc;margin:12px 0 0}.setup-companion>h3{margin-bottom:12px}
@media(max-width:640px){.ontology .ontology-graph{display:block}.system-browser{padding:12px 18px}.system-browser .tabs button{font-size:11px;padding:10px}.system-fields>div{grid-template-columns:1fr;gap:5px;padding:18px 0}.system-fields dt{font-size:15px}.system-fields dd{font-size:13px}.setup-topics summary{font-size:13px}.graph-scroll{margin-bottom:6px}.eval-branches{gap:8px}.eval-branches>div{padding-inline:4px}}

@media(min-width:641px){.ontology .ontology-graph{min-width:0}}

.map-explanation{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.map-explanation h3{font-size:13px;margin-bottom:8px}.map-explanation p{font-size:11px;color:var(--muted);margin-bottom:0}.foundation-details{margin-top:32px}

.getting-started h2{max-width:none}.start-steps{list-style:none;padding:0;margin:30px 0 0;counter-reset:start-step;max-width:800px}.start-steps>li{counter-increment:start-step;display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}.start-steps>li::before{content:counter(start-step);display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;font-size:12px}.start-steps h3,.start-steps .copy-field label{font-size:15px;font-weight:600;margin:3px 0 8px}.start-steps p{font-size:13px;color:var(--muted);margin:0}.start-steps .copy-field{margin:0}.getting-started .setup-link{font-size:12px}.getting-started #copy-status{margin:12px 0;min-height:18px}

.getting-started{padding-bottom:24px}.getting-started #copy-status:empty{min-height:0;margin:0}.getting-started .setup-link{display:inline-block;margin-top:16px}.getting-started #copy-status:not(:empty){margin:10px 0 0;min-height:0}

.start-steps>li:last-child{border-bottom:0;padding-bottom:0}.getting-started .setup-link{margin-top:12px}

/* Interaction tokens shared with website/DESIGN-GUIDE.md */

.button,.playback button,.copy-field button,.agent-options button{transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-normal) ease,background var(--motion-fast) ease,border-color var(--motion-fast) ease}
.watch span{display:inline-block;transition:transform var(--motion-normal) var(--motion-ease)}
.header nav a{position:relative}.header nav a::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-normal) var(--motion-ease)}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.ontology-node ellipse{transition:fill var(--motion-fast) ease,stroke var(--motion-fast) ease,stroke-width var(--motion-fast) ease}.ontology-edges path{transition:stroke var(--motion-fast) ease,stroke-width var(--motion-fast) ease}.ontology-edges path.is-connected{stroke:#292321;stroke-width:2.8}
.setup-topics summary{transition:color var(--motion-fast) ease,background var(--motion-fast) ease;border-radius:6px}.setup-topics summary::after{transition:transform var(--motion-fast) ease}.setup-topics details[open] summary{color:var(--ink)}
@media(hover:hover) and (pointer:fine){.button:hover,.agent-options button:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.playback button:hover,.copy-field button:hover{transform:translateY(-1px)}.watch:hover span{transform:translateY(3px)}.ontology-node:hover ellipse{fill:#f0f0f0;stroke:var(--accent);stroke-width:2.5}.setup-topics summary:hover{background:#20202005}.setup-topics summary:hover::after{transform:scale(1.15)}}
.button:active,.agent-options button:active,.playback button:active,.copy-field button:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){.button,.playback button,.copy-field button,.agent-options button,.watch span,.header nav a::after,.ontology-node ellipse,.ontology-edges path,.setup-topics summary,.setup-topics summary::after{transition:none;transform:none}.button:hover,.agent-options button:hover,.playback button:hover,.copy-field button:hover,.watch:hover span,.setup-topics summary:hover::after{transform:none}}


/* Approved terracotta direction: surfaces and elevation */
.header nav a:hover { color:var(--accent); }
.hero { background:none; }
.primary,.playback button:first-child { background:var(--accent); color:white; border-color:var(--accent); box-shadow:0 5px 12px #9848322e; }
.primary:hover,.playback button:first-child:hover { background:#803b29; }
.relationship-map { background:linear-gradient(145deg,#fffaf8 0%,#f8eeea 100%); border-color:#e5dcd7; box-shadow:0 12px 32px #24201e0a; }
.ontology-node ellipse { fill:#ffffff80; stroke:#c9c4c0; filter:drop-shadow(0 3px 4px #4b281b1a); }
.ontology-node text { fill:var(--ink); }
.ontology-node[aria-pressed=true] ellipse { fill:url(#selected-node-gradient); stroke:#b85b43; stroke-width:1.8; }
.ontology-node:focus-visible ellipse { stroke:var(--accent); stroke-width:3; }
.ontology-edges path { stroke:#aaa3a0; }
.ontology-edges path.is-connected { stroke:#be654d; stroke-width:2; }
.edge-labels text { fill:#595454; }
.ontology .entity-detail { background:transparent; border:0; border-radius:0; padding:14px 0; color:#24201e; }
.map-explanation { border-color:#ded4ce; }
.map-explanation p { color:#595454; }
.demo { border-color:#c88d70; box-shadow:var(--shadow-panel); }
.demo figcaption,.playback { background:linear-gradient(110deg,var(--tint),#efd0bc); }
.chat-window { background:var(--paper); }
.agent { background:var(--paper); box-shadow:0 2px 6px #4b281b0a; }
.user { background:var(--peach); color:var(--ink); }
.setup-companion { border-color:var(--peach); }
.setup-topics summary::before { color:var(--accent); }
.setup-topics details[open] { background:#f7ece4; border-radius:8px; }
.evaluation-band { background:linear-gradient(120deg,var(--dark),#854a38); }
.evaluation-layout>div>p,.eval-branches p,.eval-caption { color:#fff1e8; }
.eval-node { background:#ffffff0d; border-color:#c99c86; box-shadow:0 4px 12px #1e100c26; }
.eval-connector { color:#f0c4ac; }
.eval-branches>div { border-color:#c99c86; }
.eval-outcome { background:#ffffff12; border:1px solid #c99c86; }
.agent-options button { box-shadow:0 4px 12px #4b281b0f; }
.agent-options button[aria-pressed=true] { background:var(--tint); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 4px 12px #4b281b0f; }
.agent-detail { background:linear-gradient(110deg,#faf0e9,var(--tint)); }
.start-steps>li::before { background:var(--tint); color:var(--accent); border-color:#c88d70; }
.copy-field>div { box-shadow:0 2px 6px #4b281b08; }
.copy-field button { background:#f4e2d7; }
@media(hover:hover) and (pointer:fine) {
 .ontology-node:hover ellipse { fill:#fae9dd; stroke:var(--accent); }
 .setup-topics summary:hover { background:#f4e2d7; }
}

/* Hero action treatment, scoped to preserve the rest of the page */
.hero .primary { background:transparent; color:var(--ink); border:2px solid #c45736; border-radius:6px; padding:11px 22px; min-height:48px; font-weight:500; box-shadow:none; }
.hero .primary:hover { background:transparent; color:var(--ink); border-color:#9f3f25; transform:none; box-shadow:none; }
@media(hover:hover) and (pointer:fine) { .hero .ontology-node:hover ellipse { fill:#f4e2db; stroke:#be654d; } }

.entity-detail h3 { font-size:13px; margin-bottom:8px; }
.entity-detail p { margin-bottom:0; }

/* Supplied Fievel logo, framed to omit the source image margins */
.wordmark { display:inline-flex; align-items:center; gap:10px; }
.brand-icon { display:inline-block; position:relative; width:34px; height:38px; overflow:hidden; flex-shrink:0; }
.brand-icon img { position:absolute; width:58px; height:58px; max-width:none; left:-12px; top:-10px; mix-blend-mode:multiply; }
.hero .primary { gap:9px; }
.hero .primary .brand-icon { width:18px; height:21px; }
.hero .primary .brand-icon img { width:32px; height:32px; left:-7px; top:-6px; }

/* Agent section heading and supporting copy stack together */
.agents .section-heading { grid-template-columns:1fr; gap:16px; align-items:start; }
.agents .section-heading h2 { max-width:none; }
.agents .section-heading>p { max-width:70ch; }

/* Graph legibility and node depth refinement */
.ontology-node ellipse { fill:url(#node-surface); filter:drop-shadow(0 4px 5px #30231f1c); }
.ontology-node text { font-size:15px; letter-spacing:.15px; }
.edge-labels text { font-size:13px; }
.ontology .entity-detail { font-size:13px; line-height:1.9; padding-block:18px; }
.ontology .entity-detail h3 { margin-bottom:12px; }

.ontology .map-title { font-size:20px; line-height:1.35; letter-spacing:-.4px; max-width:none; margin:0 8px 10px; }

/* Shared vertical and horizontal scrollbar treatment */
* { scrollbar-width:thin; scrollbar-color:#b39789 #ede5df; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#ede5df; border-radius:10px; }
::-webkit-scrollbar-thumb { background:#b39789; border:2px solid #ede5df; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#936f5e; }
::-webkit-scrollbar-thumb:active { background:#785442; }
::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-button { display:none; width:0; height:0; }
@media(forced-colors:active) {
 * { scrollbar-color:auto; scrollbar-width:auto; }
 ::-webkit-scrollbar-track { background:Canvas; }
 ::-webkit-scrollbar-thumb { background:ButtonText; border-color:Canvas; }
}

/* Separate graph exploration from its detail area */
.ontology .entity-detail { border-top:1px solid var(--line); margin-top:10px; padding-block:12px 4px; }
#entity-empty-logo { width:18px; height:21px; vertical-align:middle; margin-right:9px; opacity:.45; }
#entity-empty-logo img { width:32px; height:32px; left:-7px; top:-6px; }
#entity-empty-logo:not([hidden]) { display:block; margin:0 auto 6px; }
#entity-empty-logo:not([hidden]) ~ #entity-description { display:block; text-align:center; }

.hero .graph-scroll { padding-block:2px; }
@media(max-width:760px) { .hero { padding-block:32px; } }

@media(min-width:761px) and (max-height:720px) {
 .hero { padding-block:24px 28px; }
 .hero .ontology { padding:16px; }
 .hero .map-title { font-size:18px; margin-bottom:8px; }
 .hero .entity-detail { line-height:1.8; }
 .hero .entity-detail h3 { margin-bottom:8px; }
}

/* Agent marks identify intended environments */
.header-platforms { display:flex; align-items:center; gap:16px; margin-left:auto; }
.header-platforms>span { font-size:12px; color:var(--muted); white-space:nowrap; }
.header-platforms a { display:inline-flex; align-items:center; justify-content:center; min-width:28px; min-height:32px; }
.header-platforms img,.agent-logo { display:block; object-fit:contain; flex-shrink:0; }
.header nav { margin-left:16px; }
.agent-options strong { display:flex; align-items:center; gap:12px; }
@media(max-width:760px) {
 .header { flex-wrap:wrap; gap:12px 20px; }
 .header nav { margin-left:auto; }
 .header-platforms { order:3; width:100%; margin-left:0; gap:16px; }
}

/* Group intended platforms without adding a mobile header row */
.header-platforms { border:1px solid #d7c5ba66; background:#ffffff55; border-radius:8px; padding:4px 10px; gap:12px; }
@media(max-width:760px) {
 .header { flex-wrap:nowrap; gap:12px; }
 .header-platforms { order:0; width:auto; margin-left:auto; gap:8px; padding:4px 8px; }
 .header-platforms>span { font-size:11px; }
 .header-platforms a { min-width:20px; min-height:28px; }
 .header-platforms img { width:20px; height:20px; }
 .header nav { margin-left:0; gap:12px; }
}
@media(max-width:600px) {
 .header nav>a[href="#how-it-works"] { display:none; }
 .header nav .github-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .header nav a { font-size:18px; min-width:24px; justify-content:center; }
}
@media(max-width:380px) {
 .header { gap:8px; }
 .header .wordmark { gap:6px; font-size:21px; }
 .header-platforms { gap:6px; padding-inline:6px; }
 .header-platforms>span { font-size:10px; }
 .header-platforms img { width:18px; height:18px; }
 .header-platforms a { min-width:18px; }
}

/* Brand and intended platforms together; repository link at the far edge */
.header .header-platforms { margin-left:auto; }
.header nav { margin-left:16px; }
@media(max-width:760px) { .header nav { margin-left:0; } }

/* Conversation: informative caption, Fievel avatar, playback state cues */
.demo figcaption{display:grid;gap:3px;padding:14px 20px}
.demo figcaption strong{font-size:13px;color:var(--ink);font-weight:600}
.demo figcaption span{font-size:11px;color:var(--muted);line-height:1.5}
.bubble .speaker{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:650;margin-bottom:5px}
.bubble .speaker .brand-icon{display:inline-block;width:20px;height:23px;margin:-3px 0}
.bubble .speaker .brand-icon img{width:36px;height:36px;left:-8px;top:-7px}
#play{display:inline-flex;align-items:center;gap:8px;position:relative}
#play::before{content:'';width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
#play[data-state=playing]::before{width:10px;height:10px;border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite}
#play[data-state=paused]::before{width:3px;height:10px;border:0;border-inline:3px solid currentColor;box-sizing:content-box;padding-inline:1px;background:none}
#play[data-state=ended]::before{width:9px;height:9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
#play[data-state=static]::before{display:none}
#play[data-state=ready]::after,#play[data-state=ended]::after{content:'';position:absolute;inset:-4px;border:2px solid var(--accent);border-radius:9px;opacity:0;animation:invite 2.2s ease-out infinite;pointer-events:none}
#playback-state{display:inline-flex;align-items:center;gap:7px}
#playback-state[data-state=playing]::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes invite{0%{opacity:.55;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* Agent cards: setup steps collapsed by default, official download links */
.agent-card{padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:0 4px 12px #4b281b0f;display:flex;flex-direction:column;gap:12px}
.agent-card h3{display:flex;align-items:center;gap:12px;font-size:20px;letter-spacing:-.5px;margin:0}
.agent-link{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;width:fit-content}
.agent-link:hover{text-decoration:underline}
.agent-options{align-items:start}.agent-card details{border-top:1px solid var(--line);padding-top:10px}
.agent-card summary{font-size:13px;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
.agent-card summary::-webkit-details-marker{display:none}
.agent-card summary::after{content:'+';margin-left:auto;font-size:18px;line-height:1}
.agent-card details[open] summary::after{content:'−'}
.agent-card details p{font-size:13px;line-height:1.7;margin:10px 0 0}
.agent-card code{font:12px ui-monospace,monospace;background:var(--tint);border-radius:4px;padding:1px 5px}
body:not(.js) .agent-options{display:grid}
@media(max-width:760px){.agent-card{padding:18px}.agent-card h3{font-size:16px}}
@media(max-width:480px){.agent-options{grid-template-columns:1fr}.agent-card{padding:16px}.agent-card h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){#play::before,#play::after,#playback-state::before{animation:none}#play[data-state]::after{display:none}}
.agent-options .agent-link span{display:inline;margin:0;color:inherit;font-size:inherit}
.agent-card code{white-space:nowrap}

.plugin-fields{display:grid;grid-template-columns:1fr;gap:16px}.plugin-fields .copy-field{margin:0}.plugin-fields textarea{white-space:pre;overflow-x:auto}

/* Privacy policy page */
.policy{max-width:720px;border-top:0}.policy h1{max-width:none;font-size:clamp(34px,4vw,48px)}.policy h2{font-size:22px;letter-spacing:-.5px;margin:34px 0 10px;max-width:none}.policy p{font-size:15px;line-height:1.8;color:var(--ink)}.policy a{color:var(--accent)}.policy-date{color:var(--muted)!important;font-size:13px!important}

/* Get started paths and plugin links */
.start-intro{font-size:14px;color:var(--muted);max-width:64ch;margin:-6px 0 24px}
.path-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:800px}
.path-options button{text-align:left;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 4px 12px #4b281b0f;transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease}
.path-options button strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.3px}
.path-options button span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.path-options button[aria-pressed=true]{background:var(--tint);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 12px #4b281b0f}
.js .path-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.path-title{font-size:19px;margin:28px 0 0}
body:not(.js) .path-options{display:none}
.agent-links{display:flex;flex-direction:column;gap:8px}
.agent-plugin{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:9px 14px;border-radius:7px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;text-decoration:none}
.agent-plugin:hover{background:#803b29}
.agent-card .agent-link{font-weight:500}
@media(max-width:600px){.path-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.path-options button{transition:none}}
.start-steps .plugin-fields .copy-field label{font-size:12px;font-weight:600;color:var(--muted);margin:4px 0 6px}

/* Conversation panel: plain header and footer; Play matches the hero Get started button */
.demo figcaption,.playback{background:var(--paper)}
#play,.playback button:first-child{background:var(--paper);color:var(--ink);border:2px solid #c45736;border-radius:6px;box-shadow:none;font-weight:500}
#play:hover,.playback button:first-child:hover{background:var(--paper);color:var(--ink);border-color:#9f3f25}
#play::before{color:#c45736}
#play[data-state=playing]::before{border-color:#c4573633;border-top-color:#c45736}
#play[data-state=paused]::before{border-color:transparent;border-inline:3px solid #c45736}
#play[data-state=ended]::before{border-color:#c45736;border-right-color:transparent}

/* Conversation as a modern agent session: plain replies, tool activity, thinking state */
.demo figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px}
.demo figcaption strong{font-size:13px;font-weight:600;color:var(--ink)}
.session-chip{font:11px/1.6 ui-monospace,monospace;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.chat-window{gap:16px;padding:22px 22px 18px}
.bubble{font-size:14px;line-height:1.65}
.bubble.agent{background:none;border:0;box-shadow:none;padding:0;max-width:94%;border-radius:0}
.bubble.agent .speaker{font-size:12px;margin-bottom:4px}
.bubble.user{background:#f4f0ec;color:var(--ink);border:1px solid #ebe3dc;border-radius:16px 16px 4px 16px;padding:10px 14px;max-width:80%}
.bubble.user .speaker{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tool-calls{list-style:none;margin:0 0 0 27px;padding:2px 0 2px 14px;border-left:2px solid var(--line);display:grid;gap:7px;flex-shrink:0;max-width:calc(100% - 27px)}
.tool-call{display:flex;align-items:baseline;gap:8px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);min-width:0}
.tool-call .tool-name{color:var(--ink);font-weight:600;flex-shrink:0}
.tool-call code{font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tool-call .tool-result{margin-left:auto;padding-left:8px;white-space:nowrap;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:11px}
.tool-call .tool-result::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#4f8a63;margin-right:6px;vertical-align:1px}
.js .tool-calls.entering .tool-call{animation:arrive .3s ease-out both}
.js .tool-calls.entering .tool-call:nth-child(2){animation-delay:.45s}
.thinking{display:flex;align-items:center;gap:9px;padding:0 0 0 2px;flex-shrink:0;font-size:13px}
.thinking-mark{width:8px;height:8px;border-radius:50%;background:#c45736;animation:pulse 1.2s ease-in-out infinite}
.thinking-text{background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 35%,var(--ink) 50%,var(--muted) 65%,var(--muted) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.8s linear infinite}
@keyframes shimmer{from{background-position:110% 0}to{background-position:-110% 0}}
@media(max-width:480px){.bubble{font-size:13px}.bubble.user{max-width:88%}.tool-calls{margin-left:0}.tool-call{flex-wrap:wrap;row-gap:0}.tool-call .tool-result{margin-left:0;padding-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.thinking-mark,.thinking-text,.js .tool-calls.entering .tool-call{animation:none}.thinking-text{color:var(--muted);background:none}}

/* Evaluation flow: selectable steps with hover lift and lit connectors */
.eval-step{font:inherit;color:#fff;width:100%;cursor:pointer;transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease}
.eval-node.eval-step{background:#ffffff0d;border:1px solid #c99c86;border-radius:28px;padding:15px;font-size:15px;box-shadow:0 4px 12px #1e100c26}
.eval-branch{display:block;background:none;border:1px solid transparent;border-radius:12px;padding:8px 10px 10px;text-align:center}
.eval-branch strong{display:block;font-size:15px;font-weight:600;margin:4px 0 6px}
.eval-branch span{display:block;font-size:12px;color:#fff1e8}
.eval-branches>div{display:flex;flex-direction:column;align-items:stretch}
.eval-outcome.eval-step{border:1px solid #c99c86;background:#ffffff0b;border-radius:10px;padding:14px 18px;font-size:14px}
.eval-step[aria-pressed=true]{background:#ffffff26;border-color:#ffd2bd;box-shadow:0 0 0 1px #ffd2bd,0 8px 20px #1e100c40}
.eval-step:focus-visible{outline:3px solid #ffd2bd;outline-offset:4px}
.eval-connector{transition:color var(--motion-fast) ease,transform var(--motion-fast) ease}
.eval-connector.is-connected{color:#ffd2bd;transform:scale(1.2)}
.eval-detail{min-height:3.6em;margin:18px 0 0;padding:14px 4px 0;border-top:1px solid #ffffff2b;font-size:14px;line-height:1.7;color:#fff1e8;text-align:left}
@media(hover:hover) and (pointer:fine){.eval-step:hover{transform:translateY(-2px);background:#ffffff1f;border-color:#f3b79c;box-shadow:0 10px 24px #1e100c47}}
@media(prefers-reduced-motion:reduce){.eval-step,.eval-connector{transition:none}.eval-step:hover,.eval-connector.is-connected{transform:none}}

/* Replay icon for the ended state, and user typing dots */
#play[data-state=ended]::before{content:'↻';width:auto;height:auto;border:0;border-radius:0;font-size:16px;line-height:1;color:#c45736;transform:translateY(-1px)}
.typing.user-typing{align-self:flex-end;background:#f4f0ec;border:1px solid #ebe3dc;border-radius:16px 16px 4px 16px;padding:13px 16px}
.evaluation-layout .eval-detail{max-width:none;width:100%}
#plugin-prompt,#first-prompt{field-sizing:content;width:100%;min-height:3.8em}

/* Apricot sky theme: light sky surfaces, terracotta actions from the logo, sky accents */
:root{
 --bg:#f7faff; --paper:#fff; --ink:#22252e; --muted:#566072;
 --line:#d5e2f2; --line-accent:#c7d7ee; --soft:#edf3fc; --tint:#e7f0fd; --dark:#22252e;
 --accent:#c4512b; --terracotta:#c45736; --peach:#fdeee6; --apricot:#fdeee6; --apricot-line:#f2c6ad; --sky:#4f84e8;
 --shadow-panel:0 20px 48px rgba(34,52,96,.10);
 --shadow-hover:0 8px 20px rgba(34,52,96,.12);
}
body{background:var(--bg)}
*{scrollbar-color:#a9b8cc #e9eff8}
::-webkit-scrollbar-track{background:#e9eff8}
::-webkit-scrollbar-thumb{background:#a9b8cc;border-color:#e9eff8}
.header-platforms{background:var(--paper);border-color:var(--line)}
.relationship-map{background:linear-gradient(145deg,#fff 0%,#eef4fd 100%);border-color:var(--line);box-shadow:0 12px 32px rgba(34,52,96,.06)}
.ontology-node ellipse{stroke:#c9d5e6}
@media(hover:hover) and (pointer:fine){.ontology-node:hover ellipse,.hero .ontology-node:hover ellipse{fill:var(--apricot);stroke:var(--accent)}}
.ontology-node[aria-pressed=true] ellipse{stroke:#b5462a}
.ontology-edges path.is-connected{stroke:var(--accent)}
.map-explanation{border-color:var(--line)}
.demo{border-color:var(--line);box-shadow:var(--shadow-panel)}
.bubble.user,.typing.user-typing{background:#eef3fb;border-color:#dbe6f5}
.session-chip{border-color:var(--line-accent)}
.thinking-mark{background:var(--sky)}
.setup-companion{border-color:var(--line)}
.setup-topics summary:hover{background:var(--soft)}
.setup-topics details[open]{background:#f1f6fd}
.setup-topics summary::before{color:var(--accent)}
.agent-options button,.agent-card,.path-options button{box-shadow:0 4px 12px rgba(34,52,96,.06)}
.agent-options button[aria-pressed=true],.path-options button[aria-pressed=true]{background:var(--apricot);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 12px rgba(34,52,96,.06)}
.agent-detail{background:linear-gradient(110deg,#f3f7fe,var(--tint))}
.agent-card code{background:var(--tint)}
.agent-plugin{background:var(--accent)}
.agent-plugin:hover{background:#a8411f}
.start-steps>li::before{background:var(--apricot);border-color:var(--apricot-line);color:#a8411f}
.copy-field button{background:var(--apricot);border-color:var(--apricot-line);color:var(--ink)}
.copy-field button:hover{background:#fbe2d4}
.evaluation-band{background:linear-gradient(120deg,#e9f1ff 0%,#f6f3fb 55%,#ffeee2 100%);color:var(--ink)}
.evaluation-layout>div>p,.evaluation-layout .eval-detail,.eval-branch span{color:var(--muted)}
.eval-step{color:var(--ink)}
.eval-node.eval-step,.eval-outcome.eval-step{background:#ffffffc7;border-color:var(--line-accent);box-shadow:0 4px 14px rgba(34,52,96,.07)}
.eval-branches>div{border-bottom-color:var(--line-accent)}
.eval-connector{color:var(--sky)}
.eval-connector.is-connected{color:var(--accent)}
.eval-step[aria-pressed=true]{background:#fff;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 20px rgba(34,52,96,.10)}
.eval-step:focus-visible{outline-color:var(--accent)}
@media(hover:hover) and (pointer:fine){.eval-step:hover{background:#fff;border-color:var(--apricot-line);box-shadow:0 10px 24px rgba(34,52,96,.12)}}
.eval-detail{border-top-color:var(--line-accent)}

/* Evaluation detail: centered logo empty state, like the system map */
#eval-empty-logo{width:18px;height:21px;opacity:.45}
#eval-empty-logo img{width:32px;height:32px;left:-7px;top:-6px}
#eval-empty-logo:not([hidden]){display:block;margin:0 auto 6px}
#eval-empty-logo:not([hidden]) ~ #eval-description{text-align:center}
#eval-title{font-size:15px;color:var(--ink);margin:0 0 6px}
#eval-description{margin:0}

/* Evaluation intro: fuller copy and proof points */
.evaluation-layout .eval-intro{font-size:17px;line-height:1.75;color:#3a4252;max-width:48ch;margin-bottom:22px}
.eval-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.eval-points li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--ink)}
.eval-points li::before{content:'';flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--apricot) center/12px 12px no-repeat;border:1px solid var(--apricot-line);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23c4512b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(max-width:480px){.evaluation-layout .eval-intro{font-size:15px}.eval-points li{font-size:14px}}

/* Evaluation flow framed as a card, matching the system map */
.evaluation-flow{background:linear-gradient(145deg,#fff 0%,#f4f8fe 100%);border:1px solid var(--line);border-radius:20px;padding:22px 24px 18px;box-shadow:var(--shadow-panel)}
.eval-flow-title{font-size:19px;font-weight:600;letter-spacing:-.3px;text-align:left;margin:0 0 18px;color:var(--ink)}
.eval-node.eval-step,.eval-outcome.eval-step,.eval-branch.eval-step{background:#fff;border:1px solid var(--line-accent);box-shadow:0 2px 8px rgba(34,52,96,.06)}
.eval-node.eval-step{border-radius:28px;padding:14px}
.eval-branch.eval-step{border-radius:16px;padding:12px 10px 14px}
.eval-branches{gap:14px;margin-bottom:16px}
.eval-branches>div{border-bottom:0;padding:0}
.eval-branches .eval-connector{margin:2px 0 4px}
.eval-outcome.eval-step{border-radius:14px}
.eval-step[aria-pressed=true]{background:var(--apricot);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 16px rgba(34,52,96,.10)}
@media(hover:hover) and (pointer:fine){.eval-step:hover{background:#fff;border-color:var(--apricot-line);box-shadow:0 8px 20px rgba(34,52,96,.12)}.eval-step[aria-pressed=true]:hover{background:var(--apricot)}}
.evaluation-layout .eval-detail{border-top:1px solid var(--line);margin-top:18px;padding:14px 2px 2px;min-height:4.4em}
@media(max-width:480px){.evaluation-flow{padding:18px 16px 14px}.eval-flow-title{font-size:17px}}
/* Lighter frame: outline only, no fill or shadow */
.evaluation-flow{background:transparent;box-shadow:none;border:1px solid var(--line-accent)}

/* Evaluation steps follow the system map nodes: surface, hover, selection and connectors */
.eval-node.eval-step,.eval-outcome.eval-step,.eval-branch.eval-step{background:linear-gradient(180deg,#fff 0%,#eef3fb 100%);border:1.6px solid #c9d5e6;box-shadow:0 4px 5px #30231f1c;color:var(--ink);font-weight:500}
.eval-branch.eval-step span{color:var(--muted);font-weight:400}
.eval-connector{color:#aaa3a0}
.eval-connector.is-connected{color:var(--accent);transform:none}
@media(hover:hover) and (pointer:fine){.eval-step:hover,.eval-step[aria-pressed=true]:hover{transform:none;background:var(--apricot);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 5px #30231f1c}}
.eval-step[aria-pressed=true],.eval-step[aria-pressed=true]:hover{background:linear-gradient(135deg,#e99b78 0%,#c86a50 100%);border-color:#b5462a;box-shadow:0 4px 5px #30231f1c;color:var(--ink)}
.eval-branch.eval-step[aria-pressed=true] span{color:#2b2420}
/* Map nodes show focus on the ellipse itself, not as a rectangle */
.ontology-node:focus,.ontology-node:focus-visible{outline:none}
.eval-branches .eval-connector-in{margin:4px 0 -6px}
.eval-branches{margin-bottom:8px}
/* Map arrowheads: open chevrons like the evaluation arrows; terracotta when lit */
.ontology-edges path.is-connected{marker-end:url(#arrow-active)}

/* Get started steps: larger titles and numbers so the list has more presence */
.start-steps>li{grid-template-columns:44px minmax(0,1fr);gap:20px;padding:24px 0}
.start-steps>li::before{width:40px;height:40px;font-size:15px;font-weight:600}
.start-steps h3,.start-steps .copy-field>label{font-size:20px;font-weight:600;letter-spacing:-.3px;line-height:1.3;margin:6px 0 10px}
.start-steps p{font-size:15px}
.start-steps .plugin-fields .copy-field label{font-size:12px;letter-spacing:0;margin:4px 0 6px}
@media(max-width:480px){.start-steps>li{grid-template-columns:36px minmax(0,1fr);gap:14px}.start-steps>li::before{width:34px;height:34px;font-size:13px}.start-steps h3,.start-steps .copy-field>label{font-size:17px}}

/* Copy feedback lives on the button; the status line is visible only for manual-copy help */
#copy-status:not(.is-visible){position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.copy-field button.is-copied{display:inline-flex;align-items:center;gap:5px;background:#e8f5ee;border-color:#a9d6bd;color:#2f6b4a}
.copy-field button.is-copied::before{content:'';width:11px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%232f6b4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* Map arrows: short and floating in the gap, the same weight as the evaluation arrows */
.ontology-edges path{stroke-width:1.9;stroke-linecap:round}
.ontology-edges path.is-connected{stroke-width:2.3}

/* Map nodes as rounded tiles, matching the evaluation framework steps */
.ontology-node rect{fill:url(#node-surface);stroke:#c9d5e6;stroke-width:1.6;filter:drop-shadow(0 4px 5px #30231f1c);transition:fill var(--motion-fast) ease,stroke var(--motion-fast) ease,stroke-width var(--motion-fast) ease}
.ontology-node text{font-weight:600;font-size:15px}
@media(hover:hover) and (pointer:fine){.ontology-node:hover rect,.hero .ontology-node:hover rect{fill:var(--apricot);stroke:var(--accent);stroke-width:2.4}}
.ontology-node[aria-pressed=true] rect,.ontology-node[aria-pressed=true]:hover rect{fill:url(#selected-node-gradient);stroke:#b5462a;stroke-width:1.8}
.ontology-node:focus-visible rect{stroke:var(--accent);stroke-width:3}
@media(prefers-reduced-motion:reduce){.ontology-node rect{transition:none}}

/* Give the map more of the hero on wide screens */
@media(min-width:761px){.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:48px}}
.ontology-node text{font-size:16.5px}
.edge-labels text{font-size:14px}
.hero .ontology .entity-detail{font-size:14px}
.hero .ontology .entity-detail h3{font-size:15px}

/* Evaluation intro spacing: heading and intro match the hero; the list gets its own extra room */
.evaluation-layout .eval-copy h2{margin-bottom:26px}
.evaluation-layout .eval-intro{line-height:1.8;margin-bottom:34px}
.eval-points{gap:16px}
/* Learn more: how each agent reaches Fievel's tools */
.agent-card .agent-tools{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.agent-tools strong{display:block;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:2px}

/* Setup topics: titles lead, the answer below stays quieter */
.setup-topics summary{font-size:17px;font-weight:600;color:var(--ink)}
.setup-topics details p{font-size:15px;color:var(--muted)}

/* Map detail: reserve room for a title and description so selecting a node never shifts the hero copy */
@media(min-width:761px){.hero .ontology .entity-detail{min-height:103px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}}
@media(min-width:761px) and (max-width:960px){.hero .ontology .entity-detail{min-height:130px}}

/* Example conversation: a question card with options, as the agent asks it in chat */
.choice-card{flex-shrink:0;margin:0;padding:14px 16px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(34,52,96,.06);display:grid;gap:8px;max-width:88%}
.choice-card legend{float:left;width:100%;padding:0;margin-bottom:4px;font-size:14px;font-weight:600;color:var(--ink)}
.choice-option{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#f9fbfe;transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease}
.choice-option input{appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;flex-shrink:0;border:1.6px solid #b5c3d8;border-radius:50%;background:#fff;display:grid;place-items:center;opacity:1}
.choice-option input::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--motion-fast) ease}
.choice-option input:checked{border-color:var(--accent)}
.choice-option input:checked::after{transform:scale(1)}
.choice-option:has(input:checked){border-color:var(--apricot-line);background:var(--apricot)}
.choice-option span{display:grid;gap:1px}
.choice-option strong{font-size:13px;font-weight:600;color:var(--ink)}
.choice-option small{font-size:12px;color:var(--muted)}
.choice-status{justify-self:end;font-size:11px;color:var(--muted);visibility:hidden}
.choice-card.is-answered .choice-status{visibility:visible}
.choice-card.entering{animation:arrive .25s ease-out}
@media(max-width:480px){.choice-card{max-width:100%}}
@media(prefers-reduced-motion:reduce){.choice-card.entering{animation:none}.choice-option,.choice-option input::after{transition:none}}
/* Evaluation detail: hidden copies of each step's text reserve the tallest height */
.eval-detail-frame{display:grid}
.eval-detail-frame>*{grid-area:1/1}
.eval-sizer{visibility:hidden;pointer-events:none}
.eval-sizer h3{font-size:15px;margin:0 0 6px}
.eval-sizer p{margin:0}
.eval-detail:has(#eval-empty-logo:not([hidden])){display:flex;flex-direction:column;justify-content:center}

/* Selected matches the Get started options: pale apricot with an accent ring. Hover stays lighter: white with a soft apricot border. */
@media(hover:hover) and (pointer:fine){
.eval-step:hover{background:#fff;border-color:var(--apricot-line);box-shadow:0 0 0 1px var(--apricot-line),0 4px 5px #30231f1c}
.ontology-node:hover rect,.hero .ontology-node:hover rect{fill:#fff;stroke:var(--apricot-line);stroke-width:2.4}
}
.eval-step[aria-pressed=true],.eval-step[aria-pressed=true]:hover{background:var(--apricot);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 5px #30231f1c;color:var(--ink)}
.eval-branch.eval-step[aria-pressed=true] span{color:var(--muted)}
.ontology-node[aria-pressed=true] rect,.ontology-node[aria-pressed=true]:hover rect,.hero .ontology-node[aria-pressed=true]:hover rect{fill:var(--apricot);stroke:var(--accent);stroke-width:2.6}
/* Untitled card wrappers: the diagram frames fill their grid column */
.card-block{min-width:0;width:100%}
.card-block .relationship-map{max-width:none}

/* Learn more: keep the plus sign next to its label */
.agent-card summary{justify-content:flex-start;gap:6px}
.agent-card summary::after{margin-left:0}
/* Card titles inside the frame, divided from the diagram by the same line as the detail panel */
.card-title{max-width:none;font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.3px;color:var(--ink);text-align:left;margin:0 0 18px;padding:2px 2px 14px;border-bottom:1px solid var(--line)}
@media(max-width:480px){.card-title{font-size:17px}}
.card-title{display:flex;align-items:center;gap:8px}
.card-title .brand-icon{flex-shrink:0}
.card-title .brand-icon{width:20px;height:23px;margin:-3px 0}
.card-title .brand-icon img{width:36px;height:36px;left:-8px;top:-7px}
/* Phones: a two-column map that fits the screen, so nothing scrolls sideways */
.ontology .ontology-graph-portrait{display:none}
@media(max-width:640px){
.ontology .graph-scroll{display:none}
.ontology .ontology-graph-portrait{display:block;width:100%;max-width:420px;min-width:0;margin:0 auto;overflow:visible}
.ontology-graph-portrait .ontology-node rect{fill:url(#node-surface-p)}
.ontology-graph-portrait .ontology-edges path.is-connected{marker-end:url(#arrow-active-p)}
}
/* Agent cards share rows, so titles, buttons, links and Learn more line up and the cards match in height */
@supports (grid-template-rows:subgrid){
.agent-options{align-items:stretch;row-gap:0}
.agent-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start}
.agent-card h3,.agent-card .agent-links{align-self:start}
@media(max-width:480px){.agent-options{row-gap:12px}}
}
/* Command and prompt fields wrap and grow to fit, so nothing scrolls inside them */
.copy-field textarea{white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;field-sizing:content;min-height:0}
@media(max-width:640px){.ontology-graph-portrait .ontology-node[aria-pressed=true] rect{fill:var(--apricot)}}
.ontology-node,.eval-step{-webkit-tap-highlight-color:transparent}

/* Hero title: even line lengths, so no word sits alone */
#hero-title{text-wrap:balance}
@media(min-width:761px) and (max-width:860px){#hero-title{font-size:43px}}

/* The map now sits beside the setup topics; its detail styles no longer depend on the hero */
.relationship-map.ontology .entity-detail{font-size:14px;line-height:1.8}
.relationship-map.ontology .entity-detail h3{font-size:15px;margin-bottom:8px}
@media(min-width:761px){.relationship-map.ontology .entity-detail{min-height:103px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}}
@media(min-width:761px) and (max-width:960px){.relationship-map.ontology .entity-detail{min-height:130px}}

/* Map nodes scale and move around their own centers during the load entrance */
.ontology-node{transform-box:fill-box;transform-origin:center}

/* Evaluation card matches the system map card */
.evaluation-flow{background:linear-gradient(145deg,#fff 0%,#eef4fd 100%);border:1px solid var(--line);box-shadow:0 12px 32px rgba(34,52,96,.06)}

/* Scroll reveal, added by main.js only when motion is allowed */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.reveal.is-revealed{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Cards answer the pointer: a soft apricot edge and a deeper shadow */
@media(hover:hover) and (pointer:fine){
.agent-card,.demo,.relationship-map,.evaluation-flow{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,opacity .6s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.agent-card:hover,.demo:hover,.relationship-map:hover,.evaluation-flow:hover{border-color:var(--apricot-line);box-shadow:0 0 0 1px var(--apricot-line),0 16px 36px rgba(34,52,96,.10)}
}

/* Learn more: accent color, a sweeping underline and a deeper arrow drop on hover or keyboard focus */
.hero .watch{color:var(--ink);padding:4px 0;background:linear-gradient(var(--accent),var(--accent)) left bottom/0 1.5px no-repeat;transition:color var(--motion-fast) ease,background-size var(--motion-normal) var(--motion-ease)}
.hero .watch:hover,.hero .watch:focus-visible{color:var(--accent);background-size:100% 1.5px}
.hero .watch:hover span,.hero .watch:focus-visible span{transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){.hero .watch{transition:none}.hero .watch:hover span,.hero .watch:focus-visible span{transform:none}}

/* Copied: the green tint and check carry the success; the label stays in normal ink */
.copy-field button.is-copied{color:var(--ink)}

/* Beta: a quiet pill beside the wordmark and a line in the footer */
.wordmark .beta-tag{display:inline-block;margin-left:4px;padding:2px 8px;border:1px solid var(--apricot-line);border-radius:999px;background:var(--apricot);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.2px;line-height:1.4}
.footer-text{display:grid;gap:6px}
.footer-beta{color:var(--muted)}
.footer nav{display:flex;align-items:center;gap:8px}
.footer nav a+a::before{content:"|";margin-right:8px;color:var(--muted)}

/* Closing strip: breathing room before the footer, in the evaluation band's colors */
.closing-band{background:linear-gradient(120deg,#e9f1ff 0%,#f6f3fb 55%,#ffeee2 100%);padding-block:72px;margin-top:24px}
.closing-inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.closing-logo.brand-icon{width:44px;height:50px;margin:0}
.closing-logo.brand-icon img{width:80px;height:80px;left:-18px;top:-15px}
.closing-line{margin:0;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-1px;line-height:1.2;color:var(--ink);text-wrap:balance}
@media(max-width:480px){.closing-band{padding-block:52px}}
.closing-logo{mix-blend-mode:multiply}

/* Footer: credits, beta note and links share one line on wide screens, separated like the rest */
@media(min-width:900px){
.footer{flex-direction:row;align-items:center}
.footer-text{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.footer-beta::before{content:"|";margin:0 .45em}
}

/* Path choices answer the pointer like the cards: soft apricot edge and deeper shadow until chosen */
@media(hover:hover) and (pointer:fine){
.path-options button{transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease,box-shadow var(--motion-normal) ease}
.path-options button:not([aria-pressed=true]):hover{border-color:var(--apricot-line);box-shadow:0 0 0 1px var(--apricot-line),0 16px 36px rgba(34,52,96,.10)}
.path-options button[aria-pressed=true]:hover{box-shadow:0 0 0 1px var(--accent),0 16px 36px rgba(34,52,96,.10)}
}

/* Closing strip: the logo gives a small playful tilt when the strip is hovered */
.closing-logo{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover) and (pointer:fine){.closing-band:hover .closing-logo{transform:rotate(-8deg) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.closing-logo{transition:none}.closing-band:hover .closing-logo{transform:none}}

/* Get started: fills with apricot, lifts, and the logo tips on hover or keyboard focus */
.hero .primary{transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,transform var(--motion-normal) var(--motion-ease)}
.hero .primary .brand-icon{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hero .primary:hover,.hero .primary:focus-visible{background:var(--apricot);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px rgba(196,81,43,.18)}
.hero .primary:hover .brand-icon,.hero .primary:focus-visible .brand-icon{transform:rotate(-10deg) scale(1.1)}
.hero .primary:active{transform:none;box-shadow:none}

/* Copy fields: the box takes an apricot edge, and Copy turns solid accent */
.copy-field>div{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease}
.copy-field button{transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease,box-shadow var(--motion-normal) ease}
@media(hover:hover) and (pointer:fine){
.copy-field>div:hover{border-color:var(--apricot-line);box-shadow:0 0 0 1px var(--apricot-line),0 10px 24px rgba(34,52,96,.08)}
.copy-field button:not(.is-copied):hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(196,81,43,.25)}
}
.copy-field button:not(.is-copied):focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
@media(prefers-reduced-motion:reduce){.hero .primary,.hero .primary .brand-icon,.copy-field>div,.copy-field button{transition:none}.hero .primary:hover,.hero .primary:focus-visible,.copy-field button:hover{transform:none}.hero .primary:hover .brand-icon,.hero .primary:focus-visible .brand-icon{transform:none}}
.hero .primary .brand-icon{mix-blend-mode:multiply}
/* Keep the evaluation branches aligned when their labels wrap on mobile. */
@media(max-width:640px){
  .eval-branches{align-items:stretch}
  .eval-branches>div{min-width:0;display:grid;grid-template-rows:2rem minmax(120px,1fr) 2rem;align-items:center}
  .eval-branches .eval-connector{margin:0;line-height:1.2}
  .eval-branch.eval-step{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere}
  .eval-branch.eval-step strong,.eval-branch.eval-step span{overflow-wrap:anywhere}
}