/* Self-hosted Latin variable fonts; licenses and source URLs are in assets/fonts. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
}
:root{color-scheme:light;--bg:#f8fafc;--surface:#fff;--field-bg:#fff;--placeholder:#9aa8b8;--ink:#0f172a;--muted:#536478;--line:#dce5ed;--accent:#087f99;--tint:#e7f8fc;--error:#b42335;--shadow:0 12px 40px #0f172a06}html.dark{color-scheme:dark;--bg:#080f1b;--surface:#101b2b;--field-bg:#17263b;--placeholder:#718096;--ink:#edf4fa;--muted:#a2b1c3;--line:#28364a;--accent:#67e8f9;--tint:#152f3b;--error:#ff9ca8;--shadow:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Space Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--accent);text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.skip{position:absolute;top:-100px;left:20px;z-index:10;background:var(--surface);padding:12px}.skip:focus{top:12px}.topbar{border-bottom:1px solid var(--line);background:var(--surface)}.nav{max-width:1160px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{color:var(--ink);text-decoration:none;font-weight:750;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}.brand img{width:30px;height:30px}.navlinks{display:flex;gap:22px;align-items:center}.navlinks a{text-decoration:none;font-size:14px}.navlinks [aria-current]{color:var(--ink);font-weight:650}.theme{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;padding:7px 12px;font-size:13px}main{max-width:1160px;margin:auto;padding:44px 28px 80px}.crumb{font-size:13px;color:var(--muted);margin-bottom:28px}.crumb a{text-decoration:none}.eyebrow{font:600 11px/1.5 "JetBrains Mono",ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}h1{font-size:clamp(32px,5vw,48px);line-height:1.15;letter-spacing:-1.6px;margin:12px 0 16px}h2{font-size:21px;letter-spacing:-.5px;margin:0 0 12px}h3{font-size:16px;margin:0 0 10px}.intro{max-width:660px;margin:0;color:var(--muted)}.hero{margin-bottom:34px}.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:20px}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card,.panel,.result-box{border:1px solid var(--line);background:var(--surface);border-radius:16px;box-shadow:var(--shadow)}.card{padding:28px;display:flex;flex-direction:column;align-items:flex-start}.card p{color:var(--muted);font-size:14px;flex:1}.card h2 a{color:var(--ink);text-decoration:none}.icon{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--accent);display:grid;place-items:center;margin-bottom:24px}.icon svg{width:24px;height:24px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 22px}.chips a{font-size:12px;text-decoration:none;background:var(--tint);border-radius:6px;padding:4px 9px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px;overflow-x:auto}.tabs button{color:var(--muted);border:0;border-bottom:3px solid transparent;background:none;padding:12px 20px;white-space:nowrap}.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);font-weight:650}.workspace{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0,1.1fr);gap:22px;align-items:start}.panel{padding:26px;min-width:0}.panel.wide{margin-top:22px}.section-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:18px}.help{font-size:13px;color:var(--muted);margin:8px 0 20px}.field{margin:0 0 20px}.field label,.field-label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}input:not([type=checkbox]),select,textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--field-bg);color:var(--ink);padding:11px 12px;min-width:0}input.mono,.mono,code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}input[aria-invalid=true]{border-color:var(--error)}.input-pair{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}.buttons{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:22px}.button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.button.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}.button.subtle{background:var(--bg)}.example{border:0;background:none;padding:4px 0;font-size:12px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.error{color:var(--error);font-size:13px;margin:16px 0 0;min-height:0}.empty{padding:48px 12px;text-align:center;color:var(--muted);font-size:14px}.empty strong{display:block;font-size:26px;color:var(--line);margin-bottom:10px}.result-title{font-size:24px;letter-spacing:-.8px;overflow-wrap:anywhere;color:var(--accent);margin-bottom:14px}.kv{margin:0}.kv div{display:grid;grid-template-columns:1fr 1.25fr;gap:16px;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px}.kv div:last-child{border:0}.kv dt{color:var(--muted)}.kv dd{margin:0;text-align:right;overflow-wrap:anywhere;font-family:"JetBrains Mono",ui-monospace,monospace}.note{font-size:12px;color:var(--muted);padding:14px 16px;background:var(--tint);border-radius:9px;margin-top:20px}.request{display:grid;grid-template-columns:minmax(0,1fr) 100px 34px;gap:8px;margin-bottom:10px;align-items:end}.request label{font-size:11px;color:var(--muted);display:block}.request button{padding:9px 0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{color:var(--muted);font-size:11px;font-weight:650;white-space:nowrap}th,td{padding:12px 10px;border-bottom:1px solid var(--line)}td{white-space:nowrap}td:first-child{white-space:normal;min-width:110px;overflow-wrap:anywhere}td .button{padding:5px 8px;font-size:11px}.list{margin:0;padding:0;list-style:none}.list li{padding:8px 0;border-bottom:1px solid var(--line);font-family:"JetBrains Mono",ui-monospace,monospace}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}.checks label,.check{display:flex;align-items:center;gap:10px}input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}.password-output{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(20px,3vw,28px);overflow-wrap:anywhere;white-space:pre-wrap;padding:24px 0;line-height:1.6;user-select:all;min-height:100px}.feedback{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100% - 32px);border:1px solid var(--line);background:var(--ink);color:var(--surface);border-radius:12px;padding:12px 20px;font-size:13px;box-shadow:0 8px 30px #0002}.copy-fallback{position:fixed;inset:20% 16px auto;max-width:600px;margin:auto;z-index:21;border:2px solid var(--accent);background:var(--surface);padding:24px;border-radius:16px}.copy-fallback textarea{min-height:140px}.duration{font-size:32px;line-height:1.3;letter-spacing:-1px;color:var(--accent);margin:8px 0}.footer{border-top:1px solid var(--line);padding:25px 28px;color:var(--muted);font-size:12px}.footer>div{max-width:1104px;margin:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer a{text-decoration:none}.faq{margin-top:36px;max-width:760px}.faq p{font-size:14px;color:var(--muted)}@media(max-width:900px){.cards{grid-template-columns:1fr}.card{padding:24px}.card p{max-width:600px}.workspace{grid-template-columns:1fr}.nav{padding:16px 20px}.navlinks{gap:14px}.hero{margin-bottom:26px}main{padding:30px 20px 56px}}@media(max-width:420px){.navlinks{gap:10px}.navlinks a{font-size:12px}.brand{font-size:14px}.brand img{width:25px;height:25px}.theme{padding:6px 8px;font-size:12px}.panel{padding:20px}.tabs button{padding:12px 15px}.checks{grid-template-columns:1fr}.kv div{grid-template-columns:1fr 1.1fr;gap:8px}.request{grid-template-columns:minmax(0,1fr) 80px 30px}}

#plan-vlsm,#vlsm-export{margin-top:10px}.table-wrap:focus-visible{outline-offset:-3px}

/* Portfolio navigation: glass pill, ring monogram and icon-only theme control. */
body{padding-top:80px}.skip{z-index:100}.topbar{position:fixed;inset:0 0 auto;z-index:50;border:0;background:transparent}.nav{max-width:1280px;padding:16px 40px;gap:20px;min-height:76px;transition:padding .3s ease,background .3s ease}.topbar.scrolled>.nav{padding-top:10px;padding-bottom:10px;background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;font-weight:400;letter-spacing:1px;gap:8px;flex-shrink:0}.brand-dot{color:var(--accent)}.brand-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:50%;color:var(--accent);font-weight:700;letter-spacing:0}.brand-mark:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--tint)}.brand-mark>span{position:relative}.portfolio-nav{display:flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.portfolio-link{padding:6.4px 15.2px;font-size:13.2px;color:var(--muted);border-radius:999px;text-decoration:none;white-space:nowrap;transition:color .3s,background .3s}.portfolio-link:hover{color:var(--accent)}.portfolio-link.active{color:var(--accent);background:var(--tint)}.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.theme{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--muted);transition:color .3s,border-color .3s}.theme:hover{color:var(--accent);border-color:var(--accent)}.theme svg{width:17px;height:17px}html:not(.dark) .theme-icon-dark,html.dark .theme-icon-light{display:none}.nav-contact{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;border-radius:999px;background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent);transition:color .3s,background .3s}.nav-contact svg{width:13px;height:13px}.nav-contact:hover{background:var(--accent);color:var(--bg)}.menu-toggle{display:none;border:0;background:none;color:var(--ink);padding:7px;width:38px;height:38px;align-items:center;justify-content:center}.menu-toggle svg{width:24px;height:24px}.menu-toggle[aria-expanded=false] .menu-close-icon,.menu-toggle[aria-expanded=true] .menu-open-icon{display:none}.tools-mobile-menu{padding:16px 24px;display:flex;flex-direction:column;gap:8px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);max-height:calc(100dvh - 76px);overflow-y:auto}.portfolio-mobile-link{padding:9.6px 8px;font-size:15.2px;color:var(--muted);border-left:2px solid transparent;text-decoration:none;transition:color .3s,padding .3s}.portfolio-mobile-link:hover,.portfolio-mobile-link.active{color:var(--accent);border-left-color:var(--accent);padding-left:16px}@media(max-width:1199px){.nav{padding:16px 24px}.portfolio-nav,.nav-contact{display:none}.menu-toggle{display:inline-flex}}@media(prefers-reduced-motion:reduce){.nav,.portfolio-link,.theme,.nav-contact,.portfolio-mobile-link{transition:none}}

/* Compact headings across all tool pages; compact cards on the directory. */
main{padding-top:28px}
.crumb{margin-bottom:20px}
.hero{margin-bottom:24px}
.hero h1{font-size:clamp(26px,3vw,32px);letter-spacing:-1px;margin:0 0 8px}
.hero .intro{font-size:14px}
body[data-tool="home"] .card{padding:22px}
body[data-tool="home"] .card .icon{width:36px;height:36px;border-radius:10px;margin-bottom:16px}
body[data-tool="home"] .card .icon svg{width:20px;height:20px}
body[data-tool="home"] .card h2{font-size:18px;margin-bottom:8px}
body[data-tool="home"] .card p{font-size:14px;margin:0 0 16px;flex:initial}
body[data-tool="home"] .chips{margin:0 0 16px}

/* Stretch each title link over its card; keep shortcut links independently usable. */
body[data-tool="home"] .card{position:relative;isolation:isolate;transition:border-color .2s ease,box-shadow .2s ease}
body[data-tool="home"] .card:hover{border-color:var(--accent);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 10%,transparent)}
body[data-tool="home"] .card h2 a::after{content:"";position:absolute;inset:0;border-radius:16px}
body[data-tool="home"] .card h2 a:focus-visible{outline:none}
body[data-tool="home"] .card h2 a:focus-visible::after{outline:3px solid var(--accent);outline-offset:4px}
body[data-tool="home"] .chips a{position:relative;z-index:1}
body[data-tool="home"] .card .chips,body[data-tool="home"] .card p:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){body[data-tool="home"] .card{transition:none}}

/* Keep the prefix, mask and usable-host count readable in narrow selectors. */
#subnet-mask{font-family:"Space Grotesk",system-ui,sans-serif;font-size:13px}

input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}