/* The feature family is the unit of reading; chapters retain their deep links. */
.feature-atlas{margin:56px 0 76px}.feature-atlas-heading{max-width:850px;margin-bottom:26px}.feature-atlas-heading h2{font:500 clamp(27px,3vw,42px)/1.2 'Playfair Display',serif;margin:12px 0}.feature-atlas-heading p{color:#adbfbf;line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.feature-card,.feature-family{--family-color:#dec17c}.feature-card:nth-child(6n+2),.feature-family[style*="index:1"]{--family-color:#83d9bc}.feature-card:nth-child(6n+3),.feature-family[style*="index:2"]{--family-color:#95baff}.feature-card:nth-child(6n+4),.feature-family[style*="index:3"]{--family-color:#c2a1f5}.feature-card:nth-child(6n+5),.feature-family[style*="index:4"]{--family-color:#e5a1bd}.feature-card:nth-child(6n+6),.feature-family[style*="index:5"]{--family-color:#91d4df}
.feature-card{min-width:0;overflow:hidden;border-radius:20px;border:1px solid color-mix(in srgb,var(--family-color) 28%,transparent);border-top:2px solid var(--family-color);background:radial-gradient(ellipse at 10% 0,color-mix(in srgb,var(--family-color) 12%,transparent),transparent 65%),linear-gradient(135deg,#26313b80,#10191ee0);box-shadow:0 12px 32px #0003,inset 0 1px 0 #ffffff09;transition:border-color .5s,box-shadow .5s,background .5s}
.feature-card:hover,.feature-card:focus-within{border-color:color-mix(in srgb,var(--family-color) 65%,transparent);box-shadow:0 12px 34px #0005,0 0 28px color-mix(in srgb,var(--family-color) 14%,transparent)}
.feature-cover{display:block;position:relative;height:155px;overflow:hidden;background:#080e14}.feature-cover img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .5s}.feature-cover:hover img{opacity:1}.feature-cover>span{position:absolute;right:12px;bottom:12px;border:1px solid #ffffff30;border-radius:7px;padding:5px 9px;background:#0b131bdd;color:var(--family-color);font:11px monospace}.feature-cover .feature-glyph{position:static;display:grid;place-items:center;height:100%;font:64px Georgia}
.feature-copy{padding:20px}.feature-copy h3{margin:0 0 12px;font-size:19px}.feature-copy h3 a{display:flex;justify-content:space-between;gap:10px;color:var(--family-color);text-decoration:none}.feature-copy p{font-size:14px;line-height:1.75;color:#bec9cc}.feature-chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.feature-chips span{font-size:10px;line-height:1.5;color:color-mix(in srgb,var(--family-color) 80%,white);padding:4px 7px;border:1px solid color-mix(in srgb,var(--family-color) 24%,transparent);border-radius:5px;background:color-mix(in srgb,var(--family-color) 5%,transparent)}
.feature-copy summary{padding:11px 13px;border:1px solid color-mix(in srgb,var(--family-color) 25%,transparent);border-radius:8px;font-size:12px;color:var(--family-color);cursor:pointer;transition:background .5s,box-shadow .5s}.feature-copy summary:hover{background:#ffffff07;box-shadow:0 0 18px color-mix(in srgb,var(--family-color) 10%,transparent)}.feature-copy ul{padding:0;list-style:none}.feature-copy li{padding:10px 0;border-bottom:1px solid #ffffff0b;font-size:13px}.feature-copy li strong{display:block;color:var(--family-color);margin-bottom:4px}.feature-copy li span{color:#b6c2c9;line-height:1.7}
.feature-family{display:flex;align-items:center;gap:22px;margin:44px 0 0;padding:25px;border:1px solid color-mix(in srgb,var(--family-color) 32%,transparent);border-left:3px solid var(--family-color);border-radius:16px;background:linear-gradient(115deg,color-mix(in srgb,var(--family-color) 9%,transparent),#14202955);scroll-margin-top:112px}.feature-family h2{color:var(--family-color);font:500 28px/1.25 'Playfair Display',serif;margin:9px 0}.feature-family p{font-size:14px;line-height:1.75;color:#b4c3c6;margin:0}.family-orbit{display:grid;place-items:center;flex:0 0 65px;height:65px;border-radius:50%;border:1px solid var(--family-color);box-shadow:0 0 24px color-mix(in srgb,var(--family-color) 18%,transparent),inset 0 0 20px color-mix(in srgb,var(--family-color) 9%,transparent);color:var(--family-color);font:19px monospace}.rail-family{display:block;padding:24px 13px 8px;color:var(--project-accent,#d5bb80);font:600 10px/1.55 Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em}
.capture-sets{margin:28px 0}.capture-set{border:1px solid #8fafc137;border-radius:14px;background:linear-gradient(135deg,#1f2f394f,#10192099);margin:14px 0;overflow:hidden;transition:box-shadow .5s,border-color .5s}.capture-set:hover{border-color:#99bac76b;box-shadow:0 0 26px #75bcd512}.capture-set summary{display:flex;align-items:center;gap:17px;cursor:pointer;padding:14px;color:#cbd9dc;list-style:none}.capture-set summary img{width:106px;height:67px;object-fit:cover;border:1px solid #c1d3dd30;border-radius:7px}.capture-set summary>span{flex:1}.capture-set summary strong{display:block;font-size:16px;margin:5px 0}.capture-set summary small{color:#96c8d6;text-transform:uppercase;font-size:10px;letter-spacing:.08em}.capture-set summary span>span{font-size:12px;color:#9fb2ba;line-height:1.6;display:block}.capture-set summary>b{transition:transform .5s;color:#a2c5d1}.capture-set[open] summary>b{transform:rotate(45deg)}.capture-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:20px;border-top:1px solid #9bbccc22}.capture-set-grid .manual-media{margin:0}.capture-set-grid img{max-width:100%;height:auto}.capture-set-grid figcaption{font-size:12px;line-height:1.7}.capture-set summary::-webkit-details-marker{display:none}
.interactive-study{padding:24px;border:1px solid #89d9d45c;border-radius:18px;margin:28px 0;background:radial-gradient(ellipse at 0 0,#47b8b112,transparent 65%),linear-gradient(125deg,#192a3280,#121a27c0);box-shadow:0 10px 34px #0003,inset 0 1px 0 #ffffff09;transition:box-shadow .5s,border-color .5s,background .5s;scroll-margin-top:110px}.interactive-study:hover,.interactive-study.is-primed,.interactive-study.is-running{border-color:#83e2d99c;box-shadow:0 0 32px #69d7cc1a,0 14px 40px #0004}.interactive-study.is-running{box-shadow:0 0 38px #69d7cc2b,0 14px 40px #0005,inset 0 0 22px #69d7cc0c}.lab-heading{display:flex;gap:20px;align-items:center;transition:filter .5s,opacity .5s}.is-suspended .lab-heading{filter:saturate(.72);opacity:.88}.lab-mark{flex:0 0 56px;height:56px;display:grid;place-items:center;border:1px solid #8adbcd5c;border-radius:15px;background:#6ccfc411;color:#8bdeca;font-size:27px;box-shadow:0 0 24px #75dccc13}.lab-heading h3{margin:8px 0;color:#c0e8dc;font-size:21px}.lab-heading p{color:#aebfc6;font-size:14px;line-height:1.8;margin:0}.lab-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.lab-actions button,.lab-actions a{appearance:none;display:inline-flex;align-items:center;min-height:38px;padding:9px 14px;border:1px solid #96dac459;background:#5cc6aa12;color:#b9e8da;border-radius:9px;font:500 12px/1.4 Inter,sans-serif;cursor:pointer;text-decoration:none;transition:border-color .5s,background .5s,box-shadow .5s}.lab-actions button:hover,.lab-actions a:hover{border-color:#a3e9ccaa;background:#78ddb922;box-shadow:0 0 20px #80e3c220}.lab-actions .lab-reset{min-height:32px;padding:6px 10px;align-self:center;color:#9eb8b4;background:#6b8e8609;border-color:#8ab8ad3b}.lab-actions [hidden]{display:none}.lab-frame{height:var(--lab-height,680px);background:#0b101b;border:1px solid #94c8d539;border-radius:12px;overflow:hidden}.lab-frame iframe{display:block;border:0;width:100%;height:100%}.lab-frame iframe[hidden]{display:none}.lab-caption{color:#9fb3bd!important;font-size:12px!important;line-height:1.7!important;margin-bottom:0}.lab-status{font:11px/1.5 Inter,sans-serif;color:#87c2b5;margin:9px 0 0}.lab-status:empty{display:none}
@media(min-width:1600px){.feature-cover{height:190px}}@media(max-width:1000px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.feature-grid,.capture-set-grid{grid-template-columns:1fr}.feature-cover{height:180px}.interactive-study{padding:16px}.lab-heading{gap:12px}.lab-mark{flex-basis:38px;height:38px;font-size:23px}.capture-set summary{gap:10px}.capture-set summary img{width:70px;height:50px}.feature-family{padding:18px;gap:14px}.family-orbit{flex-basis:44px;height:44px}.feature-family h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.feature-card,.feature-cover img,.feature-copy summary,.capture-set,.capture-set summary>b,.interactive-study,.lab-actions button,.lab-actions a{transition:none}}
@media print{.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-actions,.lab-frame{display:none}.feature-card,.feature-family,.interactive-study{break-inside:avoid}.capture-set-grid{display:grid}}

/* A schematic stays in the reading flow; activation changes its state, not its size. */
.interactive-study{position:relative;border-color:#92a2ad42;background:radial-gradient(ellipse at 0 0,#90a3b00a,transparent 65%),linear-gradient(125deg,#1a242d80,#121923c0)}
.interactive-study.is-running{background:radial-gradient(ellipse at 0 0,#47b8b11b,transparent 65%),linear-gradient(125deg,#192a3280,#121a27c0)}
.lab-anchor{position:absolute;top:0;scroll-margin-top:110px}.lab-group-summary{margin:0!important}.lab-view-copy{margin:17px 0}.lab-view-title{font-size:17px;color:#cad7dc;margin:0 0 8px}.lab-heading h3{color:#b6c5ca}.is-running .lab-heading h3,.is-running .lab-view-title{color:#b8f1df}.lab-summary{font-size:14px!important;line-height:1.8!important;margin:0!important;color:#aebfc6!important}
.interactive-study:not(:has(.lab-tabs)) .lab-view-title{display:none}
.lab-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 18px}.lab-tabs button{appearance:none;border:1px solid #99b0c337;border-radius:8px;padding:8px 11px;color:#a7b5c3;background:#151f2acc;font:500 12px/1.5 Inter,sans-serif;cursor:pointer;text-align:left;transition:color .5s,background .5s,border-color .5s,box-shadow .5s}.lab-tabs button[aria-selected=true]{color:#b8ebdc;border-color:#8addbb75;background:#78cbb312;box-shadow:inset 0 -2px 0 #8adfc880}.lab-tabs button:hover{color:#d1f5eb;border-color:#8addbb96;box-shadow:0 0 18px #78cbb319}.lab-tabs button:focus-visible,.lab-actions button:focus-visible,.lab-actions a:focus-visible{outline:2px solid #8bd7c4;outline-offset:4px}
.lab-actions{align-items:center}.lab-state{margin-left:auto;color:#89989e;font:11px/1.6 Inter,sans-serif;letter-spacing:.03em}.is-running .lab-state{color:#92e9c9}.lab-state::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;box-shadow:0 0 9px currentColor}
.lab-frame{position:relative;background:#252c31;transition:border-color .5s,box-shadow .5s;isolation:isolate}.lab-frame::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(#53606924,#10182038);opacity:1;transition:opacity .5s}.is-running .lab-frame{border-color:#8bdbc89e;box-shadow:0 0 30px #61cdb62b,inset 0 0 18px #78dcc20c}.is-running .lab-frame::after{opacity:0}.lab-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#0b101b;opacity:.72;transition:opacity .5s}.lab-live{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s}.has-live-view .lab-live{opacity:.72}.has-live-view.is-running .lab-live{opacity:1}.has-live-view .lab-poster{opacity:0;pointer-events:none}.lab-preview-label{position:absolute;right:14px;bottom:14px;z-index:4;pointer-events:none;border:1px solid #ffffff36;border-radius:8px;padding:8px 12px;background:#0a121bd9;color:#c4d1d8;font:11px/1.4 Inter,sans-serif;transition:opacity .5s;backdrop-filter:blur(8px)}.is-running .lab-preview-label{opacity:0}.has-live-view:not(.is-running) .lab-preview-label{font-size:0}.has-live-view:not(.is-running) .lab-preview-label::after{content:'Paused · press Run to continue';font-size:11px}.lab-status{min-height:17px;color:#95b7b2}
@media(max-width:600px){.lab-state{margin-left:0}.lab-frame{height:min(var(--lab-height),660px)}.lab-tabs button{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){.lab-frame,.lab-frame::after,.lab-poster,.lab-live,.lab-preview-label,.lab-tabs button{transition:none}}
/* A poster remains a complete diagram while a supported frame prepares its
   correctly sized, suspended first render. */
.lab-poster{object-fit:contain;object-position:center}

/* Full-content app embeds keep one page scroll, including on narrow layouts. */
.interactive-study[data-lab-fit="true"] .lab-frame{height:var(--lab-height,680px);max-height:none}

/* Review controls stay discoverable; genuine iframe errors point to recovery. */
.lab-actions .lab-reset{min-height:38px;padding:9px 14px;color:#f3d98b;background:#bb95491b;border-color:#d8b76191;font-weight:600}
.lab-actions .lab-reset:hover{background:#d4ad4330;border-color:#ffe3a5;box-shadow:0 0 20px #e2bb4c36}
.interactive-study.has-lab-error .lab-reset{border-color:#ffbb78;background:#cf783129;color:#ffe3ad;box-shadow:0 0 8px #ffc86b,0 0 28px #ffb55769}
.interactive-study.has-lab-error .lab-status{color:#ffc693}
.lab-contract{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.lab-contract[hidden]{display:none}.lab-contract p{margin:0;padding:10px 12px;border:1px solid #dab86735;border-radius:8px;background:#17232788;color:#b9ccca;font:12px/1.65 Inter,sans-serif}
.lab-contract b{display:block;color:#ddc58d;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.lab-contract p[hidden]{display:none}
.capture-set summary small::after{content:' · images shown below';color:#d9c488}.capture-set:not([open]) summary small::after{content:' · click to reveal hidden images';color:#ffe1a3;font-weight:700}
@media(max-width:650px){.lab-contract{grid-template-columns:1fr}}

/* The outline follows pointer focus; execution continues while vertically visible. */
.interactive-study.is-primed,.interactive-study.is-running{border-color:#b9e8c6;box-shadow:0 0 0 1px #d6efbd30,0 0 35px #9be8c23b,0 14px 40px #0005,inset 0 0 22px #9be8c20c}
.interactive-study.is-primed .lab-frame,.interactive-study.is-running .lab-frame{border-color:#b5e9c8;box-shadow:0 0 23px #a2e1bd38}
.lab-interaction-hint{font:11px/1.6 Inter,sans-serif!important;color:#a1b8b4!important;margin:-8px 0 12px!important}
.is-running .lab-interaction-hint,.is-primed .lab-interaction-hint{color:#d3e6c1!important}
.interactive-study[data-lab-fit="true"] .lab-frame{height:var(--lab-height,680px);min-height:0;max-height:none}
.interactive-study.is-focused{position:fixed;inset:12px;margin:0 auto;width:calc(100% - 24px);max-width:1440px;height:calc(100dvh - 24px);max-height:none;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:#101c23;z-index:20000;transform:none;transition:none;scroll-behavior:auto}
.interactive-study.is-focused::backdrop{background:#060c12ed}
.is-focused .lab-heading,.is-focused .lab-view-copy,.is-focused .lab-contract,.is-focused .lab-caption{display:none}
.is-focused .lab-actions{position:sticky;top:-24px;z-index:5;margin:0 0 12px;padding:10px 0;background:#101c23}
.is-focused .lab-tabs{margin-top:0}.is-focused .lab-live,.is-focused .lab-frame{transition:none}
@media(max-width:600px){.interactive-study.is-focused{inset:0;width:100%;height:100dvh;border-radius:0}.is-focused .lab-actions{top:-16px}}
/* A quiet reading backdrop surrounds the retained live iframe. */
.interactive-study.is-focused{inset:3vh 3vw;width:94vw;height:94dvh;max-width:1560px;scrollbar-color:#b49c64 #101c23;scrollbar-width:thin;box-shadow:0 22px 90px #000b,0 0 35px #a5d9bb24}
.interactive-study.is-focused::backdrop{background:#060c12e8;backdrop-filter:blur(5px)}
.is-focused [data-lab-focus]{margin-left:auto;color:#eed7a0;border-color:#c7ad72}
@media(max-width:600px){.interactive-study.is-focused{inset:8px;width:calc(100% - 16px);height:calc(100dvh - 16px);border-radius:16px}}
