/* how-it-works.html's styles. Made by publish-site.py from the Design Lab draft how-it-works-b.html; don't edit it by hand. */
.z-setup{--st:var(--text-secondary)}
.z-plan{--st:var(--text-brand)}
.z-spec{--st:var(--viz-stage-pspec)}
.z-design{--st:var(--ai-ink)}
.z-build{--st:var(--text-link)}
.z-ship{--st:var(--viz-stage-deployed)}
.z-iter{--st:var(--status-success)}

.hero{padding-block:72px 44px;text-align:center}
.hero h1{font:600 clamp(38px,4.6vw,72px)/1.05 var(--font-display);letter-spacing:-.025em;margin:18px auto 0;max-width:14em}
.hero .lede{font-size:clamp(18px,1.45vw,22px);line-height:1.55;color:var(--text-secondary);margin:22px auto 0;max-width:36em;text-wrap:balance}
.nw{white-space:nowrap}
.hero .cta-row{margin-top:32px;justify-content:center}

.map-sec{padding-bottom:96px}
.map{margin:0;padding:clamp(16px,2.6vw,40px) clamp(12px,2.6vw,40px) 22px;border:1px solid var(--border-default);border-radius:var(--radius-xl);background-color:var(--surface-raised);background-image:radial-gradient(circle,var(--border-default) 1px,transparent 1.6px);background-size:24px 24px;box-shadow:var(--shadow-1)}
.map svg{display:block;width:100%;height:auto;margin-inline:auto}
.map .map-wide{max-width:1320px}
.map .map-narrow{display:none;max-width:400px}
.map figcaption{margin-top:18px;text-align:center;font-size:14px;color:var(--text-muted)}
.map text{font-family:var(--font-ui)}
.mz{fill:var(--st);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mz-bar{fill:none;stroke:var(--st);stroke-width:3;stroke-linecap:round}
.m-box{fill:var(--surface-raised);stroke:var(--border-default)}
.m-route{fill:none;stroke:var(--text-muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.m-return{fill:none;stroke:var(--text-brand);stroke-width:3;stroke-dasharray:8 7;stroke-linecap:round}
.m-head{fill:var(--text-muted)}
.m-head.back{fill:var(--text-brand)}
.m-junc{fill:var(--surface-raised);stroke:var(--text-brand);stroke-width:2.5}
.m-st circle{fill:var(--st);stroke:var(--surface-raised);stroke-width:4}
.m-st text{fill:var(--surface-raised);font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.mt{fill:var(--text-primary);font-size:16px;font-weight:600}
.mt2{fill:var(--text-secondary);font-size:15px}
.mc rect{fill:var(--surface-raised);stroke:var(--border-default)}
.mc text{fill:var(--text-secondary);font-size:13px;font-weight:500;text-anchor:middle;dominant-baseline:central}
.mc.mm text{font-family:var(--font-mono);font-size:12.5px}
.mc.ok rect{fill:var(--status-success-tint);stroke:none}
.mc.ok text{fill:var(--status-success-ink)}
.mc.info rect{fill:var(--status-info-tint);stroke:none}
.mc.info text{fill:var(--status-info-ink)}
.mc.agent rect{fill:var(--actor-agent-tint);stroke:none}
.mc.agent circle{fill:var(--actor-agent)}
.mc.agent text{fill:var(--actor-agent);text-anchor:start}
.mc.agent text.ini{fill:var(--surface-raised);font-size:9px;font-weight:700;text-anchor:middle}
.mc.agent tspan{font-weight:400}
.mloop{fill:var(--text-brand);font-size:14px;font-weight:600}
.mcenter{fill:var(--text-primary);font-size:16px;font-weight:600;text-anchor:middle}
.mcenter2{fill:var(--text-secondary);font-size:14px;text-anchor:middle}

.section{padding-block:96px}
.section-head{max-width:52em}
.section-head h2{font:600 clamp(30px,3.2vw,48px)/1.1 var(--font-ui);letter-spacing:-.02em}
.section-head p{margin-top:14px;color:var(--text-secondary);font-size:18px}
.ruled{border-top:1px solid var(--border-subtle)}

.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:44px}
.step{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-raised);overflow:hidden}
.step-body{padding:16px 18px 20px}
.step .k{display:flex;align-items:center;gap:8px;font:600 12px/16px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--st)}
.step .n{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--st);color:var(--surface-raised);font:700 12.5px/1 var(--font-ui);letter-spacing:0}
.step h3{font:600 17px/23px var(--font-ui);margin-top:10px;letter-spacing:-.005em}
.step .txt{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--text-secondary)}

.mini{height:164px;padding:14px max(14px,calc((100% - 340px)/2));display:flex;flex-direction:column;justify-content:center;gap:7px;background:var(--surface-sunken);border-bottom:1px solid var(--border-subtle);font:400 11.5px/16px var(--font-ui);color:var(--text-secondary);overflow:hidden}
.mk-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 12px/18px var(--font-ui);color:var(--text-primary);white-space:nowrap}
.mk-tag{display:inline-block;padding:0 7px;border-radius:var(--radius-full);background:var(--chip-fill);color:var(--chip-ink);font:500 10.5px/17px var(--font-ui);white-space:nowrap}
.mk-tag.ok{background:var(--status-success-tint);color:var(--status-success-ink)}
.mk-tag.info{background:var(--status-info-tint);color:var(--status-info-ink)}
.mk-tag.warn{background:var(--status-warning-tint);color:var(--status-warning-ink)}
.mk-num{font:500 10.5px/16px var(--font-mono);color:var(--text-muted)}
.mk-rows li{display:flex;align-items:center;gap:6px;padding:3px 0;border-top:1px solid var(--border-default);color:var(--text-primary);white-space:nowrap}
.mk-rows li > :last-child{margin-left:auto}
.mk-rows li.on{font-weight:600}
.mk-rows li.on .mk-num{color:var(--st)}
.mk-doc{flex:none;width:10px;height:12px;border:1.5px solid var(--text-muted);border-radius:1.5px 4px 1.5px 1.5px;background:linear-gradient(var(--text-muted),var(--text-muted)) 1.5px 2.5px/4px 1.5px no-repeat,linear-gradient(var(--text-muted),var(--text-muted)) 1.5px 5.5px/4px 1.5px no-repeat}
.mk-who{display:inline-flex;align-items:center;gap:4px;padding:0 7px 0 2px;border-radius:var(--radius-full);font:500 10.5px/17px var(--font-ui);white-space:nowrap}
.mk-who::before{content:attr(data-i);flex:none;display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;font:700 7px/1 var(--font-ui);color:var(--surface-raised)}
.mk-who.p{background:var(--actor-person-tint);color:var(--actor-person)}
.mk-who.p::before{background:var(--actor-person)}
.mk-who.a{background:var(--actor-agent-tint);color:var(--actor-agent)}
.mk-who.a::before{background:var(--actor-agent)}
.mk-who small{font-size:10px;font-weight:400}
.mk-av{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--actor-person);color:var(--surface-raised);font:700 8px/1 var(--font-ui)}
.mk-av::before{content:attr(data-i)}
.mk-add{width:max-content;padding:0 7px;border:1px dashed var(--border-strong);border-radius:4px;font-size:10.5px;line-height:17px;color:var(--text-muted)}
.mk-seg{display:flex;gap:2px;width:max-content;max-width:100%;padding:2px;border-radius:6px;background:var(--chip-fill)}
.mk-seg span{padding:0 8px;border-radius:4px;font:500 10.5px/18px var(--font-ui);color:var(--text-secondary);white-space:nowrap}
.mk-seg span.on{background:var(--surface-raised);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-1)}
.mk-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.mk-flow span{position:relative;padding:0 7px;border:1px solid var(--border-default);border-radius:4px;background:var(--surface-raised);color:var(--text-primary);font:500 10.5px/17px var(--font-ui);white-space:nowrap}
.mk-flow span:not(:last-child){margin-right:16px}
.mk-flow span:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:6px;height:6px;margin-top:-3px;transform:rotate(45deg);background:var(--text-muted)}
.mk-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}
.mk-file{border:1px solid var(--border-default);border-radius:6px;background:var(--surface-raised);overflow:hidden}
.mk-fh{padding:3px 8px;border-bottom:1px solid var(--border-subtle);background:var(--surface-sunken);white-space:nowrap}
.mk-md{display:grid;gap:1px;padding:6px 8px 8px;font:400 10.5px/15px var(--font-mono);color:var(--text-secondary);white-space:nowrap}
.mk-md b{color:var(--text-primary);font-weight:600}
.mk-md i{display:block;width:86%;height:5px;margin-top:5px;border-radius:3px;background:var(--border-subtle)}
.mk-vers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-vers li{display:grid;justify-items:start;align-content:start;gap:4px;min-width:0}
.mk-thumb{display:grid;align-content:center;gap:4px;width:100%;height:52px;padding:7px;border:1px solid var(--border-default);border-radius:6px;background:var(--surface-raised)}
.mk-thumb i{display:block;height:5px;border-radius:2px;background:var(--border-default)}
.mk-thumb i:first-child{width:62%;background:var(--text-muted)}
.mk-thumb i.b{width:42%;height:7px;justify-self:end;background:var(--action-primary)}
.mk-vers li.ok .mk-thumb{border-color:var(--status-success);box-shadow:0 0 0 2px var(--status-success-tint)}
.mk-vers li.new .mk-thumb i.b{width:56%}
.mk-vers b{font:600 11px/14px var(--font-ui);color:var(--text-primary)}
.mk-ph{padding:0 7px;border-radius:4px;background:var(--st);color:var(--surface-raised);font:600 10px/17px var(--font-ui);letter-spacing:.05em;text-transform:uppercase}
.mk-tasks li{display:grid;justify-items:start;gap:3px;padding:6px 0;border-top:1px solid var(--border-default)}
.mk-tasks b{font:500 10.5px/15px var(--font-mono);color:var(--text-primary)}
.mk-tasks b.bug{font-family:var(--font-ui);font-weight:600;font-size:11px}
.mk-env{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mk-env li{position:relative;display:grid;justify-items:center;gap:1px;padding:7px 4px;border:1px solid var(--border-default);border-radius:6px;background:var(--surface-raised)}
.mk-env li + li::before{content:"";position:absolute;left:-17px;top:50%;width:16px;height:2px;background:var(--text-muted)}
.mk-env b{font:600 12px/16px var(--font-ui);color:var(--text-primary)}
.mk-env span{display:inline-flex;align-items:center;gap:4px;font:500 10px/14px var(--font-mono);color:var(--status-success-ink)}
.mk-env span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--status-success)}
.mk-center{display:flex;justify-content:center}
.mk-now li{display:grid;justify-items:start;gap:3px;padding:6px 0 2px;border-top:1px solid var(--border-default)}
.mk-now li > span:last-child{font-size:11px;color:var(--text-secondary)}
.mk-rec{font-size:10.5px;color:var(--text-muted);white-space:nowrap}

.closing{background:var(--surface-sunken);border-top:1px solid var(--border-default)}
.closing .wrap{padding-block:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.closing h2{font:600 clamp(32px,3.4vw,52px)/1.1 var(--font-display);letter-spacing:-.02em}
.closing p{margin-top:12px;font-size:17px;color:var(--text-secondary);max-width:36em}

@media (max-width:1279px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step:last-child{grid-column:1/-1;flex-direction:row}
  .step:last-child .mini{flex:0 0 40%;height:auto;min-height:164px;padding-inline:max(20px,calc((40% - 340px)/2));border-bottom:0;border-right:1px solid var(--border-subtle)}
  .step:last-child .step-body{align-self:center;max-width:36em}
}
@media (max-width:1180px){
  .map{max-width:560px;margin-inline:auto}
  .map .map-wide{display:none}
  .map .map-narrow{display:block}
}
@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:last-child{grid-column:auto;flex-direction:column}
  .step:last-child .mini{flex:none;height:164px;min-height:0;padding-inline:max(14px,calc((100% - 340px)/2));border-right:0;border-bottom:1px solid var(--border-subtle)}
}
@media (max-width:640px){
  .hero{padding-block:48px 32px}
  .map-sec{padding-bottom:64px}
  .section{padding-block:64px}
  .steps{grid-template-columns:minmax(0,1fr)}
}