:root{--hxr-ink: #18212b;--hxr-paper: #f4f6f3;--hxr-card: #ffffff;--hxr-line: #dce2dc;--hxr-muted: #5b6670;--hxr-accent: #0f6f66;--hxr-accent-dark: #0a524b;--hxr-r: #d0453f;--hxr-g: #2d9a55;--hxr-b: #3769d4;--hxr-a: #868d95;--hxr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--hxr-radius: 10px;--primary: #0f6f66;--primary-dark: #0a524b;--border: #dce2dc;--surface: #ffffff;--shadow-soft: 0 1px 2px rgba(24,33,43,0.06), 0 6px 18px rgba(24,33,43,0.06);--surface-muted: #f4f6f3;--text-main: #18212b;--text-muted: #5b6670;}
.hxr-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.35rem 1rem;font-size: 0.8125rem;color: var(--hxr-muted);padding: 0.55rem 0.85rem;margin-bottom: 1.25rem;background: var(--hxr-paper);border-left: 3px solid var(--hxr-accent);border-radius: 0 6px 6px 0;}
.hxr-byline-author{font-weight: 600;color: var(--hxr-ink);}
.hxr-byline-author .author-link{color: var(--hxr-accent);text-decoration: none;}
.hxr-byline-author .author-link:hover{text-decoration: underline;}
.hxr-byline-updated{white-space: nowrap;}
.hxr-tabs{display: inline-flex;gap: 0;border: 1px solid var(--hxr-line);border-radius: 999px;padding: 3px;background: var(--hxr-card);margin-bottom: 1rem;}
.hxr-tab{border: 0;background: transparent;color: var(--hxr-muted);font-weight: 600;font-size: 0.9rem;padding: 0.45rem 1.1rem;border-radius: 999px;cursor: pointer;}
.hxr-tab.is-on{background: var(--hxr-ink);color: #fff;}
.hxr-tab:focus-visible{outline: 2px solid var(--hxr-accent);outline-offset: 2px;}
.hxr-sheet{display: grid;grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);gap: 0;background: var(--hxr-card);border: 1px solid var(--hxr-line);border-radius: var(--hxr-radius);box-shadow: var(--shadow-soft);margin-bottom: 2.5rem;overflow: hidden;}
.hxr-sheet[hidden]{display: none;}
.hxr-sheet-wide{display: block;padding: 1.25rem;}
.hxr-entry{padding: 1.25rem;background: var(--hxr-paper);border-right: 1px solid var(--hxr-line);display: flex;flex-direction: column;}
.hxr-work{padding: 1.25rem 1.5rem;}
.hxr-label{display: block;font-size: 0.75rem;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--hxr-muted);margin-bottom: 0.4rem;}
.hxr-label-inline{display: inline-block;margin: 0 0.5rem 0 0;}
.hxr-field{display: flex;align-items: stretch;gap: 0.5rem;}
.hxr-picker{width: 52px;min-height: 52px;padding: 3px;border: 1px solid var(--hxr-line);border-radius: 8px;background: var(--hxr-card);cursor: pointer;flex-shrink: 0;}
.hxr-hex{flex: 1;min-width: 0;font-family: var(--hxr-mono);font-size: 1.5rem;font-weight: 600;letter-spacing: 0.04em;color: var(--hxr-ink);padding: 0.45rem 0.75rem;border: 1px solid var(--hxr-line);border-radius: 8px;background: var(--hxr-card);text-transform: uppercase;}
.hxr-hex:focus{outline: none;border-color: var(--hxr-accent);box-shadow: 0 0 0 3px rgba(15,111,102,0.18);}
.hxr-hex.is-bad{border-color: var(--hxr-r);box-shadow: 0 0 0 3px rgba(208,69,63,0.15);}
.hxr-hint{font-size: 0.8125rem;color: var(--hxr-muted);margin: 0.4rem 0 0;}
.hxr-err{font-size: 0.8125rem;color: var(--hxr-r);font-weight: 600;margin: 0.3rem 0 0;}
.hxr-samples{display: flex;flex-wrap: wrap;gap: 0.4rem;margin: 0.9rem 0 1rem;}
.hxr-chip{display: inline-flex;align-items: center;gap: 0.35rem;font-family: var(--hxr-mono);font-size: 0.78rem;color: var(--hxr-ink);background: var(--hxr-card);border: 1px solid var(--hxr-line);border-radius: 6px;padding: 0.25rem 0.5rem;cursor: pointer;}
.hxr-chip:hover{border-color: var(--hxr-accent);}
.hxr-chip i{display: inline-block;width: 12px;height: 12px;border-radius: 3px;border: 1px solid rgba(0,0,0,0.12);}
.hxr-swatch{flex: 1;min-height: 190px;border-radius: 8px;overflow: hidden;border: 1px solid var(--hxr-line);background-color: #fff;background-image: linear-gradient(45deg, #e6e9e6 25%, transparent 25%), linear-gradient(-45deg, #e6e9e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e9e6 75%), linear-gradient(-45deg, transparent 75%, #e6e9e6 75%);background-size: 16px 16px;background-position: 0 0, 0 8px, 8px -8px, -8px 0;}
.hxr-swatch-fill{height: 100%;min-height: 190px;display: flex;flex-direction: column;justify-content: flex-end;padding: 0.9rem 1rem;transition: background-color 0.15s ease;}
.hxr-swatch-rgb{font-family: var(--hxr-mono);font-size: 1.1rem;font-weight: 700;}
.hxr-swatch-hex{font-family: var(--hxr-mono);font-size: 0.8rem;opacity: 0.8;}
.hxr-head{font-size: 0.8rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--hxr-muted);margin: 0 0 0.6rem;padding-bottom: 0.4rem;border-bottom: 1px dashed var(--hxr-line);}
.hxr-head + .hxr-expand{margin-top: 0;}
.hxr-expand{font-size: 0.875rem;color: var(--hxr-ink);background: #fff8e6;border: 1px solid #f0dfb0;border-radius: 6px;padding: 0.45rem 0.7rem;margin: 0 0 0.6rem;}
.hxr-expand code{font-family: var(--hxr-mono);color: inherit;background: none;padding: 0;}
.hxr-bytes{list-style: none;padding: 0;margin: 0 0 1.4rem;}
.hxr-byte{display: grid;grid-template-columns: 4.2rem 2.8rem minmax(0, 1fr) 3rem;grid-template-areas: "name pair math val" "bar bar bar bar";align-items: center;column-gap: 0.6rem;row-gap: 0.3rem;padding: 0.55rem 0;border-bottom: 1px solid var(--hxr-paper);}
.hxr-byte-name{grid-area: name;font-size: 0.85rem;font-weight: 600;color: var(--hxr-ink);}
.hxr-byte-pair{grid-area: pair;font-family: var(--hxr-mono);font-size: 1rem;font-weight: 700;background: var(--hxr-paper);border-radius: 4px;padding: 0.1rem 0.35rem;text-align: center;color: var(--hxr-ink);}
.hxr-byte-math{grid-area: math;font-family: var(--hxr-mono);font-size: 0.85rem;color: var(--hxr-muted);}
.hxr-byte-val{grid-area: val;font-family: var(--hxr-mono);font-size: 1.05rem;text-align: right;color: var(--hxr-ink);}
.hxr-bar{grid-area: bar;display: block;height: 6px;background: var(--hxr-paper);border-radius: 3px;overflow: hidden;}
.hxr-bar span{display: block;height: 100%;border-radius: 3px;transition: width 0.2s ease;}
.hxr-ch-r .hxr-bar span{background: var(--hxr-r);}
.hxr-ch-g .hxr-bar span{background: var(--hxr-g);}
.hxr-ch-b .hxr-bar span{background: var(--hxr-b);}
.hxr-ch-a .hxr-bar span{background: var(--hxr-a);}
.hxr-ch-r .hxr-byte-pair{box-shadow: inset 0 -2px 0 var(--hxr-r);}
.hxr-ch-g .hxr-byte-pair{box-shadow: inset 0 -2px 0 var(--hxr-g);}
.hxr-ch-b .hxr-byte-pair{box-shadow: inset 0 -2px 0 var(--hxr-b);}
.hxr-ch-a .hxr-byte-pair{box-shadow: inset 0 -2px 0 var(--hxr-a);}
.hxr-outs{margin: 0;}
.hxr-out{display: grid;grid-template-columns: 9.5rem minmax(0, 1fr) auto;align-items: center;gap: 0.6rem;padding: 0.45rem 0;border-bottom: 1px solid var(--hxr-paper);}
.hxr-out dt{font-size: 0.8rem;font-weight: 600;color: var(--hxr-muted);}
.hxr-out dd{margin: 0;min-width: 0;}
.hxr-out code{font-family: var(--hxr-mono);font-size: 0.92rem;color: var(--hxr-ink);background: none;padding: 0;word-break: break-all;}
.hxr-copy{font-size: 0.78rem;font-weight: 600;color: var(--hxr-accent);background: transparent;border: 1px solid var(--hxr-line);border-radius: 6px;padding: 0.25rem 0.6rem;cursor: pointer;}
.hxr-copy:hover,.hxr-copy.is-done{background: var(--hxr-accent);border-color: var(--hxr-accent);color: #fff;}
.hxr-sheet-cols{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;}
.hxr-area{width: 100%;font-family: var(--hxr-mono);font-size: 0.85rem;line-height: 1.5;color: var(--hxr-ink);background: var(--hxr-paper);border: 1px solid var(--hxr-line);border-radius: 8px;padding: 0.7rem 0.8rem;resize: vertical;}
.hxr-area:focus{outline: none;border-color: var(--hxr-accent);box-shadow: 0 0 0 3px rgba(15,111,102,0.18);}
.hxr-area-out{background: #fbfcfb;}
.hxr-row{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;margin-top: 0.6rem;}
.hxr-select{font-family: var(--hxr-mono);font-size: 0.85rem;border: 1px solid var(--hxr-line);border-radius: 6px;padding: 0.3rem 0.5rem;background: var(--hxr-card);color: var(--hxr-ink);}
.hxr-btn{font-size: 0.85rem;font-weight: 600;color: #fff;background: var(--hxr-accent);border: 1px solid var(--hxr-accent);border-radius: 6px;padding: 0.4rem 0.85rem;cursor: pointer;}
.hxr-btn:hover{background: var(--hxr-accent-dark);}
.hxr-btn-ghost{background: transparent;color: var(--hxr-accent);}
.hxr-btn-ghost:hover{background: var(--hxr-paper);}
.hxr-count{font-size: 0.875rem;color: var(--hxr-muted);margin: 1rem 0 0.5rem;}
.hxr-table-wrap{overflow-x: auto;margin: 0 0 1rem;}
.hxr-table{width: 100%;border-collapse: collapse;font-size: 0.875rem;}
.hxr-table th{text-align: left;font-size: 0.75rem;text-transform: uppercase;letter-spacing: 0.05em;color: var(--hxr-muted);padding: 0.45rem 0.6rem;border-bottom: 2px solid var(--hxr-line);}
.hxr-table td{padding: 0.45rem 0.6rem;border-bottom: 1px solid var(--hxr-line);vertical-align: middle;color: var(--hxr-ink);}
.hxr-table code{font-family: var(--hxr-mono);background: none;color: var(--hxr-ink);padding: 0;}
.hxr-table .hxr-sw{display: inline-block;width: 28px;height: 18px;border-radius: 4px;border: 1px solid rgba(0,0,0,0.12);}
.hxr-table .hxr-dup{font-size: 0.75rem;color: var(--hxr-muted);margin-left: 0.3rem;}
.hxr-read{margin: 0 auto 2.5rem;color: var(--hxr-ink);font-size: 1.02rem;line-height: 1.7;}
.hxr-read h2{font-size: 1.4rem;font-weight: 700;margin: 2.2rem 0 0.7rem;color: var(--hxr-ink);}
.hxr-read p{margin: 0 0 1rem;}
.hxr-read code{font-family: var(--hxr-mono);font-size: 0.9em;background: var(--hxr-paper);color: var(--hxr-ink);padding: 0.05rem 0.3rem;border-radius: 4px;}
.hxr-read a{color: var(--hxr-accent);font-weight: 600;}
.hxr-lead{font-size: 1.15rem;line-height: 1.65;padding-bottom: 1rem;border-bottom: 1px solid var(--hxr-line);}
.hxr-table-read{font-size: 0.95rem;}
.hxr-forms{margin: 0 0 1rem;border: 1px solid var(--hxr-line);border-radius: 8px;overflow: hidden;}
.hxr-forms > div{display: grid;grid-template-columns: 8.5rem minmax(0, 1fr);gap: 1rem;padding: 0.8rem 1rem;border-bottom: 1px solid var(--hxr-line);}
.hxr-forms > div:last-child{border-bottom: 0;}
.hxr-forms > div:nth-child(odd){background: var(--hxr-paper);}
.hxr-forms dt{font-weight: 700;}
.hxr-forms dd{margin: 0;}
.hxr-note{border: 1px solid #f0c9c6;background: #fdf3f2;border-radius: 8px;padding: 0.9rem 1.1rem;margin: 0 0 1rem;}
.hxr-note p{margin: 0;}
.hxr-limits{padding-left: 1.1rem;margin: 0 0 1rem;}
.hxr-limits li{margin-bottom: 0.7rem;}
.hxr-toast{position: fixed;left: 50%;bottom: 1.5rem;transform: translateX(-50%);background: var(--hxr-ink);color: #fff;font-size: 0.875rem;font-weight: 600;padding: 0.5rem 1rem;border-radius: 999px;z-index: 1050;box-shadow: 0 6px 18px rgba(0,0,0,0.2);}
@media (max-width: 991.98px){.hxr-sheet{grid-template-columns: 1fr;}.hxr-entry{border-right: 0;border-bottom: 1px solid var(--hxr-line);}.hxr-sheet-cols{grid-template-columns: 1fr;}}
@media (max-width: 575.98px){.hxr-work,.hxr-entry{padding: 1rem;}.hxr-hex{font-size: 1.2rem;}.hxr-out{grid-template-columns: minmax(0, 1fr) auto;}.hxr-out dt{grid-column: 1 / -1;}.hxr-byte{grid-template-columns: 3.6rem 2.6rem minmax(0, 1fr) 2.6rem;column-gap: 0.4rem;}.hxr-byte-math{font-size: 0.78rem;}.hxr-forms > div{grid-template-columns: 1fr;gap: 0.25rem;}.hxr-tabs{display: flex;}.hxr-tab{flex: 1;}}