:root { --ink:#14213d; --paper:#f2f0e9; --blue:#8db3ff; --cyan:#72f2d4; --orange:#ff754c; --line:rgba(20,33,61,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; margin:0; }
a { color:inherit; }
button,input { font:inherit; }
.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
header { align-items:center; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; height:64px; padding:0 2rem; }
header .brand { align-items:center; background:var(--ink); border-radius:50%; color:var(--paper); display:flex; font:italic 1rem Georgia,serif; height:32px; justify-content:center; text-decoration:none; width:32px; }
header > a:nth-child(2), header > span, .eyebrow, .section-head > span, .section-head > p, .cache-control button, .hop, .step-readout > span, .dns-level span, .dns-level small, .protocol-grid span, .summary-flow, .next span { font-family:"SFMono-Regular",Consolas,monospace; letter-spacing:.07em; text-transform:uppercase; }
header > a:nth-child(2) { font-size:.68rem; justify-self:center; text-decoration:none; }
header > span { font-size:.61rem; justify-self:end; }
.hero { min-height:780px; overflow:hidden; padding:clamp(5rem,10vw,10rem) 2rem 4rem; position:relative; }
.hero::before { background:var(--blue); border-radius:50%; content:""; height:45rem; position:absolute; right:-16rem; top:-13rem; width:45rem; z-index:-1; }
.hero::after { border:1px dashed var(--ink); border-radius:50%; content:""; height:22rem; position:absolute; right:5rem; top:5rem; width:22rem; z-index:-1; }
.eyebrow { font-size:.62rem; margin:0 0 2rem; }
.hero h1 { font-size:clamp(4rem,9vw,9rem); font-weight:500; letter-spacing:-.075em; line-height:.86; margin:0; }
.hero h1 em { font-family:Georgia,serif; font-weight:400; }
.lede { font:clamp(1.3rem,2.3vw,2rem)/1.25 Georgia,serif; margin:3rem 0; max-width:650px; }
.address-bar { background:white; border:1px solid var(--ink); display:grid; grid-template-columns:auto 1fr auto; max-width:850px; padding:8px; }
.address-bar .lock { align-self:center; color:var(--cyan); padding:0 1rem; }
.address-bar input { background:transparent; border:0; color:var(--ink); font-family:monospace; font-size:1rem; min-width:0; outline:0; padding:1rem 0; }
.address-bar button { background:var(--ink); border:0; color:white; cursor:pointer; font:700 .68rem monospace; padding:0 1.6rem; }
.hero-hint { font-size:.7rem; margin-left:2rem; }

.journey,.dns-deep,.protocols,.summary { padding:clamp(5rem,9vw,9rem) 2rem; }
.journey { background:var(--ink); color:var(--paper); }
.section-head { display:grid; grid-template-columns:4rem minmax(9rem,1fr) 3fr; margin-bottom:7rem; }
.section-head > span,.section-head > p { font-size:.6rem; margin:.6rem 0 0; }
.section-head h2 { font:clamp(3.2rem,6.5vw,6.5rem)/.9 Georgia,serif; letter-spacing:-.06em; margin:0; }
.section-head.compact { margin-bottom:4rem; }
.cache-control { border-bottom:1px solid rgba(242,240,233,.3); border-top:1px solid rgba(242,240,233,.3); display:flex; justify-content:space-between; margin-left:25%; padding:2rem 0; }
.cache-control h3 { font:2rem Georgia,serif; margin:.4rem 0; }
.cache-control p:last-child { font-size:.8rem; margin:0; opacity:.65; }
#cacheToggle { align-items:center; align-self:center; background:transparent; border:1px solid currentColor; color:inherit; cursor:pointer; display:flex; gap:1rem; min-width:112px; padding:.65rem; }
#cacheToggle i { background:var(--orange); border-radius:50%; display:block; height:22px; transition:transform .2s; width:22px; }
#cacheToggle span { font-size:.57rem; }
#cacheToggle[aria-checked=true] i { background:var(--cyan); transform:translateX(58px); }
.network-map { height:470px; margin-top:3rem; position:relative; }
.hop { align-items:center; background:var(--ink); border:1px solid rgba(242,240,233,.6); border-radius:50%; color:var(--paper); cursor:pointer; display:flex; flex-direction:column; height:92px; justify-content:center; left:var(--x); position:absolute; top:var(--y); transform:translate(-50%,-50%); width:92px; z-index:2; }
.hop b { font-size:.56rem; font-weight:400; opacity:.6; }
.hop span { font-size:.56rem; margin-top:.4rem; }
.hop.active { background:var(--cyan); border-color:var(--cyan); color:var(--ink); }
.route-line { border-top:1px dashed rgba(242,240,233,.45); position:absolute; transform-origin:left; width:19%; }
.route-1 { left:8%; top:57%; transform:rotate(-25deg); }.route-2 { left:25%; top:32%; transform:rotate(24deg); }.route-3 { left:44%; top:54%; transform:rotate(-28deg); }.route-4 { left:61%; top:25%; transform:rotate(27deg); }.route-5 { left:78%; top:54%; transform:rotate(-31deg); width:15%; }
.packet { align-items:center; background:var(--orange); border-radius:50%; color:var(--ink); display:flex; font-size:1.2rem; height:34px; justify-content:center; left:6%; position:absolute; top:62%; transform:translate(-50%,-50%); transition:left .55s ease,top .55s ease; width:34px; z-index:3; }
.step-readout { border-top:1px solid rgba(242,240,233,.3); display:grid; gap:1rem; grid-template-columns:1fr 2fr 2fr; padding-top:1.5rem; }
.step-readout > span { color:var(--cyan); font-size:.56rem; }
.step-readout h3 { font:2rem Georgia,serif; margin:0; }
.step-readout p { line-height:1.5; margin:0; }
.step-readout code { background:rgba(255,255,255,.08); grid-column:2 / -1; padding:1rem; }

.dns-deep { background:var(--blue); }
.big-copy { font:clamp(2rem,4vw,4rem)/1 Georgia,serif; letter-spacing:-.04em; margin:0 0 4rem 25%; max-width:800px; }
.dns-stack { border-top:1px solid var(--ink); display:grid; grid-template-columns:repeat(4,1fr); }
.dns-level { background:transparent; border:0; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); color:inherit; cursor:pointer; display:flex; flex-direction:column; min-height:210px; padding:1.3rem; text-align:left; }
.dns-level:first-child { border-left:1px solid var(--ink); }
.dns-level span { font-size:.55rem; }
.dns-level b { font:1.5rem Georgia,serif; margin-top:auto; }
.dns-level small { font-size:.5rem; margin-top:.7rem; }
.dns-level.active { background:var(--cyan); }
.dns-answer { margin:4rem 0 0 50%; max-width:600px; }
.dns-answer h3 { font:2.6rem/1 Georgia,serif; letter-spacing:-.04em; margin:0 0 1.5rem; }
.dns-answer p:last-child { line-height:1.55; }

.protocol-grid { border:1px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; }
.protocol-grid article { border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); min-height:270px; padding:2rem; }
.protocol-grid article:nth-child(even) { border-right:0; }.protocol-grid article:nth-child(n+3) { border-bottom:0; }
.protocol-grid span { color:#315cff; font-size:.56rem; }
.protocol-grid h3 { font:2.4rem Georgia,serif; margin:4rem 0 1rem; }
.protocol-grid p { line-height:1.5; max-width:490px; }
.summary { background:var(--cyan); }
.summary h2 { font:clamp(3.4rem,7vw,7rem)/.9 Georgia,serif; letter-spacing:-.06em; margin:0; max-width:1100px; }
.summary-flow { align-items:center; border-bottom:1px solid var(--ink); border-top:1px solid var(--ink); display:flex; font-size:.58rem; justify-content:space-between; margin:6rem 0; padding:2rem 1rem; }
.summary-flow i { font:1.3rem Georgia,serif; }
.sources { display:flex; flex-direction:column; margin-left:50%; }
.sources a { border-bottom:1px solid var(--ink); font-size:.78rem; padding:1rem 0; text-decoration:none; }
.next { border-top:1px solid var(--ink); display:flex; flex-direction:column; margin-top:7rem; padding-top:2rem; text-decoration:none; }
.next span { font-size:.55rem; }.next b { font:clamp(2rem,4vw,4rem) Georgia,serif; margin-top:1rem; }

@media(max-width:800px) {
  header { grid-template-columns:auto 1fr; padding:0 1rem; } header > a:nth-child(2){justify-self:end} header > span{display:none}
  .hero,.journey,.dns-deep,.protocols,.summary { padding-left:1rem; padding-right:1rem; }
  .hero { min-height:700px; }.hero h1{font-size:clamp(3.8rem,18vw,6rem)}.hero::before{right:-29rem}
  .section-head{grid-template-columns:2.5rem 1fr}.section-head h2{grid-column:1/-1;margin-top:2rem}
  .cache-control{margin-left:0}.network-map{height:620px}.hop{height:72px;width:72px}.hop span{font-size:.48rem}
  .hop:nth-of-type(1){--x:12%!important;--y:12%!important}.hop:nth-of-type(2){--x:78%!important;--y:25%!important}.hop:nth-of-type(3){--x:22%!important;--y:42%!important}.hop:nth-of-type(4){--x:78%!important;--y:58%!important}.hop:nth-of-type(5){--x:22%!important;--y:74%!important}.hop:nth-of-type(6){--x:78%!important;--y:90%!important}.route-line{display:none}
  .step-readout{grid-template-columns:1fr}.step-readout code{grid-column:1}.dns-stack{grid-template-columns:1fr 1fr}.dns-level{min-height:180px}.big-copy{margin-left:0}.dns-answer{margin-left:0}
  .protocol-grid{grid-template-columns:1fr}.protocol-grid article,.protocol-grid article:nth-child(even),.protocol-grid article:nth-child(n+3){border-bottom:1px solid var(--ink);border-right:0}.protocol-grid article:last-child{border-bottom:0}
  .summary-flow{align-items:flex-start;flex-direction:column;gap:1rem}.summary-flow i{transform:rotate(90deg)}.sources{margin-left:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.packet{transition:none}}