@font-face {
    font-family: 'PixelifySans';
    src: url('fonts_website/UbuntuMono-Regular.ttf') format('truetype');
    font-display: swap;
}


:root {
    --font-family-main: 'PixelifySans', monospace;
    --font-ui: 12px;
    --font-dots-sm: 14px;
    --font-dots-md: 14px;
    --font-loading-grid: 14px;
    --text-content-fontsize: 14px;
    --accent: rgb(0, 0, 255);                              /* tree active item, breadcrumb active, 3d label highlight, 3d slice hover outline*/
    --accent-b: #222;                            /* tree hover bg, stack-label hover bg, search match bg, scrollbar thumb */
    --accent-c: rgb(255, 255, 255);                 /* mobile div-nav-back */
    --accent-d: rgb(255, 255, 255);                  /* mobile div-nav-fwd */


    --accent-border: #222;                       /* content-div borders (desktop), page-separator (desktop) */
    --accent-b-border: rgba(255,255,255, 0.1);   /* floating menu (#tree) border */
    --accent-border-mobile: #111;                /* all mobile borders (tree, content-div, page-separator) */
    --text: white;                               /* body text, tree links, tree search input, breadcrumb non-active, tree highlighted items */
    --text-dim: #444;                            /* dimmed tree items (unrelated to current node) */
    --text-muted: #555;                          /* nav arrows, strikethrough tree items, page-label, search placeholder */
    --link: white;                               /* <a> tags */
    --bg: black;                                 /* body bg, #tree bg, 3d scene clear color, .div-label (breadcrumb) bg */

    /* 3D stack labels */
    --label-bg: black;                           /* .stack-label background */
    --label-text: white;                         /* .stack-label text color */
    --label-border-color: white;                 /* .stack-label border color */
    --label-border-width: 1px;                   /* .stack-label border thickness */
    --label-border-radius: 13px;                 /* .stack-label corner roundness */
    --label-line-height: 1.6;                    /* .stack-label line height */
    --label-deco-color: #666;                    /* .nav-deco - dots between path parts */
    --label-deco-font-size: 9px;                 /* .nav-deco font-size */
    --label-count-color: white;                  /* .nav-count - (N) count badge */
    --label-ancestor-opacity: 0.7;               /* .nav-ancestor-label - parent labels above group */
    --label-padding: 2px 4px;                    /* inner padding on label text spans */
    --label-shadow: none;                        /* text-shadow / box-shadow on labels (e.g. 0 0 4px black) */
    --label-hover-bg: var(--accent-b);           /* hover bg on label spans */

    /* 3D nav wires (SVG) */
    --wire-color: white;                         /* main wire + arrow heads */
    --wire-dim-color: rgba(255,255,255,0.3);     /* dim wires (sibling/child) + their arrows */
    --wire-width: 2px;                           /* all wires + arrows */
    --wire-ancestor-color: #666;                 /* .nav-wire-path-ancestor */
    --wire-ancestor-dash: 2 2;                   /* stroke-dasharray for ancestor wires */
    --wire-curve-radius-source: 200px;            /* corner radius near the source label */
    --wire-curve-radius-target: 30px;            /* corner radius near the target label */
    --wire-corner-position: 0.8;                  /* horizontal corner position from source to target (0.3 = bend closer to source) */
    --label-dim-opacity: 0.6;                    /* opacity of unrelated labels when something is selected */

    /* Hover bbox */
    --hover-hull-width: 1px;                     /* hull outline thickness */
    --hover-hull-margin: 0.15;                   /* world-space offset between geometry and outline (units, not px) */
    --hover-3dbox-width: 1;                      /* 3D box line thickness (unitless, Three.js LineMaterial) */
    --hover-mask-display: block;                 /* set to 'none' to disable dim overlay */
    --hover-hull-display: block;                 /* set to 'none' to disable hull outline */
    --hover-hull-opacity: 1;                     /* hull stroke opacity */

    /* Mobile overrides */
    --hover-hull-margin-mobile: 0.05;
    --hover-mask-opacity-mobile: 0.8;
    --hover-3dbox-width-mobile: 0.0001;
    --hover-hull-width-mobile: 1px;
    --hover-hull-opacity-mobile: 0.1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background: var(--bg); 
    color: var(--text); 
    font-family: var(--font-family-main);
    font-size: var(--font-ui, 11px);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#tree {
    position: fixed;
    min-width: 280px;
    width: max-content;
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    z-index: 1000;
    border-radius: 0px;
    cursor: grab;
    background: var(--bg);
    border: 1px solid var(--accent-b-border);
}

#tree-content {
    flex: 1;
    overflow-y: auto;
}
#nav-back, #nav-fwd, #tree-expand-all {
    cursor: pointer;
    color: var(--text-muted);
    font-family: var(--font-family-main);
    font-weight: 900;
    font-size: calc(var(--font-ui) + 2px);
    user-select: none;
    padding: 0 3px;
}
#nav-back { margin-left: auto; }
#nav-back:hover, #nav-fwd:hover, #tree-expand-all:hover { color: var(--text) !important; }
#tree-legend {
    padding-top: 10px;
    padding-bottom: 4px;
    font-family: var(--font-family-main);
    font-size: 11px;
    color: #444;
    display: flex;
    gap: 10px;
    align-items: center;
}

#tree-search {
    width: 60%;
    padding: 4px 6px;
    background: rgba(0,0,0,0);
    color: var(--text);
    border: none;
    font-family: var(--font-family-main);
    font-size: var(--font-ui, 11px);
    outline: none;
}
#tree-search::placeholder {
    color: var(--text-muted);
}

#content { 
    flex: 1; 
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.tree-item { white-space: pre; }
.tree-link { cursor: pointer; color: var(--text); user-select: none; }
.tree-caret:hover, .tree-name:hover, .tree-link.tree-hover { background: var(--accent-b); }
.tree-caret { font-weight: 900; font-size: calc(var(--font-ui) + 2px); margin-right: 4px; }
.content-div {
    border-left: 1px solid var(--accent-border);
    border-bottom: 1px solid var(--accent-border);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.div-label {
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--bg);
    padding: 2px 5px;
    z-index: 100;
}

.text-content {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.text-page {
    min-height: 100%;
    display: flex;
    position: relative;
}

.text-page-inner {
    width: min(90%, max(50%, 600px));
    margin: auto;
    padding: 100px 20px 60px;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.text-page-inner pre,
.text-page-inner code {
    overflow-x: auto;
    max-width: 100%;
}

.text-page-inner [style*="white-space: pre"],
.text-page-inner [style*="white-space:pre"],
.text-page-inner .filetree {
    overflow-x: auto;
    max-width: 100%;
}

.text-page-inner > div,
.text-page-inner > table {
    max-width: 100%;
    overflow-x: auto;
}

.text-page-inner [style*="grid"] > *,
.text-page-inner .columns_2 > *,
.text-page-inner .columns_3 > *,
.text-page-inner .columns_2_left_wide > *,
.text-page-inner .columns_2_right_wide > *,
.text-page-inner .config-columns > * {
    min-width: 0;
    /* overflow-x: auto; */
}

.text-page-inner:has(> .text_center_fullscreen) {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#label-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}
.stack-label {
    display: none;
    border: var(--label-border-width) solid var(--label-border-color);
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    pointer-events: none;
    cursor: pointer;
    color: var(--label-text);
    font-family: var(--font-family-main);
    font-size: var(--font-ui, 11px);
    user-select: none;
    background: var(--label-bg);
    border-radius: var(--label-border-radius);
    line-height: var(--label-line-height);
    white-space: nowrap;
    text-shadow: var(--label-shadow);
}
.stack-label span { pointer-events: auto; }
.stack-label > span[data-path]:hover { background: var(--label-hover-bg); border-radius: inherit; }
.stack-label:has(> span[data-path]:hover) { background: var(--label-hover-bg) !important; border-color: var(--label-hover-bg) !important; }
.stack-label.label-selected { background: white !important; color: black !important; border-color: white !important; }
.stack-label.label-selected > span[data-path] { color: black !important; background: white !important; border-radius: inherit; }
.stack-label .nav-deco { color: var(--label-deco-color); font-size: var(--label-deco-font-size); }
.stack-label .nav-count { color: var(--label-count-color); margin-left: 2px; }
.nav-ancestor-label { opacity: var(--label-ancestor-opacity); }

.nav-wire-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; shape-rendering: crispEdges; }

.nav-wire-svg path { fill: none; stroke: var(--wire-color); stroke-width: var(--wire-width); }
.nav-wire-svg .nav-wire-path-group path { stroke-width: var(--wire-width); }
.nav-wire-svg .nav-wire-path-ancestor-group path { stroke: var(--wire-ancestor-color); stroke-width: var(--wire-width); stroke-dasharray: var(--wire-ancestor-dash); }
.nav-wire-svg .nav-wire-path-dim-group path { stroke: var(--wire-dim-color); stroke-width: var(--wire-width); }
.nav-wire-svg .hover-bbox-dim { fill: black; fill-opacity: var(--hover-mask-opacity, 0.4); pointer-events: none; display: var(--hover-mask-display); }
.nav-wire-svg .hover-hull { fill: none; stroke-width: var(--hover-hull-width); stroke-opacity: var(--hover-hull-opacity, 1); pointer-events: none; display: var(--hover-hull-display); }
.wire-arrow line { stroke: var(--wire-color); stroke-width: var(--wire-width); stroke-linecap: round; stroke-linejoin: round; }
.wire-arrow-dim line { stroke: var(--wire-dim-color); stroke-width: var(--wire-width); }
.dot-sm { font-size: var(--font-dots-sm, 7px); }
.dot-md { font-size: var(--font-dots-md, 9px); }
canvas { display: block; width: 100%; height: 100%; }

.div-nav {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 4px;
    z-index: 100;
    font-size: 20px; 
}
.div-nav-back, .div-nav-fwd {
    cursor: pointer;
    padding: 2px 6px;
    font-weight: bold;
    user-select: none;
}
.div-nav-back { color: rgb(255, 255, 255); }
.div-nav-fwd { color: rgb(255, 255, 255); }

/* debug section for d shortcut */

#debug-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #333;
    font-family: var(--font-family-main);
    font-size: var(--font-ui, 11px);
    color: #ccc;
}
#debug-section-title {
    margin-bottom: 4px;
    color: #444;
}
.debug-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.debug-row input {
    margin: 0;
    cursor: pointer;
}





/* text highlight bg spritesheet image on single stacks */

/* Spritesheet background */

.ss-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

.ss-img-wrapper {
    position: relative;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.ss-bg-img {
    object-fit: contain;
    image-rendering: pixelated;
}

.ss-highlight {
    position: absolute;
    border: 2px solid var(--accent);
    pointer-events: none;
    display: none;
    z-index: 2;
    box-sizing: border-box;
}

.ss-info-label {
    position: absolute;
    bottom: -20px;
    left: 0;
    display: none;
    pointer-events: none;
    z-index: 2;
    font-family: var(--font-family-main);
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    padding: 2px 4px;
}

.ss-crop-preview {
    --ss-crop-size: 90;
    --ss-crop-narrow-threshold: 768;
    position: absolute;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.ss-crop-preview.ss-crop-narrow {
    z-index: 2;
}







/* STYLING CONTENT */

.page-dot {
    margin-left: 4px;
}



.page-label {
    position: absolute;
    bottom: 10px;
    left: 5px;
    font-family: var(--font-family-main);
    font-size: var(--font-page-index, 10px);
    color: var(--text-muted);
}

.page-separator {
    border: none;
    border-top: 1px solid var(--accent-border);
    margin: 0;
    padding: 0;
}


.home_inner {
    width: clamp(50%, 100% - 400px, 100%);
    max-width: 700px;
    margin: auto 0;
}


.text_center_fullscreen {
    /* font-size: var(--text-content-fontsize, 5px); */
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    line-height: 1;
}

/* Image Grids */
.image_grid_50px_labeled {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 2px;
}
.image_grid_50px_labeled .item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
.image_grid_50px_labeled .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_grid_50px_labeled .item span {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 1px 2px;
}

.image_grid_100px_labeled {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 4px;
}
.image_grid_100px_labeled .item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
.image_grid_100px_labeled .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_grid_100px_labeled .item span {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 4px;
}

.image_grid_200px_labeled {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}
.image_grid_200px_labeled .item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
.image_grid_200px_labeled .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_grid_200px_labeled .item span {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 3px 6px;
}

.image_center_fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.image_center_fullscreen img {
    width: 100%;
    height: auto;
}

.image_center_fullscreen span {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 3px 6px;
}

.image_fullscreen_contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image_fullscreen_cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image_fullwidth {
    width: 100%;
    height: auto;
}

.image_fullheight {
    width: auto;
    height: 100%;
}

.pdf_viewer,
.yt_fullscreen,
.web_fullscreen {
    width: 100%;
    height: 100%;
    border: none;
}

.text_inverted {
    color: black;
    background: white;
    padding: 2px 5px;
}
.text_inverted * {
    color: black;
    background: transparent;
}

a {
    color: var(--link);
}

.title_large {
    font-size: 36px;
    text-align: left;
    margin: 15px 0;
}

.title_medium {
    font-size: 24px;
    text-align: left;
    margin: 10px 0;
}

.title_small {
    font-size: 18px;
    text-align: left;
    margin: 5px 0;
}

.columns_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.columns_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.columns_2_left_wide {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.columns_2_right_wide {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

#info-zoom, #info-stacks, #info-images, .info-sep {
    color: #444;
    font-size: 11px;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 4px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--accent-b);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-b) transparent;
}

@media (max-width: 768px) {

    :root {
        --hover-hull-margin: var(--hover-hull-margin-mobile);
        --hover-mask-opacity: var(--hover-mask-opacity-mobile);
        --hover-3dbox-width: var(--hover-3dbox-width-mobile);
        --hover-hull-width: var(--hover-hull-width-mobile);
        --hover-hull-opacity: var(--hover-hull-opacity-mobile);
    }





   /* this removes the pres centering from desktop, so its cleaner on mobile    */

.text-page {
    display: block;
}
.text-page-inner {
    width: 100%;
    margin: 0;
    padding: 0;
}






    :root {
        --font-ui: 0.7em;
    }
    body {
        flex-direction: column;
        overflow: hidden;
        height: 100vh;
    }
    #tree {
        border: none;
        border-bottom: 1px solid var(--accent-border-mobile);
        position: relative !important;
        top: unset !important;
        left: unset !important;
        width: 100% !important;
        max-height: 30vh;
        min-width: unset;
        cursor: default;
        flex-shrink: 0;
        height: auto !important;
    }
    #tree-content {
        max-height: 30vh;
    }
    #content {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .content-div {
        border-left: 1px solid var(--accent-border-mobile);
        border-bottom: 1px solid var(--accent-border-mobile);
        min-height: 0 !important;
        flex-direction: column !important;
    }
    .div-label {
        display: none;
    }
    #tree-legend {
        display: none !important;
    }
    #info-zoom, #info-stacks, #info-images, .info-sep {
        display: none;
    }
    .div-nav-fwd,
    .div-nav-back {
        font-size: 35px;
    }
    .div-nav-back {
        color: var(--accent-c);
    }
    .div-nav-fwd {
        color: var(--accent-d);
    }
    body {
        touch-action: manipulation;
    }
    .stack-label {
        pointer-events: auto;
    }
    .content-div canvas {
        touch-action: none;
    }
    .home_inner {
        width: 90%;
    }
    .page-separator {
        border-top: 1px solid var(--accent-border-mobile);
    }
    /* .text_center_fullscreen {
        font-size: 14px;
    } */
}


::selection {
    background: white;
    color: black;
}