:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f7fa;--surface:#fff;--soft:#f4f7fb;--ink:#182c42;--ink-soft:#55677e;--muted:#637389;--faint:#a4afbd;--line:#dce4ec;--line-soft:#edf0f5;--field:#fbfcfe;--field-line:#cad5e2;--focus:#80a8fc;--blue:#205cd4;--blue-hover:#184bb0;--blue-soft:#ecf3ff;--blue-ink:#2055b7;--teal:#087b76;--learning-bg:#edf3fb;--learning-line:#dce6f3;--learning-ink:#546a85;--learning-accent:#426ca5;--green-bg:#e8f5ee;--green-line:#cde4da;--green-ink:#086b50;--host-key:#a66117;--host-bg:#fff3e2;--host-ink:#925111;--error-bg:#fff0ef;--error-line:#f0c2be;--error-ink:#a12720;--subnet-bg:#e6f6f4;--subnet-ink:#066660;--diff-line:#d6336c}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0e1622;--surface:#152131;--soft:#1b293b;--ink:#e4ebf3;--ink-soft:#a9b6c6;--muted:#8d9cb0;--faint:#4f6077;--line:#26364b;--line-soft:#213044;--field:#101b29;--field-line:#33465f;--focus:#5b8cf0;--blue:#4a80f0;--blue-hover:#3a6fe0;--blue-soft:#1a2c4a;--blue-ink:#8fb2ff;--teal:#2bb3a9;--learning-bg:#16263b;--learning-line:#243a57;--learning-ink:#a3b8d4;--learning-accent:#7fa2d6;--green-bg:#12302a;--green-line:#1e4a3d;--green-ink:#6fd3ae;--host-key:#e09a4c;--host-bg:#3a2814;--host-ink:#f2b673;--error-bg:#3a1a1a;--error-line:#6b2b28;--error-ink:#ff9f97;--subnet-bg:#0f3532;--subnet-ink:#5fd6cc;--diff-line:#ff6b9a}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}main{max-width:1200px;margin:auto;padding:0 36px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:92px;display:flex}.brand{letter-spacing:-.8px;align-items:center;font-size:21px;font-weight:750;display:flex}.brand-light{color:var(--muted);margin-left:4px;font-weight:400}.brand-icon{background:var(--blue);color:#fff;border-radius:9px;place-items:center;width:34px;height:34px;margin-right:10px;font-size:25px;display:grid}.topbar-actions{align-items:center;gap:18px;display:flex}.theme-toggle{border:1px solid var(--line);background:var(--surface);width:40px;height:40px;color:var(--ink);border-radius:8px;place-items:center;font-size:18px;line-height:1;display:grid}.theme-toggle:hover{background:var(--soft)}.course{letter-spacing:1.5px;color:var(--muted);font-size:11px;font-weight:700}.course span{color:var(--faint);margin:0 12px}.intro{padding:45px 0 32px}.eyebrow{letter-spacing:1.8px;color:var(--muted);margin:0 0 10px;font-size:10px;font-weight:750}.dot{background:var(--teal);border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}h1{letter-spacing:-1.6px;margin:12px 0;font-size:clamp(29px,4vw,43px);line-height:1.2}h1 span{color:var(--blue)}.intro>p:not(.eyebrow){color:var(--muted);margin:12px 0;font-size:16px}.tags{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.tags span{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:5px;padding:3px 9px;font-size:11px}.tool-nav{border-bottom:1px solid var(--line);gap:7px;margin-bottom:26px;display:flex}.tool-nav button{color:var(--muted);background:0 0;border:0;border-bottom:3px solid #0000;padding:14px 18px;font-size:13px;font-weight:700}.tool-nav button span{opacity:.7;margin-right:10px;font-size:10px}.tool-nav button[aria-pressed=true]{color:var(--blue);border-bottom-color:var(--blue);background:var(--blue-soft);border-radius:6px 6px 0 0}.calculator-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:25px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:27px;box-shadow:0 4px 12px #24395203}.section-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}h2{letter-spacing:-.5px;margin:0;font-size:20px;line-height:1.35}h3{margin:0;font-size:14px}.card>p{color:var(--muted);font-size:13px}.step-number{color:var(--faint);font-family:monospace;font-size:26px;font-weight:400}form{margin-top:25px}label{font-size:12px;font-weight:700;display:block}input,select{background:var(--field);border:1px solid var(--field-line);width:100%;height:46px;color:var(--ink);border-radius:6px;margin:8px 0 0;padding:10px 12px;display:block}input{font-family:Consolas,monospace;font-size:15px}select{margin-bottom:24px}input:focus,select:focus{border-color:var(--blue)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.field-hint{color:var(--muted);margin:7px 0 23px;font-size:11px}.actions{gap:10px;margin-top:26px;display:flex}button.primary{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:6px;min-height:44px;padding:11px 18px;font-size:12px;font-weight:700}.actions .primary{flex:1;justify-content:space-between;align-items:center;display:flex}button.primary:hover{background:var(--blue-hover)}.secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);border-radius:6px;min-height:44px;padding:10px 14px;font-size:12px}.secondary:hover{background:var(--bg)}.learning{border:1px solid var(--learning-line);background:var(--learning-bg);border-radius:10px;gap:13px;margin-top:20px;padding:22px;display:flex}.learning p{color:var(--learning-ink);margin:8px 0 12px;font-size:12px}.learning h3{font-size:13px}.learning span:not(.learning-icon){color:var(--learning-ink);font-family:Consolas,monospace;font-size:11px}.learning-icon{border:1px solid var(--learning-accent);min-width:21px;height:21px;color:var(--learning-accent);border-radius:50%;place-items:center;font-family:serif;font-weight:700;display:grid}.network-title{letter-spacing:-1px;font-family:Consolas,monospace;font-size:24px}.network-title span{color:var(--blue)}.pill{background:var(--soft);white-space:nowrap;border-radius:5px;padding:4px 9px;font-size:10px;font-weight:700}.green{color:var(--green-ink);background:var(--green-bg)}.stats{background:var(--soft);border:1px solid var(--line-soft);border-radius:8px;grid-template-columns:1fr 1fr;margin:24px 0 14px;padding:15px 0;display:grid}.stats>div{flex-direction:column;padding:0 20px;display:flex}.stats>div+div{border-left:1px solid var(--line)}.stats strong{overflow-wrap:anywhere;font-family:Consolas,monospace;font-size:25px;line-height:1.3}.stats span{color:var(--muted);font-size:11px}.result-list{margin:0}.result-list>div{border-bottom:1px solid var(--line-soft);justify-content:space-between;gap:16px;padding:9px 10px;font-size:12px;display:flex}.result-list dt{color:var(--ink-soft)}.result-list dd{text-align:right;overflow-wrap:anywhere;margin:0;font-family:Consolas,monospace;font-weight:600}.result-list .highlight{background:var(--blue-soft);border-radius:4px}.highlight dt,.highlight dd{color:var(--blue-ink)}.note{border-top:1px solid var(--line);margin:19px 0 0;padding-top:16px;font-size:12px!important}.fine-print{margin-bottom:0;font-size:10px!important}.binary{margin-top:25px}.binary .eyebrow{color:var(--teal)}.legend{color:var(--muted);flex-wrap:wrap;gap:22px;margin:20px 0;font-size:11px;display:flex}.legend i{border-radius:2px;width:9px;height:9px;margin-right:7px;display:inline-block}.network-key{background:var(--blue)}.host-key{background:var(--host-key)}.binary-scroll{overflow-x:auto}.binary-row{align-items:center;gap:25px;min-width:620px;padding:16px 0;display:flex}.binary-row+.binary-row{border-top:1px solid var(--line-soft)}.binary-row h3{min-width:105px;color:var(--ink-soft);font-size:12px}.octets{flex:1;grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.octet{text-align:center}.decimal{color:var(--ink-soft);margin-bottom:8px;font:12px Consolas,monospace;display:block}.octet code{white-space:nowrap;letter-spacing:1.2px;font:17px Consolas,monospace}.network-bit{color:var(--blue-ink);background:var(--blue-soft)}.host-bit{color:var(--host-ink);background:var(--host-bg)}.empty{text-align:center;flex-direction:column;justify-content:center;min-height:350px;display:flex}.empty>span{color:var(--blue);font-size:42px}.error{background:var(--error-bg);border:1px solid var(--error-line);color:var(--error-ink);border-radius:6px;padding:12px;font-size:13px}.auxiliary{min-height:330px}.form-grid{grid-template-columns:1fr 1fr .5fr;gap:20px;display:grid}.split-fields{grid-template-columns:1fr 1fr}.answer{background:var(--green-bg);color:var(--green-ink);border:1px solid var(--green-line);border-radius:8px;margin-top:24px;padding:18px}.subnets{grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;display:grid}.subnets article{border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:20px}.subnets h3{color:var(--blue);margin:8px 0;font:700 19px Consolas,monospace}.subnets p{color:var(--ink-soft);margin:7px 0;font-size:12px}.subnets code{overflow-wrap:anywhere}.subnet-key{background:var(--teal)}.diff-key{background:var(--diff-line)}.subnet-bit{color:var(--subnet-ink);background:var(--subnet-bg)}.diff-bit{-webkit-text-decoration:underline 2px var(--diff-line);text-decoration:underline 2px var(--diff-line);text-underline-offset:4px;font-weight:700}.explain{margin-top:25px}.explain .eyebrow{color:var(--teal)}.auxiliary .explain{border-top:1px solid var(--line);padding-top:24px}.steps{counter-reset:step;margin:20px 0 0;padding:0;list-style:none}.steps li{counter-increment:step;padding:0 0 18px 42px;position:relative}.steps li:before{content:counter(step, decimal-leading-zero);color:var(--blue-ink);background:var(--blue-soft);border-radius:6px;padding:2px 6px;font:13px Consolas,monospace;position:absolute;top:0;left:0}.steps li+li{border-top:1px solid var(--line-soft);padding-top:16px}.steps li+li:before{top:16px}.steps p{color:var(--ink-soft);margin:6px 0;font-size:13px;line-height:1.6}.steps code,.explain details code{background:var(--soft);border:1px solid var(--line-soft);overflow-wrap:anywhere;border-radius:4px;padding:1px 5px;font-family:Consolas,monospace}.explain details{border:1px solid var(--learning-line);background:var(--learning-bg);border-radius:8px;margin-top:12px;padding:12px 16px;font-size:13px}.explain summary{cursor:pointer;color:var(--learning-accent);font-weight:600}.explain details p{color:var(--learning-ink);margin:10px 0 0;line-height:1.6}footer{border-top:1px solid var(--line);color:var(--ink-soft);justify-content:space-between;gap:15px;margin-top:38px;padding:23px 0 30px;font-size:11px;display:flex}@media (max-width:800px){main{padding:0 20px}.calculator-grid{grid-template-columns:1fr}.tool-nav button{flex:1;padding:13px 10px}.tool-nav button span{display:none}.intro{padding-top:32px}.course{display:none}.form-grid,.subnets{grid-template-columns:1fr}.form-grid select{margin-bottom:0}.form-grid{margin-bottom:20px}.card{padding:22px}.learning{margin-bottom:0}}@media (max-width:430px){main{padding:0 14px}.topbar{height:73px}.brand{font-size:19px}.tool-nav button{font-size:11px}.network-title{font-size:21px}.card{padding:18px}.stats strong{font-size:22px}.stats>div{padding:0 12px}.result-list>div{padding:9px 3px;font-size:11px}.actions{flex-wrap:wrap}.intro h1{font-size:30px}.intro>p:not(.eyebrow){font-size:14px}footer{flex-direction:column;gap:4px}.tags span{font-size:10px}}