:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --blue:#2457ff;
  --yellow:#ffd400;
  --red:#ff3b30;
  --green:#0aa66f;
  --line:#d6d6d6;
  --gray:#717171;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
button{border-radius:0}
.shell{width:min(1400px,calc(100% - 48px));margin:0 auto}
.topbar{height:72px;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100% - 1400px)/2));border-bottom:2px solid var(--black);background:var(--white);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.08em}
.brand-mark{display:flex;gap:3px;align-items:center}
.brand-mark i{width:6px;height:6px;background:var(--black);display:block}
.brand-mark i:nth-child(2){background:var(--blue)}
.brand-mark i:nth-child(3){background:var(--yellow)}
.topbar nav{margin-left:auto;display:flex;gap:24px}
.topbar nav a{text-decoration:none;font-size:12px;font-weight:800}
.soundless{border:2px solid var(--black);background:var(--white);padding:9px 12px;font-size:10px;font-weight:900;letter-spacing:.05em;cursor:pointer}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;margin:0 0 14px}
.eyebrow.light{color:var(--white)}
.hero{min-height:calc(100vh - 72px);background:var(--black);color:var(--white);position:relative;border-bottom:2px solid var(--black)}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;min-height:calc(100vh - 130px);align-items:center;padding:70px 0 92px}
.hero-copy h1{font-size:clamp(58px,7.8vw,132px);line-height:1;letter-spacing:-.075em;margin:0;max-width:790px}
.hero-copy h1 span{color:var(--yellow)}
.lede{font-size:18px;line-height:1.55;max-width:650px;color:#d0d0d0;margin:30px 0 34px}
.url-bar{border-top:2px solid var(--white);padding-top:18px;max-width:720px}
.url-bar label{display:block;font-size:9px;letter-spacing:.15em;font-weight:900;margin-bottom:9px}
.url-entry{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:stretch;border:2px solid var(--white)}
.scheme{display:flex;align-items:center;padding-left:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:#9d9d9d}
.url-entry input{min-width:0;border:0;background:var(--black);color:var(--white);outline:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;padding:15px 10px 15px 2px}
.url-entry button{border:0;border-left:2px solid var(--white);background:var(--yellow);color:var(--black);font-size:10px;font-weight:900;letter-spacing:.07em;padding:0 18px;cursor:pointer}
.url-bar small{display:block;font-size:10px;line-height:1.5;color:#9b9b9b;margin-top:9px}
.hero-browser{border:2px solid var(--white);background:var(--white);color:var(--black);box-shadow:18px 18px 0 var(--blue)}
.browser-chrome{height:54px;display:grid;grid-template-columns:100px 1fr 70px;align-items:center;border-bottom:2px solid var(--black)}
.window-dots{display:flex;gap:6px;padding-left:16px}
.window-dots i{width:8px;height:8px;background:var(--black);border-radius:50%}
.window-dots i:nth-child(2){background:var(--red)}
.window-dots i:nth-child(3){background:var(--yellow)}
.fake-address{height:30px;border:1px solid var(--black);display:flex;align-items:center;padding:0 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;overflow:hidden;white-space:nowrap}
.fake-address span{color:#777}
.browser-menu{text-align:center;font-weight:900}
.hero-stage{min-height:520px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:var(--white)}
.hero-stage:after{content:"";position:absolute;right:-45px;top:70px;width:230px;height:230px;border:30px solid var(--blue);border-radius:50%;z-index:0}
.cursor-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;position:relative;z-index:2}
.cursor-line span:first-child{color:var(--blue);font-weight:900}
.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.hero-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px;position:relative;z-index:2}
.mini-node{border:2px solid var(--black);padding:18px 8px;text-align:center;font-size:9px;font-weight:900;letter-spacing:.08em;background:var(--white)}
.mini-node.active{background:var(--yellow)}
.hero-flow>span{text-align:center;font-weight:900}
.hero-caption{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;border-top:8px solid var(--black);padding-top:16px}
.hero-caption b{font-size:34px;letter-spacing:-.04em}
.hero-caption span{font-size:13px;color:#555}
.scroll-cue{position:absolute;bottom:22px;left:max(24px,calc((100% - 1400px)/2));text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.13em}
.journey{padding:110px 0 130px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}
.section-heading h2{font-size:clamp(48px,6vw,92px);line-height:.88;letter-spacing:-.06em;margin:0}
.section-heading>p{max-width:560px;margin:0;font-size:14px;line-height:1.6;color:#595959}
.journey-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border:2px solid var(--black);border-bottom:0;padding:16px 18px}
.request-tag{display:flex;align-items:center;gap:14px;min-width:0}
.request-tag span{font-size:9px;font-weight:900;letter-spacing:.13em}
.request-tag strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journey-controls{display:flex;gap:8px}
.ghost-btn,.black-btn,.continue-btn,.explode-btn{min-height:42px;padding:0 15px;border:2px solid var(--black);font-size:10px;font-weight:900;letter-spacing:.06em;cursor:pointer}
.ghost-btn{background:var(--white);color:var(--black)}
.black-btn,.continue-btn{background:var(--black);color:var(--white)}
.network-shell{border:2px solid var(--black);background:var(--white);position:relative;overflow:hidden}
.network-map{display:block;width:100%;height:auto;min-height:500px;background:var(--white)}
.route-line{fill:none;stroke:var(--black);stroke-width:2;stroke-dasharray:9 10}
.route-secondary{stroke:#aaa}
.map-node rect{fill:var(--white);stroke:var(--black);stroke-width:2;transition:fill .18s ease,stroke .18s ease}
.map-node text{text-anchor:middle;font-size:15px;font-weight:900;letter-spacing:.04em;pointer-events:none}
.map-node .node-sub{font-size:9px;letter-spacing:.12em;fill:#666}
.map-node.active rect{fill:var(--yellow);stroke:var(--black)}
.map-node.done rect{fill:var(--black)}
.map-node.done text{fill:var(--white)}
.map-node.done .node-sub{fill:#cfcfcf}
.map-node[data-step="3"].active rect{fill:var(--blue)}
.map-node[data-step="3"].active text,.map-node[data-step="3"].active .node-sub{fill:var(--white)}
.map-node[data-step="4"].active rect{fill:var(--red)}
.map-node[data-step="4"].active text,.map-node[data-step="4"].active .node-sub{fill:var(--white)}
.map-node[data-step="7"].active rect{fill:var(--green)}
.map-node[data-step="7"].active text,.map-node[data-step="7"].active .node-sub{fill:var(--white)}
.packet circle{fill:var(--yellow);stroke:var(--black);stroke-width:2}
.packet .packet-core{fill:var(--black);stroke:none}
.network-status{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;background:var(--black);color:var(--white);padding:11px 13px;max-width:520px}
.network-status span{background:var(--yellow);color:var(--black);font-size:8px;font-weight:900;letter-spacing:.12em;padding:6px 7px}
.network-status strong{font-size:10px;line-height:1.35}
.stage-panel{display:grid;grid-template-columns:130px 1fr 220px;border:2px solid var(--black);border-top:0;min-height:260px}
.stage-number{font-size:86px;font-weight:900;letter-spacing:-.07em;line-height:1;padding:24px 20px;border-right:2px solid var(--black);background:var(--yellow)}
.stage-copy{padding:26px 30px}
.stage-kicker{font-size:9px;font-weight:900;letter-spacing:.14em;margin:0 0 10px}
.stage-copy h3{font-size:34px;letter-spacing:-.04em;margin:0 0 12px}
.stage-explain{font-size:15px;line-height:1.6;max-width:760px;margin:0;color:#434343}
.stage-detail{margin-top:22px;padding-top:14px;border-top:1px solid var(--black);display:grid;grid-template-columns:180px 1fr;gap:16px}
.stage-detail span{font-size:8px;letter-spacing:.13em;font-weight:900}
.stage-detail p{margin:0;font-size:12px;line-height:1.55;color:#555}
.stage-side{border-left:2px solid var(--black);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.stage-code{background:var(--black);color:var(--white);padding:14px;min-height:88px}
.stage-code span{display:block;color:var(--yellow);font-size:8px;letter-spacing:.14em;font-weight:900;margin-bottom:10px}
.stage-code code{font-size:12px;word-break:break-word}
.continue-btn:disabled{background:#aaa;border-color:#aaa;cursor:not-allowed}
.stage-list{display:grid;grid-template-columns:repeat(8,1fr);border:2px solid var(--black);border-top:0}
.stage-chip{padding:13px 10px;border-right:1px solid var(--black);background:var(--white);text-align:left;cursor:pointer;min-height:72px}
.stage-chip:last-child{border-right:0}
.stage-chip span{display:block;font-size:8px;color:#666;margin-bottom:5px}
.stage-chip b{font-size:9px;letter-spacing:.04em}
.stage-chip.active{background:var(--yellow)}
.stage-chip.done{background:var(--black);color:var(--white)}
.stage-chip.done span{color:#aaa}
.arrival{background:var(--blue);color:var(--white);border-top:2px solid var(--black);border-bottom:2px solid var(--black)}
.arrival-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;padding:110px 0}
.arrival-copy h2{font-size:clamp(50px,6vw,92px);line-height:.9;letter-spacing:-.06em;margin:0 0 24px}
.arrival-copy>p:not(.eyebrow){font-size:16px;line-height:1.65;color:#dfe5ff;max-width:600px}
.yellow-link{display:inline-block;margin-top:22px;background:var(--yellow);color:var(--black);text-decoration:none;padding:15px 18px;font-size:10px;font-weight:900;letter-spacing:.08em;border:2px solid var(--black)}
.result-browser{background:var(--white);color:var(--black);border:2px solid var(--black);box-shadow:18px 18px 0 var(--black)}
.result-top{height:46px;border-bottom:2px solid var(--black);display:flex;align-items:center;gap:6px;padding:0 12px}
.result-dot{width:8px;height:8px;border:1px solid var(--black);border-radius:50%}
.result-dot:nth-child(1){background:var(--red)}
.result-dot:nth-child(2){background:var(--yellow)}
.result-dot:nth-child(3){background:var(--green)}
.result-url{margin-left:12px;border:1px solid var(--black);padding:7px 11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;flex:1}
.mock-site{min-height:500px;padding:24px;display:flex;flex-direction:column;gap:28px}
.mock-nav{display:flex;justify-content:space-between;gap:20px;font-size:9px;border-bottom:1px solid var(--black);padding-bottom:12px}
.mock-hero{display:grid;grid-template-columns:1fr .9fr;position:relative;align-items:end;min-height:250px;background:var(--yellow);padding:22px;border:2px solid var(--black);overflow:hidden}
.mock-hero span{align-self:start;font-size:8px;font-weight:900;letter-spacing:.13em}
.mock-hero strong{grid-row:2;font-size:56px;line-height:.8;letter-spacing:-.07em;position:relative;z-index:2}
.mock-hero i{position:absolute;width:160px;height:160px;border:28px solid var(--blue);right:24px;top:46px;border-radius:50%}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--black)}
.mock-grid div{padding:18px;border-right:2px solid var(--black);min-height:90px;display:flex;flex-direction:column;justify-content:space-between}
.mock-grid div:last-child{border-right:0}
.mock-grid small{font-size:8px;color:#666}
.mock-grid b{font-size:18px}
.explode{padding:120px 0 140px}
.explode-controls{display:flex;gap:10px;margin-bottom:24px}
.explode-btn{background:var(--yellow);color:var(--black)}
.explode-stage{min-height:740px;border:2px solid var(--black);position:relative;overflow:hidden;background:var(--white)}
.page-core{position:absolute;left:50%;top:50%;width:min(480px,46%);transform:translate(-50%,-50%);border:2px solid var(--black);background:var(--white);z-index:4;transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .45s ease}
.core-browser-bar{height:38px;border-bottom:2px solid var(--black);display:flex;align-items:center;gap:5px;padding:0 10px}
.core-browser-bar i{width:7px;height:7px;background:var(--black);border-radius:50%}
.core-browser-bar span{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px}
.core-body{min-height:310px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:var(--yellow)}
.core-body p{font-size:8px;font-weight:900;letter-spacing:.14em;margin:0}
.core-body h3{font-size:50px;line-height:.9;letter-spacing:-.06em;margin:40px 0}
.core-blocks{display:grid;grid-template-columns:1fr .7fr 1.2fr;gap:8px}
.core-blocks span{height:42px;background:var(--black)}
.core-blocks span:nth-child(2){background:var(--blue)}
.core-blocks span:nth-child(3){background:var(--red)}
.part-card{position:absolute;width:210px;min-height:120px;border:2px solid var(--black);background:var(--white);padding:16px;text-align:left;cursor:pointer;z-index:3;opacity:0;transform:translate(-50%,-50%) scale(.6);left:50%;top:50%;transition:left .65s cubic-bezier(.2,.75,.2,1),top .65s cubic-bezier(.2,.75,.2,1),transform .65s cubic-bezier(.2,.75,.2,1),opacity .3s ease,background .15s ease,color .15s ease}
.part-card span{display:block;font-size:8px;margin-bottom:20px;color:#666}
.part-card b{display:block;font-size:22px;letter-spacing:-.03em;margin-bottom:5px}
.part-card small{font-size:10px;color:#666}
.explode-stage.exploded .page-core{transform:translate(-50%,-50%) scale(.78);opacity:.18}
.explode-stage.exploded .part-card{opacity:1;transform:translate(-50%,-50%) scale(1)}
.explode-stage.exploded .part-html{left:15%;top:19%}
.explode-stage.exploded .part-css{left:50%;top:14%}
.explode-stage.exploded .part-js{left:84%;top:20%}
.explode-stage.exploded .part-images{left:16%;top:78%}
.explode-stage.exploded .part-fonts{left:50%;top:85%}
.explode-stage.exploded .part-api{left:84%;top:78%}
.part-card:hover,.part-card.selected{background:var(--black);color:var(--white)}
.part-card:hover span,.part-card:hover small,.part-card.selected span,.part-card.selected small{color:#bdbdbd}
.part-card.part-css:hover,.part-card.part-css.selected{background:var(--blue)}
.part-card.part-js:hover,.part-card.part-js.selected{background:var(--yellow);color:var(--black)}
.part-card.part-js:hover span,.part-card.part-js:hover small,.part-card.part-js.selected span,.part-card.part-js.selected small{color:#555}
.part-card.part-api:hover,.part-card.part-api.selected{background:var(--red)}
.part-explainer{display:grid;grid-template-columns:140px .8fr 1.4fr 260px;gap:20px;align-items:start;border:2px solid var(--black);border-top:0;padding:22px}
.part-explainer>span{font-size:8px;letter-spacing:.13em;font-weight:900}
.part-explainer h3{font-size:26px;letter-spacing:-.04em;margin:0}
.part-explainer p{font-size:12px;line-height:1.55;margin:0;color:#555}
.part-explainer code{background:var(--black);color:var(--yellow);padding:12px;font-size:10px;word-break:break-word}
.learn{background:var(--yellow);border-top:2px solid var(--black);padding:110px 0}
.learn-heading>p{color:#3f3f3f}
.learn-grid{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--black)}
.learn-grid article{padding:24px;min-height:270px;border-right:2px solid var(--black);display:flex;flex-direction:column}
.learn-grid article:last-child{border-right:0}
.learn-grid article>span{font-size:9px;font-weight:900}
.learn-grid h3{font-size:30px;letter-spacing:-.04em;margin:auto 0 10px}
.learn-grid p{font-size:12px;line-height:1.6;margin:0;color:#444}
.source-strip{margin-top:36px;display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;border-top:8px solid var(--black);padding-top:24px}
.source-strip h3{font-size:30px;letter-spacing:-.04em;margin:0}
.source-links{display:grid;border:2px solid var(--black)}
.source-links a{text-decoration:none;padding:15px 16px;border-bottom:1px solid var(--black);font-size:11px;font-weight:800;background:var(--white)}
.source-links a:last-child{border-bottom:0}
.source-links a:hover{background:var(--black);color:var(--white)}
footer{min-height:110px;background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px max(24px,calc((100% - 1400px)/2));font-size:11px}
footer>div:first-child{display:flex;align-items:center;gap:20px}
footer>div:first-child span{color:#8f8f8f}
.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:1100px){
  .hero-grid,.arrival-grid{grid-template-columns:1fr;min-height:0}
  .hero-grid{padding-top:70px}
  .hero-browser{max-width:800px}
  .stage-panel{grid-template-columns:100px 1fr}
  .stage-side{grid-column:1/-1;border-left:0;border-top:2px solid var(--black);display:grid;grid-template-columns:1fr auto;align-items:center}
  .stage-number{font-size:62px}
  .stage-list{grid-template-columns:repeat(4,1fr)}
  .stage-chip:nth-child(4n){border-right:0}
  .stage-chip:nth-child(-n+4){border-bottom:1px solid var(--black)}
  .learn-grid{grid-template-columns:1fr 1fr}
  .learn-grid article:nth-child(2){border-right:0}
  .learn-grid article:nth-child(-n+2){border-bottom:2px solid var(--black)}
  .part-explainer{grid-template-columns:120px 1fr 1.5fr}
  .part-explainer code{grid-column:2/-1}
}
@media(max-width:760px){
  .shell{width:min(100% - 24px,1400px)}
  .topbar{height:60px;padding:0 12px;gap:12px}
  .topbar nav{display:none}
  .brand{font-size:10px}
  .soundless{margin-left:auto;padding:7px 8px;font-size:8px}
  .hero{min-height:0}
  .hero-grid{padding:46px 0 90px;gap:44px}
  .hero-copy h1{font-size:58px}
  .lede{font-size:15px}
  .url-entry{grid-template-columns:auto 1fr}
  .url-entry button{grid-column:1/-1;border-left:0;border-top:2px solid var(--white);min-height:48px}
  .hero-browser{box-shadow:8px 8px 0 var(--blue)}
  .browser-chrome{grid-template-columns:60px 1fr 35px}
  .hero-stage{min-height:390px;padding:20px}
  .hero-flow{grid-template-columns:1fr auto 1fr;row-gap:8px}
  .hero-flow .mini-node:nth-of-type(3),.hero-flow .mini-node:nth-of-type(4),.hero-flow>span:nth-of-type(3){display:none}
  .hero-caption b{font-size:26px}
  .scroll-cue{left:12px}
  .journey{padding:80px 0}
  .section-heading{display:block}
  .section-heading>p{margin-top:16px}
  .section-heading h2{font-size:56px}
  .journey-toolbar{align-items:stretch;flex-direction:column}
  .journey-controls{display:grid;grid-template-columns:1fr 1fr}
  .network-shell{overflow-x:auto}
  .network-map{width:940px;min-height:410px}
  .network-status{position:sticky;left:10px;bottom:10px;width:calc(100vw - 44px)}
  .stage-panel{grid-template-columns:1fr}
  .stage-number{border-right:0;border-bottom:2px solid var(--black);font-size:50px;padding:14px 18px}
  .stage-copy{padding:20px 18px}
  .stage-copy h3{font-size:28px}
  .stage-detail{grid-template-columns:1fr}
  .stage-side{grid-template-columns:1fr}
  .stage-list{grid-template-columns:1fr 1fr}
  .stage-chip{border-bottom:1px solid var(--black)!important}
  .stage-chip:nth-child(2n){border-right:0}
  .arrival-grid{padding:80px 0;gap:44px}
  .arrival-copy h2{font-size:56px}
  .result-browser{box-shadow:8px 8px 0 var(--black)}
  .mock-site{min-height:410px;padding:14px}
  .mock-hero{grid-template-columns:1fr;min-height:210px}
  .mock-hero strong{font-size:44px}
  .mock-hero i{width:110px;height:110px;border-width:20px;right:10px;top:60px}
  .explode{padding:80px 0}
  .explode-stage{min-height:900px}
  .page-core{width:72%}
  .core-body h3{font-size:38px}
  .part-card{width:42%;min-height:108px;padding:12px}
  .explode-stage.exploded .part-html{left:25%;top:13%}
  .explode-stage.exploded .part-css{left:75%;top:13%}
  .explode-stage.exploded .part-js{left:25%;top:79%}
  .explode-stage.exploded .part-images{left:75%;top:79%}
  .explode-stage.exploded .part-fonts{left:25%;top:94%}
  .explode-stage.exploded .part-api{left:75%;top:94%}
  .explode-stage.exploded .page-core{top:46%}
  .part-explainer{grid-template-columns:1fr}
  .part-explainer code{grid-column:auto}
  .learn{padding:80px 0}
  .learn-grid{grid-template-columns:1fr}
  .learn-grid article{border-right:0;border-bottom:2px solid var(--black)!important;min-height:210px}
  .learn-grid article:last-child{border-bottom:0!important}
  .source-strip{grid-template-columns:1fr}
  footer{align-items:flex-start;flex-direction:column}
  footer>div:first-child{align-items:flex-start;flex-direction:column;gap:6px}
}

/* Three.js journey map */
.journey-3d{display:none;position:relative;height:620px;background:#080808;overflow:hidden;cursor:grab;isolation:isolate}
.journey-3d:active{cursor:grabbing}
.three-ready .journey-3d{display:block}
.three-ready .journey-fallback{display:none}
.network-shell.three-ready{background:#080808;overflow:hidden}
.journey-3d>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:1}
.journey-3d-meta{position:absolute;top:18px;right:18px;z-index:5;display:grid;gap:5px;text-align:right;color:#fff;pointer-events:none}
.journey-3d-meta span{font-size:9px;font-weight:900;letter-spacing:.14em}
.journey-3d-meta strong{font-size:8px;letter-spacing:.1em;color:#a9a9a9;font-weight:800}
.journey-3d-labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.journey-3d-label{position:absolute;left:0;top:0;min-width:94px;background:#fff;color:#0a0a0a;border:2px solid #0a0a0a;padding:7px 9px 8px;box-shadow:4px 4px 0 #0a0a0a;display:grid;gap:1px;transition:background .18s ease,color .18s ease,opacity .12s linear;will-change:transform,opacity}
.journey-3d-label span{font-size:7px;letter-spacing:.14em;font-weight:900;color:#666}
.journey-3d-label strong{font-size:11px;line-height:1.05;letter-spacing:.03em}
.journey-3d-label small{font-size:7px;letter-spacing:.12em;font-weight:800;color:#6d6d6d}
.journey-3d-label.active{background:var(--yellow);color:var(--black);box-shadow:5px 5px 0 var(--blue)}
.journey-3d-label.active span,.journey-3d-label.active small{color:#151515}
.journey-3d-label.done{background:#0a0a0a;color:#fff;border-color:#fff;box-shadow:3px 3px 0 #fff}
.journey-3d-label.done span,.journey-3d-label.done small{color:#bcbcbc}
.three-ready .network-status{z-index:8}

@media(max-width:760px){
  .network-shell.three-ready{overflow:hidden}
  .journey-3d{height:520px}
  .journey-3d-meta{top:12px;right:12px}
  .journey-3d-meta strong{display:none}
  .journey-3d-label{min-width:76px;padding:5px 7px 6px;box-shadow:3px 3px 0 #0a0a0a}
  .journey-3d-label strong{font-size:9px}
  .journey-3d-label span,.journey-3d-label small{font-size:6px}
  .three-ready .network-status{position:absolute;left:10px;right:10px;bottom:10px;width:auto;max-width:none}
}

/* Live Arrival snapshot + 3D page explosion */
.result-top{gap:6px}
.result-open{margin-left:8px;color:var(--black);text-decoration:none;border:1px solid var(--black);padding:7px 9px;font-size:8px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.result-open:hover{background:var(--black);color:var(--white)}
.live-site-preview{position:relative;aspect-ratio:16/10;min-height:440px;background:#111;overflow:hidden}
.live-site-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.015);transition:opacity .4s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.live-site-preview>img.ready{opacity:1;transform:scale(1)}
.snapshot-state,.snapshot-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px;background:#0b0b0b;color:#fff;z-index:2}
.snapshot-state[hidden],.snapshot-fallback[hidden]{display:none}
.snapshot-state b,.snapshot-fallback strong{font-size:12px;letter-spacing:.1em}
.snapshot-state small,.snapshot-fallback span{font-size:10px;line-height:1.55;color:#aaa;max-width:330px}
.snapshot-pulse{width:14px;height:14px;border:3px solid var(--yellow);border-radius:50%;box-shadow:0 0 0 0 rgba(255,210,31,.55);animation:snapshotPulse 1.25s ease-out infinite}
@keyframes snapshotPulse{0%{box-shadow:0 0 0 0 rgba(255,210,31,.55)}100%{box-shadow:0 0 0 18px rgba(255,210,31,0)}}
.snapshot-fallback{background:var(--yellow);color:var(--black)}
.snapshot-fallback span{color:#343434}
.snapshot-meta{min-height:40px;border-top:2px solid var(--black);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;background:#fff;color:#111}
.snapshot-meta span{font-size:8px;font-weight:900;letter-spacing:.12em}
.snapshot-meta small{font-size:8px;color:#666;text-align:right}
.snapshot-ready .snapshot-meta span:before{content:'● ';color:var(--green)}
.snapshot-error .snapshot-meta span:before{content:'● ';color:var(--red)}

.core-live-preview{position:relative;aspect-ratio:16/10;background:#0b0b0b;overflow:hidden}
.core-live-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .3s ease}
.core-live-preview>img.ready{opacity:1}
.core-placeholder{position:absolute;inset:0;background:var(--yellow);display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.core-placeholder[hidden]{display:none}
.core-placeholder p{font-size:8px;font-weight:900;letter-spacing:.14em;margin:0}
.core-placeholder h3{font-size:42px;line-height:.9;letter-spacing:-.055em;margin:auto 0 14px;max-width:360px}
.core-placeholder span{font-size:9px;font-weight:800}

.explode-3d{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .28s ease;background:radial-gradient(circle at 50% 45%,#f8f8f8 0,#fff 55%,#ececec 100%)}
.explode-3d canvas{display:block;width:100%!important;height:100%!important}
.explode-stage.three-explode-ready.exploded .explode-3d{opacity:1}
.explode-stage.three-explode-ready.exploded .page-core{opacity:.02;transform:translate(-50%,-50%) scale(.82)}
.explode-stage.three-explode-ready .part-card{z-index:6}
.explode-stage.three-explode-ready.exploded:after{content:'THE ACTUAL PAGE, BROKEN INTO TILES';position:absolute;left:18px;bottom:16px;z-index:5;font-size:8px;font-weight:900;letter-spacing:.13em;background:#fff;border:1px solid #111;padding:8px 10px}

@media(max-width:760px){
  .result-top{flex-wrap:wrap;height:auto;min-height:50px;padding:8px}
  .result-url{order:2;width:calc(100% - 78px);margin-left:0;flex:auto}
  .result-open{order:2;margin-left:0}
  .live-site-preview{min-height:340px;aspect-ratio:10/11}
  .live-site-preview>img,.core-live-preview>img{object-fit:cover;object-position:top center}
  .snapshot-meta{align-items:flex-start;flex-direction:column;padding:9px 10px}
  .snapshot-meta small{text-align:left}
  .core-placeholder h3{font-size:30px}
  .explode-stage.three-explode-ready.exploded:after{display:none}
}
.explode-btn:disabled,.ghost-btn:disabled,.continue-btn:disabled,.black-btn:disabled{opacity:.42;cursor:not-allowed}
.explode-dom{position:absolute;left:50%;top:50%;width:min(480px,46%);aspect-ratio:16/10;transform:translate(-50%,-50%);z-index:3;opacity:0;pointer-events:none;transition:opacity .25s ease}
.explode-dom-tile{position:absolute;display:block;background-repeat:no-repeat;transform:translate(0,0) rotate(0deg);transition:transform .72s cubic-bezier(.16,.82,.2,1),filter .35s ease;transition-delay:var(--delay);box-shadow:0 0 0 1px rgba(0,0,0,.06);will-change:transform}
.explode-stage.exploded .explode-dom.dom-ready{opacity:1}
.explode-stage.exploded .explode-dom.dom-ready .explode-dom-tile{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));filter:drop-shadow(0 10px 12px rgba(0,0,0,.12))}
.explode-stage.three-explode-ready.exploded .explode-dom{opacity:0}
.reduce-motion .explode-dom-tile{transition:none!important}
@media(max-width:760px){
  .explode-dom{width:70%;top:46%}
  .explode-stage.exploded .explode-dom.dom-ready .explode-dom-tile{transform:translate(calc(var(--tx) * .48),calc(var(--ty) * .48)) rotate(var(--rot))}
}
.live-site-preview,.core-live-preview,.explode-dom{aspect-ratio:36/25}