.living-system{--glow:#58e07b;background:#070c08;color:#f2efdf;position:relative;padding:0!important;overflow:hidden;min-height:820px}.living-heading{position:absolute;left:3.5%;top:35px;z-index:3;pointer-events:none;width:40vw;--hp-font:var(--font-display);--hp-weight:var(--display-weight);--hp-track:var(--display-track);--hp-accent-font:var(--font-accent);--hp-accent-weight:var(--accent-weight);--hp-accent-style:var(--accent-style);--hp-accent-vs:var(--accent-vs);--hp-size:96px;--hp-sub-size:clamp(19px,1.25vw + 6px,28px);--hp-sub-width:31vw;--hp-list-size:max(19px,calc(var(--hp-sub-size)*.86))}.living-heading:not(.hp) h1{font-size:clamp(52px,5.6vw,86px);line-height:.99;letter-spacing:var(--display-track)}.living-heading:not(.hp) p{max-width:var(--hp-sub-width);font-size:var(--hp-sub-size);line-height:1.28;letter-spacing:-.012em;color:#c2c9ba}.living-rule{display:block;width:34px;height:1px;background:#53db76;margin:28px 0}.system-field{position:relative;width:100%;aspect-ratio:1440/780;min-height:780px}.system-svg,.system-particles{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.system-svg{overflow:visible}.system-particles{pointer-events:none}/* Hero grain; mirrored so it never lines up with the page grain overlay. */.living-system:after{content:'';position:absolute;inset:0;background:url(assets/grain.png) repeat;opacity:.035;mix-blend-mode:screen;pointer-events:none;animation:grain-jitter .27s steps(1,end) infinite;transform:scaleX(-1)}.system-node{position:absolute;z-index:4;transform:translate(-50%,-29%);background:none;border:0;color:#f2efdf;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px;min-width:88px}.node-glyph{display:grid;place-items:center;border:1px solid #50d873;border-radius:50%;width:53px;height:53px;font:30px/1 var(--font-mono);background:radial-gradient(circle at 50% 0,#1c3623,#070d08 70%);box-shadow:0 0 13px #53db7633;transition:box-shadow .6s,color .6s,border-color .6s}.system-node:hover .node-glyph,.system-node:focus-visible .node-glyph,.system-node[aria-expanded=true] .node-glyph{box-shadow:0 0 40px #58e07b80;border-color:#d2ffdd}.node-recall{left:56.944%;top:16.025%}.node-plan{left:72.153%;top:36.410%}.node-execute{left:66.32%;top:69.36%}.node-audit{left:47.57%;top:69.36%}.node-integrate{left:41.736%;top:36.410%}.system-node.is-active .node-glyph{box-shadow:0 0 45px #58e07b90;background:#142618;color:#58e07b;border-color:#caffd7}.living-system[data-phase=finding] .node-audit .node-glyph,.living-system[data-phase=repair] .node-execute .node-glyph{border-color:#edb677;color:#ffce8e;box-shadow:0 0 35px #c9844470}.feed{position:absolute;z-index:3;font-size:15px;display:flex;gap:16px;align-items:center}.feed i{display:block;width:7px;height:7px;border-radius:50%;background:#58e07b;box-shadow:0 0 17px 5px #53db7640}.feed-link{display:flex;gap:inherit;align-items:center}.feed-link:hover{color:#58e07b}.feed-recall{left:18.2%;top:37.1%}.feed-arena{left:18.2%;top:46.1%}.feed-horizon{left:18.2%;top:55.2%}.feed-review{left:18.2%;top:64.2%}.goal-label{position:absolute;left:2.5%;top:49.1%;font-size:17px}.horizon-caption{position:absolute;left:57%;top:5%;transform:translateX(-50%);text-align:center;font-size:14px;z-index:3}.horizon-caption small,.memory-caption small{display:block;font:9px/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;color:#a2bea9}.system-caption{position:absolute;left:57%;top:42%;width:235px;transform:translateX(-50%);text-align:center;z-index:3}.system-caption small{font:10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#50d873}.system-caption p{font-size:23px;line-height:1.15;letter-spacing:-.035em;margin:15px 0}.system-caption>span{font:10px/1.5 var(--font-mono);color:#839e8a}.system-detail{position:absolute;left:57%;top:34%;transform:translateX(-50%);width:260px;z-index:7;background:#09100bf5;border:1px solid #538b61;padding:24px;box-shadow:0 0 80px #040704}.system-detail[hidden]{display:none}.detail-close{position:absolute;right:8px;top:5px;color:#bae7c5;background:none;border:0;font-size:24px}.system-detail small{font:10px var(--font-mono);color:#50d873}.system-detail h2{font-size:25px;line-height:1.04;margin:12px 0}.system-detail p{font-size:13px;line-height:1.5;color:#d2d7c7}.system-detail>a{display:inline-block;font-size:12px;border-bottom:1px solid #4c8b5c;padding:10px 0 5px;margin-top:8px}.artifact-gate{position:absolute;left:83.3%;top:47%;transform:translate(-50%,-20%);text-align:center}.artifact-sheets{width:56px;height:77px;border:1px solid #7ba986;position:relative;background:linear-gradient(140deg,#53856040,#112014);box-shadow:5px -6px 0 -1px #122316,5px -6px 0 0 #547f5f,10px -12px 0 -1px #122316,10px -12px 0 0 #547f5f;display:grid;place-items:center;margin:auto}.artifact-sheets span{display:grid;place-items:center;width:35px;height:35px;border:1px solid #7ab789;border-radius:50%;font-size:26px;background:#0a130c}.artifact-gate p{font:10px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;margin-top:17px;color:#a0bfa8}.human-gate{position:absolute;left:93%;top:48%;transform:translateX(-50%);text-align:center}.human-gate>span{display:grid;place-items:center;width:50px;height:50px;border:1px solid #bce8c7;border-radius:50%;font-size:33px}.human-gate p{font-size:17px;text-align:left;line-height:1.1;margin-top:13px}.human-gate small{position:absolute;bottom:calc(100% + 88px);left:-17px;width:110px;font:9px/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;text-align:left;color:#c5cdb7}.human-gate:before{content:'';position:absolute;bottom:calc(100% + 8px);left:25px;height:70px;border-left:1px solid #87ad90}.memory-caption{position:absolute;left:57%;top:84%;transform:translateX(-50%);text-align:center;font-size:15px;background:#080f0a;z-index:3;padding:0 14px}.system-bottom{position:absolute;bottom:20px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;align-items:center;font:10px/1.5 var(--font-mono);color:#97b29e;z-index:5}.system-controls{display:flex;gap:24px;align-items:center}.system-controls button{background:none;border:0;border-bottom:1px solid #44614b;color:#bde5c7;padding:7px 0;font:11px var(--font-mono)}.system-controls a{font-size:11px;color:#bde5c7}.repair-route{opacity:.12}.living-system[data-phase=finding] .repair-route,.living-system[data-phase=repair] .repair-route{opacity:1}.living-system[data-checked=true] .artifact-sheets{box-shadow:0 0 35px #53db7660,5px -6px 0 -1px #1f3c26,5px -6px 0 0 #50d873,10px -12px 0 -1px #1d3723,10px -12px 0 0 #50d873}.living-system[data-checked=true] .artifact-gate p{color:#c2fad0}.audit-details h2{margin:20px 0 55px}.audit-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.audit-detail-grid span{font:11px var(--font-mono)}.audit-detail-grid h3{font-size:28px;margin:20px 0}.audit-detail-grid p{font-size:16px;line-height:1.6}.system-static{padding:20px 5%;position:relative;z-index:8}
@media(min-width:1500px){.system-field{min-height:0}.living-system{min-height:calc(100vh - 85px)}}
@media(min-width:701px) and (max-width:1100px){.living-system{min-height:820px}.living-heading{top:30px;--hp-sub-width:88%}.living-heading:not(.hp) h1{font-size:58px}.system-field{margin-top:175px;min-height:550px;aspect-ratio:1440/850}.horizon-caption{top:4%}.feed{font-size:12px;gap:5px}.system-node{font-size:16px;gap:5px}.node-glyph{width:43px;height:43px;font-size:25px}.system-caption{width:155px;top:43%}.system-caption p{font-size:19px}.system-detail{width:230px;top:33%;padding:20px}.artifact-gate{left:84%}.human-gate{left:94%}.human-gate p{font-size:13px}.human-gate small{font-size:8px;width:85px;left:-28px}.human-gate>span{width:42px;height:42px}.memory-caption{font-size:12px;top:85%}.memory-caption small{font-size:8px}.system-bottom{bottom:20px}.goal-label{font-size:13px;left:1.5%}.artifact-sheets{width:39px;height:57px}.artifact-gate p{font-size:8px}}
@media(max-width:700px){.living-system{min-height:1050px}.living-heading{position:relative;left:auto;top:auto;padding:30px 12px 0 6%;width:auto;--hp-stack:1;--hp-sub-width:calc(100% - 6vw + 12px)}.living-heading:not(.hp) h1{font-size:58px;max-width:350px}.living-rule{margin:22px 0 15px}.system-field{height:665px;min-height:0;aspect-ratio:auto;margin-top:12px}.system-svg{width:190%;height:100%;left:-61%;opacity:.8}.system-particles{display:none}.system-node{font-size:16px;min-width:70px;padding:8px;gap:5px}.node-glyph{width:45px;height:45px;font-size:25px}.node-recall{left:49%;top:23%}.node-plan{left:82%;top:37%}.node-execute{left:72%;top:62%}.node-audit{left:29%;top:62%}.node-integrate{left:17%;top:37%}.feed{font-size:12px;z-index:5;gap:6px;background:#070c08b8;padding:5px}.feed-recall{left:5%;top:0}.feed-arena{left:36%;top:0}.feed-horizon{left:61%;top:0}.feed-review{left:6%;top:76%}.goal-label{left:6%;top:13%;font-size:14px}.horizon-caption{left:67%;top:11%;font-size:12px}.horizon-caption small{font-size:7px}.system-caption{left:50%;top:42%;width:170px}.system-caption p{font-size:21px;margin:12px 0}.system-caption small{font-size:9px}.system-caption>span{font-size:9px}.system-detail{left:50%;top:37%;width:215px;padding:18px}.system-detail h2{font-size:23px}.system-detail p{font-size:12px}.system-detail>a{font-size:11px}.artifact-gate{left:52%;top:80%;transform:translateX(-50%);display:flex;align-items:center;gap:17px}.artifact-sheets{width:34px;height:47px;flex-shrink:0}.artifact-sheets span{width:25px;height:25px;font-size:20px}.artifact-gate p{font-size:8px;text-align:left;width:66px;margin:0}.human-gate{left:86%;top:79%}.human-gate>span{width:39px;height:39px;font-size:25px}.human-gate p{font-size:12px;margin-top:8px}.human-gate:before,.human-gate small{display:none}.memory-caption{left:43%;top:96%;font-size:12px;width:260px}.memory-caption small{font-size:8px}.system-bottom{position:relative;left:auto;right:auto;bottom:auto;padding:40px 6% 22px;display:block}.system-bottom>span{font-size:8px;display:block;margin-bottom:13px}.system-controls{justify-content:space-between;gap:15px}.audit-detail-grid{grid-template-columns:1fr;gap:28px}.audit-detail-grid h3{margin:10px 0;font-size:27px}.audit-details h2{font-size:43px;margin-bottom:35px}.living-system[data-phase] .node-glyph{transition:none}}
.mobile-system-svg{display:none}.living-system{min-height:900px}.living-heading{top:94px}.system-field{margin-top:100px}.node-glyph{box-shadow:0 0 25px #53db7644}.node-glyph svg,.human-gate>span svg{width:25px;height:25px}.goal-label{left:2%}.system-svg .filament-cloud{filter:drop-shadow(0 0 3px #53db7644)}
@media(min-width:701px) and (max-width:1100px){.living-heading{top:112px}.system-field{margin-top:275px}.living-system{min-height:920px}}
@media(max-width:700px){.living-system{min-height:1150px}.living-heading{top:auto;padding-top:120px}.system-field{margin-top:15px}.system-svg{display:none}.mobile-system-svg{display:block;position:absolute;inset:0;width:100%;height:100%}.system-bottom{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.system-particles{display:none}.node-glyph{transition:none}.living-system:after{animation:none}}
@media(min-width:701px) and (max-width:1100px){.goal-label{left:2%;top:43.5%}}

/* With scripting on, hero-pillars.mjs replaces the fallback heading; keep the fallback from painting first,
   but fade it in after 1s in case the module never mounts (blocked or failed to load). */
@media(scripting:enabled){.living-heading:not(.hp){opacity:0;animation:hero-fallback .3s 1s forwards}}@keyframes hero-fallback{to{opacity:1}}
/* Headline at full size (96px) from 701px up: its box runs across the hero (93%, less a classic scrollbar),
   so the size follows the widest row and stays at the cap. Up to 759px line one stacks, as on phones.
   Up to 1100px the heading sits in flow above the diagram. From 1101px it sits over the field's top left, so
   the field starts lower, most at 1101-1312px, where line one reaches the Long Horizon caption, then less
   as the hero widens (16px or more between the headline and any stroke or label). A margin, not an offset:
   the hero grows to hold the whole field, so the horizon is never cut. */
@media(min-width:701px){.living-heading{width:calc(93% - var(--gutter,0px))}}
@media(min-width:701px) and (max-width:759px){.living-heading{--hp-stack:1}}
@media(min-width:701px) and (max-width:1100px){.living-heading{position:relative;top:auto;left:auto;width:auto;padding:112px calc(3.5% + var(--gutter,0px)) 0 3.5%}.system-field{margin-top:0}}
@media(min-width:1101px) and (max-width:1799px){.system-field{margin-top:calc(120px + clamp(0px,606px - 34.4vw,156px))}}
/* Phones: the sub-line rises less, so it stays 14px clear of the feed labels while it does. */
@media(max-width:700px){.living-heading{--hp-sub-rise:.25em}}
/* Human approval lights like a stage node while it is the active phase (the headline's "production-ready" drives it too). */
.human-gate>span{transition:box-shadow .6s,color .6s,border-color .6s,background .6s}.living-system[data-phase=human] .human-gate>span{box-shadow:0 0 45px #58e07b90;background:#142618;color:#58e07b;border-color:#caffd7}
@media(prefers-reduced-motion:reduce){.human-gate>span{transition:none}}

button.memory-caption{background:none;border:0;color:inherit;font-family:inherit;cursor:pointer;padding:8px}button.memory-caption:hover,button.memory-caption:focus-visible,button.memory-caption.is-active{color:#58e07b}button.memory-caption:focus-visible{outline:1px solid #53db76;outline-offset:4px}

/* The goal's branch names the skills behind the pillar on show (living-system.mjs). A feed keeps its own
   label in the layout while hidden, so its dot never moves; the names end just before the dot. Typed
   commands are mono in the label ink; what runs by itself is in the label face, quieter, with a tag. Each name
   links to its entry; while names show, the feed's own link is inert (living-system.mjs). */
.feed-skill{visibility:hidden}
.feed-label.is-off{opacity:0}/* not visibility: the label stays the link's accessible name */
.feed-skill{position:absolute;top:0;right:23px;white-space:nowrap;text-align:right;font:16px/17px var(--font-mono);color:#f2efdf;text-shadow:0 0 5px #070c08,0 0 11px #070c08}
.feed-skill.is-on{visibility:visible}.feed-skill.is-out{pointer-events:none}.feed-skill:hover,.feed-skill:hover small{color:#58e07b}
.feed-slash{color:#58e07b}
.feed-skill.is-auto{font-family:inherit;font-size:15px;color:#c2c9ba}
.feed-skill small{display:block;margin-top:4px;font:13px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#9dbba5}
.feed-label.is-anim,.feed-skill.is-anim{will-change:transform,opacity,filter}
.feed.is-idle i{opacity:.22}
@media(min-width:701px) and (max-width:1100px){.feed-skill,.feed-skill.is-auto{right:12px;font-size:12px;line-height:14px}.feed-skill small{font-size:12px}}
/* Phones: one row of names under the sub-line, each on its own plate, placed by the script (--sx, --sy). */
@media(max-width:700px){.feed{--feed-row:1}.feed-skill,.feed-skill.is-auto{right:auto;left:var(--sx,0px);top:var(--sy,0px);padding:5px;background:#070c08b8;text-align:left;font-size:12px;line-height:14px}.feed-skill small{font-size:12px}
 .feed.is-skill,.feed.is-idle{background-color:#070c0800}.feed.is-skill i,.feed.is-idle i{opacity:0}
 .mobile-system-svg [data-slot].is-lit{stroke:#a3f1b9;stroke-width:1.3px}.mobile-system-svg [data-slot].is-idle{stroke-opacity:.3}}
/* Wider screens: each name sits on a plate of the hero's own ground, feathered at the edges, so no strand
   runs through its letters or its tag. The padding is taken back from the offset, so the text stays put. */
@media(min-width:701px){.feed-skill{right:17px;padding:3px 6px;margin-top:-3px;background:#070c08e6;border-radius:4px;box-shadow:0 0 6px 2px #070c08e6}.feed i{position:relative;z-index:1}}
@media(min-width:701px) and (max-width:1100px){.feed-skill,.feed-skill.is-auto{right:9px;padding:3px}}
/* Phones: the branch names, the feeds' own labels and "Your goal" sit on opaque plates of the hero's ground,
   feathered at the edges, so no strand runs through their letters or tags; a strand that starts under a
   label leaves from its edge. The feed's feather fades with its plate (living-system.mjs). The headline
   keeps clear of a classic scrollbar (--gutter). */
@media(max-width:700px){.living-heading{padding-right:calc(12px + var(--gutter,0px))}
 .feed-skill,.feed-skill.is-auto{background:#070c08;border-radius:4px;box-shadow:0 0 6px 2px #070c08}
 .feed{background:#070c08;border-radius:4px;box-shadow:0 0 6px 2px #070c08}.feed.is-skill,.feed.is-idle{box-shadow:0 0 6px 2px #070c0800}
 .goal-label{padding:3px 6px;margin:-3px -6px;background:#070c08;border-radius:4px;box-shadow:0 0 6px 2px #070c08}
 .living-system:after{z-index:6}/* the grain runs over the plates too, so they match the ground around them */}