/* ========================================
   Sofia Pro — Font Face Declarations
   ======================================== */
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro UltraLight Az.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro UltraLight Italic Az.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro ExtraLight Az.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro ExtraLight Italic Az.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Light Az.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Light Italic Az.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Regular Az.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Regular Italic Az.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Medium Az.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Medium Italic Az.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Semi Bold Az.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Semi Bold Italic Az.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Bold Az.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Bold Italic Az.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Black Az.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('sofia-pro/Sofia Pro Black Italic Az.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

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

html {
    /* clip (not hidden) prevents horizontal scroll WITHOUT turning html into
       a scroll container — that container is what breaks position: sticky. */
    overflow-x: clip;
    /* Hide the scrollbar (still scrollable). */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;        /* old Edge/IE */
}
html::-webkit-scrollbar { display: none; }  /* Chrome, Safari, Edge */

body {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: 'Sofia Pro', system-ui, -apple-system, sans-serif;
    overflow-x: clip;
}

/* ========================================
   Navbar — Fixed left side pills
   ======================================== */
.navbar {
    position: fixed;
    left: 0;
    top: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    width: 140px;
    height: 46px;
    border-radius: 0 23px 23px 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Sofia Pro', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transform: translateX(-94px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.nav-item:hover {
    transform: translateX(0);
}

.nav-label {
    padding-left: 18px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.nav-item:hover .nav-label {
    opacity: 1;
    transform: translateX(0);
}

/* Colors matching Illustrator design */
.nav-about  { background-color: #E53935; }
.nav-work   { background-color: #4CAF50; }
.nav-resume { background-color: #1E88E5; }
.nav-contact { background-color: #F9A825; }

/* ========================================
   S1 — Hero Section
   ======================================== */
.s1 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s1-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.s1-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s1-text-middle {
    position: absolute;
    z-index: 2;
    width: 47.2%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: scaleFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.s1-text-middle img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Scroll container + sticky wrapper.
   Container = 100vh of scroll depth.
   Sticky wrapper pins to viewport top while S2 is visible.
   Page total = S1 (100vh) + container (100vh) = 200vh.
   ======================================== */
.scroll-container {
    position: relative;
    height: 100vh;
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #1a1a1a;
}

/* S2 fills the sticky wrapper as the frozen background layer. */
.s2 {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Content layer — Samuel, header, text, polaroids. JS blurs + fades this out. */
.s2-content {
    position: absolute;
    inset: 0;
    will-change: opacity, filter;
}

/* ========================================
   S2 — About Me Section
   ======================================== */
/* (Removed standalone .s2 relative/padding rules since it's now in the track) */

/* Background — light pinkish grid */
.s2-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.s2-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Samuel cutout — left side, bottom-aligned
   In reference: extends from roughly x=2.5% to x=48%, bottom-anchored
   Image is 4042x4887 on an 8000x4500 artboard
   Width: 4042/8000 = 50.5%
   The photo extends below the artboard slightly — bottom of visible area at 100%
   Top edge: Samuel's head starts around y~0% (extends above top slightly with tape)
*/
.s2-samuel {
    position: absolute;
    z-index: 2;
    width: 45.45%;
    left: -1.48%;
    bottom: -4.26%;
}

.s2-samuel img {
    width: 100%;
    height: auto;
    display: block;
}

/* Red dashed box — around header
   In reference: x starts ~41.5%, y starts ~7.5%
   Box is 3669x573 on 8000x4500
   Width: 3669/8000 = 45.86%
*/
.s2-box {
    position: absolute;
    z-index: 1;
    width: 41.27%;
    left: 46.82%;
    top: 11.50%;
}

.s2-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Header text — "Hi! My name is Samuel"
   In reference: inside the box, starts at ~43%, y~9%
   Header is 3324x359 on 8000x4500
   Width: 3324/8000 = 41.55%
*/
.s2-header {
    position: absolute;
    z-index: 3;
    width: 37.40%;
    left: 48.15%;
    top: 14.30%;
}

.s2-header img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text1 — Bio paragraph
   In reference: starts at ~42%, y~23%
   Text1 is 3601x578 on 8000x4500
   Width: 3601/8000 = 45%
*/
.s2-text1 {
    position: absolute;
    z-index: 3;
    width: 40.50%;
    left: 47.31%;
    top: 27.00%;
}

.s2-text1 img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2023 year label — baseline-aligned with Text2 */
.s2-2023 {
    position: absolute;
    z-index: 3;
    width: 4.91%;
    left: 47.30%;
    top: 43.24%;
}

.s2-2023 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text2 — Graduation text, left edge right after 2023 */
.s2-text2 {
    position: absolute;
    z-index: 3;
    width: 39.78%;
    left: 47.27%;
    top: 44.63%;
}

.s2-text2 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text3 — University text */
.s2-text3 {
    position: absolute;
    z-index: 3;
    width: 39.69%;
    left: 47.23%;
    top: 55.00%;
}

.s2-text3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2025 year label — at end of Text3 first line */
.s2-2025 {
    position: absolute;
    z-index: 3;
    width: 5.00%;
    left: 82.29%;
    top: 53.74%;
}

.s2-2025 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo 1 — left polaroid (street scene)
   Positioned to fill bottom-right, anchored by bottom edge */
.s2-photo1 {
    position: absolute;
    z-index: 3;
    width: 23.50%;
    left: 41.46%;
    bottom: -12.75%;
    transform: rotate(-5deg);
}

.s2-photo1 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo 2 — middle polaroid (pool/billiards) */
.s2-photo2 {
    position: absolute;
    z-index: 4;
    width: 31.00%;
    left: 49.57%;
    bottom: -6.50%;
    transform: rotate(3deg);
}

.s2-photo2 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo 3 — right polaroid (warm indoor) */
.s2-photo3 {
    position: absolute;
    z-index: 5;
    width: 30.50%;
    left: 66.76%;
    bottom: -4.25%;
    transform: rotate(6deg);
}

.s2-photo3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   S3 — Locked Mac Screen
   ======================================== */
/* Scroll container provides extra scroll depth (the typing happens here).
   Sticky wrapper pins the whole scene so background + PC stay dead still. */
.s3-scroll-container {
    position: relative;
    height: 135vh;
}

.s3-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Jump target at the bottom of the scroll = desktop fully revealed. */
.s4-anchor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
}

/* Layer that scales up to "fly into" the screen. Origin = the PC's screen
   centre (50% across, ~33.6% down the PC box). */
.s3-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 33.56%;
    will-change: transform;
}

.s3 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s3-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.s3-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC centered with comfortable whitespace around it.
   SVG aspect ratio ~818.6:704 (≈1.16:1). Constrain by both
   width and height so it never crowds the edges. */
.s3-pc {
    position: relative;
    z-index: 1;
    width: min(66vw, 84vh);
    max-width: 880px;
    /* Enables cqw units below so the lock UI scales with the PC. */
    container-type: inline-size;
    /* Smooth entrance when S3 scrolls into view. */
    opacity: 0;
    transform: translateY(5vh) scale(0.9);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.s3.in-view .s3-pc {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.s3-pc > img {
    width: 100%;
    height: auto;
    display: block;
}

/* Lock-screen UI mapped onto the SVG's screen rectangle.
   Screen area within the SVG viewBox: left 5.83%, top 6.71%,
   width 88.33%, height 53.70%. */
.s3-lock {
    position: absolute;
    left: 5.83%;
    top: 6.71%;
    width: 88.33%;
    height: 53.70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2cqw;
}

.s3-lock-avatar {
    width: 17cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 0.4cqw solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.25);
}

.s3-lock-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s3-lock-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 4.2cqw;
    line-height: 1;
    text-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.3);
}

/* Password field — frosted-glass rounded pill. Text is typed in via scroll. */
.s3-lock-password {
    display: flex;
    align-items: center;
    /* Characters fill in from the left, like real typing. */
    justify-content: flex-start;
    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 0.2cqw solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 1.4cqw 2.6cqw;
    /* Fixed size so the pill never resizes as characters are typed. */
    width: 36cqw;
    height: 5cqw;
    box-shadow: 0 0.8cqw 2cqw rgba(0, 0, 0, 0.18),
                inset 0 0.15cqw 0.4cqw rgba(255, 255, 255, 0.55);
}

.s3-lock-password-text {
    display: flex;
    align-items: center;
    gap: 1cqw;
    /* No caret — nothing blinks. */
}

/* Each typed position is a slot that cross-fades between a dot and a glyph,
   and pops in smoothly the moment it's typed. */
.pw-slot {
    position: relative;
    width: 2.4cqw;
    height: 3cqw;
    flex: 0 0 auto;
    animation: pwSlotIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pw-slot .pw-dot,
.pw-slot .pw-glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pw-slot .pw-dot {
    width: 1.5cqw;
    height: 1.5cqw;
    border-radius: 50%;
    background: #2b2d2c;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
}

.pw-slot .pw-glyph {
    color: #2b2d2c;
    font-weight: 600;
    font-size: 2.7cqw;
    line-height: 1;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
}

/* Latest character → show glyph. Older → collapse to dot. */
.pw-slot.is-char .pw-glyph {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.pw-slot.is-dot .pw-dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@keyframes pwSlotIn {
    from { opacity: 0; transform: translateY(1cqw) scale(0.7); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- Lock UI staggered entrance when S3 scrolls into view ----- */
.s3-lock-avatar,
.s3-lock-name,
.s3-lock-password {
    opacity: 0;
    transform: translateY(2.4cqw) scale(0.94);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.s3.in-view .s3-lock-avatar { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.45s; }
.s3.in-view .s3-lock-name { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.6s; }
.s3.in-view .s3-lock-password { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.75s; }

/* ----- Fly-in layering ----- */
/* The dive is a timed, class-driven animation (.s3.diving), not scroll-scrubbed,
   so it plays smoothly and identically every time. */
.s3-zoom {
    position: relative;
    z-index: 1;
    will-change: transform;
    transition: transform 1.15s cubic-bezier(0.7, 0, 0.3, 1);
}

/* S4 desktop, revealed full-screen as we dive into the monitor. */
.s4-reveal {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
    will-change: opacity, transform;
    transition: opacity 0.85s ease, transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active dive: scale into the screen, fade the desktop in, hide the lock UI. */
/* "Work" nav → snap to the desktop end-state with no animation */
.s3.dive-instant .s3-zoom,
.s3.dive-instant .s4-reveal,
.s3.dive-instant .s3-lock { transition: none !important; }
.s3.diving .s3-zoom { transform: scale(var(--dive-scale, 3)); }
.s3.diving .s4-reveal { opacity: 1; transform: scale(1); pointer-events: auto; }
.s3.diving .s3-lock { opacity: 0; transition: opacity 0.3s ease; }

.s4-desktop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.s4-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.s4-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7vw;
    width: 12vw;
    text-decoration: none;
    color: #2b2d2c;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.s4-icon:focus,
.s4-icon:focus-visible { outline: none; }

.s4-icon img {
    width: 5vw;
    height: auto;
    display: block;
    filter: drop-shadow(0 0.4vw 0.8vw rgba(0, 0, 0, 0.18));
}

.s4-icon-label {
    font-size: 1.4vw;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.s4-icon:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* ========================================
   Scroll-triggered animations
   ======================================== */

/* Elements start hidden, become visible on scroll */
.s2-samuel,
.s2-box,
.s2-header,
.s2-text1,
.s2-2023,
.s2-text2,
.s2-text3,
.s2-2025,
.s2-photo1,
.s2-photo2,
.s2-photo3 {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide from left — Samuel */
.s2-samuel {
    transform: translateX(-80px);
}
.s2-samuel.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right — all text content */
.s2-box {
    transform: translateX(80px);
}
.s2-box.visible {
    opacity: 1;
    transform: translateX(0);
}

.s2-header {
    transform: translateX(80px);
}
.s2-header.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.s2-text1 {
    transform: translateX(60px);
}
.s2-text1.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.s2-2023 {
    transform: translateX(60px);
}
.s2-2023.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

.s2-text2 {
    transform: translateX(60px);
}
.s2-text2.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.35s;
}

.s2-text3 {
    transform: translateX(60px);
}
.s2-text3.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

.s2-2025 {
    transform: translateX(60px);
}
.s2-2025.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.45s;
}

/* Photos — slide up from bottom */
.s2-photo1 {
    transform: rotate(-5deg) translateY(60px);
}
.s2-photo1.visible {
    opacity: 1;
    transform: rotate(-5deg) translateY(0);
    transition-delay: 0.4s;
}

.s2-photo2 {
    transform: rotate(3deg) translateY(60px);
}
.s2-photo2.visible {
    opacity: 1;
    transform: rotate(3deg) translateY(0);
    transition-delay: 0.5s;
}

.s2-photo3 {
    transform: rotate(6deg) translateY(60px);
}
.s2-photo3.visible {
    opacity: 1;
    transform: rotate(6deg) translateY(0);
    transition-delay: 0.6s;
}


/* ========================================
   Keyframe Animations (S1)
   ======================================== */
@keyframes scaleFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ========================================
   App windows — minimalist desktop "programs"
   ======================================== */
.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.app-backdrop[hidden] { display: none; }

.app-window {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.app-window[hidden] { display: none; }

.app-window-frame {
    width: min(940px, 88vw);
    height: min(620px, 84vh);
    background: #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.06);
    pointer-events: auto;
    /* Closed state — grows out of the clicked icon (origin set from JS). */
    opacity: 0;
    transform: scale(0.85);
    transform-origin: var(--open-x, 50%) var(--open-y, 50%);
    will-change: transform, opacity;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-window.is-open .app-window-frame {
    opacity: 1;
    transform: none;
}

/* Title bar */
.app-titlebar {
    height: 46px;
    flex: 0 0 auto;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.app-traffic { display: flex; gap: 8px; }
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl-close { background: #ff5f57; cursor: pointer; }
.tl-min { background: #febc2e; }
.tl-max { background: #28c840; }
.app-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ededed;
    font-weight: 600;
    font-size: 14px;
}
.app-title img { width: 18px; height: 18px; border-radius: 4px; display: block; }

/* Body */
.app-body { flex: 1; display: flex; min-height: 0; }

/* ========================================
   Resume / CV app window (#app-resume)
   ======================================== */
#app-resume .app-window-frame { width: min(900px, 92vw); height: min(660px, 88vh); }
.cvw { display: grid; grid-template-columns: 250px 1fr; background: #fff; color: #20232a; }
.cvw-side { background: linear-gradient(180deg, #16213c, #1f2c4a); color: #eef1f6; padding: 26px 22px; overflow-y: auto; }
.cvw-main { padding: 24px 30px 30px; overflow-y: auto; }
.cvw-photo { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 16px;
             border: 3px solid rgba(255,255,255,.28); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.cvw-name { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.08; text-align: center; }
.cvw-role { text-align: center; color: #9fc4f0; font-weight: 600; font-size: 13px; margin-top: 4px; }
.cvw-h { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 800; margin: 22px 0 11px; color: #8fb4e6; }
.cvw-main .cvw-h { color: #1E88E5; border-bottom: 2px solid #eaecf1; padding-bottom: 7px; }
.cvw-main .cvw-h:first-child { margin-top: 2px; }
.cvw-contact div { font-size: 12px; line-height: 1.45; margin-bottom: 7px; color: #d7deea; }
.cvw-side p { font-size: 12px; line-height: 1.55; color: #cdd5e2; margin-bottom: 9px; }
.cvw-edu div { font-size: 12px; color: #cdd5e2; line-height: 1.45; margin-bottom: 11px; }
.cvw-edu b { color: #fff; font-size: 12.5px; }
.cvw-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.cvw-btn { text-align: center; font-size: 12.5px; font-weight: 700; padding: 10px; border-radius: 9px; text-decoration: none; transition: filter .15s, background .15s; }
.cvw-btn.dl { background: #1E88E5; color: #fff; }
.cvw-btn.dl:hover { filter: brightness(1.1); }
.cvw-btn.op { background: rgba(255,255,255,.08); color: #eef1f6; border: 1px solid rgba(255,255,255,.2); }
.cvw-btn.op:hover { background: rgba(255,255,255,.16); }
/* experience timeline */
.cvw-xp { position: relative; padding-left: 22px; margin-top: 4px; }
.cvw-xp::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 8px; width: 2px; background: #e6e8ee; }
.cvw-item { position: relative; margin-bottom: 17px; }
.cvw-item::before { content: ""; position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #1E88E5; }
.cvw-when { font-size: 11.5px; font-weight: 700; color: #1E88E5; font-variant-numeric: tabular-nums; }
.cvw-rl { font-size: 14.5px; font-weight: 700; margin-top: 1px; }
.cvw-co { font-size: 12.5px; color: #6a6f7a; }
.cvw-d { font-size: 12px; color: #555b66; margin-top: 5px; line-height: 1.45; }
.cvw-tags { margin-bottom: 12px; }
.cvw-tags span { display: inline-block; font-size: 11.5px; background: #eef1f6; color: #3a4150; padding: 4px 10px; border-radius: 6px; margin: 0 6px 6px 0; font-weight: 600; }
.cvw-note { font-size: 12px; color: #555b66; line-height: 1.55; }
@media (max-width: 720px) {
  .cvw { grid-template-columns: 1fr; }
  #app-resume .app-window-frame { height: min(720px, 90vh); }
}

/* Tool rail */
.app-toolbar {
    width: 54px;
    flex: 0 0 auto;
    background: #202020;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
}
.tool {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9a9a;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.tool:hover { background: rgba(255, 255, 255, 0.07); color: #ddd; }
.tool svg { width: 18px; height: 18px; }
.tool.is-active { background: var(--accent, #FF7C00); color: #1c1c1c; }

/* Canvas + artboard */
.app-canvas {
    flex: 1;
    background: #383838;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 26px;
    overflow: auto;
}
.artboard-name {
    flex: 0 0 auto;
    color: #cfcfcf;
    font-size: 12px;
    font-weight: 500;
    align-self: center;
}
.artboard {
    background: #ffffff;
    color: #1a1a1a;
    width: 100%;
    max-width: 560px;
    border-radius: 2px;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.4);
    padding: 42px 46px 46px;
}
.ab-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent, #FF7C00);
    margin-bottom: 8px;
}
.ab-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 26px;
    color: #1a1a1a;
}
.ab-block { margin-bottom: 22px; }
.ab-block:last-child { margin-bottom: 0; }
.ab-block h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent, #FF7C00);
    margin-bottom: 7px;
}
.ab-block p {
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    color: #333;
}

/* Right panels */
.app-panels {
    width: 210px;
    flex: 0 0 auto;
    background: #242424;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}
.panel { background: #1b1b1b; border-radius: 9px; padding: 13px; }
.panel-title {
    color: #b6b6b6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 11px;
}
.panel .bar {
    height: 8px;
    border-radius: 4px;
    background: #383838;
    margin-bottom: 8px;
}
.panel .bar:last-child { margin-bottom: 0; }
.bar.w-100 { width: 100%; }
.bar.w-90 { width: 90%; }
.bar.w-80 { width: 80%; }
.bar.w-70 { width: 70%; }
.bar.w-60 { width: 60%; }
.bar.w-50 { width: 50%; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches span {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Tighter layout on small screens — drop the side panels. */
@media (max-width: 720px) {
    .app-panels { display: none; }
    .artboard { padding: 30px 26px 34px; }
    .ab-title { font-size: 24px; }
}

/* ========================================
   Per-app layouts — make each program feel distinct
   ======================================== */

/* Dark info-card variant (Premiere monitor, Blender N-panel) */
.artboard.is-dark {
    background: #161616;
    color: #e8e8e8;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.artboard.is-dark .ab-title { color: #ffffff; }
.artboard.is-dark .ab-block p { color: #b4b4b4; }

/* ----- Photoshop ----- */
.ps-options {
    height: 30px;
    flex: 0 0 auto;
    background: #262626;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}
.ps-opt { height: 9px; border-radius: 4px; background: #3a3a3a; }

.app-canvas.ps-canvas {
    background-color: #c4c4c4;
    background-image:
        linear-gradient(45deg, #a9a9a9 25%, transparent 25%),
        linear-gradient(-45deg, #a9a9a9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #a9a9a9 75%),
        linear-gradient(-45deg, transparent 75%, #a9a9a9 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
.app-canvas.ps-canvas .artboard-name {
    color: #2a2a2a;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: 4px;
}
.layer-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.layer-row:last-child { margin-bottom: 0; }
.layer-row .bar { flex: 1; margin-bottom: 0; }
.layer-thumb {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.layer-thumb.checker {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #bbb 25%, transparent 25%),
        linear-gradient(-45deg, #bbb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #bbb 75%),
        linear-gradient(-45deg, transparent 75%, #bbb 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

/* ----- Premiere Pro ----- */
.app-body.pr-body { flex-direction: column; }
.pr-stage { flex: 1; display: flex; min-height: 0; }
.pr-bin {
    width: 190px;
    flex: 0 0 auto;
    background: #232323;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px;
    overflow: auto;
}
.pr-bin .panel-title { color: #b6b6b6; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.pr-clip-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pr-clip-row .bar { flex: 1; height: 8px; border-radius: 4px; background: #3a3a3a; }
.pr-clip-thumb { width: 26px; height: 17px; border-radius: 3px; flex: 0 0 auto; }
.pr-monitor {
    flex: 1;
    background: #0c0c0c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}
.pr-screen { max-width: 600px; }
.pr-timeline {
    height: 36%;
    flex: 0 0 auto;
    background: #232323;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    overflow: hidden;
}
.pr-ruler {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background: repeating-linear-gradient(90deg, #3a3a3a 0 1px, transparent 1px 28px);
    opacity: 0.7;
}
.pr-track { height: 24px; display: flex; align-items: center; }
.clip { height: 100%; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.clip-v { background: linear-gradient(180deg, #b79bff, #9D7BFF); }
.clip-v2 { background: linear-gradient(180deg, #7fb0ff, #4f8ef0); }
.clip-a {
    background: linear-gradient(180deg, #4bbf73, #2f9b57);
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 5px);
}
.pr-playhead {
    position: absolute;
    top: 0; bottom: 0;
    left: 38%;
    width: 2px;
    background: #ff5f57;
    z-index: 3;
}
.pr-playhead::before {
    content: "";
    position: absolute;
    top: 0; left: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #ff5f57;
}

/* ----- Blender ----- */
.app-body.bl-body { flex-direction: column; }
.bl-tabs {
    height: 30px;
    flex: 0 0 auto;
    background: #2b2b2b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
}
.bl-tab {
    font-size: 11px;
    color: #b6b6b6;
    padding: 3px 9px;
    border-radius: 5px;
}
.bl-tab.is-active { background: var(--accent); color: #1c1c1c; font-weight: 700; }
.bl-main { flex: 1; display: flex; min-height: 0; }
.bl-viewport {
    flex: 1.15;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 38%, #616161, #2d2d2d 72%);
}
/* Prev/next arrows to step between .blend files (over the 3D viewport) */
.bl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bl-nav:hover { background: rgba(0, 0, 0, 0.7); transform: translateY(-50%) scale(1.08); }
.bl-prev { left: 14px; }
.bl-next { right: 14px; }
.bl-nav[hidden] { display: none; }
.bl-grid {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 260%;
    height: 150%;
    transform: translateX(-50%) perspective(340px) rotateX(62deg);
    transform-origin: top center;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 35%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 0%, #000 35%, transparent 75%);
}
.bl-vp-label {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
}
.bl-axis {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        linear-gradient(#ff5f57, #ff5f57) center/3px 22px no-repeat,
        linear-gradient(90deg, #4f8ef0, #4f8ef0) center/22px 3px no-repeat;
    opacity: 0.7;
}
.bl-side {
    width: 250px;
    flex: 0 0 auto;
    background: #303030;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    overflow: auto;
}
.bl-npanel {
    max-width: none;
    width: 100%;
    padding: 22px 20px;
    border-radius: 8px;
}
.bl-npanel .ab-title { font-size: 22px; margin-bottom: 18px; }
.bl-npanel .ab-block { margin-bottom: 16px; }
.bl-npanel .ab-block p { font-size: 13px; line-height: 1.5; }
.bl-outliner {
    background: #1f1f1f;
    border-radius: 8px;
    padding: 11px 12px;
}
.bl-row {
    font-size: 11.5px;
    color: #cfcfcf;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bl-row::before { content: "▸"; color: #888; font-size: 9px; }
.bl-row.indent { padding-left: 16px; }

/* Small screens — collapse the busier docks */
@media (max-width: 720px) {
    .pr-bin, .bl-side { display: none; }
    .app-panels { display: none; }
}

/* ========================================
   Blender — real 3D model (model-viewer) + static cube fallback
   ======================================== */
.bl-model {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: transparent;     /* hide the grey loading bar on each flipbook src swap */
    --progress-bar-height: 0px;
}

.bl-stage {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    perspective: 620px;
}
.bl-cube3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-30deg);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.4));
}
.bl-cube3d .face {
    position: absolute;
    width: 120px;
    height: 120px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.bl-cube3d .fz { transform: translateZ(60px);                 background: #F2A65A; }
.bl-cube3d .bz { transform: rotateY(180deg) translateZ(60px); background: #B5650F; }
.bl-cube3d .lx { transform: rotateY(-90deg) translateZ(60px); background: #C26A12; }
.bl-cube3d .rx { transform: rotateY(90deg)  translateZ(60px); background: #E87D0D; }
.bl-cube3d .ty { transform: rotateX(90deg)  translateZ(60px); background: #FBB969; }
.bl-cube3d .by { transform: rotateX(-90deg) translateZ(60px); background: #8F4F0A; }

/* ========================================
   Folder windows — Finder-style file browser
   ======================================== */
.fl-toolbar {
    height: 42px;
    flex: 0 0 auto;
    background: #262626;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
}
.fl-nav { display: flex; gap: 6px; }
.fl-nav span {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #333;
    color: #9a9a9a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
}
.fl-path { color: #cfcfcf; font-size: 13px; font-weight: 500; }
.fl-path b { color: #fff; font-weight: 600; }
.fl-count { margin-left: auto; color: #8a8a8a; font-size: 12px; }

.fl-body { flex: 1; display: flex; min-height: 0; }

.fl-sidebar {
    width: 175px;
    flex: 0 0 auto;
    background: #242424;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: auto;
}
.fl-sb-title {
    color: #7a7a7a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 8px 4px;
}
.fl-sb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #d2d2d2;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
}
.fl-sb-item:hover { background: rgba(255, 255, 255, 0.06); }
.fl-sb-item.is-active { background: var(--accent); color: #0f240e; font-weight: 600; }
.fl-sb-dot { width: 14px; height: 14px; border-radius: 4px; background: #565656; flex: 0 0 auto; }
.fl-sb-item.is-active .fl-sb-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }

.fl-grid {
    flex: 1;
    overflow: auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 22px 18px;
    align-content: start;
    background: #1c1c1c;
}
.file { display: flex; flex-direction: column; gap: 9px; cursor: pointer; }
.file-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 11px;
    overflow: hidden;
    background: #3a3a3a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.file:hover .file-thumb {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}
.file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.file-name {
    font-size: 12.5px;
    color: #dcdcdc;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fake ".blend" files — open in the Blender window instead of the lightbox */
.file-thumb-blend {
    background: radial-gradient(120% 120% at 50% 32%, #3b3b3b, #1d1d1d);
}
/* Live, slowly-spinning 3D preview that fills the tile */
.file-mv {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;            /* clicks fall through → file opens in Blender */
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: transparent;
}
/* Small Blender badge so the tile still reads as a .blend file */
.file-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.file-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Real video tile — show the first frame as the thumbnail (not a gradient) */
.file-vthumb { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sound on/off toggle — fixed bottom-right */
.sfx-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(20, 20, 20, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ededed;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.sfx-toggle:hover { background: rgba(45, 45, 45, 0.85); transform: scale(1.07); }
.sfx-toggle svg { display: block; }
.sfx-toggle .sfx-slash { display: none; }
.sfx-toggle.is-muted { color: #8c8c8c; }
.sfx-toggle.is-muted .sfx-wave { display: none; }
.sfx-toggle.is-muted .sfx-slash { display: block; }

/* Document tile (UI/UX case study) */
.file-thumb-doc {
    display: grid;
    place-items: center;
    position: relative;
    background: linear-gradient(150deg, #f6f7f9, #d6dbe3);
}
.file-thumb-doc .doc-score {
    font-weight: 800;
    font-size: 30px;
    color: #1f2937;
    letter-spacing: -0.5px;
    line-height: 1;
}
.file-thumb-doc .doc-score small { font-size: 14px; font-weight: 700; color: #6b7280; }
.file-thumb-doc .doc-ext {
    position: absolute;
    left: 10px;
    bottom: 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: #e8442e;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Empty folder state */
.fl-empty {
    grid-column: 1 / -1;
    color: #777;
    font-size: 14px;
    padding: 48px 0;
    text-align: center;
}

/* Case-study presentation overlay */
.doc-view {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 4vmin;
    background: rgba(8, 8, 10, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.doc-view.is-open { opacity: 1; }
.doc-view[hidden] { display: none; }
.doc-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    width: min(1040px, 94vw);
    height: min(680px, 88vh);
    background: #1b1b1d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.doc-view.is-open .doc-card { transform: scale(1); }
.doc-info {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.doc-kicker {
    color: #3CA84B;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.doc-title {
    color: #f3f3f3;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    margin: 12px 0 18px;
}
.doc-grade {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 22px;
}
.doc-grade b { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; }
.doc-grade span { font-size: 18px; color: #9a9a9a; font-weight: 600; }
.doc-grade em { font-style: normal; font-size: 12px; color: #777; margin-left: 6px; align-self: center; }
.doc-body { color: #c4c4c6; font-size: 14.5px; line-height: 1.6; margin: 0; }
.doc-body b { color: #e8e8e8; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.doc-chips span {
    font-size: 12px;
    color: #c9c9c9;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 11px;
    border-radius: 999px;
}
.doc-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 24px; flex-wrap: wrap; }
.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: #e8e8e8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.18s ease, transform 0.18s ease;
}
.doc-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.doc-btn-primary { background: #3CA84B; border-color: #3CA84B; color: #07210d; }
.doc-btn-primary:hover { background: #45c057; }
.doc-preview { background: #2a2a2a; border-left: 1px solid rgba(255, 255, 255, 0.06); }
.doc-frame { width: 100%; height: 100%; border: 0; display: block; }
.doc-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease;
}
.doc-close:hover { background: rgba(0, 0, 0, 0.7); }
@media (max-width: 760px) {
    .doc-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .doc-preview { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
}

/* Back arrow in the Blender titlebar — returns to the folder you came from */
.app-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px 0 7px;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #e6e6e6;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}
.app-back svg { display: block; }
.app-back:hover { background: rgba(255, 255, 255, 0.14); }
.app-back[hidden] { display: none; }

/* Video tiles — play button + duration badge */
.file-vid .file-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
}
.file-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.file-play::before {
    content: "";
    border-left: 13px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 4px;
}
.file:hover .file-play { transform: translate(-50%, -50%) scale(1.12); }
.file-dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
/* "N" badge for grouped multi-item project tiles */
.file-gcount {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* "PDF" corner tag for document tiles */
.file-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: #e8442e;
    padding: 2px 6px;
    border-radius: 4px;
}

@media (max-width: 720px) {
    .fl-sidebar { display: none; }
    .fl-grid { padding: 16px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 12px; }
}

/* ========================================
   Lightbox — full preview of a file
   ======================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;     /* filename/caption above the media */
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lb-stage {
    max-width: 84vw;
    max-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.93);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.is-open .lb-stage { transform: scale(1); }
.lb-stage img,
.lb-stage video {
    max-width: 84vw;
    max-height: 72vh;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    display: block;
}
/* Custom video player (replaces the default browser controls) */
.lb-video {
    position: relative;
    display: inline-block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.lb-video video {
    display: block;
    max-width: 84vw;
    max-height: 72vh;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}
.lb-vctrls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 26px 16px 13px;
    line-height: normal;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.1) 72%, transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.lb-video:hover .lb-vctrls,
.lb-video.is-paused .lb-vctrls,
.lb-video.is-scrubbing .lb-vctrls { opacity: 1; }
.lb-vbtn {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.lb-vbtn:hover { opacity: 1; transform: scale(1.14); }
.lb-vbtn svg { display: block; }
.lb-vbar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    position: relative;
    cursor: pointer;
    touch-action: none;
}
/* Enlarge the clickable/seek area well beyond the thin 6px visual bar */
.lb-vbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
}
.lb-vplayed {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #fff;
    border-radius: 3px;
    pointer-events: none;   /* never intercept clicks meant for the bar */
}
.lb-vplayed::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.lb-vbar:hover .lb-vplayed::after,
.lb-video.is-scrubbing .lb-vplayed::after { opacity: 1; }
.lb-vtime {
    flex: 0 0 auto;
    color: #ececec;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lb-placeholder {
    position: relative;
    width: min(70vw, 900px);
    height: min(60vh, 600px);
    border-radius: 12px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.lb-placeholder .file-play {
    width: 64px;
    height: 64px;
}
.lb-placeholder .file-play::before {
    border-left-width: 20px;
    border-top-width: 13px;
    border-bottom-width: 13px;
}

/* Inline PDF viewer */
.lb-pdf {
    display: flex;
    flex-direction: column;
    width: min(86vw, 980px);
    height: 74vh;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    background: #2a2a2a;
}
.lb-pdf iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #525659;
}
.lb-pdfbar {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px 14px;
    background: #1f1f1f;
}
.lb-pdfbtn {
    font-size: 12.5px;
    font-weight: 600;
    color: #ededed;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.18s ease, transform 0.18s ease;
}
.lb-pdfbtn:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }

.lb-caption {
    text-align: center;
    color: #ececec;
    font-size: 14px;
    font-weight: 500;
    max-width: 84vw;
    pointer-events: none;
}
.lb-caption span { color: #9a9a9a; margin-left: 8px; }
.lb-caption .lb-fname { color: #ececec; font-weight: 600; margin-left: 0; }
.lb-desc {
    margin: 9px auto 0;
    max-width: 560px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: #b7b7bd;
    white-space: pre-line;   /* honour line breaks in the context text */
}

/* Lock background scrolling while any overlay (lightbox / app window / doc) is open */
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* ---- Temporary self-serve context editor (?edit) ---- */
.lb-desc-edit {
    display: block;
    margin: 9px auto 0;
    max-width: 560px;
    width: 90vw;
    min-height: 56px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--accent, #1E88E5);
    border-radius: 8px;
    resize: vertical;
    pointer-events: auto;
    outline: none;
}
[data-cid].is-editable {
    outline: 1px dashed rgba(30,136,229,.7);
    outline-offset: 3px;
    border-radius: 3px;
    cursor: text;
}
[data-cid].is-editable:focus { outline: 2px solid #1E88E5; background: rgba(30,136,229,.08); }
[contenteditable].is-editable:empty::before { content: attr(data-placeholder); color: #8a8a90; font-style: italic; }
.ctx-editbar {
    position: fixed; left: 50%; top: 14px; bottom: auto; transform: translateX(-50%);
    z-index: 5000; display: flex; align-items: center; gap: 12px;
    background: rgba(20,22,28,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 13px; color: #e9e9ec;
}
.ctx-editbar button {
    font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #e9e9ec;
}
.ctx-editbar button.primary { background: #1E88E5; border-color: #1E88E5; color: #fff; }
.bl-filectx #bl-filectx-text { white-space: pre-wrap; line-height: 1.6; }

.lb-close,
.lb-nav {
    position: fixed;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}
.lb-close:hover,
.lb-nav:hover { background: rgba(255, 255, 255, 0.24); }
.lb-close {
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
}
.lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 30px;
}
.lb-nav:hover { transform: translateY(-50%) scale(1.08); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-nav[hidden] { display: none; }   /* override .lb-nav display:flex so single-file galleries hide the arrows */

@media (max-width: 720px) {
    .lb-nav { width: 42px; height: 42px; font-size: 24px; }
    .lb-prev { left: 10px; }
    .lb-next { right: 10px; }
}

/* ========================================
   S5 — Resume ("step back from the PC" into a blue space)
   Background + grid colours are driven by CSS vars that JS shifts on scroll.
   ======================================== */
.s5 {
    --s5-bg: #1E88E5;
    --s5-grid: rgba(255, 255, 255, 0.12);
    position: relative;
    min-height: 100vh;
    padding-bottom: 14vh;
    background: var(--s5-bg);
    color: #ffffff;
    overflow: hidden;
}

.s5-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--s5-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--s5-grid) 1px, transparent 1px);
    /* 31 columns across the viewport — identical scale to the rest of the site. */
    background-size: calc(100vw / 31) calc(100vw / 31);
}

.s5-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.s5-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    will-change: transform;
}
.s5-blob.b1 { width: 42vw; height: 42vw; background: rgba(255,255,255,0.16); top: -12vw; left: -6vw; }
.s5-blob.b2 { width: 32vw; height: 32vw; background: rgba(255,255,255,0.10); bottom: 6vw; right: -8vw; }
.s5-blob.b3 { width: 26vw; height: 26vw; background: rgba(0,0,0,0.12); top: 42%; left: 52%; }

.s5-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 14vh 24px 0; }

.s5-head { text-align: center; margin-bottom: 10vh; }
.s5-kicker, .s5-title, .s5-sub, .s5-download {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.s5.in .s5-kicker { opacity: 1; transform: none; transition-delay: 0.25s; }
.s5.in .s5-title { opacity: 1; transform: none; transition-delay: 0.35s; }
.s5.in .s5-sub { opacity: 0.92; transform: none; transition-delay: 0.45s; }
.s5.in .s5-download { opacity: 1; transform: none; transition-delay: 0.55s; }

.s5-kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
}
.s5-title { font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.04; }
.s5-sub { max-width: 580px; margin: 16px auto 28px; line-height: 1.6; font-size: 16px; }
.s5-download {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 999px;
    background: #ffffff;
    color: #1567B0;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, opacity 0.9s, transform 0.9s;
}
.s5-download:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }

/* ----- Career scrubber ----- */
.s5-scrub {
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s,
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.s5.in .s5-scrub { opacity: 1; transform: none; }

/* The "monitor" that plays the current chapter */
.scrub-monitor {
    position: relative;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 38px 40px;
    min-height: 280px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.scrub-screen { position: relative; z-index: 1; max-width: 640px; }
/* content re-animates each time the chapter changes (class toggled in JS) */
.scrub-screen.swap { animation: scrubSwap 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes scrubSwap {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.scrub-year {
    font-size: clamp(40px, 7vw, 78px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.96);
    display: block;
}
.scrub-tag {
    display: inline-block;
    margin: 14px 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.scrub-tag.is-edu { background: #FFD54F; color: #4a3a00; }
.scrub-tag.is-now { background: #fff; color: #1567B0; }
.scrub-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.1; }
.scrub-role { display: block; font-size: 15px; font-weight: 600; opacity: 0.9; margin-top: 3px; }
.scrub-desc { font-size: 15px; line-height: 1.6; opacity: 0.9; margin-top: 14px; max-width: 560px; }
.scrub-counter {
    position: absolute;
    top: 22px;
    right: 26px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

/* The draggable track */
.scrub-track {
    position: relative;
    margin-top: 28px;
    height: 64px;
    padding: 0;
    cursor: grab;
    outline: none;
    touch-action: none;
}
.scrub-track:active { cursor: grabbing; }
.scrub-track:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.5); border-radius: 12px; }
.scrub-clips {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 6px;
}
.scrub-clip {
    flex: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}
.scrub-clip.is-edu { background: rgba(255, 213, 79, 0.22); }
.scrub-clip.is-active {
    background: rgba(255, 255, 255, 0.34);
    color: #fff;
    transform: translateY(-4px);
}
.scrub-playhead {
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    width: 3px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
    transform: translateX(-50%);
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 3;
}
.scrub-playhead::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #fff;
}
.scrub-track.dragging .scrub-playhead { transition: none; }
.scrub-hint {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
    .scrub-monitor { padding: 26px 22px; min-height: 320px; }
    .scrub-clip { font-size: 0; padding: 0; }   /* hide labels; keep blocks */
    .scrub-track { height: 48px; }
}