.main-container{max-width:1100px;margin:0 auto;padding:40px 20px}.page-title{font-family:var(--calc-font-headline);color:var(--calc-text-primary);margin:0 0 .5rem;font-size:clamp(1.7rem,4vw,2.5rem)}.page-subtitle{color:var(--calc-text-faded);max-width:820px;margin:0 0 1.75rem;line-height:1.55}.sn-inputs{background:var(--calc-bg-card);border:1px solid var(--calc-border-default);border-radius:var(--calc-radius-lg);flex-wrap:wrap;align-items:flex-start;gap:1.25rem 1.75rem;margin-bottom:1.1rem;padding:1.25rem 1.35rem;display:flex}.sn-field{flex-direction:column;gap:.4rem;display:flex}.sn-field--ip{flex:220px}.sn-field--prefix{flex:260px}.sn-field--mask{flex:220px}.sn-field label,.sn-field__label{text-transform:uppercase;letter-spacing:.04em;color:var(--calc-text-dim);font-size:.78rem;font-family:var(--calc-font-mono)}.sn-field input[type=text],.sn-field select{background:var(--calc-bg-input);border:1px solid var(--calc-border-strong);border-radius:var(--calc-radius-md);color:var(--calc-text-primary);font-family:var(--calc-font-mono);padding:.6rem .75rem;font-size:1rem}.sn-field input[type=text]:focus,.sn-field select:focus{border-color:var(--calc-cyan);outline:none}.sn-hint{color:var(--calc-text-dim);font-size:.74rem}.sn-prefix-row{align-items:center;gap:.55rem;display:flex}.sn-slash{font-family:var(--calc-font-mono);color:var(--calc-text-faded);font-size:1.2rem}.sn-prefix-row input[type=range]{accent-color:var(--calc-cyan);flex:1;min-width:90px}.sn-prefix-row select{flex:none}.sn-seg-group{gap:.4rem;display:inline-flex}.sn-seg{cursor:pointer;position:relative}.sn-seg input{opacity:0;cursor:pointer;position:absolute;inset:0}.sn-seg span{border:1px solid var(--calc-border-default);background:var(--calc-bg-input);color:var(--calc-text-faded);border-radius:var(--calc-radius-md);font-size:.85rem;font-family:var(--calc-font-mono);padding:.4rem .8rem;transition:all .15s;display:inline-block}.sn-seg input:checked+span{background:var(--calc-cyan);border-color:var(--calc-cyan);color:#06141a;font-weight:600}.sn-seg input:focus-visible+span{outline:2px solid var(--calc-cyan);outline-offset:2px}.sn-presets{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.4rem;display:flex}.sn-presets__label{color:var(--calc-text-dim);font-size:.85rem}.sn-preset{background:var(--calc-bg-input);border:1px solid var(--calc-border-default);color:var(--calc-text-faded);font-size:.82rem;font-family:var(--calc-font-mono);cursor:pointer;border-radius:999px;padding:.3rem .85rem;transition:all .15s}.sn-preset:hover{border-color:var(--calc-cyan);color:var(--calc-cyan)}.sn-tabs{border-bottom:1px solid var(--calc-border-default);flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;display:flex}.sn-tab-btn{color:var(--calc-text-faded);font-family:var(--calc-font-headline);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:.7rem 1.1rem;font-size:.95rem;transition:color .15s,border-color .15s}.sn-tab-btn:hover{color:var(--calc-text-primary)}.sn-tab-btn.active{color:var(--calc-cyan);border-bottom-color:var(--calc-cyan)}.sn-tab-btn:focus-visible{outline:2px solid var(--calc-cyan);outline-offset:2px}.sn-tab-panel{display:none}.sn-tab-panel.active{display:block}.sn-result{background:var(--calc-bg-card);border:1px solid var(--calc-border-default);border-left:3px solid var(--calc-cyan);border-radius:var(--calc-radius-lg);margin-bottom:1rem;padding:1.2rem 1.35rem}.sn-result__head{align-items:baseline;gap:.6rem;display:flex}.sn-result__value{font-family:var(--calc-font-mono);color:var(--calc-cyan);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700;line-height:1.1}.sn-result__label{text-transform:uppercase;letter-spacing:.05em;color:var(--calc-text-dim);font-size:.85rem}.sn-result__detail{color:var(--calc-text-faded);margin-top:.5rem;font-size:.95rem;line-height:1.5}.sn-rangebar-wrap{margin:1.25rem 0}.sn-rangebar{border:1px solid var(--calc-border-default);border-radius:6px;height:16px;display:flex;overflow:hidden}.sn-rangebar__seg{display:block}.sn-rangebar__seg--net{background:var(--calc-indigo)}.sn-rangebar__seg--host{background:var(--calc-cyan)}.sn-rangebar__seg--bcast{background:var(--calc-rose)}.sn-rangebar__legend{color:var(--calc-text-faded);flex-wrap:wrap;gap:1.2rem;margin-top:.55rem;font-size:.78rem;display:flex}.sn-dot{vertical-align:middle;border-radius:3px;width:.7rem;height:.7rem;margin-right:.25rem;display:inline-block}.sn-dot--net{background:var(--calc-indigo)}.sn-dot--host{background:var(--calc-cyan)}.sn-dot--bcast{background:var(--calc-rose)}.sn-dot--netbit{border:1px solid var(--calc-cyan);background:#22d3ee59}.sn-dot--hostbit{border:1px solid var(--calc-border-strong);background:0 0}.sn-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;margin:1.25rem 0;display:grid}.sn-cell{background:var(--calc-bg-card);border:1px solid var(--calc-border-default);border-radius:var(--calc-radius-md);padding:.7rem .85rem;position:relative}.sn-cell__label{text-transform:uppercase;letter-spacing:.04em;color:var(--calc-text-dim);margin-bottom:.3rem;font-size:.72rem}.sn-cell__value{font-family:var(--calc-font-mono);color:var(--calc-text-primary);word-break:break-all;font-size:1rem}.sn-cell__copy{background:var(--calc-bg-input);border:1px solid var(--calc-border-default);color:var(--calc-text-dim);border-radius:var(--calc-radius-sm,6px);cursor:pointer;opacity:0;padding:.15rem .4rem;font-size:.7rem;transition:opacity .15s,color .15s,border-color .15s;position:absolute;top:.5rem;right:.5rem}.sn-cell:hover .sn-cell__copy,.sn-cell__copy:focus-visible{opacity:1}.sn-cell__copy:hover{color:var(--calc-cyan);border-color:var(--calc-cyan)}.sn-interpretation{background:var(--calc-bg-glass,var(--calc-bg-card));border:1px solid var(--calc-border-default);border-left:3px solid var(--calc-cyan);border-radius:var(--calc-radius-md);color:var(--calc-text-faded);margin:1.25rem 0;padding:.9rem 1.1rem;font-size:.92rem;line-height:1.6}.sn-interpretation p{margin:0 0 .6rem}.sn-interpretation p:last-child{margin-bottom:0}.sn-interpretation strong{color:var(--calc-text-primary)}.sn-help{color:var(--calc-text-faded);margin:0 0 1.1rem;font-size:.9rem;line-height:1.55}.sn-binary{flex-direction:column;gap:.5rem;display:flex;overflow-x:auto}.sn-bin-row{white-space:nowrap;align-items:center;gap:.9rem;display:flex}.sn-bin-label{text-transform:uppercase;letter-spacing:.04em;color:var(--calc-text-dim);flex:0 0 110px;font-size:.78rem}.sn-bin-bits{font-family:var(--calc-font-mono);letter-spacing:1px;font-size:.95rem}.sn-bit{text-align:center;width:.72ch;display:inline-block}.sn-bit--net{color:var(--calc-cyan);background:#22d3ee2e;border-radius:2px}.sn-bit--host{color:var(--calc-text-faded)}.sn-bit-dot{color:var(--calc-text-dim);padding:0 .15rem}.sn-bin-dec{font-family:var(--calc-font-mono);color:var(--calc-text-dim);margin-left:auto;font-size:.85rem}.sn-binary-legend{color:var(--calc-text-faded);gap:1.4rem;margin-top:.9rem;font-size:.78rem;display:flex}.sn-field--split{flex-flow:wrap;align-items:center;gap:.8rem;margin-bottom:1.1rem}.sn-split-count{color:var(--calc-cyan);font-size:.85rem;font-family:var(--calc-font-mono)}.sn-table-wrap{border:1px solid var(--calc-border-default);border-radius:var(--calc-radius-md);overflow-x:auto}.sn-table{border-collapse:collapse;width:100%;font-size:.85rem}.sn-table th,.sn-table td{text-align:left;border-bottom:1px solid var(--calc-border-subtle);font-family:var(--calc-font-mono);white-space:nowrap;padding:.5rem .7rem}.sn-table th{background:var(--calc-bg-input);color:var(--calc-text-dim);text-transform:uppercase;letter-spacing:.03em;font-size:.72rem}.sn-table td{color:var(--calc-text-faded)}.sn-table td code{color:var(--calc-cyan)}.sn-table tbody tr:hover{background:var(--calc-bg-input)}.sn-truncate-note{color:var(--calc-text-dim);margin-top:.6rem;font-size:.8rem}.sn-empty{color:var(--calc-text-dim);padding:.5rem 0;font-size:.9rem}.sn-privacy{border-radius:var(--calc-radius-md);color:var(--calc-text-faded);background:#22d3ee14;border:1px solid #22d3ee40;align-items:flex-start;gap:.6rem;margin:1.5rem 0 0;padding:.8rem 1rem;font-size:.88rem;line-height:1.5;display:flex}.sn-privacy svg{color:var(--calc-cyan);flex-shrink:0;margin-top:2px}.sn-privacy strong{color:var(--calc-text-primary)}.page-sections-outer{max-width:1100px;margin:0 auto;padding:0 1.5rem 3rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.faq-list{flex-direction:column;display:flex}.faq-item{border-bottom:1px solid #ffffff0f}.faq-item__question{cursor:pointer;color:var(--calc-text-primary);user-select:none;justify-content:space-between;align-items:center;padding:14px 4px;font-size:.9rem;font-weight:600;list-style:none;transition:color .2s;display:flex}.faq-item__question::-webkit-details-marker{display:none}.faq-item__question:after{content:"+";font-family:var(--calc-font-mono);color:var(--calc-text-dim);flex-shrink:0;margin-left:16px;font-size:1.1rem;transition:color .2s}.faq-item[open] .faq-item__question:after{content:"−";color:var(--calc-cyan)}.faq-item__question:hover{color:var(--calc-cyan)}.faq-item__answer{color:var(--calc-text-faded);padding:0 4px 14px;font-size:.85rem;line-height:1.75}@media (width<=600px){.sn-tab-btn{padding:.6rem .7rem;font-size:.88rem}.sn-bin-row{gap:.5rem}.sn-bin-label{flex-basis:80px;font-size:.7rem}.sn-bin-dec{display:none}}[data-theme=light] .sn-seg input:checked+span{color:#fff}[data-theme=light] .sn-privacy{background:#ecfdff;border-color:#0891b24d}[data-theme=light] .sn-bit--net{color:#0891b2;background:#0891b224}[data-theme=light] .sn-dot--netbit{background:#0891b22e;border-color:#0891b2}[data-theme=light] .sn-inputs,[data-theme=light] .sn-result,[data-theme=light] .sn-cell{box-shadow:0 1px 4px #0000000d}[data-theme=light] .faq-item{background:#fff;border:1px solid #0000001a;border-radius:10px;margin-bottom:8px;transition:box-shadow .2s,border-color .2s;overflow:hidden;box-shadow:0 1px 4px #0000000f}[data-theme=light] .faq-item[open]{border-color:#0891b266 #0891b266 #0891b266 #0891b2;border-left-style:solid;border-left-width:3px}[data-theme=light] .faq-item__question{color:#0f172a;padding:14px 16px}[data-theme=light] .faq-item__question:after{color:#64748b}[data-theme=light] .faq-item[open] .faq-item__question:after,[data-theme=light] .faq-item__question:hover{color:#0891b2}[data-theme=light] .faq-item__answer{color:#475569;border-top:1px solid #0000000f;padding:12px 16px 16px}