@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/crimson-pro-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/crimson-pro-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/crimson-pro-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/crimson-pro-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/space-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/space-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/space-mono-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/space-mono-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --eink-bg: #f0efeb;
    --eink-panel: #e8e7e3;
    --eink-raised: #ececeb;
    --eink-text: #1a1a1a;
    --eink-muted: #5a5a58;
    --hud-border: #2a2a28;
    --hud-muted: #6e6e6a;
    --hud-faint: #b8b8b4;
    --eink-code-bg: #e4e3df;
    --eink-sidebar-bg: var(--eink-panel);

    --ink-red: #9e3d3d;
    --ink-green: #6a8a6a;
    --ink-blue: #4a6a8a;
    --ink-ochre: #b8a066;
    --ink-mauve: #7a6088;
    --ink-teal: #4a7a76;

    --sidebar-width: 280px;
    --link-rail-width: 280px;
    --layout-gap: 3rem;
    --status-bar-height: 32px;
    --hud-corner-offset: 8px;

    --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --line-height: 1.7;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--eink-text);
    background-color: var(--eink-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: var(--status-bar-height);
    position: relative;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--eink-text);
    color: var(--eink-bg);
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 13px;
    text-decoration: none;
    z-index: 1000;
    border: 1px solid var(--hud-border);
}

.skip-link:focus {
    top: 0;
}

.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;
}

.icon-sprite {
    position: absolute;
    overflow: hidden;
}

.hud-corner {
    position: fixed;
    color: var(--hud-border);
    pointer-events: none;
    z-index: 100;
}

.hud-corner--tl {
    top: var(--hud-corner-offset);
    left: var(--hud-corner-offset);
}

.hud-corner--tr {
    top: var(--hud-corner-offset);
    right: var(--hud-corner-offset);
}

.hud-corner--bl {
    bottom: calc(var(--status-bar-height) + var(--hud-corner-offset));
    left: var(--hud-corner-offset);
}

.hud-corner--br {
    bottom: calc(var(--status-bar-height) + var(--hud-corner-offset));
    right: var(--hud-corner-offset);
}

.hud-corner .corner-bracket {
    stroke: var(--hud-border);
    stroke-width: 1;
}

.hud-corner .corner-inner {
    stroke: var(--hud-muted);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
}

.hud-corner .corner-tick {
    stroke: var(--hud-muted);
    stroke-width: 0.5;
}

.hud-corner .corner-circle {
    fill: none;
    stroke: var(--hud-muted);
    stroke-width: 0.5;
}

.hud-frame {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--eink-sidebar-bg);
    border-right: 1px solid var(--hud-faint);
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    padding: 1.5rem 0;
    z-index: 10;
}

.sidebar-header {
    padding: 0 1.5rem 0.75rem;
    border-bottom: 1px solid var(--hud-faint);
    margin-bottom: 0.75rem;
}

.sidebar-fui-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--hud-faint);
}

.sidebar-section--nav {
    height: 66.66%;
    overflow-y: auto;
}

.sidebar-section--tags {
    height: 33.33%;
    overflow-y: auto;
    border-top: 1px solid var(--hud-faint);
    padding-top: 1rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1.5rem;
}

.tag-item {
    font-family: var(--font-mono);
    font-size: 12px;
    background-color: var(--eink-raised);
    border: 1px solid var(--hud-faint);
    padding: 0.25rem 0.5rem;
    color: var(--eink-text);
    white-space: nowrap;
    text-decoration: none;
}

.tag-link {
    display: inline-block;
}

.tag-link:hover {
    background-color: var(--eink-panel);
    border-color: var(--hud-border);
}

.tag-empty {
    margin: 0;
    padding: 0 1.5rem;
    color: var(--eink-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* Tags page styles */
.tags-index {
    margin-top: 1.5rem;
}

.tag-section + .tag-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--hud-faint);
}

.tag-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--eink-text);
}

.tag-anchor-icon {
    color: var(--eink-muted);
    font-weight: 400;
}

.tag-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--eink-muted);
}

.tag-pages-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-page-item {
    margin-bottom: 0.5rem;
}

.tag-page-item a {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--eink-text);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    display: inline-block;
}

.tag-page-item a:hover {
    background-color: var(--eink-raised);
    border: 1px solid var(--hud-faint);
}

.tags-empty-message {
    text-align: center;
    color: var(--eink-muted);
    font-style: italic;
    margin-top: 2rem;
}

.hud-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--eink-muted);
    white-space: nowrap;
}

.nav-list {
    list-style: none;
}

.nav-list--nested {
    padding-left: 1rem;
}

.nav-folder {
    padding: 0;
}

.nav-folder > details > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--eink-text);
    padding: 0.25rem 1.5rem;
    letter-spacing: 0.03em;
}

.nav-folder > details > summary::-webkit-details-marker {
    display: none;
}

.nav-folder > details > summary::before {
    content: "[+]";
    display: inline-block;
    width: 2rem;
    font-weight: 400;
    color: var(--eink-muted);
}

.nav-folder > details[open] > summary::before {
    content: "[−]";
}

.nav-folder > details > summary:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

.nav-item {
    display: flex;
    align-items: baseline;
    padding: 0.15rem 1.5rem;
}

.nav-item .nav-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: 0.5rem;
    color: var(--eink-muted);
    position: relative;
    top: 0.1em;
}

.nav-item.active .nav-icon {
    color: var(--eink-text);
}

.nav-item a {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--eink-text);
    text-decoration: none;
    line-height: 1.5;
    border-bottom: none;
}

.nav-item a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.nav-item.active a {
    font-weight: 700;
}

.nav-item a:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

.content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-width: 0;
    padding: 2rem clamp(1.5rem, 4vw, 3rem) 3rem;
}

.document-layout {
    width: 100%;
    margin: 0 auto;
}

article {
    min-width: 0;
}

.link-rail {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--eink-muted);
}

.link-group + .link-group {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--hud-faint);
}

.link-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--hud-faint);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--eink-text);
}

.link-count {
    color: var(--eink-muted);
    font-weight: 400;
}

.link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-entry {
    margin: 0;
}

.link-target {
    display: grid;
    grid-template-columns: 1rem 2.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0;
    color: var(--eink-text);
    text-decoration: none;
}

.link-target:hover .link-title,
.link-target:focus-visible .link-title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.link-target:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

.link-type {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    color: var(--hud-muted);
    transform: translateY(2px);
}

.link-icon {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.link-index {
    color: var(--eink-muted);
    font-size: 11px;
}

.link-title {
    min-width: 0;
    color: var(--eink-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.link-empty {
    margin: 0;
    padding-top: 0.5rem;
    color: var(--eink-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* PDF Download Section */
.pdf-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--hud-faint);
    flex-shrink: 0;
}

.pdf-container {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.pdf-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--eink-bg);
    border: 1px dashed var(--hud-faint);
    color: var(--eink-text);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease;
}

.pdf-download:hover {
    background-color: var(--eink-raised);
    border-color: var(--hud-muted);
}

.pdf-icon {
    width: 18px;
    height: 18px;
    fill: var(--eink-text);
    flex-shrink: 0;
}

.qrcode-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--hud-faint);
    flex-shrink: 0;
}

.qrcode-container {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.qrcode-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background-color: var(--eink-bg);
    border: 1px solid var(--hud-faint);
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hud-border);
    letter-spacing: 0.03em;
    font-variant-caps: small-caps;
}

h2 {
    font-size: 20px;
    border-bottom: 1px dashed var(--hud-faint);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--eink-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-style: solid;
}

a:hover {
    color: var(--eink-muted);
}

a:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

a.link-target,
a.link-target:hover {
    color: var(--eink-text);
}

ul, ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

li {
    margin-bottom: 0.25rem;
}

code {
    font-family: var(--font-mono);
    font-size: 14px;
    background-color: var(--eink-code-bg);
    padding: 0.1em 0.3em;
    border: 1px solid var(--hud-faint);
}

pre {
    background-color: var(--eink-code-bg);
    padding: 1rem;
    border: 1px solid var(--hud-faint);
    overflow-x: auto;
    margin-bottom: 1rem;
    font-size: 14px;
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
    border: none;
}

.codehilite {
    margin-bottom: 1rem;
}

.codehilite pre {
    margin: 0;
}

.codehilite code {
    background: none;
    padding: 0;
    border: none;
}

.codehilite .k,
.codehilite .kd,
.codehilite .kn,
.codehilite .kp,
.codehilite .kr,
.codehilite .kt,
.codehilite .ow {
    font-weight: 700;
    color: var(--ink-blue);
}

.codehilite .c,
.codehilite .c1,
.codehilite .cm,
.codehilite .cs,
.codehilite .cp {
    color: var(--ink-green);
    font-style: italic;
}

.codehilite .s,
.codehilite .s1,
.codehilite .s2,
.codehilite .sb,
.codehilite .sc,
.codehilite .sd,
.codehilite .sh,
.codehilite .sx,
.codehilite .sa,
.codehilite .dl {
    color: #5e7e4e;
}

.codehilite .m,
.codehilite .mi,
.codehilite .mf,
.codehilite .mb,
.codehilite .mh,
.codehilite .mo,
.codehilite .il,
.codehilite .l,
.codehilite .ld {
    color: var(--ink-ochre);
}

.codehilite .nb,
.codehilite .bp {
    color: var(--ink-teal);
}

.codehilite .nf,
.codehilite .fm {
    color: var(--ink-mauve);
}

.codehilite .nc,
.codehilite .nn,
.codehilite .no,
.codehilite .nt {
    color: #4a7a76;
}

.codehilite .nv,
.codehilite .vc,
.codehilite .vg,
.codehilite .vi {
    color: #5a6a78;
}

.codehilite .nd,
.codehilite .na {
    color: #8a6e50;
}

.codehilite .o,
.codehilite .p {
    color: #4a4e50;
}

.codehilite .err {
    color: var(--ink-red);
    border-bottom: 1px dashed var(--hud-faint);
}

.callout {
    --callout-accent: var(--ink-blue);
    position: relative;
    margin: 1.5rem 0;
    border: 1px solid var(--hud-faint);
    border-left: none;
    background: var(--eink-raised);
    padding-left: 16px;
}

.callout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    background: repeating-linear-gradient(-45deg, var(--callout-accent) 0 5px, transparent 5px 11px);
}

.callout__header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    border-bottom: 1px dashed var(--hud-faint);
    font-family: var(--font-mono);
}

.callout__icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    fill: currentColor;
    color: var(--callout-accent);
    transform: translateY(2px);
}

.callout__label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--callout-accent);
}

.callout__title {
    font-size: 13px;
    color: var(--eink-text);
}

.callout__body {
    padding: 0.6rem 1rem 0.8rem;
}

.callout__body > :last-child {
    margin-bottom: 0;
}

details.callout {
    padding-left: 16px;
}

details.callout > summary {
    cursor: pointer;
    list-style: none;
}

details.callout > summary::-webkit-details-marker {
    display: none;
}

details.callout > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4rem;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--callout-accent);
    transition: transform 0.15s ease;
}

details.callout[open] > summary::before {
    transform: rotate(90deg);
}

details.callout > summary:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

.callout--note { --callout-accent: var(--ink-blue); }
.callout--abstract { --callout-accent: var(--ink-teal); }
.callout--info { --callout-accent: var(--ink-blue); }
.callout--todo { --callout-accent: var(--ink-blue); }
.callout--tip { --callout-accent: var(--ink-green); }
.callout--success { --callout-accent: var(--ink-green); }
.callout--question { --callout-accent: var(--ink-mauve); }
.callout--warning { --callout-accent: var(--ink-ochre); }
.callout--failure { --callout-accent: var(--ink-red); }
.callout--danger { --callout-accent: var(--ink-red); }
.callout--bug { --callout-accent: var(--ink-red); }
.callout--example { --callout-accent: var(--ink-mauve); }
.callout--quote { --callout-accent: var(--ink-green); }

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 14px;
}

th, td {
    padding: 0.5rem 1rem;
    border: 1px solid var(--hud-faint);
    text-align: left;
}

th {
    background-color: var(--eink-sidebar-bg);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 12px;
}

blockquote {
    border-left: 2px solid var(--hud-faint);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--eink-muted);
    font-style: italic;
}

hr {
    border: none;
    border-top: 1px dashed var(--hud-faint);
    margin: 2rem 0;
}

img {
    max-width: 100%;
    height: auto;
}

article img {
    display: block;
    margin-inline: auto;
    width: auto;
    height: auto;
    max-width: 720px;
    max-height: 720px;
    object-fit: contain;
    cursor: zoom-in;
}

@media (max-width: 900px) {
    article img,
    .callout img {
        max-width: 100%;
    }

    .obsidian-embed {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
}

article img:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: #1a1a1a;
    cursor: zoom-out;
}

.lightbox-overlay[hidden] {
    display: none;
}

.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: #f0efeb;
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--eink-raised);
    border: 1px solid var(--hud-faint);
    color: var(--eink-text);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}

.lightbox-close:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--status-bar-height);
    background-color: var(--eink-sidebar-bg);
    border-top: 1px dashed var(--hud-faint);
    box-shadow: inset 0 1px 0 0 var(--hud-faint);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--eink-muted);
    letter-spacing: 0.05em;
    z-index: 10;
    white-space: nowrap;
    overflow: hidden;
}

.status-item {
    flex-shrink: 0;
}

.status-sep {
    margin: 0 0.5rem;
    color: var(--hud-faint);
}

.status-sep--flex {
    flex: 1;
    text-align: right;
}

.status-copyright {
    flex-shrink: 0;
    margin-left: auto;
}

.sidebar-toggle {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 50;
    background: var(--eink-raised);
    border: 1px solid var(--hud-faint);
    padding: 0.4rem;
    cursor: pointer;
    color: var(--eink-text);
    display: none;
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--eink-text);
    outline-offset: 2px;
}

@media (min-width: 1464px) {
    .document-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--link-rail-width);
        gap: var(--layout-gap);
        align-items: start;
    }

    .link-rail {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--status-bar-height) - 2rem);
        position: sticky;
        top: 2rem;
        align-self: start;
    }

    .link-rail-scrollable {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .qrcode-group {
        flex-shrink: 0;
    }
}

@media (max-width: 1463px) {
    .link-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px dashed var(--hud-faint);
    }

    .link-group + .link-group {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .link-rail-scrollable {
        display: contents;
    }

    .qrcode-group {
        grid-column: span 2;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px dashed var(--hud-faint);
    }
}

@media (max-width: 700px) {
    .link-rail {
        display: block;
    }

    .link-rail-scrollable {
        display: contents;
    }

    .qrcode-group {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px dashed var(--hud-faint);
    }

    .link-group + .link-group {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px dashed var(--hud-faint);
    }
}

@media (max-width: 900px) {
    .sidebar-toggle[hidden] {
        display: none;
    }

    .sidebar-toggle {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 40;
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 0 0 var(--hud-faint);
    }

    .sidebar-section--nav {
        height: auto;
        min-height: 60vh;
        max-height: 70vh;
    }

    .sidebar-section--tags {
        height: auto;
        min-height: 20vh;
        max-height: 30vh;
    }

    .content {
        margin-left: 0;
        padding: 1.5rem;
    }

    .hud-corner {
        display: none;
    }

    .status-bar {
        display: none;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 18px;
    }

    .content {
        padding: 1rem;
    }
}

@media (prefers-contrast: more) {
    :root {
        --eink-bg: #ffffff;
        --eink-panel: #ffffff;
        --eink-raised: #ffffff;
        --eink-text: #000000;
        --eink-muted: #000000;
        --eink-code-bg: #ffffff;
        --hud-faint: #000000;
        --hud-muted: #000000;
        --hud-border: #000000;
    }

    body::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar {
        transition: none;
    }
}

/* === FUI Components === */

.fui-gauge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--eink-muted);
    letter-spacing: 0.05em;
}

.fui-gauge__bar {
    width: 80px;
    height: 8px;
    border: 1px solid var(--hud-border);
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 2px,
        var(--hud-faint) 2px,
        var(--hud-faint) 3px
    );
    position: relative;
}

.fui-gauge__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--ink-blue);
}

.fui-gauge__label {
    min-width: 2.5em;
    text-align: right;
}

.fui-chamfered {
    position: relative;
    border: 1px solid var(--hud-border);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    background: var(--eink-raised);
    clip-path: polygon(
        12px 0, calc(100% - 12px) 0,
        100% 12px, 100% calc(100% - 12px),
        calc(100% - 12px) 100%, 12px 100%,
        0 calc(100% - 12px), 0 12px
    );
}

.fui-chamfered::before,
.fui-chamfered::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid var(--hud-border);
    pointer-events: none;
}

.fui-chamfered::before {
    top: 4px;
    left: 4px;
    border-right: none;
    border-bottom: none;
}

.fui-chamfered::after {
    bottom: 4px;
    right: 4px;
    border-left: none;
    border-top: none;
}

.fui-bracket-box {
    position: relative;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

.fui-bracket-box::before,
.fui-bracket-box::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.fui-bracket-box::before {
    top: 0;
    left: 0;
    border-top: 1px solid var(--hud-border);
    border-left: 1px solid var(--hud-border);
}

.fui-bracket-box::after {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid var(--hud-border);
    border-right: 1px solid var(--hud-border);
}

.fui-bracket-box--full::before,
.fui-bracket-box--full::after {
    width: 100%;
    height: 100%;
}

.fui-bracket-box--full .fui-bracket-tl,
.fui-bracket-box--full .fui-bracket-tr,
.fui-bracket-box--full .fui-bracket-bl,
.fui-bracket-box--full .fui-bracket-br {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.fui-bracket-box--full .fui-bracket-tl {
    top: 0;
    left: 0;
    border-top: 1px solid var(--hud-border);
    border-left: 1px solid var(--hud-border);
}

.fui-bracket-box--full .fui-bracket-tr {
    top: 0;
    right: 0;
    border-top: 1px solid var(--hud-border);
    border-right: 1px solid var(--hud-border);
}

.fui-bracket-box--full .fui-bracket-bl {
    bottom: 0;
    left: 0;
    border-bottom: 1px solid var(--hud-border);
    border-left: 1px solid var(--hud-border);
}

.fui-bracket-box--full .fui-bracket-br {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid var(--hud-border);
    border-right: 1px solid var(--hud-border);
}

.fui-dial {
    display: inline-block;
    position: relative;
}

.fui-dial svg {
    display: block;
}

.fui-dial__label {
    position: absolute;
    bottom: -1.2em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--eink-muted);
    white-space: nowrap;
}

.fui-leader {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--eink-muted);
    margin: 0.25rem 0;
}

.fui-leader__line {
    flex: 0 0 40px;
    height: 0;
    border-top: 1px solid var(--hud-muted);
}

.fui-leader__break {
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--hud-muted);
    border-bottom: 1px solid var(--hud-muted);
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin: 0 -1px;
}

.fui-leader__target {
    width: 5px;
    height: 5px;
    border: 1px solid var(--hud-border);
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 4px;
}

.fui-leader__text {
    margin-left: 0.5rem;
    letter-spacing: 0.05em;
}

.fui-data-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.fui-data-pair__key {
    color: var(--eink-muted);
    text-transform: uppercase;
}

.fui-data-pair__val {
    color: var(--eink-text);
    font-weight: 700;
}

.fui-tick-marks {
    display: flex;
    align-items: center;
    gap: 0;
    height: 12px;
}

.fui-tick {
    width: 1px;
    background: var(--hud-muted);
}

.fui-tick--short {
    height: 4px;
}

.fui-tick--medium {
    height: 8px;
}

.fui-tick--tall {
    height: 12px;
}

.fui-tick + .fui-tick {
    margin-left: 3px;
}

.fui-crosshair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
}

.fui-crosshair::before,
.fui-crosshair::after {
    content: "";
    position: absolute;
    background: var(--hud-muted);
}

.fui-crosshair::before {
    width: 1px;
    height: 100%;
}

.fui-crosshair::after {
    width: 100%;
    height: 1px;
}

/* Status bar gauges inline */
.status-gauges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-gauge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--eink-muted);
}

.status-gauge__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-green);
}

.status-gauge__dot--warn {
    background: var(--ink-ochre);
}

.status-gauge__dot--err {
    background: var(--ink-red);
}

@media print {
    .sidebar,
    .status-bar,
    .hud-corner,
    .sidebar-toggle,
    .link-rail {
        display: none;
    }

    .content {
        margin-left: 0;
        padding: 0;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}