: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}}

/* Site enhancements */
.intro-photo{display:flex;align-items:center;gap:24px;max-width:780px;margin:30px 0;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:18px}.intro-photo img{width:145px;height:145px;object-fit:cover;object-position:center 22%;border-radius:15px}.intro-photo strong{font-size:1.2rem}.intro-photo p{margin:6px 0 10px;color:var(--muted)}.profile-photo{width:min(100%,350px);height:290px;object-fit:cover;object-position:center 20%;border-radius:16px;margin-bottom:22px;border:1px solid var(--border)}.blog-search{display:flex;align-items:center;gap:16px;margin:24px 0}.blog-search input{width:min(100%,450px)}.lookup-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.lookup-form input{min-width:190px;flex:1}.lookup-form label{font-size:.9rem}.lookup-form select{min-width:95px}.lookup-form .run{white-space:nowrap}.contact-card{max-width:760px}.contact-card .field{margin-bottom:14px}.contact-card textarea{width:100%;min-height:135px;resize:vertical;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);padding:12px}.hidden-hp{position:absolute!important;left:-99999px!important;opacity:0}.repo-card{display:block;min-width:0}.repo-card h3{overflow-wrap:anywhere}.code-snippet{position:relative;margin:18px 0}.code-snippet pre{overflow:auto;white-space:pre-wrap;background:var(--surface2);padding:18px;border-radius:10px;border:1px solid var(--border)}.copy-code{margin:8px 0}.section:target{scroll-margin-top:90px}@media(max-width:640px){.intro-photo{flex-direction:column;align-items:flex-start}.intro-photo img{width:100%;height:240px;object-position:center 23%}.lookup-form{display:grid}.blog-search{flex-direction:column;align-items:stretch}}
[hidden]{display:none!important}

/* 2026 portfolio homepage inspired by the supplied reference */
:root{--accent:#25d6f1;--accent2:#58d7ed}
.top{background:#0c121b}.hero-portrait-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,0.95fr);align-items:center;gap:clamp(24px,5vw,90px);padding:65px max(6vw,28px) 75px;min-height:650px;background:#0c121b;max-width:none}.hero-copy{max-width:760px}.hero-portrait-layout .eyebrow{color:#59d7e9;font-size:12px;letter-spacing:3px}.hero-portrait-layout h1{font-size:clamp(48px,5.1vw,80px);line-height:1.12;letter-spacing:-2.5px;margin:0 0 14px;font-weight:800}.hero-name{white-space:normal}.hero-role{font-size:clamp(26px,2.7vw,39px);line-height:1.25;color:#3ad4f2;margin:0 0 30px}.hero-portrait-layout p{font-size:clamp(17px,1.3vw,21px);line-height:1.9;max-width:670px;color:#c0cbd9}.hero-portrait-layout .button{border-radius:5px;background:#1cdbef;color:#06111a;box-shadow:0 0 18px #16cfe85c;font-size:14px;letter-spacing:.4px}.hero-portrait-layout .button.outline{background:transparent;color:#d7e9f4;border:1px solid #2d5164;box-shadow:none}.hero-portrait-wrap{display:flex;justify-content:center;align-items:center;min-width:0}.hero-portrait-glow{width:min(100%,580px);aspect-ratio:1;border:6px solid #44d5f2;border-radius:50%;overflow:hidden;box-shadow:0 0 14px #37d9f2a0,0 0 58px #0bd5f53b;background:#e6e9e7}.hero-portrait-glow img{display:block;width:100%;height:100%;object-fit:cover;object-position:42% 18%}.hero-socials{display:flex;gap:24px;margin-top:25px}.hero-socials a{font-size:16px;font-weight:700;color:#46d7ee}.hero-socials a:hover{text-decoration:underline}body.light .hero-portrait-layout{background:#0c121b;color:#f0f7ff}body.light .hero-portrait-layout p{color:#c0cbd9}@media(max-width:950px){.hero-portrait-layout{grid-template-columns:1fr;gap:48px;padding:60px 7vw}.hero-portrait-wrap{grid-row:1}.hero-portrait-glow{width:min(75vw,420px)}.hero-copy{text-align:center;margin:auto}.hero-copy .actions,.hero-socials{justify-content:center}}@media(max-width:600px){.hero-portrait-layout{padding:35px 20px 60px}.hero-portrait-glow{width:min(78vw,350px);border-width:4px}.hero-portrait-layout h1{font-size:clamp(39px,9vw,58px)}.hero-portrait-layout p{font-size:16px}.hero-portrait-layout .actions{justify-content:center}}

/* Compact circular portrait matching the supplied reference */
@media(min-width:951px){
.hero-portrait-layout{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(24px,4vw,70px);min-height:590px;padding-top:58px;padding-bottom:58px}
.hero-portrait-glow{width:min(100%,430px);border-width:4px}
.hero-portrait-layout h1{font-size:clamp(44px,4.7vw,72px)}
}
@media(min-width:601px) and (max-width:950px){.hero-portrait-glow{width:min(65vw,360px)}}
@media(max-width:600px){.hero-portrait-glow{width:min(67vw,270px)}}

/* Centered portfolio hero with the user's approved cartoon avatar */
body{background-color:#0a071c;background-image:radial-gradient(circle at 50% 20%,rgba(34,33,90,.36),transparent 52%),radial-gradient(1px 1px at 10% 15%,#8b94bc 98%,transparent),radial-gradient(1px 1px at 27% 44%,#8b94bc 98%,transparent),radial-gradient(1px 1px at 72% 22%,#8b94bc 98%,transparent),radial-gradient(1px 1px at 88% 69%,#8b94bc 98%,transparent);background-size:auto,280px 260px,350px 310px,420px 370px,300px 330px}
.hero-avatar-layout{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:22px;min-height:690px;padding:72px 22px 90px;max-width:none;background:transparent}
.hero-avatar-layout .hero-portrait-glow{width:clamp(210px,25vw,315px);border:3px solid #36ccef;box-shadow:0 0 20px #26d8f65e,0 0 65px #0bd5f52a;background:#0b091e}
.hero-avatar-layout .hero-portrait-glow img{object-fit:cover;object-position:center}
.hero-avatar-layout .hero-copy{max-width:770px;display:flex;align-items:center;flex-direction:column}
.hero-avatar-layout h1{font-size:clamp(38px,5vw,66px);margin:0 0 8px;line-height:1.15;letter-spacing:-2px}
.hero-avatar-layout .hero-name{background:linear-gradient(100deg,#5194ff,#2ce7e4);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-avatar-layout .hero-role{font-size:clamp(26px,3vw,37px);color:#edf3ff;margin:0 0 12px}
.hero-avatar-layout p{margin:0;max-width:690px;color:#b6bdd4;font-size:18px;line-height:1.7}
.hero-avatar-layout .actions,.hero-avatar-layout .hero-socials{justify-content:center}
.hero-avatar-layout .actions{margin-top:24px}
.hero-avatar-layout .hero-socials{margin-top:20px}
@media(max-width:650px){.hero-avatar-layout{padding:48px 20px 75px;min-height:auto}.hero-avatar-layout .hero-portrait-glow{width:min(66vw,260px)}.hero-avatar-layout p{font-size:16px}}
@media(prefers-reduced-motion:no-preference){.hero-avatar-layout .hero-portrait-glow{animation:avatarGlow 4s ease-in-out infinite alternate}@keyframes avatarGlow{to{box-shadow:0 0 28px #26d8f6a0,0 0 75px #0bd5f54d}}}

/* Compact portrait beside the homepage introduction */
.hero-avatar-layout{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:28px;align-items:center;text-align:left;justify-content:initial;min-height:390px;padding:70px max(7vw,24px);max-width:1250px;margin:auto}
.hero-avatar-layout .hero-copy{grid-column:1;grid-row:1;align-items:flex-start;text-align:left;max-width:760px}
.hero-avatar-layout .hero-portrait-wrap{grid-column:2;grid-row:1;justify-content:center}
.hero-avatar-layout .hero-portrait-glow{width:145px;max-width:145px;border-width:3px;flex-shrink:0}
.hero-avatar-layout .actions,.hero-avatar-layout .hero-socials{justify-content:flex-start}
/* About: small thumbnail floated beside the introduction rather than a large portrait */
.portfolio .profile-photo{width:112px!important;height:112px!important;max-width:112px!important;aspect-ratio:1;object-fit:cover;border-radius:50%;float:left;margin:0 22px 12px 0;display:block}
.portfolio>div:first-child::after{content:"";display:block;clear:both}
@media(max-width:650px){.hero-avatar-layout{grid-template-columns:minmax(0,1fr) 95px;gap:14px;padding:45px 20px;min-height:0}.hero-avatar-layout .hero-portrait-glow{width:94px;max-width:94px}.hero-avatar-layout h1{font-size:clamp(30px,7vw,42px)}.hero-avatar-layout .hero-role{font-size:22px}.hero-avatar-layout p{font-size:15px}.portfolio .profile-photo{width:88px!important;height:88px!important;max-width:88px!important;margin-right:15px}}

/* Portrait sized to match the introduction's text block */
@media(min-width:651px){
 .hero-avatar-layout{grid-template-columns:minmax(0,1fr) minmax(260px,310px);gap:clamp(24px,4vw,65px)}
 .hero-avatar-layout .hero-portrait-glow{width:300px;max-width:100%;border-width:3px}
}
@media(max-width:650px){
 .hero-avatar-layout{grid-template-columns:minmax(0,1fr) 145px;gap:16px}
 .hero-avatar-layout .hero-portrait-glow{width:140px;max-width:140px}
}
@media(max-width:420px){.hero-avatar-layout{grid-template-columns:1fr}.hero-avatar-layout .hero-portrait-wrap{grid-column:1;grid-row:1;justify-content:flex-start}.hero-avatar-layout .hero-copy{grid-row:2}.hero-avatar-layout .hero-portrait-glow{width:145px;max-width:145px}}