@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700&family=Syne:wght@600;700&display=swap');

:root {
  --ink: #18282a;
  --muted: #667476;
  --paper: #f4f2eb;
  --line: #c9cdc7;
  --accent: #d7ff3f;
  --teal: #0b4b4d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.5 "Noto Sans JP", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { width: min(1180px, calc(100% - 24px)); margin: auto; }

.site-header { height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; font: 700 15px/1 "Noto Sans JP", sans-serif; letter-spacing: .02em; }
.brand-mark { width: 24px; height: 24px; padding: 5px; display: flex; gap: 3px; align-items: flex-end; background: var(--teal); }
.brand-mark i { display: block; width: 3px; background: var(--accent); }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 10px; }
.header-note, .step, .status, footer { font: 500 10px "DM Mono", monospace; letter-spacing: .12em; }
.header-note { color: var(--muted); }

.calculator { margin-top: 12px; border: 1px solid var(--line); background: #faf9f4; }
.panel-heading, .results-heading { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.step { color: var(--teal); }
h2 { margin: 1px 0 0; font-size: 15px; }
.status { display: flex; align-items: center; gap: 7px; color: var(--teal); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--teal); }
form { padding: 10px 12px 12px; }
.input-grid { display: grid; grid-template-columns: 1.7fr .75fr auto; gap: 8px; align-items: start; }
.field > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.field input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #aeb5b0; outline: none; color: var(--ink); background: white; font: 500 14px "DM Mono", monospace; transition: .2s; }
.field input:focus { border-color: var(--teal); box-shadow: inset 0 -3px var(--accent); }
.prefix-input { position: relative; }
.prefix-input input { padding-left: 10px; }
.prefix-conversion { display: block; min-height: 17px; margin-top: 3px; color: var(--teal); font: 500 11px "DM Mono", monospace; }
form button { height: 38px; padding: 0 18px; border: 1px solid var(--teal); color: white; background: var(--teal); font-size: 13px; font-weight: 700; }
.input-grid > button { margin-top: 21px; }
form button span { padding-left: 12px; color: var(--accent); font-size: 16px; }
form button:hover { color: var(--ink); background: var(--accent); }
.error { margin: 16px 0 0; color: #a93226; font-size: 13px; }

.results { margin: 14px 0 28px; }
.results-heading { padding: 0 0 6px; }
.copy-button { padding: 6px 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; }
.copy-button:hover { border-color: var(--teal); color: var(--teal); }
.primary-result { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; color: white; background: var(--teal); }
.primary-result span { display: block; color: #a8c4bf; font: 500 11px "DM Mono", monospace; letter-spacing: .14em; }
.primary-result strong { display: block; margin-top: 2px; font: 500 clamp(18px, 2.5vw, 24px) "DM Mono", monospace; }
.type-badge { padding: 6px 9px; border: 1px solid rgba(215,255,63,.5); color: var(--accent); font: 500 10px "DM Mono", monospace; }
.result-grid { display: grid; grid-template-columns: repeat(2,1fr); border-left: 1px solid var(--line); }
.result-grid article { position: relative; min-height: 78px; padding: 11px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #faf9f4; }
.result-grid article span, .range-copy > span, .host-count span, .total-count span { display: block; color: var(--muted); font-size: 12px; }
.result-grid strong { display: block; margin-top: 5px; font: 500 clamp(14px, 2vw, 18px) "DM Mono", monospace; }
.result-grid small { position: absolute; right: 10px; bottom: 8px; color: #aeb5b0; font: 400 8px "DM Mono", monospace; letter-spacing: .12em; }
.range-card { display: grid; grid-template-columns: 2fr .7fr .7fr; min-height: 82px; border: 1px solid var(--line); border-top: 0; background: var(--accent); }
.range-card > div { padding: 11px 14px; border-right: 1px solid rgba(24,40,42,.25); }
.range-card > div:last-child { border: 0; }
.range-copy strong { display: block; margin-top: 5px; font: 500 clamp(14px, 1.8vw, 17px) "DM Mono", monospace; }
.range-copy small { display: block; margin-top: 4px; color: #526222; font-size: 10px; }
.host-count strong, .total-count strong { display: block; margin-top: 4px; font: 500 20px "DM Mono", monospace; }
.host-count small { color: #526222; font: 500 9px "DM Mono", monospace; letter-spacing: .15em; }
details { border: 1px solid var(--line); border-top: 0; background: #faf9f4; }
summary { display: flex; justify-content: space-between; padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 12px; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary i { transform: rotate(45deg); }
summary i { font-style: normal; font-size: 20px; transition: .2s; }
.details-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; padding: 0 14px 12px; border-top: 1px solid var(--line); }
dl { margin: 20px 0 0; }
dl div { padding: 7px 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: 11px; } dd { margin: 5px 0 0; font: 500 13px "DM Mono", monospace; }
.binary-table { padding-top: 20px; overflow-x: auto; }
.binary-table div { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 6px 0; }
.binary-table span { color: var(--muted); font: 500 10px "DM Mono", monospace; }
.binary-table code { white-space: nowrap; font: 400 12px "DM Mono", monospace; }
footer { display: flex; justify-content: space-between; padding: 12px 0 16px; border-top: 1px solid var(--line); color: var(--muted); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 16px, 1180px); }
  .site-header { height: 46px; }.header-note { display: none; }
  .panel-heading { padding: 9px 10px; }.input-grid { grid-template-columns: 1fr .55fr; }.input-grid button { grid-column: 1 / -1; margin-top: 0; }
  form { padding: 9px 10px 10px; }
  .results { margin: 12px 0 24px; }.copy-button { font-size: 0; }.copy-button span { font-size: 12px; }
  .primary-result { padding: 11px 12px; align-items: flex-start; gap: 8px; }.type-badge { font-size: 9px; }
  .result-grid { grid-template-columns: 1fr; }.result-grid article { min-height: 72px; padding: 10px 12px; }
  .range-card { grid-template-columns: 1fr 1fr; }.range-copy { grid-column: 1 / -1; border-bottom: 1px solid rgba(24,40,42,.25); }.range-card > div { padding: 23px; }
  .range-card > div { padding: 10px 12px; }
  .details-grid { grid-template-columns: 1fr; gap: 0; padding: 0 12px 12px; }
  footer { font-size: 9px; }
}

@media (max-width: 420px) { .input-grid { grid-template-columns: 1fr; }.input-grid button { grid-column: auto; margin-top: 0; }.prefix-field { width: 100%; }.type-badge { display: none; } }