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

:root {
    --desktop-bg: #E8E7E3;
    --canvas-bg: #FFFFFF;
    --canvas-dot: #D4D4D4;
    --canvas-border: rgba(0,0,0,0.08);
    --canvas-radius: 14px;
    --sidebar-bg: #FAFAFA;
    --sidebar-border: rgba(0,0,0,0.06);
    --sidebar-active: rgba(0,0,0,0.05);
    --window-bg: #FFFFFF;
    --window-border: rgba(0,0,0,0.07);
    --window-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 4px rgba(0,0,0,0.02);
    --window-shadow-active: 0 8px 28px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.03);
    --title-bar: #FAFAFA;
    --title-text: #808080;
    --text-1: #1a1a1a;
    --text-2: #555;
    --text-3: #808080;
    --accent: #1a1a1a;
    --accent-soft: rgba(0,0,0,0.05);
    --overlay-bg: rgba(0,0,0,0.3);
    --cmd-bg: #FFFFFF;
    --file-hover: rgba(0,0,0,0.03);
    --terminal-bg: #1C1C1E;
    --terminal-text: #E5E5E5;
    --terminal-dim: #777;
    --terminal-accent: #4CAF50;
    --figma-red: #F24E1E;
    --figma-orange: #FF7262;
    --figma-violet: #A259FF;
    --figma-green: #0ACF83;
    --figma-blue: #1ABCFE;
    /* Debug: multiply workspace transition durations. Overridden via ?slow=N. */
    --ws-scale: 1;

    /* Motion vocabulary.
       entry: incoming things settle in (slide-in, fade-in, expand, focus).
       exit: outgoing things accelerate away (slide-out, fade-out, dismiss).
       spring: delight-only overshoot — use sparingly, never as a default.
       For everyday hover/state changes the generic `ease` keyword is the
       house default — don't tokenize it. */
    --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-medium: 350ms;
    --dur-slow: 500ms;
}

[data-mode="dark"] {
    --desktop-bg: #050505;
    --canvas-bg: #0E0E0E;
    --canvas-dot: #2A2A2A;
    --canvas-border: rgba(255,255,255,0.06);
    --sidebar-bg: #111;
    --sidebar-border: rgba(255,255,255,0.05);
    --sidebar-active: rgba(255,255,255,0.05);
    --window-bg: #181818;
    --window-border: rgba(255,255,255,0.06);
    --window-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1);
    --window-shadow-active: 0 8px 28px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12);
    --title-bar: #1A1A1A;
    --title-text: #808080;
    --text-1: #E8E8E8;
    --text-2: #AAA;
    --text-3: #808080;
    --accent: #E8E8E8;
    --accent-soft: rgba(255,255,255,0.06);
    --overlay-bg: rgba(0,0,0,0.55);
    --cmd-bg: #1C1C1C;
    --file-hover: rgba(255,255,255,0.04);
    --terminal-bg: #0C0C0C;
    --terminal-text: #E5E5E5;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--desktop-bg);
    color: var(--text-1);
    cursor: default;
    user-select: none;
    transition: background var(--dur-slow) ease, color var(--dur-medium) ease;
}

/* ============ DESKTOP VIDEO BG ============ */
.desktop-video {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.desktop-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============ CANVAS FRAME ============ */
/* The canvas is an inset panel floating on the desktop */
.canvas-frame {
    position: fixed;
    inset: 24px;
    border-radius: var(--canvas-radius);
    border: 1px solid var(--canvas-border);
    overflow: hidden;
    display: flex;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
    transition: border-color var(--dur-medium) ease, box-shadow var(--dur-medium) ease;
}

/* ============ SIDEBAR ============ */
.sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    z-index: 100;
    transition: background var(--dur-slow) ease, border-color var(--dur-medium) ease;
}
/* Sidebar content fades in, but the sidebar box is always visible */
.sidebar > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease-entry), transform 0.4s var(--ease-entry);
}
.sidebar.visible > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--ease-entry), transform 0.4s var(--ease-entry), background var(--dur-slow) ease;
}
.sidebar-section-label {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px 6px;
}
.sidebar-nav { padding: 0 8px; flex: 1; overflow-y: auto; }
.tree { font-family: 'Commit Mono', monospace; font-size: 13px; }
.tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--text-3);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.tree-item:hover { color: var(--text-1); background: var(--file-hover); }
.tree-item.active { color: var(--text-1); background: var(--sidebar-active); }
.tree-item svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.tree-item[data-target] svg,
.tree-item[data-action="resume"] svg {
    stroke: #4CAF50;
}
.tree-branch {
    color: var(--text-3);
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    width: 12px;
    text-align: center;
    opacity: 0.3;
}

/* Folder toggle */
.tree-folder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
    font-family: 'Commit Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s, background 0.15s;
    position: relative;
}
.tree-folder:hover { color: var(--text-1); background: var(--file-hover); }

/* Folder icon — two parts: base and lid */
.folder-icon {
    width: 16px; height: 14px;
    position: relative;
    flex-shrink: 0;
}
.folder-base {
    position: absolute;
    bottom: 0; left: 0;
    width: 16px; height: 10px;
    border-radius: 0 0 2px 2px;
    border: 1.5px solid currentColor;
    border-top: none;
}
.folder-lid {
    position: absolute;
    top: 0; left: 0;
    width: 16px; height: 10px;
    border-radius: 2px 2px 0 0;
    border: 1.5px solid currentColor;
    border-bottom: none;
    transform-origin: bottom left;
    transition: transform 0.25s var(--ease-entry);
}
.folder-tab {
    position: absolute;
    top: 0; left: 0;
    width: 7px; height: 4px;
    border-radius: 2px 2px 0 0;
    border: 1.5px solid currentColor;
    border-bottom: none;
}
/* Lid opens on hover */
.tree-folder:hover .folder-lid {
    transform: rotateX(45deg) translateY(-2px);
}
/* Lid stays open when expanded */
.tree-folder.open .folder-lid {
    transform: rotateX(45deg) translateY(-2px);
}

/* Children container — animated slide */
.tree-children {
    margin-left: 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s var(--ease-entry),
                opacity 0.25s ease,
                margin 0.25s ease;
    margin-top: 0;
    margin-bottom: 0;
}
.tree-children.expanded {
    max-height: 300px;
    opacity: 1;
    margin-top: 2px;
    margin-bottom: 4px;
}
.sidebar-footer {
    padding: 12px 16px 4px;
    display: flex; flex-direction: column; gap: 10px;
    border-top: 1px solid var(--sidebar-border);
    margin-top: 8px;
}
.mode-pills {
    display: flex; gap: 2px;
    background: var(--accent-soft);
    border-radius: 7px; padding: 2px;
}
.mode-pill {
    font-family: 'Commit Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 4px 0; flex: 1; text-align: center;
    border-radius: 5px; border: none;
    background: transparent; color: var(--text-3);
    cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.mode-pill.active { background: var(--accent); color: var(--canvas-bg); }
.sidebar-hint {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    color: var(--text-2);
    padding: 0 16px 16px;
}

/* ============ CANVAS (inside frame) ============ */
.canvas {
    flex: 1;
    position: relative;
    background-color: var(--canvas-bg);
    background-image: radial-gradient(circle, var(--canvas-dot) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    overflow: hidden;
    transition: background-color var(--dur-slow) ease;
}
.canvas-inner {
    position: absolute;
    inset: 0;
    transform: translate(0px, 0px);
}
.canvas-inner.animating {
    transition: transform 0.5s var(--ease-entry);
}

/* ============ WINDOWS ============ */
.window {
    position: absolute;
    background: var(--window-bg);
    border: 1px solid var(--window-border);
    border-radius: 12px;
    box-shadow: var(--window-shadow);
    overflow: visible;
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition: box-shadow 0.25s ease;
}
.window.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s var(--ease-entry),
                transform 0.35s var(--ease-entry),
                box-shadow 0.25s ease,
                background 0.5s ease;
}
.window.dragging {
    box-shadow: var(--window-shadow-active);
    transition: box-shadow var(--dur-fast) ease;
}

.window-titlebar {
    height: 40px;
    background: var(--title-bar);
    border-bottom: 1px solid var(--window-border);
    display: flex;
    align-items: center;
    padding: 0 14px;
    cursor: grab;
    gap: 10px;
    border-radius: 12px 12px 0 0;
    transition: background var(--dur-slow) ease;
}
.window-titlebar:active { cursor: grabbing; }
.traffic-lights { display: flex; gap: 0; }
.traffic-light {
    width: 20px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Visual dot is the ::before, hit area is the full 24px element */
    background: transparent;
}
.traffic-light::before {
    content: '';
    width: 12px; height: 12px;
    border-radius: 50%;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
}
.traffic-light:hover::before { opacity: 1; transform: scale(1.15); }
.tl-red::before { background: #FF5F57; }
.tl-yellow::before { background: #FEBC2E; }
.tl-green::before { background: #28C840; }
/* Show icons on hover */
.traffic-light svg {
    position: absolute;
    width: 6px; height: 6px;
    stroke: rgba(0,0,0,0.5);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 1;
}
.window-titlebar:hover .traffic-light svg { opacity: 1; }
/* Minimized window */
.window.collapsed .window-content {
    display: none;
}
.window.collapsed {
    height: auto !important;
}
.window-title {
    font-family: 'Commit Mono', monospace;
    font-size: 12px;
    color: var(--title-text);
    flex: 1;
    text-align: center;
    margin-right: 50px;
}
.window-content {
    padding: 20px;
    overflow-y: auto;
    border-radius: 0 0 12px 12px;
}

/* Hero Window */
.hero-window { min-width: 0; }
.hero-greeting {
    font-family: 'Commit Mono', monospace;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}
.hero-name {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 70px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 6px;
}
.hero-title {
    font-size: 15px;
    color: var(--text-2);
    font-weight: 500;
    margin-bottom: 20px;
}
.hero-bio {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-1);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}
.hero-meta {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.6;
}
.hero-meta a {
    color: var(--text-1);
    text-decoration: underline;
    text-decoration-color: var(--text-3);
    text-underline-offset: 2px;
}
.hero-cta-row { display: flex; gap: 10px; margin-top: 20px; }
.cta-btn {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease;
    position: relative;
}
.cta-btn:active {
    transform: scale(0.97);
}
.cta-primary {
    background: var(--accent);
    color: var(--canvas-bg);
    border-color: var(--accent);
}
.cta-secondary {
    background: transparent;
    color: var(--accent);
    border-color: var(--window-border);
}

/* Projects Window */
.projects-window { min-width: 0; }
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file-row {
    display: flex;
    gap: 16px;
    padding: 16px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--dur-fast) ease;
    position: relative;
}
.file-row:hover { background: var(--file-hover); }
.file-row-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.file-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.file-icon svg {
    width: 16px; height: 16px;
    stroke: var(--text-3);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.file-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    flex: 1;
    min-width: 0;
}
.file-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.file-hero {
    flex-shrink: 0;
    aspect-ratio: 22/9;
    height: 117px;
    border-radius: 2px;
    overflow: hidden;
    background: #3e3e3e;
}
.file-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-hero-placeholder span {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #808080;
}
.file-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.file-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.file-tag {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(0,0,0,0.05);
    color: #636363;
    font-weight: 500;
}
.file-summary {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-3);
    flex: 1;
    min-height: 0;
}
.pw-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.pw-overlay.open { opacity: 1; pointer-events: auto; }
.pw-box {
    background: var(--window-bg); border: 1px solid var(--window-border);
    border-radius: 12px; padding: 28px 32px; width: 340px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    transform: scale(0.95); transition: transform 0.2s;
}
.pw-overlay.open .pw-box { transform: scale(1); }
.pw-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.pw-subtitle { font-size: 12px; color: var(--text-3); margin-bottom: 16px; }
.pw-input {
    width: 100%; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--window-border); background: var(--canvas-bg);
    font-family: 'Commit Mono', monospace; font-size: 13px; color: var(--text-1);
    outline: none; box-sizing: border-box;
}
.pw-input:focus { border-color: var(--accent); }
.pw-input.error { border-color: #e74c3c; animation: pw-shake 0.3s; }
@keyframes pw-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.pw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pw-btn {
    padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; border: 1px solid var(--window-border); background: var(--file-hover);
    color: var(--text-1); font-family: 'Inter', sans-serif;
}
.pw-btn-primary { background: var(--text-1); color: var(--canvas-bg); border-color: var(--text-1); }

/* Personal Window */
.personal-window { min-width: 0; }
.personal-window .window-content { padding: 6px 14px 10px; }
.personal-item {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px 0;
    border-radius: 6px;
    transition: background var(--dur-fast) ease;
}
.personal-item:hover { background: var(--file-hover); margin: 0 -8px; padding: 8px 8px; }
.personal-item + .personal-item { border-top: 1px solid var(--window-border); }
.personal-item:hover + .personal-item,
.personal-item + .personal-item:hover { border-top-color: transparent; }
.personal-accent {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), align-self 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.personal-item:hover .personal-accent {
    width: 48px;
    align-self: center;
    aspect-ratio: 16/9;
    border-radius: 0;
}
.personal-body { flex: 1; min-width: 0; }
.personal-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 6px;
}
.personal-label .external-arrow {
    opacity: 0;
    font-size: 10px;
    color: var(--text-3);
    transition: opacity 0.15s, transform 0.15s;
}
.personal-item:hover .external-arrow { opacity: 0.6; transform: translate(1px, -1px); }
.personal-sub {
    font-size: 13px;
    color: var(--text-3);
    margin-top: 2px;
    line-height: 1.4;
}

/* Terminal Window — normal canvas window */
.terminal-fixture .window-title {
    color: #4CAF50;
    font-size: 13px;
    font-weight: 500;
}
.terminal-fixture .window-content {
    max-height: 300px;
}
.terminal-window .window-titlebar {
    background: var(--terminal-bg);
    border-color: rgba(255,255,255,0.05);
}
.terminal-window .traffic-light { opacity: 1; }
.terminal-window .window-title { color: #aaa; }
.terminal-window .window-content {
    background: #252528;
    font-family: 'Commit Mono', monospace;
    font-size: 12px;
    line-height: 1.65;
    color: var(--terminal-text);
    padding: 16px 18px;
    max-height: 460px;
    border-radius: 0 0 12px 12px;
}
.term-prompt { color: var(--terminal-accent); }
.term-cmd { color: #E5E5E5; }
.term-dim { color: #808080; }
.term-key {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11px;
    min-width: 20px;
    text-align: center;
    color: #ccc;
}
.term-label { color: #808080; }
.term-section { margin-bottom: 12px; }
.term-shortcut-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 3px 0;
}
.term-input-line {
    display: flex;
    align-items: center;
    gap: 0;
}
.term-input-field {
    background: transparent;
    border: none;
    outline: none;
    color: #E5E5E5;
    font-family: 'Commit Mono', monospace;
    font-size: 12px;
    flex: 1;
    margin-left: 6px;
    caret-color: #E5E5E5;
    line-height: 1.65;
}


/* ============ COMMAND PALETTE ============ */
.cmd-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-entry);
}
.cmd-overlay.open { opacity: 1; pointer-events: auto; }
.cmd-box {
    width: 520px;
    background: var(--cmd-bg);
    border: 1px solid var(--window-border);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.15);
    overflow: hidden;
    transform: scale(0.96) translateY(-10px);
    transition: transform 0.2s var(--ease-entry);
}
.cmd-overlay.open .cmd-box { transform: scale(1) translateY(0); }
.cmd-input-row {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 10px;
    border-bottom: 1px solid var(--window-border);
}
.cmd-slash {
    font-family: 'Commit Mono', monospace;
    font-size: 16px;
    color: var(--text-3);
    font-weight: 500;
}
.cmd-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    background: transparent;
    color: var(--text-1);
}
.cmd-input::placeholder { color: var(--text-3); }
.cmd-hint {
    font-family: 'Commit Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    background: var(--accent-soft);
    padding: 3px 8px;
    border-radius: 5px;
}
.cmd-results { padding: 8px; max-height: 280px; overflow-y: auto; }
.cmd-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.cmd-result:hover, .cmd-result.active { background: var(--accent-soft); }
.cmd-result-icon {
    width: 20px; height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
}
.cmd-result-icon svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cmd-result-text { flex: 1; }
.cmd-result-label { font-size: 14px; font-weight: 500; color: var(--text-1); }
.cmd-result-desc { font-size: 12px; color: var(--text-3); }
.cmd-result-key {
    font-family: 'Commit Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    background: var(--file-hover);
    border: 1px solid var(--window-border);
    padding: 2px 6px;
    border-radius: 4px;
}
.toast {
    position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--window-bg); color: var(--text-1); border: 1px solid var(--window-border);
    padding: 10px 20px; border-radius: 10px; font-size: 14px; font-family: 'Inter', sans-serif;
    z-index: 99999; opacity: 0; transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ SHORTCUTS OVERLAY ============ */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-entry);
}
.shortcuts-overlay.open { opacity: 1; pointer-events: auto; }
.shortcuts-box {
    background: var(--cmd-bg);
    border: 1px solid var(--window-border);
    border-radius: 14px;
    padding: 28px 36px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.15);
    min-width: 340px;
    transform: scale(0.96);
    transition: transform 0.2s var(--ease-entry);
}
.shortcuts-overlay.open .shortcuts-box { transform: scale(1); }
.shortcuts-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-1);
}
.shortcut-group-label {
    font-family: 'Commit Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 16px;
    margin-bottom: 8px;
}
.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}
.shortcut-label { font-size: 13px; color: var(--text-2); }
.shortcut-keys { display: flex; gap: 4px; }
.sk {
    font-family: 'Commit Mono', monospace;
    font-size: 11px;
    min-width: 24px;
    text-align: center;
    padding: 3px 7px;
    background: var(--file-hover);
    border: 1px solid var(--window-border);
    border-radius: 5px;
    color: var(--text-2);
}

/* ============ TIM MODE (light, hand-drawn) ============ */
[data-mode="tim"] {
    --desktop-bg: #E8EDE9;
    --canvas-bg: #F5F8F5;
    --canvas-dot: #C8D4CA;
    --canvas-border: rgba(76,130,80,0.12);
    --sidebar-bg: #1b4017;
    --sidebar-border: rgba(255,255,255,0.1);
    --sidebar-active: rgba(255,255,255,0.1);
    --accent: #2D5E30;
    --accent-soft: rgba(76,130,80,0.06);
    --window-bg: #FAFCFA;
    --window-border: rgba(76,130,80,0.1);
    --window-shadow: 0 4px 20px rgba(0,40,0,0.04), 0 1px 4px rgba(0,40,0,0.02);
    --title-bar: #F0F4F0;
    --title-text: #6A9A6E;
    --text-1: #1A3A1C;
    --text-2: #3E6840;
    --text-3: #7AAA7E;
    --cmd-bg: #FAFCFA;
    --file-hover: rgba(76,130,80,0.05);
    --terminal-bg: #1A2E1C;
    --terminal-accent: #4CAF50;
}
[data-mode="tim"] .sidebar .sidebar-section-label { color: rgba(255,255,255,0.4); }
[data-mode="tim"] .sidebar .tree-item { color: rgba(255,255,255,0.55); }
[data-mode="tim"] .sidebar .tree-item:hover { color: #E8F0E8; background: rgba(255,255,255,0.08); }
[data-mode="tim"] .sidebar .tree-item.active { color: #FFFFFF; background: rgba(255,255,255,0.12); }
[data-mode="tim"] .sidebar .tree-folder { color: rgba(255,255,255,0.65); }
[data-mode="tim"] .sidebar .tree-folder:hover { color: #E8F0E8; background: rgba(255,255,255,0.08); }
[data-mode="tim"] .sidebar .tree-branch { color: rgba(255,255,255,0.2); }
[data-mode="tim"] .sidebar .sidebar-hint { color: rgba(255,255,255,0.35); }
[data-mode="tim"] .sidebar .sidebar-social { color: rgba(255,255,255,0.45); }
[data-mode="tim"] .sidebar .sidebar-social:hover { color: #E8F0E8; background: rgba(255,255,255,0.08); }
[data-mode="tim"] .sidebar .mode-pills { background: rgba(255,255,255,0.08); }
[data-mode="tim"] .sidebar .mode-pill { color: rgba(255,255,255,0.55); border: none; background: transparent; }
[data-mode="tim"] .sidebar .mode-pill.active { background: rgba(255,255,255,0.2); color: #FFFFFF; }
[data-mode="tim"] .sidebar .sidebar-cs-back { color: rgba(255,255,255,0.55); }
[data-mode="tim"] .sidebar .sidebar-cs-back:hover { color: #E8F0E8; background: rgba(255,255,255,0.08); }
[data-mode="tim"] .sidebar .sidebar-cs-title { color: #FFFFFF; }
[data-mode="tim"] .sidebar .sidebar-toc-item { color: rgba(255,255,255,0.55); }
[data-mode="tim"] .sidebar .sidebar-toc-item:hover { color: #E8F0E8; background: rgba(255,255,255,0.08); }
[data-mode="tim"] .sidebar .sidebar-toc-item.active { color: #FFFFFF; background: rgba(255,255,255,0.12); }
[data-mode="tim"] .file-summary { color: #808080; }
[data-mode="tim"] .file-icon svg { stroke: #808080; }
[data-mode="tim"] .personal-sub { color: #808080; }
[data-mode="tim"] .terminal-window .window-titlebar { background: #1C1C1E; }
[data-mode="tim"] .terminal-window .window-content { background: #252528; }
[data-mode="tim"] .canvas {
    background-image: none;
    background-color: var(--canvas-bg);
}
/* ASCII landscape art layer — replaces dot grid in Tim mode */
.tim-ascii {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    font-family: 'Commit Mono', monospace;
    color: rgba(76,130,80,0.18);
    white-space: pre;
}
[data-mode="tim"] .tim-ascii {
    display: block;
    overflow: hidden;
}
.tim-watermark {
    display: none;
}
/* Tim watermark disabled */

.magnetic { position: relative; }

/* ============ WORKSPACE TRANSITIONS ============ */
/* Durations wrapped in calc() so ?slow=N can multiply them for visual debugging */
.window.ws-transitioning {
    transition: left calc(0.5s * var(--ws-scale)) var(--ease-entry),
                top calc(0.5s * var(--ws-scale)) var(--ease-entry),
                width calc(0.5s * var(--ws-scale)) var(--ease-entry),
                height calc(0.5s * var(--ws-scale)) var(--ease-entry),
                opacity calc(0.35s * var(--ws-scale)) ease,
                box-shadow calc(0.25s * var(--ws-scale)) ease !important;
}
/* Accessibility: skip movement for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .window.ws-transitioning {
        transition: opacity var(--dur-fast) var(--ease-entry) !important;
    }
}
.window.ws-thumb {
    overflow: hidden;
    cursor: pointer;
}
.window.visible.ws-thumb {
    opacity: 0.85;
}
.window.visible.ws-thumb:hover {
    opacity: 1;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06) !important;
}
.window.ws-thumb .window-content {
    pointer-events: none;
}
.window.ws-thumb .file-hero {
    display: none;
}
.window.ws-thumb .file-row {
    flex-direction: column;
}

/* ============ VOID MODE ============ */
#voidCanvas {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}
.void-warp {
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s var(--ease-entry);
    background: radial-gradient(ellipse at center,
        transparent 20%,
        rgba(0, 0, 0, 0.15) 45%,
        rgba(0, 0, 0, 0.4) 65%,
        rgba(0, 0, 0, 0.75) 80%,
        rgba(0, 0, 0, 0.95) 100%
    );
}
.void-warp.active { opacity: 1; }
.void-vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 50%,
        rgba(0,0,0,0.02) 65%,
        rgba(0,0,0,0.05) 80%,
        rgba(0,0,0,0.05) 100%
    );
    opacity: 0;
    transition: opacity 2.5s var(--ease-entry);
    pointer-events: none;
    z-index: 8;
}
.void-vignette.active { opacity: 1; }

@keyframes galeForce {
    0%   { translate: 0px 0px;   rotate: 0deg; }
    10%  { translate: 3px -2px;   rotate: 0.4deg; }
    20%  { translate: -4px 1px;   rotate: -0.6deg; }
    30%  { translate: 2px 4px;    rotate: 0.3deg; }
    40%  { translate: -3px -3px;  rotate: -0.5deg; }
    50%  { translate: 5px 2px;    rotate: 0.6deg; }
    60%  { translate: -2px -1px;  rotate: -0.3deg; }
    70%  { translate: 4px -3px;   rotate: 0.5deg; }
    80%  { translate: -5px 2px;   rotate: -0.2deg; }
    90%  { translate: 1px -2px;   rotate: 0.3deg; }
    100% { translate: 0px 0px;    rotate: 0deg; }
}

.void-reset-btn {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    font-family: 'Commit Mono', monospace;
    font-size: 13px;
    color: #444;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease-entry), color var(--dur-base), border-color var(--dur-base);
    pointer-events: none;
}
.void-reset-btn.visible { opacity: 1; pointer-events: auto; transition: opacity 2.5s var(--ease-entry) 3s, color var(--dur-base), border-color var(--dur-base); }
.void-reset-btn:hover { color: #888; border-color: rgba(255,255,255,0.15); }
/* ============ PEN TOOL ============ */
.draw-layer {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.draw-layer.active {
    pointer-events: auto;
    cursor: crosshair;
}
.draw-toolbar {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    transition: transform 0.5s var(--ease-entry), opacity 0.4s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--window-bg);
    border: 1px solid var(--window-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    z-index: 1001;
}
.draw-toolbar.tucked {
    transform: translateX(-50%) translateY(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
}
.draw-tool {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.draw-tool:hover { background: var(--file-hover); color: var(--text-1); }
.draw-tool.active { background: var(--accent-soft); color: var(--accent); }
.draw-tool svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.draw-sep {
    width: 1px;
    height: 20px;
    background: var(--window-border);
    margin: 0 4px;
}
.draw-color {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
}
.draw-color:hover { transform: scale(1.15); }
.draw-color.active { border-color: var(--text-1); }
.draw-size {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    background: var(--file-hover);
    border: 1px solid var(--window-border);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    transition: color 0.12s;
}
.draw-size:hover { color: var(--text-1); }

/* ============ CASE STUDY TAB BAR ============ */
.cs-tab-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: var(--title-bar);
    border-bottom: 1px solid var(--window-border);
    z-index: 300;
    transition: height 0.35s var(--ease-entry), border-color 0.3s ease;
}
.cs-tab-bar.visible {
    height: 36px;
    overflow: visible;
}
.cs-tab-bar-inner {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 0 8px;
    gap: 1px;
}
.cs-tab {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    margin-bottom: -1px;
    font-family: 'Commit Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    background: var(--accent-soft);
    border: 1px solid var(--window-border);
    border-bottom: 1px solid var(--window-border);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.cs-tab:hover { color: var(--text-2); }
.cs-tab.active {
    color: var(--text-1);
    background: var(--canvas-bg);
    border-bottom-color: var(--canvas-bg);
}
/* Accent — full-width inside the tab, matching the 8px corner radius. */
.cs-tab-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 7px 7px 0 0;
}
/* Label takes the full available space; on hover, mask its right edge so the
   close button reveals as if dissolving the text behind it. Tab width is
   stable because the close is absolute-positioned.
   Default state has a no-op gradient (fully opaque) so the transition to the
   hover state animates between two gradients of the same shape — going
   from `none` to a gradient does not animate smoothly in any browser. */
.cs-tab-label {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
    mask-image: linear-gradient(to right, black 100%, transparent 100%);
    transition: -webkit-mask-image 0.18s, mask-image 0.18s;
}
.cs-tab:hover:not(.cs-tab-canvas) .cs-tab-label {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent calc(100% - 6px));
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent calc(100% - 6px));
}
.cs-tab-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s;
}
.cs-tab:hover .cs-tab-close { opacity: 0.5; }
.cs-tab-close:hover { opacity: 1 !important; background: var(--accent-soft); }
.cs-tab-close svg {
    width: 8px; height: 8px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.cs-tab-canvas {
    border-top: none;
}
.cs-tab-canvas .cs-tab-accent { display: none; }

/* ============ CASE STUDY WINDOW ============ */
.cs-overlay {
    position: absolute;
    left: 0; top: 36px; right: 0; bottom: 0;
    z-index: 250;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Matches .cs-window so the tab cross-fade doesn't reveal a lighter
       layer behind the content as the cs-window fades opacity. */
    background: var(--canvas-bg);
    box-shadow: 0 12px 48px rgba(0,0,0,0.1);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.cs-overlay.sliding-in {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.35s var(--ease-entry),
                opacity 0.15s ease;
}
.cs-overlay.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* Tab switch: content slides inside the overlay */
.cs-window.slide-out-left {
    animation: csSlideOutLeft 0.25s cubic-bezier(0.4,0,1,1) forwards;
}
.cs-window.slide-in-right {
    animation: csSlideInRight 0.3s var(--ease-entry) both;
}
.cs-window.slide-out-right {
    animation: csSlideOutRight 0.25s cubic-bezier(0.4,0,1,1) forwards;
}
.cs-window.slide-in-left {
    animation: csSlideInLeft 0.3s var(--ease-entry) both;
}
/* Tab cross-fade: outgoing recedes (slides away + scales down), incoming
   presents forward (slides in + scales from slightly large). The 1.02 / 0.97
   scale gives a subtle depth cue without dramatic movement.

   ─── ROLLBACK RECIPE ───
   To revert to the pre-scale, flat-slide version:
     1. Replace `100px` with `60px` in all four keyframes below.
     2. Remove the ` scale(1)`, ` scale(0.97)`, ` scale(1.02)` segments
        from every transform — leave just `translateX(...)`.
   To dial down without removing entirely: try 80px + scale 0.98 / 1.01.
   To make more dramatic: try 140px + scale 0.95 / 1.03 and bump
   .cs-window.slide-out-* duration from 0.25s to 0.28s. */
@keyframes csSlideOutLeft {
    from { transform: translateX(0) scale(1); opacity: 1; }
    to { transform: translateX(-100px) scale(0.97); opacity: 0; }
}
@keyframes csSlideInRight {
    from { transform: translateX(100px) scale(1.02); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes csSlideOutRight {
    from { transform: translateX(0) scale(1); opacity: 1; }
    to { transform: translateX(100px) scale(0.97); opacity: 0; }
}
@keyframes csSlideInLeft {
    from { transform: translateX(-100px) scale(1.02); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}
.cs-overlay.closing {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease-entry),
                opacity 0.18s ease;
}
.cs-window {
    flex: 1;
    position: relative;
    background: var(--canvas-bg);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    container-type: inline-size;
}
.resume-embed {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    inset: 0;
}
.cs-titlebar {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    gap: 10px;
    background: var(--canvas-bg);
    border-bottom: 1px solid var(--window-border);
    flex-shrink: 0;
}
.cs-titlebar .traffic-lights { display: flex; gap: 7px; }
.cs-titlebar .traffic-light {
    width: 12px; height: 12px;
    border-radius: 50%;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-titlebar .traffic-light:hover { opacity: 1; transform: scale(1.1); }
.cs-titlebar .traffic-light svg {
    width: 6px; height: 6px;
    stroke: rgba(0,0,0,0.5);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.1s;
}
.cs-titlebar:hover .traffic-light svg { opacity: 1; }
.cs-titlebar-name {
    font-family: 'Commit Mono', monospace;
    font-size: 12px;
    color: var(--title-text);
    flex: 1;
    text-align: center;
}
.cs-accent-line {
    height: 2px;
    flex-shrink: 0;
}

/* ============ CASE STUDY CONTENT ============ */
.cs-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}
.cs-hero-img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 32px;
}
.cs-carousel {
    position: relative;
    background: var(--title-bar);
    padding: 40px 0;
    margin-top: 48px;
    margin-bottom: 48px;
    overflow: hidden;
    width: 100cqi;
    margin-left: calc((100% - 100cqi) / 2);
    margin-right: calc((100% - 100cqi) / 2);
}
.cs-carousel-track {
    display: flex;
    justify-content: safe center;
    gap: 16px;
    height: 800px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0 40px;
}
.cs-carousel-track .cs-image-slot {
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
}
.cs-carousel-track .cs-image-slot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: none !important;
    margin: 0;
    box-shadow: none;
}
.cs-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.cs-carousel-dots .cs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-3, #808080);
    opacity: 0.25;
    transition: opacity 0.2s;
    cursor: pointer;
}
.cs-carousel-dots .cs-dot.active {
    opacity: 0.8;
}
/* Simple image row (no slots, e.g. phone mockups) */
.cs-image-row {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.cs-image-row > img {
    flex: 0 0 auto;
    width: 320px;
    height: auto;
    border-radius: 8px;
    scroll-snap-align: start;
    border: none !important;
    box-shadow: none;
}
.cs-figma-embed {
    width: 100%;
    height: 500px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px;
    margin-top: 24px;
}
.cs-hero {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    width: 100%;
}
.cs-hero h1, .cs-hero p, .cs-hero h2 { max-width: 600px; width: 100%; }
.cs-hero h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 0;
    letter-spacing: -0.02em;
}
.cs-hero h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-1);
    margin-bottom: 16px;
}
.cs-hero-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    margin-bottom: 20px;
    max-width: 600px;
    width: 100%;
}
.cs-metrics-line {
    font-family: 'Commit Mono', monospace;
    font-size: 12px;
    color: var(--text-3);
    padding: 10px 14px;
    background: var(--accent-soft);
    border-radius: 8px;
    letter-spacing: 0.01em;
    max-width: 600px;
    width: 100%;
}
.cs-section {
    margin-bottom: 48px;
    scroll-margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}
.cs-section > *:last-child { margin-bottom: 0; }
.cs-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    max-width: 600px;
    width: 100%;
}
.cs-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 8px;
    margin-top: 24px;
    max-width: 600px;
    width: 100%;
}
.cs-section p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 16px;
    max-width: 600px;
    width: 100%;
}
.cs-section ul {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
    max-width: 600px;
    width: 100%;
}
.cs-section ul li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-2);
    padding: 3px 0 3px 18px;
    position: relative;
}
.cs-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-3);
}
.cs-section img {
    width: 100%;
    max-width: 1000px;
    border-radius: 10px;
    border: none;
    margin: 16px 0;
    cursor: zoom-in;
}
.cs-before-stack img {
    margin: 0;
    border-radius: 0;
    cursor: default;
}
.cs-after-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cs-after-scroll img {
    margin: 0;
    border-radius: 0;
    cursor: default;
    display: block;
}
.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-entry);
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4vh 0;
}
.cs-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
.cs-lightbox img {
    width: 92vw;
    max-width: 1200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    transform: scale(0.95);
    transition: transform var(--dur-base) ease;
    flex-shrink: 0;
}
.cs-lightbox.active img {
    transform: scale(1);
}
.cs-section figure img {
    margin: 0;
}
.about-carousel {
    width: 100%;
    overflow: hidden;
    margin-bottom: 32px;
    margin-top: -48px;
}
.about-carousel-track {
    display: flex;
    gap: 12px;
    animation: aboutCarouselScroll 40s linear infinite;
    width: max-content;
}
.about-carousel-track:hover {
    animation-play-state: paused;
}
.about-carousel-track img {
    height: 480px;
    width: auto;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}
@keyframes aboutCarouselScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes logoScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.cs-projected {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    padding: 20px 24px;
    background: var(--title-bar);
    border-radius: 10px;
    margin-bottom: 16px;
    display: inline-block;
    max-width: 600px;
    width: 100%;
}
.cs-impact-table {
    max-width: 600px;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.cs-impact-table th, .cs-impact-table td {
    font-size: 13px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--window-border);
}
.cs-impact-table th {
    font-family: 'Commit Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.cs-impact-table td { color: var(--text-2); }
.cs-impact-table td:last-child { font-weight: 600; color: var(--text-1); }
.cs-impact-table tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: var(--text-1);
}
.cs-note {
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
    line-height: 1.6;
    margin-top: 8px;
}
.cs-callout-card {
    background: var(--title-bar);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 32px auto;
    max-width: 600px;
    width: 100%;
}
.cs-callout-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0 0 14px;
}
.cs-callout-card .cs-role-tags {
    margin-top: 0;
}
.cs-callout-card .cs-role-tag {
    background: var(--accent-soft);
    color: var(--text-1);
}
.cs-role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    max-width: 600px;
    width: 100%;
}
.cs-role-tag {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--text-3);
}
.cs-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-3);
    font-family: 'Commit Mono', monospace;
    gap: 12px;
}
.cs-placeholder-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-2);
}
.cs-placeholder-sub { font-size: 13px; }

/* ============ SIDEBAR CASE STUDY TOC ============ */
.sidebar-cs-nav {
    display: none;
    flex-direction: column;
    padding: 0 8px;
    flex: 1;
    overflow-y: auto;
}
.sidebar-cs-nav.visible {
    display: flex;
}
.sidebar-cs-back {
    font-family: 'Commit Mono', monospace;
    font-size: 13px;
    color: var(--text-3);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    margin-bottom: 8px;
}
.sidebar-cs-back:hover { color: var(--text-1); background: var(--file-hover); }
.sidebar-cs-back svg {
    width: 12px; height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sidebar-cs-title {
    font-family: 'Commit Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    padding: 4px 8px 10px;
}
.sidebar-toc-item {
    font-family: 'Commit Mono', monospace;
    font-size: 13px;
    color: var(--text-3);
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-toc-item:hover { color: var(--text-1); background: var(--file-hover); }
.sidebar-toc-item.active { color: var(--text-1); background: var(--sidebar-active); }

/* Profile photo window */
.profile-window, .podcast-window { overflow: hidden; }
.profile-window .window-content {
    padding: 0;
}
.profile-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 0 12px 12px;
}
.profile-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #E8E7E3 0%, #D4D3CD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 800;
    color: var(--text-3);
    border-radius: 0 0 12px 12px;
}

/* Reviews window */
.review-item { padding: 12px 0; }
.review-item + .review-item { border-top: 1px solid var(--window-border); }
.review-quote {
    font-style: italic;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-1);
    margin-bottom: 8px;
}
.review-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.review-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
}
.review-role {
    font-size: 11px;
    color: var(--text-3);
}

/* About window */
.about-window { cursor: pointer; }
.about-window .hero-bio {
    margin-bottom: 10px;
}
.about-teaser {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.about-tag {
    font-family: 'Commit Mono', monospace;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--text-3);
}

/* Social links in sidebar footer */
.sidebar-socials {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.sidebar-social {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.sidebar-social:hover { color: var(--text-1); background: var(--file-hover); }
.sidebar-social svg {
    width: 15px; height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: miter;
}
@keyframes windowJitter {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px) rotate(-0.5deg); }
    30% { transform: translateX(2px) rotate(0.3deg); }
    45% { transform: translateX(-2px) rotate(-0.3deg); }
    60% { transform: translateX(2px) rotate(0.2deg); }
    80% { transform: translateX(-1px); }
}
.window.jitter {
    animation: windowJitter 0.4s ease-out;
    box-shadow: 0 0 0 2px var(--accent), var(--window-shadow) !important;
}

/* =============================================
   MOBILE RESPONSIVE — 640px breakpoint
   ============================================= */

/* Hide mobile elements on desktop */
.mobile-top-bar,
.drawer-backdrop,
.drawer-close,
.cs-mobile-back,
.cs-section-nav { display: none; }

@media (max-width: 640px) {

/* ── Global Resets ── */
html, body {
    overflow: hidden;
    height: 100dvh;
}

/* ── Hide Desktop-Only Elements ── */
.draw-layer,
.draw-toolbar,
.tim-watermark,
#voidCanvas,
.void-vignette,
.void-warp,
.void-reset-btn,
.cmd-overlay,
.shortcuts-overlay,
.cs-tab-bar,
.sidebar-hint,
.tim-ascii,
.tree-item[data-action="void"],
.tree-item[data-action="terminal"],
.tree-item[data-action="playground"] { display: none !important; }

/* ── Mobile Top Bar ── */
.mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--canvas-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--window-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.hamburger {
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s;
}
.hamburger:active { background: var(--accent-soft); }
.hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--text-1);
    border-radius: 1px;
    transition: transform 0.3s var(--ease-entry), opacity 0.3s var(--ease-entry);
}


.mobile-mode-pills {
    display: none;
}

.mobile-mode-pill {
    font-family: 'Commit Mono', 'SF Mono', Consolas, monospace;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--window-border);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.mobile-mode-pill.active {
    background: var(--text-1);
    color: var(--canvas-bg);
    border-color: var(--text-1);
}

/* ── Drawer Backdrop ── */
.drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-entry);
    z-index: 200;
}
.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Sidebar → Drawer ── */
.sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px !important;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease-entry);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: none !important;
}
.sidebar.drawer-open {
    transform: translateX(0);
}
.sidebar.visible > * { opacity: 1; }

.drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-2);
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    transition: background 0.15s;
}
.drawer-close:active { background: var(--accent-soft); }

/* ── Canvas Frame → Scrollable Container ── */
.canvas-frame {
    position: relative !important;
    inset: auto !important;
    margin: clamp(0px, calc((100vw - 320px) / 55 * 16), 16px);
    border-radius: 16px;
    height: calc(100dvh - clamp(0px, calc((100vw - 320px) / 55 * 32), 32px));
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ── Route Pages: overlay fills canvas-frame ── */
body.route-page .canvas-frame {
    overflow: hidden;
}
body.route-page .mobile-top-bar {
    display: none;
}
body.route-page .canvas {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.route-page .canvas-inner {
    display: none !important;
}
body.route-page .cs-overlay {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    display: block !important;
}
body.route-page .cs-overlay.open,
body.route-page .cs-overlay.sliding-in {
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.route-page .cs-accent-line {
    position: sticky;
    top: 44px;
    z-index: 99;
}
body.route-page .cs-window {
    position: relative;
}
body.route-page .resume-embed {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - clamp(0px, calc((100vw - 320px) / 55 * 32), 32px) - 46px - 16px);
}

/* ── Canvas → Static Flow ── */
.canvas {
    position: static !important;
    overflow: visible !important;
    flex: 1;
}

.canvas-inner {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 14px 40px;
}

/* ── Windows → Stacked Feed ── */
.window {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    flex: 0 0 100%;
    animation: mobileWindowIn 0.5s var(--ease-entry) both;
}

/* Disable thumbnail clipping on mobile */
.window.ws-thumb {
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}
.window.ws-thumb .window-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ── Window Order ── */
#winHero { order: 1; }
#winProfile { order: 2; }
.terminal-fixture { display: none !important; }
#winProjects { order: 3; }
#winReview1 { order: 4; }
#winReview2, #winReview3, #winReview4 { display: none !important; }
#winPersonal { order: 5; }
#winPodcast { order: 6; }
#winAbout { order: 7; }

/* ── Staggered Entrance Animation ── */
@keyframes mobileWindowIn {
    from { opacity: 0; transform: scale(0.96) translateY(12px); }
    to { opacity: 1; transform: none; }
}
.canvas-inner > :nth-child(1) { animation-delay: 0.05s; }
.canvas-inner > :nth-child(2) { animation-delay: 0.1s; }
.canvas-inner > :nth-child(3) { animation-delay: 0.15s; }
.canvas-inner > :nth-child(4) { animation-delay: 0.2s; }
.canvas-inner > :nth-child(5) { animation-delay: 0.25s; }
.canvas-inner > :nth-child(6) { animation-delay: 0.3s; }
.canvas-inner > :nth-child(7) { animation-delay: 0.35s; }
.canvas-inner > :nth-child(8) { animation-delay: 0.4s; }

/* ── Traffic Lights (smaller on mobile) ── */
.traffic-light::before {
    width: 10px !important;
    height: 10px !important;
}
.window-titlebar {
    padding: 10px 14px;
    min-height: 36px;
    cursor: default !important;
}
.window-titlebar svg { display: none; }

/* ── Window Content ── */
.window-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 12px;
}


/* ── Profile Window ── */
#winProfile .window-content img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ── Case Study Overlay → Fullscreen ── */
.cs-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 500 !important;
    transform: none !important;
    background: var(--canvas-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Keep hidden by default */
    opacity: 0;
    pointer-events: none;
}
.cs-overlay.open,
.cs-overlay.sliding-in {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.cs-overlay .cs-titlebar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--canvas-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--window-border);
}

.cs-overlay .traffic-lights { display: none !important; }

/* ── Mobile Back Button ── */
.cs-mobile-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-1);
    transition: background 0.15s;
    margin-right: 8px;
    flex-shrink: 0;
}
.cs-mobile-back:active { background: var(--accent-soft); }

/* ── Mobile Hamburger (case study titlebar) ── */
.cs-mobile-hamburger {
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    margin-right: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cs-mobile-hamburger:active { background: var(--accent-soft); }
.cs-mobile-hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--text-1);
    border-radius: 1px;
}

/* ── Case Study Section Nav ── */
.cs-section-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 46px;
    z-index: 99;
    background: var(--canvas-bg);
    border-bottom: 1px solid var(--window-border);
    padding: 0 16px;
}
.cs-section-nav::-webkit-scrollbar { display: none; }

.cs-nav-item {
    font-family: 'Commit Mono', 'SF Mono', Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.02em;
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-3);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
    flex-shrink: 0;
}
.cs-nav-item.active {
    color: var(--text-1);
    border-bottom-color: var(--text-1);
}

/* ── Case Study Content Overrides ── */
.cs-window {
    overflow: visible !important;
    height: auto !important;
    padding: 0 16px;
}

.cs-carousel-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.cs-image-slot {
    flex: 0 0 85% !important;
    scroll-snap-align: start;
}

.cs-projected {
    padding: 10px 14px;
    border-left: 3px solid;
    border-radius: 8px;
    font-style: italic;
}

/* ── About Page: Carousel Sizing ── */
.about-carousel-track img {
    height: 260px !important;
}
.about-sub-images img {
    height: 120px !important;
}

/* ── Reviews Carousel ── */
.reviews-carousel {
    overflow: hidden;
    position: relative;
}
.reviews-track {
    display: flex;
    transition: transform 0.4s var(--ease-entry);
}
.review-slide {
    flex: 0 0 100%;
    min-width: 0;
}
.reviews-controls {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 4px;
}
.review-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: var(--text-3);
    opacity: 0.3;
    cursor: pointer;
    padding: 0;
    transition: width 0.2s var(--ease-entry), opacity 0.2s var(--ease-entry), background 0.2s ease;
}
.review-dot.active {
    width: 20px;
    border-radius: 3px;
    opacity: 0.7;
    background: var(--text-1);
}

/* ── About Next Actions ── */
.about-next-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 32px 0;
}
.about-next-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--title-bar);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-1);
    transition: transform var(--dur-fast) ease-out, background var(--dur-fast) ease;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.about-next-btn:active { transform: scale(0.98); background: var(--window-border); }
.about-next-btn-icon { font-size: 18px; flex-shrink: 0; }
.about-next-btn-text { flex: 1; }
.about-next-btn-label { font-size: 14px; font-weight: 600; }
.about-next-btn-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.about-next-btn-arrow { font-size: 16px; color: var(--text-3); }

/* ── Logo Scroll (mobile sizing) ── */
.logo-scroll-wrap {
    overflow: hidden;
    padding: 16px 0;
}
.logo-scroll img {
    height: 20px !important;
}

.file-row {
    flex-direction: column;
}
.file-row {
    padding: 10px 8px;
    gap: 10px;
}
.file-hero {
    height: auto;
    width: 100%;
}
.file-icon { display: none; }

.personal-item:hover .personal-accent {
    width: 3px;
    border-radius: 2px;
}
.personal-item:active .personal-accent {
    width: 48px;
    aspect-ratio: 16/9;
    align-self: center;
    border-radius: 0;
}

} /* end @media (max-width: 640px) */

/* ============ REDUCED MOTION ============ */
/* Kill movement (transforms, slide-ins, infinite loops) but preserve accessible
   cross-fades — instant snaps feel jarring even when motion is unwanted. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Preserve opacity cross-fades on the load-bearing transitions */
    .cs-overlay.sliding-in,
    .cs-overlay.closing {
        transition: opacity var(--dur-base) var(--ease-entry) !important;
        transform: none !important;
    }
    .desktop-video video { display: none; }
}