* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: monospace; font-size: 13px; background: #111; color: #ccc; }
body { margin: 0; }
button, input, select { font: inherit; color: inherit; background: #222; border: 1px solid #444; border-radius: 2px; padding: 6px 8px; min-height: 32px; }
button, summary { cursor: pointer; }
button:hover, .file-item:hover { background: #292929; }
button:disabled { opacity: .5; cursor: default; }
a, .link { color: #6cf; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #6cf; outline-offset: 2px; }
h2, h3, h4 { color: #eee; font-size: 1rem; }
h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
h3 { margin: 16px 0 8px; border-bottom: 1px solid #333; padding-bottom: 5px; }
p { line-height: 1.6; }
#toolbar { height: 48px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #333; padding: 6px 10px; position: sticky; top: 0; z-index: 5; background: #111; }
.spacer { flex: 1; }
#menu { display: none; }
#app { display: flex; height: calc(100dvh - 48px); min-height: 240px; }
#sidebar { width: clamp(250px, 28vw, 340px); border-right: 1px solid #333; display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; }
#sidebar-head { padding: 8px; border-bottom: 1px solid #333; }
#sidebar-head input, #sidebar-head select { width: 100%; margin: 3px 0; }
#view-mode { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#view-mode button { flex: 1 1 auto; }
.active, button[aria-current="page"] { background: #335; color: #fff; }
#sidebar-list { flex: 1; overflow-y: auto; min-height: 0; }
.file-item { display: block; border: 0; border-radius: 0; width: 100%; text-align: left; background: transparent; padding: 5px 8px; overflow-wrap: anywhere; }
.tag { display: inline-block; font-size: .8rem; margin-left: 5px; padding: 1px 4px; background: #234; color: #8cf; }
.tag-data { background: #253; color: #8f8; }
.tag-redir { background: #533; color: #f99; }
#main { flex: 1; min-width: 0; overflow: auto; padding: 12px; scroll-behavior: smooth; }
.muted, .search-info { color: #999; font-size: .9rem; }
.search-info { padding: 6px 8px; }
.empty { color: #999; padding: 16px; }
.error { color: #faa; border: 1px solid #633; padding: 10px; }
.chassis-card { margin: 8px 0; padding: 10px; border: 1px solid #333; background: #1a1a1a; }
.chassis-card h4 { margin: 0 0 8px; }
.ctrl-list, .section-nav, .file-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ctrl-chip { background: #234; font-size: .9rem; }
.section-nav { border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; }
.section-nav a { padding: 5px 7px; background: #223; }
.file-tools { margin: 10px 0; }
.file-tools input[type="search"] { flex: 1 1 200px; }
.file-tools label { display: flex; align-items: center; gap: 5px; }
input[type="checkbox"] { min-height: auto; accent-color: #6cf; }
.table-wrap { overflow-x: auto; width: 100%; margin: 6px 0 12px; border: 1px solid #333; }
table { border-collapse: collapse; width: 100%; min-width: 430px; }
th, td { text-align: left; padding: 5px 8px; border: 1px solid #333; vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 600px; }
th { background: #222; color: #fff; overflow-wrap: normal; }
td { background: #1a1a1a; }
.original { display: block; color: #999; font-size: .9rem; margin-top: 4px; }
.text-line { white-space: pre-wrap; overflow-wrap: anywhere; padding: 5px 8px; border-bottom: 1px solid #282828; line-height: 1.5; }
.group, .file-section { scroll-margin-top: 60px; }
.breadcrumb { color: #999; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; }
.link { border: 0; padding: 1px 3px; min-height: 28px; background: none; text-align: left; overflow-wrap: anywhere; }
.converter { max-width: 760px; }
.converter label { display: block; margin: 14px 0 5px; }
.converter input, .converter select { width: 100%; }
.conversion { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid #333; }
.conversion dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.bits { display: flex; flex-wrap: wrap; gap: 4px; }
.bit { min-width: 46px; text-align: center; }
.bit small { display: block; color: #aaa; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  #menu { display: block; }
  #menu span { display: none; }
  #toolbar { gap: 8px; }
  #app { display: block; height: auto; min-height: calc(100dvh - 48px); }
  #sidebar { width: 100%; max-height: 48dvh; border-right: 0; border-bottom: 1px solid #444; }
  #sidebar-list { max-height: 25dvh; }
  #app.sidebar-closed #sidebar { display: none; }
  #main { overflow: visible; padding: 10px; }
  button, input, select { min-height: 40px; }
  .link { min-height: 36px; }
  .file-item { padding: 9px; }
  table { min-width: 480px; }
  .file-tools label { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { #main { scroll-behavior: auto; } }
.help-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 28px; padding: 0 3px; border: 0; background: transparent; color: #8bc5ea; cursor: help; vertical-align: baseline; white-space: nowrap; }
.help-trigger:hover, .help-trigger[aria-expanded="true"] { background: #29363e; color: #c5eaff; }
.help-window { position: fixed; inset: auto; margin: 0; z-index: 100; width: 410px; max-width: calc(100vw - 24px); max-height: min(75dvh, 620px); padding: 14px 16px; overflow: auto; border: 1px solid #77745d; border-radius: 0; background: #fffbdc; color: #24241d; box-shadow: 3px 4px 0 #0005; font: 13px/1.5 monospace; overflow-wrap: anywhere; color-scheme: light; }
.help-window h3 { font-size: 1rem; margin: 0 30px 8px 0; color: #181811; padding: 0; border: 0; }
.help-window p { margin: 0 0 10px; line-height: 1.6; white-space: pre-line; }
.help-window article + article { border-top: 1px solid #d6d1b4; margin-top: 12px; padding-top: 12px; }
.help-close { position: sticky; float: right; top: 0; margin: -7px -8px 0 0; min-width: 30px; min-height: 30px; padding: 0; border: 0; background: #fffbdc; color: #39382a; font-size: 23px; line-height: 1; }
.help-close:hover { background: #e8e2bd; }
.help-window :focus-visible { outline-color: #345c8e; }
.help-window.help-centered { left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 80dvh; }
.help-window::backdrop { background: #0009; }
body.help-modal-open { overflow: hidden; }
@media (max-width: 700px), (pointer: coarse) {
  .help-trigger { min-height: 40px; min-width: 40px; }
  .help-close { min-height: 40px; min-width: 40px; }
  .help-window { font-size: 14px; max-width: calc(100vw - 32px); }
}
.converter-window { position: fixed; inset: auto; left: max(12px, calc(100vw - 510px)); top: 65px; margin: 0; z-index: 90; width: 490px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 90px); padding: 14px; overflow: auto; background: #181818; color: #ddd; border: 1px solid #777; box-shadow: 3px 4px 12px #0009; font: inherit; }
.converter-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: move; touch-action: none; }
.converter-title h2 { margin: 0; }
.converter-close { font-size: 22px; min-width: 36px; }
.converter-window::backdrop { background: #0009; }
@media(max-width: 700px) {
  .converter-window { inset: 0; margin: auto; width: calc(100vw - 24px); max-height: 85dvh; }
  .converter-title { cursor: default; }
}