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

html { font-size: 100%; }

body {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    font-weight: 400;
    line-height: 1.75;
    background-color: #e9e9e9;
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAABJJREFUCB1jOHDgwH8GbIDKEgBS1xA8+1ZEZgAAAABJRU5ErkJggg==);*/
    background-repeat: repeat;
    background-size: 3px 3px;
    color: #303030;
}

body.fullscreen-open { overflow: hidden; }

p { margin-bottom: 1rem; }

h1, h2, h3, h4, h5 {
    margin: 3rem 0 1.38rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.3;
}
h1 { margin-top: 0; font-size: 3.052rem; }
h2 { font-size: 2.441rem; }
h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem; }
h5 { font-size: 1.25rem; }
small { font-size: 100%; }

hr     { max-width: 100%; border-color: #f1f1f1; }
hr.hid { max-width: 100%; border-color: #f5f5f5; }

::selection {
    background-color: yellow;
    color: #303030;
    text-shadow: none !important;
}

/* ── Links ───────────────────────────────────────────────── */
a, a:visited {
    text-decoration: none;
    color: #2b2b2b;
    position: relative;
    transition: color 0.2s ease;
}
a:hover { color: #c0c0c0; }

a.fullscreen-trigger       { color: #2b2b2b; }
a.fullscreen-trigger:hover { color: #c0c0c0; }

p a, span a             { color: #c0c0c0; }
p a:hover, span a:hover { color: #303030; }

p a.about             { color: #c0c0c0 !important; text-decoration: none; }
p a.about:hover       { color: #303030 !important; }

a.changelog, a.alt         { color: #c0c0c0; }
a.changelog:hover, a.alt:hover { color: #303030; }
span.alt { color: #303030; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(92,92,92,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(92,92,92,0.4); }

/* ── Page wrapper ────────────────────────────────────────── */
.page {
    position: relative;
    margin: 0 auto;
    padding: 26px 12px 12px 12px;
    z-index: 10;
    max-width: 960px;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.nav-pill {
    display: flex;
    align-items: center;
    background: #2b2b2b;
    border-radius: 6px;
    padding: 6px 16px;
    list-style: none;
    gap: 0;
}
.nav-pill li { display: flex; align-items: center; }
.nav-pill li + li::before {
    content: '·';
    color: rgba(255,255,255,0.3);
    margin: 0 8px;
    font-size: 14px;
    line-height: 1;
}
.nav-pill a {
    color: #ffffff;
    font-size: 12px;
    letter-spacing: .02em;
    padding: 2px 0;
    transition: opacity .15s;
}
.nav-pill a:hover { opacity: 0.6; color: #ffffff; }

.site-logo {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    user-select: none;
}
.site-logo .co  { color: #2b2b2b; }
.site-logo .red { color: #cc0000; }
.site-logo .tm  {
    font-size: 10px;
    font-weight: 400;
    color: #c0c0c0;
    vertical-align: super;
    margin-left: 1px;
}

/* ── Section badge ───────────────────────────────────────── */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.section-badge-pill {
    background: #2b2b2b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
    padding: 3px 12px;
    border-radius: 6px;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    white-space: nowrap;
}
.section-badge-path {
    font-size: 12px;
    color: #888888;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}
.section-badge-path a       { color: #888888; }
.section-badge-path a:hover { color: #303030; }
.section-badge-sep          { color: #c0c0c0; margin: 0 3px; }

/* ── Panel / module container ────────────────────────────── */
.panel-block {
    background-color: #fdfbf9;
    box-shadow: 0px 1px 8px rgba(137,137,139,0.2);
    border-radius: 4px;
    border: none !important;
    margin-bottom: 24px;
}
.panel-body    { padding: 24px 28px; }
.panel-section { margin-bottom: 28px; }
.panel-section:last-child { margin-bottom: 0; }

.panel-heading {
    font-size: 10px;
    font-weight: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c0c0c0;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(92,92,92,0.15);
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}
.panel-text { font-size: 12px; color: #888888; line-height: 1.7; }
.panel-text + .panel-text { margin-top: 10px; }

.panel-list { list-style: none; font-size: 12px; color: #888888; }
.panel-list li {
    padding: 4px 0 4px 12px;
    border-bottom: 1px solid rgba(92,92,92,0.15);
    position: relative;
}
.panel-list li::before { content: '›'; position: absolute; left: 0; color: #c0c0c0; }

.panel-callout {
    border-left: 2px solid rgba(92,92,92,0.3);
    padding: 10px 14px;
    font-size: 12px;
    color: #888888;
    line-height: 1.6;
    background: #f5f5f5;
}
.panel-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: #c0c0c0;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ── Indxr block ─────────────────────────────────────────── */
.indxr-block {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #b1b1b1;
    background-color: #c0c0c0;
    overflow: hidden;
    box-shadow: 0px 0px 4px rgba(137,137,139,0.2);
}

/* Toolbar */
.indxr-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 0px;
    background-color: #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 0 4px 0px;
    border-left: 4px solid #c0c0c0;
    margin-left: 6px;
    /*font-family: 'IBM Plex Mono', 'Courier New', monospace;*/
    font-size: 14px;
    color: #282828;
    background-color: none !important;
}
.breadcrumb-label {
    /*color: #c0c0c0;*/
    font-size: 14px;
    font-weight: bold;
    margin-right: 6px;
}
.breadcrumb a {
    display: inline-block;
    white-space: nowrap;
    margin-right: 4px;
    color: #282828;
    font-size: 14px;
    transition: color .15s;
}
.breadcrumb a:hover { color: #2b2b2b; }

.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    color: #282828;
    margin-right: 6px;
    transition: color .15s;
    text-decoration: none;
}
.breadcrumb-home:hover { color: #000; }
.breadcrumb-home .icon { width: 14px; height: 14px; color: inherit; }

.breadcrumb-sep           { margin: 0 8px; color: #888888; font-weight:bold; }
.breadcrumb .current      { color: #2b2b2b; font-size:14px; font-weight:bold;}

/* Search */
.search-wrap { position: relative; }

.search-input {
    padding: 2px 8px;
    margin: 0;
    border-radius: 4px;
    /*font-size: small;*/
    border: 1px solid rgba(92,92,92,0.15);
    background-color: #fdfbf9;
    color: #282828;
    outline: none;
    width: 180px;
    transition: border-color .15s, width .2s;
    /*font-family: 'IBM Plex Mono', 'Courier New', monospace;*/
    font-size: 14px;
}
.search-input:focus {
    outline: none;
    border: 1px solid rgba(245,245,245,0.35);
    width: 220px;
}
.search-input::placeholder { color: #c0c0c0; }

.search-results {
    display: none;
    position: absolute;
    z-index: 1;
    right: 0;
    width: 280px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(253,251,249,1.0);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid rgba(92,92,92,0.15);
    padding: 10px;
    /*font-size: small;*/
}
.search-results.active { display: block; }

.search-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid rgba(92,92,92,0.15);
    /*font-size: 11px;*/
    color: #2b2b2b;
    transition: background .1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item.highlighted { background: rgba(245,245,245,0.9); }

/* ── Indxr table ─────────────────────────────────────────── */
.indxr-body { overflow-x: auto; }

.indxr-table {
    border-collapse: collapse;
    width: 100%;
    background-color: transparent;
}

.indxr-table,
.indxr-table th,
.indxr-table td { border: none; }

.indxr-table thead tr {
    background-color: #fefefe;
    border: none !important;
}

.indxr-table thead th {
    padding: 10px 5px 10px 10px; // top right bottom left
    background-color: #fefefe;
    border: none !important;
    vertical-align: middle;
    font-weight: bold;
    /*font-size: small;*/
    text-align: left;
    color: #303030;
}

.indxr-table tbody     { border: none; }
.indxr-table tbody td  {
    background-color: #fefefe;
    padding: 8px 0px 8px 8px;
    vertical-align: middle;
}

.indxr-table tr.row-item:hover td { background-color: #f5f5f5; }

/* Icon col */
td.col-icon, th.col-icon {
    /*width: 5% !important;
    max-width: 5% !important;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Name col */
td.col-name, th.col-name {
    /*width: 45% !important;
    max-width: 45% !important;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
padding: 0; margin: 0;
}
td.col-name a { color: #2b2b2b; display: block; /*transition: color 0.2s ease;*/ }
td.col-name a:hover { /*color: #c0c0c0;*/ }

/* Modified col */
td.col-modified, th.col-modified {
    width: 30% !important;
    max-width: 30% !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c0c0c0;
    /*font-size: small;*/
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* Size col */
td.col-size, th.col-size {
    width: 20% !important;
    max-width: 20% !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c0c0c0;
    /*font-size: small;*/
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* Description row */
tr.row-desc td {
    background-color: #fefefe;
    padding: 0 10px 6px 48px;
    //font-size: 0.9em;
    color: #c0c0c0;
    line-height: 1.7;
}
tr.row-item:has(+ tr.row-desc) td { border-bottom: none; }

th.right {
    text-align:center !important;
}

/* SVG icons */
.icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    color: rgba(43,43,43,0.35);
    flex-shrink: 0;
}
tr.row-item:hover .icon   { color: rgba(43,43,43,0.6); }
.search-result-item .icon { color: #c0c0c0; }

/* ── Indxr footer ────────────────────────────────────────── */
/* Lives OUTSIDE .indxr-block in markup */
.indxr-footer {
    position: relative;
    background: rgb(192,192,192);
    color: inherit;
    font-size: small;
    padding: 4px 10px 4px 12px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid rgb(192,192,192);
    border-left: 1px solid #b1b1b1;
    border-right: 1px solid #b1b1b1;
    border-bottom: 1px solid #b1b1b1;
    margin-top: -2px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    font-family: Consolas, monospace;
    box-shadow: 0px -2px 4px rgba(0,0,0,0.15);
}
span.window_footer_design { display: block; }

/* ── Slidr block ─────────────────────────────────────────── */
.slidr-block { margin-bottom: 32px; }

.slidr-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16/7;
    background-color: #fefefe;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dedede;
    box-shadow: 0px 1px 8px rgba(137,137,139,0.2);
    cursor: pointer;
}

.slidr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
    position: absolute;
    top: 0; left: 0;
}
.slidr-img.active { opacity: 1; }

.slidr-counter {
    position: absolute;
    top: 20px; left: 20px;
    background-color: rgba(245,245,245,0.65);
    box-shadow: 0px 1px 4px rgba(48,48,48,0.2);
    color: #303030;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    pointer-events: none;
}

.slidr-expand {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(245,245,245,0.65);
    box-shadow: 0px 1px 4px rgba(48,48,48,0.2);
    border: none;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #303030;
    display: flex;
    align-items: center;
    transition: background .15s;
}
.slidr-expand:hover { background: rgba(245,245,245,0.95); }
.slidr-expand .icon { color: inherit; width: 13px; height: 13px; }

.slidr-nav {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(245,245,245,0.65);
    box-shadow: 0px 1px 4px rgba(48,48,48,0.2);
    border-radius: 4px;
}

.slidr-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(48,48,48,0.3);
    cursor: pointer;
    transition: background .2s;
    border: none;
    padding: 0;
}
.slidr-dot.active { background: #303030; }

.slidr-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #c0c0c0;
    font-size: 11px;
    letter-spacing: .1em;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ── Fullscreen overlay ──────────────────────────────────── */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    cursor: zoom-out;
}
.overlay.active { display: flex; }

.overlay-media {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    margin: auto;
    display: block;
}

.overlay-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.overlay-btn {
    background: rgba(245,245,245,0.65);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
    border: none;
    color: #2b2b2b;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 5px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s ease, background .15s;
    text-decoration: none;
}
.overlay-btn:hover  { color: #fefefe; background: rgba(245,245,245,0.75); }
.overlay-btn:active { filter: opacity(50%); }

.overlay-counter {
    font-size: 11px;
    color: rgba(245,245,245,0.8);
    letter-spacing: .08em;
    min-width: 48px;
    text-align: center;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ── Delta notification HUD ──────────────────────────────── */
#delta-notification {
    position: fixed;
    bottom: 19px;
    right: 27px;
    display: flex;
    gap: 20px;
    z-index: 9999;
}
.notification {
    display: flex;
    align-items: center;
    background-color: rgba(192,192,192,0.65);
    box-shadow: 0px 1px 4px rgba(48,48,48,0.2);
    border: 1px solid rgba(92,92,92,0.15);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: small !important;
}
.notification-icon { font-size: 24px; margin-right: 10px; color: #2b2b2b; }
.delta-info        { color: #2b2b2b; }

/* ── Misc ────────────────────────────────────────────────── */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #2b2b2b;
    background-color: rgba(245,245,245,0.65);
    box-shadow: 0px 1px 4px rgba(48,48,48,0.2);
    padding: 0px 8.25px;
    border-radius: 4px;
    text-decoration: none;
}
#back-to-top:hover  { color: #fefefe; transition: color 0.2s ease; }
#back-to-top:active { filter: opacity(50%); transition: color 0.2s ease; }

.centered-image { display: block; margin: 0 auto; padding: 0; text-align: center; }

video { box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }
audio { border-radius: 8px !important; box-shadow: 0px 1px 6px rgba(0,0,0,0.3); }

ul.a { padding-left: 20px; color: inherit; list-style: none; }
ul.a li.a { padding: 8px 8px 8px 0; position: relative; }
ul.a li.a::before { content: '\2022'; color: #c0c0c0; position: absolute; left: -24px; }
ul.a li.a span    { color: inherit; display: inline; }

.dot {
    position: relative; margin: 0 auto;
    width: 8px; height: 9px;
    background-color: #c0c0c0; border-radius: 6px;
    border-bottom: 1px solid #fff;
}
.sm-dot {
    width: 4px; height: 5px;
    background-color: #c0c0c0; border-radius: 4px;
    border-bottom: 1px solid #fff;
}

p.error-message, p.success-message { padding: 12px 12px 6px 12px; }
span.footer { text-shadow: 0px 1px #fff; }
span.g { background-color: #f5f5f5; color: #2b2b2b; border-radius: 6px; padding: 2px 6px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .page           { padding: 12px 10px 32px; }
    .site-header    { margin-bottom: 20px; }
    .nav-pill       { padding: 5px 12px; }
    .nav-pill a     { font-size: 11px; }
    .site-logo      { font-size: 22px; }
    .search-input   { width: 130px; }
    .search-input:focus { width: 160px; }
    .slidr-stage    { aspect-ratio: 4/3; }
    td.col-modified, td.col-size { display: none; }
}