:root {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #24313d;
    background: #f7f8fa;
    line-height: 1.6;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #245ea0; text-underline-offset: 3px; }
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1100px;
    margin: auto;
    padding: 18px 28px;
    border-bottom: 1px solid #dce2e8;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-weight: 650;
    text-decoration: none;
}
.brand img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.muted, .local-note { color: #596775; font-weight: 400; }
.local-note { font-size: 12px; }
main { max-width: 1050px; margin: auto; padding: 28px 24px; }
h1 { font-size: 30px; line-height: 1.25; margin: 0 0 10px; }
h2 { font-size: 20px; line-height: 1.4; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 18px 0 10px; }
p { margin: 10px 0 16px; }
.intro { max-width: 740px; color: #52616e; }
nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0 28px; font-size: 14px; }
.tool {
    background: #fff;
    border: 1px solid #dce2e8;
    border-radius: 8px;
    padding: 26px;
    margin-bottom: 24px;
    scroll-margin-top: 20px;
    min-width: 0;
}
.tool > p { max-width: 850px; color: #52616e; font-size: 14px; }
form { margin: 22px 0; }
label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.input-row { display: flex; gap: 12px; }
input {
    width: 100%;
    min-width: 0;
    border: 1px solid #8e9aa7;
    border-radius: 5px;
    padding: 11px 12px;
    color: #24313d;
    background: #fff;
    font: 16px ui-monospace, Consolas, monospace;
}
button {
    border: 1px solid #245ea0;
    border-radius: 5px;
    padding: 11px 20px;
    font: 600 14px system-ui, sans-serif;
    background: #245ea0;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
button:hover { background: #194b84; }
:focus-visible { outline: 3px solid #346db2; outline-offset: 3px; }
[aria-invalid="true"] { border-color: #b32929; }
.hint { color: #596775; font-size: 13px; margin: 10px 0 14px; }
.error { color: #a12020; font-size: 14px; }
.error:empty { display: none; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.answer { font-weight: 600; overflow-wrap: anywhere; }
#network-title { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; max-width: 100%; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13px; }
caption { text-align: left; font-size: 12px; color: #596775; padding-bottom: 8px; }
th { background: #f1f4f7; font-weight: 600; }
th, td { border-bottom: 1px solid #dce2e8; padding: 10px 12px; vertical-align: top; }
td.value, .binary-table td:last-child {
    font-family: ui-monospace, Consolas, monospace;
    white-space: nowrap;
}
#subnet-values td:first-child { min-width: 125px; font-weight: 600; }
#subnet-values td:last-child { min-width: 230px; }
#split-rows td, #allocations td { white-space: nowrap; }
.explanation { background: #f4f7fb; border-left: 3px solid #799ac1; padding: 12px 18px; margin: 18px 0; font-size: 14px; }
.explanation h3 { margin: 0 0 8px; }
.explanation p:last-child { margin-bottom: 0; }
ol { margin: 8px 0; padding-left: 22px; }
li { margin: 6px 0; }
details { border-top: 1px solid #dce2e8; padding-top: 14px; font-size: 14px; }
summary { cursor: pointer; font-weight: 600; color: #245ea0; }
code { font-family: ui-monospace, Consolas, monospace; }
.learning-note { padding: 8px 4px; font-size: 14px; color: #52616e; }
.learning-note h2 { font-size: 17px; }
footer { border-top: 1px solid #dce2e8; padding: 20px 0 0; margin-top: 22px; font-size: 12px; color: #596775; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
    .site-header { padding: 14px 16px; }
    .local-note { display: none; }
    main { padding: 24px 12px; }
    h1 { font-size: 26px; }
    h2 { font-size: 19px; }
    .tool { padding: 20px 16px; }
    .input-row { flex-direction: column; }
    .field-grid { grid-template-columns: 1fr; }
    .explanation { padding: 12px; }
}