/* White space and typography lead;
status colors remain meaningful in the lab. */
:root {
  --canvas:#f6f6f3;
  --paper:#fff;
  --ink:#1c1c1a;
  --muted:#66665f;
  --line:#d9d9d1;
  --green:#176448;
  --red:#a42c35;
  --amber:#805516;
  font-family:"Be Vietnam Pro",sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:66px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,a,label {
  -webkit-tap-highlight-color:transparent
}
button,summary {
  cursor:pointer
}
button {
  color:var(--ink);
  border:1px solid var(--line);
  background:transparent;
  padding:9px 13px;
  border-radius:3px
}
button:disabled {
  opacity:.5;
  cursor:wait
}
button:focus-visible,a:focus-visible,summary:focus-visible,label:has(input:focus-visible),.node:focus-visible {
  outline:2px solid #285e87;
  outline-offset:5px
}
button:hover:not(:disabled) {
  border-color:var(--ink)
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin:0
}
.sr-only {
  position:absolute;
  clip:rect(0,0,0,0);
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:nowrap
}
.skip-link {
  position:fixed;
  top:8px;
  left:12px;
  padding:12px;
  background:var(--ink);
  color:white;
  z-index:100;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:translateY(0)
}
.workspace {
  width:100%;
  overflow:clip
}
.section-shell {
  max-width:1440px;
  margin:auto;
  padding:0 40px
}
.masthead {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:24px;
  height:66px;
  padding:0 40px;
  border-bottom:1px solid var(--line);
  background:rgba(246,246,243,.96);
  backdrop-filter:blur(12px)
}
.identity {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:650;
  letter-spacing:-.5px;
  white-space:nowrap
}
.brand-symbol {
  font-size:26px;
  line-height:1;
  transform:rotate(-45deg);
  display:inline-block
}
.brand-sub {
  font-weight:400;
  color:var(--muted);
  font-size:14px;
  letter-spacing:0
}
nav {
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:auto;
  font-size:13px
}
.nav-link {
  position:relative;
  padding:8px 0
}
.nav-link::after {
  content:"";
  position:absolute;
  bottom:3px;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s
}
.nav-link:hover::after,.nav-link[aria-current]::after {
  transform:scaleX(1);
  transform-origin:left
}
.nav-lab {
  display:flex;
  align-items:center;
  gap:13px;
  font-weight:650
}
.nav-lab>span {
  transition:transform .3s
}
.nav-lab:hover>span {
  transform:translate(2px,-2px)
}
.motion-toggle {
  font-size:11px;
  padding:6px 9px;
  margin-left:14px;
  border-radius:30px;
  color:var(--muted)
}
.reading-progress {
  position:absolute;
  bottom:-1px;
  left:0;
  height:2px;
  background:var(--ink);
  width:100%;
  transform:scaleX(var(--read,0));
  transform-origin:left;
  pointer-events:none
}
.intro {
  position:relative;
  min-height:calc(100svh - 66px);
  border-bottom:1px solid var(--line);
  isolation:isolate;
  background:var(--paper)
}
#network-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  opacity:.6;
  pointer-events:none
}
.intro-inner {
  padding-top:36px;
  padding-bottom:24px;
  min-height:inherit;
  display:flex;
  flex-direction:column
}
.intro-index {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)
}
.intro h1 {
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:clamp(70px,9.6vw,150px);
  font-weight:400;
  letter-spacing:-.075em;
  line-height:.99;
  margin:clamp(60px,9vh,120px) 0 70px;
  max-width:1200px;
  transform:translateY(var(--hero-y,0px))
}
.line-mask {
  display:block;
  overflow:hidden;
  padding-bottom:.12em;
  margin-bottom:-.12em
}
.reveal-line {
  display:block;
  will-change:transform
}
html[data-motion="on"] [data-reveal]:not(.seen) .reveal-line {
  transform:translateY(110%)
}
html[data-motion="on"] [data-reveal].seen .reveal-line {
  animation:line-reveal .85s cubic-bezier(.18,.7,.2,1) both
}
html[data-motion="on"] [data-reveal].seen .line-mask:nth-child(2) .reveal-line {
  animation-delay:90ms
}
@keyframes line-reveal {
  from {
    transform:translateY(110%);
    filter:blur(3px)
  }
  to {
    transform:translateY(0);
    filter:blur(0)
  }
}
.intro-bottom {
  display:grid;
  grid-template-columns:1.1fr 1.25fr .6fr;
  gap:40px;
  align-items:start;
  margin-top:auto
}
.intro-bottom p {
  font-size:17px;
  line-height:1.6;
  max-width:38ch
}
.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid currentColor;
  padding:8px 0;
  font-size:15px;
  align-self:start
}
.hero-link {
  font-size:17px;
  max-width:300px
}
.text-link>span:last-child {
  transition:transform .35s
}
.text-link:hover>span:last-child {
  transform:translate(3px,-3px)
}
.roll-label {
  display:inline-grid;
  overflow:hidden;
  line-height:1.4;
  position:relative
}
.roll-label>span {
  grid-area:1/1;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)
}
.roll-label>span:last-child {
  transform:translateY(120%)
}
.text-link:hover .roll-label>span:first-child {
  transform:translateY(-120%)
}
.text-link:hover .roll-label>span:last-child {
  transform:translateY(0)
}
.scroll-link {
  font-size:12px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  padding-top:10px;
  color:var(--muted)
}
.scroll-link>span {
  font-size:22px;
  transition:transform .3s
}
.scroll-link:hover>span {
  transform:translateY(5px)
}
.art-caption {
  font-size:10px;
  color:#77776f;
  margin-top:46px
}
.scenario-story {
  padding-top:54px;
  padding-bottom:80px;
  scroll-margin-top:0px
}
.section-marker {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  margin-bottom:52px
}
.scenario-layout {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:100px
}
.scenario-intro h2 {
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:clamp(38px,4.4vw,65px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.055em;
  margin-bottom:32px
}
.scenario-visual {
  max-width:490px;
  padding:20px 0 0
}
.illustration-tag {
  font-size:11px;
  color:var(--muted);
  margin-bottom:26px
}
.visual-origin {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:11px
}
.visual-origin>strong {
  font-size:16px;
  font-weight:500
}
.signature-chip {
  font:11px Consolas,monospace;
  padding:5px 8px;
  border:1px solid var(--line)
}
.visual-fork {
  height:42px;
  position:relative;
  margin:0 21%
}
.visual-fork::before {
  content:"";
  position:absolute;
  left:50%;
  height:50%;
  border-left:1px solid #92928a
}
.visual-fork>span {
  position:absolute;
  bottom:0;
  width:50%;
  height:50%;
  border-top:1px solid #92928a
}
.visual-fork>span:first-child {
  left:0;
  border-left:1px solid #92928a
}
.visual-fork>span:last-child {
  right:0;
  border-right:1px solid #92928a
}
.visual-destinations {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.visual-destinations>div {
  border:1px solid var(--line);
  padding:14px 16px;
  display:grid;
  gap:6px;
  transition:background .3s,border-color .3s
}
.visual-destinations span {
  font-size:11px;
  color:var(--muted)
}
.visual-destinations strong {
  font:500 26px Consolas,monospace;
  letter-spacing:-1px
}
.visual-destinations small {
  font-size:11px;
  line-height:1.4
}
[data-preview="attack"] .visual-destinations>div:first-child {
  background:#fff0ed;
  border-color:#e1aaa6;
  color:var(--red)
}
[data-preview="attack"] .visual-destinations>div:last-child {
  border-color:#92928a;
  background:#eeeee8
}
[data-preview="recovery"] .visual-destinations>div {
  background:#eef5ef;
  border-color:#a8c4b3
}
.scenario-visual>p {
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
  margin-top:14px;
  max-width:54ch
}
.scenario-list {
  padding-top:5px
}
.scenario-row {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:19px 0;
  text-align:left;
  position:relative
}
.scenario-row:first-child {
  border-top:1px solid var(--line)
}
.row-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:24px;
  font-weight:500;
  letter-spacing:-.6px;
  margin-bottom:10px
}
.row-arrow {
  display:inline-block;
  font-size:24px;
  transition:transform .35s,opacity .35s;
  opacity:.25
}
.row-description {
  display:block;
  font-size:14px;
  line-height:1.65;
  max-width:52ch;
  color:var(--muted);
  padding-right:24px;
  transition:color .3s,transform .3s
}
.scenario-row:hover .row-arrow,.scenario-row.is-active .row-arrow {
  opacity:1;
  transform:rotate(45deg)
}
.scenario-row:hover .row-description,.scenario-row.is-active .row-description {
  color:var(--ink);
  transform:translateX(9px)
}
.scenario-row.is-active::before {
  content:"";
  position:absolute;
  left:-18px;
  top:29px;
  width:5px;
  height:5px;
  background:var(--ink);
  border-radius:50%
}
.story-cta {
  margin-top:26px;
  font-size:13px
}
.lab-stage {
  padding-top:28px;
  padding-bottom:25px;
  border-top:1px solid var(--line);
  scroll-margin-top:0px
}
.lab-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:15px
}
.lab-heading h2 {
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:32px;
  font-weight:400;
  letter-spacing:-1.5px
}
.source-badge {
  font-size:11px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:3px;
  max-width:420px
}
.controls {
  display:flex;
  align-items:center;
  gap:17px;
  padding:11px 13px;
  border:1px solid var(--line);
  background:#efefea
}
.scenario {
  border:0;
  padding:0;
  margin:0;
  display:flex;
  gap:3px
}
.scenario legend {
  font-size:10px;
  color:var(--muted);
  margin-bottom:4px
}
.scenario label {
  position:relative;
  cursor:pointer
}
.scenario input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  margin:0;
  cursor:pointer
}
.scenario span {
  display:block;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:13px;
  transition:background .2s,color .2s
}
.scenario input:checked+span {
  background:var(--ink);
  color:var(--paper)
}
.scenario input:disabled+span {
  opacity:.6
}
.target {
  display:grid;
  gap:4px;
  border-left:1px solid var(--line);
  padding-left:18px
}
.target>span {
  font-size:10px;
  color:var(--muted)
}
.target strong {
  font:14px Consolas,monospace
}
.primary {
  margin-left:auto;
  padding:12px 16px;
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  font-size:13px;
  font-weight:600;
  transition:background .25s,transform .25s
}
.primary:hover:not(:disabled) {
  background:#3a3a35;
  transform:translateY(-2px)
}
#refresh {
  font-size:12px;
  padding:11px 12px
}
.topology {
  position:relative;
  padding:12px 0 0;
  margin-top:12px;
  border-top:1px solid var(--line)
}
.section-line,.result-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.section-line h2 {
  font-size:12px;
  font-weight:600
}
.section-line>span {
  font-size:10px;
  color:var(--muted)
}
.diagram-scroll {
  overflow-x:auto;
  scrollbar-width:thin
}
.topology svg {
  display:block;
  width:100%;
  height:128px
}
.node rect {
  fill:#fff;
  stroke:#bdbdb4;
  transition:fill .25s,stroke .25s
}
.node text {
  text-anchor:middle;
  font:600 16px "Be Vietnam Pro",sans-serif;
  fill:var(--ink)
}
.node .node-sub {
  font-size:12px;
  font-weight:400;
  fill:var(--muted)
}
.secure-node rect {
  fill:#f0f4ef;
  stroke:#9db5a7
}
.node.tampered rect {
  fill:#fff0ed;
  stroke:#c48781
}
.node.tampered .node-sub {
  fill:var(--red)
}
.node:hover rect,.node:focus-visible rect {
  fill:#e8e8e2;
  stroke:var(--ink)
}
.path-note {
  font-size:12px;
  fill:var(--muted);
  text-anchor:middle
}
.node-tooltip {
  position:absolute;
  left:24px;
  bottom:44px;
  max-width:330px;
  background:var(--ink);
  color:white;
  font-size:12px;
  line-height:1.5;
  padding:12px 15px;
  z-index:2;
  pointer-events:none
}
.route-summary {
  font-size:11px;
  line-height:1.45;
  padding:7px 0;
  border-top:1px solid var(--line);
  min-height:30px;
  color:var(--muted)
}
.result-heading {
  margin-top:12px;
  margin-bottom:7px
}
.result-heading h2 {
  font-size:17px;
  font-weight:500;
  letter-spacing:-.4px
}
.result-heading>span {
  font-size:10px;
  color:var(--muted);
  overflow-wrap:anywhere;
  text-align:right
}
.notice {
  font-size:11px;
  line-height:1.5;
  min-height:24px;
  padding-bottom:7px;
  color:var(--muted)
}
.notice.error {
  color:var(--red)
}
.comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.result-panel {
  min-width:0;
  border:1px solid var(--line);
  border-top:2px solid #92928a;
  background:var(--paper);
  border-radius:2px;
  overflow:hidden;
  transition:border-color .35s
}
.result-panel header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding:12px 14px
}
.result-panel h3 {
  font-size:16px;
  font-weight:600;
  letter-spacing:-.25px
}
.result-panel header p {
  font-size:11px;
  color:var(--muted);
  margin-top:5px
}
.outcome {
  padding:5px 8px;
  border-radius:2px;
  font-size:10px;
  white-space:nowrap;
  font-weight:600
}
.neutral {
  color:var(--muted);
  background:#f0f0ec
}
.success {
  color:var(--green);
  background:#e9f4ed
}
.danger {
  color:var(--red);
  background:#fceced
}
.warning {
  color:var(--amber);
  background:#fff4df
}
.result-panel[data-tone="success"] {
  border-top-color:var(--green)
}
.result-panel[data-tone="danger"] {
  border-top-color:var(--red)
}
.result-panel[data-tone="warning"] {
  border-top-color:var(--amber)
}
.panel-body {
  padding:11px 14px
}
.metrics {
  margin:0;
  display:grid;
  grid-template-columns:1fr .8fr 1.25fr;
  gap:9px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line)
}
.metrics dt {
  font-size:10px;
  color:var(--muted);
  margin-bottom:5px
}
.metrics dd {
  font:14px Consolas,monospace;
  margin:0
}
.delivery {
  font-size:11px;
  line-height:1.4;
  margin:9px 0;
  color:var(--muted)
}
.timing {
  font-size:10px;
  color:var(--muted);
  margin:-3px 0 8px
}
.preview {
  border:1px solid var(--line);
  overflow:hidden;
  border-radius:2px
}
.preview-label {
  font-size:10px;
  color:var(--muted);
  padding:6px 9px;
  background:#f3f3ef
}
.preview-loading {
  font-size:12px;
  padding:10px
}
iframe {
  display:block;
  width:100%;
  height:112px;
  border:0;
  background:#f9faf8
}
.empty {
  display:grid;
  place-content:center;
  gap:8px;
  min-height:201px;
  text-align:center;
  font-size:12px;
  color:var(--muted)
}
.empty strong {
  font-size:17px;
  font-weight:500;
  color:var(--ink)
}
.stopped {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-height:134px;
  padding:14px;
  background:#faf0ee;
  border:1px solid #ead0cb;
  color:var(--red);
  font-size:12px;
  line-height:1.4
}
.stopped strong {
  font-size:18px;
  font-weight:600
}
.stopped button {
  align-self:start;
  font-size:10px;
  padding:5px 8px;
  color:var(--ink);
  background:white
}
.warning-box {
  color:var(--amber);
  background:#fff8ec;
  border-color:#e6d3ac
}
.comparison.stale {
  opacity:.58
}
.comparison.stale iframe {
  display:none
}
.evidence {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:13px
}
.evidence summary {
  display:flex;
  align-items:center;
  gap:15px;
  padding:13px 0;
  font-size:12px;
  font-weight:600;
  list-style:none
}
.evidence summary::-webkit-details-marker {
  display:none
}
.evidence summary>span:first-child {
  font-size:11px;
  color:var(--muted);
  font-weight:400
}
.detail-plus {
  margin-left:auto;
  font-size:22px;
  font-weight:300;
  transition:transform .3s
}
.evidence[open] .detail-plus {
  transform:rotate(45deg)
}
.evidence-body {
  padding:3px 0 16px
}
.evidence-body p {
  font-size:13px;
  line-height:1.6;
  max-width:90ch
}
.evidence-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0;
  font-size:11px
}
.evidence-actions button {
  font-size:11px
}
pre {
  max-height:360px;
  overflow:auto;
  font:12px/1.6 Consolas,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#eaeae4;
  padding:16px
}
#proof-result h3 {
  font-size:15px;
  margin:14px 0 6px
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:25px;
  font-size:10px;
  color:var(--muted);
  line-height:1.5;
  padding:16px 0 0
}
footer p {
  max-width:90ch
}
.back-top {
  display:flex;
  gap:18px;
  white-space:nowrap
}

@media(min-width:1000px) and (max-height:820px) {
  .lab-stage {
    padding-top:15px
  }
  .lab-heading {
    margin-bottom:11px
  }
  .lab-heading h2 {
    font-size:27px
  }
  .controls {
    padding-top:8px;
    padding-bottom:8px
  }
  .topology svg {
    height:112px
  }
  .result-panel header {
    padding-top:10px;
    padding-bottom:10px
  }
}
@media(max-width:1100px) {
  .section-shell {
    padding-left:28px;
    padding-right:28px
  }
  .masthead {
    padding:0 28px
  }
  .scenario-layout {
    gap:50px
  }
  .intro-bottom {
    gap:30px;
    grid-template-columns:1fr 1fr
  }
  .scroll-link {
    display:none
  }
  .controls {
    flex-wrap:wrap;
    gap:12px
  }
  .target {
    margin-left:auto
  }
  .primary {
    margin-left:0
  }
  .scenario-story {
    padding-top:40px
  }
  .row-heading {
    font-size:22px
  }
  .scenario-intro h2 {
    font-size:46px
  }
  .result-panel header {
    align-items:start;
    flex-direction:column;
    gap:8px
  }
}
@media(max-width:700px) {
  :root {
    scroll-padding-top:65px
  }
  .section-shell {
    padding-left:20px;
    padding-right:20px
  }
  .masthead {
    height:60px;
    padding:0 20px;
    gap:10px
  }
  .identity {
    font-size:16px
  }
  .brand-sub {
    display:none
  }
  nav {
    gap:17px;
    font-size:12px
  }
  .motion-toggle {
    margin-left:0;
    font-size:0;
    width:24px;
    height:24px;
    padding:0;
    border-radius:50%
  }
  .motion-toggle::after {
    content:"◌";
    font-size:17px
  }
  .motion-toggle[aria-pressed="false"]::after {
    content:"○"
  }
  .intro {
    min-height:calc(88svh - 60px)
  }
  .intro-inner {
    padding-top:25px;
    padding-bottom:20px
  }
  .intro-index {
    font-size:10px;
    gap:20px
  }
  .intro-index>span:last-child {
    text-align:right
  }
  .intro h1 {
    font-size:clamp(54px,12vw,84px);
    margin:75px 0 65px;
    letter-spacing:-.065em
  }
  .intro-bottom {
    grid-template-columns:1fr;
    gap:23px
  }
  .intro-bottom p {
    font-size:15px;
    max-width:40ch
  }
  .hero-link {
    font-size:15px
  }
  .art-caption {
    margin-top:34px;
    font-size:9px
  }
  .scenario-story {
    padding-top:30px;
    padding-bottom:48px
  }
  .section-marker {
    margin-bottom:30px;
    font-size:10px
  }
  .scenario-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .scenario-intro h2 {
    font-size:43px;
    margin-bottom:15px
  }
  .scenario-visual {
    max-width:none
  }
  .scenario-row {
    padding:17px 0
  }
  .row-heading {
    font-size:23px
  }
  .row-description {
    font-size:13px
  }
  .scenario-row.is-active::before {
    left:-11px
  }
  .lab-stage {
    padding-top:25px
  }
  .lab-heading {
    align-items:start;
    flex-direction:column;
    gap:10px
  }
  .lab-heading h2 {
    font-size:30px
  }
  .source-badge {
    font-size:10px
  }
  .controls {
    padding:12px
  }
  .scenario {
    width:100%;
    justify-content:space-between
  }
  .scenario span {
    font-size:12px;
    padding:8px 9px
  }
  .target {
    border:0;
    margin:0;
    padding:0
  }
  .primary {
    margin-left:auto;
    padding:12px;
    font-size:12px
  }
  #refresh {
    font-size:11px;
    padding:9px
  }
  .section-line {
    align-items:start;
    flex-direction:column;
    gap:5px
  }
  .topology svg {
    min-width:850px;
    height:123px
  }
  .route-summary {
    font-size:10px
  }
  .comparison {
    grid-template-columns:1fr;
    gap:16px
  }
  .result-panel header {
    flex-direction:row;
    align-items:center
  }
  .result-panel h3 {
    font-size:15px
  }
  .result-heading {
    align-items:start;
    flex-direction:column;
    gap:6px
  }
  .result-heading>span {
    text-align:left;
    font-size:9px
  }
  .notice {
    min-height:32px;
    font-size:11px
  }
  .metrics dt {
    font-size:10px
  }
  .metrics dd {
    font-size:14px
  }
  .delivery {
    font-size:11px
  }
  .evidence summary {
    flex-wrap:wrap;
    gap:5px
  }
  .evidence summary>span:first-child {
    width:80%;
    font-size:10px
  }
  .detail-plus {
    position:absolute;
    right:20px
  }
  .evidence-actions {
    gap:7px
  }
  footer {
    flex-direction:column;
    gap:12px;
    font-size:9px
  }
  .node-tooltip {
    left:10px;
    max-width:280px
  }
}
html[data-motion="off"] {
  scroll-behavior:auto
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after {
  animation:none!important;
  transition:none!important
}
html[data-motion="off"] .intro h1 {
  transform:none
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .intro h1 {
    transform:none!important
  }
  .reveal-line {
    transform:none!important;
    filter:none!important
  }
}
/* Measured fields keep a readable size;
the section scroll offset is owned by root. */
.metrics dt {
  font-size:11px
}
.metrics dd {
  font-size:15px
}
.delivery {
  font-size:12px
}
.notice {
  font-size:12px
}
.outcome {
  font-size:11px
}
.source-badge {
  font-size:12px
}
.evidence summary {
  position:relative
}
@media(max-width:700px) {
  .motion-toggle {
    width:32px;
    height:32px;
    flex-shrink:0
  }
  .detail-plus {
    right:0
  }
  .notice {
    font-size:11px
  }
}
@media(max-width:380px) {
  .nav-link:first-child {
    display:none
  }
  .masthead nav {
    gap:12px
  }
}
@media(min-width:1000px) and (max-height:820px) {
  .lab-heading {
    margin-bottom:9px
  }
  .topology svg {
    height:112px
  }
  .result-heading {
    margin-top:10px;
    margin-bottom:5px
  }
  .result-panel header {
    padding-top:8px;
    padding-bottom:8px
  }
  .panel-body {
    padding-top:8px;
    padding-bottom:8px
  }
  .metrics {
    padding-bottom:7px
  }
  .delivery {
    margin-top:6px;
    margin-bottom:6px
  }
  .timing {
    margin-bottom:6px
  }
}

/* Local OFL fonts: the complete Vietnamese glyph set works without a network. */
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Xanh Mono";src:url("../fonts/XanhMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
:root{--cobalt:#3157FF;--canvas:#f6f7fb;--line:#d9deeb;--amber:#99511a}
.brand-symbol,.hero-link,.nav-lab,.row-arrow,.scroll-link>span{color:var(--cobalt)}
.reading-progress,.scenario-row.is-active::before{background:var(--cobalt)}
.masthead{background:rgba(246,247,251,.96)}
.intro-index,.section-marker,.illustration-tag,.brand-sub,.timeline-heading>span{font-family:"Xanh Mono",monospace}
.intro h1{font-size:clamp(100px,12.7vw,180px);letter-spacing:-.075em;line-height:1.07;margin-top:60px;margin-bottom:50px;max-width:1300px}
.scenario-intro h2{font-size:clamp(46px,5vw,84px);line-height:1.17;letter-spacing:-.065em}
.lab-heading h2{font-size:36px;letter-spacing:-1.6px}
.primary,.scenario input:checked+span{background:var(--cobalt);border-color:var(--cobalt)}
.primary:hover:not(:disabled){background:#2145e4;border-color:#2145e4}
.controls{background:#edf0ff}
.result-panel{transition:border-color .24s}
.node[data-state="processing"] rect,.node[data-state="response"] rect{stroke:var(--cobalt);fill:#eef1ff}
.node[data-state="validated"] rect{stroke:var(--green);fill:#e9f4ed}
.node[data-state="rejected"] rect,.node[data-state="error"] rect{stroke:var(--red);fill:#fceced}
.node.tampered rect{stroke:var(--amber);fill:#fff2e6}
.node.tampered .node-sub{fill:var(--amber)}
.illustrative{opacity:.4;stroke-dasharray:4 4}
.http-routes path{transition:stroke .24s}
.http-routes .connected{stroke:var(--cobalt)}
.http-route-label{font:12px Consolas,monospace;fill:var(--muted)}
.validation-steps{display:flex;gap:16px;flex-wrap:wrap;font-size:10px;color:var(--muted);padding:4px 0 7px}
.validation-steps span+span{border-left:1px solid var(--line);padding-left:16px}
.timeline-section{margin:20px 0}
.timeline-heading{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.timeline-heading h3,.recovery-comparison h3{font-size:18px;font-weight:500}
.timeline-heading>span{font-size:11px;overflow-wrap:anywhere}
.event-timeline{list-style:none;padding:0;max-height:360px;overflow:auto;border-top:1px solid var(--line);margin:14px 0}
.event-timeline>li{border-bottom:1px solid var(--line);border-left:3px solid var(--cobalt);padding:0 12px}
.event-timeline summary{font-size:12px;font-weight:400;line-height:1.6;padding:10px 0;display:list-item;list-style:disclosure-closed}
.event-timeline details[open]>summary{list-style:disclosure-open}
.event-timeline pre{margin:0 0 12px}
.event-timeline li[data-kind="job.failed"],.event-timeline li[data-kind="dns.error"],.event-timeline li[data-kind="http.error"]{border-left-color:var(--red)}
.recovery-comparison{padding:20px 0;border-block:1px solid var(--line);margin-bottom:20px}
.table-scroll{overflow:auto;margin-top:14px}
.table-scroll table{border-collapse:collapse;width:100%;font-size:12px;text-align:left;white-space:nowrap}
.table-scroll th,.table-scroll td{padding:10px;border-bottom:1px solid var(--line)}
.table-scroll tr:nth-child(even){background:#e9f4ed}
@media(min-width:1000px) and (max-height:820px){
 .lab-heading h2{font-size:32px}.lab-stage{padding-top:12px}.lab-heading{margin-bottom:8px}
 .topology svg{height:124px}.topology{margin-top:8px;padding-top:8px}
 .validation-steps{font-size:10px;padding-top:0;padding-bottom:4px}.route-summary{padding:5px 0;min-height:25px}
 .result-heading{margin-top:7px}.panel-body{padding-top:7px;padding-bottom:7px}
 .result-panel h3{font-size:15px}.result-panel header{padding-block:7px}.preview iframe{height:100px}.stopped{min-height:124px}
}
@media(max-width:1100px){.scenario-intro h2{font-size:48px}}
@media(max-width:700px){
 .intro h1{font-size:clamp(60px,15.4vw,72px);letter-spacing:-.075em;line-height:1.15;margin:65px 0 50px}
 .scenario-intro h2{font-size:43px}.lab-heading h2{font-size:32px}.topology svg{height:152px;min-width:850px}
 .validation-steps{gap:6px;font-size:10px}.validation-steps span+span{padding-left:6px}
 .result-panel header{align-items:start;flex-direction:column}.timeline-heading{gap:8px}
 .event-timeline summary{font-size:11px}.intro-index{font-size:10px}
}

/* Use the full presentation width for observed DNS and HTTP routes. */
.topology .node text{font-size:18px}.topology .node .node-sub{font-size:15px}.topology .http-route-label{font-size:16px}.topology .path-note{font-size:16px}

@media(min-width:1000px) and (max-height:820px){.topology svg{height:140px}.topology{margin-top:4px}}

/* Reveal only confirmed observations, in reading order when a poll batches them. */
.validation-steps span{opacity:.5;transition:opacity .2s,color .2s}
.validation-steps span:nth-child(2){transition-delay:60ms}
.validation-steps span:nth-child(3){transition-delay:120ms}
.validation-steps .observed{opacity:1;color:var(--cobalt)}
.scenario legend,.target>span,.section-line>span{font-family:"Xanh Mono",monospace}