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

/* ============ FONTS ============ */
/* WOFF2 first (~53% smaller, identical glyphs); TTF kept as a fallback. */
@font-face { font-family: 'Zalando Sans'; src: url('/fonts/ZalandoSans.woff2') format('woff2'), url('/fonts/ZalandoSans.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Zalando Sans'; src: url('/fonts/ZalandoSans-Italic.woff2') format('woff2'), url('/fonts/ZalandoSans-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Zalando Sans Expanded'; src: url('/fonts/ZalandoSans-Expanded.woff2') format('woff2'), url('/fonts/ZalandoSans-Expanded.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Zalando Sans SemiExpanded'; src: url('/fonts/ZalandoSans-SemiExpanded.woff2') format('woff2'), url('/fonts/ZalandoSans-SemiExpanded.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

/* ============ TOKENS ============ */
:root {
    /* Fixed lime accent for Light/Dark. Alex Mode overrides these tokens. */
    --hue: 86;
    --accent: #7A6653;
    --accent-strong: #584637;
    --accent-soft: rgba(122, 102, 83, 0.12);
    --accent-wash: #E4D9CD;
    --selection-bg: rgba(153, 126, 99, 0.30);

    --desktop-bg: #E7E5E0;
    --wallpaper-a: hsl(var(--hue) 48% 84%);
    --wallpaper-b: hsl(calc(var(--hue) + 42) 40% 74%);
    --wallpaper-c: hsl(calc(var(--hue) - 36) 34% 66%);
    --canvas-bg: #FFFFFF;
    --canvas-dot: #D6D6D2;
    --canvas-border: rgba(0,0,0,0.08);
    --canvas-radius: 14px;
    --sidebar-bg: rgba(250,250,249,0.86);
    --sidebar-border: rgba(0,0,0,0.06);
    --sidebar-active: rgba(0,0,0,0.05);
    --social-coin: #e8e8e6;
    --social-fill-hover: rgba(0,0,0,0.10);
    --window-bg: #FFFFFF;
    --glass-window-fill: rgba(255,255,255,0.62);
    --glass-canvas-fill: rgba(255,255,255,0.45);
    /* Layered shadow: hairline ring + contact + key + ambient */
    --window-shadow:
        0 0 0 0.5px rgba(0,0,0,0.06),
        0 1px 1px rgba(0,0,0,0.03),
        0 4px 12px -2px rgba(0,0,0,0.04),
        0 12px 28px -6px rgba(0,0,0,0.05);
    --window-shadow-active:
        0 0 0 0.5px rgba(0,0,0,0.08),
        0 2px 3px rgba(0,0,0,0.05),
        0 8px 20px -4px rgba(0,0,0,0.06),
        0 24px 48px -12px rgba(0,0,0,0.08);
    --title-bar: #FAFAF9;
    --title-text: #5E5E5E;
    --tl-inactive: #dcdcdc;
    --win-radius: 28px; /* Tim's card radius — big enough for the superellipse to read */
    --text-1: #141414;
    --text-2: #555;
    --text-3: #6A6A6A;
    --focus-ring: var(--accent);
    --overlay-bg: rgba(0,0,0,0.3);
    --cmd-bg: #FFFFFF;
    --file-hover: rgba(0,0,0,0.03);
    /* Case-study logo badge stroke (badges are light in every theme, so the
       stroke stays dark-translucent and shifts tone per mode). */
    --cs-logo-stroke: rgba(20,20,20,0.16);
    --cs-logo-stroke-hover: rgba(20,20,20,0.34);
    /* SpiritBrush panel: a deep slate that contrasts the light-blue gradient
       mark in every theme (the mark stays light; the panel shifts per mode). */
    --sb-badge-bg: linear-gradient(145deg, #557782 0%, #3c555f 100%);
    --terminal-bg: #171719;
    --terminal-glass: rgba(20, 19, 18, 0.72);
    --terminal-glass-border: rgba(255, 255, 255, 0.12);
    --terminal-titlebar: rgba(255, 255, 255, 0.045);
    --terminal-text: #E5E5E5;
    --terminal-dim: #808080;
    --terminal-accent: #C5A47F;

    --font-sans: 'Zalando Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Zalando Sans Expanded', 'Zalando Sans', system-ui, sans-serif;
    --font-semi: 'Zalando Sans SemiExpanded', 'Zalando Sans', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --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;
    --dur-mode: 260ms;   /* theme (mode) crossfade — every surface fades together */
}

html[data-mode="dark"] {
    --accent: #B79F84;
    --accent-strong: #D8C3A9;
    --accent-soft: rgba(183, 159, 132, 0.14);
    --accent-wash: #342D26;
    --selection-bg: rgba(183, 159, 132, 0.30);

    --desktop-bg: #0B0C0A;
    --wallpaper-a: hsl(var(--hue) 32% 16%);
    --wallpaper-b: hsl(calc(var(--hue) + 42) 28% 10%);
    --wallpaper-c: hsl(calc(var(--hue) - 36) 24% 7%);
    --canvas-bg: #0E0E0E;
    --canvas-dot: #262626;
    --canvas-border: rgba(255,255,255,0.06);
    --sidebar-bg: rgba(17,17,17,0.82);
    --sidebar-border: rgba(255,255,255,0.05);
    --sidebar-active: rgba(255,255,255,0.06);
    --social-coin: #292929;
    --social-fill-hover: rgba(255,255,255,0.12);
    --window-bg: #181818;
    --glass-window-fill: rgba(24,24,24,0.58);
    --glass-canvas-fill: rgba(10,10,10,0.42);
    --window-shadow:
        0 0 0 0.5px rgba(255,255,255,0.05),
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 20px -4px rgba(0,0,0,0.35),
        0 20px 40px -8px rgba(0,0,0,0.3);
    --window-shadow-active:
        0 0 0 0.5px rgba(255,255,255,0.07),
        0 2px 4px rgba(0,0,0,0.4),
        0 12px 28px -4px rgba(0,0,0,0.45),
        0 32px 56px -12px rgba(0,0,0,0.4);
    --title-bar: #1A1A1A;
    --title-text: #9E9E9E;
    --tl-inactive: #565658;
    --text-1: #E8E8E8;
    --text-2: #AAA;
    --text-3: #8A8A8A;
    --overlay-bg: rgba(0,0,0,0.55);
    --cmd-bg: #1C1C1C;
    --file-hover: rgba(255,255,255,0.04);
    --cs-logo-stroke: rgba(20,20,20,0.14);
    --cs-logo-stroke-hover: rgba(20,20,20,0.30);
    --sb-badge-bg: linear-gradient(145deg, #3d555f 0%, #273b43 100%);
    --terminal-bg: #0C0C0C;
    --terminal-glass: rgba(8, 9, 8, 0.64);
    --terminal-glass-border: rgba(255, 255, 255, 0.10);
    --terminal-titlebar: rgba(255, 255, 255, 0.04);
    --terminal-accent: #C9AB86;
}

/* Alex Mode — warm paper surfaces, charcoal ink, muted earthy accent. */
html[data-mode="alex"] {
    --hue: 28;
    --accent: #8B6848;
    --accent-strong: #6B4E33;
    --accent-soft: rgba(139, 104, 72, 0.14);
    --accent-wash: #E8D8C2;
    --selection-bg: rgba(139, 104, 72, 0.30);

    --desktop-bg: #E8E0D4;
    --wallpaper-a: #EDE4D6;
    --wallpaper-b: #D9CBB8;
    --wallpaper-c: #C4B29A;
    --canvas-bg: #F7F1E8;
    --canvas-dot: #D8CFC0;
    --canvas-border: rgba(42, 33, 24, 0.10);
    --sidebar-bg: rgba(244, 236, 224, 0.90);
    --sidebar-border: rgba(42, 33, 24, 0.08);
    --sidebar-active: rgba(42, 33, 24, 0.06);
    --social-coin: #E4D8C8;
    --social-fill-hover: rgba(42, 33, 24, 0.10);
    --window-bg: #FBF6EE;
    --glass-window-fill: rgba(251, 246, 238, 0.70);
    --glass-canvas-fill: rgba(247, 241, 232, 0.52);
    --window-shadow:
        0 0 0 0.5px rgba(42, 33, 24, 0.07),
        0 1px 1px rgba(42, 33, 24, 0.04),
        0 4px 12px -2px rgba(42, 33, 24, 0.06),
        0 12px 28px -6px rgba(42, 33, 24, 0.07);
    --window-shadow-active:
        0 0 0 0.5px rgba(42, 33, 24, 0.10),
        0 2px 3px rgba(42, 33, 24, 0.06),
        0 8px 20px -4px rgba(42, 33, 24, 0.08),
        0 24px 48px -12px rgba(42, 33, 24, 0.10);
    --title-bar: #F3EBDF;
    --title-text: #6B5E50;
    --tl-inactive: #C8BDB0;
    --text-1: #2A2118;
    --text-2: #5C4F42;
    --text-3: #7A6B5A;
    --overlay-bg: rgba(42, 33, 24, 0.35);
    --cmd-bg: #FBF6EE;
    --file-hover: rgba(42, 33, 24, 0.045);
    --cs-logo-stroke: rgba(42, 33, 24, 0.16);
    --cs-logo-stroke-hover: rgba(42, 33, 24, 0.34);
    --sb-badge-bg: linear-gradient(145deg, #566e70 0%, #405254 100%);
    --terminal-bg: #241C14;
    --terminal-glass: rgba(36, 28, 20, 0.70);
    --terminal-glass-border: rgba(240, 220, 196, 0.14);
    --terminal-titlebar: rgba(240, 220, 196, 0.055);
    --terminal-text: #F0E6D8;
    --terminal-dim: #9A8B78;
    --terminal-accent: #D4A574;
}

html, body {
    height: 100%; overflow: hidden; font-family: var(--font-sans);
    background: var(--desktop-bg); color: var(--text-1);
    /* The dominant surface fades with every other surface on a theme change,
       so the palette crossfades as one instead of the page snapping under a
       lagging set of smaller fades. */
    transition: background var(--dur-mode) ease, color var(--dur-mode) ease;
    -webkit-user-select: none;
    user-select: none;
    /* Keep type stable across device rotation — iOS otherwise inflates text on
       rotate-to-landscape and never restores it on the way back. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* Selection is reserved for text the visitor can enter or edit. */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
[contenteditable="true"],
[contenteditable="plaintext-only"] {
    -webkit-user-select: text;
    user-select: text;
}
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--selection-bg); }

/* Keep scrolling available while hiding scrollbar chrome sitewide. */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 10001;
    background: var(--window-bg); color: var(--text-1);
    padding: 8px 14px; border-radius: 8px; font-size: 13px;
    transform: translateY(-150%); transition: transform 0.2s ease;
    box-shadow: var(--window-shadow-active); text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ============ WALLPAPER ============ */
.wallpaper {
    position: fixed; inset: 0; z-index: 0;
    background: var(--desktop-bg);
    transition: background 600ms ease;
}
html[data-mode="alex"] .wallpaper {
    background:
        radial-gradient(120% 90% at 12% 8%, var(--wallpaper-a), transparent 60%),
        radial-gradient(110% 100% at 88% 18%, var(--wallpaper-b), transparent 62%),
        radial-gradient(130% 110% at 50% 105%, var(--wallpaper-c), transparent 68%),
        var(--desktop-bg);
}
html[data-mode="alex"] .wallpaper::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0.28;
    mix-blend-mode: multiply;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* ============ CANVAS FRAME ============ */
.canvas-frame {
    position: fixed; inset: 22px; z-index: 2;
    display: flex;
    border-radius: var(--canvas-radius);
    overflow: hidden;
    box-shadow:
        0 0 0 1px var(--canvas-border),
        0 24px 70px -18px rgba(0,0,0,0.28);
    background: var(--canvas-bg);
    transition: background var(--dur-mode) ease;
}

/* ============ SIDEBAR ============ */
.sidebar {
    position: relative;
    width: 224px; flex: 0 0 224px;
    background: var(--sidebar-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-right: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column;
    padding: 18px 12px 12px;
    z-index: 30;
    transition: background var(--dur-mode) ease;
}
.sidebar-hint {
    font-size: 11px; color: var(--text-3);
    padding: 0 8px 14px; letter-spacing: 0.02em;
}
.hint-key {
    display: inline-block; font-family: var(--font-mono); font-size: 10px;
    background: var(--sidebar-active); border-radius: 4px; padding: 1px 5px;
}
.sidebar-nav { flex: 1; overflow-y: auto; }

.tree { font-size: 14px; user-select: none; }
.tree-folder {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px;
    font-weight: 560; cursor: pointer; color: var(--text-1);
    transition: background var(--dur-fast) ease;
}
.tree-folder:hover { background: var(--sidebar-active); }
.tree-folder.active { background: var(--accent-soft); color: var(--accent-strong); }
.folder-ico { width: 16px; height: 16px; flex: 0 0 16px; }
.tree .ico {
    position: relative; display: inline-block;
    width: 15px; height: 15px; flex: 0 0 15px;
    color: currentColor;
}
.tree .ico svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transition: opacity 0.15s ease;
}
.tree .ico .ico-fill { opacity: 0; }
.tree-item:hover .ico .ico-line,
.tree-item.active .ico .ico-line { opacity: 0; }
.tree-item:hover .ico .ico-fill,
.tree-item.active .ico .ico-fill { opacity: 1; }

/* Folder pair: closed outline at rest, open solid on hover/selection. */
.folder-ico { position: relative; }
.folder-ico .fi { position: absolute; inset: 0; display: inline-flex; }
.folder-ico .fi svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transition: opacity 0.18s ease, transform 0.22s var(--ease-entry);
}
.folder-ico .fi .ico-fill,
.folder-ico .fi-open svg { opacity: 0; }
.folder-ico .fi-open svg { transform: translateY(1px) scale(0.92); }
.tree-folder:hover:not(.active):not([aria-expanded="true"]) .fi-closed svg { opacity: 0; }
.tree-folder:hover:not(.active):not([aria-expanded="true"]) .fi-open .ico-fill {
    opacity: 1; transform: none;
}
.tree-folder.active .fi-closed svg,
.tree-folder[aria-expanded="true"] .fi-closed svg { opacity: 0; }
.tree-folder.active .fi-open .ico-fill,
.tree-folder[aria-expanded="true"] .fi-open .ico-fill { opacity: 1; transform: none; }
/* Children reveal: nested indent that slides open — height, fade, and the
   vertical margins all animate so the list breathes instead of snapping. */
.tree-children {
    margin-left: 10px;
    overflow: hidden; max-height: 400px;
    margin-top: 2px; margin-bottom: 4px;
    transition: max-height var(--dur-medium) var(--ease-entry),
                opacity var(--dur-base) ease,
                margin var(--dur-base) ease;
    opacity: 1;
}
.tree-children.collapsed { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; }
.tree-item {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px; border-radius: 8px;
    font-size: 13.5px; color: var(--text-2); cursor: pointer;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
    text-decoration: none;
}
.tree-item:hover { background: var(--sidebar-active); color: var(--text-1); }
.tree-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.tree-branch { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); opacity: 0.55; width: 10px; flex: 0 0 10px; }
.tree-item-dim { opacity: 0.5; margin-top: 8px; }
.tree > .tree-item { margin-top: 2px; padding-left: 8px; }
.tree > .tree-item:first-of-type { margin-top: 10px; }

/* Sidebar footer */
.sidebar-footer {
    padding: 12px 4px 4px;
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 8px;
}
.footer-row { display: flex; align-items: center; gap: 10px; }
.footer-row .mode-pills { flex: 1; min-width: 0; }
/* Every surface fades over --dur-mode on a theme change (see html/body,
   .sidebar, .canvas, .window, .window-titlebar) so the palette crossfades as
   one. Only the switcher icons are snapped instantly during the switch: their
   opacity crossfade otherwise caused a sub-pixel compositing snap that read as
   the icons jumping up-left before settling. Removed one frame later, so the
   hover crossfade is untouched. */
html.theme-switching .mode-pill .ico svg,
html.theme-switching .mobile-mode-pill .ico svg,
html.theme-switching .mode-pill .mode-logo img,
html.theme-switching .mobile-mode-pill .mode-logo img {
    transition-duration: 0s !important;
}
.mode-pills {
    position: relative; display: flex; gap: 0;
    background: rgba(0,0,0,0.07); border-radius: 999px; padding: 2px;
}
html[data-mode="dark"] .mode-pills { background: rgba(255,255,255,0.08); }
html[data-mode="alex"] .mode-pills { background: rgba(42, 33, 24, 0.08); }
.mode-pill {
    position: relative; z-index: 1;
    height: 28px; flex: 1; border-radius: 999px; border: none; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3); transition: color var(--dur-fast) ease;
}
.mode-pill .ico,
.mobile-mode-pill .ico {
    position: relative; display: inline-block;
    width: 15px; height: 15px; flex: 0 0 15px;
    color: currentColor;
}
.mode-pill .ico svg,
.mobile-mode-pill .ico svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transition: opacity 0.15s ease;
}
.mode-pill .ico .ico-fill,
.mobile-mode-pill .ico .ico-fill { opacity: 0; }
.mode-pill[data-mode="dark"] .ico svg,
.mobile-mode-pill[data-mode="dark"] .ico svg {
    transform: scale(0.82);
    transform-origin: center;
}
.mode-pill.active .ico .ico-line,
.mobile-mode-pill[aria-checked="true"] .ico .ico-line { opacity: 0; }
.mode-pill.active .ico .ico-fill,
.mobile-mode-pill[aria-checked="true"] .ico .ico-fill { opacity: 1; }
.mode-logo {
    position: relative; display: inline-block;
    width: 24px; height: 17px; flex: 0 0 24px;
}
.mode-logo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.15s ease;
}
.mode-logo-static { filter: none; }
.mode-logo-fill { opacity: 0; }
.mode-logo-anim { opacity: 0; filter: invert(1) brightness(0.87); }
html[data-mode="dark"] .mode-logo-static { filter: invert(1) opacity(0.9); }
html[data-mode="dark"] .mode-logo-anim { filter: none; }
html[data-mode="alex"] .mode-logo-static {
    filter: brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(900%) hue-rotate(350deg) brightness(92%);
}
html[data-mode="alex"] .mode-logo-anim {
    filter: brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(900%) hue-rotate(350deg) brightness(92%);
}
.mode-pill.active .mode-logo-line,
.mobile-mode-pill[aria-checked="true"] .mode-logo-line { opacity: 0; }
.mode-pill.active .mode-logo-fill,
.mobile-mode-pill[aria-checked="true"] .mode-logo-fill { opacity: 1; }
.mode-pill.active .mode-logo-anim,
.mobile-mode-pill[aria-checked="true"] .mode-logo-anim { opacity: 0; }
/* Hover/focus logo + icon fills only on real pointer hover. iOS sticky :hover
   after a long-press was revealing Logo-Animation.webp against the blurred
   mobile top bar and flickering the strip under the header. */
@media (hover: hover) and (pointer: fine) {
    .mode-pill:hover .ico .ico-line,
    .mobile-mode-pill:hover .ico .ico-line { opacity: 0; }
    .mode-pill:hover .ico .ico-fill,
    .mobile-mode-pill:hover .ico .ico-fill { opacity: 1; }
    .mode-pill:not(.active):hover .mode-logo-static,
    .mobile-mode-pill:not([aria-checked="true"]):hover .mode-logo-static { opacity: 0; }
    .mode-pill:not(.active):hover .mode-logo-anim,
    .mobile-mode-pill:not([aria-checked="true"]):hover .mode-logo-anim { opacity: 1; }
}
.mode-pill:focus-visible .ico .ico-line,
.mobile-mode-pill:focus-visible .ico .ico-line { opacity: 0; }
.mode-pill:focus-visible .ico .ico-fill,
.mobile-mode-pill:focus-visible .ico .ico-fill { opacity: 1; }
.mode-pill:not(.active):focus-visible .mode-logo-static,
.mobile-mode-pill:not([aria-checked="true"]):focus-visible .mode-logo-static { opacity: 0; }
.mode-pill:not(.active):focus-visible .mode-logo-anim,
.mobile-mode-pill:not([aria-checked="true"]):focus-visible .mode-logo-anim { opacity: 1; }
@media (pointer: coarse), (max-width: 860px) {
    /* Never decode/composite the animated mark on phones. */
    .mode-logo-anim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mode-logo-anim { display: none; }
    @media (hover: hover) and (pointer: fine) {
        .mode-pill:not(.active):hover .mode-logo-line,
        .mobile-mode-pill:not([aria-checked="true"]):hover .mode-logo-line { opacity: 1; }
        .mode-pill:not(.active):hover .mode-logo-fill,
        .mobile-mode-pill:not([aria-checked="true"]):hover .mode-logo-fill { opacity: 0; }
    }
    .mode-pill:not(.active):focus-visible .mode-logo-line,
    .mobile-mode-pill:not([aria-checked="true"]):focus-visible .mode-logo-line { opacity: 1; }
    .mode-pill:not(.active):focus-visible .mode-logo-fill,
    .mobile-mode-pill:not([aria-checked="true"]):focus-visible .mode-logo-fill { opacity: 0; }
}
.mode-pill.active, .mode-pill[aria-checked="true"] { color: var(--text-1); }
.mode-pill:hover:not(.active) { color: var(--text-1); }
.mode-pill-thumb {
    position: absolute; top: 2px; left: 0; width: 0; height: calc(100% - 4px);
    border-radius: 999px; background: var(--social-coin);
    /* Match the social coins beside the switcher — same surface + rim. */
    box-shadow: 0 0 0 1px var(--sidebar-border), 0 1px 3px rgba(0,0,0,0.12);
    z-index: 0; pointer-events: none;
}
.mode-pills.thumb-ready .mode-pill-thumb {
    transition: transform 0.32s cubic-bezier(.34,1.25,.5,1), width 0.32s cubic-bezier(.34,1.25,.5,1);
}
.social-deck {
    position: relative; width: 28px; height: 28px; flex: 0 0 28px;
}
.sidebar-social {
    width: 28px; height: 28px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--social-coin); color: var(--text-2);
    transition: transform 0.24s cubic-bezier(.23,1,.32,1), background var(--dur-fast) ease, color var(--dur-fast) ease;
    text-decoration: none;
}
.social-deck .sidebar-social {
    position: absolute; left: 0; bottom: 0;
    box-shadow: 0 0 0 1px var(--sidebar-border), 0 2px 6px rgba(0,0,0,0.16);
}
.sidebar-social:hover { background: var(--social-fill-hover); color: var(--text-1); }
.sidebar-social .ico { width: 14px; height: 14px; display: inline-flex; }
.sidebar-social .ico[data-ico="instagram"] { width: 16px; height: 16px; }
.sidebar-social .ico[data-ico="linkedin"] { width: 13px; height: 13px; }
.sidebar-social[href^="mailto:"] .ico { width: 15px; height: 15px; }
.social-deck .sidebar-social:nth-child(1) { transform: translateY(0) scale(1); z-index: 4; }
.social-deck .sidebar-social:nth-child(2) { transform: translateY(-5px) scale(.96); z-index: 3; }
.social-deck .sidebar-social:nth-child(3) { transform: translateY(-10px) scale(.92); z-index: 2; }
.social-deck .sidebar-social:nth-child(4) { transform: translateY(-15px) scale(.88); z-index: 1; }
.social-deck.open .sidebar-social:nth-child(1) { transform: translateY(0) scale(1); }
.social-deck.open .sidebar-social:nth-child(2) { transform: translateY(-32px) scale(1); transition-delay: .02s; }
.social-deck.open .sidebar-social:nth-child(3) { transform: translateY(-64px) scale(1); transition-delay: .04s; }
.social-deck.open .sidebar-social:nth-child(4) { transform: translateY(-96px) scale(1); transition-delay: .06s; }
.social-deck::after {
    content: ''; position: absolute; left: -8px; right: -8px; bottom: -8px;
    height: 48px; z-index: 0;
}
.social-deck.open::after { height: 140px; }

/* Case study TOC in sidebar */
.sidebar-cs-nav { display: none; flex: 1; overflow-y: auto; }
.sidebar-cs-nav.visible { display: block; }
.sidebar-cs-nav.visible ~ * .sidebar-nav { display: none; }
.sidebar-cs-back {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 560; color: var(--text-2);
    padding: 6px 8px; border-radius: 8px; cursor: pointer; margin-bottom: 12px;
}
.sidebar-cs-back:hover { background: var(--sidebar-active); color: var(--text-1); }
.sidebar-cs-back svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-cs-title {
    font-family: var(--font-display); font-size: 15px; font-weight: 640;
    padding: 6px 8px; margin-bottom: 4px; border-radius: 8px;
    color: var(--text-1); cursor: pointer;
}
.sidebar-cs-title:hover { background: var(--sidebar-active); color: var(--text-1); }
.sidebar-cs-title.is-static { cursor: default; }
.sidebar-cs-title.is-static:hover { background: transparent; }
.sidebar-cs-toc-item {
    display: block; padding: 5px 8px 5px 14px; border-radius: 8px;
    margin-bottom: 3px;
    font-size: 13px; color: var(--text-2); cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sidebar-cs-toc-item:hover { background: var(--sidebar-active); color: var(--text-1); }
.sidebar-cs-toc-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.sidebar-cs-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.sidebar-cs-link .ico-external {
    flex: 0 0 auto;
}

/* ============ CANVAS ============ */
.canvas {
    position: relative; flex: 1; overflow: hidden;
    background-color: var(--canvas-bg);
    background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
    background-size: 22px 22px;
    transition: background-color 260ms ease;
}
.canvas-inner {
    position: absolute; inset: 0;
    transition: left var(--dur-medium) var(--ease-entry),
                top var(--dur-medium) var(--ease-entry);
}
.canvas.panning, .canvas.panning * { cursor: grabbing !important; }

/* ============ WINDOWS ============ */
.window {
    position: absolute;
    contain: layout;
    background: var(--window-bg);
    border-radius: var(--win-radius);
    box-shadow: var(--window-shadow);
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, transform var(--dur-slow) var(--ease-entry),
                left var(--dur-slow) var(--ease-entry), top var(--dur-slow) var(--ease-entry),
                width var(--dur-slow) var(--ease-entry), height var(--dur-slow) var(--ease-entry),
                box-shadow var(--dur-base) ease, background var(--dur-mode) ease;
    /* Flat, like Tim's cards: preserve-3d put the backdrop-filtered glass in a
       3D rendering context, where Chromium's re-filtering artifacts show up
       during canvas pans. The small tilt angles don't need a 3D context. */
}
/* Tahoe-style continuous corners (Chromium 139+; elsewhere it degrades to the
   normal circular border-radius). superellipse(1.7) ≈ Apple's continuous
   curve — kills the "hard edge" where a circular arc meets the straight side. */
.window, .canvas-frame, .cmd-box { corner-shape: superellipse(1.7); }
.window-titlebar, .window-content, .window::after,
.ws-icon-badge, .profile-window img { corner-shape: inherit; }

.window.visible { opacity: 1; visibility: visible; }
.window.dragging { transition: box-shadow var(--dur-base) ease; }
.window.focused { box-shadow: var(--window-shadow-active); }
.window.window-attention {
    animation: window-attention-shake 400ms ease-out;
}
.window.window-attention::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    background-image: none; /* suppress the hover sheen sharing this ::after */
    border: 2px solid var(--accent);
    border-radius: inherit;
    box-shadow:
        0 0 0 2px var(--accent-soft),
        0 0 16px var(--accent-soft);
    opacity: 0;
    pointer-events: none;
    animation: window-attention-stroke 480ms ease-out;
}
/* Sway + counter-rotation in phase: the top edge travels further than the
   base, so the card reads as wagging on a hinge at its bottom-center
   (timgailey.com's windowJitter, verbatim). */
@keyframes window-attention-shake {
    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); }
}
@keyframes window-attention-stroke {
    0%, 100% { opacity: 0; }
    18%, 68% { opacity: 1; }
}
.window.closing { opacity: 0; transform: scale(0.92); pointer-events: none; }
.window.minimized .window-content { display: none; }
.window.minimized { height: auto !important; }

@media (prefers-reduced-motion: reduce) {
    .window.window-attention { animation: none; }
    .window.window-attention::after {
        animation: window-attention-stroke 480ms ease-out;
    }
}

.window-titlebar {
    display: flex; align-items: center; gap: 10px;
    height: 40px;
    padding: 0 14px;
    background: var(--title-bar);
    border-bottom: 1px solid var(--canvas-border);
    border-radius: var(--win-radius) var(--win-radius) 0 0;
    cursor: grab; user-select: none;
    transition: background var(--dur-mode) ease;
}
.window-titlebar:active { cursor: grabbing; }
.window.minimized .window-titlebar { border-bottom: none; border-radius: var(--win-radius); }
.window-title {
    flex: 1; text-align: center; margin-right: 60px;
    font-size: 12px; font-weight: 500; color: var(--title-text);
    letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Each light is a roomy 20x24 hit area; the visible 12px dot is drawn by
   ::before, so targets grow without the dots swelling (Tim's pattern). */
.traffic-lights {
    display: flex; align-items: center; gap: 0;
    height: 24px; flex: 0 0 auto;
}
.traffic-light {
    position: relative;
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 24px; flex: 0 0 20px;
    border-radius: 0; border: none; padding: 0; margin: 0;
    background: transparent;
    display: block; line-height: 0;
}
.traffic-light::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 12px; height: 12px; border-radius: 999px;
    background: var(--tl-inactive);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    transition: background var(--dur-fast) ease, transform 0.15s ease;
}
.traffic-light:hover::before { transform: translate(-50%, -50%) scale(1.15); }
.traffic-light svg {
    position: absolute; left: 50%; top: 50%; margin: 0;
    width: 6px; height: 6px; stroke: rgba(0,0,0,0.5); stroke-width: 1.2; fill: none;
    transform: translate(-50%, -50%);
    transform-origin: center;
    opacity: 0; transition: opacity var(--dur-fast) ease;
    pointer-events: none;
}
.window:hover .tl-red::before, .cs-titlebar .tl-red::before { background: #FF5F57; }
.window:hover .tl-yellow::before, .cs-titlebar .tl-yellow::before { background: #FEBC2E; }
.window:hover .tl-green::before, .cs-titlebar .tl-green::before { background: #28C840; }
.window:hover .traffic-light svg, .cs-titlebar .traffic-lights:hover svg { opacity: 1; }
.traffic-light[aria-disabled="true"] { cursor: default; }
.traffic-light[aria-disabled="true"]:hover::before { transform: translate(-50%, -50%) scale(1); }
.window:hover .traffic-light[aria-disabled="true"]::before { background: var(--tl-inactive); }

.window-content { padding: 22px; }

/* Hover tilt (desktop only, disabled while dragging). The fast transform
   transition lives on .tilt — added on hover, removed after leave — so it never
   overrides the slower entry/workspace transforms. Left/top/width/height keep
   their slow easing in case a workspace switch lands mid-hover. */
.window.tilt {
    transition: opacity 0.4s ease, transform 0.14s ease-out,
                left var(--dur-slow) var(--ease-entry), top var(--dur-slow) var(--ease-entry),
                width var(--dur-slow) var(--ease-entry), height var(--dur-slow) var(--ease-entry),
                box-shadow var(--dur-base) ease;
}
/* Faint top-edge sheen — the card catching light as it tilts. Inert until hover. */
.window::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; z-index: 2;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 28%);
    transition: opacity 0.2s ease;
}
@media (min-width: 861px) {
    /* Flat perspective keeps foreshortening shallow so the small-angle tilt
       barely re-samples the text bitmap = stays sharp. */
    .canvas-inner { perspective: 1500px; }
    .window:hover { box-shadow: var(--window-shadow-active); }
    .window:hover::after { opacity: 1; }

    /* Frosted glass cards (desktop only — backdrop-filter is too costly for
       phone GPUs, so mobile keeps solid surfaces). The glass only reads if the
       hue wallpaper is visible beneath the cards, so the frame and canvas go
       translucent here and let it through. The terminal keeps its own dark
       fill. Titlebars share the frosted surface instead of a second fill. */
    .canvas-frame { background: transparent; }
    .canvas { background-color: var(--glass-canvas-fill); }
    .window:not(.terminal-window) {
        background: var(--glass-window-fill);
        -webkit-backdrop-filter: blur(28px) saturate(165%);
        backdrop-filter: blur(28px) saturate(165%);
    }
    .window:not(.terminal-window) .window-titlebar { background: transparent; }
}

/* ============ HERO WINDOW ============ */
.hero-window .window-content { padding: 30px 22px 22px; }
.hero-name {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.6vw, 46px); font-weight: 750; letter-spacing: -0.015em;
    line-height: 1.05; margin-bottom: 8px;
    white-space: nowrap;
}
.hero-title { font-family: var(--font-semi); font-size: 16.5px; color: var(--accent-strong); font-weight: 520; margin-bottom: 16px; }
.hero-bio { font-size: 16px; line-height: 1.6; color: var(--text-1); margin-bottom: 12px; }
.hero-bio a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.hero-meta { font-size: 14px; line-height: 1.6; color: var(--text-3); margin-bottom: 20px; }
.hero-meta a {
    color: var(--text-1);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--text-3);
}
.hero-meta a:hover { text-decoration-color: var(--text-1); }
.hero-cta-row { display: flex; gap: 10px; }
.cta-btn {
    border-radius: 12px; padding: 10px 18px; font-size: 13.5px; font-weight: 600;
    border: 1px solid transparent;
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.cta-primary { background: var(--text-1); color: var(--canvas-bg); }
.cta-primary:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.cta-secondary { background: transparent; color: var(--text-1); border-color: var(--canvas-border); }
.cta-secondary:hover { background: var(--accent-soft); }

/* ============ PROFILE WINDOW ============ */
.window.profile-window {
    overflow: hidden;
    background-color: var(--glass-window-fill);
    background-image: linear-gradient(145deg, rgba(255,255,255,0.07), transparent 44%);
    border: 1px solid var(--canvas-border);
    -webkit-backdrop-filter: blur(30px) saturate(165%);
    backdrop-filter: blur(30px) saturate(165%);
}
.window.profile-window .window-titlebar {
    background: transparent;
    border-bottom-color: var(--canvas-border);
}
.profile-window .window-title { color: var(--title-text); }
.profile-window .window-content { padding: 0; font-size: 0; }
.profile-window img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 var(--win-radius) var(--win-radius); }
.profile-window .window-content { height: calc(100% - 40px); }

/* ============ ABOUT WINDOW ============ */
.about-window .hero-bio { font-weight: 520; }
.about-teaser { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.about-teaser a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ WORK WINDOW (file list) ============ */
.work-window .window-content {
    padding: 10px; overflow-y: auto; max-height: 100%;
}
/* Home / PickHue clipped preview: no scrollbar, just a cut-off slice. */
.canvas[data-ws="home"] #winWork .window-content,
.canvas[data-ws="pickhue"] #winWork .window-content,
.work-window.ws-thumb .window-content {
    overflow: hidden;
    scrollbar-width: none;
}
.canvas[data-ws="pickhue"] #winWork {
    overflow: hidden;
}
.canvas[data-ws="pickhue"] #winWork .window-content {
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
}
.canvas[data-ws="home"] #winWork .window-content::-webkit-scrollbar,
.canvas[data-ws="pickhue"] #winWork .window-content::-webkit-scrollbar,
.work-window.ws-thumb .window-content::-webkit-scrollbar { display: none; }
/* Preview rows are display-only: the window owns hover/click/tilt, not the
   individual magnetic case-study rows. */
.work-window.work-preview { cursor: pointer; }
.work-window.work-preview .file-row {
    pointer-events: none;
    transform: none !important;
}
.file-list { display: flex; flex-direction: column; gap: 4px; }
.file-row {
    display: flex; gap: 14px; padding: 12px; border-radius: 12px;
    cursor: pointer; transition: background var(--dur-fast) ease;
}
.file-row:hover { background: var(--file-hover); }
.file-hero {
    flex: 0 0 92px; height: 68px; border-radius: 10px; overflow: hidden;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
}
.file-hero img { width: 100%; height: 100%; object-fit: cover; }
.file-hero-pickhue {
    background: linear-gradient(145deg, #78A94E 0%, #4E752F 100%);
}
.file-hero-pickhue img { width: 22px; height: 33px; object-fit: contain; }
.file-hero-collectors { background: #1d1a16; color: #d4b26a; }
.file-hero-icon { width: 30px; height: 30px; }
.file-hero-spiritbrush {
    background: var(--sb-badge-bg);
}
.file-hero-spiritbrush img {
    width: 48px; height: 48px; object-fit: contain;
    filter: brightness(0) invert(1);
}
.file-hero-brightbook {
    background: linear-gradient(145deg, #4D94B8 0%, #356B88 100%);
}
.file-hero-brightbook img {
    width: 48px; height: auto; object-fit: contain;
    filter: brightness(0) invert(1);
}
.file-body { flex: 1; min-width: 0; }
.file-name { font-size: 15px; font-weight: 620; line-height: 1.35; margin-bottom: 6px; }
.file-soon {
    display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-3); background: var(--sidebar-active);
    border-radius: 999px; padding: 2px 8px; vertical-align: 2px; margin-left: 4px;
}
.file-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.file-tag {
    font-size: 11px; font-weight: 560; color: var(--text-2);
    background: var(--sidebar-active); border-radius: 999px; padding: 2px 8px;
}
.file-summary { font-size: 13.5px; line-height: 1.55; color: var(--text-3); }

/* ============ PICKHUE SWATCH MODAL WINDOW ============ */
#winPickHue .window-content {
    overflow: hidden;
    border-radius: 0 0 var(--win-radius) var(--win-radius);
}
.ph-swatch-demo {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--window-bg);
}
.ph-swatch-toast {
    position: absolute;
    left: 50%;
    width: 220px;
    height: 54px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 15px;
    border: 1px solid rgba(20, 20, 20, 0.14);
    background: rgba(255, 255, 255, 0.97);
    color: #141414;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    transform-origin: center;
}
.ph-swatch-toast strong { font-weight: 650; }
.ph-swatch-toast-dot {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 8px;
    border: 1px solid rgba(20, 20, 20, 0.16);
}
.ph-swatch-toast-top {
    top: 49px;
    z-index: 3;
    transform: translateX(-50%) rotate(-7deg);
}
.ph-swatch-toast-middle {
    top: 82px;
    z-index: 2;
    transform: translateX(-50%);
}
.ph-swatch-toast-bottom {
    top: 115px;
    z-index: 1;
    transform: translateX(-50%) rotate(7deg);
}
html[data-mode="dark"] .ph-swatch-demo { background: #111210; }
html[data-mode="dark"] .ph-swatch-toast {
    background: rgba(20, 20, 20, 0.96);
    color: #F6F6F3;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.025);
}
html[data-mode="dark"] .ph-swatch-toast-dot {
    border-color: rgba(255, 255, 255, 0.16);
}
html[data-mode="alex"] .ph-swatch-demo { background: #F3EADF; }
html[data-mode="alex"] .ph-swatch-toast {
    background: rgba(251, 246, 238, 0.97);
    color: #2A2118;
    border-color: rgba(42, 33, 24, 0.14);
    box-shadow: 0 16px 40px rgba(72, 52, 34, 0.16);
}
html[data-mode="alex"] .ph-swatch-toast-dot {
    border-color: rgba(42, 33, 24, 0.16);
}
.ph-body {
    padding: 16px 22px 20px;
    border-top: 1px solid var(--canvas-border);
    background: var(--window-bg);
}
.ph-name {
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}
.ph-desc {
    margin-bottom: 12px;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.55;
}
.ph-cta-row { display: flex; align-items: center; gap: 8px; }
.ph-cta {
    min-height: 36px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1;
    text-decoration: none;
}
.ph-cta .ico {
    display: inline-flex;
    width: 14px;
    height: 14px;
}
.ico-external {
    display: inline-flex;
    width: 12px;
    height: 12px;
    color: currentColor;
}
.ico-external svg { width: 100%; height: 100%; display: block; }

/* ============ MUSIC WINDOW ============ */
.music-window .window-content { padding: 16px 18px 14px; }
.music-player { display: flex; flex-direction: column; gap: 12px; }
.music-top { display: flex; align-items: center; gap: 12px; }
/* The wave block sits where the album cover would — bars ride the analyser
   when CORS allows (JS sets heights inline), else fall back to the CSS loop. */
.music-wave {
    flex: 0 0 48px; width: 48px; height: 48px; padding: 8px 10px; border-radius: 12px;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center; gap: 2px;
    overflow: hidden;
}
.music-wave span {
    width: 4px; border-radius: 2px; background: var(--accent);
    height: 6px; transition: height 100ms ease;
}
.music-wave.playing:not(.live) span { animation: bars 0.9s ease-in-out infinite; }
/* Pulse from the middle outward: center, inner pair, then outer pair. */
.music-wave.playing:not(.live) span:nth-child(3) { animation-delay: 0s; }
.music-wave.playing:not(.live) span:nth-child(2),
.music-wave.playing:not(.live) span:nth-child(4) { animation-delay: 0.12s; }
.music-wave.playing:not(.live) span:nth-child(1),
.music-wave.playing:not(.live) span:nth-child(5) { animation-delay: 0.24s; }
@keyframes bars { 0%,100% { height: 6px; } 50% { height: 30px; } }
.music-meta { flex: 1; min-width: 0; }
.music-track { font-size: 13px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-artist { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-progress { display: flex; align-items: center; gap: 8px; }
.music-time {
    flex: 0 0 auto; min-width: 30px;
    font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--text-3);
}
.music-time-rem { text-align: right; }
.music-seek {
    flex: 1; height: 4px; border-radius: 999px;
    background: var(--sidebar-active); cursor: pointer; position: relative;
}
.music-seek-fill {
    position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
    border-radius: 999px; background: var(--accent);
}
.music-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.music-play {
    width: 40px; height: 40px; border-radius: 999px; border: none;
    background: var(--text-1); color: var(--canvas-bg);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
    flex: 0 0 auto; cursor: pointer;
}
.music-play:hover { transform: scale(1.06); }
.music-skip {
    width: 30px; height: 30px; border-radius: 999px; border: none;
    background: transparent; color: var(--text-2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease;
    flex: 0 0 auto; cursor: pointer;
}
.music-skip:hover { background: var(--sidebar-active); }
.music-skip:disabled { opacity: 0.35; cursor: default; background: transparent; }
.music-play .ico { width: 16px; height: 16px; display: inline-flex; }
.music-skip .ico { width: 15px; height: 15px; display: inline-flex; }
/* Four-state volume control (max → mid → low → muted), kept as one quiet icon
   at the left edge so the transport controls remain visually centered. */
.music-controls { position: relative; }
.music-vol {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center;
}
.music-vol-btn.is-muted { color: var(--text-3); opacity: .72; }

/* ============ ZINE WINDOW ============ */
.zine-link {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 0;
}
/* Cropped into the center of the mockup so the zines are the subject. */
.zine-media { display: block; height: 216px; overflow: hidden; }
.zine-media img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: 50% 52%;
    transform: scale(1.20); transform-origin: 50% 50%;
}
.zine-caption {
    display: block; font-size: 12px; line-height: 1.45; color: var(--text-2);
    padding: 12px 40px 14px 16px;
}
.zine-external {
    position: absolute;
    right: 14px;
    bottom: 15px;
    width: 14px;
    height: 14px;
    color: var(--text-3);
    pointer-events: none;
}
.zine-link:hover .zine-caption { color: var(--text-1); }
.zine-link:hover .zine-external { color: var(--text-1); }

/* ============ TERMINAL ============ */
.terminal-window {
    background: var(--terminal-bg);
    overflow: hidden;
    border: 1px solid var(--terminal-glass-border);
}
.terminal-window .window-titlebar {
    background: var(--terminal-titlebar);
    border-bottom-color: rgba(255,255,255,0.06);
}
.terminal-window .window-title { color: #9a9a9a; }
@media (min-width: 861px) {
    .terminal-window {
        background-color: var(--terminal-glass);
        background-image: linear-gradient(145deg, rgba(255,255,255,0.055), transparent 42%);
        -webkit-backdrop-filter: blur(30px) saturate(145%);
        backdrop-filter: blur(30px) saturate(145%);
    }
}
.terminal-window .window-content {
    padding: 14px 16px 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
    color: var(--terminal-text); overflow: hidden;
    height: 340px;
    display: flex; flex-direction: column;
    cursor: text;
}
.term-output {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.term-output::-webkit-scrollbar { display: none; }
.term-section { margin-bottom: 10px; white-space: pre-wrap; word-break: break-word; }
.term-prompt { color: var(--terminal-accent); font-weight: 600; }
.term-cmd { color: var(--terminal-text); }
.term-dim { color: var(--terminal-dim); }
.term-cmd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 12px; margin-top: 4px; }
.term-cmd-item { color: var(--terminal-accent); }
.term-key {
    display: inline-block; background: rgba(255,255,255,0.09); border-radius: 4px;
    padding: 0 6px; font-size: 11px; color: var(--terminal-text);
}
.term-shortcut-row { display: flex; align-items: baseline; gap: 8px; }
.term-label { color: var(--terminal-dim); }
.term-input-line {
    display: flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 14px;
}
.term-input-field {
    flex: 1; background: transparent; border: none; outline: none;
    font-family: var(--font-mono); font-size: 12px; color: var(--terminal-text);
    caret-color: var(--terminal-accent);
    resize: none; overflow: hidden; height: 1.7em; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word;
    /* contenteditable: kill browser chrome that looks like a form field */
    -webkit-user-modify: read-write-plaintext-only;
}
.term-input-field:empty::before {
    content: attr(data-placeholder);
    color: #5a5a5a;
    pointer-events: none;
}
.term-input-field::placeholder { color: #5a5a5a; }

/* ============ WORKSPACE PEEK / LIVE THUMBNAILS ============ */
.ws-icon-badge {
    position: absolute; inset: 0; border-radius: var(--win-radius);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--window-bg);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) ease;
    overflow: hidden;
    z-index: 5;
}
.ws-icon-badge svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--text-2); }
.ws-icon-name {
    font-size: 12.5px; font-weight: 600; color: var(--text-1); white-space: nowrap;
    max-width: 0; opacity: 0; overflow: hidden;
    transition: max-width var(--dur-medium) var(--ease-entry), opacity var(--dur-base) ease;
}
/* Home clipped Work preview: still a real card slice, contents inert. */
.window.ws-thumb { overflow: hidden; }
.window.ws-thumb .window-content { pointer-events: none; }

/* Non-home: every demoted card becomes a live miniature tab (Tim's thumbs mode).
   Source box stays ~340×238; CSS scales to ~0.28 so type stays vector-sharp. */
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.ws-thumb {
    width: 340px !important;
    height: 238px !important;
    border-radius: var(--win-radius) !important;
    transform: scale(0.28) !important;
    transform-origin: top left;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s var(--ease-entry), box-shadow var(--dur-base) ease;
}
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.visible.ws-thumb:hover,
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.visible.ws-thumb:focus-visible {
    transform: scale(0.3) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important;
    outline: none;
}
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.ws-thumb .window-titlebar,
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.ws-thumb .window-content {
    pointer-events: none;
    visibility: visible;
}
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.ws-thumb .ws-icon-badge {
    display: none;
}
.canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.ws-prominent {
    transition: left var(--dur-slow) var(--ease-entry), width var(--dur-slow) var(--ease-entry),
                top var(--dur-slow) var(--ease-entry), height var(--dur-slow) var(--ease-entry),
                opacity 0.35s var(--ease-entry), transform 0.35s var(--ease-entry),
                box-shadow var(--dur-base) ease;
}
@media (prefers-reduced-motion: reduce) {
    .canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.ws-thumb,
    .canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.visible.ws-thumb:hover,
    .canvas[data-peek="thumbs"]:not([data-ws="home"]) .window.visible.ws-thumb:focus-visible {
        transition: none;
        transform: scale(0.28) !important;
    }
}
/* Omitted from the active workspace layout */
.window.ws-hidden {
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transform: none !important;
}

/* Work workspace: work window becomes prominent full-height */
.canvas[data-ws="work"] #winWork { height: calc(100% - 48px); }
.canvas[data-ws="work"] #winWork .window-content { max-height: calc(100% - 40px); }
/* PickHue stage: work frame is a home-sized preview that enters full Work */
.canvas[data-ws="pickhue"] #winWork { cursor: pointer; }

/* ============ DRAW TOOL ============ */
.draw-layer {
    position: fixed; inset: 0; z-index: 5; pointer-events: none;
}
.draw-layer.active { pointer-events: auto; cursor: crosshair; }
.draw-layer path, .draw-layer line, .draw-layer rect, .draw-layer circle, .draw-layer ellipse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.draw-toolbar {
    position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    background: var(--cmd-bg); border: 1px solid var(--canvas-border);
    border-radius: 999px; padding: 7px 12px;
    box-shadow: var(--window-shadow-active);
    z-index: 60;
    transition: transform var(--dur-medium) var(--ease-entry), opacity var(--dur-base) ease;
}
.draw-toolbar.tucked { transform: translate(-50%, 90px); opacity: 0; pointer-events: none; }
.draw-tool {
    width: 30px; height: 30px; border-radius: 999px; border: none; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; color: var(--text-2);
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.draw-tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.draw-tool:hover { background: var(--sidebar-active); }
.draw-tool.active { background: var(--accent-soft); color: var(--accent-strong); }
.draw-sep { width: 1px; height: 18px; background: var(--canvas-border); }
.draw-colors { display: flex; gap: 5px; }
.draw-color {
    width: 18px; height: 18px; border-radius: 999px; border: 2px solid transparent;
    transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.draw-color.active { border-color: var(--text-1); transform: scale(1.12); }
.draw-size {
    border: none; background: transparent; font-family: var(--font-mono);
    font-size: 11px; color: var(--text-2); border-radius: 6px; padding: 4px 6px;
}
.draw-size:hover { background: var(--sidebar-active); }
/* ============ COMMAND PALETTE ============ */
.cmd-overlay, .shortcuts-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: var(--overlay-bg);
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
}
.cmd-overlay.open, .shortcuts-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.cmd-box {
    width: min(560px, calc(100vw - 40px)); margin-top: 14vh;
    background: var(--cmd-bg); border: 1px solid var(--canvas-border);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 80px -16px rgba(0,0,0,0.4);
    transform: translateY(8px) scale(0.98);
    transition: transform var(--dur-base) var(--ease-entry);
}
.cmd-overlay.open .cmd-box { transform: none; }
.cmd-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--canvas-border); }
.cmd-slash { font-family: var(--font-mono); color: var(--accent-strong); font-weight: 600; }
.cmd-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--text-1); }
.cmd-input::placeholder { color: var(--text-3); }
.cmd-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); background: var(--sidebar-active); border-radius: 4px; padding: 2px 6px; }
.cmd-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmd-result {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.cmd-result:hover, .cmd-result.active { background: var(--accent-soft); }
.cmd-result-icon { width: 17px; height: 17px; display: inline-flex; color: var(--text-2); flex: 0 0 17px; }
.cmd-result-icon svg { width: 100%; height: 100%; }
.cmd-result-text { flex: 1; min-width: 0; }
.cmd-result-label { font-size: 13.5px; font-weight: 560; }
.cmd-result-desc { font-size: 11.5px; color: var(--text-3); }
.cmd-result-key { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); background: var(--sidebar-active); border-radius: 4px; padding: 2px 7px; }
.cmd-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-3); }

/* ============ SHORTCUTS OVERLAY ============ */
.shortcuts-box {
    width: min(420px, calc(100vw - 40px)); margin-top: 10vh;
    max-height: 76vh; overflow-y: auto;
    background: var(--cmd-bg); border: 1px solid var(--canvas-border);
    border-radius: 16px; padding: 22px;
    box-shadow: 0 30px 80px -16px rgba(0,0,0,0.4);
    transform: translateY(8px) scale(0.98);
    transition: transform var(--dur-base) var(--ease-entry);
}
.shortcuts-overlay.open .shortcuts-box { transform: none; }
.shortcuts-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.shortcut-group-label { font-size: 10.5px; font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 14px 0 6px; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.shortcut-label { font-size: 13.5px; color: var(--text-2); }
.sk {
    display: inline-block; min-width: 24px; text-align: center;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-1);
    background: var(--sidebar-active); border: 1px solid var(--canvas-border);
    border-radius: 6px; padding: 2px 7px;
}

/* ============ CASE STUDY SYSTEM ============ */
.cs-tab-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 260;
    display: none; height: 40px; padding: 8px 12px 0;
    background: transparent;
}
.cs-tab-bar.visible { display: block; }
.cs-tab-bar-inner { display: flex; gap: 4px; align-items: flex-end; height: 32px; }
.cs-tab {
    display: flex; align-items: center; gap: 8px;
    background: var(--sidebar-active);
    border: 1px solid var(--canvas-border); border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 7px 12px; max-width: 200px; min-width: 0;
    font-size: 12px; font-weight: 560; color: var(--text-2);
    cursor: pointer; position: relative;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cs-tab-bar.canvas-active .cs-tab {
    border-bottom: 1px solid var(--canvas-border);
    border-radius: 10px;
}
.cs-tab.active { background: var(--window-bg); color: var(--text-1); box-shadow: inset 0 2px 0 var(--tab-color, var(--accent)); }
.cs-tab-fav {
    width: 8px; height: 8px; flex: 0 0 auto;
    background: var(--tab-color, var(--accent));
    border-radius: 2.5px;
    transform: translateY(0.5px);
}
.cs-tab-canvas .cs-tab-fav { transform: translateY(0px); }
.cs-tab-label { min-width: 0; overflow: hidden; }
.cs-tab-name { white-space: nowrap; }
.cs-tab-close {
    border: none; background: transparent; color: var(--text-3);
    width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1; padding: 0;
}
.cs-tab-close:hover { background: var(--sidebar-active); color: var(--text-1); }
/* Reordering: the dragged tab tracks the pointer 1:1 while its neighbours ease
   aside. Driven purely by element geometry, so it behaves identically in both
   bar states — attached (a case study is open) and .canvas-active pills. */
.cs-tab:not(.cs-tab-canvas) { touch-action: pan-y; }
.cs-tab-shift { transition: transform var(--dur-base) var(--ease-entry); }
.cs-tab-dragging { z-index: 5; cursor: grabbing; transition: none; }

.cs-overlay {
    position: absolute; inset: 0; z-index: 250;
    background: var(--window-bg);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity var(--dur-medium) ease, transform var(--dur-medium) var(--ease-entry), visibility 0s linear var(--dur-medium);
}
.cs-overlay.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cs-tab-bar.visible ~ .cs-overlay { inset: 40px 0 0; border-radius: 0; box-shadow: none; }
.cs-titlebar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; flex: 0 0 auto;
    border-bottom: 1px solid var(--canvas-border);
}
.cs-titlebar-name { flex: 1; text-align: center; font-size: 12px; font-weight: 500; color: var(--title-text); }
.cs-accent-line { display: none; }
/* No CSS scroll-behavior: smooth here — it fights the wheel handler's manual
   scrollTop updates and makes the case study feel unscrollable (each tick
   restarts a smooth animation from a barely-moved spot). TOC jumps pass
   behavior:'smooth' to scrollIntoView explicitly, so they stay smooth. */
.cs-window { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.cs-overlay { overflow: hidden; }

.cs-lightbox {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.82);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
    cursor: zoom-out;
}
.cs-lightbox.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.cs-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; }
.cs-lightbox.asset-preview img {
    box-sizing: content-box;
    max-width: min(76vw, 980px);
    max-height: 72vh;
    padding: clamp(24px, 4vw, 64px);
    /* Brand marks are authored for a light ground; keep the preview plate light
       in every theme so dark/colored SVGs stay readable. */
    background: #FFFEFC;
    border: 1px solid rgba(20, 20, 20, 0.10);
    border-radius: 18px;
    box-shadow: var(--window-shadow-active);
    filter: none;
}
html[data-mode="dark"] .cs-lightbox.asset-preview img {
    /* Do not invert — the plate is light; keep original mark colors for contrast. */
    filter: none;
}

/* ============ CASE STUDY CONTENT ============ */
.cs-content {
    max-width: 860px; margin: 0 auto;
    /* The large lower runway lets short final sections reach the reading line,
       so their outline links and active states work instead of clamping early. */
    padding: 56px 32px max(96px, calc(100vh - 260px));
}
.cs-content.cs-pickhue,
.cs-content.cs-privacy,
.cs-content.cs-spiritbrush,
.cs-content.cs-brightbook { padding-bottom: 44px; }
.cs-pickhue .cs-section:last-child,
.cs-privacy .cs-section:last-child,
.cs-spiritbrush .cs-section:last-child,
.cs-brightbook .cs-section:last-child { margin-bottom: 0; }
.cs-kicker {
    font-size: 11px; font-weight: 640; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 10px;
}
.cs-hero h1, .cs-content > h1, .cs-soon h1 {
    font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px);
    font-weight: 750; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 14px;
}
.cs-hero-subtitle { font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 620px; }
.cs-hero-subtitle a { text-decoration: underline; text-underline-offset: 3px; }
.cs-hero { margin-bottom: 48px; }
.cs-section { margin-bottom: 56px; scroll-margin-top: 24px; }
.cs-section h2 {
    font-family: var(--font-semi); font-size: 21px; font-weight: 680;
    margin-bottom: 14px; letter-spacing: -0.005em;
}
.cs-section p { font-size: 14.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 12px; max-width: 640px; }
.cs-section img { border-radius: 12px; cursor: zoom-in; }
.cs-placeholder {
    border: 1px dashed var(--canvas-border); border-radius: 12px;
    padding: 24px; color: var(--text-3) !important; font-style: italic;
}

/* Bento grids — the old alexwil.com about-grid DNA, folded into case studies */
.cs-hero-logo { width: 60px; height: 60px; margin-bottom: 18px; }
.cs-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.cs-brand-preview {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cs-brand-preview .cs-hero { margin-bottom: 22px; }
.cs-brand-logo {
    width: 112px;
    height: 112px;
    margin-bottom: 24px;
    border-radius: 26px;
    corner-shape: superellipse(1.7); /* squircle, matching the window corners */
    border: 3px solid var(--cs-logo-stroke);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.32s ease;
}
/* Subtle stroke intensify on hover (desktop) / tap (mobile), à la pickhue.site. */
.cs-brand-logo:hover,
.cs-brand-logo:active { border-color: var(--cs-logo-stroke-hover); }
.cs-brand-logo img { display: block; max-width: 74%; max-height: 74%; object-fit: contain; }
/* Deep slate panel (theme-responsive) so the light-blue gradient mark always
   reads. The gradient fills the mark itself (via mask), leaving the shared
   sb-logo-mark.svg used by the preview tile untouched. The panel is dark in
   every theme, so this badge's stroke flips light to stay visible. */
.cs-brand-logo-spiritbrush {
    background: var(--sb-badge-bg);
    /* White edge needs more opacity than the dark strokes to read as crisply
       on the mid-slate panel (semi-transparent white otherwise looks hazy). */
    --cs-logo-stroke: rgba(255,255,255,0.5);
    --cs-logo-stroke-hover: rgba(255,255,255,0.72);
}
.cs-brand-mark-spiritbrush {
    display: block;
    width: 78px; height: 78px;
    background: #FFFFFF;
    -webkit-mask: url(/assets/sb-logo-mark.svg) center / contain no-repeat;
    mask: url(/assets/sb-logo-mark.svg) center / contain no-repeat;
}
/* PickHue's mark is a self-contained dark app-icon; center it on the same
   green used by its Work preview tile (.file-hero-pickhue). */
.cs-brand-logo-pickhue { background: hsl(86 76% 88%); }
.cs-brand-logo-pickhue img { width: 66px; height: 66px; }
/* Square box (was stretched to 176px wide); the wide wordmark centers inside. */
.cs-brand-logo-brightbook {
    background: linear-gradient(145deg, #f3faff 0%, #e0f2ff 100%);
}
/* Smaller, with a small downward nudge: the mark is top-heavy (wide at the top,
   converging to a point at the bottom), so geometric centering reads as too high. */
.cs-brand-logo-brightbook img { width: 60px; height: auto; transform: translateY(3px); }
.cs-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.cs-asset-card {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 30px 52px;
    background: #FFFEFC;
    border: 1px solid rgba(20,20,20,0.09);
    border-radius: 16px;
}
.cs-asset-card.cs-asset-wide { grid-column: span 2; min-height: 260px; }
.cs-asset-card img {
    display: block;
    max-width: 72%;
    max-height: 155px;
    object-fit: contain;
}
.cs-asset-logotype img { max-width: 74%; }
.cs-asset-palette img { max-height: 165px; }
.cs-asset-type img { width: min(440px, 82%); max-width: none; }
.cs-asset-grid-spiritbrush {
    grid-template-columns: minmax(0, 1fr) minmax(96px, .44fr) minmax(0, 1.78fr);
}
.cs-asset-grid-spiritbrush .cs-asset-wide { grid-column: 1 / -1; }
.cs-asset-grid-spiritbrush .cs-asset-card {
    min-height: 0;
    padding: 24px;
    background: var(--window-bg);
    background: color-mix(in srgb, var(--window-bg) 97%, var(--text-1) 3%);
    border-color: var(--canvas-border);
    transition: background var(--dur-base) ease, border-color var(--dur-base) ease;
}
.cs-asset-grid-spiritbrush .cs-asset-logo { aspect-ratio: 1; }
.cs-asset-grid-spiritbrush .cs-asset-logotype {
    /* Taller frame + slightly smaller mark for even vertical breathing room. */
    min-height: 300px;
    padding: 52px 40px 64px;
    align-items: center;
    justify-content: center;
}
.cs-asset-grid-spiritbrush .cs-asset-logotype img {
    max-width: 58%;
    max-height: 112px;
    width: auto;
    height: auto;
}
.cs-asset-grid-spiritbrush .cs-asset-palette {
    align-items: flex-start;
    padding: 20px;
}
.cs-sb-swatches {
    width: 100%;
    display: grid;
    gap: 8px;
}
.cs-sb-swatches > span {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    background: var(--swatch);
    border-radius: 8px;
    color: #FFFFFF;
}
.cs-sb-swatches strong,
.cs-sb-swatches small {
    display: block;
    font-size: 8px;
    line-height: 1.25;
}
.cs-sb-swatches strong { font-weight: 650; }
.cs-sb-swatches small { opacity: .68; }
.cs-swatch-label-dark { display: none; }
.cs-asset-grid-spiritbrush .cs-asset-type img {
    width: 42%;
    max-height: 105px;
    transform: translateY(-9px);
}
.cs-spiritbrush .cs-asset-grid-spiritbrush figcaption { color: var(--text-2); }
html[data-mode="dark"] .cs-asset-grid-spiritbrush .cs-asset-logo img,
html[data-mode="dark"] .cs-asset-grid-spiritbrush .cs-asset-logotype img,
html[data-mode="dark"] .cs-asset-grid-spiritbrush .cs-asset-type img {
    filter: brightness(0) invert(1);
}
html[data-mode="dark"] .cs-sb-swatches > span:last-child {
    background: #F3F0E8;
    color: #1A1813;
}
html[data-mode="dark"] .cs-swatch-label-default { display: none; }
html[data-mode="dark"] .cs-swatch-label-dark { display: inline; }
.cs-asset-card figcaption,
.cs-application-card figcaption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    font-size: 12px;
    line-height: 1.4;
    color: #4F4942;
}
.cs-application-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.cs-application-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--window-bg);
    border-radius: 16px;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.cs-application-card img {
    position: absolute;
    inset: -1px;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    border-radius: 0 !important;
}
.cs-application-card::after {
    content: '';
    position: absolute;
    inset: auto -1px -1px;
    height: 77px;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(255,255,255,0.72));
}
.cs-application-card figcaption { z-index: 1; }
.cs-brightbook .cs-application-card figcaption,
.cs-spiritbrush .cs-application-card figcaption {
    color: var(--text-1);
    font-weight: 560;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--window-bg) 70%, white 12%),
            color-mix(in srgb, var(--window-bg) 54%, transparent));
    border: 1px solid color-mix(in srgb, var(--text-1) 12%, transparent);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 color-mix(in srgb, var(--text-1) 7%, transparent),
        0 5px 16px rgba(0,0,0,0.12);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
}
.cs-brightbook .cs-application-card::after,
.cs-spiritbrush .cs-application-card::after {
    display: none;
}
.cs-product-frame {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 16px 16px 48px;
    background: #E3E4EB;
    border-radius: 16px;
}
.cs-product-frame img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: contain;
    border-radius: 10px;
}
.cs-product-frame figcaption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    font-size: 12px;
    color: #4F4942;
}
.cs-asset-grid-brightbook .cs-asset-card {
    padding: 24px;
    background: var(--window-bg);
    background: color-mix(in srgb, var(--window-bg) 97%, var(--text-1) 3%);
    border-color: var(--canvas-border);
    transition: background var(--dur-base) ease, border-color var(--dur-base) ease;
}
.cs-asset-grid-brightbook .cs-asset-logotype {
    min-height: 300px;
    padding: 52px 40px 64px;
    align-items: center;
    justify-content: center;
}
.cs-asset-grid-brightbook .cs-asset-logotype img {
    width: 56%;
    max-width: 420px;
    max-height: 96px;
    height: auto;
    aspect-ratio: 308 / 66;
    padding: 0;
    margin-inline: auto;
}
.cs-asset-grid-brightbook .cs-asset-card:not(.cs-asset-logotype):not(.cs-bb-guidelines) > img {
    width: 64%;
    max-width: 100%;
    max-height: 100%;
    padding: 2px;
}
.cs-asset-grid-brightbook .cs-asset-card > img { border-radius: 0; }
.cs-brightbook .cs-asset-grid-brightbook figcaption { color: var(--text-2); }
.cs-bb-guidelines {
    min-height: 360px !important;
    background: color-mix(in srgb, var(--window-bg) 97%, var(--text-1) 3%) !important;
}
.cs-bb-guidelines img { max-width: 82%; max-height: 260px; }
.cs-asset-grid-brightbook .cs-bb-palette {
    align-items: flex-start;
    padding: 24px;
}
.cs-bb-swatches {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.cs-bb-swatches > span {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px;
    background: var(--swatch);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
}
.cs-bb-swatches strong,
.cs-bb-swatches small {
    display: block;
    line-height: 1.25;
}
.cs-bb-swatches strong { font-size: 9px; font-weight: 650; }
.cs-bb-swatches small { font-size: 8px; opacity: .72; }
.cs-bb-swatches > span:last-child { color: #141414; }
html[data-mode="dark"] .cs-asset-grid-brightbook .cs-asset-logotype img,
html[data-mode="dark"] .cs-asset-grid-brightbook .cs-asset-card:not(.cs-bb-guidelines) > img {
    filter: brightness(0) invert(1);
}
html[data-mode="dark"] .cs-bb-swatches > span:nth-child(3) {
    background: #F4F7FA;
    color: #111827;
}
html[data-mode="dark"] .cs-bb-swatches > span:nth-child(4) {
    background: #374151;
    color: #FFFFFF;
}
.cs-outcome-grid .cs-tile {
    aspect-ratio: 1;
    min-height: 0;
    overflow: hidden;
    container-type: inline-size;
    padding: 20px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.cs-section .cs-outcome-value {
    margin: 0 0 18px;
    color: #85817C;
    font-family: var(--font-display);
    font-size: 34cqi;
    font-weight: 750;
    line-height: .84;
    letter-spacing: -.045em;
    transition: color var(--dur-fast) ease;
}
.cs-outcome-grid .cs-tile:hover .cs-outcome-value { color: var(--accent); }
.cs-section .cs-outcome-label {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.5;
}
.cs-brand-preview .cs-soon-note { align-self: flex-start; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cs-chip {
    font-size: 11.5px; font-weight: 600; color: var(--text-2);
    background: var(--sidebar-active); border-radius: 999px; padding: 5px 12px;
}
/* Uses the active case study's brand accent in every AlexOS theme.
   Must stay after `.cs-chip` — same specificity, so source order decides. */
.cs-chip-accent,
.cs-chip-spiritbrush,
.cs-chip-brightbook { background: var(--accent-soft); color: var(--accent-strong); }
.cs-bento { display: grid; gap: 10px; margin: 0 0 56px; }
.cs-bento-meta { grid-template-columns: repeat(4, 1fr); }
.cs-bento-meta-3 { grid-template-columns: repeat(3, 1fr); }
.cs-bento-3 { grid-template-columns: repeat(3, 1fr); }
.cs-bento-2 { grid-template-columns: repeat(2, 1fr); }
.cs-bento-4 { grid-template-columns: repeat(4, 1fr); }
.cs-bento-decisions { grid-auto-rows: 1fr; }
.cs-section .cs-bento { margin-bottom: 0; margin-top: 18px; }
.cs-tile {
    background: var(--window-bg); border: 1px solid var(--canvas-border);
    border-radius: 16px; padding: 18px;
    transition: border-color var(--dur-fast) ease;
}
.cs-tile:hover { border-color: var(--accent); }
.cs-meta-label { font-size: 10.5px; font-weight: 660; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.cs-meta-value { font-size: 13px; line-height: 1.55; color: var(--text-1); }
.cs-meta-links { display: flex; flex-direction: column; gap: 4px; }
.cs-meta-links a { text-decoration: underline; text-underline-offset: 3px; font-weight: 560; }
.cs-tile-principle h3, .cs-tile-decision h3 { font-family: var(--font-semi); font-size: 15px; font-weight: 660; margin-bottom: 8px; }
.cs-tile-principle p, .cs-tile-decision p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0; }
.cs-tile-decision { padding: 22px; }
.cs-decision-num {
    display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--accent-strong); background: var(--accent-soft);
    border-radius: 6px; padding: 2px 8px; margin-bottom: 18px;
}
.cs-h2-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-right: 12px; vertical-align: 3px; }
.cs-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 18px; border-left: 2px solid var(--canvas-border); }
.cs-release { position: relative; padding: 0 0 22px 22px; }
.cs-release::before {
    content: ''; position: absolute; left: -6px; top: 5px;
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--accent); box-shadow: 0 0 0 3px var(--canvas-bg);
}
.cs-release-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cs-release-version { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-1); }
.cs-release-date { font-size: 11.5px; color: var(--text-3); }
.cs-release p { font-size: 13.5px; margin: 0; }
.cs-pullquote {
    font-family: var(--font-semi); font-size: 17px !important; font-weight: 560; line-height: 1.5 !important;
    color: var(--text-1) !important; border-left: 3px solid var(--accent);
    padding-left: 18px; margin-top: 26px !important;
}
.cs-stat {
    aspect-ratio: 1;
    min-height: 0;
    overflow: hidden;
    container-type: inline-size;
    padding: 20px;
    border-radius: 28px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.cs-section .cs-stat-value {
    font-family: var(--font-display);
    font-size: 76px;
    font-size: 50cqi;
    font-weight: 750;
    line-height: 0.82;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
    color: #85817C;
    transition: color var(--dur-fast) ease;
}
.cs-stat:hover .cs-stat-value { color: var(--accent); }
.cs-section .cs-stat-value-count { font-size: 42cqi; }
.cs-section .cs-stat-value-zero { transform: translateY(4px); }
.cs-section .cs-stat-label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
    margin: 0;
}
.cs-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cs-cta .cta-btn {
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none;
}
.cs-cta .cta-secondary:hover { background: var(--sidebar-active); }
.cs-cta .cta-btn .ico { display: inline-flex; width: 14px; height: 14px; flex: 0 0 14px; }
.cs-cta .cta-btn .ico svg { width: 100%; height: 100%; }
.cs-cta-note { font-size: 13px; color: var(--text-3); margin-top: 14px; }
.cs-cta-note a { text-decoration: underline; text-underline-offset: 3px; }
.cs-privacy .cs-section a {
    color: var(--text-1);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent);
}
.cs-privacy .cs-section a:hover { text-decoration-color: var(--text-1); }
@media (max-width: 860px) {
    .cs-bento-meta, .cs-bento-4 { grid-template-columns: repeat(2, 1fr); }
    .cs-bento-meta-3 { grid-template-columns: 1fr; }
    .cs-bento-3, .cs-bento-2 { grid-template-columns: 1fr; }
    .cs-asset-grid, .cs-application-grid { grid-template-columns: 1fr; }
    .cs-asset-card.cs-asset-wide { grid-column: auto; }
    /* Mobile brand tiles: full-width edges, caption room, tighter frames. */
    .cs-asset-card.cs-asset-wide { min-height: 0; }
    .cs-asset-grid-spiritbrush .cs-asset-card {
        padding: 22px 18px 50px;
        min-height: 0;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        align-items: center;
        justify-content: center;
    }
    .cs-asset-grid-spiritbrush .cs-asset-logotype {
        /* Landscape mark — keep the card short and optically centered. */
        padding: 34px 22px 46px;
    }
    .cs-asset-grid-spiritbrush .cs-asset-logotype img {
        width: 78%;
        max-width: 280px;
        max-height: 68px;
        height: auto;
    }
    .cs-asset-grid-spiritbrush .cs-asset-palette {
        padding: 14px 14px 54px;
        align-items: center;
    }
    .cs-asset-grid-spiritbrush .cs-sb-swatches {
        gap: 6px;
        width: 100%;
        flex: 0 0 auto;
    }
    .cs-asset-grid-spiritbrush .cs-sb-swatches > span { min-height: 56px; }
    .cs-asset-grid-spiritbrush .cs-asset-logo {
        aspect-ratio: 1;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 28px 18px 50px;
    }
    .cs-asset-grid-spiritbrush .cs-asset-logo img {
        width: min(58%, 168px);
        max-height: 168px;
        height: auto;
    }
    .cs-asset-grid-spiritbrush .cs-asset-type {
        min-height: 220px;
        padding: 28px 20px 52px;
    }
    .cs-asset-grid-spiritbrush .cs-asset-type img {
        width: min(54%, 180px);
        max-height: 96px;
        transform: none;
    }
    .cs-asset-grid-brightbook .cs-asset-card {
        min-height: 0;
        padding: 28px 18px 50px;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        align-items: center;
        justify-content: center;
    }
    .cs-asset-grid-brightbook .cs-asset-logotype {
        padding: 36px 22px 48px;
    }
    .cs-asset-grid-brightbook .cs-asset-logotype img {
        /* Match SpiritBrush logotype visual weight on phones. */
        width: 68%;
        max-width: 230px;
        max-height: 50px;
        height: auto;
        padding: 0;
        margin-inline: auto;
    }
    .cs-asset-grid-brightbook .cs-asset-card:not(.cs-asset-logotype):not(.cs-bb-guidelines):not(.cs-bb-palette) > img {
        width: min(48%, 140px);
        max-height: 96px;
        height: auto;
        padding: 0;
        margin-inline: auto;
    }
    .cs-asset-grid-brightbook .cs-bb-palette {
        padding: 14px 14px 54px;
        align-items: center;
    }
    .cs-bb-swatches {
        width: 100%;
        flex: 0 0 auto;
    }
    .cs-bb-swatches > span { min-height: 56px; }
    .cs-bb-guidelines {
        min-height: 0 !important;
        padding: 20px 16px 48px !important;
    }
    .cs-bb-guidelines img {
        max-width: 92%;
        max-height: 120px;
    }
    /* Keep the lesson-plan mockup fully visible with even matte + caption room.
       (Avoid transform:scale — it doesn't shrink layout height and clips sides.) */
    .cs-product-frame {
        padding: 14px 14px 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cs-product-frame img {
        width: auto;
        max-width: 100%;
        max-height: min(52vh, 380px);
        height: auto;
        object-fit: contain;
        transform: none;
        margin-inline: auto;
    }
    .cs-asset-card figcaption,
    .cs-application-card figcaption,
    .cs-product-frame figcaption {
        left: 16px;
        bottom: 14px;
    }
    /* More side breathing room — 18px was flush against the phone edge. */
    .cs-content { padding: 32px 28px 72px; }
    .cs-content.cs-contact { padding: 28px 28px; }
    .cs-content.cs-huelab-wip { padding: 0; }
    .cs-brand-preview { justify-content: flex-start; }
    .cs-hero { margin-bottom: 36px; }
    .cs-hero h1, .cs-content > h1, .cs-soon h1 {
        font-size: clamp(26px, 7.2vw, 34px);
        margin-bottom: 12px;
    }
    .cs-hero-subtitle { font-size: 15px; line-height: 1.55; }
    .cs-section { margin-bottom: 44px; }
    .cs-section h2 { font-size: 18px; margin-bottom: 12px; }
    .cs-section p { font-size: 14px; line-height: 1.65; }
    .cs-kicker { font-size: 10.5px; margin-bottom: 8px; }
    .cs-chips { margin-top: 14px; }
    .cs-bento { gap: 10px; margin-bottom: 44px; }
    .cs-tile { padding: 16px; border-radius: 14px; }
    .cs-tile-decision { padding: 18px; }
    .cs-meta-value { font-size: 12.5px; }
    .cs-brand-logo { width: 96px; height: 96px; }
}

/* Coming-soon tabs */
.cs-soon { text-align: center; padding-top: 12vh; }
.cs-soon .cs-hero-subtitle { margin: 0 auto 18px; }
.cs-soon-mark { width: 74px; height: 74px; margin: 0 auto 26px; display: flex; align-items: center; justify-content: center; }
.cs-collectors-mark { border-radius: 20px; background: #1d1a16; color: #d4b26a; }
.cs-collectors-mark .ico { width: 30px; height: 30px; display: inline-flex; }
.cs-soon-note {
    display: inline-block; font-size: 12.5px; color: var(--text-3);
    background: var(--sidebar-active); border-radius: 999px; padding: 7px 16px;
}

/* Contact form — centered in the window, no scroll runway. */
.cs-content.cs-contact {
    max-width: 560px;
    min-height: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cs-contact .cs-hero { margin-bottom: 28px; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.contact-input {
    font-family: var(--font-sans); font-size: 14px; color: var(--text-1);
    background: var(--canvas-bg); border: 1px solid var(--canvas-border);
    border-radius: 10px; padding: 10px 12px; outline: none;
    transition: border-color var(--dur-fast) ease;
}
.contact-input:focus { border-color: var(--accent); }
.contact-textarea { resize: vertical; min-height: 110px; }
.contact-form .cta-btn { align-self: flex-start; }
.contact-status { font-size: 13px; color: var(--accent-strong); min-height: 18px; }

/* ============ HUE LAB (under construction) ============ */
/* Interactive demo styles removed from view while the prototype is rebuilt.
   Restore from git history when Hue Lab ships again. */
.cs-window.cs-noscroll { overflow: hidden; }
.cs-content.cs-huelab-wip {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.hl-wip {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 6vh, 56px) clamp(20px, 5vw, 48px);
    z-index: 1;
}
.hl-wip-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(135, 214, 36, 0.18), transparent 62%),
        radial-gradient(ellipse 50% 40% at 78% 72%, rgba(135, 214, 36, 0.08), transparent 70%),
        linear-gradient(180deg, transparent 0%, var(--window-bg) 100%);
}
html[data-mode="dark"] .hl-wip-atmosphere {
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(135, 214, 36, 0.14), transparent 62%),
        radial-gradient(ellipse 50% 40% at 78% 72%, rgba(135, 214, 36, 0.06), transparent 70%),
        linear-gradient(180deg, transparent 0%, var(--window-bg) 100%);
}
html[data-mode="alex"] .hl-wip-atmosphere {
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(135, 214, 36, 0.16), transparent 62%),
        radial-gradient(ellipse 45% 35% at 22% 78%, rgba(139, 104, 72, 0.10), transparent 68%),
        linear-gradient(180deg, transparent 0%, var(--window-bg) 100%);
}
.hl-wip-orb {
    position: absolute;
    width: min(420px, 70vw);
    height: min(420px, 70vw);
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 214, 36, 0.22), transparent 68%);
    filter: blur(8px);
    animation: hl-wip-breathe 5.5s ease-in-out infinite;
}
.hl-wip-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(135, 214, 36, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(135, 214, 36, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 65% 55% at 50% 42%, #000 20%, transparent 75%);
}
.hl-wip-mark,
.hl-wip-badge,
.hl-wip h1,
.hl-wip-lede,
.hl-wip-actions {
    position: relative;
    z-index: 1;
}
.hl-wip-mark {
    width: 76px;
    height: 76px;
    margin: 0 0 18px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a2e0a;
    background: linear-gradient(145deg, #b6f055 0%, #87D624 48%, #6fb01c 100%);
    box-shadow:
        0 0 0 1px rgba(26, 46, 10, 0.08),
        0 10px 28px -8px rgba(135, 214, 36, 0.55);
    animation: hl-wip-rise 4.8s var(--ease-entry) infinite;
}
html[data-mode="dark"] .hl-wip-mark { color: #0f1a06; }
.hl-wip-mark .ico {
    width: 30px;
    height: 30px;
    display: inline-flex;
}
.hl-wip-mark .ico svg {
    width: 100%;
    height: 100%;
}
.hl-wip-badge {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 620;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.hl-wip h1 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 680;
    letter-spacing: -0.03em;
    color: var(--text-1);
    line-height: 1.05;
}
.hl-wip-lede {
    margin: 0 auto 28px;
    max-width: 38rem;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text-2);
}
.hl-wip-desktop { display: block; }
.hl-wip-mobile { display: none; }
.hl-wip-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.hl-wip-actions .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@keyframes hl-wip-breathe {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes hl-wip-rise {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (max-width: 860px) {
    .hl-wip {
        padding: 28px 28px 40px;
        justify-content: flex-start;
        padding-top: min(16vh, 104px);
    }
    .hl-wip-desktop { display: none; }
    .hl-wip-mobile { display: block; }
    .hl-wip-mark {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        margin-bottom: 14px;
    }
    .hl-wip-mark .ico { width: 26px; height: 26px; }
    .hl-wip-badge { margin-bottom: 8px; }
    .hl-wip h1 { font-size: clamp(28px, 8vw, 32px); margin-bottom: 12px; }
    .hl-wip-lede {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 22px;
        max-width: 28rem;
    }
    .hl-wip-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }
    .hl-wip-actions .cta-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-wip-orb,
    .hl-wip-mark { animation: none; }
}

/* ============ TOAST ============ */
.toast {
    position: fixed; bottom: 40px; left: 50%; transform: translate(-50%, 20px);
    background: var(--text-1); color: var(--canvas-bg);
    padding: 10px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 560;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    opacity: 0; z-index: 10005; pointer-events: none;
    transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-entry);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ MOBILE TOP BAR + DRAWER (hidden on desktop) ============ */
.mobile-top-bar { display: none; }
.drawer-backdrop { display: none; }
.drawer-close { display: none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============ MOBILE ============ */
@media (max-width: 860px) {
    /* On mobile the inner .canvas becomes a scroll container, and mobile Safari
       won't clip a scroller to its rounded parent — so the frame's bottom
       corners read square. A mask forces the rounded clip; the matching radius
       on .canvas is a belt-and-suspenders fallback. */
    .canvas-frame {
        inset: 10px; flex-direction: column;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .canvas { border-bottom-left-radius: var(--canvas-radius); border-bottom-right-radius: var(--canvas-radius); }

    .mobile-top-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px; border-bottom: 1px solid var(--canvas-border);
        background: var(--sidebar-bg); backdrop-filter: blur(18px);
        z-index: 35; flex: 0 0 auto;
        transition: background var(--dur-mode) ease;
    }
    .hamburger { border: none; background: transparent; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
    .hamburger span { width: 18px; height: 1.8px; border-radius: 2px; background: var(--text-1); }
    .mobile-mode-pills { display: flex; gap: 4px; background: var(--sidebar-active); border-radius: 999px; padding: 3px; }
    .mobile-mode-pill {
        width: 32px; height: 28px; border-radius: 999px; border: none; background: transparent;
        display: inline-flex; align-items: center; justify-content: center; color: var(--text-3);
    }
    .mobile-mode-pill[aria-checked="true"] {
        background: var(--social-coin);
        color: var(--text-1);
        box-shadow: 0 0 0 1px var(--sidebar-border), 0 1px 3px rgba(0,0,0,0.12);
    }

    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw);
        transform: translateX(-105%);
        transition: transform var(--dur-medium) var(--ease-entry), background var(--dur-mode) ease;
        z-index: 300; border-radius: 0;
        box-shadow: 0 0 60px rgba(0,0,0,0.3);
        /* Grid header row keeps the close control aligned with the tip line. */
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: calc(env(safe-area-inset-top, 0px) + 26px) 12px 12px;
        gap: 0;
    }
    .sidebar.open { transform: none; }
    .drawer-backdrop {
        display: block; position: fixed; inset: 0; z-index: 299;
        background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none;
        transition: opacity var(--dur-base) ease;
    }
    .drawer-backdrop.visible { opacity: 1; pointer-events: auto; }
    .drawer-close {
        display: flex;
        position: static;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        width: 20px;
        height: 20px;
        margin: 0 2px 14px 8px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        background: var(--sidebar-active);
        color: var(--text-2);
        cursor: pointer;
        flex: 0 0 20px;
    }
    .drawer-close svg { width: 10px; height: 10px; }
    .sidebar-hint {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        min-height: 20px;
        padding: 0 0 14px 8px;
        margin: 0;
        box-sizing: border-box;
    }
    .sidebar-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 0;
    }
    .sidebar-cs-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 0;
    }
    .sidebar-footer {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* Windows become stacked cards */
    .canvas { overflow-y: auto; }
    .canvas-inner { position: static; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
    .window {
        position: static !important;
        width: 100% !important; height: auto !important;
        transform: none !important;
        opacity: 1; visibility: visible;
        scroll-margin-top: 10px;
    }
    .window .ws-icon-badge { display: none; }
    .window-titlebar { cursor: default; }
    .traffic-lights { pointer-events: auto; }
    .traffic-light { width: 24px; flex-basis: 24px; }
    .window-title { margin-right: 72px; }
    .window:not(.focused):hover .tl-red::before,
    .window:not(.focused):hover .tl-yellow::before,
    .window:not(.focused):hover .tl-green::before { background: var(--tl-inactive); }
    .window.focused .tl-red::before { background: #FF5F57; }
    .window.focused .tl-yellow::before { background: #FEBC2E; }
    .window.focused .tl-green::before { background: #28C840; }
    .window.focused .traffic-light svg { opacity: 1; }
    .window.focused .traffic-light[aria-disabled="true"]::before { background: var(--tl-inactive); }
    .window.mobile-expanded {
        position: fixed !important;
        inset: 64px 10px 10px !important;
        width: auto !important;
        height: auto !important;
        z-index: 250 !important;
    }
    .window.mobile-expanded .window-content {
        height: calc(100% - 40px) !important;
        max-height: none !important;
        overflow: auto;
    }
    .window.mobile-profile-expanded {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        width: min(calc(100vw - 32px), calc(100vh - 96px), 520px) !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
        z-index: 250 !important;
    }
    .window.mobile-profile-expanded .window-content {
        width: 100%;
        height: auto !important;
        aspect-ratio: 1;
        overflow: hidden;
    }
    .window.mobile-profile-expanded img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        object-position: center bottom;
    }
    .terminal-window .window-content { height: 300px; }
    .profile-window .window-content { height: auto; }
    .profile-window img { max-height: 340px; }
    .work-window .window-content { max-height: none; }
    /* The desktop hero locks the name to one line; on narrow cards let it
       scale with the viewport and wrap as a last resort. */
    .hero-name { white-space: normal; font-size: clamp(30px, 9.5vw, 44px); }

    .cs-tab-bar { display: none !important; }
    .cs-overlay,
    .cs-tab-bar.visible ~ .cs-overlay {
        position: fixed;
        /* Match .canvas-frame's mobile inset so the sheet sits inside the
           rounded OS chrome instead of getting its top-left lights clipped. */
        inset: 10px;
        top: 10px;
        z-index: 400;
        border-radius: var(--canvas-radius);
    }
    .cs-titlebar {
        padding: 16px 16px 12px 18px;
        min-height: 48px;
        box-sizing: border-box;
    }
    .cs-titlebar .traffic-lights {
        align-self: center;
    }

    .draw-toolbar { display: none; }
}

/* ============ PHONE ONLY ============ */
/* The terminal stays on tablet + desktop; on phones it's dropped from both the
   canvas and the sidebar. 600px keeps portrait tablets (which use the stacked
   layout above) in the "has terminal" tier. */
@media (max-width: 600px) {
    #termFixture { display: none !important; }
    .tree-item[data-action="terminal"] { display: none; }
}

/* Password gate (TimOS-style) */
.pw-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(8px); 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(--canvas-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(--canvas-border); background: var(--canvas-bg);
    font-family: var(--font-sans); 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; }
.pw-error { font-size: 12px; color: #e74c3c; margin-top: 8px; }
.pw-error[hidden] { display: none; }
@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(--canvas-border); background: var(--file-hover);
    color: var(--text-1); font-family: var(--font-sans);
}
.pw-btn-primary { background: var(--text-1); color: var(--canvas-bg); border-color: var(--text-1); }