* { margin: 0; box-sizing: border-box }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: large; }

.block { max-width: 900px; margin: 0 auto; padding: 16px; }
.block h1 { margin-bottom: 16px }
.ip-input {
    display: block; width: 100%; padding: 16px; margin: 24px 0; border: 2px solid #00000033; border-radius: 9px;
    font-size: 24px; font-family: "Jetbrains Mono", Consolas, monospace;
}
.ip-input:focus { outline: none; background-color: #00000011; }
.details-row { display: flex }
.details-row > * { flex: 0 0 50%; margin: 8px 0; display: flex; flex-direction: column }
.details-row > * p { font-weight: bold; font-size: 24px }

.tabs-wrapper { display: flex; margin-top: 16px; background-color: #0000000a; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.tab { padding: 8px 18px; color: #00000099; font-size: 15px; cursor: pointer; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid transparent; }
.tab:hover { color: #000 }
.tab.active { background-color: #fff; border: 1px solid #00000022; color: #000; }
.tabs-container {
    border: 1px solid #00000022; border-top: unset; padding: 16px;
}

.details-binary { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; row-gap: 8px }
.details-binary > *:nth-child(even) { font-family: "Jetbrains Mono", Consolas, monospace; color: #167bce; letter-spacing: 2px; }
.details-binary > *:nth-child(odd) { text-align: right }
.details-binary .b0 { color: #00000066 }
.details-binary .b1 { color: #167bce }
.details-binary .bd { color: #00000011 }
.details-binary .n { background-color: #167bce33 }