:root{--ink:#17211b;--paper:#f5f2e9;--cream:#fffdf6;--green:#b9e769;--deep:#153f31;--coral:#ff765d;--blue:#75bbed;--yellow:#f4c952;--line:#c9c7ba;--mono:"DM Mono",monospace;--sans:"Manrope",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}.skip-link{position:fixed;left:1rem;top:-5rem;background:#fff;color:#000;padding:.75rem;z-index:50}.skip-link:focus{top:1rem}a{color:inherit}.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,4vw,5rem);border-bottom:1px solid var(--line);position:absolute;width:100%;z-index:5}.brand{text-decoration:none;font-weight:800;display:flex;gap:.6rem;align-items:center}.brand-mark{width:32px;height:32px;border-radius:50% 50% 45% 55%;display:grid;place-items:center;background:var(--ink);color:var(--green)}nav{display:flex;gap:2rem}nav a{text-decoration:none;font-size:.88rem;font-weight:600}nav a:hover{text-decoration:underline;text-underline-offset:4px}.hero{min-height:720px;padding:10rem clamp(1.2rem,7vw,8rem) 6rem;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;overflow:hidden;background:radial-gradient(circle at 88% 0%,#d8efad 0,transparent 35%)}.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:500}.hero h1,.section-heading h2,.dns-copy h2,.https-copy h2{font-size:clamp(2.7rem,5.3vw,5.9rem);line-height:1.02;letter-spacing:-.06em;margin:.7rem 0 1.5rem;max-width:900px}.hero h1 em{font-style:normal;color:var(--deep);position:relative;white-space:nowrap}.hero h1 em:after{content:"";height:10px;background:var(--green);position:absolute;left:0;right:0;bottom:2px;z-index:-1;transform:rotate(-1deg)}.hero-lede{font-size:1.18rem;max-width:590px;margin-bottom:2rem}.button{display:inline-flex;gap:1rem;align-items:center;background:var(--deep);color:white;text-decoration:none;padding:.9rem 1.25rem;border-radius:4px;font-weight:700}.button:hover{transform:translateY(-2px)}.hero-visual{height:480px;position:relative;display:grid;place-items:center}.browser-card{width:min(480px,92%);height:295px;background:var(--cream);border:2px solid var(--ink);border-radius:12px;box-shadow:14px 14px 0 var(--ink);transform:rotate(2deg);z-index:2}.browser-bar{height:46px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:7px;padding:0 12px}.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--coral)}.browser-bar i:nth-child(2){background:var(--yellow)}.browser-bar i:nth-child(3){background:var(--green)}.browser-bar span{font:12px var(--mono);background:#e9e9e2;padding:5px 9px;margin-left:7px;border-radius:3px}.browser-page{height:249px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}.browser-page span{font-size:2.2rem;font-weight:800}.browser-page div{height:9px;width:52%;background:#d9d6ca}.browser-page div:last-child{width:35%}.orbit{position:absolute;border:1px dashed #799476;border-radius:50%}.orbit-one{width:540px;height:400px}.orbit-two{width:400px;height:520px}.float-tag{position:absolute;padding:.35rem .7rem;border:2px solid var(--ink);font:500 .8rem var(--mono);z-index:3;box-shadow:3px 3px 0 var(--ink)}.tag-dns{top:2%;left:14%;background:var(--yellow);transform:rotate(-8deg)}.tag-https{right:1%;top:22%;background:var(--green);transform:rotate(7deg)}.tag-git{left:8%;bottom:8%;background:var(--coral);transform:rotate(5deg)}.section-pad{padding:7rem clamp(1.2rem,7vw,8rem)}.section-heading{max-width:850px;margin-bottom:4rem}.section-heading h2,.dns-copy h2,.https-copy h2{font-size:clamp(2.3rem,4vw,4.3rem)}.section-heading>p:last-child{max-width:650px;font-size:1.08rem}.lesson{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.journey-layout{display:grid;grid-template-columns:1.5fr .7fr;gap:5rem;align-items:center}.journey-map{display:flex;align-items:center}.journey-node{background:transparent;border:0;padding:0;display:flex;flex-direction:column;align-items:center;min-width:96px;font:inherit;cursor:pointer;color:var(--ink)}.journey-node span{width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--cream);font:500 1rem var(--mono);transition:.2s}.journey-node b{margin-top:.7rem}.journey-node small{font-size:.72rem;color:#687169}.journey-node:hover span,.journey-node.active span{background:var(--green);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.connector{height:2px;background:var(--ink);flex:1;min-width:25px;position:relative;margin-top:-46px}.connector:after{content:"›";position:absolute;right:-2px;top:-17px;font-size:24px}.explain-card{background:var(--deep);color:white;padding:2rem;border-radius:8px;min-height:380px;box-shadow:10px 10px 0 var(--green)}.explain-icon{font-size:2.5rem}.step-count{font:500 .75rem var(--mono);color:var(--green);text-transform:uppercase}.explain-card h3{font-size:1.7rem;line-height:1.2}.explain-card>p{color:#dfe8df}.analogy{border-top:1px solid #557266;padding-top:1rem}.analogy b{color:var(--green)}.text-button{border:0;background:transparent;color:var(--green);padding:0;font:700 1rem var(--sans);cursor:pointer}.address{background:var(--paper)}.url-lab{border:2px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--ink);margin-bottom:5rem}.url-display{padding:2.2rem;display:flex;justify-content:center;flex-wrap:wrap;border-bottom:2px solid var(--ink)}.url-display button{font:500 clamp(1rem,2.5vw,2rem) var(--mono);border:0;padding:.1rem;background:transparent;cursor:pointer}.url-display button:hover,.url-display button.active{background:var(--green)}.url-detail{padding:1.25rem 2rem;display:flex;gap:2rem;align-items:center}.url-detail span{font:500 .8rem var(--mono);text-transform:uppercase;background:var(--ink);color:white;padding:.3rem .6rem}.url-detail p{margin:0}.concept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}.concept-grid article{border-top:2px solid var(--ink);padding-top:1.4rem}.concept-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}.coral{background:var(--coral)}.yellow{background:var(--yellow)}.blue{background:var(--blue)}.green{background:var(--green)}.concept-grid h3{font-size:1.35rem;margin-bottom:.3rem}.concept-grid p{font-size:.91rem}.concept-grid code,.deploy-flow code{font:12px var(--mono);background:#e6e2d6;padding:.15rem .3rem}.dns-section{background:var(--green);display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center}.dns-copy h2{margin-bottom:1.5rem}.dns-machine{background:#15201a;color:#eaf6e8;border-radius:8px;padding:1.8rem;box-shadow:12px 12px 0 #fff}.machine-top{font:12px var(--mono);border-bottom:1px solid #597063;padding-bottom:1rem;margin-bottom:1.5rem}.machine-top i{float:right;width:8px;height:8px;border-radius:50%;background:var(--green);margin-left:7px}.dns-machine label{font:12px var(--mono);display:block;margin-bottom:.5rem;color:#a9b7ac}.lookup-row{display:flex}.lookup-row input{min-width:0;flex:1;border:1px solid #69766e;background:#243029;color:white;padding:.8rem;font:14px var(--mono)}.lookup-row button{border:0;background:var(--green);padding:0 1rem;font-weight:800;cursor:pointer}.terminal{min-height:150px;margin-top:1rem;background:#080d0a;padding:1rem;font:13px/1.8 var(--mono);color:#c9d6cc}.terminal p{margin:0}.terminal span{color:var(--green)}.deploy{background:var(--deep);color:white}.section-heading.light>p{color:#d9e3dd}.deploy-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;margin-top:4rem}.deploy-flow article{border:1px solid #668075;padding:1.4rem;position:relative}.flow-num{font:12px var(--mono);color:var(--green)}.flow-icon{font-size:2rem;margin:2rem 0 1rem}.deploy-flow h3{font-size:1.25rem}.deploy-flow p{font-size:.86rem;color:#d6dfda;min-height:85px}.deploy-flow code{background:#263f35;color:var(--green);font-size:10px}.flow-arrow{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--green);font-size:1.5rem}.flow-arrow span{font:9px var(--mono);text-transform:uppercase}.git-note{margin-top:4rem;border-top:1px solid #668075;padding-top:2.5rem;display:grid;grid-template-columns:160px 1fr;gap:2rem;max-width:800px}.git-note h3{margin:0}.git-note p{color:#d6dfda}.git-branch{display:flex;align-items:center;justify-content:center}.git-branch i{width:22px;height:22px;border:4px solid var(--green);border-radius:50%;margin:0 8px;position:relative}.git-branch i:not(:last-child):after{content:"";position:absolute;width:20px;height:3px;background:var(--green);left:18px;top:6px}.https{display:grid;grid-template-columns:.8fr 1.2fr;gap:7rem;align-items:center;background:var(--cream)}.lock-visual{height:430px;position:relative;display:flex;justify-content:center;align-items:flex-end}.lock-shackle{position:absolute;width:190px;height:210px;border:34px solid var(--ink);border-bottom:0;border-radius:100px 100px 0 0;bottom:165px}.lock-body{width:280px;height:230px;border-radius:18px;background:var(--yellow);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);display:grid;place-items:center;font-size:5rem;font-weight:800;z-index:2}.packet{position:absolute;font:12px var(--mono);padding:.4rem;border:2px solid var(--ink)}.p1{top:15%;left:3%;background:white;transform:rotate(-8deg)}.p2{right:0;top:2%;background:var(--coral);transform:rotate(9deg)}.truth-list{margin:2rem 0}.truth-list p{padding:.75rem 0;border-bottom:1px solid var(--line);margin:0}.truth-list span{color:var(--deep);font-weight:800;margin-right:.5rem}.warning{background:#f0eadb;border-left:5px solid var(--coral);padding:1rem}.glossary{border-top:1px solid var(--line)}.glossary-grid{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}details{border-bottom:1px solid var(--line);padding:1rem 0}.glossary-grid details:nth-child(odd){padding-right:2rem;border-right:1px solid var(--line)}.glossary-grid details:nth-child(even){padding-left:2rem}summary{display:flex;justify-content:space-between;cursor:pointer;font-size:1.05rem;font-weight:700;list-style:none}summary b{font:400 1.4rem var(--mono)}details[open] summary b{transform:rotate(45deg)}details p{margin:.7rem 2rem 0 0;color:#566058}.recap{text-align:center;background:var(--coral)}.recap h2{font-size:clamp(2rem,5vw,5rem);line-height:1.2;letter-spacing:-.05em}.recap h2 span{text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:7px}.button.dark{background:var(--ink)}footer{background:var(--ink);color:#cdd5cf;display:flex;justify-content:space-between;padding:2rem clamp(1.2rem,7vw,8rem);font-size:.8rem}
@media(max-width:950px){.hero{grid-template-columns:1fr;padding-top:9rem}.hero-visual{height:410px}.journey-layout,.dns-section,.https{grid-template-columns:1fr}.journey-map{overflow-x:auto;padding:1rem}.concept-grid{grid-template-columns:1fr 1fr}.deploy-flow{grid-template-columns:1fr}.flow-arrow{height:60px;transform:rotate(90deg)}.deploy-flow p{min-height:auto}.dns-section,.https{gap:4rem}}@media(max-width:620px){.site-header nav{display:none}.hero{padding-bottom:3rem}.hero-visual{height:330px}.browser-card{height:230px}.browser-page{height:184px}.orbit-one{width:340px;height:290px}.orbit-two{width:270px;height:340px}.section-pad{padding-top:5rem;padding-bottom:5rem}.journey-map{align-items:flex-start}.journey-node{min-width:72px}.journey-node span{width:48px;height:48px}.journey-node small{display:none}.connector{margin-top:23px}.concept-grid{grid-template-columns:1fr}.url-detail{align-items:flex-start;flex-direction:column;gap:.5rem}.glossary-grid{grid-template-columns:1fr}.glossary-grid details:nth-child(n){padding-left:0;padding-right:0;border-right:0}.git-note{grid-template-columns:1fr}.lock-visual{transform:scale(.8);margin:-3rem}.https{gap:1rem}footer{flex-direction:column}.hero h1 em{white-space:normal}}
@media(prefers-reduced-motion:no-preference){.float-tag{animation:float 4s ease-in-out infinite}.tag-https{animation-delay:-1.3s}.tag-git{animation-delay:-2.6s}@keyframes float{50%{translate:0 -10px}}}