.security-flow{--signal:#d2c9ca;--muted:#a59396;--cycle:9s;position:relative;padding:96px max(6%,calc((100vw - 1240px)/2)) 42px;background:radial-gradient(ellipse at 48% 55%,#3d383915,transparent 50%),#131111;border-top:1px solid #ffffff0b;isolation:isolate;scroll-margin-top:32px}
.security-heading>p{color:#bdb1b3;font-size:17px;font-weight:500;margin:0 0 25px}.security-heading h2{font-size:clamp(40px,4.8vw,68px);font-weight:500;line-height:1.2;letter-spacing:-.045em;margin:0 0 88px}.security-heading h2 span{color:#b2a2a5}
.security-story{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1.15fr);gap:32px;align-items:start}.security-story h3{font-size:23px;font-weight:500;letter-spacing:-.025em;margin:0 0 32px;color:#e9e5e6;line-height:1.4}
.source-library{position:relative;height:365px;perspective:1000px}.source-orbit{position:absolute;left:-10%;right:-10%;height:180px;top:96px;border-radius:50%;background:radial-gradient(ellipse,#aa9a9d12,transparent 65%);transform:rotate(-9deg)}
.source-sheet{position:absolute;top:30px;left:30%;width:58%;height:220px;padding:24px;border-radius:13px;background:linear-gradient(140deg,#343031,#211f1f 70%);box-shadow:inset 0 1px 0 #e2ddde38,inset 1px 0 0 #e2ddde1c,0 22px 35px #0004;transform:rotate(-7deg);transform-origin:50% 90%}.source-sheet-0{left:0;top:16px;transform:rotate(-15deg);background:linear-gradient(140deg,#2b2728,#1d1a1b);color:#b3a4a7}.source-sheet-1{left:20%;top:37px;transform:rotate(0);color:#c4b9bb}.source-sheet-2{left:40%;top:55px;transform:rotate(10deg);color:#e4dfe0;background:linear-gradient(140deg,#423c3d,#282425 85%)}
.source-icon{display:block;width:32px;height:32px;margin-bottom:21px}.source-sheet strong{font-size:18px;font-weight:500;display:block}.source-marks{display:grid;gap:9px;margin-top:18px}.source-marks i{display:block;height:4px;border-radius:4px;background:#a796992c;width:90%}.source-marks i:nth-child(2){width:67%}.source-marks i:nth-child(3){width:42%}.source-marks .selected-fragment{background:#cdc4c5a8;animation:fragment-selection var(--cycle) ease-in-out infinite}.source-sheet-0 .selected-fragment{animation-delay:.2s}.source-sheet-1 .selected-fragment{animation-delay:.4s}.source-corner{position:absolute;right:15px;top:19px;width:16px;color:#a59396}
.source-memory{position:absolute;top:310px;left:0;right:0;display:flex;gap:10px;align-items:center;justify-content:center;color:#b1a2a5}.source-memory>span{width:18px;flex-shrink:0;line-height:0}.source-memory p{font-size:15px;margin:0;line-height:1.5}
.permission-passage{position:relative;min-height:375px;padding-top:120px;text-align:center;isolation:isolate}.permission-plane{position:absolute;top:0;bottom:-18px;left:50%;width:62px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#dbd4d509,transparent);mask-image:linear-gradient(transparent,#000 23%,#000 74%,transparent);z-index:-1}.permission-plane:before,.permission-plane:after{content:'';position:absolute;inset:0 30px;background:linear-gradient(transparent,#c8bec07d,#c8bec028,transparent)}.permission-plane:after{inset:0 0;background:linear-gradient(90deg,transparent,#c8bec01a,transparent);filter:blur(10px);animation:gate-light var(--cycle) ease-in-out infinite}
.permission-seal{width:58px;height:58px;margin:0 auto 22px;display:grid;place-items:center;color:#d8d1d2;border:1px solid #d1c8ca4d;background:#1c191a;border-radius:50%;box-shadow:0 0 0 7px #c8bec005,0 0 40px #cfc5c70b;animation:gate-light var(--cycle) ease-in-out infinite}.permission-seal svg{width:27px}.permission-passage h3{font-size:18px;background:#141313;display:inline-block;margin:0;padding:5px 12px;white-space:nowrap}.permission-rules{display:flex;flex-direction:column;gap:8px;margin-top:11px;font-size:13px;color:#a28f93}.permission-rules span{background:#141313;align-self:center;padding:0 5px}
.passage-rail{position:absolute;top:149px;height:1px;width:calc(50% + 32px);background:linear-gradient(90deg,#ccc1c300,#ccc1c333);overflow:hidden;z-index:-2}.rail-before{right:50%;margin-right:30px}.rail-after{left:50%;margin-left:30px;background:linear-gradient(90deg,#ccc1c333,#ccc1c300)}.passage-rail i{position:absolute;top:0;left:0;width:32px;height:1px;background:linear-gradient(90deg,transparent,#e5e0e1);animation:permission-transfer var(--cycle) linear infinite;opacity:0}.rail-after i{animation-delay:1.4s}
.context-envelope{position:relative;padding:0 25px;background:linear-gradient(125deg,#272424,#1d1b1b 70%);border-radius:16px;box-shadow:inset 0 1px #dad2d440,inset 1px 0 #dad2d417,0 24px 50px #0002;animation:context-received var(--cycle) ease-in-out infinite}.context-envelope:after{content:'';position:absolute;inset:5px -5px -6px 5px;border-radius:16px;border:1px solid #cbc0c20e;z-index:-1}.context-task{display:flex;align-items:center;gap:9px;padding:22px 0 20px;border-bottom:1px solid #d8d0d212}.context-task p{margin:0;color:#c1b4b7;font-size:14px;line-height:1.45}.context-task-dot{width:5px;height:5px;border-radius:50%;background:#d3cacc;box-shadow:0 0 8px #d2c9cb2b;flex-shrink:0}
.context-details{margin:0;padding:19px 0 10px;display:grid;gap:20px}.context-details>div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center}.context-details dt{font-size:13px;color:#a39094}.context-details dd{margin:0;font-size:16px;line-height:1.45;letter-spacing:-.02em;color:#e3ddde;display:flex;align-items:center;gap:8px}.context-source-icon{width:16px;flex-shrink:0;color:#b3a3a6;line-height:0}.context-redacted{display:flex;gap:4px;align-items:center}.context-redacted i{height:8px;width:8px;border-radius:2px;background:#907a7e55}.context-lock{width:15px;line-height:0;margin-left:auto;color:#cbc0c2}.context-private{padding-top:1px}.context-scope{display:flex;align-items:center;gap:7px;padding:19px 0 21px;color:#cfc6c7;font-size:13px}.context-scope svg{width:17px;flex-shrink:0}
.recipient-branch{height:39px;position:relative;margin:0 16.66%}.recipient-branch:before{content:'';position:absolute;top:0;height:19px;left:50%;width:1px;background:#bcaeb133}.recipient-branch:after{content:'';position:absolute;top:19px;left:0;right:0;height:1px;background:linear-gradient(90deg,#bcaeb11a,#bcaeb133,#bcaeb11a)}.recipient-branch i{position:absolute;top:19px;height:20px;width:1px;background:#bcaeb125;left:0}.recipient-branch i:nth-child(2){left:50%}.recipient-branch i:nth-child(3){left:100%}
.security-recipients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.security-recipients button{font:inherit;font-size:13px;line-height:1.5;padding:10px 0 0;border:0;background:none;color:#9f8d90;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;transition:color .35s}.recipient-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;transition:background .35s,box-shadow .35s}.recipient-icon svg{width:31px}.security-recipients button:hover{color:#ddd6d7}.security-recipients button[aria-pressed=true]{color:#ded8d9}.security-recipients button[aria-pressed=true] .recipient-icon{background:#c3b8ba0a;box-shadow:0 0 22px #cbc1c30a;animation:recipient-received var(--cycle) ease-in-out infinite}.security-recipients button>i{width:3px;height:3px;border-radius:50%;background:transparent}.security-recipients button[aria-pressed=true]>i{background:#d3cbcc}
.security-baseline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:54px;padding-top:25px;border-top:1px solid #d6cecf10}.security-baseline p{margin:0;display:flex;align-items:center;gap:9px;font-size:14px;color:#9b888b}.security-baseline p>svg{width:18px;flex-shrink:0}.security-motion{border:1px solid #e5dfe01c;background:none;color:#baadaf;border-radius:50%;width:34px;height:34px;flex-shrink:0;padding:6px;cursor:pointer}.security-motion span{display:block;line-height:0}.security-motion .motion-play{display:none}.security-motion[aria-pressed=true] .motion-pause{display:none}.security-motion[aria-pressed=true] .motion-play{display:block}
@keyframes fragment-selection{0%,8%,90%,100%{background:#95818455;box-shadow:none}20%,44%{background:#dad2d4;box-shadow:0 0 12px #c6bbbd33}64%{background:#b4a5a8a8}}
@keyframes gate-light{0%,18%,70%,100%{box-shadow:0 0 0 7px #c8bec005,0 0 40px #cfc5c70b}32%,46%{box-shadow:0 0 0 7px #c8bec009,0 0 44px #cfc5c727}}
@keyframes permission-transfer{0%,20%{opacity:0;transform:translateX(-32px)}24%{opacity:.9}42%{opacity:0;transform:translateX(180px)}100%{opacity:0;transform:translateX(180px)}}
@keyframes context-received{0%,38%,90%,100%{box-shadow:inset 0 1px #dad2d440,inset 1px 0 #dad2d417,0 24px 50px #0002}55%,68%{box-shadow:inset 0 1px #dad2d478,inset 1px 0 #dad2d425,0 0 45px #c0b4b60c,0 24px 50px #0002}}
@keyframes recipient-received{0%,59%,95%,100%{color:#c1b4b7;box-shadow:0 0 22px #cbc1c30a}70%,80%{color:#ebe8e8;box-shadow:0 0 25px #cbc1c325}}
.security-flow.is-resting *,.security-flow.is-resting *:after,.security-flow.is-resting *:before{animation-play-state:paused!important}
@media(min-width:1400px){.security-story{gap:48px}.source-sheet{height:235px}.source-library{height:390px}}
@media(max-width:1100px) and (min-width:761px){.security-story{grid-template-columns:minmax(0,1fr) 132px minmax(0,1.3fr);gap:22px}.security-story h3{font-size:20px}.source-sheet{padding:18px 15px;height:206px}.source-sheet strong{font-size:16px}.source-corner{right:10px;top:17px;width:13px}.source-icon{width:26px}.source-memory p{font-size:13px}.permission-passage h3{font-size:15px;padding:5px}.permission-rules{font-size:12px}.context-envelope{padding:0 18px}.context-details>div{grid-template-columns:52px minmax(0,1fr);gap:7px}.context-details dd{font-size:14px}.context-task p,.context-scope{font-size:12px}.security-recipients button{font-size:12px}.recipient-icon svg{width:29px}}
@media(max-width:760px){.security-flow{padding:64px 7% 32px;scroll-margin-top:20px}.security-heading>p{font-size:15px;margin-bottom:20px}.security-heading h2{font-size:clamp(36px,8.4vw,52px);margin-bottom:46px}.security-story{grid-template-columns:1fr;gap:0;max-width:440px;margin:auto}.security-story h3{font-size:22px;margin-bottom:16px}.source-library{height:290px;width:86%;max-width:330px;margin:auto}.source-sheet{width:56%;height:190px;padding:20px}.source-sheet-0{top:13px}.source-sheet-1{top:25px}.source-sheet-2{top:40px}.source-icon{width:27px;height:27px;margin-bottom:17px}.source-sheet strong{font-size:17px}.source-memory{top:254px}.source-memory p{font-size:14px}.permission-passage{min-height:148px;padding:28px 0 28px 75px;text-align:left;margin:0 0 30px}.permission-plane{left:-4vw;right:-4vw;top:50%;bottom:auto;width:auto;height:44px;transform:translateY(-50%);background:linear-gradient(transparent,#dbd4d509,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.permission-plane:before{inset:21px 0;background:linear-gradient(90deg,transparent,#c8bec07d,#c8bec028,transparent)}.permission-plane:after{inset:0;background:linear-gradient(transparent,#c8bec01a,transparent)}.permission-seal{position:absolute;left:0;top:50%;transform:translateY(-50%);width:54px;height:54px;margin:0}.permission-passage h3{font-size:19px;margin:0;padding:0 8px;background:#141313}.permission-rules{flex-direction:row;gap:9px;font-size:13px;margin-top:10px}.permission-rules span{padding:0 8px}.passage-rail{top:auto;left:27px;right:auto;margin:0;width:1px;height:38px;background:#ccc1c322}.rail-before{bottom:calc(50% + 28px)}.rail-after{top:calc(50% + 28px)}.passage-rail i{width:1px;height:16px;animation-name:permission-transfer-mobile;background:linear-gradient(transparent,#e5e0e1)}.security-context>h3{margin-bottom:22px}.context-envelope{padding:0 23px}.context-task p{font-size:14px}.context-details>div{grid-template-columns:65px minmax(0,1fr)}.context-details dd{font-size:16px}.context-scope{font-size:13px}.security-recipients button{font-size:13px}.security-baseline{margin-top:38px;padding-top:20px}.security-baseline p{font-size:13px}.security-motion{width:32px;height:32px}}
@keyframes permission-transfer-mobile{0%,20%{opacity:0;transform:translateY(-16px)}24%{opacity:.9}42%{opacity:0;transform:translateY(38px)}100%{opacity:0;transform:translateY(38px)}}
@media(prefers-reduced-motion:reduce){.security-flow *,.security-flow *:before,.security-flow *:after{animation:none!important;transition:none!important}.security-motion{display:none}.passage-rail i{display:none}}

/* Keep small-format illustrations legible beside the larger page typography. */
.security-flow svg{height:auto;max-width:100%}
.source-icon svg,.source-corner svg,.source-memory svg,.context-source-icon svg,.context-lock svg{width:100%}
.security-recipients button{font-size:15px}.recipient-icon{width:50px;height:50px}.recipient-icon svg{width:35px}
.context-details dt{font-size:14px}.context-task p,.context-scope{font-size:14px}.source-memory p{font-size:15px}.permission-rules{font-size:14px}
.recipient-branch i{transition:background .35s,box-shadow .35s}
.security-flow[data-recipient=local] .recipient-branch i:nth-child(1),.security-flow[data-recipient=cloud] .recipient-branch i:nth-child(2),.security-flow[data-recipient=agent] .recipient-branch i:nth-child(3){background:#d8d1d280;box-shadow:0 0 7px #d0c6c826}
@media(max-width:1100px) and (min-width:761px){.permission-passage h3{font-size:17px}.permission-rules{font-size:13px}.context-details dd{font-size:16px}.context-details>div{grid-template-columns:58px minmax(0,1fr)}.context-task p,.context-scope{font-size:13px}.security-recipients button{font-size:14px}.recipient-icon svg{width:32px}.source-memory p{font-size:14px}}
@media(max-width:760px){.security-recipients button{font-size:14px}.recipient-icon svg{width:34px}.context-details dt{font-size:14px}}

.security-recipients button>span:last-of-type{white-space:nowrap}

/* A visible permission boundary, with luminous signal heads and long tails. */
.security-flow{--signal:#ff9caf;--cycle:6.8s;background:radial-gradient(ellipse at 49% 46%,#a30e291a,transparent 44%),#0c0c10}
.security-heading>p{color:#e595a7}.security-heading h2 span{color:#ed9caf}
.source-orbit{background:radial-gradient(ellipse,#dd36521a,transparent 66%)}
.source-sheet{background:linear-gradient(140deg,#303038,#1c1b23 70%)}
.source-sheet-0{background:linear-gradient(140deg,#25252d,#15151c)}
.source-sheet-2{background:linear-gradient(140deg,#3d353e,#242129 85%)}
.source-corner{color:#db9eae}.source-marks .selected-fragment{background:#e96b87}
.permission-plane{width:88px;background:linear-gradient(90deg,transparent,#ef24491a,transparent)}
.permission-plane:before{inset:0 42px;background:linear-gradient(transparent,#fc66838c 25%,#fff0f4 45%,#f52656a6 65%,transparent);box-shadow:0 0 16px #ef244954}
.permission-plane:after{inset:0;background:linear-gradient(90deg,transparent,#f7295026,transparent);filter:blur(13px)}
.permission-seal{border:1.5px solid #f8769199;background:radial-gradient(circle at 35% 25%,#482130,#20121c 80%);color:#ffe0e8;box-shadow:0 0 0 7px #ee31560a,0 0 38px #ec18472e;z-index:2;position:relative}
.permission-passage h3,.permission-rules span{background:#130d14}.permission-rules{color:#c7abb4;font-size:15px}
.passage-rail{height:3px;top:148px;border-radius:6px;overflow:visible;background:linear-gradient(90deg,#9d334e15,#d967805e);box-shadow:0 0 9px #e62f511c}
.rail-after{background:linear-gradient(90deg,#d967805e,#9d334e15)}
.passage-rail i{top:0;left:0;width:68px;height:3px;border-radius:6px;background:linear-gradient(90deg,transparent,#f23e68 45%,#ffd5e2 91%,#fff5f8);box-shadow:0 0 8px #ff4e7b66;animation-name:permission-transfer;will-change:left,opacity}
.passage-rail i:before{content:'';position:absolute;inset:-5px 0;background:linear-gradient(90deg,transparent,#ed2c6099);filter:blur(6px);border-radius:50%}
.passage-rail i:after{content:'';position:absolute;right:-2px;top:-1px;width:5px;height:5px;border-radius:50%;background:#fff4f7;box-shadow:0 0 9px #ff467b,0 0 20px #f62765aa}
.context-envelope{background:linear-gradient(125deg,#2b222b,#19161f 75%)}
.context-task-dot{background:#ef496e;box-shadow:0 0 12px #ec3f6b66}
.context-scope,.context-lock{color:#f1a9bc}.context-redacted i{background:#bd829650}
.recipient-branch:before,.recipient-branch i{width:2px;background:#b8537250;box-shadow:0 0 7px #ef306015}.recipient-branch:after{height:2px;background:linear-gradient(90deg,#ac45653a,#e585a170,#ac45653a)}
.security-recipients button:hover{color:#ffe2e9}.security-recipients button[aria-pressed=true]{color:#ffc6d6}
.security-recipients button[aria-pressed=true] .recipient-icon{background:#d92d5512;box-shadow:0 0 25px #eb285121}
.security-recipients button[aria-pressed=true]>i{background:#ee4b70;box-shadow:0 0 10px #ff457a77}
.security-flow[data-recipient=local] .recipient-branch i:nth-child(1),.security-flow[data-recipient=cloud] .recipient-branch i:nth-child(2),.security-flow[data-recipient=agent] .recipient-branch i:nth-child(3){background:#f7a3be;box-shadow:0 0 9px #f4306880}
@keyframes fragment-selection{0%,8%,90%,100%{background:#9e637555;box-shadow:none}20%,44%{background:#f49ab6;box-shadow:0 0 14px #ef42765e}64%{background:#bb7f91a8}}
@keyframes gate-light{0%,18%,70%,100%{box-shadow:0 0 0 7px #ee31560a,0 0 38px #ec184722}32%,46%{box-shadow:0 0 0 8px #ee315613,0 0 48px #ef31574d}}
@keyframes permission-transfer{0%,9%{opacity:0;left:0;transform:translateX(-100%)}14%,43%{opacity:1}49%{opacity:0;left:100%;transform:translateX(0)}100%{opacity:0;left:100%;transform:translateX(0)}}
@keyframes context-received{0%,38%,90%,100%{box-shadow:inset 0 1px #f3bad040,inset 1px 0 #f3bad017,0 24px 50px #0003}55%,68%{box-shadow:inset 0 1px #ffb5d08c,inset 1px 0 #f3bad030,0 0 45px #e3295521,0 24px 50px #0003}}
@keyframes recipient-received{0%,59%,95%,100%{color:#d2b5bf;box-shadow:0 0 22px #ef376015}70%,80%{color:#ffe3ed;box-shadow:0 0 29px #f52d6640}}
@media(max-width:760px){
 .permission-plane{width:auto;background:linear-gradient(transparent,#ef24491a,transparent)}
 .permission-plane:before{inset:20px 0;background:linear-gradient(90deg,transparent,#fc66838c 25%,#fff0f4 45%,#f52656a6 65%,transparent)}
 .permission-plane:after{background:linear-gradient(transparent,#f7295026,transparent)}
 .permission-seal{position:absolute}
 .passage-rail{top:auto;width:3px;height:38px;left:26px;background:#d967805e}
 .rail-after{top:calc(50% + 28px)}
 .passage-rail i{width:3px;height:22px;left:0;top:0;background:linear-gradient(transparent,#ef4975,#fff1f7);animation-name:permission-transfer-mobile}
 .passage-rail i:before{inset:0 -4px;background:linear-gradient(transparent,#ed2c6099)}
 .passage-rail i:after{right:-1px;top:auto;bottom:-2px}
 .permission-rules{font-size:14px}
}
@keyframes permission-transfer-mobile{0%,9%{opacity:0;top:0;transform:translateY(-100%)}14%,43%{opacity:1}49%,100%{opacity:0;top:100%;transform:translateY(0)}}