/* Dexaloop Tech: article layer on top of /style.css. System fonts only (no third-party requests). */
.tech{--accent:var(--cyan)}
.tech.cat-ai{--accent:var(--violet)}
.tech.cat-software{--accent:var(--cyan)}
.tech.cat-security{--accent:var(--coral)}
.tech.cat-hardware{--accent:var(--amber)}
.tech.cat-cloud{--accent:#5AA9FF}
.tech.cat-emerging{--accent:#FF7EC8}

.tech-hero{padding:2.2rem 0 1.4rem;max-width:74ch}
.tech-hero .eyebrow{display:flex;align-items:center;gap:.55rem;color:var(--accent)}
.tech-hero .eyebrow::before{content:'';width:.6rem;height:.6rem;border-radius:50%;background:var(--accent)}
.tech-hero h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.08;margin:.2rem 0 .9rem}
.tech-hero .dek{font-size:1.15rem;color:#C7D0EA;margin:0 0 1.1rem;max-width:62ch}
.tech-meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;color:var(--muted);font-size:.86rem;
  border-top:1px solid var(--line);padding-top:.9rem}

.tech .doc{padding-top:0}
.takeaways{background:linear-gradient(180deg,var(--ink-2),rgba(12,18,38,.6));border:1px solid var(--line);
  border-radius:var(--r);padding:1.2rem 1.4rem;margin:0 0 1.8rem}
.takeaways h2{font-size:1rem;margin:0 0 .6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{margin:.35rem 0;color:var(--paper)}

.toc{border:1px solid var(--line);border-radius:12px;background:var(--ink-2);padding:0 1.2rem;margin:0 0 2rem}
.toc summary{padding:.85rem 0}
.toc ol{margin:0 0 1rem;padding-left:1.2rem;font-size:.94rem}
.toc li{margin:.25rem 0}

.tech .doc h2{scroll-margin-top:5rem}
.tech .doc h2::before{content:'';display:block;width:2.2rem;height:3px;border-radius:3px;background:var(--accent);margin-bottom:.7rem}
.tech .doc table th{color:var(--accent)}
.tech .doc ol.steps{list-style:none;counter-reset:step;padding-left:0}
.tech .doc ol.steps>li{counter-increment:step;position:relative;padding-left:2.6rem;margin-bottom:1rem}
.tech .doc ol.steps>li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:1.8rem;height:1.8rem;
  border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#04121A;background:var(--accent)}
.tech .doc figure{margin:1.6rem 0}
.tech .doc figure svg,.tech .doc figure img{max-width:100%;height:auto;display:block;border-radius:12px}
.tech .doc figcaption{color:var(--muted);font-size:.86rem;margin-top:.5rem}
.tech .doc .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.8rem;margin:1.2rem 0}
.tech .doc .cards>div{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem}
.tech .doc .cards h3{margin:0 0 .35rem;font-size:1rem}
.tech .doc .cards p{margin:0;font-size:.92rem}
.sources li{word-break:break-word}
.sources .acc{color:var(--muted);font-size:.85rem}

.tech-hub .games .game .tag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.tech-hub .game.cat-ai{--accent:var(--violet)} .tech-hub .game.cat-software{--accent:var(--cyan)}
.tech-hub .game.cat-security{--accent:var(--coral)} .tech-hub .game.cat-hardware{--accent:var(--amber)}
.tech-hub .game.cat-cloud{--accent:#5AA9FF} .tech-hub .game.cat-emerging{--accent:#FF7EC8}
.tech-hub .empty{color:var(--muted)}

@media print{header,footer,.toc,.crumbs{display:none}}

/* Code (added 7 Nov 2026): blocks scroll inside themselves so a long line never widens the page. */
.tech .doc pre{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;background:var(--ink-2);
  border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin:1.2rem 0;font-size:.86rem;line-height:1.5}
.tech .doc pre code{white-space:pre;overflow-wrap:normal}
.tech .doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;overflow-wrap:anywhere}