:root{--blue:#80b7ff;--green:#9ce5ac;--orange:#ffbd78;--red:#ff999a}
.sidebar .transport,.sidebar .chapters{grid-area:auto;width:100%;margin:0;min-width:0}
.gateway-layout>.workspace{grid-column:2;grid-row:1}.gateway-layout>.narrative{grid-column:3;grid-row:1}
.sidebar .timeline{margin-inline:0}
body{font-family:var(--font);line-height:1.45}
button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #82964c;outline-offset:3px}
button{cursor:pointer}button:disabled{cursor:default}.topnav{position:relative;min-height:76px;height:auto;flex-wrap:wrap;padding-block:14px;gap:18px}.topnav__brand{font:650 16px var(--font);white-space:nowrap}.tabs a{font-size:14px;padding:9px 17px}.tabs{flex-wrap:wrap}.workshop-tools{gap:8px}.workshop-tools>span{font-size:10px}.lang button{padding:9px 10px}
.gateway-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 285px;gap:26px;max-width:1660px;margin:auto;padding:28px 30px 24px;align-items:start}
.sidebar{display:grid;gap:24px;position:sticky;top:20px}.transport{gap:10px}.controls .btn{font-size:14px;padding:12px 10px;gap:5px}.secondary-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.secondary-controls button,.mode button{border:1px solid var(--border);background:transparent;border-radius:9px;padding:9px;color:var(--text);font-size:13px}.secondary-controls button:hover,.mode button:hover{background:var(--sage)}
.timeline{width:100%;accent-color:var(--olive);cursor:pointer}.time{font-size:11px}.chips{gap:7px}.chip{padding:12px 10px;font-size:15px}.chip[aria-current=true]{background:var(--sage);border-color:var(--olive)}.mode{display:grid;gap:6px}.mode button[aria-pressed=true]{background:var(--yellow-soft);border-color:#b8b441}.speed{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.speed select{border:1px solid var(--border);background:transparent;border-radius:6px;padding:5px}.shortcut{font-size:11px;color:var(--muted);margin:0;line-height:1.7}
.workspace{min-width:0}.stage{aspect-ratio:auto;min-height:440px;border-radius:22px;color:#fafaf5;overflow:hidden}.stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px 0;font:11px var(--f-mono);color:#d0d9c4;letter-spacing:.05em}.stage-head strong{font-size:12px;color:#f3ed57;font-weight:500}.status-badge{border:1px solid #718367;border-radius:20px;padding:5px 10px;white-space:nowrap}.diagram{position:relative;height:330px;margin:2px 8px 0}.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.wire{fill:none;stroke:#607361;stroke-width:1.5;stroke-dasharray:4 5;opacity:.5}.wire.active{stroke:var(--blue);stroke-width:2.4;opacity:1;stroke-dasharray:7 5}.wire.recovery{stroke:var(--orange)}.wire.failed{stroke:var(--red);opacity:1}.wire.success{stroke:var(--green);opacity:1}.packet{fill:var(--blue);filter:drop-shadow(0 0 5px currentColor);offset-rotate:0deg;animation:travel .55s ease-out both}.packet.recovery{fill:var(--orange)}.packet.success{fill:var(--green)}@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
.node{position:absolute;transform:translate(-50%,-50%);border:1px solid #6d7e63;border-radius:12px;background:#2a382a;text-align:center;padding:12px 8px;box-shadow:0 5px 15px #101a1020}.app-node{left:12%;top:43%;width:22%;font-size:13px}.app-node>span{display:block;font-size:24px;line-height:1.2;color:#e7edc8;margin-bottom:6px}.gateway-node{left:43%;top:43%;width:27%;border-color:#b9be69;background:#3b472d;padding:18px 5px}.gateway-node b{display:block;font:600 10px var(--f-mono);color:#f3ed57;letter-spacing:.08em}.gateway-node strong{display:block;font-size:17px;margin:5px 0}.gateway-node small{font-size:10px;color:#d0d9c4}.fallback-node{left:43%;top:84%;width:28%;font-size:12px;border-color:#9c744f;opacity:.5}.fallback-node.active{opacity:1;background:#62482f;color:#ffd7a7}.fallback-node span{display:block;font:9px var(--f-mono);margin-top:4px}.model-node{left:81%;width:30%;display:grid;grid-template-columns:30px 1fr;text-align:left;gap:0 8px;padding:10px;min-height:71px}.model-node[data-model=A]{top:16%}.model-node[data-model=B]{top:43%}.model-node[data-model=C]{top:70%}.model-letter{grid-row:1/4;align-self:center;border:1px solid #718166;border-radius:9px;display:grid;place-items:center;font:16px var(--f-mono);width:30px;height:34px}.model-node strong{font-size:16px;line-height:1.1}.model-node small{font-size:10px;color:#c7d3bc}.model-state{font:10px var(--f-mono);margin-top:4px;color:#ced9bf}.model-node[data-state=executing]{border-color:var(--blue);box-shadow:0 0 22px #80b7ff25}.model-node[data-state=success]{border-color:var(--green)}.model-node[data-state=success] .model-state{color:var(--green)}.model-node[data-state=timeout],.model-node[data-state=rateLimit],.model-node[data-state=outage],.model-node[data-state=invalid]{border-color:var(--red)}.model-node[data-state=timeout] .model-state,.model-node[data-state=rateLimit] .model-state,.model-node[data-state=outage] .model-state,.model-node[data-state=invalid] .model-state{color:var(--red)}
.stage-event{margin:0 20px 16px;border-top:1px solid #5e7057;padding-top:12px;display:flex;gap:10px;font-size:13px;min-height:36px}.stage-event code{color:#f3ed57;font-size:11px;white-space:nowrap}.legend{display:flex;flex-wrap:wrap;gap:16px;margin:12px 3px;color:var(--muted);font-size:11px}.legend span:first-child{color:#365a90}.legend span:last-child{color:#8a4a12}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}.metric{background:var(--sage);border:1px solid var(--border);border-radius:11px;padding:13px 10px;min-width:0}.metric dt{font-size:11px;color:var(--muted);margin-bottom:6px}.metric dd{font:650 clamp(15px,1.55vw,24px) var(--font);margin:0;white-space:nowrap}.metric dd small{font-size:11px;font-weight:400}.fixture-note{font-size:11px;color:var(--muted);margin:13px 3px}
.narrative{min-width:0}.narrative h1{font-size:clamp(30px,3vw,44px);margin:14px 0 7px;line-height:1.04}.subtitle{font-size:15px;color:var(--muted);margin:0 0 26px}.chapter-copy{padding-top:20px;border-top:1px solid var(--border)}.chapter-copy h2{font-size:24px;line-height:1.15;margin:10px 0 12px;letter-spacing:-.02em}.chapter-copy p{font-size:15px;line-height:1.55}.chapter-copy .question{font-size:12px;color:var(--olive)}.insight{padding:14px 16px;background:var(--yellow-soft);border-left:3px solid #a7a645;border-radius:0 9px 9px 0;font-size:14px;font-weight:600;line-height:1.5}.checkpoint{font-size:12px;color:var(--olive);margin-top:18px}.policy-panel{border-top:1px solid var(--border);margin-top:20px;padding-top:16px;display:grid;gap:13px}.policy-switch{display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:14px;cursor:pointer}.policy-switch small{display:block;color:var(--muted);font:9px var(--f-mono);margin-top:3px}.policy-switch input{appearance:none;width:36px;height:22px;flex-shrink:0;border-radius:20px;background:#c7cdb9;cursor:pointer;border:3px solid #c7cdb9;position:relative}.policy-switch input:before{content:'';position:absolute;left:0;top:0;width:16px;height:16px;border-radius:100%;background:#fff}.policy-switch input:checked{background:var(--olive);border-color:var(--olive)}.policy-switch input:checked:before{left:14px}.field{display:grid;gap:5px;font-size:12px;color:var(--muted)}.field select{color:var(--text);background:var(--paper);padding:9px 8px;border:1px solid #b6bda7;border-radius:7px;max-width:100%;width:100%;font-size:13px}.run-button{width:100%;margin-top:4px}.decision{background:var(--sage);border-radius:10px;padding:12px 14px;font-size:12px;line-height:1.5;margin-top:15px}.decision p{margin:5px 0}.decision dl{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0}.decision dt{color:var(--muted);font-size:10px}.decision dd{margin:0;font-weight:650}.lesson-link{display:inline-block;color:var(--olive);font-size:13px;margin-top:22px}
.request-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 14px}.request-card{color:var(--text);text-align:left;border:1px solid var(--border);border-radius:12px;background:transparent;padding:12px;transition:background .15s}.request-card[aria-pressed=true]{border-color:var(--olive);background:var(--sage)}.request-card strong{font-size:14px;display:block;line-height:1.2;margin:7px 0}.request-card small{font-size:10px;display:block;color:var(--muted);line-height:1.4}.request-card .category{font:9px var(--f-mono);color:var(--olive);text-transform:uppercase}.request-card .intent{margin:6px 0;min-height:30px}.lesson-comparison{border:1px solid var(--border);border-radius:12px;padding:14px;margin:14px 0}.lesson-comparison h3{font-size:14px;margin:0 0 12px}.price-rows{display:grid;gap:8px}.price-row{display:grid;grid-template-columns:100px 1fr 80px;gap:12px;align-items:center;font-size:12px}.price-bar{height:8px;border-radius:6px;background:#dce1d1}.price-bar span{display:block;height:100%;background:#718352;border-radius:6px;min-width:3px}.price-row:first-child .price-bar span{background:#a78855}.price-row strong{text-align:right;font-variant-numeric:tabular-nums}.mini-comparison{display:flex;gap:20px;font-size:12px}.mini-comparison strong{display:block;font-size:16px}.result-explanation{font-size:14px;line-height:1.5;border-left:3px solid var(--olive);padding:8px 13px;margin:14px 0}.trace-box{border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:15px}.trace-box h3{font-size:13px;margin:0 0 9px;display:flex;justify-content:space-between}.trace-list{margin:0;padding:0;list-style:none;max-height:220px;overflow:auto;scrollbar-width:thin;font-size:12px}.trace-list li{display:grid;grid-template-columns:75px 1fr;gap:7px;padding:5px 3px;border-top:1px solid #e7eadf}.trace-list time{font:10px var(--f-mono);color:var(--muted);padding-top:3px}.trace-list li[data-tone=failure]{color:#9a3236}.trace-list li[data-tone=recovery]{color:#874411}.trace-list li[data-tone=success]{color:#3f6239}.trace-empty{font-size:12px;color:var(--muted)}
.details{border-top:1px solid var(--border);margin-top:18px;padding-top:13px;font-size:12px}.details summary{cursor:pointer;font-size:13px;color:var(--olive);font-weight:600}.details p{line-height:1.6}.model-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.model-details>div{padding:12px;border-radius:10px;background:var(--sage);font-size:11px}.model-details h4{font-size:15px;margin:0 0 5px}.model-details p{margin:6px 0}.model-details dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:5px}.model-details dd{margin:0;font-weight:650}.model-details .price-info{font-variant-numeric:tabular-nums}.mission{padding:17px 20px;border:1px solid #c2c56b;border-radius:14px;background:var(--yellow-soft);margin-bottom:16px}.mission h2{margin:0;font:600 11px var(--f-mono);color:var(--olive)}.mission strong{display:block;font-size:19px;margin:8px 0}.mission p{font-size:12px;margin:0}.mission .baseline{color:var(--muted);font-size:11px;margin-top:9px}.batch-progress{display:flex;gap:15px;align-items:center;margin:12px 0;font-size:12px}.batch-progress progress{width:100%;accent-color:var(--olive);height:9px}.batch-progress span{white-space:nowrap}.batch-extra{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--muted);margin:12px 0}.batch-extra b{color:var(--text);font-weight:650}.batch-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.batch-actions button{font-size:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--sage);color:var(--text)}.comparison-scroll{overflow-x:auto;margin:15px 0;border-radius:10px;border:1px solid var(--border)}.comparison-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.comparison-table th{font-size:10px;background:var(--sage);font-weight:600}.comparison-table th,.comparison-table td{padding:10px 9px;border-bottom:1px solid var(--border)}.comparison-table tr[aria-current=true]{background:var(--yellow-soft)}.comparison-table button{border:0;color:var(--olive);background:transparent;text-align:left;font-size:12px;text-decoration:underline;padding:0}.comparison-table td:not(:first-child){white-space:nowrap;font-variant-numeric:tabular-nums}.comparison-note{font-size:11px;color:var(--muted);line-height:1.5}.challenge-result{border:1px solid var(--border);background:var(--sage);padding:18px;border-radius:12px;margin-top:15px}.challenge-result h3{margin:0;font-size:19px}.challenge-result p,.challenge-result li{font-size:13px}.challenge-result ol{padding-left:20px}.challenge-result .final-insight{font-size:17px;font-weight:650;color:var(--olive)}.footer-note{max-width:1660px;margin:0 auto;padding:0 30px 30px;font-size:11px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.gateway-layout{grid-template-columns:230px minmax(0,1fr) 330px;gap:30px}.diagram{height:400px}.stage{min-height:510px}.model-node{padding:14px}.model-node strong{font-size:19px}.model-node small{font-size:12px}}
@media(max-width:1200px){.gateway-layout{grid-template-columns:180px minmax(0,1fr);padding:22px;gap:20px}.narrative{grid-column:2;grid-row:1}.workspace{grid-column:2;grid-row:2}.sidebar{grid-column:1;grid-row:1/3}.narrative h1{font-size:36px}.narrative .subtitle{margin-bottom:12px}.chapter-copy{padding-top:8px}.chapter-copy h2{font-size:21px;margin:5px 0}.chapter-copy p{margin:6px 0}.policy-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:14px;padding-top:12px}.run-button{grid-column:1/-1}.decision{margin-top:10px}.insight{margin-top:10px}.narrative .lesson-link{display:none}.checkpoint{margin:8px 0}.topnav{padding-inline:22px}.workshop-tools>span{display:none}.stage{min-height:430px}.metric dd{font-size:22px}.narrative .kicker{font-size:10px}}
@media(max-width:760px){.topnav{min-height:110px;padding:12px 16px;gap:10px}.topnav__brand{font-size:15px}.workshop-tools{margin-left:auto}.workshop-tools .lang button{padding:8px}.fullscreen{font-size:0;padding:8px}.fullscreen:after{content:'↗';font-size:16px}.tabs{order:3;flex-basis:100%;justify-content:center;gap:5px}.tabs a{padding:8px 13px;font-size:12px}.gateway-layout{display:flex;flex-direction:column;padding:18px 14px;gap:18px}.sidebar{position:static;width:100%;gap:12px}.sidebar .transport{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.sidebar .transport>.timeline-wrap{grid-column:1/-1}.sidebar .controls{grid-column:1}.sidebar .secondary-controls{grid-column:2;grid-row:1}.sidebar .chapters{gap:8px}.chips{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.chip{font-size:11px;gap:5px;padding:9px 7px;min-height:44px}.chip b{font-size:10px}.sidebar-options{display:flex;align-items:center;gap:14px}.mode{display:flex}.mode button{font-size:11px;padding:7px}.speed{gap:6px;font-size:11px}.shortcut{display:none}.sidebar .chapters>.label{display:none}.narrative{width:100%;display:contents}.narrative>header{order:-1}.narrative h1{font-size:34px;margin:5px 0}.narrative .subtitle{margin:6px 0;font-size:14px}.chapter-copy{width:100%;border-top:0;padding:0}.chapter-copy h2{font-size:24px}.chapter-copy .question{margin:5px 0}.policy-panel{width:100%;margin:0;padding-top:10px}.decision{width:100%;margin:0}.narrative>.insight,.narrative>.checkpoint{width:100%;margin:0}.workspace{width:100%}.stage{min-height:400px;border-radius:16px}.stage-head{padding:16px 14px 0;font-size:9px}.stage-head strong{font-size:10px}.diagram{height:310px;margin:0 2px}.node{border-radius:8px}.app-node{font-size:10px;padding:9px 4px;width:22%}.app-node>span{font-size:19px}.gateway-node{padding:13px 4px}.gateway-node strong{font-size:13px}.gateway-node b{font-size:8px;letter-spacing:0}.gateway-node small{font-size:8px}.model-node{padding:8px 5px;grid-template-columns:20px 1fr;gap:3px 5px;width:30%;min-height:65px}.model-node strong{font-size:13px}.model-letter{width:20px;height:26px;font-size:11px;border-radius:5px}.model-node small{font-size:8px}.model-state{font-size:8px;margin-top:1px;overflow-wrap:anywhere}.fallback-node{font-size:10px;padding:9px 4px;width:30%}.fallback-node span{font-size:8px}.stage-event{font-size:11px;margin:0 13px 12px;min-height:42px}.stage-event code{font-size:9px}.metrics{gap:5px}.metric{padding:10px 7px;border-radius:8px}.metric dt{font-size:9px;min-height:25px}.metric dd{font-size:16px}.request-cards{gap:5px}.request-card{padding:9px 7px}.request-card strong{font-size:12px}.request-card small{font-size:9px}.request-card .category{font-size:8px}.request-card .intent{min-height:48px}.model-details{grid-template-columns:1fr}.model-details>div{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}.model-details dl{grid-row:1/5;grid-column:2}.price-row{grid-template-columns:80px 1fr 65px;font-size:11px;gap:8px}.comparison-table{font-size:10px}.comparison-table th,.comparison-table td{padding:9px 6px}.comparison-table button{font-size:10px}.comparison-table th{font-size:9px}.footer-note{padding:0 14px 20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.packet{display:none}}
.legend span:only-child{color:#365a90}
@media(min-width:761px) and (max-width:1200px){.gateway-layout>.narrative{grid-column:2;grid-row:1}.gateway-layout>.workspace{grid-column:2;grid-row:2}}
@media(max-width:760px){
  .sidebar{display:flex;flex-direction:column;min-width:0}
  .sidebar .transport{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sidebar-options{flex-wrap:wrap;justify-content:space-between}
  .chip span{overflow-wrap:anywhere}
  .chapter-copy{order:-3}.narrative>header{order:-5}.sidebar{order:-4}
  .narrative>.insight{order:-2}.policy-panel{order:-1}.narrative>.checkpoint{order:-1}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric dd{font-size:20px}.metric dt{font-size:11px;min-height:0}
  .policy-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .policy-switch{font-size:12px}.controls .btn{font-size:12px}
}