/* DV page (/dv/): header, the story and the role diagrams. Loads base, story and diagrams CSS. */
.dvh{position:relative;z-index:2;padding:44px 0 4px}
.dvh .eyebrow{margin-top:34px}
.dvh h1{max-width:20ch}
.dvh .lede{margin-top:18px;max-width:62ch;color:var(--muted);font-size:var(--t-lede);line-height:1.65}
.dvh .lede b{color:var(--ink);font-weight:600}
.dvstory{position:relative;z-index:2}
.dvroles{position:relative;z-index:2;padding-top:80px;padding-bottom:20px}
.dvroles .sub{margin-top:10px;color:var(--muted);font-size:var(--t-body)}
.dvfig{margin-top:22px;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(30,20,8,.45)}
.dvfig>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:18px 26px 0}
.dvfig>header b{font:600 var(--t-sec) var(--sans)}
.dvfig>header span{font:500 var(--t-label) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cu)}
.dvfig .fx{border-top:0;background:none}
.dvf{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:22px;padding-bottom:44px;border-top:1px solid var(--rule);font:400 var(--t-meta) var(--mono);color:var(--muted)}
@media (max-width:820px){
  .dvfig>header{padding:16px 14px 0}
}
/* Section label: a magnifier slides over a chip, a bug lights up, then turns into a check. */
.eyebrow.dve{font-size:var(--t-section);font-weight:600;letter-spacing:.2em;gap:12px}
.eyebrow.dve::before{display:none}
.dvi{width:64px;height:30px;flex:none;overflow:visible}
.dvi .pins path{stroke:#8a7a5a;stroke-width:1.4;stroke-linecap:round}
.dvi .die{fill:#232c35;stroke:#1d252d}
.dvi .bug{fill:#ff8c7a;opacity:0;animation:dvbug 4.4s infinite}
.dvi .ok{fill:none;stroke:#7fd1a0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;animation:dvok 4.4s infinite}
.dvi .lens{animation:dvlens 4.4s ease-in-out infinite}
.dvi .lens circle{fill:rgba(224,138,88,.14);stroke:var(--cu);stroke-width:1.8}
.dvi .lens path{stroke:var(--cu);stroke-width:2.4;stroke-linecap:round}
@keyframes dvlens{0%,8%{transform:translateX(0)}32%,70%{transform:translateX(-27px)}92%,100%{transform:translateX(0)}}
@keyframes dvbug{0%,30%{opacity:0}36%,52%{opacity:1}58%,100%{opacity:0}}
@keyframes dvok{0%,54%{stroke-dashoffset:16;opacity:1}66%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .dvi .lens,.dvi .bug,.dvi .ok{animation:none}
  .dvi .lens{transform:translateX(-27px)}
  .dvi .ok{stroke-dashoffset:0}
}
/* Swipe-left hint, phones only; leaving animation when the swipe fires. */
.swipe-home{display:none;align-items:center;gap:8px;color:var(--cu)}
.swipe-home i{font-style:normal;display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@media (hover:none) and (pointer:coarse){
  .swipe-home{display:inline-flex}
}
body{transition:transform .22s ease-in,opacity .22s ease-in}
body.leaving{transform:translateX(-24%);opacity:0}
@media (prefers-reduced-motion:reduce){
  .swipe-home i{animation:none}
}
/* Way home: the RT mark, the name in the hero's style and the page path. On hover the mark slides away to a back arrow. */
.home{display:inline-flex;align-items:center;gap:12px;padding:5px 16px 5px 5px;border-radius:99px;border:1px solid var(--rule);background:rgba(248,242,226,.75);color:var(--ink);text-decoration:none;box-shadow:0 8px 18px -14px rgba(30,20,8,.6);transition:border-color .25s,box-shadow .25s,transform .25s}
.home .mk{position:relative;width:32px;height:32px;border-radius:8px;overflow:hidden;flex:none;background:#0D1117}
.home .rt{display:block;width:100%;height:100%;transition:transform .3s ease}
.home .ar{position:absolute;inset:0;display:grid;place-items:center;color:#C6F432;font:700 16px var(--sans);transform:translateX(100%);transition:transform .3s ease}
.home .who{font:400 13px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.home .path{font:500 var(--t-meta) var(--mono);color:var(--cu);letter-spacing:.04em}
.home:hover,.home:focus-visible{border-color:var(--cu);transform:translateX(-2px);box-shadow:0 12px 22px -14px rgba(30,20,8,.7)}
.home:hover .rt,.home:focus-visible .rt{transform:translateX(-100%)}
.home:hover .ar,.home:focus-visible .ar{transform:none}
@media (prefers-reduced-motion:reduce){
  .home,.home .rt,.home .ar{transition:none}
}
@media (max-width:520px){
  .eyebrow.dve{font-size:14px;letter-spacing:.14em;gap:8px}
  .dvi{width:54px;height:26px}
}