/* ==========================================================================
   Agentic Infrastructure Code — page graphics
   (shared layout lives in ../css/base.css)
   ========================================================================== */

code { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Hero · split layout; coding agent → Skills / MCP policies → auto-correct
   (stage drawn at 954×544, scaled by acg.js)
   -------------------------------------------------------------------------- */
.hero-split .hero-glow { background: radial-gradient(34% 46% at 74% 52%, rgba(228,75,51,.14), transparent 70%), radial-gradient(70% 40% at 50% 0%, rgba(255,255,255,.03), transparent 70%); }
.hero-split { padding-bottom: clamp(32px, 4vw, 64px); }
.gh { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.gh-copy { margin: 0; max-width: 500px; text-align: left; }
.gh-copy .eyebrow { justify-content: flex-start; flex-wrap: nowrap; }
.gh-copy .eyebrow span { min-width: 0; }
.gh-copy h1 { margin: 0 0 20px; }
.gh-copy .lead { margin: 0 0 28px; }
.gh-copy .button-row { justify-content: flex-start; }
.gh-works { margin: 32px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); }

.gh-vis { position: relative; width: calc(100% + clamp(0px, 5vw, 96px)); margin-right: calc(-1 * clamp(0px, 5vw, 96px)); aspect-ratio: 954 / 544; }
.gh-stage { position: absolute; left: 0; top: 0; width: 954px; height: 544px; transform-origin: 0 0; font-family: var(--font-sans); }
.gh-label { position: absolute; left: 15px; top: 20px; margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

.gh-win { position: absolute; border-radius: 12px; border: 1px solid #34322f; background: #121211; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.gh-bar { display: flex; align-items: center; gap: 22px; margin: 0; height: 42px; padding: 0 16px; border-bottom: 1px solid #2a2927; font-family: var(--font-mono); font-size: 12.5px; color: var(--sl-grey-200); }
.gh-dots { display: inline-flex; gap: 7px; }
.gh-dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a3936; }

.gh-sess { left: 96px; top: 51px; width: 332px; height: 221px; }
.gh-agent { display: flex; align-items: center; gap: 13px; padding: 17px 17px 0; }
.gh-ico { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 9px; border: 1px solid #34322f; background: #1a1918; }
.gh-ico .ph { font-size: 19px; color: var(--accent); }
.gh-agent p { margin: 0; }
.gh-agent b { display: block; font-weight: 400; font-size: 15px; color: var(--sl-sand-50); line-height: 1.2; }
.gh-agent span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.gh-skel { display: grid; gap: 15px; padding: 26px 17px 0; }
.gh-skel li { width: var(--w); height: 8px; border-radius: 4px; background: #2e2d2a; }

.gh-code { left: 296px; top: 147px; width: 420px; height: 330px; z-index: 2; }
.gh-lines { padding-top: 17px; }
.gh-lines li { position: relative; height: 27px; display: flex; align-items: center; transition: background-color .4s; }
.gh-lines .n { position: absolute; left: 20px; width: 10px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: #5a5856; }
.gh-lines i { position: absolute; left: var(--x); width: var(--w); height: 8px; border-radius: 4px; background: #34322f; transform-origin: left center; transition: transform .35s var(--ease), background .4s; }
html.js .gh-vis:not(.done) .gh-lines li:not(.on) i { transform: scaleX(0); }
/* line 3: replaced (struck through) */
.gh-lines li.del i::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--accent); box-shadow: 0 0 6px rgba(228,75,51,.6); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.gh-vis.fix .gh-lines li.del i::after, .gh-vis.done .gh-lines li.del i::after { transform: none; }
.gh-vis.fix .gh-lines li.del, .gh-vis.done .gh-lines li.del { background: rgba(228,75,51,.05); }
/* lines 4 + 6: corrected to policy */
.gh-lines li.pol::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .4s; }
.gh-vis.fix .gh-lines li.pol, .gh-vis.done .gh-lines li.pol { background: rgba(228,75,51,.12); }
.gh-vis.fix .gh-lines li.pol::before, .gh-vis.done .gh-lines li.pol::before { opacity: 1; }
.gh-vis.fix .gh-lines li.pol i, .gh-vis.done .gh-lines li.pol i { background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 5px); border-radius: 1px; height: 10px; }
.gh-check { position: absolute; left: 367px; top: 140px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--sl-sand-50); font-size: 16px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.3,1.6,.4,1); }
.gh-vis.done .gh-check { opacity: 1; transform: none; }

/* pills + connectors */
.gh-pill { position: absolute; display: inline-flex; align-items: center; gap: 9px; height: 27px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--accent); background: rgba(228,75,51,.06); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-sand-50); white-space: nowrap; transition: box-shadow .4s, background-color .4s; }
.gh-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.gh-skills { left: 116px; top: 293px; }
.gh-auto { left: 506px; top: 506px; transform: translateX(-50%); }
.gh-mcp { left: 759px; top: 493px; }
.gh-vis.skills .gh-skills, .gh-vis.mcp .gh-mcp, .gh-vis.fix .gh-auto { background: rgba(228,75,51,.14); box-shadow: 0 0 18px rgba(228,75,51,.3); }
.gh-stem-skills { position: absolute; left: 191px; top: 272px; width: 1px; height: 21px; background: #4a4846; }
.gh-link { position: absolute; left: 716px; top: 407px; width: 57px; height: 2px; background: var(--accent); z-index: 3; }
.gh-link::before, .gh-link::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; background: var(--accent); }
.gh-link::before { left: -4px; } .gh-link::after { right: -4px; }
.gh-vis.mcp .gh-link { box-shadow: 0 0 10px rgba(228,75,51,.7); }

.gh-pol { position: absolute; left: 772px; top: 326px; width: 126px; height: 140px; }
.gh-card { position: absolute; width: 100px; height: 116px; border-radius: 12px; border: 1px solid #3a3936; background: #141413; }
.gh-card-3 { left: 26px; top: 0; } .gh-card-2 { left: 13px; top: 12px; }
.gh-card-1 { left: 0; top: 24px; display: grid; place-content: center; justify-items: center; gap: 14px; border: 1.5px solid var(--accent); background: #1a1918; box-shadow: 0 0 26px rgba(228,75,51,.18); }
.gh-card-1 .ph { font-size: 26px; color: var(--sl-sand-50); }
.gh-card-1 span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-grey-200); }

@media (max-width: 1025.98px) {
  .gh { grid-template-columns: 1fr; }
  .gh-vis { width: 100%; margin-right: 0; }
  .gh-copy { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-lines i, .gh-check, .gh-pill { transition: none; }
}

/* --------------------------------------------------------------------------
   Story 1 · isometric scene: cloud → Stacklet → coding agent
   -------------------------------------------------------------------------- */
.sess-prompt { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 10px; background: #0b0b0a; border: 1px solid #2c2b29; font-size: 16px; color: var(--sl-sand-50); }
.sess-caret { font-family: var(--font-mono); color: var(--accent); font-size: 18px; }

.panel-iso { padding-bottom: 12px; }
.iso { display: block; width: 100%; height: auto; overflow: visible; }
.iso .b .ft { fill: #4a4743; } .iso .b .fl { fill: #33312d; } .iso .b .fr { fill: #262421; }
.iso .b polygon, .iso .b path, .iso .b ellipse { stroke: #6b6761; stroke-width: 1; stroke-linejoin: round; }
.iso .b .ln { fill: none; }
.iso .slab .ft { fill: #24221f; } .iso .slab .fl { fill: #1a1917; } .iso .slab .fr { fill: #141311; }
.iso .slab polygon { stroke: #4a4743; stroke-width: 1; }
.iso .vpc { fill: rgba(235,231,226,.035); stroke: #5a5752; stroke-width: 1; stroke-dasharray: 4 4; }
.iso .gpu .ft { fill: #3a2620; } .iso .gpu polygon { stroke: #6b3326; }
.iso .bkt .ft { fill: #24302a; } .iso .bkt polygon { stroke: #3c5446; }

.iso .hub .ft { fill: url(#iso-hub-top); } .iso .hub .fl { fill: #2a1510; } .iso .hub .fr { fill: #1d0f0b; }
.iso .hub polygon { stroke: #c43b29; stroke-width: 1.2; stroke-linejoin: round; }
.iso .hub { filter: drop-shadow(0 0 18px rgba(228,75,51,.28)); }
.iso .card .ft { fill: #1b1a18; } .iso .card .fl, .iso .card .fr { fill: #c43b29; }
.iso .card polygon { stroke: #e44b33; stroke-width: .8; stroke-linejoin: round; }
.iso .card-lines rect { fill: #5e5a55; }
.iso .card-lines rect:first-child { fill: var(--accent); }

.iso .base .ft { fill: #3a3835; } .iso .base .fl { fill: #2a2825; } .iso .base .fr { fill: #1f1e1b; }
.iso .screen .fl { fill: #0b0b0a; } .iso .screen .ft, .iso .screen .fr { fill: #4a4743; }
.iso .base polygon, .iso .screen polygon { stroke: #6b6761; stroke-width: 1; stroke-linejoin: round; }
.iso .keys rect { fill: #4d4a45; }
.iso .code .scr { fill: #0f0f0e; stroke: #2c2b29; stroke-width: 1; }
.iso .code circle { fill: #3a3936; }
.iso .code .cl { fill: #3a3936; }

.iso .flow { fill: none; stroke: #4a2a22; stroke-width: 1.5; stroke-dasharray: 3 5; }
.iso .pk { fill: #ff8a75; filter: drop-shadow(0 0 4px rgba(255,89,63,.9)); offset-rotate: 0deg; opacity: 0; }

.iso text { font-family: var(--font-mono); font-size: 11px; fill: var(--sl-sand-50); }
.iso .cap { font-size: 10.5px; letter-spacing: .16em; fill: var(--text-muted); }
.iso .cap-hub { fill: var(--accent); }
.iso .tag rect { fill: #121110; stroke: #3a3936; }
.iso .tag text { font-size: 11px; }
.iso .tag .sub, .iso .result .sub { fill: var(--text-muted); }
.iso .result rect { fill: #101211; stroke: rgba(127,201,160,.45); }
.iso .result text { font-family: var(--font-sans); font-size: 13px; }
.iso .result .sub { font-family: var(--font-mono); font-size: 10.5px; }
.iso .result .b { font-weight: 600; }
.iso .lead { fill: none; stroke: rgba(127,201,160,.45); stroke-width: 1; }
.iso .result .ok { fill: #7fc9a0; } .iso .result .okc { fill: none; stroke: #0d0d0c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* motion: packets travel the flows, code writes itself, the result lands */
@keyframes iso-pk { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes iso-cl { 0%, 8% { fill: #3a3936; } 14%, 100% { fill: #8a857f; } }
@keyframes iso-cl-ok { 0%, 70% { fill: #8a857f; } 76%, 100% { fill: #7fc9a0; } }
@keyframes iso-land { 0%, 62% { opacity: 0; transform: translateY(6px); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.iso.on .pk { animation: iso-pk 2.8s linear infinite; }
.iso.on .pk.f-cost, .iso.on .pk.f-mcp { animation-duration: 3.4s; }
.iso.on .code .cl { animation: iso-cl 7s linear infinite; }
.iso .result-wrap { transform-box: fill-box; }
.iso.on .result-wrap { animation: iso-land 7s ease-out infinite; }
html.js .iso .result-wrap { opacity: 0; }
html.js .iso.on .result-wrap { opacity: 1; }

/* --------------------------------------------------------------------------
   Story 2 + 3 · isometric scenes with a small terminal overlay
   -------------------------------------------------------------------------- */
.iso-stage { position: relative; }
.iso-term { position: absolute; z-index: 1; width: min(300px, 48%); padding: 12px 14px; border-radius: 10px; background: rgba(11,11,10,.92); border: 1px solid #2c2b29; box-shadow: 0 14px 34px rgba(0,0,0,.5); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45; color: var(--sl-grey-200); }
.fix-term { top: 0; right: 0; }
.life-term { top: 0; left: 0; }
.it-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 11px; color: var(--text-muted); }
.fix-count { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(228,75,51,.55); background: rgba(228,75,51,.08); color: var(--accent); white-space: nowrap; transition: color .35s, border-color .35s, background-color .35s; }
.fix-count b { font-weight: 500; font-variant-numeric: tabular-nums; }
.fix.clean .fix-count { color: #7fc9a0; border-color: rgba(127,201,160,.45); background: rgba(127,201,160,.07); }
.it-list { display: grid; gap: 6px; }
.it-list li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding-left: 16px; color: var(--sl-sand-50); }
.it-list li::before { content: "!"; position: absolute; left: 2px; color: var(--accent); }
.it-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-list li b { font-weight: 400; white-space: nowrap; color: var(--accent); transition: color .3s; }
.it-list li.done { color: var(--text-muted); }
.it-list li.done::before { content: "✓"; color: #7fc9a0; }
.it-list li.done b { color: #7fc9a0; }
.it-cmd { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--sl-sand-50); }
.it-cmd .sess-caret { font-size: 14px; }
.it-ok { margin: 0 0 3px; color: #7fc9a0; }
.it-ok::before { content: "✓ "; }
.it-ok em { font-style: normal; color: var(--text-muted); }
.it-dim { margin: 0; color: var(--text-muted); }

.iso .cap-sub { font-size: 10px; fill: var(--text-faint); }
.iso .lane { fill: none; stroke: #2c2b29; stroke-width: 1.5; stroke-dasharray: 8 8; }
.iso .iss { fill: var(--accent); transition: fill .3s; }
.iso .iss.ok { fill: #7fc9a0; }
.iso .gate polygon, .iso [data-gate] polygon { transition: fill .35s, stroke .35s; }
.iso .gate.lit polygon, .iso [data-gate].lit polygon { stroke: rgba(127,201,160,.75); }
.iso .gate.lit .gate-bar .ft { fill: #22352b; }
.fix.clean .crate-box polygon { stroke: rgba(127,201,160,.75); }

.iso .tile .ft { fill: #33312d; } .iso .tile .fl { fill: #24221f; } .iso .tile .fr { fill: #1a1917; }
.iso .tile polygon { stroke: #6b6761; stroke-width: 1; stroke-linejoin: round; transition: fill .35s, stroke .35s; }
.iso .obj polygon, .iso .obj path, .iso .obj ellipse { transition: fill .35s, stroke .35s; }
.iso .fan { fill: none; stroke: #3a2620; stroke-width: 1.5; stroke-dasharray: 3 5; transition: stroke .35s; }
.iso .cap-st { fill: var(--sl-sand-50); }
.iso .stage.lit .fan { stroke: rgba(228,75,51,.75); stroke-dasharray: none; }
.iso .stage.lit .tile polygon { stroke: #c43b29; }
.iso .stage.lit .tile .ft { fill: #3a1c14; }
.iso .stage.lit .obj .ft { fill: #5a2418; }
.iso .stage.lit .obj polygon, .iso .stage.lit .obj path, .iso .stage.lit .obj ellipse { stroke: #e44b33; }
.iso .stage.lit .pk { animation: iso-pk .9s linear 1; }

.life-foot { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 13px; color: var(--text-muted); }
.life-foot img { width: 28px; height: 28px; filter: grayscale(1); }
.life-foot b { font-weight: 500; color: var(--sl-sand-50); }
@media (max-width: 719.98px) {
  .iso-term { position: static; width: auto; margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   Feature 01 · Skills
   -------------------------------------------------------------------------- */
.sk-body { flex: 1; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: start; align-content: center; padding-bottom: 14px; }
.sk-tree { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: #121211; border: 1px solid #2c2b29; font-size: 12px; }
.sk-tree li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--sl-grey-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-tree li:not(.sk-dir) { margin-left: 14px; }
.sk-tree .ph { font-size: 14px; color: var(--text-muted); flex: 0 0 auto; }
.sk-tree .sk-dir { color: var(--text-muted); }
.sk-tree li.on { background: rgba(228,75,51,.08); color: var(--sl-sand-50); box-shadow: inset 0 0 0 1px rgba(228,75,51,.45); }
.sk-tree li.on .ph { color: var(--accent); }
.sk-doc { padding: 12px 14px 14px; border-radius: 10px; background: #0b0b0a; border: 1px solid #2c2b29; min-width: 0; }
.sk-doc-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #1f1e1d; font-size: 11px; color: var(--text-muted); }
.sk-doc-head .ph { font-size: 14px; color: var(--accent); }
.sk-doc .snippet { white-space: pre-wrap; font-size: 12.5px; line-height: 1.7; }
html.js .sk-doc .snippet { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease) .3s; }
html.js .in .sk-doc .snippet { clip-path: inset(0 0 0 0); }
.sk-foot { align-items: center; flex-wrap: wrap; }
.sk-agents { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-agents li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid #34322f; font-size: 11px; color: var(--sl-sand-50); }
.sk-agents .ph { font-size: 12px; color: var(--accent); }
html.js .sk-agents li { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.js .in .sk-agents li { opacity: 1; transform: none; }
html.js .in .sk-agents li:nth-child(1) { transition-delay: 1.2s } html.js .in .sk-agents li:nth-child(2) { transition-delay: 1.35s }
html.js .in .sk-agents li:nth-child(3) { transition-delay: 1.5s } html.js .in .sk-agents li:nth-child(4) { transition-delay: 1.65s }

/* --------------------------------------------------------------------------
   Feature 02 · Stacklet MCP
   -------------------------------------------------------------------------- */
.mcp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mcp-tools li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid #2c2b29; background: #151514; min-width: 0; transition: border-color .35s, background-color .35s, box-shadow .35s; }
.mcp-tools li:last-child { grid-column: 1 / -1; }
.mcp-tools .ph { font-size: 18px; color: var(--accent); flex: 0 0 auto; }
.mcp-tools code { display: block; font-size: 13px; color: var(--sl-sand-50); }
.mcp-tools small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.mcp-tools li.lit { border-color: rgba(228,75,51,.55); background: rgba(228,75,51,.06); box-shadow: 0 0 14px rgba(228,75,51,.12); }
.mcp-log { margin-top: auto; padding-top: 16px; }
.mcp-log .pol-cap { gap: 12px; }
.mcp-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.mcp-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.mcp-log ol { display: grid; gap: 6px; }
.mcp-log li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 7px; background: #121211; border: 1px solid #242321; font-size: 12px; color: var(--sl-grey-200); }
.mcp-log code { color: var(--sl-sand-50); }
.mcp-log em { font-style: normal; color: var(--text-muted); white-space: nowrap; }
.mcp-log em.ok { color: #7fc9a0; }
.mcp-log em.warn { color: var(--accent); }
.mcp-log time { text-align: right; color: var(--text-faint); }
html.js .mcp-log li { opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.js .in .mcp-log li { opacity: 1; transform: none; }
html.js .in .mcp-log li:nth-child(1) { transition-delay: .3s } html.js .in .mcp-log li:nth-child(2) { transition-delay: .55s }
html.js .in .mcp-log li:nth-child(3) { transition-delay: .8s } html.js .in .mcp-log li:nth-child(4) { transition-delay: 1.05s }

/* --------------------------------------------------------------------------
   Feature 03 · Coding Agent Policies in a pull request
   -------------------------------------------------------------------------- */
.prf-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.prf-comment { display: grid; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid #2c2b29; background: #141413; min-width: 0; }
.prf-who { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; }
.prf-who b { font-weight: 600; color: var(--sl-sand-50); }
.prf-who em { font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 3px; background: #2c2b29; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.prf-who time { margin-left: auto; font-size: 10.5px; color: var(--text-faint); }
.prf-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--sl-grey-200); }
.prf-text code { font-size: 12px; color: var(--sl-sand-50); }
.prf-text b { font-weight: 500; color: var(--sl-sand-50); }
.prf-diff { border-radius: 8px; border: 1px solid #262524; background: #0b0b0a; font-size: 11.5px; line-height: 1.55; overflow: hidden; }
.prf-file { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-bottom: 1px solid #1f1e1d; color: var(--text-muted); font-size: 10.5px; }
.prf-file .ph { font-size: 12px; }
.prf-diff .d { padding: 0 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.prf-diff .d.add { background: rgba(127,201,160,.08); color: #a9dcbf; }
html.js .prf-diff .d.add { opacity: 0; transition: opacity .3s var(--ease); }
html.js .in .prf-diff .d.add { opacity: 1; }
html.js .in .prf-diff .d.add:nth-child(4) { transition-delay: .5s } html.js .in .prf-diff .d.add:nth-child(5) { transition-delay: .6s }
html.js .in .prf-diff .d.add:nth-child(6) { transition-delay: .7s } html.js .in .prf-diff .d.add:nth-child(7) { transition-delay: .8s } html.js .in .prf-diff .d.add:nth-child(8) { transition-delay: .9s }
.prf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.prf-btns span { padding: 5px 12px; border-radius: 6px; border: 1px solid #3a3936; font-size: 12px; color: var(--sl-sand-50); }
.prf-btns .ok { background: var(--accent); border-color: var(--accent); color: var(--sl-grey-900); font-weight: 500; }
.prf-checks { display: grid; gap: 8px; }
.prf-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 9px; border: 1px solid #2c2b29; background: #151514; font-size: 12.5px; color: var(--sl-sand-50); }
.prf-checks span { font-family: var(--font-mono); font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prf-checks em { grid-column: 2; font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.prf-checks .ph { font-size: 16px; }
.prf-checks .ok .ph { color: #7fc9a0; }
.prf-checks .q .ph { color: var(--text-muted); }
html.js .prf-checks li { opacity: 0; transform: translateX(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.js .in .prf-checks li { opacity: 1; transform: none; }
html.js .in .prf-checks li:nth-child(1) { transition-delay: .3s } html.js .in .prf-checks li:nth-child(2) { transition-delay: 1.1s } html.js .in .prf-checks li:nth-child(3) { transition-delay: 1.3s }

/* --------------------------------------------------------------------------
   Feature 04 · Jun0, ask your cloud
   -------------------------------------------------------------------------- */
.ask .sess-prompt { font-size: 15px; }
.ask-a { margin: 14px 0 10px; font-size: 14.5px; color: var(--sl-sand-50); }
.ask-a b { font-weight: 500; color: var(--accent); }
.ask-rows { display: grid; gap: 8px; }
.ask-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 9px; border: 1px solid #2c2b29; background: #151514; font-size: 12px; color: var(--text-muted); transition: opacity .35s, border-color .35s, background-color .35s; }
.ask-rows code { font-size: 12.5px; color: var(--sl-sand-50); }
.ask-rows em { font-style: normal; color: var(--sl-sand-50); }
html.js .ask-rows li { opacity: .35; }
html.js .ask-rows li.lit { opacity: 1; border-color: rgba(228,75,51,.45); background: rgba(228,75,51,.05); }
.ask-next { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--sl-sand-50); }

/* --------------------------------------------------------------------------
   Use cases
   -------------------------------------------------------------------------- */
/* right-sizing */
.rsz-rows { display: grid; gap: 8px; }
.rsz-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 12px; }
.rsz-rows s, .rsz-rows b { padding: 5px 8px; border-radius: 6px; border: 1px solid #2c2b29; background: #111110; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; position: relative; }
.rsz-rows s { color: var(--text-faint); }
.rsz-rows s::after { content: ""; position: absolute; left: 6px; right: 6px; top: 54%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease) .5s; }
.in .rsz-rows s::after, html:not(.js) .rsz-rows s::after { transform: scaleX(1); }
.rsz-rows b { border-color: rgba(228,75,51,.5); background: rgba(228,75,51,.07); color: var(--sl-sand-50); }
.rsz-rows .ph { font-size: 12px; color: var(--text-muted); }
.rsz-rows em { font-style: normal; text-align: right; color: #7fc9a0; }
html.js .rsz-rows b, html.js .rsz-rows em { opacity: 0; transition: opacity .4s var(--ease) .8s; }
html.js .in .rsz-rows b, html.js .in .rsz-rows em { opacity: 1; }
.rsz .viz-foot .ok .ph, .tagl .viz-foot .ok .ph { color: #7fc9a0; }

/* tag ledger */
.tagl-rows { display: grid; gap: 8px; }
.tagl-rows li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 26px); gap: 6px; align-items: center; font-size: 12px; color: var(--sl-sand-50); }
.tagl-rows span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagl-rows .ph { width: 26px; height: 22px; padding: 4px; border-radius: 6px; background-color: #7fc9a0; -webkit-mask-size: 14px; mask-size: 14px; }
.tagl-rows li { position: relative; }
.tagl-rows li::after { content: ""; position: absolute; right: 0; top: 50%; width: calc(3 * 26px + 2 * 6px); height: 22px; transform: translateY(-50%); border-radius: 6px; box-shadow: inset 0 0 0 1px #2c2b29; pointer-events: none; }
html.js .tagl-rows .ph { transform: scale(.4); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.4,1), opacity .25s; }
html.js .in .tagl-rows .ph { transform: none; opacity: 1; }
html.js .in .tagl-rows li:nth-child(1) .ph { transition-delay: .4s } html.js .in .tagl-rows li:nth-child(2) .ph { transition-delay: .6s } html.js .in .tagl-rows li:nth-child(3) .ph { transition-delay: .8s }

/* flowchart (secure defaults) */
.fl { display: grid; justify-items: center; gap: 18px; }
.fl > li { position: relative; }
.fl > li + li::before { content: ""; position: absolute; left: 50%; top: -18px; height: 18px; width: 1px; background: #3a3936; }
.fl-node { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; border: 1px solid #2c2b29; background: #171716; font-size: 12.5px; color: var(--sl-sand-50); transition: border-color .35s, background-color .35s, box-shadow .35s, opacity .35s; }
.fl-node .ph { font-size: 15px; color: var(--text-muted); flex: 0 0 auto; }
.fl-node b { font-weight: 500; font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }
.fl-trigger { border-color: rgba(228,75,51,.55); }
.fl-trigger .ph { color: var(--accent); }
.fl-q { padding: 7px 12px; border: 1px dashed #4a4846; border-radius: 999px; font-size: 12px; color: var(--sl-grey-200); background: #121211; transition: opacity .35s; }
.fl-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; padding-top: 14px; }
.fl-branches::after { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 1px; background: #3a3936; }
.fl-branch { position: relative; display: grid; justify-items: center; gap: 10px; align-content: start; }
.fl-branch::before { content: ""; position: absolute; top: -14px; left: 50%; height: 14px; width: 1px; background: #3a3936; }
.fl-edge { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.fl-branch .fl-node + .fl-node { position: relative; }
.fl-branch .fl-node + .fl-node::before { content: ""; position: absolute; left: 50%; top: -11px; height: 10px; width: 1px; background: #3a3936; }
.fl-soft { opacity: .75; }
.fl-ok { border-color: rgba(127,201,160,.45); }
.fl-ok .ph { color: #7fc9a0; }
.fl-sep { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.fl > .fl-sep::before { display: none; }
.fl-sep::after { content: ""; flex: 1; border-top: 1px dashed #3a3936; }
.fl > .fl-sep + li::before { display: none; }
.fl-cap { border-color: #4a352f; }
.fl-cap .ph { color: var(--accent); }
html.js .fl .fl-node, html.js .fl .fl-q { opacity: .4; }
html.js .fl .lit { opacity: 1; }
html.js .fl .fl-node.lit { border-color: rgba(228,75,51,.6); box-shadow: 0 0 14px rgba(228,75,51,.14); }
html.js .fl .fl-ok.lit { border-color: rgba(127,201,160,.6); box-shadow: 0 0 14px rgba(127,201,160,.12); }

/* PR queue */
.prq-rows { display: grid; gap: 8px; }
.prq-rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; border: 1px solid #2c2b29; background: #151514; transition: opacity .35s, border-color .35s, box-shadow .35s; }
.prq-rows > li > .ph { font-size: 16px; color: #7fc9a0; }
.prq-rows strong { display: block; font-size: 13px; font-weight: 500; color: var(--sl-sand-50); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prq-rows small { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.prq-rows .hot > .ph { color: var(--accent); }
html.js .prq-rows li { opacity: .35; }
html.js .prq-rows li .pill { opacity: 0; transition: opacity .3s; }
html.js .prq-rows li.lit { opacity: 1; }
html.js .prq-rows li.lit .pill { opacity: 1; }
html.js .prq-rows li.hot.lit { border-color: rgba(228,75,51,.55); background: rgba(228,75,51,.06); box-shadow: 0 0 16px rgba(228,75,51,.14); }

/* --------------------------------------------------------------------------
   CTA · agent terminal (lines type in on reveal)
   -------------------------------------------------------------------------- */
.term { display: grid; gap: 8px; padding: clamp(16px, 2.5vw, 28px) clamp(16px, 3vw, 32px) clamp(24px, 3vw, 40px); font-size: 13.5px; color: var(--sl-grey-200); }
.term li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.term li em { font-style: normal; color: var(--text-faint); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term .cmd { color: var(--sl-sand-50); margin-top: 8px; }
.term .cmd:first-child { margin-top: 0; }
.term .p { color: var(--accent); font-size: 16px; }
.term .ph { font-size: 14px; flex: 0 0 auto; }
.term .ok .ph { color: #7fc9a0; }
.term .warn .ph { color: var(--accent); }
.term .warn em { color: var(--sl-coral); }
.term .dim .ph { color: var(--text-muted); }
html.js .term li { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
html.js .term li.lit { opacity: 1; transform: none; }
@media (max-width: 719.98px) {
  .term { font-size: 12px; }
  .term li { flex-wrap: wrap; row-gap: 0; }
  .term li em { margin-left: 24px; flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 719.98px) {
  .sk-body, .prf-body { grid-template-columns: 1fr; }
  .mcp-tools { grid-template-columns: 1fr; }
  .mcp-log li { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .mcp-log time { display: none; }
  .ask-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .ask-rows code { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iso .stage .pk { display: none; }
  .iso .pk { display: none; }
  html.js .iso .result-wrap { opacity: 1; animation: none !important; }
  .iso .code .cl { animation: none !important; fill: #8a857f; }
  .mcp-live i { animation: none !important; }
  html.js .sk-doc .snippet, html.js .sk-agents li, html.js .mcp-log li, html.js .prf-diff .d.add,
  html.js .prf-checks li, html.js .ask-rows li, html.js .rsz-rows b, html.js .rsz-rows em, html.js .tagl-rows .ph,
  html.js .prq-rows li, html.js .prq-rows .pill, html.js .term li { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
@media (max-width: 719.98px) {
  .prq-rows li { grid-template-columns: 18px minmax(0, 1fr); }
  .prq-rows .pill { grid-column: 2; justify-self: start; }
  .prq-rows strong { white-space: normal; }
  .rsz-rows li { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 38px; gap: 6px; font-size: 11px; }
}
.prf-body { align-content: center; }


/* --------------------------------------------------------------------------
   Agentic Code Governance additions
   -------------------------------------------------------------------------- */
.story-head { max-width: 860px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.story-head h2 { margin: 0 0 16px; }
.story-head .lead { margin: 0 auto; max-width: 64ch; }
.ftab-kicker { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.ftab[aria-selected="true"] .ftab-kicker { color: var(--accent); }

/* Policies as Code */
.pac-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px); gap: 14px; align-items: center; }
.pac .sk-doc .snippet { white-space: pre-wrap; }
.pac-notes { display: grid; gap: 8px; }
.pac-notes li { padding: 10px 12px; border-radius: 9px; border: 1px solid #2c2b29; background: #141413; }
.pac-notes b { display: block; font-weight: 500; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.pac-notes span { font-size: 12.5px; color: var(--accent-hover); }
.pac-packs { display: flex; gap: 8px; margin-top: 14px; }
.pac-packs li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid #34322f; font-size: 13px; color: var(--sl-sand-50); }
.pac-packs .ph { font-size: 14px; color: var(--accent); }
.pac-cc { display: inline-flex; align-items: center; gap: 8px; }
.pac-cc img { filter: grayscale(1); }
.pac .viz-foot .ok .ph, .scope .viz-foot .ok .ph { color: #7fc9a0; }
html.js .pac-notes li { opacity: 0; transform: translateX(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.js .in .pac-notes li { opacity: 1; transform: none; }
html.js .in .pac-notes li:nth-child(1) { transition-delay: .9s } html.js .in .pac-notes li:nth-child(2) { transition-delay: 1.1s } html.js .in .pac-notes li:nth-child(3) { transition-delay: 1.3s }

/* Stacklet MCP: inherited scope + pricing */
.scope .sess-prompt { font-size: 14px; margin-bottom: 12px; }
.scope .sess-prompt code { color: var(--accent-hover); }
.scope .sess-prompt b { font-weight: 500; font-family: var(--font-mono); font-size: 13px; }
.scope-tree { display: grid; gap: 6px; }
.scope-tree li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid #2c2b29; background: #141413; font-size: 13px; color: var(--sl-sand-50); transition: opacity .35s, transform .35s; }
.scope-tree li:nth-child(2) { margin-left: 22px; } .scope-tree li:nth-child(3) { margin-left: 44px; }
.scope-tree .ph { font-size: 15px; color: var(--text-muted); }
.scope-tree em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.scope-tree li.on { border-color: rgba(228,75,51,.55); background: rgba(228,75,51,.06); }
.scope-tree li.on .ph { color: var(--accent); }
.scope-total { display: flex; justify-content: space-between; margin: 10px 0 16px; padding: 0 12px; font-size: 12px; color: var(--text-muted); }
.scope-total b { font-weight: 500; color: var(--sl-sand-50); }
.scope-price { display: grid; gap: 6px; }
.scope-price li { display: grid; grid-template-columns: minmax(0, 1fr) 80px 84px; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 8px; background: #121211; border: 1px solid #242321; font-size: 12px; color: var(--sl-grey-200); transition: opacity .35s, transform .35s; }
.scope-price em { font-style: normal; text-align: right; color: var(--sl-sand-50); }
.scope-price .pill { justify-self: end; }
html.js .scope-tree li, html.js .scope-price li { opacity: 0; transform: translateY(4px); }
html.js .scope-tree li.lit, html.js .scope-price li.lit { opacity: 1; transform: none; }

@media (max-width: 719.98px) {
  .pac-body { grid-template-columns: 1fr; }
  .pac-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pac-notes span { font-size: 11px; }
  .scope-price li { grid-template-columns: minmax(0, 1fr) 70px auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .pac-notes li, html.js .scope-tree li, html.js .scope-price li { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Story scenes for this page: deployed-policy markers (row 1) and
   cloud remediation of console changes, drift and idle pods (row 3)
   -------------------------------------------------------------------------- */
.iso .dep rect { fill: rgba(228,75,51,.85); stroke: #ff8a75; stroke-width: 1; }
.iso .k8s .ft { fill: #2b2926; } .iso .k8s .fl { fill: #1f1d1b; } .iso .k8s .fr { fill: #181715; }
.iso .k8s polygon { stroke: #5a5752; stroke-dasharray: 3 3; }
.iso .pod .ft { fill: #4a4743; } .iso .pod .fl { fill: #33312d; } .iso .pod .fr { fill: #262421; }
.iso .rem .obj .ft { fill: #5a2418; } .iso .rem .obj .fl { fill: #3a1a12; } .iso .rem .obj .fr { fill: #2a130e; }
.iso .rem .obj polygon { stroke: #e44b33; transition: fill .4s, stroke .4s; }
.iso .rem.lit .obj .ft { fill: #2c4436; } .iso .rem.lit .obj .fl { fill: #1f3027; } .iso .rem.lit .obj .fr { fill: #18241e; }
.iso .rem.lit .obj polygon { stroke: rgba(127,201,160,.8); }
.iso .rem .fan { stroke: #3a2620; }
.iso .rem.lit .fan { stroke: rgba(228,75,51,.8); stroke-dasharray: none; }
.iso .rem.lit .pk { animation: iso-pk .9s linear 1; }
.iso .rem-tag rect { stroke: rgba(228,75,51,.6); transition: stroke .4s; }
.iso .rem-tag .st-open { fill: var(--accent); }
.iso .rem-tag .st-ok { fill: #7fc9a0; display: none; }
#panel-life .life-term { position: static; width: auto; margin-top: 12px; }
.iso .rem-tag.lit rect { stroke: rgba(127,201,160,.6); }
.iso .rem-tag.lit .st-open { display: none; }
.iso .rem-tag.lit .st-ok { display: inline; }
/* row 1 · policy hierarchy → agent */
.iso .tier polygon { stroke-width: 1; stroke-linejoin: round; }
.iso .t-org .ft { fill: #1d1c1a; } .iso .t-org .fl { fill: #161514; } .iso .t-org .fr { fill: #121110; } .iso .t-org polygon { stroke: #3a3936; }
.iso .t-ou .ft { fill: #24221f; } .iso .t-ou .fl { fill: #1a1917; } .iso .t-ou .fr { fill: #141311; } .iso .t-ou polygon { stroke: #4a4743; }
.iso .t-acct .ft { fill: #3a1c14; } .iso .t-acct .fl { fill: #2a1510; } .iso .t-acct .fr { fill: #1d0f0b; } .iso .t-acct polygon { stroke: #c43b29; }
.iso .t-acct { filter: drop-shadow(0 0 16px rgba(228,75,51,.3)); }
.iso .inh { fill: none; stroke: #4a4743; stroke-width: 1; stroke-dasharray: 2 3; }
.iso .sheet .ft { fill: #3a3835; } .iso .sheet .fl { fill: #2a2825; } .iso .sheet .fr { fill: #1f1e1b; }
.iso .sheet polygon { stroke: #5a5752; stroke-width: .8; stroke-linejoin: round; }
.iso .flow-old { stroke: #3a3936; }
.iso .cut circle { fill: #121110; stroke: var(--accent); stroke-width: 1.2; }
.iso .cut path { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.iso .okb circle { fill: #7fc9a0; } .iso .okb path { fill: none; stroke: #0d0d0c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iso .flow { animation: none; }

/* row 2 · shift left: fixed in the diff, no tickets */
.iso .pad .ft { fill: #2b2926; } .iso .pad .fl { fill: #1f1d1b; } .iso .pad .fr { fill: #181715; } .iso .pad polygon { stroke: #4a4743; }
.iso .chg .ft { fill: #5a2418; } .iso .chg .fl { fill: #3a1a12; } .iso .chg .fr { fill: #2a130e; }
.iso .chg polygon { stroke: #e44b33; transition: fill .4s, stroke .4s; }
.iso .stg.pass .chg .ft { fill: #4a4743; } .iso .stg.pass .chg .fl { fill: #33312d; } .iso .stg.pass .chg .fr { fill: #262421; } .iso .stg.pass .chg polygon { stroke: #6b6761; }
.iso .stamp { opacity: 0; transition: opacity .35s; }
.iso .stamp rect { fill: #7fc9a0; } .iso .stamp path { fill: none; stroke: #0d0d0c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.iso .stg.lit .chg .ft { fill: #2c4436; } .iso .stg.lit .chg .fl { fill: #1f3027; } .iso .stg.lit .chg .fr { fill: #18241e; }
.iso .stg.lit .chg polygon { stroke: rgba(127,201,160,.8); }
.iso .stg.lit .stamp { opacity: 1; }
.iso .stg.lit .pad polygon { stroke: rgba(127,201,160,.5); }
.iso .shift { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 10 6; filter: drop-shadow(0 0 4px rgba(228,75,51,.5)); animation: shift-left 1.2s linear infinite; }
.iso .shift-head { fill: var(--accent); }
@keyframes shift-left { to { stroke-dashoffset: 16; } }
.iso .tray .ft { fill: #2b2926; } .iso .tray .fl { fill: #1f1d1b; } .iso .tray .fr { fill: #181715; } .iso .tray polygon { stroke: #5a5752; }
.iso .ghost polygon { fill: none; stroke: #4a4743; stroke-width: 1; stroke-dasharray: 3 3; }
.iso .ghost { animation: ghost 3.2s ease-in-out infinite; }
.iso .ghost.g1 { animation-delay: .25s; } .iso .ghost.g2 { animation-delay: .5s; } .iso .ghost.g3 { animation-delay: .75s; }
@keyframes ghost { 0%, 100% { opacity: .55; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .iso .shift, .iso .ghost { animation: none; } }
/* row 1 · the new code file */
.iso .file .fl { fill: #121110; } .iso .file .ft, .iso .file .fr { fill: #3a3936; }
.iso .file polygon { stroke: #6b6761; stroke-width: 1; stroke-linejoin: round; }
.iso .file-face .fhead { fill: #1d1c1a; }
.iso .file-face circle { fill: #4a4846; }
.iso .file-face text { font-family: var(--font-mono); font-size: 6px; fill: var(--text-muted); }
.iso .file-face rect:not(.fhead) { fill: #4a4743; }
.iso .file-face rect.pol { fill: #7fc9a0; }
.iso .file-face .fchk circle { fill: none; stroke: #7fc9a0; stroke-width: .9; }
.iso .file-face .fchk path { fill: none; stroke: #7fc9a0; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.iso .tray-in .ft { fill: #121110; } .iso .tray-in polygon { stroke: #3a3936; }
/* row 2 · one check: as written → Stacklet → ready to merge */
.iso .chg.ok .ft { fill: #2c4436; } .iso .chg.ok .fl { fill: #1f3027; } .iso .chg.ok .fr { fill: #18241e; }
.iso .chg.ok polygon { stroke: rgba(127,201,160,.8); }
.iso .bad-m { fill: var(--accent); }
.iso .ok-m { fill: #7fc9a0; }
.iso .sgate .ft { fill: #5a2418; } .iso .sgate .fl { fill: #2a1510; } .iso .sgate .fr { fill: #1d0f0b; }
.iso .sgate polygon { stroke: #e44b33; stroke-width: 1.2; stroke-linejoin: round; }
.iso .sgate { filter: drop-shadow(0 0 10px rgba(228,75,51,.3)); }
#panel-fix .iso.on .pk { animation-duration: 2.4s; }

/* SVG scene labels are decoration; keep stray clicks from leaving a text selection on them */
.iso text { -webkit-user-select: none; user-select: none; }