/* Framework page visual system — scoped; original shiftedAI palette */
#framework-architecture,#framework-controls{scroll-margin-top:100px}
.fw-architecture-section{background:linear-gradient(155deg,#fff 5%,#f7f9ff 100%)!important;padding:95px 0 105px}
.fw-controls-section{background:#f7f9ff!important;padding:100px 0 110px}
.fw-heading{display:grid;grid-template-columns:1.12fr .88fr;align-items:end;gap:60px;margin-bottom:46px}
.fw-heading h2{font-size:clamp(34px,4.2vw,54px);line-height:1.11;margin:13px 0 0;letter-spacing:-.055em}
.fw-heading>p{font-size:16px;line-height:1.8;margin:0 0 4px;max-width:470px}
.fw-eyebrow,.fw-mini-label{font:700 10px/1.5 "Space Mono",ui-monospace,monospace;letter-spacing:.085em;color:#4338ca}
.fw-eyebrow{font-size:11px}
.fw-accent{color:#4f46e5}
.fw-architecture{position:relative;border:1px solid #dce3f4;border-radius:25px;padding:30px 24px 20px;background:#fff;box-shadow:0 25px 65px rgba(28,38,100,.075);isolation:isolate}
.fw-architecture:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(238,242,255,.4),transparent 55%);z-index:-1}
.fw-architecture-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;position:relative;z-index:2}
.fw-architecture-track{position:absolute;top:66px;left:calc(24px + (100% - 48px)/12);right:calc(24px + (100% - 48px)/12);height:3px;border-radius:5px;background:#e1e7f6;z-index:1}
.fw-track-progress{display:block;width:100%;height:100%;background:linear-gradient(90deg,#a5b4fc,#4338ca);border-radius:inherit;transform:scaleX(0);transform-origin:left}
.fw-arch-node{appearance:none;min-width:0;border:0;background:transparent;display:flex;align-items:center;flex-direction:column;text-align:center;padding:0 4px 17px;cursor:pointer;color:#0f172a}
.fw-arch-icon{width:72px;height:72px;display:grid;place-items:center;background:#f0f2ff;color:#4338ca;border:1px solid #dce3ff;border-radius:21px;font-size:30px;line-height:1;box-shadow:0 0 0 7px #fff;transition:background .28s,color .28s,transform .28s,box-shadow .28s}
.fw-arch-node:hover .fw-arch-icon,.fw-arch-node.is-active .fw-arch-icon{background:#4338ca;color:#fff;transform:translateY(-5px);box-shadow:0 0 0 7px #fff,0 14px 30px rgba(67,56,202,.19)}
.fw-arch-node:focus-visible,.fw-matrix-stage:focus-visible,.fw-matrix-actions button:focus-visible{outline:3px solid #6366f1;outline-offset:4px;border-radius:10px}
.fw-arch-number{font:700 9px/1.5 "Space Mono",monospace;letter-spacing:.035em;color:#4f46e5;margin:29px 0 9px}
.fw-arch-node strong{font-size:14px;line-height:1.35;min-height:38px}
.fw-arch-short{font-size:11px;color:#64748b;line-height:1.5;margin-top:8px}
.fw-arch-detail{display:grid;grid-template-columns:90px 1.05fr .95fr;gap:28px;align-items:center;margin-top:22px;background:#eef2ff;border:1px solid #dce3fb;border-radius:16px;padding:25px 28px;min-height:160px}
.fw-arch-detail-label{display:flex;flex-direction:column;gap:8px}
.fw-arch-detail-label span{font:700 10px "Space Mono",monospace;color:#4338ca}
.fw-arch-detail-label strong{font:700 40px/1 "Space Mono",monospace;color:#3730a3}
.fw-arch-detail h3{font-size:22px;margin:8px 0 6px}
.fw-arch-detail p{font-size:14px;line-height:1.7;margin:5px 0 0;color:#596784}
.fw-arch-output{border-left:1px solid #cbd5f5;padding-left:26px}
.fw-hint{font-size:12px;text-align:center;margin:18px 0 0;color:#718096}
.fw-matrix{display:grid;grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr);gap:26px;align-items:stretch}
.fw-matrix-list{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid #dce3f4;background:#fff;border-radius:22px;box-shadow:0 15px 40px rgba(28,38,100,.04)}
.fw-matrix-line{position:absolute;left:40px;top:48px;bottom:48px;width:2px;background:#e1e7f6;pointer-events:none}
.fw-matrix-line span{display:block;height:100%;width:100%;background:linear-gradient(#a5b4fc,#4338ca);transform:scaleY(0);transform-origin:top}
.fw-matrix-stage{appearance:none;display:grid;grid-template-columns:44px 1fr 22px;gap:14px;align-items:center;text-align:left;position:relative;z-index:2;padding:11px 15px 11px 8px;background:transparent;border:1px solid transparent;border-radius:13px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.fw-matrix-stage:hover{background:#f6f7ff}
.fw-matrix-stage.is-active{background:#eef2ff;border-color:#d6ddfb}
.fw-stage-marker{display:grid;place-items:center;width:35px;height:35px;border:1px solid #dce3fa;border-radius:10px;background:#fff;color:#4338ca;font:700 12px "Space Mono",monospace;transition:background .2s,color .2s}
.fw-matrix-stage.is-active .fw-stage-marker{background:#4338ca;color:#fff}
.fw-matrix-stage strong{display:block;font-size:15px;line-height:1.35}
.fw-matrix-stage small{display:block;font-size:12px;line-height:1.6;color:#64748b;margin-top:3px}
.fw-stage-arrow{color:#4f46e5;font-size:17px;opacity:0;transition:opacity .2s}
.fw-matrix-stage:hover .fw-stage-arrow,.fw-matrix-stage.is-active .fw-stage-arrow{opacity:1}
.fw-matrix-detail{display:flex;flex-direction:column;min-height:605px;padding:33px 37px;border:1px solid #d9e0f2;border-radius:22px;background:linear-gradient(150deg,#fff,#f7f8ff);box-shadow:0 15px 40px rgba(28,38,100,.055)}
.fw-matrix-detail-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.fw-status{font:700 9px "Space Mono",monospace;letter-spacing:.03em;color:#4f46e5;background:#eef2ff;border:1px solid #dfe5fb;padding:9px 10px;border-radius:999px;white-space:nowrap}
.fw-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6366f1;margin-right:5px;box-shadow:0 0 0 3px #dce3ff}
.fw-matrix-symbol{width:100px;height:100px;display:grid;place-items:center;position:relative;margin:47px 0 25px;background:#eef2ff;border:1px solid #d6defa;border-radius:28px;color:#4338ca;font-size:52px;line-height:1}
.fw-matrix-symbol-ring{position:absolute;inset:-12px;border:1px dashed #c7d2fe;border-radius:36px}
.fw-matrix-detail h3{font-size:clamp(29px,3vw,41px);margin:0 0 30px}
.fw-matrix-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fw-matrix-detail-grid>div{padding:20px;border:1px solid #e0e5f3;background:#fff;border-radius:12px}
.fw-matrix-detail-grid p{font-size:14px;line-height:1.65;color:#334155;margin:12px 0 0}
.fw-matrix-progress{margin-top:auto;padding-top:35px}
.fw-matrix-progress-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:11px;font:700 10px "Space Mono",monospace;color:#64748b}
.fw-matrix-progress-label strong{color:#4338ca}
.fw-matrix-progress-track{height:6px;border-radius:20px;background:#e2e7f6;overflow:hidden}
.fw-matrix-progress-track span{display:block;height:100%;width:14.2857%;border-radius:inherit;background:linear-gradient(90deg,#818cf8,#4338ca);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.fw-matrix-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.fw-matrix-actions button{appearance:none;border:1px solid #c7d2fe;border-radius:10px;background:#fff;color:#3730a3;padding:11px 15px;cursor:pointer;font-weight:700;font-size:13px}
.fw-matrix-actions button:last-child{background:#3730a3;color:white;border-color:#3730a3}
.fw-matrix-actions button:hover:not(:disabled){transform:translateY(-1px)}
.fw-matrix-actions button:disabled{opacity:.4;cursor:not-allowed}
.fw-disclaimer{font-size:13px;line-height:1.6;margin:23px 0 0}
@media(prefers-reduced-motion:no-preference){
 .fw-architecture.is-visible .fw-track-progress{animation:fw-line 1.8s .2s cubic-bezier(.18,.7,.22,1) forwards}
 .fw-architecture.is-visible .fw-arch-node{animation:fw-rise .65s both;animation-delay:calc(.1s + var(--n)*.2s)}
 .fw-matrix.is-visible .fw-matrix-line span{animation:fw-line-vertical 1.9s .1s ease-out forwards}
 .fw-matrix.is-visible .fw-matrix-stage{animation:fw-rise .55s both;animation-delay:calc(.07s + var(--n)*.11s)}
 .fw-matrix-symbol-ring{animation:fw-breathe 6s ease-in-out infinite}
 .fw-swap{animation:fw-swap .3s ease-out}
 @keyframes fw-line{to{transform:scaleX(1)}}
 @keyframes fw-line-vertical{to{transform:scaleY(1)}}
 @keyframes fw-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
 @keyframes fw-breathe{50%{transform:scale(1.08);opacity:.6}}
 @keyframes fw-swap{from{opacity:.45;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:1000px){
 .fw-architecture-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
 .fw-architecture-track{display:none}
 .fw-arch-number{margin-top:16px}
 .fw-matrix{grid-template-columns:1fr}
 .fw-matrix-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 .fw-matrix-line{display:none}
 .fw-matrix-stage{grid-template-columns:1fr;gap:6px;align-items:start;padding:13px}
 .fw-stage-arrow{display:none}
 .fw-matrix-detail{min-height:520px}
}
@media(max-width:700px){
 .fw-architecture-section,.fw-controls-section{padding:65px 0 75px}
 .fw-heading{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
 .fw-architecture{padding:23px 15px 16px}
 .fw-architecture-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 6px}
 .fw-arch-icon{width:59px;height:59px;border-radius:18px;font-size:25px}
 .fw-arch-number{font-size:9px}
 .fw-arch-node strong{font-size:13px;min-height:0}
 .fw-arch-short{font-size:10px}
 .fw-arch-detail{grid-template-columns:1fr;gap:12px;padding:22px}
 .fw-arch-detail-label{flex-direction:row;align-items:center}
 .fw-arch-detail-label strong{font-size:24px}
 .fw-arch-output{border-left:0;border-top:1px solid #cbd5f5;padding:13px 0 0}
 .fw-matrix-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .fw-matrix-detail{padding:25px 20px;min-height:0}
 .fw-matrix-symbol{margin:40px 0 28px}
 .fw-matrix-detail-grid{grid-template-columns:1fr;gap:10px}
 .fw-matrix-detail-top{align-items:flex-start}
}
@media(max-width:400px){.fw-status{font-size:8px;padding:7px}.fw-matrix-stage small{font-size:10px}.fw-matrix-stage strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.fw-track-progress,.fw-matrix-line span{transform:none}.fw-matrix-symbol-ring{animation:none}.fw-arch-icon,.fw-matrix-stage,.fw-matrix-progress-track span{transition:none}}