@font-face {
    font-family: 'JetBrains Mono NL';
    src: url('JetBrainsMono-2.304/fonts/ttf/JetBrainsMonoNL-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Variable';
    src: url('HelveticaNowVariable.ttf') format('truetype');
    font-weight: 100 900; /* Variable font weight range */
    font-style: normal;
}

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

body {
    width: 100vw;
    height: 100vh;
    background-color: #F7F7F7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Prevent page scrolling */
}

.column-container {
    position: absolute;
    width: 85px; /* Wider to accommodate expansion (50px default + 35px expansion) */
    height: 100vh;
    z-index: 10; /* Higher z-index to ensure items are above other elements */
    overflow-y: scroll;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    cursor: default;
    scroll-snap-type: y mandatory;
    pointer-events: auto; /* Ensure container can receive pointer events */
}

/* Create scrollable height for absolutely positioned children */
.column-container::after {
    content: '';
    display: block;
    height: calc(100vh / 6 * 18); /* Total height for 18 items (3 copies × 6 colors) */
    width: 1px;
}

.column-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}


.color-item {
    position: absolute;
    width: 50px;
    height: calc(100vh / 6);
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: width 0.2s ease, z-index 0.2s ease;
    pointer-events: auto; /* Ensure items can receive hover events */
    z-index: 11; /* Higher z-index to ensure items are above container */
    box-sizing: border-box; /* Ensure width includes padding/border */
    will-change: width; /* Optimize for width transitions */
}

/* Position items vertically using nth-child */
.color-item:nth-child(1) { top: 0; }
.color-item:nth-child(2) { top: calc(100vh / 6 * 1); }
.color-item:nth-child(3) { top: calc(100vh / 6 * 2); }
.color-item:nth-child(4) { top: calc(100vh / 6 * 3); }
.color-item:nth-child(5) { top: calc(100vh / 6 * 4); }
.color-item:nth-child(6) { top: calc(100vh / 6 * 5); }
.color-item:nth-child(7) { top: calc(100vh / 6 * 6); }
.color-item:nth-child(8) { top: calc(100vh / 6 * 7); }
.color-item:nth-child(9) { top: calc(100vh / 6 * 8); }
.color-item:nth-child(10) { top: calc(100vh / 6 * 9); }
.color-item:nth-child(11) { top: calc(100vh / 6 * 10); }
.color-item:nth-child(12) { top: calc(100vh / 6 * 11); }
.color-item:nth-child(13) { top: calc(100vh / 6 * 12); }
.color-item:nth-child(14) { top: calc(100vh / 6 * 13); }
.color-item:nth-child(15) { top: calc(100vh / 6 * 14); }
.color-item:nth-child(16) { top: calc(100vh / 6 * 15); }
.color-item:nth-child(17) { top: calc(100vh / 6 * 16); }
.color-item:nth-child(18) { top: calc(100vh / 6 * 17); }

/* Left column items: anchored to left edge (left: 0), expand right on hover */
.left-column {
    left: 0;
}

.left-column .color-item {
    left: 0;
}

/* Right column items: anchored to right edge (right: 0), expand left on hover */
.right-column {
    right: 0;
}

.right-column .color-item {
    right: 0;
}

/* ==================
   REEL TRIANGLES - decorative triangles at top and bottom of each column
   ================== */
/* Base styles for all reel triangles */
/* ==================
   TRIANGLE MASK CONTAINERS
   Masks for slide-in animation after demo ends
   ================== */

/* Mask container - clips the triangle for slide animation */
.reel-triangle-mask {
    position: absolute;
    width: 16.9px; /* 8.45px * 2 (triangle border width) */
    height: 21.125px; /* Triangle height from border */
    overflow: hidden;
    z-index: 100; /* Above color items (z-index: 11) */
    pointer-events: none;
}

/* Top mask positioning */
.reel-triangle-mask-top {
    top: 13px;
}

/* Bottom mask positioning */
.reel-triangle-mask-bottom {
    bottom: 13px;
}

/* Left column masks: centered on 50px width (25px from left edge) */
.reel-triangle-mask-left {
    left: 25px;
    transform: translateX(-50%);
}

/* Right column masks: centered on 50px width (25px from right edge) */
.reel-triangle-mask-right {
    right: 25px;
    transform: translateX(50%);
}

/* ==================
   TRIANGLES INSIDE MASKS
   ================== */

.reel-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8.45px solid transparent;
    border-right: 8.45px solid transparent;
    pointer-events: none;
    left: 0;
    /* Smooth slide animation */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Top triangle - points upward, starts above mask (slides down into view) */
.reel-triangle-top {
    bottom: 0;
    border-bottom: 21.125px solid #2C2C2C;
    /* Hidden above mask - slides down into view */
    transform: translateY(-21.125px);
}

/* Bottom triangle - points downward, starts below mask (slides up into view) */
.reel-triangle-bottom {
    top: 0;
    border-top: 21.125px solid #2C2C2C;
    /* Hidden below mask - slides up into view */
    transform: translateY(21.125px);
}

/* ==================
   TRIANGLE REVEAL ANIMATION
   Triangles appear ONLY on hover or during scroll hint animation
   ================== */

/* Show left column triangles on hover (works both during intro and after collapse) */
.left-column:hover ~ .reel-triangle-mask-left .reel-triangle {
    transform: translateY(0);
}

/* Show right column triangles on hover (works both during intro and after collapse) */
.right-column:hover ~ .reel-triangle-mask-right .reel-triangle {
    transform: translateY(0);
}

/* Show triangles during scroll hint animation (nudge animation) */
body.scroll-hint-active .reel-triangle-mask-left .reel-triangle,
body.scroll-hint-active .reel-triangle-mask-right .reel-triangle {
    transform: translateY(0);
}

/* Legend expansion: all rectangles expand to normal hover width (85px) */
/* This creates a bulk-hover effect where all items expand together */
.color-item.legend-expanded {
    width: 85px !important; /* Same width as normal hover state */
    z-index: 13; /* Above canvas-text-box (z-index: 12) to ensure expanded rectangle is visible */
}

/* Label wrapper: stable anchor positioned exactly 10px from inner edge */
.color-item .label-wrapper {
    position: absolute;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 12;
    pointer-events: none;
}

/* Left column: wrapper positioned 10px from right edge (inner edge) and centered vertically */
.left-column .color-item .label-wrapper {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Right column: wrapper positioned 10px from left edge (inner edge) and centered vertically */
.right-column .color-item .label-wrapper {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Label styling - hidden by default */
.color-item .label {
    position: relative;
    color: white;
    font-weight: bold;
    text-transform: none;
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    /* No opacity transition to prevent flickering during scroll */
    letter-spacing: 0.03em;
    /* Ensure no spacing affects bounding box calculation */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Use writing-mode for stable vertical text (no rotation needed) */
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Left column: text aligned to right within wrapper */
.left-column .color-item .label {
    text-align: right;
    transform: rotate(180deg); /* Rotate 180 degrees to read bottom to top */
}

/* Right column: text aligned to left within wrapper */
.right-column .color-item .label {
    text-align: left;
}

/* Show label when item is expanded (hover state) */
.color-item:hover .label,
.color-item.opposite-hovered .label {
    opacity: 1;
}

/* Show all labels when legend is expanded (for all items in both columns) */
.color-item.legend-expanded .label {
    opacity: 1;
}

/* Show labels during intro at collapsed width (50px) */
/* This allows labels to be visible while maintaining the gap between scrollbars and gradients */
.color-item.intro-labels-visible .label {
    opacity: 1;
}

/* Ensure width stays at 50px when intro-labels-visible is active */
/* This is the default width, but we make it explicit to override any other states */
.color-item.intro-labels-visible {
    width: 50px;
}

/* Center label horizontally during intro phase */
/* Override the left/right positioning to center on X axis */
.left-column .color-item.intro-labels-visible .label-wrapper {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.right-column .color-item.intro-labels-visible .label-wrapper {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Label wrapper positioning remains the same for legend-expanded items */
/* Left column items use right: 10px, top: 10px (already defined) */
/* Right column items use left: 10px, bottom: 10px (already defined) */

/* Hide labels during scrolling - only in main screen (after intro completes) */
/* During intro, labels stay visible to prevent flickering */
body.intro-completed .column-container.scrolling .color-item .label {
    opacity: 0;
}

/* Hover expansion: width grows from 50px to 85px inward */
/* Only allow hover expansion when NOT scrolling */
.color-item:hover,
.color-item.opposite-hovered {
    width: 85px;
    z-index: 13; /* Above canvas-text-box (z-index: 12) to ensure expanded rectangle is visible */
}

/* Legend expansion is now handled by .color-item.legend-expanded rule above */
/* All items (both columns) expand to 85px when legend is active */

/* Disable hover expansion during scrolling */
/* Higher specificity to override hover state */
/* Also disable all transitions to prevent flickering */
.column-container.scrolling .color-item {
    width: 50px;
    z-index: 11; /* Reset to default z-index when scrolling */
    transition: none !important; /* Prevent any animation during scroll */
}

.column-container.scrolling .color-item:hover,
.column-container.scrolling .color-item.opposite-hovered,
.column-container.scrolling .color-item.legend-expanded {
    width: 50px;
    z-index: 11; /* Reset to default z-index when scrolling */
    transition: none !important; /* Prevent any animation during scroll */
}

/* Disable hover expansion for items in top row (affecting gradient) on home screen */
/* This prevents them from expanding upward and covering the parameters panel */
body.intro-completed .color-item.affects-gradient:hover,
body.intro-completed .color-item.affects-gradient.opposite-hovered {
    width: 50px;
    z-index: 11; /* Reset to default z-index */
}

/* Also hide labels for top row items on hover (home screen only) */
body.intro-completed .color-item.affects-gradient:hover .label,
body.intro-completed .color-item.affects-gradient.opposite-hovered .label {
    opacity: 0;
}

.line {
    position: absolute;
    width: 1px;
    height: 100vh;
    background-color: #2C2C2C;
    top: 0;
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through to columns */
    display: none; /* Hide grid lines */
}


.line-outer-left {
    left: 100px;
}

.line-inner-left {
    left: 150px;
}

.line-inner-right {
    right: 150px;
}

.line-outer-right {
    right: 100px;
}

/* Main gradient header - persistent header on main screen (post-intro) */
.main-gradient-header {
    position: absolute;
    top: 0;
    height: calc(100vh / 6); /* Same height as one color item row */
    /* left and width are set dynamically via JavaScript to span from scrollbar inner edges */
    z-index: 1; /* Below UI layer (2) so UI elements render on top, but above background (0) */
    pointer-events: none; /* Don't block interactions */
    /* Hidden by default, shown when horizontal expansion starts (while intro gradients collapse) */
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Main gradient header visible state */
.main-gradient-header.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Intro layer wrapper - contains gradient intro container */
.intro-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 5; /* Above UI layer (2) but below columns (10) */
    pointer-events: none; /* Let pointer events pass through to child */
}

/* Gradient intro container - holds all gradient rectangles */
.gradient-intro-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 1; /* Relative to intro-layer */
    pointer-events: auto; /* Enable wheel events for center scroll trigger */
    overflow: hidden; /* Clip gradients to viewport - prevents bleed during collapse */
    outline: none !important; /* Remove any focus outlines */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any box shadows */
}

/* Intro phase classes */
.gradient-intro-container.intro-entering {
    /* Entry phase - full-bleed bands animating to centered layout */
}

.gradient-intro-container.intro-active {
    /* Default active state */
}

.gradient-intro-container.intro-closing {
    /* Closing phase - horizontal expansion in progress */
}

.gradient-intro-container.intro-collapsed {
    /* Final collapsed state */
}

/* Individual gradient rectangle */
.gradient-intro-rectangle {
    position: absolute;
    height: calc(100vh / 6); /* Same height as color items */
    /* Position and width will be set dynamically via JavaScript */
    pointer-events: none; /* Ensure no interaction */
    /* Entry animation: 2000ms with very soft, gradual easing for left/width, fast height transition for smooth scrubbing (50ms) */
    transition: left 2000ms cubic-bezier(0.2, 0.0, 0.0, 1), width 2000ms cubic-bezier(0.2, 0.0, 0.0, 1), height 50ms ease;
    outline: none !important; /* Remove any focus outlines */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any box shadows */
}

/* Closing phase: faster transition for horizontal expansion */
.gradient-intro-container.intro-closing .gradient-intro-rectangle {
    /* Faster transition for closing phase (250ms) - quick expansion that reaches 70-80% very early */
    /* cubic-bezier(0.4, 0.0, 0.2, 1) accelerates quickly at start, reaching most progress early */
    transition: left 250ms cubic-bezier(0.4, 0.0, 0.2, 1), width 250ms cubic-bezier(0.4, 0.0, 0.2, 1), height 50ms ease;
}

/* Vertical collapse phase - bars shrink to 0 height */
.gradient-intro-container.collapse .gradient-intro-rectangle {
    height: 0px !important;
}

/* Hide text when intro is closing or collapsed (but allow fade-in during entering phase) */
.gradient-intro-container.intro-closing .gradient-intro-text,
.gradient-intro-container.intro-collapsed .gradient-intro-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* OVERRIDE: Keep exiting elements visible during closing phase for slide-out animation */
/* These rules are more specific to override the hiding rules above */
.gradient-intro-container.intro-closing .gradient-intro-text-line1:has(.intro-line-exiting),
.gradient-intro-container.intro-closing .gradient-intro-text-start:has(.start-exiting) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Hide arrow when intro is entering, closing, or collapsed */
.gradient-intro-container.intro-entering .gradient-intro-arrow,
.gradient-intro-container.intro-closing .gradient-intro-arrow,
.gradient-intro-container.intro-collapsed .gradient-intro-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Instructional text for gradient intro */
.gradient-intro-text {
    position: absolute;
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 29px;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0; /* No extra letter spacing */
    text-align: center;
    white-space: normal;
    pointer-events: none; /* Don't block interactions */
    z-index: 2; /* Above gradient rectangles */
    line-height: 1.4; /* Comfortable line spacing for multi-line text */
    /* Position will be set dynamically via JavaScript */
    /* Start hidden by default - will fade in during entry animation */
    opacity: 0;
    transform: translateY(10px); /* Start slightly below for smooth slide-up effect */
    /* Opacity transition synced with gradient shrink animation (2000ms with same easing) */
    /* Transform transition for smooth slide-up animation after demo */
    transition: left 2s cubic-bezier(0.2, 0.0, 0.0, 1), width 2s cubic-bezier(0.2, 0.0, 0.0, 1), opacity 2s cubic-bezier(0.2, 0.0, 0.0, 1), transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide text during entering phase (opacity 0) - will fade in as gradients shrink */
.gradient-intro-container.intro-entering .gradient-intro-text {
    opacity: 0 !important;
}

/* Show text when active phase is reached (opacity 1) - synced with gradient shrink completion */
.gradient-intro-container.intro-active .gradient-intro-text {
    opacity: 1 !important;
    transform: translateY(0); /* Slide up to final position with smooth easing */
}

/* Hover effect for START button - grows slightly when hovered */
.gradient-intro-container.intro-active .gradient-intro-text:hover {
    transform: translateY(0) scale(1.1); /* Grow 10% on hover */
    transition: transform 0.2s ease-out; /* Quick, smooth hover transition */
}

/* Individual intro text lines with black background */
.intro-line {
    display: inline-flex; /* Use flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    background-color: #2C2C2C; /* Same black as UI rectangles */
    height: 38px; /* Same height as index rectangle */
    padding: 0 10px; /* Horizontal padding only */
    color: white;
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0.03em;
}

/* Custom styling for intro explanation line (above scroll instruction) */
.gradient-intro-text-line1 .intro-line {
    background-color: white;
    color: #2C2C2C;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 29px;
    font-weight: bold;
    letter-spacing: 0;
}

/* Container height for intro explanation line */
.gradient-intro-text-line1 {
    height: 55px !important; /* Single line, adjusted for 29px Helvetica font */
}

/* Custom styling for instruction line "scroll the bars on the sides of the screen to combine senses" */
.gradient-intro-text-line2 .intro-line {
    background-color: white;
    color: #2C2C2C;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 29px;
    font-weight: bold;
    letter-spacing: 0;
}

/* Special styling for "scroll" word in intro - no longer used, kept for backward compatibility */
.intro-scroll-word {
    /* Now inherits from .intro-line - uniform Helvetica 29px bold styling */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: none;
    vertical-align: baseline;
    display: inline;
    position: relative;
    top: 0;
}

/* Specific styles for the two separate intro text line containers */
/* These containers act as masks - overflow hidden clips the inner content */
.gradient-intro-text-line1,
.gradient-intro-text-line2 {
    /* Inherits from .gradient-intro-text */
    overflow: hidden !important; /* Create clipping mask for slide-up effect */
    /* Reset transform on container - the inner intro-line will animate */
    transform: none !important;
    /* Container is always visible (no opacity animation on container) */
    opacity: 1 !important;
    /* Ensure proper positioning for mask effect */
    position: absolute;
    /* Use flexbox for proper alignment - align-items: flex-start keeps intro-line at top for slide-up animation */
    display: flex !important;
    align-items: flex-start; /* Intro-line starts at top, then slides in from below */
    justify-content: center; /* Center horizontally */
    transition: left 2s cubic-bezier(0.2, 0.0, 0.0, 1), 
                width 2s cubic-bezier(0.2, 0.0, 0.0, 1);
}

/* Inner intro-line elements slide up from below the mask */
.gradient-intro-text-line1 .intro-line,
.gradient-intro-text-line2 .intro-line {
    display: inline-flex; /* Use flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    height: 55px; /* Adjusted for 29px Helvetica font */
    /* Start below the visible area - pushed down by 55px (line height) */
    transform: translateY(55px);
    /* Slide-up animation with responsive easing - starts fast, decelerates smoothly */
    /* Using ease-out-expo style curve for immediate visual feedback */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hide inner content during entering phase */
.gradient-intro-container.intro-entering .gradient-intro-text-line1 .intro-line,
.gradient-intro-container.intro-entering .gradient-intro-text-line2 .intro-line {
    transform: translateY(57px); /* Keep hidden below mask */
}

/* Synchronized slide-up animation for both intro-line elements when active */
.gradient-intro-container.intro-active .gradient-intro-text-line1 .intro-line,
.gradient-intro-container.intro-active .gradient-intro-text-line2 .intro-line {
    transform: translateY(0); /* Slide up into view */
    /* No delay - animation starts immediately for responsive feel */
}

/* Slide-out animation: inner intro-line slides down and out of mask when exiting */
/* This overrides the intro-active state to animate lines out before showing START */
.gradient-intro-text-line1 .intro-line.intro-line-exiting,
.gradient-intro-text-line2 .intro-line.intro-line-exiting {
    transform: translateY(57px) !important; /* Slide down out of view - must exceed container height (55px) */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Slower, smooth ease-out slide */
    transition-delay: 0s !important; /* No delay for exit animation */
}

/* START button container - acts as mask like the intro text line containers */
.gradient-intro-text-start {
    overflow: hidden !important; /* Create clipping mask for slide-up effect */
    transform: none !important;
    opacity: 1 !important;
    position: absolute;
    display: flex;
    align-items: flex-end; /* Align content to bottom for slide-up effect */
    justify-content: center;
    text-align: center;
    transition: left 2s cubic-bezier(0.2, 0.0, 0.0, 1), 
                width 2s cubic-bezier(0.2, 0.0, 0.0, 1);
    z-index: 2; /* Above gradient rectangles */
    pointer-events: none; /* Container doesn't block - inner element handles clicks */
}

/* Inner START button element with same styling as intro-line */
.gradient-intro-text-start .intro-line {
    display: inline-flex; /* Use flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    background-color: white; /* White background */
    height: 38px; /* Same height as index rectangle */
    padding: 0 10px; /* Horizontal padding only */
    color: #2C2C2C; /* Dark text */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: bold; /* Bold text */
    letter-spacing: 0.03em;
    /* Start below the visible area - pushed down by 38px (line height) */
    transform: translateY(38px);
    /* Faster slide-up animation (0.8s) */
    transition: transform 0.8s cubic-bezier(0.2, 0.0, 0.0, 1);
    cursor: pointer;
    pointer-events: auto; /* Inner element receives clicks */
}

/* START button slides up when entering (after intro lines exit) */
.gradient-intro-text-start .intro-line.start-entering {
    transform: translateY(0); /* Slide up into view */
    transition: transform 0.8s cubic-bezier(0.2, 0.0, 0.0, 1), 
                background-color 0.2s ease-out,
                color 0.2s ease-out;
}

/* Hover effect for START button - color swap only */
.gradient-intro-text-start .intro-line.start-entering:hover {
    background-color: #E0E0E0; /* Gray background on hover - same as logo hover */
    color: #2C2C2C; /* Dark text on hover - same as site UI */
}

/* Hide START during entering phase */
.gradient-intro-container.intro-entering .gradient-intro-text-start .intro-line {
    transform: translateY(40px); /* Keep hidden below mask */
}

/* Slide-out animation for START button when clicked */
.gradient-intro-text-start .intro-line.start-exiting {
    transform: translateY(40px) !important; /* Slide down out of view */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Same as intro-line-exiting */
}

/* Keep START hidden during demo */
.gradient-intro-container.demo-active .gradient-intro-text-start .intro-line {
    transform: translateY(40px) !important; /* Keep hidden below mask during demo */
}

/* Hide text during demo - must override intro-active opacity */
/* More specific selector ensures it wins when both intro-active and demo-active are present */
/* IMPORTANT: Use visibility:hidden instead of display:none to allow CSS transitions to work */
/* When display:none is used, child transforms aren't computed, breaking slide-up animations */
.gradient-intro-container.intro-active.demo-active .gradient-intro-text,
.gradient-intro-container.demo-active .gradient-intro-text {
    opacity: 0 !important;
    visibility: hidden !important;
    /* Removed display:none - use visibility:hidden to keep element in layout for transitions */
}

/* Also hide the line elements during demo - keep them below mask */
/* This transform will be animated when demo-active is removed */
.gradient-intro-container.demo-active .gradient-intro-text-line1 .intro-line,
.gradient-intro-container.demo-active .gradient-intro-text-line2 .intro-line {
    transform: translateY(40px) !important; /* Keep hidden below mask during demo */
}

/* START text is no longer clickable - center scroll trigger is used instead */

/* Downward arrow below START text */
.gradient-intro-arrow {
    display: none !important; /* Hide arrow */
    position: absolute;
    color: white;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold; /* Bold weight to match [start] text thickness */
    text-align: center;
    pointer-events: none; /* Don't block interactions */
    z-index: 2; /* Above gradient rectangles */
    opacity: 0.7; /* Subtle appearance */
    /* Position will be set dynamically via JavaScript */
    transition: left 2s cubic-bezier(0.2, 0.0, 0.0, 1), width 2s cubic-bezier(0.2, 0.0, 0.0, 1), opacity 0.3s ease; /* Deliberate entry animation (2000ms with very soft, gradual easing) */
    /* Subtle bounce animation */
    animation: arrowBounce 2s ease-in-out infinite;
}

/* Closing phase: faster transition for arrow */
.gradient-intro-container.intro-closing .gradient-intro-arrow {
    transition: left 0.4s ease, width 0.4s ease, opacity 0.3s ease; /* Faster transition for closing phase (400ms) */
}

/* Keyframe animation for gentle bounce effect */
@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(8px);
        opacity: 0.5;
    }
}


/* UI layer wrapper - contains all UI elements (logo, colorkey) */
.ui-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 2; /* Below intro layer (5) but above background (0) */
    pointer-events: none; /* Let pointer events pass through when hidden - children can override */
    /* Visibility controlled by JavaScript based on intro phase */
    opacity: 0;
    transition: opacity 0.3s ease; /* Smooth fade in when becoming visible */
}

/* UI layer visible state - applied when gradients have fully expanded to scrollbar edges (hasExpandedToScrollbars) or intro is completed */
.ui-layer.ui-visible {
    opacity: 1;
    /* Keep pointer-events: none on parent, but children have pointer-events: auto to enable interactions */
}

/* UI layer during logo entrance animation - only logo is visible, rest of UI stays hidden */
/* This allows the logo to animate independently before the full UI becomes visible */
.ui-layer.logo-animating {
    opacity: 1; /* Make layer visible so logo can be seen */
    z-index: 6; /* Temporarily higher than intro-layer (z-index: 5) so logo appears above gradient */
}

/* Clip-path only applies during initial logo entrance (before ui-visible is added) */
/* Once ui-visible is added, we remove clip-path so INDEX button at bottom can animate properly */
/* Also remove clip-path when words-revealed is added, so word rectangles can appear during intro */
.ui-layer.logo-animating:not(.ui-visible):not(.words-revealed) {
    /* Clip to show only the top 1/6 of viewport (gradient area) */
    /* This creates the mask - logo emerges from the clip edge at gradient's bottom */
    clip-path: inset(0 0 calc(100vh - 100vh / 6) 0);
}

/* Hide specific UI elements during logo entrance animation - NOT using visibility:hidden to preserve layout */
/* Only hide when logo-animating is present WITHOUT ui-visible */
.ui-layer.logo-animating:not(.ui-visible) .black-corner-rectangle,
.ui-layer.logo-animating:not(.ui-visible) .black-bottom-rectangle-left,
.ui-layer.logo-animating:not(.ui-visible) .black-bottom-rectangle-right {
    opacity: 0;
    pointer-events: none;
}

/* Override opacity:0 for word rectangles during intro when words-revealed is active */
/* This allows word rectangles to appear with intro explanation lines */
.ui-layer.logo-animating.words-revealed .black-bottom-rectangle-left,
.ui-layer.logo-animating.words-revealed .black-bottom-rectangle-right {
    opacity: 1;
    pointer-events: auto;
}

/* ==================
   UI RECTANGLE MASK CONTAINERS
   These create the clipping mask for slide-up animation
   ================== */
.ui-rect-mask {
    position: absolute;
    height: 28px; /* Same as rectangle height */
    overflow: hidden; /* Clip content - creates the mask effect */
    z-index: 1; /* Relative to ui-layer */
    pointer-events: none; /* Let events pass through to child rectangle */
    transition: left 0.2s ease, right 0.2s ease; /* Smooth transition for logo hover effect */
}

/* Intro text mask containers need same height as parameter rectangles */
.gradient-intro-text-start {
    height: 38px !important; /* Same height as index rectangle */
}

/* Line 2 container height (adjusted for 29px Helvetica font) */
.gradient-intro-text-line2 {
    height: 55px !important; /* Adjusted for 29px Helvetica font */
}

/* Line 1 container height (single line) */
.gradient-intro-text-line1 {
    height: 55px !important; /* Single line, adjusted for 29px Helvetica font */
}

/* INDEX mask - positioned at gradient bottom edge, 50px right of logo */
/* left and top are set dynamically via JavaScript in alignRectanglesWithEsthesia() */
.ui-rect-mask-index {
    min-width: 100px;
    width: auto;
}

/* WORD left mask - positioned at left, top set by JS */
.ui-rect-mask-left {
    left: 50px;
    min-width: 100px;
    width: auto;
    height: 40px; /* Parameter rectangles use 40px height */
}

/* WORD right mask - positioned at right, top set by JS */
.ui-rect-mask-right {
    right: 50px;
    min-width: 100px;
    width: auto;
    height: 40px; /* Parameter rectangles use 40px height */
}

/* Intro state positioning - WORD rectangles positioned 85px from screen edges during intro */
/* Position is set when logo-animating is present (before words-revealed) so mask is already */
/* in place when slide-in animation starts. When intro completes, position changes instantly to 50px. */
.ui-layer.logo-animating .ui-rect-mask-left {
    left: 85px;
}

.ui-layer.logo-animating .ui-rect-mask-right {
    right: 85px;
}

/* Remove position transition for WORD masks - position change from intro (85px) to main (50px) is instant */
.ui-rect-mask-left,
.ui-rect-mask-right {
    transition: none;
}

/* When START is clicked (words-exiting), mask stays at current position (85px during intro) */
/* Words slide out at 85px, then when logo-animating is removed, mask moves to 50px */
/* The position change to 50px happens when logo-animating is removed (at 70% progress) */

/* Logo hover effect - no position change for INDEX, only slide-out animation */
.ui-rect-mask-index.logo-hovered {
    /* Position stays at right: 50px - slide-out happens via transform on child */
}

.black-corner-rectangle {
    position: relative; /* Changed from absolute - now inside mask container */
    width: 84px !important; /* Fixed width - reduced by 6px total (3px from each side) */
    min-width: unset !important; /* Remove min-width constraint */
    height: 38px; /* Increased by 10px from top */
    background-color: #2C2C2C; /* Black background for INDEX and ABOUT buttons */
    z-index: 1; /* Relative to ui-layer */
    pointer-events: auto; /* Enable hover interactions */
    box-sizing: border-box; /* Ensure width includes padding/border */
    margin: 0; /* Remove any default margins */
    padding: 0 4px 10px 4px !important; /* top right bottom left - bottom padding pushes text up */
    transition: width 0.2s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease; /* Width for hover, transform for slide-in, background for color swap */
    cursor: pointer; /* Indicate interactivity */
    display: flex;
    align-items: center; /* Vertically centers text within rectangle */
    justify-content: center; /* Center text horizontally */
    overflow: hidden; /* Ensure text stays within bounds */
}

/* Text styling for INDEX and ABOUT buttons */
.black-corner-rectangle .color-key-text {
    color: white; /* White text on black background */
    font-family: 'JetBrains Mono NL', monospace; /* Site standard monospace font */
    font-size: 15px; /* Site standard size for JetBrains Mono */
    font-weight: bold; /* Bold text */
    letter-spacing: 0.03em; /* Standard letter spacing for JetBrains Mono */
    white-space: nowrap;
    text-transform: none; /* Keep lowercase as written */
    line-height: 1; /* Ensure proper vertical centering */
    transition: color 0.2s ease; /* Smooth color transition on hover */
}

/* Hover effect for INDEX and ABOUT buttons - swap colors */
/* Also stays inverted when overlay is open (color-key-expanded class) */
.black-corner-rectangle:hover,
.black-corner-rectangle.color-key-expanded {
    background-color: white; /* White background on hover or when overlay is open */
}

.black-corner-rectangle:hover .color-key-text,
.black-corner-rectangle.color-key-expanded .color-key-text {
    color: #2C2C2C; /* Black text on hover or when overlay is open */
}

/* About button - white background on hover (swapped with logo) */
.black-corner-rectangle-about:hover,
.black-corner-rectangle-about.color-key-expanded {
    background-color: white; /* White background on hover */
}

/* Left parameter rectangle - inside mask container */
.black-bottom-rectangle-left {
    position: relative; /* Changed from absolute - now inside mask container */
    width: auto; /* Auto width based on content */
    min-width: 100px; /* Minimum width */
    height: 40px;
    background-color: white;
    z-index: 1; /* Relative to ui-layer */
    pointer-events: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center; /* Center text horizontally */
    overflow: hidden;
}

/* Right parameter rectangle - inside mask container */
.black-bottom-rectangle-right {
    position: relative; /* Changed from absolute - now inside mask container */
    width: auto; /* Auto width based on content */
    min-width: 100px; /* Minimum width */
    height: 40px;
    background-color: white;
    z-index: 1; /* Relative to ui-layer */
    pointer-events: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center; /* Center text horizontally */
    overflow: hidden;
}

/* Logo hover effect - positioning now handled by mask containers */
/* These classes are kept for JS compatibility but positioning is on masks */

/* UI rectangles hidden by default - slide up from below mask when revealed */
/* This creates the effect of rectangles emerging upward from behind a clipping mask */
.ui-layer .black-bottom-rectangle-left,
.ui-layer .black-bottom-rectangle-right,
.ui-layer .black-corner-rectangle {
    transform: translateY(100%); /* Start below the mask - fully hidden */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth ease-out slide */
}

/* Show UI rectangles when collapse animation reaches the reveal point */
/* All three rectangles slide up together simultaneously */
.ui-layer.words-revealed .black-bottom-rectangle-left,
.ui-layer.words-revealed .black-bottom-rectangle-right,
.ui-layer.words-revealed .black-corner-rectangle {
    transform: translateY(0); /* Slide up into view */
    transition-delay: 0ms; /* All appear together */
}

/* Slide-out WORD rectangles when START is clicked (before collapse animation) */
/* This class is added when START is clicked, triggering WORD to slide out */
/* Higher specificity than words-revealed to ensure slide-out takes priority */
.ui-layer.words-exiting .black-bottom-rectangle-left,
.ui-layer.words-exiting .black-bottom-rectangle-right {
    transform: translateY(100%) !important; /* Slide down out of view */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth ease-out slide */
}

/* INDEX hover effect - slide parameter rectangles out (down) into the bottom edge of gradient header */
/* This creates the effect of rectangles sliding down and disappearing behind the gradient's bottom edge */
.ui-layer.words-revealed .black-bottom-rectangle-left.index-hovered,
.ui-layer.words-revealed .black-bottom-rectangle-right.index-hovered {
    transform: translateY(100%); /* Slide down out of view - into the mask */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth ease-out slide */
}

/* Logo hover effect - slide parameter rectangles out (down) when hovering on SYN logo */
/* The logo-hovered class is added to the mask container, so we target the rectangle inside it */
.ui-layer.words-revealed .ui-rect-mask-left.logo-hovered .black-bottom-rectangle-left,
.ui-layer.words-revealed .ui-rect-mask-right.logo-hovered .black-bottom-rectangle-right {
    transform: translateY(100%); /* Slide down out of view - into the mask */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth ease-out slide */
}

/* Logo hover effect - slide INDEX rectangle out (down) when hovering on SYN logo */
.ui-layer.words-revealed .ui-rect-mask-index.logo-hovered .black-corner-rectangle {
    transform: translateY(100%); /* Slide down out of view - into the mask */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Same timing as WORD rectangles */
}

/* Logo clip mask - clips logo so nothing extends beyond the gradient header bottom edge */
.logo-clip-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100vh / 6); /* Same height as gradient header */
    overflow: hidden; /* Clips anything that extends beyond this boundary */
    z-index: 1; /* Same as logo-container was */
    pointer-events: none; /* Let pointer events pass through to children */
}

/* Logo container - wrapper for Sense Lab rectangle */
/* Positioned 330px from left edge of screen */
.logo-container {
    position: absolute;
    left: 330px; /* Fixed position from left edge */
    top: calc(100vh / 6 - 70px); /* Positioned so bottom edge stays at calc(100vh / 6) */
    height: 70px;
    z-index: 1; /* Relative to logo-clip-mask */
    pointer-events: none; /* Container doesn't block interactions - children handle them */
    display: flex;
    flex-direction: row;
    align-items: center; /* Center children vertically */
    gap: 0;
    transition: none;
}

/* ==================
   LOGO ENTRANCE ANIMATION
   Logo rises up from behind the top gradient rectangle before demo starts
   ================== */

/* Initial hidden state - logo is positioned at the bottom edge of the top gradient */
/* The logo starts below its final position and will animate upward */
/* No opacity - the clip-path mask handles visibility */
.logo-container.logo-intro-hidden {
    top: calc(100vh / 6); /* Logo's top is at gradient's bottom - fully hidden below clip edge */
}

/* Entrance animation state - logo rises up from behind gradient */
/* Applied together with logo-intro-hidden, then logo-intro-hidden is removed to trigger animation */
.logo-container.logo-entering {
    /* Smooth rise-up animation synced with gradient shrink (2000ms) */
    /* Uses same easing as gradient shrink for synchronized motion */
    /* No opacity transition - clip-path mask handles the reveal effect */
    transition: top 2000ms cubic-bezier(0.2, 0.0, 0.0, 1);
}

/* When entering (animating), set final position - animation triggered by removing logo-intro-hidden */
.logo-container.logo-entering:not(.logo-intro-hidden) {
    top: calc(100vh / 6 - 70px); /* Final position - bottom edge at gradient bottom */
}

/* Final visible state - logo is in its normal position */
.logo-container.logo-visible {
    top: calc(100vh / 6 - 70px); /* Same as default position */
    /* No transform transition needed - left edge stays fixed with pixel-based offset */
}

/* ==================
   LOGO EXIT ANIMATION
   Logo slides down out of view when parameter rectangles enter (at 70% progress)
   Logo reappears only after collapse is complete (introCompleted)
   ================== */

/* Exit animation state - logo slides down out of view */
/* Triggered when words-revealed is added (parameter rectangles entering) */
.logo-container.logo-exiting {
    top: calc(100vh / 6); /* Move down - logo's top at gradient's bottom = hidden below clip edge */
    transition: top 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Smooth slide-out, same timing as parameter rectangles */
}

/* Re-entrance animation state - logo slides back up after collapse completes */
/* Applied when introCompleted is true, removes logo-exiting and adds logo-reentering */
.logo-container.logo-reentering {
    top: calc(100vh / 6 - 70px); /* Final position - bottom edge at gradient bottom */
    transition: top 400ms cubic-bezier(0.16, 1, 0.3, 1); /* Smooth slide-in, ease-out effect */
}

/* Hover states - no transform needed with fixed left positioning */
.logo-container.logo-entering:hover,
.logo-container.logo-visible:hover {
    /* No transform needed - left edge stays fixed at 330px */
}

/* Sense Lab rectangle - contains the logo text */
.black-rectangle-logo {
    position: relative;
    width: 320px;
    height: 70px;
    background-color: #2C2C2C; /* Black background */
    border: none; /* No border */
    pointer-events: auto; /* Enable hover interactions */
    cursor: pointer; /* Indicate interactivity */
    overflow: visible; /* Allow text to extend beyond container on hover */
    transition: background-color 0.3s ease; /* Smooth color transition on hover */
    z-index: 1; /* Default z-index */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.black-rectangle-logo .logo-text {
    font-family: Helvetica, sans-serif;
    font-size: 52px; /* Slightly smaller to fit well centered */
    font-weight: bold;
    letter-spacing: 0; /* Normal letter spacing */
    color: white; /* White text */
    line-height: 1; /* Normal line height for centered text */
    margin: 0;
    padding: 0;
    white-space: nowrap; /* Prevent line breaking */
    overflow: visible; /* Allow text to extend beyond container */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.black-rectangle-logo .logo-text .logo-word {
    display: inline-block;
    position: relative;
    white-space: nowrap; /* Prevent line breaking when letters expand */
}

/* Default letter-spacing for each logo letter */
.black-rectangle-logo .logo-text .logo-letter {
    display: inline-block; /* Allow individual letter control */
    letter-spacing: 0; /* Normal letter spacing */
    transition: letter-spacing 0.3s ease; /* Smooth transition */
}

/* Space between words */
.black-rectangle-logo .logo-text .logo-space {
    display: inline-block;
    width: 0.3em; /* Space width */
    transition: width 0.3s ease; /* Smooth transition */
}

/* Dot separator between words (SENSE.LAB) */
.black-rectangle-logo .logo-text .logo-dot {
    display: inline-block;
    letter-spacing: 0;
    transition: letter-spacing 0.3s ease;
}

/* Logo color inversion on hover - rectangle becomes gray, text becomes dark gray */
/* Also applies when overlay is active (.logo-active class) */
.black-rectangle-logo:hover,
.logo-container:hover .black-rectangle-logo,
.black-rectangle-logo.logo-active {
    background-color: #E0E0E0; /* Gray background on hover (swapped with about) */
}

.black-rectangle-logo:hover .logo-text,
.logo-container:hover .black-rectangle-logo .logo-text,
.black-rectangle-logo.logo-active .logo-text {
    color: #2C2C2C; /* Dark gray text (same as UI rectangles) */
}

/* Explicit color for logo letters on hover - ensures inheritance works properly */
.black-rectangle-logo:hover .logo-text .logo-letter,
.logo-container:hover .black-rectangle-logo .logo-text .logo-letter,
.black-rectangle-logo.logo-active .logo-text .logo-letter {
    color: #2C2C2C; /* Dark gray text (same as UI rectangles) */
}

/* Disable logo hover effect and click during demo and intro phases */
/* When logo-hover-disabled class is present, maintain default appearance on hover */
.black-rectangle-logo.logo-hover-disabled {
    cursor: default !important; /* Override inline style to indicate not clickable */
}

.black-rectangle-logo.logo-hover-disabled:hover,
.logo-container:hover .black-rectangle-logo.logo-hover-disabled {
    background-color: #2C2C2C; /* Keep black background */
}

.black-rectangle-logo.logo-hover-disabled:hover .logo-text,
.logo-container:hover .black-rectangle-logo.logo-hover-disabled .logo-text {
    color: white; /* Keep white text */
}

.black-rectangle-logo.logo-hover-disabled:hover .logo-text .logo-letter,
.logo-container:hover .black-rectangle-logo.logo-hover-disabled .logo-text .logo-letter {
    color: white; /* Keep white letters */
}

.split-region {
    position: absolute;
    top: 50px; /* Start below the gradient area */
    height: calc(100vh - 50px); /* Fill remaining viewport height */
    z-index: 0;
    pointer-events: none; /* Allow clicks to pass through */
}

.split-region-white {
    left: 50px;
    right: 50px;
    width: auto;
    background-color: white;
    overflow: hidden; /* Clip content to region boundaries */
    display: flex;
    flex-direction: column;
}

/* Text styling for left parameter word */
.black-bottom-rectangle-left .word-text-left {
    color: #2C2C2C;
    font-family: Helvetica, sans-serif;
    font-size: 0; /* Remove spacing between inline-block children */
    font-weight: bold;
    letter-spacing: -0.05em;
    white-space: nowrap;
    text-transform: none; /* Capitalization handled in JS */
    text-align: center;
    padding: 0 10px; /* Equal padding on both sides */
    margin: 0;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    transform: translateY(-2px); /* Optical adjustment - shift text up for visual centering */
}

/* Text styling for right parameter word */
.black-bottom-rectangle-right .word-text-right {
    color: #2C2C2C;
    font-family: Helvetica, sans-serif;
    font-size: 0; /* Remove spacing between inline-block children */
    font-weight: bold;
    letter-spacing: -0.05em;
    white-space: nowrap;
    text-transform: none; /* Capitalization handled in JS */
    text-align: center;
    padding: 0 10px; /* Equal padding on both sides */
    margin: 0;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    transform: translateY(-2px); /* Optical adjustment - shift text up for visual centering */
}

/* Default letter-spacing for each letter in both rectangles */
.black-bottom-rectangle-left .word-text-left .word-letter,
.black-bottom-rectangle-right .word-text-right .word-letter {
    display: inline-block;
    font-size: 32px;
    letter-spacing: 0;
}

.text-box {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2C2C2C;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    flex-shrink: 0;
    position: relative; /* Enable absolute positioning for line backgrounds */
}

.text-box p {
    margin-bottom: 20px;
    position: relative; /* Enable absolute positioning for line backgrounds */
}

.text-box p:last-child {
    margin-bottom: 0;
}

/* Line background rectangles */
.text-box .line-bg {
    position: absolute;
    background-color: #E0E0E0; /* Light gray background */
    border-radius: 4px; /* Slight rounded corners for pill effect */
    z-index: -1; /* Behind the text */
    pointer-events: none; /* Don't interfere with text selection */
}

/* Canvas cover: hides canvas content during intro phase */
/* Positioned exactly over canvas container to hide content until intro completes */
.canvas-cover {
    position: absolute;
    top: calc(100vh / 6); /* Starts directly below gradient header */
    left: 50px; /* Inner edge of left scrollbar */
    right: 50px; /* Inner edge of right scrollbar */
    height: calc(100vh - 100vh / 6); /* Fills remaining viewport height below gradient */
    background-color: #F7F7F7; /* Match page background color */
    z-index: 3; /* Above canvas (1) but below intro layer (5) and columns (10) */
    pointer-events: none; /* Don't block interactions - just visual cover */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Visible by default during intro */
    opacity: 1;
    visibility: visible;
}

/* Hide canvas cover when intro is completed */
.canvas-cover.hidden {
    opacity: 0;
    visibility: hidden;
}

/* UI mask: white background layer that masks UI elements during transition state */
/* Covers entire viewport to hide UI elements in gaps between scrollbars and gradients */
.ui-mask {
    position: fixed; /* Fixed positioning to cover entire viewport including gaps */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F7F7F7; /* Match page background color */
    z-index: 4; /* Above UI layer (2) and canvas cover (3), but below intro layer (5) and canvas (10+) */
    pointer-events: none; /* Don't block interactions - just visual mask */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Hidden by default - only visible during transition state */
    opacity: 0;
    visibility: hidden;
}

/* Show UI mask during transition state (when scrollbars detach with gap) */
.ui-mask.visible {
    opacity: 1;
    visibility: visible;
}

/* Canvas container: main white interaction area below gradient header and between scrollbars */
/* This defines the exact bounds where all interaction content (p5 canvas, UI panel) should be positioned */
.canvas-container {
    position: absolute;
    top: calc(100vh / 6); /* Starts directly below gradient header */
    left: 50px; /* Inner edge of left scrollbar */
    right: 50px; /* Inner edge of right scrollbar */
    height: calc(100vh - 100vh / 6); /* Fills remaining viewport height below gradient */
    z-index: 1; /* Above background but below UI layer */
    /* Allow pointer events for interaction content inside */
    pointer-events: auto;
}

/* Canvas text box: reusable text component with fixed position and style */
.canvas-text-box {
    position: fixed; /* Fixed to viewport for consistent positioning across canvases */
    left: 50px; /* 50px from left edge of outer screen boundary (viewport) */
    top: calc(100vh / 6 * 5 + 3px); /* Start at the top of the bottommost visible rectangle (6th rectangle, index 5) */
    width: 1035px;
    height: calc(100vh / 6); /* Spread across the full height of the rectangle */
    font-family: Helvetica, sans-serif;
    font-size: 29px;
    line-height: 29px;
    font-weight: bold;
    color: #2C2C2C; /* Same black as UI rectangles */
    z-index: 55; /* Above canvas interactions (grid z-index: 50) but below UI layer elements */
    pointer-events: none; /* Don't interfere with canvas interactions */
    overflow: visible; /* Ensure text is visible */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide original text box when SYN logo is hovered (instead of covering with white layer) */
.canvas-text-box.syn-hovered {
    opacity: 0;
    visibility: hidden;
}

/* White backing layer: no longer needed - hiding original text box directly */
/* Kept for backwards compatibility but hidden by default */
.canvas-text-box-syn-backing {
    position: fixed; /* Fixed to viewport - matches SYN overlay positioning */
    left: 50px; /* Same as SYN overlay */
    top: calc(100vh / 6 * 5 + 3px); /* Same as SYN overlay */
    width: 1035px; /* Same width as main text box */
    height: calc(100vh / 6); /* Same height as SYN overlay */
    background-color: white; /* White background to block main text box */
    z-index: 200; /* Above blur overlay (100) and main text box - ensures text is visible over blur */
    pointer-events: none; /* Don't interfere with canvas interactions */
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, left 0.2s ease;
}

/* Show backing layer when SYN element is hovered (via class toggle) */
.canvas-text-box-syn-backing.visible {
    opacity: 1;
    visibility: visible;
    left: 85px; /* Pushed inward to align with expanded scrollbars */
}

/* SYN hover overlay: appears above main canvas text box on hover */
.canvas-text-box-syn-overlay {
    position: fixed; /* Fixed to viewport - matches canvas-text-box positioning */
    right: 50px; /* Aligned to right scrollbar */
    top: calc(100vh / 6 + 2px); /* Starts 2px below bottom edge of gradient header */
    width: 1035px; /* Same width as main text box */
    height: auto; /* Auto height to fit content */
    font-family: Helvetica, sans-serif; /* Same font */
    font-size: 29px; /* Same font size */
    line-height: 29px; /* Same line height */
    font-weight: bold; /* Same font weight */
    color: #E0E0E0; /* Same gray as used elsewhere on the site */
    z-index: 201; /* Above blur overlay (100) and backing layer (200) - ensures text appears above blur */
    pointer-events: none; /* Don't interfere with canvas interactions */
    overflow: visible; /* Ensure text is visible */
    text-align: right; /* Right-aligned text */
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, right 0.2s ease;
}

/* Show overlay when SYN element is hovered (via class toggle) */
.canvas-text-box-syn-overlay.visible {
    opacity: 1;
    visibility: visible;
    right: 85px; /* Pushed inward to align with expanded scrollbars */
}

/* Line background blocks for canvas text box */
.canvas-line-bg {
    border-radius: 0; /* No rounded corners for stepped shape */
}

/* Canvas text box for SHAPE & LETTER only */
.canvas-text-box-letter-sound {
    position: absolute;
    /* 85px from the start of the canvas (85px below the bottom edge of gradient header) */
    top: 85px;
    /* 85px inward from the inner edge of left scrollbar (which is at 50px) */
    left: 85px;
    /* 85px inward from the inner edge of right scrollbar (which is at 50px from right) */
    right: 85px;
    /* Width is calculated automatically via left and right */
    font-family: Helvetica, sans-serif;
    font-size: 108px;
    line-height: 114px;
    font-weight: bold;
    color: #2C2C2C; /* Same black as UI rectangles */
    z-index: 11; /* Below main canvas text box (z-index: 12) but above canvas */
    pointer-events: auto; /* Enable hover interactions on letters */
    overflow: visible; /* Ensure text is visible */
    text-align: left; /* Left-aligned text */
    text-transform: uppercase; /* Convert text to uppercase */
    /* Ensure no padding or margin that would offset text from left edge */
    padding: 0;
    margin: 0;
    /* Hidden by default, shown only for SHAPE & LETTER pages */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
    /* Ensure proper word wrapping - no word splitting */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none; /* No automatic hyphenation */
}

/* Show text box when LETTER & SOUND is active */
.canvas-text-box-letter-sound.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Paragraph styling for letter-sound text box */
.canvas-text-box-letter-sound p {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left; /* Left-aligned text */
    /* Normal font size and line height for proper text flow */
    font-size: 108px; /* Match container font-size */
    line-height: 114px; /* Match container line-height */
    /* Ensure proper word wrapping - no word splitting */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none; /* No automatic hyphenation */
    /* Ensure normal white-space for proper text flow (not flex or per-letter layout) */
    white-space: normal; /* Normal wrapping behavior */
    /* Typography refinement: balanced spacing for justified text */
    word-spacing: 0.12em; /* Clear word separation, tighter than default justify gaps */
    letter-spacing: 0.03em; /* Subtle letter spacing for even distribution */
    /* No transforms or offsets that would shift lines */
    transform: none;
    /* Ensure no left indent */
    text-indent: 0;
}

/* Letter slot container - natural size, no clipping in default state */
.canvas-text-box-letter-sound .letter-slot {
    display: inline; /* Inline to maintain natural text flow for justification */
    position: relative; /* Allow absolute positioning of children */
    width: auto; /* Natural width - matches glyph size */
    height: auto; /* Natural height - matches glyph size */
    overflow: visible; /* No clipping - letters render normally */
    vertical-align: baseline; /* Align with text baseline */
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 1;
}

/* Static glyph - visible normally for layout, hidden on hover */
.canvas-text-box-letter-sound .letter-slot .letter-glyph-static {
    display: inline; /* Inline to maintain natural text flow */
    position: relative;
    /* Inherit font properties from parent paragraph */
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: inherit;
    pointer-events: none;
    /* Hover-out: delay before reappearing to allow letter to slide up and push shape out */
    /* No opacity transition - visibility controlled by position/masking only */
    transition: visibility 0s linear 0.315s; /* 0.315s delay (0.105s pause + 0.3s letter slide up, reduced by 30%), then instant show */
    visibility: visible;
}

/* Letter mask - 45×45px clipping area centered on letter */
/* Contains both the sliding letter glyph and the shape */
.canvas-text-box-letter-sound .letter-slot .letter-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 83px;
    height: 83px;
    transform: translate(-50%, -50%);
    overflow: hidden; /* Clip both letter and shape as they transition */
    pointer-events: none; /* Don't interfere with hover */
    z-index: 1;
    opacity: 0; /* Hidden by default */
    /* Hover-out: mask stays visible during animation, then hides instantly (no fade) */
    /* Delay matches hover-out animation timing (0.105s delay + 0.3s animation = 0.315s, reduced by 30%) */
    transition: opacity 0s linear 0.315s; /* Instant hide after 0.315s delay - no fade, just timing */
    /* Ensure mask fully clips content - no overflow visible */
    clip-path: inset(0);
}

/* Letter glyph - the sliding version inside mask, hidden by default */
.canvas-text-box-letter-sound .letter-slot .letter-glyph {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    /* Start at center position */
    transform: translate(-50%, -50%) translateY(0);
    /* Hover-out: letter slides UP from below (70px → 0) - translate only, no opacity */
    transition: transform 0.3s ease-in 0.105s; /* 0.105s delay (reduced by 30%), then 0.3s slide up - translate only */
    /* Inherit font properties from parent paragraph */
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    /* Center text both horizontally and vertically */
    align-items: center;
    justify-content: center;
    color: inherit;
    pointer-events: none;
    white-space: nowrap;
    /* Visibility controlled by mask and position only - always fully opaque when visible */
    opacity: 1; /* Always fully opaque when mask is visible */
    z-index: 1; /* Below shape */
}

/* Hover-out: letter slides up - translate only, no opacity */
.canvas-text-box-letter-sound .letter-slot.hover-leaving .letter-glyph {
    /* Letter slides from 70px (down) to 0 (center) - translate only */
    transform: translate(-50%, -50%) translateY(0);
    transition: transform 0.3s ease-in 0.105s; /* Translate only, no opacity (reduced delay by 30%) */
}

/* SVG shape container - positioned inside mask, slides up from below */
.canvas-text-box-letter-sound .letter-slot .letter-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 83px;
    height: 83px;
    /* Start from below (translateY(100px)) - matches letter slide distance for synchronized motion */
    transform: translate(-50%, -50%) translateY(100px);
    /* Hover-out: shape is pushed UP and out by letter sliding up - translate only, no opacity */
    transition: transform 0.3s ease-in 0.105s; /* 0.105s delay (shape pause, reduced by 30%), then 0.3s ease-in push up - translate only */
    /* Visibility controlled by mask and position only - always fully opaque when visible */
    opacity: 1; /* Always fully opaque when mask is visible */
    /* Shape appears above glyph to cover it */
    z-index: 2;
    pointer-events: none;
}

/* Hover-out state: shape is pushed up and out by letter sliding up */
.canvas-text-box-letter-sound .letter-slot.hover-leaving .letter-shape {
    /* Shape is pushed UP and out by letter sliding up - translate only */
    transform: translate(-50%, -50%) translateY(-100px);
    transition: transform 0.3s ease-in 0.105s; /* Translate only, no opacity (reduced delay by 30%) */
}

/* Letter slot hover state - letter slides down, shape slides up */
.canvas-text-box-letter-sound .letter-slot:hover,
.canvas-text-box-letter-sound .letter-slot.hover-active {
    /* Increase z-index so hovered letter's shape appears on top of neighbors */
    z-index: 10;
}

/* Hide static glyph on hover - instant (no fade) */
.canvas-text-box-letter-sound .letter-slot:hover .letter-glyph-static,
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-glyph-static {
    visibility: hidden; /* Instant hide - no opacity, visibility only */
    /* Hover-in: instant hide, no delay */
    transition: visibility 0s ease; /* Instant hide on hover */
}

/* Show mask on hover - becomes visible immediately */
.canvas-text-box-letter-sound .letter-slot:hover .letter-mask,
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-mask {
    opacity: 1; /* Instant show - no transition */
    /* Hover-in: instant show, no transition */
    transition: none; /* No transitions - instant visibility */
}

/* Sliding glyph: visible as it slides down into mask, then gets clipped */
/* Slide down enough to fully exit the mask (70px ensures tall letters disappear completely) */
.canvas-text-box-letter-sound .letter-slot:hover .letter-glyph,
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-glyph {
    /* Visible during slide-down animation - translate only, no opacity */
    transform: translate(-50%, -50%) translateY(100px); /* Slide down enough to fully disappear */
    /* Hover-in: no delay, immediate response - translate only */
    transition: transform 0.2s ease; /* Translate only, no opacity */
}

/* Shape slides up from below to center position on hover */
/* This creates the "push" effect - shape takes the letter's place */
.canvas-text-box-letter-sound .letter-slot:hover .letter-shape,
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-shape {
    /* Visible as it slides up - translate only, no opacity */
    transform: translate(-50%, -50%) translateY(0); /* Slide up to center position */
    /* Hover-in: no delay, immediate response - translate only */
    transition: transform 0.2s ease; /* Translate only, no opacity */
    z-index: 2;
}

/* When hover-active class is present, override any hover-out delays to prevent blank states */
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-glyph-static {
    /* Force immediate hide when hover-active class is set - visibility only */
    transition: visibility 0s ease !important;
}

.canvas-text-box-letter-sound .letter-slot.hover-active .letter-mask,
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-glyph,
.canvas-text-box-letter-sound .letter-slot.hover-active .letter-shape {
    /* Force immediate show when hover-active class is set (cancel any pending hover-out) - translate only */
    transition: transform 0.2s ease !important; /* Translate only, no opacity */
}

/* Keep old letter-span styles for spaces (they won't be wrapped in slots) */
.canvas-text-box-letter-sound .letter-span {
    display: inline; /* Use inline to maintain natural text flow for justification */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-align: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transform: none;
    z-index: 1;
}

/* Space character handling - no transformation */
.canvas-text-box-letter-sound .letter-span.space {
    display: inline;
    width: auto;
    height: auto;
    font-size: inherit;
    line-height: inherit;
    cursor: default;
    margin: 0;
    padding: 0;
    transform: none;
}

/* Space character: no shape */
.canvas-text-box-letter-sound .letter-span.space .letter-shape {
    display: none;
}

/* Change shape colors to match SHAPE & NUMBER canvas style */
.canvas-text-box-letter-sound svg,
.canvas-text-box-letter-sound .letter-shape svg,
.canvas-text-box-letter-sound .letter-slot svg {
    fill: #fff !important; /* White fill to match shape & number canvas */
    stroke: #2C2C2C !important; /* Same black as UI rectangles */
    stroke-width: 1.63px !important; /* ~3px visual stroke (scaled from 45px viewBox to 83px display) */
}

/* ==================
   LETTER + COLOR TEXT BOX
   ================== */
/* Canvas text box for LETTER & COLOR only */
.canvas-text-box-letter-color {
    position: absolute;
    /* 85px from the start of the canvas (85px below the bottom edge of gradient header) */
    top: 85px;
    /* 85px inward from the inner edge of left scrollbar (which is at 50px) */
    left: 85px;
    /* 85px inward from the inner edge of right scrollbar (which is at 50px from right) */
    right: 85px;
    /* Width is calculated automatically via left and right */
    font-family: Helvetica, sans-serif;
    font-size: 67px;
    line-height: 71px;
    font-weight: bold;
    color: #2C2C2C; /* Same black as UI rectangles */
    z-index: 11; /* Below main canvas text box (z-index: 12) but above canvas */
    pointer-events: auto; /* Enable hover interactions on letters */
    overflow: visible; /* Ensure text is visible */
    text-align: left; /* Left-aligned text */
    text-transform: uppercase; /* Convert text to uppercase */
    /* Ensure no padding or margin that would offset text from left edge */
    padding: 0;
    margin: 0;
    /* Hidden by default, shown only for LETTER & COLOR pages */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
    /* Ensure proper word wrapping - no word splitting */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none; /* No automatic hyphenation */
}

/* Show text box when LETTER & COLOR is active */
.canvas-text-box-letter-color.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Paragraph styling for letter-color text box */
.canvas-text-box-letter-color p {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left; /* Left-aligned text */
    /* Normal font size and line height for proper text flow */
    font-size: 67px; /* Match container font-size */
    line-height: 71px; /* Match container line-height */
    /* Ensure proper word wrapping - no word splitting */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none; /* No automatic hyphenation */
    /* Ensure normal white-space for proper text flow (not flex or per-letter layout) */
    white-space: normal; /* Normal wrapping behavior */
    /* Typography refinement: balanced spacing for justified text */
    word-spacing: 0.12em; /* Clear word separation, tighter than default justify gaps */
    letter-spacing: 0.03em; /* Subtle letter spacing for even distribution */
    /* No transforms or offsets that would shift lines */
    transform: none;
    /* Ensure no left indent */
    text-indent: 0;
}

/* Letter slot container - natural size, no clipping in default state */
.canvas-text-box-letter-color .letter-slot {
    display: inline; /* Inline to maintain natural text flow for justification */
    position: relative; /* Allow absolute positioning of children */
    width: auto; /* Natural width - matches glyph size */
    height: auto; /* Natural height - matches glyph size */
    overflow: visible; /* No clipping - letters render normally */
    vertical-align: baseline; /* Align with text baseline */
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 1;
}

/* Static glyph - visible normally for layout, hidden on hover */
.canvas-text-box-letter-color .letter-slot .letter-glyph-static {
    display: inline; /* Inline to maintain natural text flow */
    position: relative;
    /* Inherit font properties from parent paragraph */
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: inherit;
    pointer-events: none;
    /* Hover-out: delay before reappearing to allow letter to slide up and push color out */
    /* No opacity transition - visibility controlled by position/masking only */
    transition: visibility 0s linear 0.315s; /* 0.315s delay, then instant show */
    visibility: visible;
}

/* Letter mask - sized to contain full 67px bold letters (W is ~90px wide, height ~77px) */
/* Contains both the sliding letter glyph and the color square */
.canvas-text-box-letter-color .letter-slot .letter-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 95px;
    height: 85px;
    transform: translate(-50%, -50%);
    overflow: hidden; /* Clip both letter and color as they transition */
    pointer-events: none; /* Don't interfere with hover */
    z-index: 1;
    opacity: 0; /* Hidden by default */
    /* Hover-out: mask stays visible during animation, then hides instantly (no fade) */
    transition: opacity 0s linear 0.315s; /* Instant hide after 0.315s delay */
    /* Ensure mask fully clips content - no overflow visible */
    clip-path: inset(0);
}

/* Letter glyph - the sliding version inside mask, hidden by default */
.canvas-text-box-letter-color .letter-slot .letter-glyph {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    /* Start at center position */
    transform: translate(-50%, -50%) translateY(0);
    /* Hover-out: letter slides UP from below (70px → 0) - translate only, no opacity */
    transition: transform 0.3s ease-in 0.105s; /* 0.105s delay, then 0.3s slide up */
    /* Inherit font properties from parent paragraph */
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    /* Center text both horizontally and vertically */
    align-items: center;
    justify-content: center;
    color: inherit;
    pointer-events: none;
    white-space: nowrap;
    /* Visibility controlled by mask and position only - always fully opaque when visible */
    opacity: 1; /* Always fully opaque when mask is visible */
    z-index: 1; /* Below color square */
}

/* Hover-out: letter slides up - translate only, no opacity */
.canvas-text-box-letter-color .letter-slot.hover-leaving .letter-glyph {
    /* Letter slides from 70px (down) to 0 (center) - translate only */
    transform: translate(-50%, -50%) translateY(0);
    transition: transform 0.3s ease-in 0.105s; /* Translate only, no opacity */
}

/* Colored letter - positioned inside mask, slides up from below */
.canvas-text-box-letter-color .letter-slot .letter-color {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    /* Start from below (translateY(100px)) - matches letter slide distance for synchronized motion */
    transform: translate(-50%, -50%) translateY(100px);
    /* Hover-out: color is pushed UP and out by letter sliding up - translate only, no opacity */
    transition: transform 0.3s ease-in 0.105s; /* 0.105s delay, then 0.3s ease-in push up */
    /* Inherit font properties from parent paragraph */
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    /* Center text both horizontally and vertically */
    align-items: center;
    justify-content: center;
    /* Color is set via JS style.color */
    pointer-events: none;
    white-space: nowrap;
    /* Visibility controlled by mask and position only - always fully opaque when visible */
    opacity: 1; /* Always fully opaque when mask is visible */
    /* Colored letter appears above glyph to cover it */
    z-index: 2;
}

/* Hover-out state: colored letter is pushed up and out by black letter sliding up */
.canvas-text-box-letter-color .letter-slot.hover-leaving .letter-color {
    /* Colored letter is pushed UP and out by black letter sliding up - translate only */
    transform: translate(-50%, -50%) translateY(-100px);
    transition: transform 0.3s ease-in 0.105s; /* Translate only, no opacity */
}

/* Letter slot hover state - black letter slides down, colored letter slides up */
.canvas-text-box-letter-color .letter-slot:hover,
.canvas-text-box-letter-color .letter-slot.hover-active {
    /* Increase z-index so hovered colored letter appears on top of neighbors */
    z-index: 10;
}

/* Hide static glyph on hover - instant (no fade) */
.canvas-text-box-letter-color .letter-slot:hover .letter-glyph-static,
.canvas-text-box-letter-color .letter-slot.hover-active .letter-glyph-static {
    visibility: hidden; /* Instant hide - no opacity, visibility only */
    /* Hover-in: instant hide, no delay */
    transition: visibility 0s ease; /* Instant hide on hover */
}

/* Show mask on hover - becomes visible immediately */
.canvas-text-box-letter-color .letter-slot:hover .letter-mask,
.canvas-text-box-letter-color .letter-slot.hover-active .letter-mask {
    opacity: 1; /* Instant show - no transition */
    /* Hover-in: instant show, no transition */
    transition: none; /* No transitions - instant visibility */
}

/* Sliding glyph: visible as it slides down into mask, then gets clipped */
/* Slide down enough to fully exit the mask (70px ensures tall letters disappear completely) */
.canvas-text-box-letter-color .letter-slot:hover .letter-glyph,
.canvas-text-box-letter-color .letter-slot.hover-active .letter-glyph {
    /* Visible during slide-down animation - translate only, no opacity */
    transform: translate(-50%, -50%) translateY(100px); /* Slide down enough to fully disappear */
    /* Hover-in: no delay, immediate response - translate only */
    transition: transform 0.2s ease; /* Translate only, no opacity */
}

/* Colored letter slides up from below to center position on hover */
/* This creates the "push" effect - colored letter takes the black letter's place */
.canvas-text-box-letter-color .letter-slot:hover .letter-color,
.canvas-text-box-letter-color .letter-slot.hover-active .letter-color {
    /* Visible as it slides up - translate only, no opacity */
    transform: translate(-50%, -50%) translateY(0); /* Slide up to center position */
    /* Hover-in: no delay, immediate response - translate only */
    transition: transform 0.2s ease; /* Translate only, no opacity */
    z-index: 2;
}

/* When hover-active class is present, override any hover-out delays to prevent blank states */
.canvas-text-box-letter-color .letter-slot.hover-active .letter-glyph-static {
    /* Force immediate hide when hover-active class is set - visibility only */
    transition: visibility 0s ease !important;
}

.canvas-text-box-letter-color .letter-slot.hover-active .letter-mask,
.canvas-text-box-letter-color .letter-slot.hover-active .letter-glyph,
.canvas-text-box-letter-color .letter-slot.hover-active .letter-color {
    /* Force immediate show when hover-active class is set (cancel any pending hover-out) - translate only */
    transition: transform 0.2s ease !important; /* Translate only, no opacity */
}

/* Keep old letter-span styles for spaces (they won't be wrapped in slots) */
.canvas-text-box-letter-color .letter-span {
    display: inline; /* Use inline to maintain natural text flow for justification */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-align: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transform: none;
    z-index: 1;
}

/* Space character handling - no transformation */
.canvas-text-box-letter-color .letter-span.space {
    display: inline;
    width: auto;
    height: auto;
    font-size: inherit;
    line-height: inherit;
    cursor: default;
    margin: 0;
    padding: 0;
    transform: none;
}

/* Space character: no colored letter */
.canvas-text-box-letter-color .letter-span.space .letter-color {
    display: none;
}


/* Canvas instruction text for SOUND & SHAPE page */
.canvas-instruction-text {
    position: absolute;
    /* Center horizontally and vertically in canvas container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    color: #2C2C2C; /* Same black as UI rectangles */
    background-color: white; /* White background to match page background */
    padding: 8px 16px; /* Add padding around text for better visibility */
    z-index: 13; /* Above canvas (z-index: 11) to ensure text appears on top of drawings */
    pointer-events: none; /* Don't interfere with canvas interactions */
    white-space: nowrap;
    /* Hidden by default, shown only for SOUND & SHAPE pages */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

/* Show instruction text when SOUND & SHAPE is active */
.canvas-instruction-text.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

.line-horizontal {
    width: 100vw;
    height: 1px;
    left: 0;
    top: 50px;
    z-index: 1;
    display: none; /* Hide grid lines */
}

.container {
    text-align: center;
    position: relative;
    z-index: 1;
    pointer-events: none; /* Prevent interaction with center content */
}

h1 {
    font-size: 3rem;
    font-weight: normal;
}


/* Container for concentric rings with letter A on Letter + Letter page */
.letter-letter-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 90px)); /* Centered with upward offset */
    width: 620px;
    height: 620px;
    pointer-events: auto; /* Enable interactions with rings */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.letter-letter-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* SVG container for concentric rings */
.concentric-rings-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Ring group - contains circle and letter slice */
.ring-group {
    cursor: default;
    pointer-events: none; /* No interaction needed - rings follow mouse automatically */
}

/* Ring circle styling */
.ring-circle {
    fill: white;
    stroke: #FAB01B;
    stroke-width: 2px;
    pointer-events: all; /* Allow clicking on the entire circle area */
}

/* Ring letter - the sliced portion of A or 5 */
.ring-letter {
    pointer-events: none; /* Don't interfere with ring dragging */
    user-select: none;
}

/* Container for concentric rings with digit 5 on Number + Number page */
.number-number-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 90px)); /* Centered with upward offset - same as Letter + Letter */
    width: 620px;
    height: 620px;
    pointer-events: auto; /* Enable interactions with rings */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.number-number-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Number + Number rings: white stroke to blend with background and cover seams */
#number-number-rings-svg .ring-circle {
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    /* stroke: #2C2C2C; */ /* Original visible ring outline */
}

#number-number-rings-svg .ring-letter {
    fill: #2C2C2C;
}

/* Container for concentric rings with smiley face on Emotion + Emotion page */
.emotion-emotion-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 90px)); /* Centered with upward offset - same as Number + Number */
    width: 620px;
    height: 620px;
    pointer-events: auto; /* Enable interactions with rings */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.emotion-emotion-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Emotion + Emotion rings: white stroke to blend with background and cover seams */
#emotion-emotion-rings-svg .ring-circle {
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    /* stroke: #2C2C2C; */ /* Original visible ring outline */
}

#emotion-emotion-rings-svg .smiley-eye {
    fill: #2C2C2C;
}

#emotion-emotion-rings-svg .smiley-mouth {
    stroke: #2C2C2C;
}

/* Letter + Letter rings: white stroke to blend with background and cover seams */
#concentric-rings-svg .ring-circle {
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    /* stroke: #2C2C2C; */ /* Original visible ring outline */
}

#concentric-rings-svg .ring-letter {
    fill: #2C2C2C;
}

/* Container for concentric rings with black square on Shape + Shape page */
.shape-shape-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 90px)); /* Centered with upward offset - same as Letter + Letter */
    width: 620px;
    height: 620px;
    pointer-events: auto; /* Enable interactions with rings */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.shape-shape-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Shape + Shape rings: white stroke to blend with background and cover seams */
#shape-shape-rings-svg .ring-circle {
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    /* stroke: #2C2C2C; */ /* Original visible ring outline */
}

#shape-shape-rings-svg .ring-star {
    fill: #2C2C2C;
    pointer-events: none; /* Don't interfere with ring rotation */
}

/* ==================
   SHAPE + COLOR SQUARES GRID (grid of squares that repel from mouse)
   ================== */
/* Container for Shape + Color squares grid interaction */
.shape-color-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Same as other interaction containers */
    overflow: hidden; /* Clip squares at container bounds */
    background: #ffffff;
}

.shape-color-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shape-color-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Base shape element (shared properties) */
.shape-color-shape {
    position: absolute;
    width: 110px;
    height: 110px;
    background: #ffffff; /* White fill */
    box-sizing: border-box;
    pointer-events: auto; /* Allow grabbing shapes */
    cursor: grab;
    will-change: transform; /* Optimize for animations */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Smooth color transition for flash effect */
    transition: background-color 0.15s ease-out;
}

/* Dragging state cursor */
.shape-color-shape:active,
.shape-color-shape.dragging {
    cursor: grabbing;
}

/* SVG stroke and fill settings for consistent 3px outline */
.shape-color-shape svg polygon,
.shape-color-shape svg ellipse {
    transition: fill 0.15s ease-out;
    stroke-width: 3px;
    vector-effect: non-scaling-stroke; /* Stroke stays 3px regardless of SVG scaling */
}

/* Square shape (25%) */
.shape-color-square {
    border: 3px solid #2C2C2C;
}

/* Circle shape (25%) */
.shape-color-circle {
    border: 3px solid #2C2C2C;
    border-radius: 50%;
}

/* Triangle shape (25%) - using SVG */
.shape-color-triangle {
    background: transparent;
    border: none;
}
.shape-color-triangle svg {
    width: 100%;
    height: 100%;
}

/* Ellipse shape (15%) - same bounding box, visual ellipse inside */
.shape-color-ellipse {
    background: transparent;
    border: none;
}
.shape-color-ellipse svg {
    width: 100%;
    height: 100%;
}

/* Star shape (10%) - using SVG */
.shape-color-star {
    background: transparent;
    border: none;
}
.shape-color-star svg {
    width: 100%;
    height: 100%;
}

/* Pentagon shape (~8%) - using SVG */
.shape-color-pentagon {
    background: transparent;
    border: none;
}
.shape-color-pentagon svg {
    width: 100%;
    height: 100%;
}

/* ==================
   MELODY CIRCLE LETTERS (Sound + Letter page)
   ================== */
.melody-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; /* Circle diameter - increased for larger letters */
    height: 700px; /* Circle diameter - increased for larger letters */
    pointer-events: none; /* Don't interfere with canvas interactions */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.melody-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* SVG for lines from center to each letter */
.melody-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Below letters */
    overflow: visible;
}

.melody-line {
    stroke: #2C2C2C;
    stroke-width: 2px;
    fill: none;
}

.melody-letter {
    position: absolute;
    font-family: Helvetica, sans-serif;
    font-size: 200px;
    font-weight: bold;
    color: #2C2C2C; /* Same black as UI */
    text-transform: uppercase;
    /* Positioned by JavaScript using left/top pixel values */
    z-index: 2; /* Above lines */
    pointer-events: auto; /* Enable dragging */
    cursor: grab;
    user-select: none; /* Prevent text selection while dragging */
}

.melody-letter:active {
    cursor: grabbing;
}

.melody-letter.dragging {
    cursor: grabbing;
}

/* Variable weight class for M letter - uses Helvetica Now Variable font */
.melody-letter.variable-weight {
    font-family: 'Helvetica Now Variable', Helvetica, sans-serif;
    font-weight: 400; /* Default, will be overridden by JS */
}

/* ==================
   SHAPE & NUMBER CANVAS
   ================== */
.shape-number-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Same as p5-container */
    /* No transition - instant page switching */
}

.shape-number-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shape-number-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#shape-number-draw-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
    z-index: 11;
}

.shape-number-panel {
    display: none !important; /* Hidden - mouse now controls count/size */
    position: absolute;
    right: 0px;
    bottom: 40px;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    box-sizing: border-box;
    background: #2C2C2C;
    padding: 10px;
    z-index: 12; /* Above canvas */
    overflow-y: auto;
    overflow-x: hidden;
    /* Slide-in animation: starts off-screen right */
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

/* Visible state: panel slides into position */
.shape-number-panel.visible {
    transform: translateX(0);
}

.shape-number-title {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono NL', monospace;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 0.8;
}

.shape-number-label {
    font-size: 15px;
    margin: 4px 0;
    font-family: 'JetBrains Mono NL', monospace;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 0.8;
}

.shape-number-value {
    font-size: 15px;
    margin-top: 4px;
    color: #ffffff;
    font-family: 'JetBrains Mono NL', monospace;
    letter-spacing: 0.03em;
    line-height: 0.8;
}

.shape-number-spacer {
    height: 10px;
}

#shape-number-countSlider,
#shape-number-sizeSlider {
    width: 100%;
    box-sizing: border-box;
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 0.8;
    background-color: transparent;
    border: none;
}

/* Shape buttons container */
.shape-number-shapes-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.shape-number-shapes-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.shape-number-shape-btn {
    flex: 1;
    margin: 0;
    font-size: 20px;
    font-family: 'JetBrains Mono NL', monospace;
    letter-spacing: 0.03em;
    line-height: 0.8;
    text-transform: none;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

/* Style for range sliders */
#shape-number-countSlider,
#shape-number-sizeSlider {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: #ffffff;
    outline: none;
}

#shape-number-countSlider::-webkit-slider-thumb,
#shape-number-sizeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    cursor: pointer;
    border-radius: 0;
}

#shape-number-countSlider::-moz-range-thumb,
#shape-number-sizeSlider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    cursor: pointer;
    border: none;
    border-radius: 0;
}

/* ==================
   SHAPE + SHAPE CANVAS (Ellipses Interaction)
   ================== */
.shape-shape-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Same as p5-container */
    overflow: hidden; /* Clip any content extending beyond container bounds */
    /* No transition - instant page switching */
}

.shape-shape-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shape-shape-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Shapes container for Shape + Color interaction */
.shape-shape-ellipses {
    position: absolute;
    top: 35px; /* 35px padding from top edge */
    bottom: 35px; /* 35px padding from bottom edge */
    left: 35px; /* 35px padding from left edge */
    right: 35px; /* 35px padding from right edge */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    z-index: 12;
    pointer-events: auto;
    overflow: visible; /* Allow strokes to extend beyond container */
}

/* Wrapper for each SVG shape (ellipse, triangle, rectangle) */
.shape-wrapper {
    flex: 1 1 14.2857%; /* Equal initial width (100% / 7) */
    height: 100%;
    position: relative;
    /* Remove margin/padding to ensure touching edges */
    margin: 0;
    padding: 0;
    /* Cursor changes based on position - handled by JS for edges */
    cursor: default;
    /* Prevent text selection during drag */
    user-select: none;
    -webkit-user-select: none;
    overflow: visible; /* Allow stroke to extend beyond wrapper bounds */
}

/* SVG container - fills the wrapper */
.shape-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible; /* Allow stroke to extend beyond SVG bounds */
}

/* Base styling for all SVG shapes (ellipse, triangle, rectangle) */
.shape-path {
    fill: #ffffff; /* White fill */
    stroke: #2C2C2C; /* Black stroke - same as UI rectangles */
    stroke-width: 5px; /* 5px stroke width */
    vector-effect: non-scaling-stroke; /* KEY: Stroke width stays constant regardless of scaling */
    stroke-linejoin: miter; /* Sharp corners for consistent appearance */
    stroke-linecap: butt; /* Flat line ends */
    transition: stroke 0.15s ease; /* Smooth transition when leaving hover */
}

/* Hover effect on ellipse - BLUE */
.shape-wrapper-ellipse:hover .shape-ellipse {
    stroke: #293990; /* Blue */
    transition: none; /* Instant change on hover-in */
}

/* Hover effect on rectangle - ORANGE */
.shape-wrapper-rectangle:hover .shape-rectangle {
    stroke: #EF4538; /* Orange */
    transition: none; /* Instant change on hover-in */
}

/* Hover effect on rhombus - YELLOW */
.shape-wrapper-rhombus:hover .shape-rhombus {
    stroke: #FAB01B; /* Yellow */
    transition: none; /* Instant change on hover-in */
}

/* Drag handle zones - invisible areas on wrapper edges for dragging */
.shape-wrapper::before,
.shape-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15px; /* Drag zone width */
    height: 100%;
    cursor: ew-resize; /* Horizontal resize cursor */
    z-index: 1;
}

/* Left edge drag handle */
.shape-wrapper::before {
    left: 0;
}

/* Right edge drag handle */
.shape-wrapper::after {
    right: 0;
}

/* First shape: no left drag handle (can't resize left edge) */
.shape-wrapper:first-child::before {
    display: none;
}

/* Last shape: no right drag handle (can't resize right edge) */
.shape-wrapper:last-child::after {
    display: none;
}

/* Active dragging state - applied via JS */
.shape-wrapper.dragging {
    cursor: ew-resize;
}

/* When any shape is being dragged, show resize cursor on container */
.shape-shape-ellipses.dragging {
    cursor: ew-resize;
}

/* ==================
   SOUND & SHAPE CANVAS
   ================== */
.sound-shape-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* No transition - instant page switching */
}

.sound-shape-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sound-shape-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#sound-shape-draw-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    z-index: 12; /* Above brush layer */
    cursor: grab;
}

#sound-shape-draw-surface:active {
    cursor: grabbing;
}

#sound-shape-brush-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
    z-index: 11;
    pointer-events: none; /* Don't capture mouse events */
}

/* Shared button styles for Sound & Shape page */
.sound-shape-btn {
    position: absolute;
    right: 10px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    letter-spacing: 0.03em;
    line-height: 1;
    border-radius: 0;
    border: none;
    background: #2C2C2C;
    color: #ffffff;
    cursor: pointer;
    z-index: 1000;
    /* Slide-in animation */
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.sound-shape-container:not(.hidden) .sound-shape-btn {
    transform: translateX(0);
}

.sound-shape-btn:hover {
    background: #404040;
}

/* Individual button positioning (stacked vertically, bottom to top) */
#sound-shape-play-btn {
    bottom: 50px;
}

#sound-shape-reset-btn {
    bottom: 90px;
}

#sound-shape-export-btn {
    bottom: 130px;
}

/* ==================
   SOUND + COLOR SQUARES (6 colored squares in a circle at canvas edges)
   ================== */
.sound-color-squares-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Container doesn't block interactions */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.sound-color-squares-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Individual colored square - 100px × 100px */
.sound-color-square {
    position: absolute;
    width: 100px;
    height: 100px;
    pointer-events: auto; /* Enable drag interactions */
    cursor: grab;
    transition: background-color 0.15s ease;
    z-index: 2; /* Above lines (z-index: 1) */
    mix-blend-mode: multiply; /* Colors blend/darken where squares overlap */
    border: 3px solid #2C2C2C; /* Black border so white squares are visible */
    box-sizing: border-box; /* Include border in size calculation */
    /* Position will be set by JavaScript */
}

.sound-color-square:active,
.sound-color-square.dragging {
    cursor: grabbing;
}

/* Hover effect for squares - no shadow */
.sound-color-square:hover {
    /* No shadow effect */
}

/* Wrapper that isolates blend mode to only affect squares, not lines */
.sound-color-squares-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    isolation: isolate; /* Blend mode only applies within this container */
    pointer-events: none; /* Let events pass through to squares */
}

/* SVG container for lines from center to each square */
.sound-color-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Below squares (which don't have explicit z-index, so they're higher) */
    overflow: visible;
}

/* Line styling - same black as the site (#2C2C2C) */
.sound-color-line {
    stroke: #2C2C2C;
    stroke-width: 2px;
    fill: none;
}

/* ==================
   SOUND + SOUND CONCENTRIC RINGS WITH WAVE
   ================== */
/* Container for concentric rings with sound wave on Sound + Sound page */
.sound-sound-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 90px)); /* Centered with upward offset - same as Shape + Shape */
    width: 620px;
    height: 620px;
    pointer-events: auto; /* Enable interactions with rings */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* Flex column to stack SVG and button */
    flex-direction: column;
    align-items: center;
    /* No transition - instant page switching */
}

.sound-sound-circle-container.visible {
    display: flex;
    visibility: visible;
    opacity: 1;
}

/* Sound + Sound rings: white stroke to blend with background and cover seams */
#sound-sound-rings-svg .ring-circle {
    stroke: #ffffff !important;
    stroke-width: 6px !important;
    /* stroke: #2C2C2C; */ /* Original visible ring outline */
}

#sound-sound-rings-svg .ring-wave {
    stroke: #2C2C2C;
    stroke-width: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none; /* Don't interfere with ring rotation */
}

/* ==================
   LETTER + NUMBER CIRCLE (A-Z followed by 1-9 arranged in a circle)
   ================== */
.letter-number-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 80px)); /* Moved up by 80px */
    width: 700px;
    height: 700px;
    /* Hidden by default - shown only on Letter + Number pages (2-3, 3-2) */
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* No transition - instant page switching */
}

.letter-number-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* SVG container for lines from center to each letter/number */
.letter-number-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Below letters/numbers */
    overflow: visible;
}

/* Line styling - same black as the site (#2C2C2C) */
.letter-number-line {
    stroke: #2C2C2C;
    stroke-width: 2px;
    fill: none;
}

/* Individual letter/number item */
.letter-number-item {
    position: absolute;
    font-family: Helvetica, sans-serif;
    font-size: 48px; /* 2x larger (was 24px) */
    font-weight: bold;
    color: #2C2C2C;
    text-transform: uppercase;
    /* Centered on its position */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* 2x larger (was 40px) */
    height: 80px; /* 2x larger (was 40px) */
    /* Position will be set by JavaScript */
    user-select: none;
    pointer-events: auto;
    z-index: 2; /* Above lines */
    /* Smooth transition for font-size changes based on distance from center */
    transition: font-size 0.1s ease-out;
}

/* ==================
   COLOR + COLOR CONCENTRIC RINGS
   ================== */
.color-color-circle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 90px)); /* Centered with upward offset */
    width: 620px;
    height: 620px;
    pointer-events: auto; /* Enable interactions with rings */
    z-index: 13; /* Above canvas but below buttons */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* No transition - instant page switching */
}

.color-color-circle-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Individual SVG ring (color wheel with 6 triangular segments) */
.color-color-ring {
    position: absolute;
    /* Centered in container */
    top: 50%;
    left: 50%;
    transform-origin: center center;
    pointer-events: none; /* Don't interfere with other rings */
}

/* Ring sizes: 600px, 480px, 360px, 240px, 120px (decreasing by 120px each) */
.color-color-ring[data-ring="0"] {
    width: 600px;
    height: 600px;
    margin-top: -300px;
    margin-left: -300px;
}

.color-color-ring[data-ring="1"] {
    width: 480px;
    height: 480px;
    margin-top: -240px;
    margin-left: -240px;
}

.color-color-ring[data-ring="2"] {
    width: 360px;
    height: 360px;
    margin-top: -180px;
    margin-left: -180px;
}

.color-color-ring[data-ring="3"] {
    width: 240px;
    height: 240px;
    margin-top: -120px;
    margin-left: -120px;
}

.color-color-ring[data-ring="4"] {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
}

/* Triangular color segments - start white with white borders (invisible) */
.color-segment {
    fill: white;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linejoin: round;
    transition: fill 0.3s ease-out;
}

/* Revealed state - show actual colors (matching side scrollbar order exactly) */
.color-segment.revealed[data-segment="0"] { fill: #EF4538; } /* Red (top) */
.color-segment.revealed[data-segment="1"] { fill: #891951; } /* Purple (top-right) */
.color-segment.revealed[data-segment="2"] { fill: #FAB01B; } /* Yellow (right) */
.color-segment.revealed[data-segment="3"] { fill: #007A6F; } /* Teal/Green (bottom) */
.color-segment.revealed[data-segment="4"] { fill: #EB4781; } /* Pink (bottom-left) */
.color-segment.revealed[data-segment="5"] { fill: #293990; } /* Blue (top-left) */

/* When mouse is outside canvas, revealed segments show as black (same as non-revealed) */
.color-color-circle-container.mouse-outside-canvas .color-segment.revealed {
    fill: #2C2C2C;
}

/* ==================
   NUMBER + EMOTION DIGITS
   ================== */
.number-emotion-digits-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 13; /* Above canvas but below buttons */
}

.number-emotion-digits-container.visible {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Individual digit styling - absolute positioning for custom layout */
.number-emotion-digit {
    font-family: Helvetica, sans-serif;
    font-size: 300px;
    font-weight: bold;
    color: #2C2C2C; /* Site's standard black */
    line-height: 1;
    user-select: none;
    cursor: grab;
    /* Absolute position within container */
    position: absolute;
    /* Smooth transitions for scale changes */
    transition: transform 0.15s ease-out;
    /* Ensure scaling happens from center */
    transform-origin: center center;
}

/* Initial positions based on design image */
/* 4 - upper center-left */
.number-emotion-digit[data-digit="4"] {
    left: 22%;
    top: 5%;
}

/* 1 - upper right */
.number-emotion-digit[data-digit="1"] {
    left: 78%;
    top: 3%;
}

/* 2 - lower left */
.number-emotion-digit[data-digit="2"] {
    left: 2%;
    top: 42%;
}

/* 3 - next to 2, slightly higher and to the right, 30% smaller */
.number-emotion-digit[data-digit="3"] {
    left: 18%;
    top: 38%;
    font-size: 210px; /* 300px * 0.7 = 30% smaller */
}

/* 7 - lower right, larger */
.number-emotion-digit[data-digit="7"] {
    left: 68%;
    top: 32%;
    font-size: 257px; /* 285px * 0.9 = additional 10% smaller */
}

.number-emotion-digit:active,
.number-emotion-digit.dragging {
    cursor: grabbing;
}

/* Digit 7 animation - double jump with 360 rotation every 5 seconds */
@keyframes digit7JumpRotate {
    0% { transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) translateY(0) rotate(0deg); }
    15% { transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) translateY(-40px) rotate(90deg); }
    30% { transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) translateY(0) rotate(180deg); }
    45% { transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) translateY(-40px) rotate(270deg); }
    60% { transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) translateY(0) rotate(360deg); }
    100% { transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) translateY(0) rotate(360deg); }
}

.number-emotion-digit.digit7-animating {
    animation: digit7JumpRotate 1s ease-in-out;
}

/* SVG container for lines connecting digits to center */
.number-emotion-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12; /* Below digits (which are z-index 13) but above canvas */
    overflow: visible;
}

.number-emotion-lines-svg.hidden {
    display: none;
}

/* Individual line styling */
.number-emotion-line {
    stroke: #2C2C2C;
    stroke-width: 2px;
    fill: none;
}

/* ==================
   SOUND + EMOTION SMILEY
   ================== */
.sound-emotion-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Same as other interaction containers */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align to top */
    background: #ffffff;
}

.sound-emotion-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sound-emotion-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* SVG smiley face */
.sound-emotion-smiley {
    width: calc(100% - 40px); /* 20px margin from each side */
    height: calc(100% - 140px); /* Full height minus 20px top, 120px bottom */
    display: block;
    cursor: ew-resize; /* Indicate horizontal interaction */
    margin-top: 20px; /* 20px from top - same as side margins */
}

/* Ellipse face outline */
.smiley-face {
    fill: none;
    stroke: #2C2C2C;
    stroke-width: 25px;
}

/* Eyes - filled circles */
.smiley-eye {
    fill: #2C2C2C;
}

/* Mouth - curved line */
.smiley-mouth {
    fill: none;
    stroke: #2C2C2C;
    stroke-width: 25px;
    stroke-linecap: round;
}

/* Slider styling - hidden, replaced by mouse interaction */
.sound-emotion-slider {
    display: none; /* Hidden - mouse X position now controls the smiley */
}

/* Slider thumb */
.sound-emotion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #2C2C2C;
    cursor: pointer;
    border-radius: 0; /* Square thumb to match site style */
}

.sound-emotion-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #2C2C2C;
    cursor: pointer;
    border: none;
    border-radius: 0;
}

/* Slider track */
.sound-emotion-slider::-webkit-slider-runnable-track {
    height: 5px;
    background: #2C2C2C;
}

.sound-emotion-slider::-moz-range-track {
    height: 5px;
    background: #2C2C2C;
}

/* ==================
   SHAPE + EMOTION CIRCLES GRID
   ================== */
/* Container for Shape + Emotion circles grid interaction */
.shape-emotion-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Same as other interaction containers */
    overflow: hidden; /* Clip circles at container bounds */
    background: #ffffff;
}

.shape-emotion-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shape-emotion-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Individual circle element */
.shape-emotion-circle {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 3px solid #2C2C2C;
    border-radius: 50%;
    background: #ffffff; /* White fill */
    box-sizing: border-box;
    pointer-events: none; /* Circles don't block mouse events */
    will-change: transform; /* Optimize for animations */
}

/* ==================
   LOGO HOVER OVERLAY
   ================== */
/* Logo hover overlay - covers canvas container when hovering on SYN logo */
.logo-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); /* 70% white opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    z-index: 100; /* Above all canvas content */
    pointer-events: none; /* Don't block interactions */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.logo-hover-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Enable interactions when visible - allows mouse to stay in overlay */
}

/* ==================
   LOGO HOVER DIAGRAM
   ================== */
/* Diagram container - centered in the overlay, above the text box */
.logo-hover-diagram {
    position: absolute;
    /* Center horizontally in the overlay */
    left: 50%;
    transform: translateX(-50%);
    /* Position in upper portion of overlay - moved up since tagline is now inside */
    top: 120px;
    /* Diagram size - scaled down version of canvas proportions */
    /* Canvas is (100vw - 100px) wide and (5/6 * 100vh) tall */
    /* Using ~54% scale for a comfortable fit */
    width: calc((100vw - 100px) * 0.54);
    height: calc((100vh * 5 / 6) * 0.54);
    /* Enable positioning of child elements */
    z-index: 10;
    pointer-events: none;
    /* Flexbox layout for vertical stacking */
    display: flex;
    flex-direction: column;
    /* position: absolute already makes this a positioned ancestor for child elements */
}

/* ==================
   DIAGRAM HEADER ROW
   ================== */
/* Top row with three header cells */
.diagram-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    /* Height = 1/6 of total diagram height (same as one rectangle in columns) */
    height: calc((100vh * 5 / 6 * 0.54) / 6);
    flex-shrink: 0;
    margin-bottom: -2px; /* Overlap with main area's top border so main area fills to bottom */
}

/* Individual header cells */
.diagram-header-cell {
    height: 100%; /* Fill the header row height */
    background: white;
    border: 2px solid #2C2C2C;
    box-sizing: border-box;
    /* Typography */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    color: #2C2C2C;
    letter-spacing: 0.03em;
    /* Center text */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

/* Left header - completely hidden, now part of scrolling track */
.diagram-header-left {
    display: none; /* Completely remove from layout */
}

/* Center header - fills the middle space between the two columns */
.diagram-header-center {
    position: absolute;
    left: 38px; /* Overlap with left column's border (40px - 2px) */
    right: 38px; /* Overlap with right column's border (40px - 2px) */
    top: 0;
    /* Height = 1/6 of total diagram height (same as header row and rectangles) */
    height: calc((100vh * 5 / 6 * 0.54) / 6);
    margin: 0;
    z-index: 5;
    /* Remove left/right borders - columns provide the side borders */
    border-left: none;
    border-right: none;
}

/* Right header - completely hidden, now part of scrolling track */
.diagram-header-right {
    display: none; /* Completely remove from layout */
}

/* ==================
   DIAGRAM MAIN AREA
   ================== */
/* Main content area below header */
.diagram-main-area {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 40px; /* Make room for absolute positioned columns on sides */
}

/* ==================
   SCROLLABLE COLUMNS
   ================== */
/* Vertical columns on left and right - positioned absolutely to span full diagram height */
.diagram-scrollable-column {
    position: absolute;
    width: 40px;
    top: 0;
    bottom: 0;
    background: white;
    border: 2px solid #2C2C2C;
    box-sizing: border-box;
    overflow: hidden; /* Clip the scroll track for seamless animation */
    z-index: 6; /* Above center header */
}

/* Cover sub-pixel sliver at top and bottom of scrollable columns */
.diagram-scrollable-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: white;
    z-index: 10;
    pointer-events: none;
}

.diagram-scrollable-column::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: white;
    z-index: 10;
    pointer-events: none;
}

/* Scroll track container - holds duplicated rectangles for seamless loop */
.diagram-scroll-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200%; /* Double the column height for 12 rectangles (2 sets of 6) */
    display: flex;
    flex-direction: column;
}

/* Scroll track animations - right moves up, left moves down on ABOUT hover */
.diagram-column-right .diagram-scroll-track,
.diagram-column-left .diagram-scroll-track {
    transition: transform 0.5s ease-out;
}

/* Individual rectangles in columns */
.diagram-scrollable-rect {
    flex: 1 1 0; /* Equal height distribution: grow=1, shrink=1, basis=0 */
    border-bottom: 2px solid #2C2C2C;
    box-sizing: border-box;
    /* Typography for letter labels */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    color: #2C2C2C;
    letter-spacing: 0.03em;
    /* Center text */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scrollable label cells [x] and [y] - same size as rectangles but with text */
.diagram-scrollable-label {
    flex: 1 1 0; /* Same sizing as rectangles */
    border-bottom: 2px solid #2C2C2C;
    box-sizing: border-box;
    /* Typography - match header cell style */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    color: #2C2C2C;
    letter-spacing: 0.03em;
    /* Center text */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* All rectangles keep their border-bottom for equal flex sizing */
/* The overflow:hidden on the column clips any excess borders at the edges */

/* Left column positioning */
.diagram-column-left {
    left: 0;
}

/* Right column positioning */
.diagram-column-right {
    right: 0;
}

/* ==================
   DIAGRAM ARROWS
   ================== */
/* Arrows pointing outward from the side columns */
.diagram-arrow {
    position: absolute;
    width: 298px;
    height: 12px;
    /* Center vertically in the main area */
    top: 50%;
    transform: translateY(-50%);
}

/* Left arrow - positioned outside the left edge of the left column */
.diagram-arrow-left {
    right: 100%; /* Position so right edge touches diagram's left edge (outer edge of left column) */
}

/* Right arrow - positioned outside the right edge of the right column */
.diagram-arrow-right {
    left: 100%; /* Position so left edge touches diagram's right edge (outer edge of right column) */
}

/* Arrow labels - text below each arrow */
.diagram-arrow-label {
    position: absolute;
    /* Center vertically same as arrow, then offset down by 20px + half arrow height */
    top: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    /* Typography matching diagram style */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    color: #2C2C2C;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Left arrow label - centered horizontally on left arrow (arrow is 308px, so center is 154px from edge) */
.diagram-arrow-label-left {
    left: -149px; /* Center of the left arrow */
}

/* Right arrow label - centered horizontally on right arrow */
.diagram-arrow-label-right {
    left: calc(100% + 149px); /* Center of the right arrow */
}

/* Scroll labels - text above each arrow (same spacing as arrow labels below) */
.diagram-scroll-label {
    position: absolute;
    /* Center vertically same as arrow, then offset up by 20px + half arrow height */
    top: 50%;
    transform: translate(-50%, calc(-50% - 20px));
    /* Typography matching diagram style */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    color: #2C2C2C;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Left scroll label - centered horizontally on left arrow */
.diagram-scroll-label-left {
    left: -149px; /* Center of the left arrow */
}

/* Right scroll label - centered horizontally on right arrow */
.diagram-scroll-label-right {
    left: calc(100% + 149px); /* Center of the right arrow */
}

/* ==================
   CENTER EXPERIENCE AREA
   ================== */
/* Central area with synesthetic experience label */
.diagram-center-area {
    flex: 1;
    align-self: stretch; /* Stretch to fill parent height regardless of align-items */
    background: white;
    border: 2px solid #2C2C2C;
    border-left: none; /* Columns provide left border */
    border-right: none; /* Columns provide right border */
    box-sizing: border-box;
    /* Center the label text */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* No margin needed - main area already fills to bottom */
}

/* Center label text */
.diagram-center-label {
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    font-weight: normal;
    color: #2C2C2C;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 0 20px; /* Add horizontal padding for longer text */
    max-width: 100%;
}

/* Logo hover text box: matches canvas-text-box style and position */
.logo-hover-text-box {
    position: absolute;
    left: 40px; /* 90px from viewport (50px canvas-container offset + 40px) */
    top: calc(100vh / 6 * 4 + 3px); /* Aligned with credits text (5/6 vh + 3px from viewport, minus 1/6 vh canvas-container offset) */
    width: 1035px; /* Same width as canvas-text-box */
    height: calc(100vh / 6); /* Same height as canvas-text-box */
    font-family: Helvetica, sans-serif;
    font-size: 29px;
    line-height: 29px;
    font-weight: bold;
    color: #E0E0E0; /* Light gray text */
    z-index: 10; /* Above overlay background */
    pointer-events: none; /* Don't interfere with interactions */
    overflow: visible; /* Ensure text is visible */
    /* "Pushed" animation: start 35px to the left (matching left column expansion from 50px to 85px) */
    transform: translateX(-35px);
    transition: transform 0.2s ease; /* Same timing as color-item expansion */
}

/* When overlay is visible, text is "pushed" into final position by left column expansion */
.logo-hover-overlay.visible .logo-hover-text-box {
    transform: translateX(0);
}

/* Paragraph styling for logo hover text box */
.logo-hover-text-box p {
    margin: 0;
}

/* Line background blocks for logo hover text box */
.logo-hover-text-box .about-line-bg {
    position: absolute;
    background-color: #2C2C2C; /* Dark gray blocks */
    border-radius: 0;
    z-index: -1;
    pointer-events: none;
}

/* ==================
   ABOUT PAGE TEXT BOXES
   ================== */
/* Text boxes inside the About page overlay */
.about-text-box {
    position: absolute;
    left: 0; /* 0 from overlay edge = 50px from viewport edge (canvas-container has left: 50px) */
    right: 0; /* 0 from overlay edge = 50px from viewport edge (canvas-container has right: 50px) */
    z-index: 10; /* Above other about page content */
    pointer-events: none; /* Don't block interactions */
    /* Typography */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #2C2C2C;
}

/* First text box: top-aligned, Helvetica 57px bold */
.about-text-box-1 {
    top: 11px; /* 11px from top of overlay - moved 1px up to close gap */
    left: 12px; /* 12px from left edge - gray blocks have 10px padding so they start at 50px from viewport */
    right: 220px; /* 220px from right edge - narrower by 200px */
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-size: 57px;
    font-weight: bold;
    line-height: 55.5px;
}

/* Paragraph styling */
.about-text-box p {
    margin: 0;
}

/* Line background blocks for about text box */
.about-text-box .about-line-bg {
    position: absolute;
    background-color: #E0E0E0;
    border-radius: 0;
    z-index: -1;
    pointer-events: none;
}

/* ==================
   INDEX PAGE OVERLAY
   ================== */
/* Index page overlay - covers canvas container when hovering on INDEX button */
.index-page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); /* White background at 70% opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    z-index: 150; /* Above all canvas content (10-13), above logo-hover-overlay (100), but inside canvas-container so below scrollbars */
    pointer-events: none; /* Don't block interactions when visible */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Flexbox column layout with scrolling */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Items start from top */
    padding: 0; /* No padding - lines span full width */
    overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Hide scrollbar for Chrome, Safari, Opera */
.index-page-overlay::-webkit-scrollbar {
    display: none;
}

.index-page-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Enable scrolling and interactions when visible */
}

/* Horizontal lines inside index page overlay */
.index-line {
    width: 100%;
    height: 1px;
    background-color: #2C2C2C; /* Same black as UI elements */
    flex-shrink: 0; /* Prevent shrinking during scroll */
}

/* Index items - clickable page combinations */
/* Overlay height = 100vh - 100vh/6 = 5/6 of viewport ≈ 83.33vh */
/* To fit 10.5 items: last item cut off to indicate scrollable content */
.index-item {
    position: relative; /* Enable absolute positioning for quote */
    height: calc((100vh - 100vh / 6) / 10.5); /* 10.5 items fit - last one cut off to indicate scroll */
    min-height: calc((100vh - 100vh / 6) / 10.5);
    flex-shrink: 0; /* Prevent shrinking when scrolling */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to left */
    padding-left: 100px; /* 100px from left edge of overlay (which is 50px from screen edge) */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px;
    letter-spacing: 0.03em;
    color: #2C2C2C;
    cursor: pointer;
    pointer-events: auto; /* Enable clicks */
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.index-item:hover {
    background-color: #2C2C2C;
    color: #ffffff;
}

.index-item:hover .index-item-quote {
    color: #ffffff;
}

/* Index item name - the page combination label */
.index-item-name {
    flex-shrink: 0; /* Don't shrink the name */
    width: 200px; /* Fixed width for consistent centering */
    text-align: center; /* Center the text within the column */
    font-weight: bold; /* Bold parameter titles */
}

/* Index item quote preview - truncated quote text */
.index-item-quote {
    position: absolute; /* Position independently from the name */
    left: 50%; /* Center horizontally on screen */
    transform: translateX(-50%); /* Center the text around 50% point */
    max-width: 800px;
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 15px; /* Same size as parameter list */
    letter-spacing: 0.03em; /* Same as parameter list */
    color: #2C2C2C; /* Black color */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Index item thumbnail - miniature screen preview */
.index-item-thumbnail {
    position: absolute;
    right: 100px;           /* 100px from the right scrollbar */
    height: 70%;            /* Relative to row height */
    aspect-ratio: 16 / 9;   /* Landscape proportion like the screen */
    object-fit: cover;      /* Image fits the frame */
    border: 1px solid #2C2C2C;
    opacity: 0.8;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.index-item:hover .index-item-thumbnail {
    opacity: 1;
    border-color: #ffffff;
}

/* Hide thumbnails with empty src to avoid broken image icons */
.index-item-thumbnail[src=""] {
    display: none;
}

/* ==================
   INDEX SHUTTER ANIMATION
   5 horizontal white strips that slide up to reveal index content
   ================== */

/* Container for all shutters - positioned above index items */
/* DISABLED: Shutter animation removed - container hidden */
.index-shutters-container {
    display: none; /* Animation disabled - shutters hidden */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200; /* Above index items */
    pointer-events: none; /* Don't block interactions with items below */
    overflow: hidden; /* Hide shutters when they slide up */
}

/* Individual shutter strip */
.index-shutter {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc((100vh - 100vh / 6) / 5); /* Overlay height divided by 5 shutters */
    background-color: #ffffff;
    transform: translateY(0); /* Start in place */
    will-change: transform; /* Optimize for animation */
}

/* Position each shutter vertically */
.index-shutter[data-shutter="0"] { top: 0; }
.index-shutter[data-shutter="1"] { top: calc((100vh - 100vh / 6) / 5 * 1); }
.index-shutter[data-shutter="2"] { top: calc((100vh - 100vh / 6) / 5 * 2); }
.index-shutter[data-shutter="3"] { top: calc((100vh - 100vh / 6) / 5 * 3); }
.index-shutter[data-shutter="4"] { top: calc((100vh - 100vh / 6) / 5 * 4); }

/* Keyframe animations - each shutter needs to slide up enough to completely exit the container */
/* Shutter 0 is at top:0, needs to move 1x its height */
/* Shutter 4 is at top:4x its height, needs to move 5x its height to fully disappear */
@keyframes shutterSlideUp0 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes shutterSlideUp1 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200%); }
}

@keyframes shutterSlideUp2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-300%); }
}

@keyframes shutterSlideUp3 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-400%); }
}

@keyframes shutterSlideUp4 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-500%); }
}

/* Animation applied when container has 'animating' class */
/* Bottom shutter (4) animates first, top shutter (0) animates last */
.index-shutters-container.animating .index-shutter[data-shutter="4"] {
    animation: shutterSlideUp4 0.3s ease-out 0ms forwards;
}

.index-shutters-container.animating .index-shutter[data-shutter="3"] {
    animation: shutterSlideUp3 0.3s ease-out 80ms forwards;
}

.index-shutters-container.animating .index-shutter[data-shutter="2"] {
    animation: shutterSlideUp2 0.3s ease-out 160ms forwards;
}

.index-shutters-container.animating .index-shutter[data-shutter="1"] {
    animation: shutterSlideUp1 0.3s ease-out 240ms forwards;
}

.index-shutters-container.animating .index-shutter[data-shutter="0"] {
    animation: shutterSlideUp0 0.3s ease-out 320ms forwards;
}

/* ==================
   ABOUT PAGE OVERLAY
   ================== */

/* ABOUT mask - positioned at gradient bottom edge, to the right of INDEX */
/* left and top are set dynamically via JavaScript in alignRectanglesWithEsthesia() */
.ui-rect-mask-about {
    min-width: 100px;
    width: auto;
}

/* Logo hover effect - no position change for ABOUT, only slide-out animation */
.ui-rect-mask-about.logo-hovered {
    /* Position stays at current location - slide-out happens via transform on child */
}

/* ABOUT hover effect - slide parameter rectangles out (down) when hovering on ABOUT */
.ui-layer.words-revealed .black-bottom-rectangle-left.about-hovered,
.ui-layer.words-revealed .black-bottom-rectangle-right.about-hovered {
    transform: translateY(100%); /* Slide down out of view - into the mask */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth ease-out slide */
}

/* Logo hover effect - slide ABOUT rectangle out (down) when hovering on SYN logo */
.ui-layer.words-revealed .ui-rect-mask-about.logo-hovered .black-corner-rectangle-about {
    transform: translateY(100%); /* Slide down out of view - into the mask */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Same timing as WORD rectangles */
}

/* About page overlay - covers canvas container when hovering on ABOUT button */
.about-page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); /* White background at 70% opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    z-index: 150; /* Above all canvas content (10-13), above logo-hover-overlay (100), but inside canvas-container so below scrollbars */
    pointer-events: none; /* Don't block interactions when visible */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Flexbox column layout */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    padding: 0;
}

.about-page-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Enable interactions when visible */
}

/* About page footer - fixed to bottom of about overlay */
.about-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #2C2C2C;
    /* Center text horizontally and vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Typography */
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 14px;
    color: #FFFFFF;
    /* Ensure footer appears above other about content */
    z-index: 160;
}

/* Copyright symbol - slightly larger than rest of footer text */
.about-footer .copyright-symbol {
    font-size: 16px;
    margin-right: 4px;
}

/* ==================
   LETTER + EMOTION DRAGGABLE GRID
   3 rows x 5 columns grid with draggable dividers
   ================== */

/* Main container - fills the entire canvas area */
.letter-emotion-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    overflow: hidden;
    z-index: 50;
}

/* Hidden state */
.letter-emotion-grid-container.hidden {
    display: none;
}

/* Grid cells - positioned absolutely based on JS-calculated percentages */
.letter-emotion-cell {
    position: absolute;
    display: block;
    background-color: transparent;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

/* SVG inside cells - stretches to fill cell */
.letter-emotion-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Letter text inside SVG */
.letter-emotion-letter {
    font-family: 'Helvetica Now Variable', Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: 700;
    fill: #2C2C2C; /* Same black as UI rectangles */
}

/* Dividers base styles */
.letter-emotion-divider {
    position: absolute;
    background-color: #1D1D1B;
    z-index: 60;
    transition: background-color 0.15s ease;
}

/* Horizontal dividers (between rows) */
.letter-emotion-divider-h {
    left: 0;
    right: 0;
    height: 2px;
    cursor: row-resize;
}

/* Vertical dividers (between columns) */
.letter-emotion-divider-v {
    top: 0;
    bottom: 0;
    width: 2px;
    cursor: col-resize;
}

/* Pseudo-element to extend hover hit area by 15px on each side */
.letter-emotion-divider::before {
    content: '';
    position: absolute;
    background: transparent; /* Required for hover detection */
}

.letter-emotion-divider-h::before {
    left: 0;
    right: 0;
    top: -15px;
    bottom: -15px;
}

.letter-emotion-divider-v::before {
    top: 0;
    bottom: 0;
    left: -15px;
    right: -15px;
}

/* Hover state for dividers - instant color change on hover-in */
.letter-emotion-divider:hover {
    background-color: #EB4781; /* Pink color for hover feedback */
    transition: none; /* Instant change when hovering in */
}

/* Dragging state - applied to container when dragging */
.letter-emotion-grid-container.dragging-h {
    cursor: row-resize;
}

.letter-emotion-grid-container.dragging-v {
    cursor: col-resize;
}

/* Active divider during drag */
.letter-emotion-divider.active {
    background-color: #EB4781;
}

/* ==================
   NUMBER + COLOR DRAGGABLE GRID
   2 rows x 5 columns grid with draggable dividers
   ================== */

/* Main container - fills the entire canvas area */
.number-color-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    overflow: hidden;
    z-index: 50;
}

/* Hidden state */
.number-color-grid-container.hidden {
    display: none;
}

/* Grid cells - positioned absolutely based on JS-calculated percentages */
.number-color-cell {
    position: absolute;
    display: block;
    background-color: transparent;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

/* SVG inside cells - stretches to fill cell */
.number-color-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Digit text inside SVG */
.number-color-digit {
    font-family: 'Helvetica Now Variable', Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: 700;
    fill: #2C2C2C; /* Same black as UI rectangles */
}

/* Dividers base styles */
.number-color-divider {
    position: absolute;
    background-color: #1D1D1B;
    z-index: 60;
    transition: background-color 0.15s ease;
}

/* Horizontal dividers (per-column segments between rows) */
.number-color-divider-h {
    /* left and width set by JS based on column */
    height: 2px;
    cursor: row-resize;
}

/* Vertical dividers (between columns) */
.number-color-divider-v {
    top: 0;
    bottom: 0;
    width: 2px;
    cursor: col-resize;
}

/* Pseudo-element to extend hover hit area by 15px on each side */
.number-color-divider::before {
    content: '';
    position: absolute;
    background: transparent; /* Required for hover detection */
}

.number-color-divider-h::before {
    left: 0;
    right: 0;
    top: -15px;
    bottom: -15px;
}

.number-color-divider-v::before {
    top: 0;
    bottom: 0;
    left: -15px;
    right: -15px;
}

/* Hover state for dividers - instant color change on hover-in */
.number-color-divider:hover {
    background-color: #EB4781; /* Pink color for hover feedback */
    transition: none; /* Instant change when hovering in */
}

/* Dragging state - applied to container when dragging */
.number-color-grid-container.dragging-h {
    cursor: row-resize;
}

.number-color-grid-container.dragging-v {
    cursor: col-resize;
}

/* Active divider during drag */
.number-color-divider.active {
    background-color: #EB4781;
}

/* ==================
   SOUND + NUMBER DRAGGABLE GRID
   3x3 grid with draggable dividers and centered digit 1
   ================== */

/* Main container - fills the entire canvas area */
.sound-number-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    overflow: hidden;
    z-index: 50;
}

/* Hidden state */
.sound-number-grid-container.hidden {
    display: none;
}

/* Grid cell - positioned absolutely based on JS-calculated percentages */
.sound-number-cell {
    position: absolute;
    display: block;
    background-color: transparent;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

/* SVG inside cell - stretches to fill cell */
.sound-number-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Digit text inside SVG */
.sound-number-digit {
    font-family: 'Helvetica Now Variable', Helvetica, Arial, sans-serif;
    font-size: 90px;
    font-weight: 700;
    fill: #2C2C2C; /* Site's standard black */
}

/* Dividers base styles */
.sound-number-divider {
    position: absolute;
    background-color: #1D1D1B; /* Site's standard black */
    z-index: 60;
    transition: background-color 0.15s ease;
}

/* Horizontal dividers (between rows) */
.sound-number-divider-h {
    left: 0;
    right: 0;
    height: 2px;
    cursor: row-resize;
}

/* Vertical dividers (between columns) */
.sound-number-divider-v {
    top: 0;
    bottom: 0;
    width: 2px;
    cursor: col-resize;
}

/* Pseudo-element to extend hover hit area by 15px on each side */
.sound-number-divider::before {
    content: '';
    position: absolute;
    background: transparent; /* Required for hover detection */
}

.sound-number-divider-h::before {
    left: 0;
    right: 0;
    top: -15px;
    bottom: -15px;
}

.sound-number-divider-v::before {
    top: 0;
    bottom: 0;
    left: -15px;
    right: -15px;
}

/* Hover state for dividers - purple (Sound color), instant on hover-in */
.sound-number-divider:hover {
    background-color: #891951;
    transition: none; /* Instant change when hovering in */
}

/* Dragging state - applied to container when dragging */
.sound-number-grid-container.dragging-h {
    cursor: row-resize;
}

.sound-number-grid-container.dragging-v {
    cursor: col-resize;
}

/* Active divider during drag */
.sound-number-divider.active {
    background-color: #891951;
}

/* Outer cells (all cells except the center digit cell) */
/* Note: cells inherit position:absolute from .sound-number-cell, which also creates a containing block for absolute children */
.sound-number-cell-outer {
    background-color: transparent;
    overflow: visible; /* Override hidden to show pitch labels */
}

/* Center cell (contains the digit) */
.sound-number-cell-center {
    display: block;
}

/* Pitch label inside outer cells - positioned at bottom-left */
.sound-number-pitch-label {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2C2C2C;
    user-select: none;
    pointer-events: none;
}

/* ========================================
   EMOTION + COLOR GRID INTERACTION
   3x3 grid of faces that stretch based on
   draggable dividers, with color based on emotion
   ======================================== */

/* Main container */
.emotion-color-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    overflow: hidden;
    z-index: 50;
}

/* Hidden state */
.emotion-color-container.hidden {
    display: none;
}

/* Grid cell - positioned absolutely based on JS-calculated percentages */
.emotion-color-cell {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    --face-color: #2C2C2C;
}

/* SVG face inside cell */
.emotion-color-face {
    width: 80%;
    height: 80%;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Face outline circle */
.face-outline {
    fill: white;
    stroke: var(--face-color, #2C2C2C);
    stroke-width: 3px;
    transition: stroke 0.3s ease;
}

/* Eyes */
.face-eye {
    fill: var(--face-color, #2C2C2C);
    transition: fill 0.3s ease;
}

/* Mouth - bezier curve */
.face-mouth {
    fill: none;
    stroke: var(--face-color, #2C2C2C);
    stroke-width: 3px;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* Dividers base styles */
.emotion-color-divider {
    position: absolute;
    background-color: #1D1D1B;
    z-index: 60;
    transition: background-color 0.15s ease;
}

/* Horizontal dividers (between rows) */
.emotion-color-divider-h {
    left: 0;
    right: 0;
    height: 2px;
    cursor: row-resize;
}

/* Vertical dividers (between columns) */
.emotion-color-divider-v {
    top: 0;
    bottom: 0;
    width: 2px;
    cursor: col-resize;
}

/* Pseudo-element to extend hover hit area by 15px on each side */
.emotion-color-divider::before {
    content: '';
    position: absolute;
    background: transparent; /* Required for hover detection */
}

.emotion-color-divider-h::before {
    left: 0;
    right: 0;
    top: -15px;
    bottom: -15px;
}

.emotion-color-divider-v::before {
    top: 0;
    bottom: 0;
    left: -15px;
    right: -15px;
}

/* Hover state for dividers - instant color change on hover-in */
.emotion-color-divider:hover {
    background-color: #EB4781;
    transition: none; /* Instant change when hovering in */
}

/* Dragging state - applied to container when dragging */
.emotion-color-container.dragging-h {
    cursor: row-resize;
}

.emotion-color-container.dragging-v {
    cursor: col-resize;
}

/* Active divider during drag */
.emotion-color-divider.active {
    background-color: #EB4781;
}