:root{--bg:#0a1019;--surface:#111c2a;--surface2:#152337;--text:#eaf2fc;--muted:#93a6ba;--border:#26394e;--accent:#4ee0bc;--accent2:#8ac9ff;--shadow:#050b12}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Inter,Segoe UI,Arial,sans-serif}body.light{--bg:#f4f8fb;--surface:#fff;--surface2:#eaf1f6;--text:#162537;--muted:#52677d;--border:#cfdae5;--accent:#087f69;--accent2:#245fa8;--shadow:#a6b4c1}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.top{height:80px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;background:var(--bg)}.brand{display:flex;gap:12px;align-items:center;font-size:20px;font-weight:900;letter-spacing:1px;line-height:1}.brand small{display:block;font-size:9px;color:var(--muted);letter-spacing:2px;margin-top:8px}.logo{background:var(--accent);color:var(--bg);border-radius:10px;padding:13px;font-size:26px}.accent{color:var(--accent)}nav{display:flex;gap:28px}nav a{color:var(--muted);font-size:14px}nav a:hover,.textlink:hover{color:var(--accent)}.ghost{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:9px;padding:8px 13px}.hero{min-height:610px;padding:110px max(7vw,24px) 75px;background:radial-gradient(ellipse at 83% 32%,rgba(49,122,140,.19),transparent 40%),linear-gradient(145deg,var(--bg),var(--surface));border-bottom:1px solid var(--border)}.eyebrow{font:700 12px/1.4 Consolas,monospace;letter-spacing:2px;color:var(--accent);margin-bottom:16px}.hero h1{font-size:clamp(44px,6.5vw,86px);line-height:1.09;letter-spacing:-3px;margin:0 0 24px;max-width:850px}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{color:var(--muted);max-width:600px;font-size:18px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-block;background:var(--accent);color:#08151b;padding:12px 20px;border-radius:9px;font-weight:750}.button.outline{background:transparent;border:1px solid var(--border);color:var(--text)}.metrics{display:flex;gap:58px;margin-top:60px}.metrics span{display:grid}.metrics strong{font-size:27px}.metrics small{font-size:10px;letter-spacing:1px;color:var(--muted)}.section{padding:90px max(7vw,24px);max-width:1550px;margin:auto;scroll-margin-top:80px}.section h2{font-size:clamp(35px,4vw,56px);letter-spacing:-2px;margin:0}.section>p,.sectionhead p{color:var(--muted);margin:5px 0 28px}.sectionhead{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}input,select,textarea{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:12px 14px;border-radius:8px}#toolSearch{max-width:290px}.toolgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card,.toolcard,.workspace{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:24px}.toolcard{text-align:left;color:var(--text);min-height:185px;transition:transform .15s,border-color .15s}.toolcard:hover{transform:translateY(-3px);border-color:var(--accent)}.toolicon{display:block;font-size:28px;margin-bottom:15px}.toolcard strong{display:block;line-height:1.3}.toolcard small{display:block;color:var(--muted);margin-top:8px}.workspace{margin-top:20px;padding:28px}.workspacehead{display:flex;align-items:center;justify-content:space-between}.workspacehead h3{margin:0 0 20px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.result{padding:18px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.8 Consolas,monospace;min-height:70px}.run{border:0;background:var(--accent);color:#061913;padding:11px 18px;border-radius:8px;font-weight:700;margin:0 10px 14px 0}.muted{color:var(--muted);font-size:13px}.cards{display:grid;gap:18px}.three{grid-template-columns:repeat(3,1fr)}.tag{color:var(--accent);font:700 11px Consolas,monospace;letter-spacing:1px}.card h3{font-size:21px;line-height:1.35}.card p{color:var(--muted)}.textlink{color:var(--accent);border:0;background:none;padding:0;font-weight:700;text-align:left}.lab,.portfolio{display:grid;grid-template-columns:1fr 1fr;gap:28px}.labdiagram{background:var(--surface);border:1px solid var(--border);padding:35px 20px;border-radius:13px;display:flex;align-items:center;flex-direction:column}.node{padding:12px 18px;border:1px solid var(--border);border-radius:8px;text-align:center;background:var(--surface2);font:700 12px Consolas,monospace;min-width:115px}.node small{color:var(--muted)}.wan{color:var(--accent)}.router{border-color:var(--accent)}.switch{border-color:var(--accent2)}.line{height:27px;width:2px;background:var(--border)}.branches{display:flex;gap:12px}.labnotes{padding:22px}.labnotes li{margin:10px 0;color:var(--muted)}.lead{font-size:22px!important;color:var(--text)!important}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.chips span{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px}.portfolio .card{display:flex;flex-direction:column;align-items:start}footer{padding:30px max(7vw,24px);border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}footer>span:first-child{font-weight:900;color:var(--text)}@media(max-width:1050px){.toolgrid{grid-template-columns:repeat(3,1fr)}nav{gap:13px}}@media(max-width:720px){.top{height:auto;min-height:76px;flex-wrap:wrap;padding:15px 20px;gap:12px}nav{order:3;width:100%;overflow-x:auto;gap:18px}.hero{padding-top:80px;min-height:0}.hero h1{letter-spacing:-2px}.metrics{gap:20px;justify-content:space-between}.section{padding:60px 20px}.toolgrid{grid-template-columns:repeat(2,1fr)}.three,.lab,.portfolio{grid-template-columns:1fr}.sectionhead{display:block}#toolSearch{max-width:none}.formgrid{grid-template-columns:1fr}.branches{gap:5px}.node{min-width:0;padding:10px 8px;font-size:10px}footer{flex-direction:column}.toolcard{padding:17px;min-height:160px}}@media(max-width:380px){.toolgrid{grid-template-columns:1fr}}

/* Expanded homelab and editorial sections */
.moreposts{margin-top:1rem}.lab-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.topology{margin:1.4rem 0}.topology-title{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.topology-stack{display:flex;align-items:center;flex-direction:column;margin:1.5rem auto;max-width:760px;text-align:center}.topology-box{border:1px solid #4b6380;border-radius:12px;background:#18283d;color:#f2f6ff;padding:1rem 1.3rem;min-width:210px;font-weight:700}.topology-box.edge{border-color:#d69b58}.topology-box.core{border-color:#4ec9bd}.topology-arrow{color:#83adce;padding:.4rem}.topology-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;margin-top:1rem}.topology-path{display:flex;align-items:center;flex-direction:column;gap:.6rem;color:#8fc5dc}.topology-path .topology-box{min-width:0;width:100%;font-size:.88rem}.topology-path small{color:#9aadc4}.subheading{margin:2rem 0 1rem}.tablewrap{overflow-x:auto}.vlantable{width:100%;border-collapse:collapse;min-width:540px}.vlantable th,.vlantable td{text-align:left;padding:1rem;border-bottom:1px solid #4a5565}.vlantable th{color:#86cfda}.lab-disclaimer{margin-top:1.5rem}.lab-disclaimer p{margin-bottom:0}body.light .topology-box{background:#e8f0f8;color:#16283a}body.light .topology-path small{color:#465568}body.light .vlantable th{color:#136c7c}@media(max-width:750px){.lab-overview{grid-template-columns:1fr}.topology-branches{gap:.4rem}.topology-path .topology-box{font-size:.7rem;padding:.7rem .3rem}.topology-box{min-width:0}.topology-path small{font-size:.65rem}}

/* JR technology identity */
.brandmark{height:48px;width:48px;object-fit:cover;border-radius:11px;border:1px solid #1e4e78;background:#07111f;flex-shrink:0}
.hero-banner{width:100%;max-width:1250px;margin:0 auto 36px;border-radius:18px;overflow:hidden;border:1px solid #173456;box-shadow:0 24px 65px rgba(0,0,0,.28);background:#061122}
.hero-banner img{display:block;width:100%;height:auto}
@media(max-width:720px){.brandmark{height:42px;width:42px}.hero-banner{margin-bottom:28px;border-radius:10px}}