/* The five-stage demo reuses the public theme, form, and icon tokens. */
.hero h1.loop-hero-title {font-size:clamp(32px,3.55vw,55px);line-height:1.23;}
.loop-section {background:var(--surface-2);border-bottom:1px solid var(--line);}
.loop-section .section-head {align-items:end;}
.loop-reset {display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 11px;border-radius:7px;color:var(--muted);font-size:13px;}
.loop-reset:hover {background:var(--surface-3);color:var(--text);}
.loop-box {background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;}
.loop-trail {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line);padding:0 16px;}
.loop-step {display:flex;align-items:center;position:relative;gap:9px;padding:15px 9px 17px;text-align:left;color:var(--muted);background:transparent;}
.loop-step::after {content:"";position:absolute;left:9px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;}
.loop-step>i {width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);}
.loop-step>span {display:grid;gap:3px;font-size:13px;font-weight:600;}
.loop-step small {font-family:var(--mono);color:var(--muted);font-size:10px;font-weight:500;}
.loop-step:disabled {opacity:.77;}
.loop-step[aria-current=step] {color:var(--accent);}
.loop-step[aria-current=step]::after {background:var(--accent);}
.loop-step[aria-current=step]>i {background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);}
.loop-layout {display:grid;grid-template-columns:minmax(0,1.95fr) minmax(225px,.88fr);}
.loop-stage {min-width:0;padding:clamp(20px,2.6vw,39px);}
.loop-step-counter,.loop-folio {display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:9px;}
.loop-step-counter span {color:var(--accent);font-family:var(--mono);letter-spacing:.035em;}
.loop-stage>h3 {font-size:clamp(21px,1.95vw,30px);letter-spacing:-.045em;line-height:1.35;}
.loop-lede,.loop-note,.loop-wait {color:var(--muted);font-size:13px;line-height:1.7;}
.loop-lede {margin-top:7px;}
.loop-sectors {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:22px;}
.loop-sector {position:relative;display:grid;justify-items:start;align-content:start;gap:11px;padding:14px 10px 12px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0;}
.loop-sector .tone-icon {width:34px;height:34px;border-radius:8px;}
.loop-sector>span {display:grid;gap:5px;}
.loop-sector b {font-size:15px;}
.loop-sector small {color:var(--muted);font-size:11px;}
.loop-sector[aria-pressed=true] {border-color:var(--accent);background:var(--accent-soft);}
.choice-indicator {position:absolute;right:9px;top:11px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line);}
.loop-sector[aria-pressed=true] .choice-indicator {color:#fff;background:#285bd7;border-color:#285bd7;}
.loop-example,.loop-method,.loop-task {display:flex;align-items:center;gap:11px;margin:16px 0;border:1px solid var(--line);padding:12px 14px;border-radius:9px;background:var(--surface-2);}
.loop-example>i,.loop-task>i,.loop-method-icon {display:grid;place-items:center;color:var(--accent);flex:none;}
.loop-example small,.loop-method small,.loop-task small,.loop-fields small,.loop-meta,.loop-label {display:block;font-size:11px;line-height:1.5;color:var(--muted);}
.loop-example p,.loop-method b,.loop-task b {display:block;margin-top:3px;font-size:14px;line-height:1.6;}
.loop-actions,.loop-controls {display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.loop-actions {margin-top:17px;}
.loop-actions .text-link {font-size:13px;}
.loop-case {position:relative;background:radial-gradient(ellipse at 100% 5%,#243d68,transparent 68%),#10213b;color:#e7f0ff;padding:clamp(20px,2.3vw,34px);display:flex;flex-direction:column;isolation:isolate;}
.loop-case::before {position:absolute;content:"";inset:0;z-index:-1;background-image:linear-gradient(#91baff09 1px,transparent 1px),linear-gradient(90deg,#91baff09 1px,transparent 1px);background-size:25px 25px;}
.loop-folio {color:#adc9ff;font-size:11px;}
.loop-folio i {width:18px;height:2px;background:#7cb6ff;}
.loop-case>h3 {font-size:22px;letter-spacing:-.035em;margin-bottom:6px;}
.loop-case>p {font-size:12px;line-height:1.7;color:#bbcae0;}
.loop-path {margin:18px 0 12px;display:grid;gap:0;}
.loop-node {position:relative;display:flex;align-items:flex-start;gap:9px;padding:0 0 13px;}
.loop-node:not(:last-child)::after {content:"";position:absolute;left:12px;top:25px;bottom:1px;background:#41607f;width:1px;}
.loop-node i {width:26px;height:26px;display:grid;place-items:center;flex:none;color:#acc1dc;border:1px solid #48617e;background:#182d49;border-radius:7px;}
.loop-node.ready i {color:#90dcd6;border-color:#44737f;}
.loop-node>span {display:grid;gap:3px;}
.loop-node small,.loop-case-id {font-size:10px;line-height:1.45;color:#adbed7;}
.loop-node b {font-size:12px;line-height:1.5;font-weight:550;}
.loop-case-id {border-top:1px solid #364a67;padding-top:10px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;}
.loop-case-id code,.loop-method code,.loop-code code {font-family:var(--mono);font-size:11px;}
.loop-document {border:1px solid var(--line);border-radius:9px;padding:15px;margin-top:16px;}
.loop-doc-head {display:flex;align-items:center;gap:10px;}
.loop-doc-head>div {display:grid;gap:3px;}
.loop-doc-head small {color:var(--muted);font-size:11px;}
.loop-doc-head b {font-size:14px;}
.loop-doc-head>.pill {margin-left:auto;}
.loop-question {margin:14px 0 8px;}
.loop-document p,.loop-fields p,.loop-map b {font-size:13px;line-height:1.72;}
.loop-meta {border-top:1px solid var(--line);margin-top:10px;padding-top:9px;display:flex;gap:12px;flex-wrap:wrap;}
.loop-note,.loop-error {display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
.loop-note svg,.loop-error svg {margin-top:3px;}
.loop-method-icon {background:var(--violet-bg);color:var(--violet);width:34px;height:34px;border-radius:9px;}
.loop-method code {margin-left:auto;color:var(--muted);overflow-wrap:anywhere;}
.loop-method.accepted .loop-method-icon,.loop-task>i {color:var(--green);}
.loop-method.accepted>.pill {margin-left:auto;}
.loop-fields {display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.loop-fields>div {border-left:2px solid var(--line);padding-left:10px;}
.loop-label {margin-bottom:5px;}
.loop-controls {margin:18px 0 10px;align-items:flex-end;}
.loop-controls .field {min-width:135px;font-size:11px;color:var(--muted);}
.loop-controls .field select {min-height:38px;color:var(--text);font-size:13px;}
.loop-code {border:1px solid var(--line);border-radius:7px;margin:9px 0;background:var(--surface-2);padding:0 11px;}
.loop-code summary {cursor:pointer;font-size:12px;padding:11px 0;font-weight:600;}
.loop-code summary code {margin-left:6px;color:var(--muted);}
.loop-code pre {white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.62;}
.loop-code>p {font-size:11px;line-height:1.6;padding-bottom:8px;color:var(--muted);}
.loop-check {display:flex;align-items:center;gap:8px;font-size:13px;min-height:34px;cursor:pointer;line-height:1.5;}
.loop-check input {width:16px;height:16px;accent-color:var(--accent);}
.compact-check {font-size:12px;color:var(--muted);}
.loop-data {display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;margin:0;}
.loop-data>div {min-width:0;padding:10px 13px;}
.loop-data dt,.loop-map small {color:var(--muted);font-size:11px;}
.loop-data dd {margin:4px 0 0;font-size:12px;overflow-wrap:anywhere;line-height:1.55;}
.loop-map {display:grid;gap:7px;margin-top:16px;}
.loop-map>div {display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;}
.loop-map i {display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:var(--accent);background:var(--accent-soft);flex:none;}
.loop-map span {display:grid;gap:2px;font-size:13px;line-height:1.5;}
.loop-task {background:var(--green-bg);}
.loop-error {padding:9px 12px;background:var(--amber-bg);color:var(--amber);font-size:13px;border-radius:7px;margin:9px 0;}
.loop-wait {display:block;margin-top:8px;}
#loop-step-title:focus {outline:none;}
@media(max-width:920px) {.loop-layout{grid-template-columns:minmax(0,1.75fr) minmax(175px,.8fr)}.loop-trail{padding:0 8px}.loop-step{padding-inline:5px;gap:5px}.loop-case{padding:18px}.loop-stage{padding:20px}.loop-sector b{font-size:14px}}
@media(max-width:670px) {
  .hero h1.loop-hero-title{font-size:clamp(27px,6.9vw,40px);line-height:1.25;}
  .loop-section .section-head{align-items:start;gap:7px;}
  .loop-reset{padding-left:0;min-height:44px;}
  .loop-trail{padding:0 3px;}
  .loop-step{display:grid;justify-items:center;align-content:start;text-align:center;padding:10px 1px;min-height:60px;gap:4px;}
  .loop-step>i{width:24px;height:24px;border-radius:5px;}
  .loop-step>i svg{width:14px;}
  .loop-step>span{font-size:10px;line-height:1.5;gap:0;}
  .loop-step small{display:none;}
  .loop-step::after{left:3px;right:3px;}
  .loop-layout{display:flex;flex-direction:column;}
  .loop-stage{padding:17px 13px;}
  .loop-sectors{margin-top:13px;gap:5px;}
  .loop-sector{padding:9px 6px;gap:5px;}
  .loop-sector small{font-size:10px;line-height:1.5;}
  .loop-sector b{font-size:13px;}
  .loop-sector .tone-icon{height:26px;width:26px;}
  .choice-indicator{height:12px;width:12px;top:7px;right:4px;}
  .loop-case{padding:16px;display:grid;grid-template-columns:1fr auto;gap:3px 8px;}
  .loop-case>h3{font-size:18px;grid-column:1;}
  .loop-case>p{grid-column:1/-1;}
  .loop-folio{grid-column:1/-1;margin-bottom:4px;}
  .loop-path{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;}
  .loop-node{padding:0;}
  .loop-node:not(:last-child)::after{display:none;}
  .loop-case-id{grid-column:1/-1;}
  .loop-check,.loop-code summary,.loop-controls .field select{min-height:44px;}
  .loop-actions{gap:7px;}
  .loop-question select,.loop-controls .field select{font-size:16px;}
  .loop-controls{align-items:stretch;}
  .loop-doc-head .tone-icon{width:29px;height:29px;}
  .loop-doc-head{gap:6px;}
  .loop-doc-head b{font-size:13px;}
  .loop-method{padding:10px;flex-wrap:wrap;}
  .loop-fields{gap:7px;}
}


.flow-import-tools {margin:0 18px 8px;}
.flow-import-tools .text-link {font-size:12px;}
.flow-import-error {padding:8px 10px;border-radius:6px;background:var(--amber-bg);color:var(--amber);font-size:13px;}
.pub-api {max-width:940px;margin-inline:auto;overflow-wrap:anywhere;}
.pub-api header {padding:12px 0 24px;}
.pub-api h1 {font-size:clamp(29px,3.2vw,46px);margin-bottom:12px;}
.pub-api section {padding:22px clamp(12px,3vw,29px);margin:14px 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
.pub-api h2 {font-size:22px;margin-bottom:12px;}
.pub-api h3 {font-size:17px;margin:15px 0 7px;}
.pub-api p,.pub-api li {font-size:14px;line-height:1.8;color:var(--muted);}
.pub-api p {margin:7px 0;}
.pub-api header .btn {margin-top:12px;}
.pub-api ul,.pub-api ol {padding-left:22px;}
.pub-api li {margin:6px 0;}
.pub-api a:not(.btn) {color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.pub-api code {font: .91em var(--mono);overflow-wrap:anywhere;}
.pub-api pre {padding:16px;background:var(--surface-2);color:var(--text);border-radius:7px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;}