@font-face{font-family:Geist;src:url("assets/Geist.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#eff5fa;--muted:#a5b6c6;--canvas:#11161c;--surface:#19232d;--border:#364858;--ice:#b9e6ff;--accent:#93d4ff;--error:#ffacb5;font-family:Geist,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--canvas);color:var(--ink)}
main{flex:1}
[hidden]{display:none!important}
h1,h2,p{margin:0}
h1{font-weight:645;font-size:clamp(2.5rem,5.3vw,4.85rem);line-height:1.04;letter-spacing:-.065em}
h2{font-weight:635;font-size:clamp(1.28rem,2.2vw,2rem);line-height:1.14;letter-spacing:-.032em}
p{line-height:1.57}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.58}
a,button,input{outline-offset:4px}
:focus-visible{outline:2px solid var(--accent)}
.shell{width:min(1120px,calc(100% - 4rem));margin-inline:auto}
.site-header{background:var(--canvas)}
.header-row{display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-size:1.25rem;font-weight:730;letter-spacing:-.045em}
.brand img{object-fit:contain}
nav{display:flex;align-items:center;gap:clamp(.7rem,3vw,1.6rem);font-size:.94rem;font-weight:580}
nav a:hover,.brand:hover,.site-footer a:hover,.detail-link:hover{color:var(--ice)}
nav a[aria-current=page]{color:var(--ice)}
.nav-app{padding:.57rem .8rem;border:1px solid var(--border);border-radius:6px}
.nav-app:hover{background:#263746}
.skip-link{position:absolute;top:.6rem;left:.6rem;z-index:4;padding:.65rem;background:var(--ice);color:#101b24;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.action,.quiet{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:44px;padding:.66rem .95rem;border:1px solid transparent;border-radius:6px;font-size:.95rem;font-weight:660;transition:background-color .15s,color .15s,border-color .15s}
.action{background:var(--ice);color:#122132;border-color:var(--ice)}
.action:hover:not(:disabled){background:#d8f0ff;border-color:#d8f0ff}
.quiet{background:#253340;color:var(--ink);border-color:var(--border);white-space:nowrap}
.quiet:hover:not(:disabled){background:#344859;border-color:#5e7e97}
.hero{padding-block:clamp(2.9rem,8vw,6.7rem) clamp(1.25rem,4vw,3rem)}
.hero h1{font-size:clamp(2.85rem,7.25vw,6.2rem)}
.hero h1 span{color:var(--ice)}
.hero-copy p{margin-block:1.25rem 1.55rem;max-width:42ch;color:var(--muted);font-size:clamp(1rem,1.8vw,1.18rem)}
.hero-diagram{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:1rem;min-height:clamp(138px,19vw,216px);margin-top:clamp(2.2rem,6vw,4.75rem);padding:1.5rem clamp(.85rem,5.2vw,3.6rem);border:1px solid #263746;border-radius:8px;background:radial-gradient(ellipse at 53% 49%,#24394b,#19232d 66%);font-weight:625}
.hero-diagram::before{position:absolute;z-index:-1;inset:0;background:radial-gradient(circle,#5a7a94 1px,transparent 1.4px) 0 0/12px 12px;mask-image:linear-gradient(90deg,transparent,#000 28% 70%,transparent);opacity:.25;content:""}
.diagram-source,.diagram-target{z-index:1;justify-self:start;padding:.35rem .55rem;border-radius:4px;background:#19232d}
.diagram-target{grid-column:3;justify-self:end}
.diagram-terminal{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:86px;height:86px;border-radius:18px;background:#131f2b;border:1px solid #506a82;transform:translate(-50%,-50%)}
.diagram-terminal img{width:62px;height:62px;object-fit:contain}
.diagram-path{position:absolute;left:19%;right:19%;height:28%;border:1px solid #5d8bab;opacity:.9}
.path-upper{top:28%;border-bottom:0;border-radius:12px 12px 0 0}
.path-lower{bottom:28%;border-top:0;border-radius:0 0 12px 12px}
.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.35rem,4vw,3.2rem);padding-block:1.3rem 4.5rem}
.process h2{font-size:1.19rem}
.process p{color:var(--muted);margin-top:.6rem;max-width:36ch}
.work{display:grid;grid-template-columns:minmax(190px,.75fr) minmax(0,1.25fr);gap:1.2rem 3rem;align-content:start;align-items:start;padding-block:clamp(2.2rem,6vw,5.2rem) 4rem}
.work-intro h1,.guide-intro h1{font-size:clamp(2.35rem,5.2vw,4.15rem)}
.work-intro p,.guide-intro p{margin-top:1rem;color:var(--muted);max-width:38ch}
.detail-link{display:inline-block;margin-top:1.2rem;color:var(--ice);font-weight:620}
.lookup{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:clamp(1rem,3.2vw,1.8rem)}
.lookup form{display:grid;gap:1.2rem}
.lookup .action{justify-self:start}
.control{display:grid;gap:.5rem}
.control label,.network legend{font-weight:635;font-size:.93rem}
.optional{margin-left:.4rem;color:var(--muted);font-size:.81rem;font-weight:490}
.network{min-width:0;border:0;padding:0;margin:0}
.network legend{padding:0;margin-bottom:.55rem}
.network label{position:relative;display:inline-flex;margin:0 .35rem .32rem 0}
.network input{position:absolute;inset:0;opacity:0;margin:0}
.network span{display:block;padding:.53rem .73rem;border:1px solid var(--border);border-radius:5px;color:var(--muted);font-size:.86rem;font-weight:625;cursor:pointer}
.network input:checked+span{color:var(--ice);border-color:#83adca;background:#263c50}
.network input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.owner-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem}
.control input{min-width:0;width:100%;border:1px solid var(--border);border-radius:6px;padding:.68rem .77rem;background:#131c25;color:var(--ink)}
.control input::placeholder{color:#9caebf}
.status,#results,#review-panel{grid-column:2;min-width:0}
.status{min-height:1.55em;color:var(--muted);overflow-wrap:anywhere}
.status[data-state=error]{color:var(--error)}
.status a{color:var(--ice)}
.position-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:start;gap:.62rem;padding:.9rem 0;border-bottom:1px solid var(--border)}
.position-card input{margin-top:.28rem;accent-color:var(--ice)}
.position-card output{text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.position-card p,#review-content p{color:var(--muted)}
#more,.review-actions{margin-top:1rem}
#review-content{margin-block:.85rem 1rem}
#review-content p{overflow-wrap:anywhere;margin-bottom:.6rem}
.documentation{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;padding-block:clamp(2.6rem,8vw,6rem) 4rem}
.guide-sections{display:grid;gap:1.8rem}
.guide-sections h2{font-size:1.27rem}
.guide-sections p{color:var(--muted);margin-top:.55rem}
.guide-sections a{color:var(--ice);font-weight:620}
.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.7rem;padding-block:1.65rem;border-top:1px solid #263746;color:var(--muted);font-size:.86rem}
@media(max-width:760px){
  .shell{width:calc(100% - 2.2rem)}
  .header-row{min-height:68px}
  .work,.documentation{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .status,#results,#review-panel{grid-column:1}
  .process{grid-template-columns:minmax(0,1fr);padding-bottom:3rem}
}
@media(max-width:445px){
  .shell{width:calc(100% - 1.65rem)}
  .hero h1{font-size:clamp(2.1rem,9.3vw,3rem)}
  .diagram-terminal{width:58px;height:58px;border-radius:13px}
  .diagram-terminal img{width:40px;height:40px}
  .diagram-source,.diagram-target{font-size:.73rem;padding:.28rem .36rem}
  .owner-row{grid-template-columns:minmax(0,1fr)}
  .owner-row button{justify-self:start}
  .position-card{grid-template-columns:auto minmax(0,1fr)}
  .position-card output{grid-column:2;text-align:left}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001s!important}}