:root { --story-accent:#c8b7ff; --story-green:#ace6cf; --story-ink:#10131b; }
body { background:var(--story-ink); } html { scroll-behavior:smooth;scroll-padding-top:85px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--story-accent);outline-offset:5px; }
.eyeline { font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--text-2); }
.status-dot,.mini-dot { display:inline-block;width:6px;height:6px;background:var(--story-accent);border-radius:50%;margin-right:10px; }
.story-hero { padding-top:64px;padding-bottom:44px; }.hero-copy { display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:end;margin-top:28px; }
h1 { font-size:clamp(40px,5.25vw,72px);font-weight:500;line-height:1.08;letter-spacing:-.055em;margin:0; }h1 span { color:var(--story-accent); }
.hero-aside p { margin:0 0 20px;color:var(--text-2);font-size:17px;line-height:1.6;max-width:390px; }.hero-aside .boundary { font-size:12px;line-height:1.5;color:var(--text-3); }
.btn-primary { background:var(--story-accent);color:var(--story-ink);border-color:var(--story-accent); }.btn-primary:hover { background:#dccfff;color:var(--story-ink); }
.demo-bar { display:flex;justify-content:space-between;align-items:end;padding:23px 0 18px;border-top:1px solid var(--line); }.demo-bar h2 { font-weight:500;font-size:23px;letter-spacing:-.03em;margin:8px 0 0; }.demo-caption { color:var(--text-3);font-size:11px; }
.pane-heading { display:flex;justify-content:space-between;gap:12px;padding:17px 23px;border-bottom:1px solid var(--line-soft);font-size:10px;letter-spacing:.1em;color:var(--text-2); }.file-name { color:var(--text-3);letter-spacing:0; }
.source { margin:0;padding:0 16px 20px 0;overflow:auto;counter-reset:line;line-height:1.8;font-size:12px; }.source code { font-size:inherit; }.code-line { display:block;white-space:pre;padding-right:10px;transition:background .35s,color .35s;color:#b5b6c6; }.code-line::before { counter-increment:line;content:counter(line);display:inline-block;width:36px;text-align:right;margin-right:20px;color:#555a70;font-size:10px; }.code-line b { color:#c8b7ff;font-weight:400; }.string { color:#b1d9c8; }.code-line.highlight { background:#272333;color:#f3eefb; }
.source-foot { padding:16px 23px;font-size:10px;color:var(--text-3);border-top:1px solid var(--line-soft); }.mini-dot { width:4px;height:4px; }
.transport { display:flex;align-items:center;gap:20px;background:#1a1c27;padding:13px 20px;border:1px solid #343441;border-top:0;border-radius:0 0 9px 9px; }.transport button { border:0;background:transparent;color:var(--text-3);font-size:11px;padding:8px 0; }.transport .play-button { color:var(--story-accent);min-width:63px;text-align:left; }.play-button span{margin-left:7px; }.chapters { display:flex;justify-content:space-between;flex:1;gap:12px; }.chapters button { display:flex;gap:9px;align-items:center; }.chapters button[aria-pressed=true] { color:var(--text); }.chapters button[aria-pressed=true]::after { content:'';width:4px;height:4px;border-radius:50%;background:var(--story-accent); }.transport .reset-button { font-size:21px;padding:0 5px; }.demo-note { font-size:12px;color:var(--text-3);line-height:1.6;margin:14px 0 0;min-height:38px; }
.foundation,.control-section { padding-top:105px;padding-bottom:100px;display:grid;grid-template-columns:1fr 1fr;gap:100px; }.section-intro h2,.security-heading h2,.closing h2 { font-size:clamp(32px,3.6vw,48px);font-weight:500;line-height:1.15;letter-spacing:-.045em;margin:20px 0; }.section-intro p,.security-heading p { color:var(--text-2);font-size:16px;line-height:1.7;max-width:410px; }
.integration-stack article { padding:22px 0;border-top:1px solid var(--line); }.integration-stack article>span { color:var(--story-accent);font-size:10px;letter-spacing:.12em; }h3 { font-size:20px;font-weight:500;letter-spacing:-.025em; }.integration-stack h3{margin:10px 0; }.integration-stack p,.control-list p { font-size:14px;line-height:1.65;color:var(--text-2);margin:0;max-width:440px; }
.security-section { background:#1b1a23;border-top:1px solid #37313f;border-bottom:1px solid #37313f;padding:70px 0; }.security-heading { display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center; }.security-heading h2 span { color:#e8b8b3; }.security-flow { display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:20px;align-items:center;margin-top:35px; }.security-flow h3 { margin:10px 0 4px; }.security-flow p { margin:0;font-size:12px;color:var(--text-3); }.permission { font-size:9px;letter-spacing:.1em;color:var(--story-green); }.flow-bridge { display:flex;align-items:center;gap:12px; }.flow-line { height:1px;background:#ad7775;flex:1; }.flow-label { font-size:11px;color:#d5aaa6;text-align:center;line-height:1.7; }.deny { grid-column:1/-1;border-top:1px solid #47353d;margin-top:20px;padding-top:18px;display:flex;align-items:center;gap:12px; }.deny>span{color:#e8b8b3;font-size:22px; }.deny strong{font-size:13px;font-weight:500;color:#e8b8b3; }.deny small{margin-left:auto;color:var(--text-3);font-size:11px; }.security-note{color:var(--text-3);font-size:12px;line-height:1.7;max-width:730px;margin-top:20px; }
.control-list article{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line); }.control-list article>span{font-size:11px;color:var(--story-accent);padding-top:5px; }.control-list h3{margin:0 0 10px; }.questions{padding-bottom:90px; }.questions>.eyeline{display:block;margin-bottom:24px; }.questions details{border-top:1px solid var(--line);padding:21px 0; }.questions summary{cursor:pointer;font-size:19px;list-style:none;display:flex;justify-content:space-between; }.questions summary::after{content:'+';color:var(--story-accent); }.questions details[open] summary::after{content:'−'; }.questions details p{color:var(--text-2);font-size:15px;line-height:1.7;max-width:760px; }
.closing{border-top:1px solid var(--line);padding-top:60px;padding-bottom:70px; }.closing h2{font-size:clamp(38px,5vw,66px); }.closing>div{display:flex;gap:25px;align-items:center;margin-top:30px; }.text-link{font-size:13px;color:var(--text-2); }.story-footer{border-top:1px solid var(--line);padding-top:25px;padding-bottom:25px;display:flex;justify-content:space-between;align-items:center; }.story-footer>div{display:flex;gap:24px;font-size:12px;color:var(--text-3); }
.hero-copy { grid-template-columns:1.7fr 1fr;gap:60px;align-items:start; } h1 { font-size:clamp(40px,4.6vw,64px); }
@media(max-width:900px){.hero-copy{grid-template-columns:1.2fr 1fr;gap:30px;}.foundation,.control-section,.security-heading{gap:40px;}}
@media(max-width:640px){.container{padding-left:20px;padding-right:20px;}.story-hero{padding-top:35px;padding-bottom:28px;}.hero-copy{display:block;margin-top:20px;}.hero-aside{margin-top:24px;}.hero-aside p{font-size:15px;max-width:none;}.demo-bar{display:block;}.demo-caption{display:block;margin-top:9px;}.foundation,.control-section,.security-heading{grid-template-columns:1fr;gap:25px;}.foundation,.control-section{padding-top:65px;padding-bottom:60px;}.security-section{padding:50px 0;}.security-flow{grid-template-columns:1fr;gap:20px;}.flow-bridge{min-height:50px;}.deny small{max-width:90px;text-align:right;}.questions{padding-bottom:60px;}.questions summary{font-size:16px;gap:20px;}.story-footer{align-items:start;gap:25px;}.story-footer>div{flex-wrap:wrap;gap:15px;}.closing>div{gap:20px;}}