/* Architectural portals: light, precise previews of the standalone technical archive. */
[data-tech-preview] { background:radial-gradient(ellipse at 50% 35%,#edf6ff 0,transparent 68%),linear-gradient(180deg,#f7faff,#fff); }
[data-tech-preview] .grid { perspective:1400px; gap:24px; }
[data-tech-preview] .tech-portal { --pointer-x:50%; --pointer-y:35%; position:relative; padding:0; display:flex; flex-direction:column; min-width:0; border:1px solid #d1e1f5; border-radius:18px; background:#fff; box-shadow:0 6px 12px #194a8203,0 22px 45px -28px #3672b047; overflow:hidden; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s; }
[data-tech-preview] .tech-portal::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(350px circle at var(--pointer-x) var(--pointer-y),#92caff1c,transparent 75%); opacity:0; transition:opacity .4s; }
.tp-visual { position:relative; display:block; padding:23px 23px 0; background:radial-gradient(ellipse at 50% 58%,#c7e8ff7a,transparent 65%),linear-gradient(135deg,#fcfeff,#edf5ff); border-bottom:1px solid #d9e8f7; color:#183e6c; overflow:hidden; }
.tp-visual::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 25%,#ffffffaa 46%,transparent 67%); transform:translateX(-130%); transition:transform 1.05s cubic-bezier(.2,.65,.3,1); }
.tp-heading { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.tp-number { width:25px; height:25px; display:grid; place-items:center; border:1px solid #b9d4f4; border-radius:7px; font:12px/1 ui-monospace,monospace; color:#4a85c7; background:#ffffff99; }
.tp-category { font-size:17px; font-weight:600; letter-spacing:.4px; }
.tp-open { margin-left:auto; display:grid; place-items:center; width:29px; height:29px; border:1px solid #c5daf3; border-radius:50%; color:#447bbe; font:21px/1 sans-serif; background:#ffffffaa; transition:background .3s,color .3s,transform .4s; }
.tp-code { display:block; color:#7b9abc; font:12px/1.4 ui-monospace,monospace; letter-spacing:1.6px; margin-top:11px; }
.tp-diagram { margin:-2px -13px -3px; }
.tp-diagram svg { display:block; width:100%; height:auto; overflow:visible; }
.tp-svg-label { fill:#7696bb; font:12px/1 ui-monospace,monospace; letter-spacing:1px; }
.tp-tool-label { fill:#4676b0; font:12px/1 ui-monospace,monospace; letter-spacing:.8px; }
.tp-caption { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 0 16px; border-top:1px solid #b8d3ee6b; font-size:12px; color:#698aac; }
.tp-caption > span:first-child { display:flex; align-items:center; gap:6px; }
.tp-caption i { width:4px; height:4px; border-radius:50%; background:#3d9fff; box-shadow:0 0 0 3px #439fff13; }
.tp-caption .tp-explore { color:#2871cc; white-space:nowrap; }.tp-explore b { font-size:13px; font-weight:400; margin-left:3px; }
.tp-copy { padding:23px 24px 20px; display:flex; flex-direction:column; flex:1; }
.tp-article-label { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#6991bd; margin-bottom:10px; }.tp-article-label > span { color:#95a4b8; font-size:12px; }
[data-tech-preview] .tech-portal h3 { margin:0 0 12px; color:#243c5a; font-size:15px; line-height:1.8; font-weight:600; }
.tp-copy p { color:#75859b; font-size:12px; line-height:1.9; margin:0 0 20px; }
.tp-footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:15px; border-top:1px solid #e5edf6; color:#94a3b7; font-size:12px; }
.tp-footer a { color:#2777db; }.tp-footer a span { display:inline-block; margin-left:6px; transition:transform .3s; }
[data-tech-preview] .text-center.mt-10 > a { display:inline-flex; align-items:center; min-height:44px; padding:12px 23px; border-radius:8px; background:#0868f2; color:#fff; text-decoration:none; box-shadow:0 6px 16px #0b69eb1b; transition:background .2s,box-shadow .2s; }
[data-tech-preview] .text-center.mt-10 > a:hover { background:#0058d7; box-shadow:0 8px 20px #0b69eb2b; }
[data-tech-preview] a:focus-visible { outline:2px solid #2586ef; outline-offset:4px; border-radius:3px; }
[data-tech-preview] .tp-visual:focus-visible { outline-offset:-5px; border-radius:16px; }
.tp-wire { stroke:#90bce9; stroke-width:1.2; }.tp-signal { stroke:#2d8df6; stroke-width:2; stroke-linecap:round; stroke-dasharray:8 140; animation:tp-data 12s linear infinite; }
.tp-layer { animation:tp-layer 8s ease-in-out infinite; }.tp-layer-low { --lift:-3px; animation-delay:-2s; }.tp-layer-high { --lift:-7px; }
.tp-neuron { animation:tp-neuron 6s ease-in-out infinite; animation-delay:var(--delay,0s); }
.tp-token-float,.tp-documents { animation:tp-float 8s ease-in-out infinite; }.tp-output,.tp-answer { animation:tp-float 8s ease-in-out -4s infinite; }
.tp-doc-scan { animation:tp-scan 8s linear infinite; }.tp-index-focus { animation:tp-focus 8s ease-in-out infinite; }
.tp-orbit { animation:tp-orbit 24s linear infinite; transform-origin:0 0; }.tp-orbit-inner { animation-duration:32s; animation-direction:reverse; }
.tp-tool { animation:tp-tool 8s ease-in-out infinite; animation-delay:var(--delay,0s); }
.tech-portal:not([data-playing="true"]) .tp-diagram * { animation-play-state:paused; }
@keyframes tp-data { to { stroke-dashoffset:-592; } }
@keyframes tp-layer { 0%,100% { transform:translateY(0); } 50% { transform:translateY(var(--lift)); } }
@keyframes tp-neuron { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes tp-float { 0%,100% { transform:translateY(2px); } 50% { transform:translateY(-5px); } }
@keyframes tp-scan { 0% { transform:translateY(0); opacity:0; } 12% { opacity:.9; } 78% { opacity:.9; } 90%,100% { transform:translateY(70px); opacity:0; } }
@keyframes tp-focus { 0%,100% { opacity:.2; } 45%,65% { opacity:1; } }
@keyframes tp-orbit { to { transform:rotate(360deg); } }
@keyframes tp-tool { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@media(hover:hover) and (pointer:fine) {
 [data-tech-preview] .tech-portal:hover { border-color:#8db9f2; box-shadow:0 5px 15px #246bc009,0 24px 50px -22px #236ab635; }
 .tech-portal:hover::after { opacity:1; }.tech-portal:hover .tp-visual::before { transform:translateX(130%); }
 .tech-portal:hover .tp-open { background:#2679ed; color:white; border-color:#2679ed; transform:rotate(5deg); }
 .tp-copy h3 a:hover { color:#166ee0; }.tp-footer a:hover span { transform:translateX(3px); }
}
.tech-portal:focus-within { border-color:#8db9f2; }
@media(min-width:768px) and (max-width:1050px) {
 [data-tech-preview] .grid { gap:16px; }.tp-visual { padding:18px 16px 0; }.tp-copy { padding:19px 18px; }.tp-caption { font-size:12px; gap:5px; }.tp-caption .tp-explore { font-size:12px; }.tp-diagram { margin-left:-9px; margin-right:-9px; }.tp-category { font-size:15px; }
}
@media(max-width:767px) {
 [data-tech-preview] { padding:60px 0; }[data-tech-preview] .grid { max-width:460px; margin:auto; gap:24px; }
 .tp-visual { padding:22px 24px 0; }.tp-diagram { max-width:360px; margin:-4px auto -4px; }.tp-copy { padding:22px 24px; }
 [data-tech-preview] .tech-portal { transform:none; }.tp-copy p { font-size:12px; }.tp-article-label,.tp-article-label > span { font-size:12px; }
}
@media(max-width:360px) {
 .tp-visual { padding:18px 18px 0; }.tp-copy { padding:20px 18px; }.tp-caption { font-size:12px; }.tp-explore b { margin-left:0; }.tp-category { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
 [data-tech-preview] .tech-portal,[data-tech-preview] a,[data-tech-preview] .tp-open,[data-tech-preview] .tp-footer a span { transition:none; transform:none; }
 .tp-diagram * { animation:none!important; }.tp-signal { opacity:.4; }.tp-visual::before,.tech-portal::after { display:none; }
}