/* ===== CSS VARIABLES ===== */

:root {
    /* Colors */
    --background-primary: rgba(0, 0, 0, 0.9);
    --background-secondary: rgb(10, 10, 10);
    --background-terciary: rgb(255, 255, 255);
    --text-primary: #f9f9f9;
    --text-secondary: #96969b;

    /* Typography */
    --font: 'JetBrains Mono', 'SF Mono', monospace;
    
    /* Lenghts */
    --spacing-md: 0.5rem;
    --spacing-lg: 1.5rem;
    --padding: clamp(0.3rem, 3cqw, 0.6rem);
    
    /* Border */
    --border-radius: 0.5rem;
    --border-color: transparent;
    --border-shadow: 0 0 0 2px rgb(192, 192, 192);
        
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    font-family: var(--font);
    background-color: var(--background-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 7rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { 
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    /* No default margin-bottom for h4 - controlled by specific classes */
}
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ===== PAGE LAYOUT ===== */

.page-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;                                                                                                                             
    overflow-y: scroll;                                                                                                                                        
    scroll-snap-type: y mandatory;                                                                                                                              
    scroll-behavior: smooth;
}

/* ===== WINDOWS ===== */

.window {
    position: absolute;
    background-color: var(--background-primary);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    border: var(--border-color);
    box-shadow: var(--border-shadow);
    border-radius: var(--border-radius);
    container-type: inline-size;
    z-index: 2;
    pointer-events: none;
}

/* Disable text selection on all window containers and their children */
.window, .window * {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}

/* Top-right nav bar: styled like other windows */
.navbar {
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 65vh;
    height: 5vh;
    /* Expose horizontal padding as a variable so it can be tuned and observed directly */
    --navbar-pad-x: clamp(0.01rem, 1cqw, 0.8rem);
    --navbar-pad-y: clamp(0.3rem, 5cqh, 0.8rem);
    padding: var(--navbar-pad-y) var(--navbar-pad-x);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    /* Ensure cqw/cqh relate to this container */
    container-type: size;
}


/* Make navbar interactive */
.navbar.window { pointer-events: auto; }

/* During intro, keep the whole navbar invisible to avoid seeing pre-lock positions before JS runs */
.navbar[data-intro-pending="true"] { opacity: 0; }

/* Hide navbar texts before intro typing starts; keep divider visible and button borders visible */
.navbar[data-intro-pending="true"] .nav-link,
.navbar[data-intro-pending="true"] .lang-btn { color: transparent; }

/* Inner layout: single row with equal gaps between neighbors */
.navbar-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* prevent wrapping that could stack items */
    align-items: center;
    justify-content: flex-start; /* use gap X uniformly between items */
    gap: var(--nav-gap); /* base spacing between all siblings */
    width: 100%;
    height: 100%;
    position: relative; /* enable precise sizing tricks for divider */
}

/* Responsive master spacing variable X for navbar groups */
.navbar {
    --nav-gap: clamp(0.35rem, 18cqh, 2rem); /* X */
    --btn-pad-x: clamp(0.15rem, 6cqh, 0.4rem); /* horizontal padding for buttons */
    --lang-gap: clamp(0.15rem, 1.6cqw, 0.5rem); /* fixed smaller gap inside EN/ES cluster */
}

.navbar-left {
    /* Flatten into parent flex row so each child participates with the same X gap */
    display: contents;
}

/* When Spanish is active, adjust only the master gap variable X */
html[lang="es"] .navbar {
    --nav-gap: clamp(0.25rem, 15cqh, 1.6rem);
    --btn-pad-x: clamp(0.12rem, 5cqh, 0.34rem);
    --lang-gap: clamp(0.12rem, 1.4cqw, 0.45rem);
    /* Optionally adjust horizontal padding per locale if needed */
    /* --navbar-pad-x: clamp(0.25rem, 3.2cqw, 0.65rem); */
}

/* Right-side language cluster removed; all items are peers inside .navbar-inner */

/* Thin divider treated as a sibling item with fixed width; participates in the same gap logic */
.navbar .nav-divider {
    display: inline-block;
    width: 1.25px; /* required fixed width */
    height: calc(1em + 0.24em); /* match line-height(1em) + vertical paddings (2*0.12em) */
    background-color: var(--background-terciary);
    border-radius: 0;
    box-sizing: border-box;
    flex: 0 0 auto; /* do not grow/shrink */
    align-self: center; /* vertically align to buttons */
}

/* Text-only buttons: strict shrink-wrap to text (no grow/shrink) */
.navbar .nav-link,
.navbar .lang-btn {
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0px;
    box-shadow: none; /* remove ring */
    border-radius: calc(var(--border-radius) / 2);
    color: var(--text-secondary);
    font-family: var(--font);
    /* Use width-relative size to avoid horizontal overflow when navbar narrows */
    font-size: clamp(0.55rem, 3.3cqw, 1rem);
    line-height: 1;
    padding: 0.12em 0; /* eliminate horizontal padding */
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex; /* shrink to fit text content */
    align-items: center;
    justify-content: flex-start;
    position: relative; /* ensure they participate in normal flow layering */
    box-sizing: border-box; /* width includes padding and border */
    width: max-content; /* ensure tight wrap to text */
    min-width: 0; /* avoid any UA min widths */
    flex: 0 0 auto; /* do not grow or shrink; width = content */
    overflow: hidden; /* safety: prevent visible spill during brief mismatch */
}
/* Edge padding resets no longer needed since buttons have zero padding */
.navbar-inner .nav-link:first-of-type { padding-left: 0; }
.navbar-inner .lang-btn:last-of-type { padding-right: 0; }

/* Active section link */
.navbar .nav-link.active { color: var(--text-primary); }
/* Active language */
.navbar .lang-btn.active { color: var(--text-primary); }


/* Optional hover for clarity */
.navbar .nav-link:hover,
.navbar .lang-btn:hover {
    color: var(--text-primary);
    box-shadow: none; /* no hover ring */
}


/* ===== MESSAGE BOARD ===== */

.message-board {
    width: 20%;
    height: auto;                                                                                                                                  
    overflow-y: visible;                                                                                                                         
    scroll-snap-type: none;                                                                                                                  
    scroll-behavior: auto; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
    pointer-events: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.message-board::-webkit-scrollbar {
    display: none;
}

.message-display {
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    width: 40vh;
    height: 45vh;
    padding: clamp(0.3rem, 5cqw, 0.8rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.message-title {
    font-family: var(--font);
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: clamp(0.85rem, 9cqw, 5rem);
    line-height: 1;
    opacity: 1;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
    margin-bottom: clamp(0.1rem, 3.5cqw, 0.9rem);
}

.message-display hr {
    width: 95%;
    height: 1px;
    background-color: var(--background-terciary);
    margin: 0 auto;
    border: 0;
    flex-shrink: 0;
    opacity: 1;
}

.message-content {
    font-family: var(--font);
    font-weight: 400;
    padding-left: clamp(0.25rem, 2.5cqw, 0.65rem);
    padding-right: clamp(0.25rem, 2.5cqw, 0.65rem);
    font-size: clamp(0.4rem, 6.5cqw, 4.3rem);
    margin-top: clamp(0.1rem, 4.5cqw, 0.9rem);
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    line-height: 1.325;
}

.message-text {
    color: var(--text-secondary);
    margin: 0;
    opacity: 1;
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
    word-break: keep-all;
}


.scrollable-container {
    height: 100%;
}

.scroll-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 0;
}


/* ===== SELECTOR ===== */

/* Hide initial ASCII in selector section 1 until JS starts typing */
.selector[data-intro-pending="true"] .selector-content[data-section="1"] .selector-ascii { visibility: hidden; }

 .selector {
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    width: 40vh;
    height: 45vh;
    /* Match message board window padding for consistent overall padding */
    padding: clamp(0.3rem, 5cqw, 0.8rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Make the selector interactive (override .window default) */
    pointer-events: auto;
}

/* Ensure selector can receive clicks even though .window defaults to none */
.selector.window { pointer-events: auto; }

/* Disable text selection inside the selector (links/buttons remain clickable) */
.selector, .selector * {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}

.selector-display {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.selector-content[hidden] {
    display: none !important;
}

.selector-content {
    flex: 1;
    display: flex;
    align-items: flex-start; /* top during typing */
    justify-content: center; /* centered horizontally */
    padding-left: clamp(0.25rem, 2.5cqw, 0.65rem);
    padding-right: clamp(0.25rem, 2.5cqw, 0.65rem);
    padding-top: clamp(0.1rem, 1.5cqw, 5rem);
}

/* For non-ASCII selector sections (2,3,4), stack like the message board by default */
.selector-content:not([data-section="1"]) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

/* Make selector section 2 overall padding equal the message board window padding */
.selector-content[data-section="2"] {
    /* Remove inner container padding so the window padding is the only padding layer */
    padding: 0;
    /* Apply requested line height for all text in section 2 */
    line-height: 1.325;
}

/* Override layout specifically for section 2: carousel layout */
.selector-content[data-section="2"] .carousel {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the inner body receives wheel events even if selector overlay is pointer-events:none */
.selector-content[data-section="2"] .carousel-body,
.selector-content[data-section="2"] .carousel-title,
.selector-content[data-section="2"] .carousel-text,
.selector-content[data-section="2"] .carousel-hr-wrap,
.selector-content[data-section="2"] .carousel-hr-wrap hr {
    pointer-events: auto;
}

.selector-content[data-section="2"] .carousel-body {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    position: relative; /* create a stacking context below arrows */
    z-index: 1;
    /* No padding on the body so the hr remains full-width and aligned */
    padding: 0;
}

.selector-content[data-section="2"] .carousel-title {
    text-align: center;
    /* ensure space below the title row for the hr */
    margin-bottom: clamp(0.2rem, 3cqw, 1rem);
    font-size: clamp(0.85rem, 6.5cqw, 5rem);
}

.selector-content[data-section="2"] .carousel-hr-wrap {
    width: 100%;
    display: block;
    position: relative;
    z-index: 0;
    /* add top spacing so hr sits clearly below title/arrows */
    margin-top: 0;
}

.selector-content[data-section="2"] .carousel-hr-wrap hr {
    width: 95%;
    height: 1px;
    background-color: var(--background-terciary);
    margin: 0 auto;
    border: 0;
}

/* Apply padding only to the text container (not the hr/title) */
.selector-content[data-section="2"] .carousel-text {
    padding-left: clamp(0.5rem, 3.75cqw, 5rem);
}

.selector-content[data-section="2"] .carousel-arrow {
    pointer-events: auto; /* clickable even if parent overlay ignores events */
    position: absolute;
    /* Align arrows to the same vertical line as the title text */
    top: 0;
    line-height: 1;
    transform: none;
    background: transparent;
    color: var(--text-primary);
    border: none;            /* remove border */
    border-radius: 0;        /* no rounded corners */
    padding: 0 0.2rem;       /* minimal padding so glyphs sit tight */
    font-weight: bolder;
    font-family: var(--font);
    /* Match title font size exactly */
    font-size: clamp(0.85rem, 6.5cqw, 5rem);
    cursor: pointer;
    z-index: 3; /* ensure arrows sit above body/title/hr */
}
.selector-content[data-section="2"] .carousel-arrow.left { left: clamp(0.1rem, 2cqw, 0.6rem); }
.selector-content[data-section="2"] .carousel-arrow.right { right: clamp(0.1rem, 2cqw, 0.6rem); }

/* Ensure the hr is visible and not covered */
.selector-content[data-section="2"] .carousel-hr-wrap { position: relative; z-index: 0; }
.selector-content[data-section="2"] .carousel-title { position: relative; z-index: 2; }

/* Keep existing styles below */

/* Ensure stars in section 2 carousel messages are primary color */
.selector-content[data-section="2"] .carousel-text .carousel-star {
    color: var(--text-primary);
}

/* Override layout specifically for section 3: center container and content */
.selector-content[data-section="3"] {
    align-items: center;
    justify-content: center;
}

.selector-content[data-section="3"] .selector-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: clamp(0.25rem, 2.5cqw, 0.65rem);
}

.selector-content[data-section="3"] .selector-heading {
    font-family: var(--font);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: clamp(0.85rem, 18cqw, 10rem);
    line-height: 1;
    margin-bottom: clamp(0.1rem, 2.5cqw, 0.9rem);
}

 .selector-content[data-section="3"] .selector-paragraph {
    font-family: var(--font);
    font-weight: 400;
    color: var(--text-secondary);
    font-size: clamp(0.4rem, 6.5cqw, 4.3rem);
    line-height: 1.325;
}

/* Section 4: three square, evenly spaced, clickable ASCII cards */
.selector-content[data-section="4"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Use the same top padding as other selector sections to avoid top overflow */
    padding: clamp(0.25rem, 2.4cqw, 0.65rem);
    gap: clamp(0.25rem, 8cqw, 3rem);
    /* Center the column horizontally, stack from the top using gap for spacing */
    align-items: center;
    justify-content: flex-start;
}

.selector-content[data-section="4"] .selector-link {
    display: flex;           /* center the card inside full-width link */
    justify-content: center;
    width: 32%; 
    aspect-ratio: 1 / 1; 
    text-decoration: none;
}

.selector-content[data-section="4"] .selector-card {
    display: block;
    width: 100%;              /* card size; increase/decrease to resize */
    aspect-ratio: 1 / 1;     /* keep square */
    margin: 0;
    overflow: hidden;
    background: transparent;
    color: var(--text-primary);
    font-size: clamp(0.1rem, 1cqw, 0.9rem);
    pointer-events: auto;
}

/* Ensure links inside cards are clickable and styled */
.selector-content[data-section="4"] .selector-link,
.selector-content[data-section="4"] .selector-link:visited {
    color: inherit;
}

/* Mirror message board styles inside selector for sections 2/3 */
.selector-title {
    font-family: var(--font);
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: clamp(0.85rem, 9cqw, 5rem);
    line-height: 1;
    opacity: 1;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
    margin-bottom: clamp(0.1rem, 3.5cqw, 0.9rem);
}

.selector .selector-content hr {
    width: 95%;
    height: 1px;
    background-color: var(--background-terciary);
    margin: 0 auto;
    border: 0;
    flex-shrink: 0;
    opacity: 1;
}

.selector-content-text {
    font-family: var(--font);
    font-weight: 400;
    padding-left: clamp(0.25rem, 2.5cqw, 0.65rem);
    padding-right: clamp(0.25rem, 2.5cqw, 0.65rem);
    font-size: clamp(0.4rem, 6.5cqw, 4.3rem);
    margin-top: clamp(0.1rem, 4.5cqw, 0.9rem);
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    line-height: 1.325;
}

.selector-text {
    color: var(--text-secondary);
    margin: 0;
    opacity: 1;
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
    word-break: keep-all;
}


.selector-ascii {
    font-family: var(--font);
    font-variant-ligatures: none;
    white-space: pre;
    line-height: 1.11;
    font-size: clamp(0.25rem, 2.2cqw, 0.9rem);
    color: var(--text-secondary);
    max-width: 100%;
    max-height: 100%;
}

/* Color specific ASCII symbols rendered as spans */
.selector-ascii .primary-char {
    color: var(--text-primary);
}

/* In section 4, disable whitening: keep all ASCII the same color */
.selector-content[data-section="4"] .selector-ascii .primary-char {
    color: var(--text-secondary);
}


/* ===== CODE EDITOR ===== */

.code-editor {
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 65vh; 
    height: 28vh; /* expanded to fit header and hr */
    padding: var(--padding);
    padding-left: calc(var(--padding) * 1.4);
    padding-right: calc(var(--padding) * 1.4);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Prevent initial flash before JS starts typing: keep targets invisible until revealed */
.code-editor[data-intro-pending="true"] .code-header-row .code-field { visibility: hidden; }
.code-editor[data-intro-pending="true"] .code-editor-code code { visibility: hidden; }

/* Fixed-width, evenly spaced header fields */

.code-field {
    display: inline-flex;
    align-items: center;  /* vertical middle alignment */
    justify-content: flex-start; /* left-align text */
    /* 13 monospace characters width at current font size */
    min-width: calc(1ch * 13);
    /* Prevent fields from shrinking smaller than the min-width */
    flex: 0 0 auto;
    white-space: nowrap;
}

.code-editor pre { 
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.code-editor code {
    font-family: var(--font);
    font-size: clamp(0.3rem, 2.95cqw, 2rem);
    line-height: 1.55;
    display: block; 
}

/* Ensure header row remains a flex container despite generic code rule above */
.code-editor .code-header-row {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 3cqw, 1rem);
}

/* Grouped code blocks for precise vertical spacing */
.code-editor .code-editor-code {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.code-editor .code-group {
    margin: 0;     /* reset default margins */
    padding: 0;    /* keep monospaced alignment tight */
}

/* Default gap between groups; can be tuned further */
.code-editor .code-group + .code-group {
    margin-top: clamp(0.1rem, 2cqw, 0.6rem);
}

.code-editor .white-code {
    color: var(--text-primary)
}

.code-editor .grey-code {
    color: var(--text-secondary)
}

/* Generic hr style removed - using specific styles for each component */

/* Stack header, hr and code without affecting other .code-editor rules */
.code-editor-inner { display: flex; flex-direction: column; width: 100%; height: 100%; }

/* Match other hr visuals inside code editor */
.code-editor hr {
    width: 100%;
    height: 1px;
    background-color: var(--background-terciary);
    margin: 0 auto;
    border: 0;
    margin-top: clamp(0.3rem, 2.25cqw, 1rem);
    margin-bottom: clamp(0.3rem, 2.25cqw, 1rem);
}

/* ===== NEURAL NETWORK ===== */

#axes3d-side-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: transparent;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: none;
}

#threejs-container {
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--background-secondary);
    box-sizing: border-box;
}

/* ===== RESPONSIVENESS ===== */

@media (max-width: 1400px) {
    .message-board {
        max-width: 100%;
        width: 100%;
        height: auto; 
        overflow-y: scroll; 
        scroll-snap-type: y mandatory;
    }
    #axes3d-side-container {
        display: none;
    }
    .page-layout {
        flex-direction: column;
    }
    .scroll-section {
        height: 100vh;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 16px;
    }

    h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
 h2 { font-size: 1.75rem; }
 h3 { font-size: 1.5rem; }
 
 }
 
/* Tablet landscape overrides: restore desktop-like layout and show 3D */
 @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
     /* Re-enable the Three.js container hidden by the 1400px rule */
     #axes3d-side-container { display: flex !important; }
     /* Use the desktop flex row to keep scroll/animations wired as on larger screens */
     .page-layout { flex-direction: row; }
     /* Revert message-board to desktop behavior (not the stacked mobile override) */
     .message-board {
         max-width: none;
         width: 20%;
         overflow-y: visible;
         scroll-snap-type: none;
     }
 }
 
 /* Tablet (any orientation) override as a fallback to ensure visibility */
 @media (min-width: 768px) and (max-width: 1400px) {
     #axes3d-side-container { display: flex !important; }
 }
 
 /* Portrait (vertical screens): full reflow per request */
 @media (orientation: portrait) {
     /* Root: avoid horizontal scroll and remove global snap for stacked flow */
     html, body { width: 100%; overflow-x: hidden; }
 
     /* Use a grid to place sections: navbar on top, then 2-column (message/select), then threejs, then editor */
     .page-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto auto auto auto;
         grid-template-areas:
             "navbar navbar"
             "message selector"
             "threejs threejs"
             "editor editor";
         width: 100%; /* avoid 100vw to prevent horizontal overflow/clipping */
         max-width: 100%;
         height: auto;
         overflow-y: visible;
         scroll-snap-type: none;
         gap: 0; /* no gaps between siblings */
         /* Safe-area-aware insets so navbar border/shadow are visible */
         padding-left: max(env(safe-area-inset-left), 8px);
         padding-right: max(env(safe-area-inset-right), 8px);
     }
 
     /* Reset generic window behavior for stacked flow */
     .window {
         position: static;
         inset: auto;
         width: 100%;
         margin: 0;
         border-radius: 0;
         pointer-events: auto;
     }
 
    /* Top navbar: full-bleed, fixed at very top, visible even during intro */
    .navbar {
        grid-area: navbar;
        position: fixed;
        top: env(safe-area-inset-top);
        left: env(safe-area-inset-left);
        right: env(safe-area-inset-right);
        z-index: 10000; /* stay above all content */
        width: auto; /* avoid 100vw; use insets to size safely */
        max-width: 100%;
        height: auto;
        min-height: 48px; /* ensure a tangible height */
        /* Match standard internal padding */
        padding: var(--navbar-pad-y) var(--navbar-pad-x);
        margin: 0;
        border-radius: 0;
        pointer-events: auto;
        box-sizing: border-box;
        /* Provide a content offset variable for pushing content below navbar; include safe area */
        --navbar-offset: calc(clamp(3rem, 9cqh, 5rem) + env(safe-area-inset-top));
    }
    /* Ensure visibility even if JS hasn't cleared intro state yet */
    .navbar[data-intro-pending="true"] { opacity: 1; }
    .navbar[data-intro-pending="true"] .nav-link,
    .navbar[data-intro-pending="true"] .lang-btn { color: var(--text-secondary); }
    .navbar-inner { width: 100%; height: auto; }

    /* Push main content just below fixed navbar (no padding/gutters on edges); add a tiny extra top inset */
    .page-layout { margin-top: var(--navbar-offset); padding-top: calc(var(--navbar-offset) + max(env(safe-area-inset-top), 8px)); }
 
     /* Message board and selector: split 50/50, no spacing between them or page edges */
     .message-board {
         grid-area: message;
         width: 100%;
         height: auto;
         margin: 0;
         padding: 0; /* no padding to page layout border */
         max-width: none;
         overflow: visible;
     }
     .selector {
         grid-area: selector;
         width: 100%;
         height: auto;
         margin: 0;
         padding: 0; /* no padding to page layout border */
         overflow: visible;
     }
 
     /* Ensure the two columns consume exactly 50% each without internal gaps */
     .page-layout > .message-board,
     .page-layout > .selector {
         justify-self: stretch;
         align-self: start;
     }
 
     /* Remove inner window paddings that would create gutters to the edges/siblings */
     .message-display,
     .selector { box-shadow: none; }
     .message-display { padding: 0; }
     .selector-display { padding: 0; }
     .selector-content { padding: 0; }
 
     /* Three.js container: full-width below the two columns, proportional height */
     #axes3d-side-container {
         grid-area: threejs;
         position: static;
         transform: none;
         top: auto; left: auto;
         width: 100vw;
         max-width: 100vw;
         height: auto;
         padding: 0;
         margin: 0;
         display: block;
         pointer-events: none;
         background: transparent;
     }
     #threejs-container {
         width: 100%;
         height: auto;
         aspect-ratio: 16 / 9; /* proportional height */
         padding: 0;
         margin: 0;
         background-color: var(--background-secondary);
     }
 
     /* Code editor: full-width at the bottom, no outer padding */
     .code-editor {
         grid-area: editor;
         width: 100vw;
         max-width: 100vw;
         height: auto;
         padding: 0; /* remove outer padding */
         margin: 0;
         border-radius: 0;
     }
     .code-editor-inner { width: 100%; height: auto; }
 
     /* Section blocks: make sure they expand naturally */
     .scroll-section { height: auto; align-items: stretch; }
 
     /* Hide the landscape-only override that forced display:flex */
     #axes3d-side-container { display: block !important; }
 }
 
 /* FOOTER: © 2025 Juan Charovsky | Coded with ⟡, refactored with ☕︎.*/