:root{color-scheme:light;--color-background:#f1f5f9;--color-surface:#fff;--color-surface-muted:#f8fafc;--color-text:#0f172a;--color-muted:#475569;--color-border:#64748b;--color-border-subtle:#cbd5e1;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-cyan:#0891b2;--color-green:#16a34a;--color-orange:#ea580c;--color-violet:#7c3aed;--color-blue-soft:#eff6ff;--color-cyan-soft:#ecfeff;--color-green-soft:#f0fdf4;--color-orange-soft:#fff7ed;--color-violet-soft:#f5f3ff;--color-focus:#c2410c;--color-error:#b42318;--content-width:72rem;--radius-small:.375rem;--radius-medium:.75rem;--shadow-surface:0 .75rem 2rem #17203314;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem}*{box-sizing:border-box}body{background:var(--color-background);color:var(--color-text);margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:1rem;line-height:1.5}img{max-width:100%;display:block}button,input{font:inherit}button{border:0}[hidden]{display:none!important}.visually-hidden{clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.skip-link{top:var(--space-3);left:var(--space-3);z-index:100;max-width:calc(100vw - 1.5rem);min-height:2.75rem;padding:var(--space-2) var(--space-4);transform:translateY(calc(-100% - var(--space-3)));border:2px solid var(--color-focus);border-radius:var(--radius-small);background:var(--color-surface);color:var(--color-text);align-items:center;font-weight:700;text-decoration:none;display:inline-flex;position:fixed}.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}a{color:var(--color-accent)}a:hover{color:var(--color-accent-hover)}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:.2rem solid var(--color-focus);outline-offset:.2rem}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.2}h1{max-width:15ch;margin-bottom:var(--space-4);letter-spacing:-.04em;font-size:clamp(2.25rem,5vw,3.5rem)}h2{margin-bottom:var(--space-3);font-size:clamp(1.5rem,3vw,2.25rem)}h3{margin-bottom:var(--space-2);font-size:1.25rem}code{overflow-wrap:anywhere;word-break:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.container{width:min(100% - 2rem, var(--content-width));margin-inline:auto}.site-header{z-index:10;border-bottom:1px solid var(--color-border-subtle);background:var(--color-surface);position:relative}.site-header__inner{align-items:center;gap:var(--space-3);min-height:4rem;display:flex}.site-header__brand{min-width:0;color:var(--color-text);align-items:center;gap:.375rem;font-weight:750;text-decoration:none;display:inline-flex}.site-header__brand span{max-width:7rem;line-height:1.15}.site-header__mark{width:1.75rem;height:1.75rem;color:var(--color-accent);fill:var(--color-blue-soft);stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;flex:none}.site-header__desktop-nav{margin-left:auto;display:none}.site-header__nav-list,.site-header__mobile-list{margin:0;padding:0;list-style:none}.site-header__nav-list{align-items:center;gap:var(--space-2);display:flex}.site-header__nav-list a,.site-header__mobile-list a{color:var(--color-muted);font-weight:650;text-decoration:none}.site-header__nav-list a{min-height:2.75rem;padding-inline:var(--space-3);border-radius:var(--radius-small);align-items:center;display:inline-flex}.site-header__nav-list a:hover,.site-header__mobile-list a:hover{color:var(--color-accent-hover);background:var(--color-blue-soft)}.site-header__nav-list a[aria-current=page],.site-header__mobile-list a[aria-current=page]{color:var(--color-accent-hover)}.site-header__mobile-nav{margin-left:auto;position:relative}.site-header__mobile-nav summary{min-height:2.75rem;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-small);color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;font-weight:700;list-style:none;display:flex}.site-header__mobile-nav summary::-webkit-details-marker{display:none}.site-header__mobile-nav[open] summary{border-color:var(--color-accent);background:var(--color-blue-soft)}.site-header__mobile-nav nav{top:calc(100% + var(--space-2));width:min(16rem,100vw - 2rem);padding:var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--radius-medium);background:var(--color-surface);box-shadow:var(--shadow-surface);position:absolute;right:0}.site-header__mobile-list a{min-height:2.75rem;padding-inline:var(--space-3);border-radius:var(--radius-small);align-items:center;display:flex}main{display:block}.hero{border-bottom:1px solid var(--color-border-subtle);background:var(--color-blue-soft);padding-block:clamp(1.5rem,4vw,3.5rem)}#calculator,#how-it-works,#cidr-guide,#subnet-results-guide,#faq{scroll-margin-top:var(--space-4)}.calculator__layout{align-items:center;gap:clamp(1.25rem,4vw,3rem);display:grid}.hero__content{max-width:38rem}.hero__eyebrow{margin-bottom:var(--space-2);color:var(--color-accent-hover);letter-spacing:.08em;text-transform:uppercase;font-size:.875rem;font-weight:750}.hero__description{max-width:38rem;margin-bottom:var(--space-3);color:var(--color-muted);font-size:clamp(1.0625rem,2vw,1.25rem)}.hero__note{align-items:center;gap:var(--space-2);color:var(--color-muted);margin-bottom:0;font-size:.9375rem;display:flex}.hero__note-indicator{border:2px solid var(--color-surface);background:var(--color-green);width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--color-green);border-radius:50%}.calculator__panel{border:1px solid var(--color-border-subtle);border-radius:var(--radius-medium);background:var(--color-surface);min-width:0;box-shadow:var(--shadow-surface);padding:clamp(1rem,3vw,1.5rem)}.calculator__form{margin:0}fieldset{border:0;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--space-4);font-weight:700}.calculator__fields{gap:var(--space-4);display:grid}.field-group{min-width:0}.field-group label{margin-bottom:.375rem;font-weight:650;display:block}.field-group input{width:100%;min-height:3rem;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface);color:var(--color-text)}.field-group input::placeholder{color:var(--color-muted);opacity:1}.field-help{color:var(--color-muted);margin:.375rem 0 0;font-size:.875rem}.field-error{margin:var(--space-2) 0 0;color:var(--color-error);font-size:.9375rem}.field-group input[aria-invalid=true]{border:2px solid var(--color-error)}.calculator-error-summary{margin:0 0 var(--space-4);padding:var(--space-4);border:1px solid var(--color-error);border-radius:var(--radius-small);background:#fff7f5;border-left-width:.25rem}.calculator-error-summary:focus-visible{outline:.2rem solid var(--color-focus);outline-offset:.2rem}.calculator-error-summary h3{margin-bottom:var(--space-2)}.calculator-error-summary ul{padding-left:var(--space-5);margin:0}button[type=submit]{width:100%;min-height:3rem;margin-top:var(--space-4);padding:var(--space-3) var(--space-5);border-radius:var(--radius-small);background:var(--color-accent);color:#fff;font-weight:700}button[type=submit]:disabled{color:#fff;cursor:not-allowed;opacity:1;background:#475569;border:1px solid #475569}button[type=submit]:not(:disabled):hover{background:var(--color-accent-hover)}.calculator__status,.noscript-message{margin:var(--space-2) 0 0;color:var(--color-muted);font-size:.9375rem}.noscript-message{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-left:.25rem solid var(--color-border);background:var(--color-surface-muted);display:block}.results-placeholder{margin-top:var(--space-8)}#results-title:focus-visible{outline:.2rem solid var(--color-focus);outline-offset:.2rem}.result-section{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border)}.result-section:first-child:not(.result-section--quick){border-top:0;margin-top:0;padding-top:0}.result-section--quick,.result-section--addressing,.result-section--masks,.result-section--capacity,.result-section--navigation{min-width:0;padding:var(--space-5);border:1px solid var(--color-border-subtle);border-radius:var(--radius-medium);border-left-width:.25rem}.result-section--quick,.result-section--addressing{border-left-color:var(--color-accent);background:var(--color-blue-soft)}.result-section--masks{border-left-color:var(--color-violet);background:var(--color-violet-soft)}.result-section--capacity{border-left-color:var(--color-green);background:var(--color-green-soft)}.result-section--navigation{border-left-color:var(--color-orange);background:var(--color-orange-soft)}.result-section--navigation>.result-section__title{color:var(--color-focus)}.result-section__title{margin-bottom:var(--space-4)}.quick-results{gap:var(--space-3);grid-template-columns:minmax(0,1fr);margin:0;display:grid}.quick-result-card{min-width:0;padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-small);background:var(--color-surface)}.quick-result-card__label{margin-bottom:var(--space-2);color:var(--color-muted);font-size:.875rem;font-weight:650}.quick-result-card__value{min-width:0;color:var(--color-text);overflow-wrap:anywhere;margin:0;font-size:clamp(1rem,2vw,1.25rem);font-weight:700}.quick-result-card__value code{overflow-wrap:anywhere}.quick-result-card__context{color:var(--color-muted);margin-top:.375rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.8125rem;font-weight:500;display:block}.result-metadata{gap:var(--space-3);margin:0 0 var(--space-5);grid-template-columns:minmax(0,1fr);display:grid}.result-metadata__item{min-width:0;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-small);background:var(--color-surface)}.result-metadata__item .result-field__label{font-size:.875rem}.result-fields--addressing{padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.adjacent-subnets{gap:var(--space-4);grid-template-columns:minmax(0,1fr);display:grid}.adjacent-subnet-card{min-width:0;max-width:100%;padding:var(--space-4);border:1px solid var(--color-border-subtle);border-top:.25rem solid var(--color-orange);border-radius:var(--radius-small);background:var(--color-surface)}.adjacent-subnet-card__title{margin:0 0 var(--space-3);color:var(--color-text);font-size:1rem;line-height:1.3}.adjacent-subnet-card__value{min-width:0;max-width:100%;color:var(--color-text);overflow-wrap:anywhere;margin:0;font-size:1.0625rem;font-weight:700}.adjacent-subnet-card__value--null{color:var(--color-muted)}.adjacent-subnet-card__actions{margin-top:var(--space-4)}.adjacent-subnet-card__actions .result-navigation-button{flex-grow:1}.result-fields{gap:var(--space-3);margin:0;display:grid}.result-field{min-width:0}.result-field__label{color:var(--color-muted);font-weight:650}.result-field__value{min-width:0;color:var(--color-text);overflow-wrap:anywhere;margin:0}.result-field__value--copyable{align-items:baseline;gap:var(--space-3);flex-wrap:wrap;display:flex}.result-field__actions{align-items:baseline;gap:var(--space-2);flex-wrap:wrap;min-width:0;max-width:100%;display:flex}.result-value{overflow-wrap:anywhere}.result-value--technical{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.result-field__value--null{color:var(--color-muted)}.result-copy-button,.result-navigation-button{min-height:2.75rem;padding:var(--space-2) var(--space-3);border-radius:var(--radius-small);cursor:pointer;font-weight:650}.result-copy-button{padding:var(--space-2) .625rem;border:1px solid var(--color-border-subtle);color:var(--color-accent-hover);background:0 0;flex:none;font-weight:600}.result-copy-button:hover{border-color:var(--color-accent);background:var(--color-blue-soft)}.result-copy-button:disabled{cursor:wait;opacity:.7}.result-navigation-button{border:1px solid var(--color-accent);background:var(--color-accent);color:#fff;overflow-wrap:anywhere;text-align:center;flex:0 auto;min-width:0;max-width:100%}.result-navigation-button:hover{background:var(--color-accent-hover)}.classification-results.result-section--classification{min-width:0;max-width:100%;margin-top:var(--space-8);padding:var(--space-5);border:1px solid var(--color-border-subtle);border-left:.25rem solid var(--color-cyan);border-radius:var(--radius-medium);background:var(--color-cyan-soft)}.classification-results__title{margin-bottom:var(--space-4)}.classification-summary{min-width:0;padding:var(--space-4);border-radius:var(--radius-small);color:var(--color-text);background:#f0fdff;border:1px solid #67e8f9}.classification-summary__fields{gap:var(--space-3);grid-template-columns:minmax(0,1fr);margin:0;display:grid}.classification-summary__item{min-width:0;padding:var(--space-3);border-radius:var(--radius-small);background:var(--color-surface);border:1px solid #a5f3fc}.classification-summary__item--specialPurposeName{border-left:.25rem solid #0e7490}.classification-summary__label{color:#155e75;font-size:.875rem;font-weight:700}.classification-summary__value{min-width:0;color:var(--color-text);overflow-wrap:anywhere;margin:.25rem 0 0;font-weight:700}.classification-details{min-width:0;max-width:100%;margin-top:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface-muted)}.classification-details__summary{min-width:0;min-height:2.75rem;padding:var(--space-3) var(--space-4);color:var(--color-text);cursor:pointer;overflow-wrap:anywhere;font-weight:700}.classification-details[open]>.classification-details__summary{border-bottom:1px solid var(--color-border-subtle);background:var(--color-surface)}.classification-section{min-width:0;max-width:100%;margin:0 var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--color-border)}.classification-details>.classification-section:first-of-type{border-top:0}.classification-details>.classification-section:last-child{padding-bottom:var(--space-5)}.classification-section__title{margin-bottom:var(--space-4)}.classification-records{gap:var(--space-6);display:grid}.classification-record{overflow-wrap:anywhere;min-width:0;max-width:100%}.classification-record__title{margin:0 0 var(--space-3);font-weight:700}.classification-empty{color:var(--color-muted);margin:0}.classification-list{padding-left:var(--space-5);overflow-wrap:anywhere;margin:0}.editorial-content{padding-block:var(--space-12)}.editorial-section+.editorial-section{margin-top:var(--space-12)}.editorial-section__content{max-width:72ch}.editorial-section__content>:last-child,.results-guide__item>:last-child,.faq-item>:last-child{margin-bottom:0}.editorial-section ol{padding-left:var(--space-6);margin:0}.editorial-section li+li{margin-top:var(--space-2)}.editorial-note{margin-top:var(--space-5)}.results-guide,.faq-list{gap:var(--space-5);display:grid}.results-guide{margin-top:var(--space-6)}.results-guide__item{padding-top:var(--space-5);border-top:1px solid var(--color-border-subtle)}.faq-list{margin-top:var(--space-6)}.faq-item{min-width:0;padding:var(--space-5);border:1px solid var(--color-border-subtle);border-radius:var(--radius-medium);background:var(--color-surface)}.example-list{gap:var(--space-2) var(--space-4);grid-template-columns:max-content 1fr;max-width:24rem;margin:0;display:grid}.example-list dt{color:var(--color-muted)}.example-list dd{margin:0}.site-footer{border-top:1px solid var(--color-border);background:var(--color-surface)}.site-footer__inner{gap:var(--space-6);padding-block:var(--space-8);display:grid}.site-footer__brand{max-width:32rem}.site-footer__brand-link,.site-footer__navigation a{align-items:center;min-height:2.75rem;text-decoration:none;display:inline-flex}.site-footer__brand-link{color:var(--color-text);font-weight:700}.site-footer__brand-link:hover,.site-footer__navigation a:hover{color:var(--color-accent-hover)}.site-footer__description{margin:var(--space-2) 0 0;color:var(--color-muted)}.site-footer__navigation-list{gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.site-footer__navigation a{color:var(--color-muted);font-weight:650}.site-footer__bottom{padding-block:var(--space-4);border-top:1px solid var(--color-border-subtle)}.site-footer__copyright{color:var(--color-muted);margin-block:0;font-size:.875rem}.not-found-page{min-height:100svh;padding:var(--space-6) var(--space-4);place-items:center;display:grid}.not-found-page>section{width:min(100%,40rem);padding:clamp(var(--space-6), 8vw, var(--space-12));border:1px solid var(--color-border-subtle);border-radius:var(--radius-medium);background:var(--color-surface);box-shadow:var(--shadow-surface);text-align:center}.not-found-page__brand{margin-bottom:var(--space-8);font-weight:700}.not-found-page__code{margin-bottom:var(--space-2);color:var(--color-accent);font-size:clamp(3rem,16vw,6rem);font-weight:800;line-height:1}.not-found-page h1{max-width:none;margin-inline:auto}.not-found-page__action{max-width:100%;min-height:2.75rem;margin-top:var(--space-4);padding:var(--space-3) var(--space-5);border-radius:var(--radius-small);background:var(--color-accent);color:var(--color-surface);text-align:center;overflow-wrap:anywhere;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.not-found-page__action:hover{background:var(--color-accent-hover);color:var(--color-surface)}@media (width>=30rem){.site-header__brand{gap:var(--space-2)}.site-header__brand span{max-width:none}}@media (width>=32rem){.calculator__fields{grid-template-columns:minmax(0,1fr) minmax(9rem,10rem);align-items:start}}@media (width>=40rem){.quick-results{grid-template-columns:repeat(2,minmax(0,1fr))}.result-metadata{grid-template-columns:repeat(3,minmax(0,1fr))}.classification-summary__fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=48rem){.container{width:min(100% - 4rem, var(--content-width))}.site-footer__inner{grid-template-columns:minmax(0,1fr) auto;align-items:start}.site-footer__navigation-list{justify-content:flex-end}.site-header__desktop-nav{display:block}.site-header__mobile-nav{display:none}.result-field{gap:var(--space-4);grid-template-columns:minmax(12rem,1fr) minmax(0,2fr);align-items:baseline;display:grid}.adjacent-subnets{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=70rem){.quick-results{grid-template-columns:repeat(4,minmax(0,1fr))}.classification-summary__fields{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=60rem){.calculator__layout{grid-template-columns:minmax(0,.9fr) minmax(30rem,1.1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}}
