.story-explainer{--ink:#182537;--muted:#617186;--blue:#205dba;--line:#dce4ed;--soft:#f0f5fa;min-width:0;color:var(--ink);font:16px/1.85 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.story-explainer *{box-sizing:border-box}.story-explainer button{font:inherit;color:inherit;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:6px}.story-explainer button:focus-visible,.story-explainer a:focus-visible,.story-explainer .image-stage:focus-visible{outline:3px solid #2966c5;outline-offset:3px}.story-explainer code{font-family:ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere}.story-explainer a{color:var(--blue)}body:has(.story-explainer dialog[open]){overflow:hidden}.editorial-project .story-explainer .wide{margin:36px 0 42px;width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px}.editorial-project .story-explainer .figure-head>span{font-size:12px;color:var(--blue);letter-spacing:.6px}.editorial-project .story-explainer .figure-head h3,.editorial-project .story-explainer .figure-head h2{font-size:24px;line-height:1.5;margin:8px 0 14px}.editorial-project .story-explainer .figure-head p{font-size:14px;color:var(--muted);margin:0 0 24px}.editorial-project .story-explainer figcaption{border-top:1px solid var(--line);padding-top:16px;margin-top:24px;color:var(--muted);font-size:13px;line-height:1.7}.editorial-project .story-explainer figcaption a{display:block;margin-top:10px}.editorial-project .story-explainer .asset-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center}.editorial-project .story-explainer .wire-page{background:#fafbfd;border:1px solid #b5c7db;border-radius:5px;overflow:hidden;font-size:13px}.editorial-project .story-explainer .wire-top{padding:10px 14px;background:#e7f0fc;color:#315d96;font-size:11px}.editorial-project .story-explainer .wire-body{display:grid;grid-template-columns:100px 1fr}.editorial-project .story-explainer .wire-body>aside{padding:24px 12px;border-right:1px solid var(--line);background:#f5f8fc}.editorial-project .story-explainer .wire-body small{font-size:11px;color:var(--muted)}.editorial-project .story-explainer .wire-body>div{padding:18px}.editorial-project .story-explainer .wire-header{padding:0 0 14px;border-bottom:1px solid var(--line)}.editorial-project .story-explainer .wire-header span{display:block;font-size:11px;color:var(--muted)}.editorial-project .story-explainer .wire-filter,.editorial-project .story-explainer .wire-table{padding:12px;margin-top:12px;background:#fff;border:1px solid var(--line)}.editorial-project .story-explainer .wire-table small,.editorial-project .story-explainer .wire-filter small{margin-left:12px}.editorial-project .story-explainer .wire-lines{height:58px;background:repeating-linear-gradient(0deg,transparent,transparent 18px,#e8edf3 18px,#e8edf3 19px)}.editorial-project .story-explainer .asset-notes{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:13px}.editorial-project .story-explainer .asset-notes dt{font-weight:600}.editorial-project .story-explainer .asset-notes dd{margin:0;color:var(--muted)}.editorial-project .story-explainer .token-map{display:grid;grid-template-columns:.7fr 1fr 1.15fr 1.2fr;gap:16px;align-items:stretch}.editorial-project .story-explainer .token-col{min-width:0;position:relative}.editorial-project .story-explainer .flow-label{font-size:12px;color:var(--muted);padding-bottom:15px;border-bottom:2px solid #e5ebf2;margin-bottom:20px}.editorial-project .story-explainer .flow-arrow{font-size:12px;color:var(--blue);margin-top:16px}.editorial-project .story-explainer .seed-swatch{width:52px;height:52px;background:#101010;border-radius:50%;margin:28px 0 14px}.editorial-project .story-explainer .token-col>code{font-size:12px}.editorial-project .story-explainer .token-col>p{font-size:12px;color:var(--muted)}.editorial-project .story-explainer .map-row{display:flex;align-items:center;gap:8px;min-height:62px;padding:8px 6px;border-radius:6px;border:1px solid transparent}.editorial-project .story-explainer .map-row code{font-size:13px}.editorial-project .story-explainer .swatch{width:14px;height:14px;flex-shrink:0;border-radius:3px}.editorial-project .story-explainer .swatch-0{background:#1f1f1f}.editorial-project .story-explainer .swatch-1{background:#666}.editorial-project .story-explainer .swatch-2{background:#999}.editorial-project .story-explainer .swatch-3{background:#bfbfbf}.editorial-project .story-explainer .map-row.active{background:#edf4ff;border-color:#bdd3ef}.editorial-project .story-explainer .alias{width:100%;display:block;text-align:left;padding:8px 10px;min-height:62px;border:1px solid transparent;background:transparent;border-radius:6px}.editorial-project .story-explainer .alias span{display:block;font-size:12px}.editorial-project .story-explainer .alias code{font-size:13px;display:block}.editorial-project .story-explainer .alias.active{background:#e9f1ff;border-color:#b1c8eb;color:#144b9e}.editorial-project .story-explainer .semantic-ui{background:#fff;padding:18px 12px;border:1px solid var(--line);box-shadow:0 4px 18px #27394f08;min-height:248px;font-size:12px}.editorial-project .story-explainer .ui-crumb{font-size:10px;color:#7b8798}.editorial-project .story-explainer .semantic-ui h4{margin:12px 0 6px;font-size:19px;color:#1f1f1f;font-weight:600}.editorial-project .story-explainer .semantic-ui p{margin:0 0 20px;font-size:11px;color:#8a8a8a}.editorial-project .story-explainer .meta-pair{display:flex;gap:20px;padding:10px 0}.editorial-project .story-explainer .meta-pair span{color:#666}.editorial-project .story-explainer .meta-pair strong{font-weight:450}.editorial-project .story-explainer .record-row{border-top:1px solid var(--line);padding:12px 0;font-size:11px;display:flex;justify-content:space-between}.editorial-project .story-explainer .record-row span{color:#397c62}.editorial-project .story-explainer .disabled-action{display:inline-block;font-size:11px;color:#b8b8b8;padding:5px 3px}.editorial-project .story-explainer .chosen{outline:2px solid #427cc7;outline-offset:4px;background:#edf4ff}.editorial-project .story-explainer .trace{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;line-height:1.7;padding:12px 16px;background:var(--soft);margin:26px 0 0;overflow-wrap:anywhere;border-left:3px solid #8bb0df}.editorial-project .story-explainer .mode-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}.editorial-project .story-explainer .mode-buttons button{padding:7px 16px;font-size:13px}.editorial-project .story-explainer .mode-buttons button[aria-pressed=true]{background:#213e65;border-color:#213e65;color:#fff}.editorial-project .story-explainer .theme-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}.editorial-project .story-explainer .bindings{display:grid;gap:12px}.editorial-project .story-explainer .binding{display:grid;grid-template-columns:1fr 68px 1fr;align-items:center;border:1px solid var(--line);border-radius:8px;padding:16px;min-width:0}.editorial-project .story-explainer .binding>div{min-width:0}.editorial-project .story-explainer .binding small,.editorial-project .story-explainer .binding code,.editorial-project .story-explainer .binding strong{display:block}.editorial-project .story-explainer .binding small{font-size:11px;color:var(--muted)}.editorial-project .story-explainer .binding code{font-size:12px}.editorial-project .story-explainer .binding strong{font-weight:500;font-size:27px}.editorial-project .story-explainer .binding-arrow{font-size:12px;color:var(--blue)}.editorial-project .story-explainer .local{background:#fafbfe;border-style:dashed}.editorial-project .story-explainer .theme-sample{--radius:2px;--tag-radius:2px;--theme:#2673dd;border:1px solid var(--line);border-radius:8px;padding:20px;background:#fff}.editorial-project .story-explainer .sample-top{display:flex;justify-content:space-between;gap:10px;font-size:15px}.editorial-project .story-explainer .sample-top>span{font-size:11px;color:var(--muted)}.editorial-project .story-explainer .sample-content{display:grid;grid-template-columns:1fr 1fr;gap:25px 18px;align-items:center;padding:28px 0}.editorial-project .story-explainer .sample-label{font-size:12px;color:var(--muted)}.editorial-project .story-explainer .demo-button{display:inline-block;background:var(--theme);border-radius:var(--radius);padding:7px 18px;text-align:center;color:#fff;font-size:13px;justify-self:start}.editorial-project .story-explainer .demo-tag{display:inline-block;color:var(--theme);border:1px solid var(--theme);border-radius:var(--tag-radius);padding:2px 12px;font-size:12px;justify-self:start}.editorial-project .story-explainer .theme-sample p{margin:0;font-size:11px;color:var(--muted)}.editorial-project .story-explainer .guidance ol{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:0;list-style:none;counter-reset:steps}.editorial-project .story-explainer .guidance li{counter-increment:steps;border-top:2px solid #cddced;padding-top:12px}.editorial-project .story-explainer .guidance li:before{content:'0' counter(steps);font-size:12px;color:var(--blue);display:block}.editorial-project .story-explainer .guidance b{font-size:14px;display:block;margin:8px 0}.editorial-project .story-explainer .guidance li span{font-size:12px;color:var(--muted)}.editorial-project .story-explainer .evidence{background:transparent;border:0;padding:0;margin-top:70px}.editorial-project .story-explainer .evidence>.figure-head{max-width:760px;margin:auto}.editorial-project .story-explainer .evidence-group{margin:28px 0 40px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:12px}.editorial-project .story-explainer .group-heading>span{font-size:12px;color:var(--blue)}.editorial-project .story-explainer .group-heading h3{font-size:22px;margin:6px 0}.editorial-project .story-explainer .group-heading p{font-size:13px;color:var(--muted);max-width:760px;margin:0 0 20px}.editorial-project .story-explainer .thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.editorial-project .story-explainer .evidence-card{padding:0;border:0;text-align:left;background:transparent;min-width:0}.editorial-project .story-explainer .evidence-card img{display:block;width:100%;height:164px;object-fit:contain;object-position:top;background:#f3f6fa;border:1px solid #e4ebf3}.editorial-project .story-explainer .evidence-card>span{display:block;font-size:13px;line-height:1.6;margin:10px 0 3px}.editorial-project .story-explainer .evidence-card>small{display:block;font-size:11px;color:var(--muted)}.editorial-project .story-explainer footer{display:flex;flex-wrap:wrap;gap:14px 24px;border-top:1px solid var(--line);font-size:12px;padding:24px 0 50px;color:var(--muted)}.editorial-project .story-explainer dialog{width:calc(100vw - 40px);max-width:1600px;height:calc(100dvh - 40px);max-height:none;padding:0;border:1px solid var(--line);border-radius:12px;background:#f5f7fa;color:var(--ink)}.editorial-project .story-explainer dialog[open]{display:flex;flex-direction:column}.editorial-project .story-explainer dialog::backdrop{background:#132238cc;backdrop-filter:blur(8px)}.editorial-project .story-explainer .viewer-head{display:flex;justify-content:space-between;gap:20px;padding:16px 22px;background:#fff;align-items:center}.editorial-project .story-explainer .viewer-head h2{margin:0;font-size:17px;line-height:1.5}.editorial-project .story-explainer .viewer-head small{font-size:11px;color:var(--muted)}.editorial-project .story-explainer .viewer-head button{font-size:13px;padding:6px 12px;white-space:nowrap}.editorial-project .story-explainer .viewer-controls{display:flex;flex-wrap:wrap;gap:10px;padding:10px 22px;background:#fff;border-block:1px solid var(--line);font-size:12px}.editorial-project .story-explainer .viewer-controls button{font-size:12px;padding:5px 10px}.editorial-project .story-explainer .viewer-controls a{margin:auto 0 auto auto}.editorial-project .story-explainer .viewer-controls button:disabled{opacity:.4;cursor:default}.editorial-project .story-explainer .image-stage{min-height:0;flex:1;overflow:auto;padding:16px;display:grid;place-items:start center}.editorial-project .story-explainer .image-stage img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto;background:#fff}.editorial-project .story-explainer .image-stage.actual{display:block}.editorial-project .story-explainer .image-stage.actual img{max-width:none;max-height:none;display:block}.editorial-project .story-explainer .viewer-caption{padding:10px 22px;font-size:12px;line-height:1.6;background:#fff;max-height:24%;overflow:auto}.editorial-project .story-explainer .viewer-caption p{margin:4px 0}.editorial-project .story-explainer .viewer-caption p:last-child{color:var(--muted)}@media(max-width:900px){.editorial-project .story-explainer .token-map{grid-template-columns:1fr 1fr;gap:24px}.editorial-project .story-explainer .token-col:first-child{min-height:220px}.editorial-project .story-explainer .asset-grid{grid-template-columns:1fr}.editorial-project .story-explainer .theme-layout{grid-template-columns:1fr}.editorial-project .story-explainer .thumb-grid{grid-template-columns:repeat(2,1fr)}.editorial-project .story-explainer .guidance ol{grid-template-columns:1fr 1fr}}@media(max-width:540px){.editorial-project .story-explainer body{font-size:16px}.editorial-project .story-explainer .topbar{padding:12px 16px;font-size:12px}.editorial-project .story-explainer .wordmark span{display:none}.editorial-project .story-explainer .topbar nav{gap:18px}.editorial-project .story-explainer main{padding:0 18px}.editorial-project .story-explainer .hero{padding:40px 0 30px}.editorial-project .story-explainer h1{font-size:36px;letter-spacing:0}.editorial-project .story-explainer .eyebrow{font-size:10px;gap:6px}.editorial-project .story-explainer .deck{font-size:18px}.editorial-project .story-explainer .hero-meta{gap:10px 18px;font-size:12px}.editorial-project .story-explainer article>h2{font-size:24px;margin-top:48px}.editorial-project .story-explainer .wide{padding:20px 16px;margin:28px 0}.editorial-project .story-explainer .figure-head h3,.editorial-project .story-explainer .figure-head h2{font-size:21px}.editorial-project .story-explainer .token-map{grid-template-columns:1fr;gap:24px}.editorial-project .story-explainer .token-col:first-child{min-height:0}.editorial-project .story-explainer .map-row{min-height:46px}.editorial-project .story-explainer .alias{min-height:54px}.editorial-project .story-explainer .map-row code,.editorial-project .story-explainer .alias code{font-size:13px}.editorial-project .story-explainer .seed-swatch{width:32px;height:32px;margin:14px 0 10px}.editorial-project .story-explainer .semantic-ui{padding:16px 8px}.editorial-project .story-explainer .semantic-ui h4{font-size:17px}.editorial-project .story-explainer .token-col>code{font-size:11px}.editorial-project .story-explainer .flow-label{font-size:11px}.editorial-project .story-explainer .asset-notes{grid-template-columns:96px 1fr}.editorial-project .story-explainer .wire-body{grid-template-columns:65px 1fr}.editorial-project .story-explainer .wire-body>aside{padding:18px 8px}.editorial-project .story-explainer .wire-body>div{padding:12px}.editorial-project .story-explainer .wire-table small,.editorial-project .story-explainer .wire-filter small{display:block;margin:0}.editorial-project .story-explainer .binding{grid-template-columns:1fr 53px 1fr;padding:12px;gap:5px}.editorial-project .story-explainer .binding code{font-size:11px}.editorial-project .story-explainer .mode-buttons button{padding:7px 11px}.editorial-project .story-explainer .thumb-grid{grid-template-columns:1fr 1fr;gap:18px 12px}.editorial-project .story-explainer .evidence{padding:0;border:0}.editorial-project .story-explainer .evidence-group{padding:18px 14px}.editorial-project .story-explainer .evidence-card img{height:115px}.editorial-project .story-explainer .evidence-card>span{font-size:12px}.editorial-project .story-explainer .evidence-card>small{font-size:10px}.editorial-project .story-explainer .trace{font-size:11px;padding:10px}.editorial-project .story-explainer .prose-heading{font-size:20px}.editorial-project .story-explainer dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}.editorial-project .story-explainer .viewer-head{padding:12px;gap:8px}.editorial-project .story-explainer .viewer-head h2{font-size:14px}.editorial-project .story-explainer .viewer-controls{padding:8px 12px;gap:8px}.editorial-project .story-explainer .viewer-controls a{margin-left:0}.editorial-project .story-explainer .viewer-caption{padding:8px 12px;font-size:11px}.editorial-project .story-explainer .guidance ol{gap:18px}.editorial-project .story-explainer .image-stage{padding:8px}}@media(prefers-reduced-motion:reduce){.editorial-project .story-explainer html{scroll-behavior:auto}}@media(max-width:1200px){.editorial-project .story-explainer .token-map{grid-template-columns:1fr 1fr}.editorial-project .story-explainer .theme-layout{grid-template-columns:1fr}}@media(max-width:540px){.editorial-project .story-explainer .token-map{grid-template-columns:1fr}}
.story-explainer .server-table-scroll{overflow:auto}.story-explainer .server-table{width:100%;min-width:680px;border-collapse:collapse;font-size:12px;text-align:left}.story-explainer .server-table th,.story-explainer .server-table td{padding:14px 12px;border-bottom:1px solid #dce4ed;vertical-align:top}.story-explainer .server-table small{display:block;color:#617186;margin-top:7px}.story-explainer .server-table th{background:#f0f5fa;font-weight:500}

/* InfraD diagrams reuse the Space article workflow frame and native role rows. */
.editorial-project[data-project="infrad"] .story-explainer .infrad-diagram{margin:32px 0;padding:0;border:1px solid #dce4ef;border-radius:14px;overflow:hidden;background:transparent}
.editorial-project[data-project="infrad"] .infrad-diagram .project-workflow__title{padding:19px 24px;margin:0!important;border-bottom:1px solid #e2e8f2;background:#f3f6fc;color:#30456d;font-size:13px!important;font-weight:600;line-height:1.8;letter-spacing:.02em}
.editorial-project[data-project="infrad"] .infrad-diagram .project-workflow__title small{display:block;font-size:11px;color:#7b879c;font-weight:400;margin-top:6px}
.editorial-project[data-project="infrad"] .infrad-diagram-body{padding:24px;background:#fff9}
.editorial-project[data-project="infrad"] .infrad-diagram-intro{font-size:13px;color:#64738a;margin:0 0 24px;line-height:1.85}
.editorial-project[data-project="infrad"] .story-explainer .infrad-diagram figcaption{border-top:1px solid #e2e8f2;padding:14px 24px;margin:0;background:#f9fbfe;color:#7b879c;font-size:11px;line-height:1.8}
.editorial-project[data-project="infrad"] .infrad-diagram .project-roles{margin:0}
.editorial-project[data-project="infrad"] .infrad-diagram .project-roles>div{grid-template-columns:110px 1fr}
.editorial-project[data-project="infrad"] .infrad-diagram .project-roles dt,.editorial-project[data-project="infrad"] .infrad-diagram .project-roles dd{font-size:13px;line-height:1.85}
.editorial-project[data-project="infrad"] .story-explainer .wire-page,.editorial-project[data-project="infrad"] .story-explainer .semantic-ui,.editorial-project[data-project="infrad"] .story-explainer .binding,.editorial-project[data-project="infrad"] .story-explainer .theme-sample{background:#fcfdff;border:1px solid #dde5f0;border-radius:6px;box-shadow:none}
.editorial-project[data-project="infrad"] .story-explainer .wire-top{background:#f3f6fc;color:#30456d;border-bottom:1px solid #e2e8f2}
.editorial-project[data-project="infrad"] .story-explainer .wire-body>aside,.editorial-project[data-project="infrad"] .story-explainer .binding.local{background:#f3f5f9;border-color:#e4e8f0}
.editorial-project[data-project="infrad"] .story-explainer .flow-label{border-bottom:1px solid #e2e8f2;color:#7b879c;font-size:11px}
.editorial-project[data-project="infrad"] .story-explainer .map-row.active,.editorial-project[data-project="infrad"] .story-explainer .alias.active{background:#e9f0ff;border-color:#b4c8ee;color:#214eae}
.editorial-project[data-project="infrad"] .story-explainer .alias{border-radius:4px}
.editorial-project[data-project="infrad"] .story-explainer .trace{background:#f3f6fc;border:1px solid #dce4ef;border-radius:6px;padding:13px 16px;color:#64738a;font-size:12px;line-height:1.8}
.editorial-project[data-project="infrad"] .story-explainer .mode-buttons button{background:#f3f5f9;border:1px solid #e4e8f0;border-radius:4px;color:#697486;font-size:12px}
.editorial-project[data-project="infrad"] .story-explainer .mode-buttons button[aria-pressed=true]{background:#e9f0ff;border-color:#b4c8ee;color:#214eae;font-weight:500}
.editorial-project[data-project="infrad"] .story-explainer .chosen{outline-color:#315fc0;background:#e9f0ff}
@media(max-width:760px){
.editorial-project[data-project="infrad"] .infrad-diagram-body{padding:20px 16px}
.editorial-project[data-project="infrad"] .infrad-diagram .project-workflow__title{padding:17px 20px}
.editorial-project[data-project="infrad"] .story-explainer .infrad-diagram figcaption{padding:13px 20px}
.editorial-project[data-project="infrad"] .infrad-diagram .project-roles>div{grid-template-columns:1fr;gap:4px}
.editorial-project[data-project="infrad"] .story-explainer .asset-grid{gap:24px}
}
.editorial-project[data-project="infrad"] .story-explainer .asset-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center}
@media(min-width:1201px){.editorial-project[data-project="infrad"] .story-explainer .token-map{grid-template-columns:.85fr 1.15fr 1.35fr 1.4fr;gap:12px}.editorial-project[data-project="infrad"] .story-explainer .map-row code,.editorial-project[data-project="infrad"] .story-explainer .alias code{font-size:11px}}

/* A supporting example: compact side-by-side on desktop. */
.editorial-project[data-project="infrad"] #infrad-assets .asset-grid>*{min-width:0}
.editorial-project[data-project="infrad"] #infrad-assets .project-roles>div{grid-template-columns:1fr;gap:3px;padding:10px 0}
.editorial-project[data-project="infrad"] #infrad-assets .project-roles>div:first-child{padding-top:0}
.editorial-project[data-project="infrad"] #infrad-assets .project-roles>div:last-child{padding-bottom:0}
.editorial-project[data-project="infrad"] #infrad-assets .project-roles dt{font-size:12px;line-height:1.6}
.editorial-project[data-project="infrad"] #infrad-assets .project-roles dd{font-size:12px;line-height:1.75}
.editorial-project[data-project="infrad"] #infrad-assets .wire-body{grid-template-columns:52px minmax(0,1fr)}
.editorial-project[data-project="infrad"] #infrad-assets .wire-body>aside{padding:16px 8px;font-size:11px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-body>div{min-width:0;padding:12px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-top{font-size:10px;padding:9px 10px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-header{padding-bottom:10px;font-size:12px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-header span{font-size:10px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-filter,.editorial-project[data-project="infrad"] #infrad-assets .wire-table{padding:10px;margin-top:10px;font-size:12px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-filter small,.editorial-project[data-project="infrad"] #infrad-assets .wire-table small{display:block;margin:2px 0 0;font-size:10px}
.editorial-project[data-project="infrad"] #infrad-assets .wire-lines{height:38px}
@media(max-width:760px){.editorial-project[data-project="infrad"] .story-explainer #infrad-assets .asset-grid{grid-template-columns:1fr;gap:22px}}