/* Compact offline inspector: all rules stay inside its own surface. */
.dns-viewer{--dns-paper:#fff8e8;--dns-ink:#213c42;--dns-teal:#275a52;--dns-rust:#88431f;box-sizing:border-box;min-width:0;max-width:100%;margin:22px 0 30px;padding:18px;background:var(--dns-paper);color:var(--dns-ink);border:2px solid #526858;font-family:'Quest Noto','Noto Sans SC',sans-serif;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.dns-viewer *{box-sizing:border-box;min-width:0}
.dns-viewer h2{font-size:21px;margin:0 0 6px;color:var(--dns-ink)}
.dns-viewer p{margin:6px 0 10px;font-size:14px;line-height:1.65}
.dns-viewer .dns-intro{max-width:75ch}
.dns-viewer .dns-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:14px 0}
.dns-viewer :is(button,select){min-height:44px;max-width:100%;font:inherit;line-height:1.4;border:1px solid #526858;border-radius:0;padding:9px 12px;background:#f8edcf;color:var(--dns-ink);box-shadow:none;cursor:pointer;white-space:normal;transform:none}
.dns-viewer select{min-width:150px}
.dns-viewer button:hover{background:#e8dfc3;color:var(--dns-ink)}
.dns-viewer button[aria-pressed=true]{background:var(--dns-teal);color:#fff8e8;border-color:var(--dns-teal)}
.dns-viewer :is(button,select,input):focus-visible{outline:3px solid var(--dns-rust);outline-offset:3px}
.dns-viewer :is(button,input):disabled{opacity:1;color:#52625d;background:#eae5d7;cursor:not-allowed}
.dns-viewer .dns-inspect{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.2fr);gap:18px;align-items:start;border-top:1px solid #b8b79d;padding-top:10px}
.dns-viewer .dns-grid-label{font-size:12px}
.dns-viewer .dns-hex{padding:8px 6px;background:#f0e9d9;border:1px solid #b8b79d;font:13px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}
.dns-viewer .dns-hex-row{display:grid;grid-template-columns:3.5ch repeat(8,minmax(0,1fr));gap:2px;align-items:center}
.dns-viewer .dns-offset{color:#635c48;border-right:1px solid #a5a68c;font-size:11px}
.dns-viewer .dns-byte{text-align:center;color:#29463f}
.dns-viewer .dns-byte:nth-child(n+6){color:#753d21}
.dns-viewer .dns-byte.is-selected{background:var(--dns-teal);color:#fff8e8;box-shadow:inset 0 -2px 0 #152f2a}
.dns-viewer .dns-fields{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.dns-viewer .dns-fields button{font-size:12px;flex:1 1 125px;text-align:left;padding:8px;min-height:44px}
.dns-viewer .dns-detail{padding:10px 0;border-top:2px solid var(--dns-teal);min-height:120px}
.dns-viewer .dns-detail p:first-of-type{font:12px/1.7 'Quest Noto',ui-monospace,monospace;color:#625941;margin:4px 0}
.dns-viewer .dns-comparison{display:flex;align-items:flex-start;gap:16px;border-top:1px solid #b8b79d;padding-top:14px;margin-top:10px}
.dns-viewer .dns-comparison>button{flex:0 1 205px;background:var(--dns-teal);color:#fff8e8}
.dns-viewer .dns-comparison>button:disabled{background:#eae5d7;color:#52625d}
.dns-viewer .dns-result{flex:1;padding:8px 0}
.dns-viewer .dns-result ul{padding-left:20px;margin:5px 0;font-size:13px}
.dns-viewer .dns-result li{margin:0}
.dns-viewer .dns-ttl{display:grid;grid-template-columns:auto minmax(80px,1fr);gap:4px 15px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #b8b79d}
.dns-viewer input[type=range]{width:100%;height:44px;min-height:44px;margin:0;accent-color:var(--dns-teal);cursor:pointer}
.dns-viewer .dns-ttl output{grid-column:1/-1;line-height:1.8}
.dns-viewer .dns-boundary{font-size:12px;color:#52625d;margin-top:12px;margin-bottom:0}
.dns-viewer .dns-error{color:#753d21;font-weight:bold}
.dns-viewer [hidden]{display:none!important}
@media(max-width:700px){.dns-viewer{padding:12px}.dns-viewer .dns-inspect{grid-template-columns:minmax(0,1fr);gap:12px}.dns-viewer .dns-hex{max-width:390px}.dns-viewer .dns-comparison{display:block}.dns-viewer .dns-comparison>button{width:100%}.dns-viewer .dns-ttl{grid-template-columns:minmax(0,1fr)}.dns-viewer .dns-ttl output{grid-column:auto}.dns-viewer .dns-detail{min-height:0}}