/* ============================================
   MAIN.CSS — Workshop Design System
   SF-style interface + New York-style editorial serif + mono technical accents.
   Warm paper, dot-grid texture, hairline rules,
   vermillion drafting accent. No gradients, no glass.
   ============================================ */

/* ---------- Design Tokens ---------- */
:root {
    /* Palette — warm paper */
    --paper:        #f4f1ea;
    --paper-deep:   #efeae0;
    --paper-soft:   #f8f6f0;
    --ink:          #16130d;
    --ink-soft:     #2b2620;
    --graphite:     #5c564b;
    --graphite-soft:#8a8273;
    --hair:         rgba(22, 19, 13, 0.14);
    --hair-strong:  rgba(22, 19, 13, 0.28);
    --hair-soft:    rgba(22, 19, 13, 0.07);
    --vermillion:   #c8423b;
    --vermillion-deep:#a8322c;
    --amber:        #b07a1e;   /* secondary, sparingly */

    /* Cyanotype (easter-egg only) */
    --cyanotype:       #1f6f8b;
    --cyanotype-deep:  #0f4c61;
    --cyanotype-paper: #0d2a3a;

    /* Type */
    --font-ui:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    --font-display: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif;
    --font-reading: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif;
    --font-code:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    /* Compatibility aliases keep existing component roles explicit. */
    --font-sans:    var(--font-ui);
    --font-serif:   var(--font-display);
    --font-mono:    var(--font-code);
    --font-body:    var(--font-ui);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3.5rem;
    --space-2xl: 6rem;

    /* Layout */
    --container-max: 1280px;
    --container-padding: clamp(1.25rem, 5vw, 4rem);
    --nav-height: 44px;
    --viewport-height: 100vh;

    /* Rules */
    --rule: 1px solid var(--hair);
}

@supports (height: 100svh) {
    :root { --viewport-height: 100svh; }
}

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

ul, ol, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

a, button { cursor: pointer; }

html {
    scroll-behavior: auto;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--paper);
    /* dot-grid on warm paper */
    background-image:
        radial-gradient(circle at center, var(--hair-soft) 1px, transparent 1px),
        linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 40%, var(--paper-deep) 100%);
    background-size: 22px 22px, auto;
    background-attachment: fixed;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* paper grain overlay (subtle, fixed) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: multiply;
}

/* Selection */
::selection {
    background: var(--vermillion);
    color: var(--paper);
}

/* Focus ring — tasteful vermillion outline */
:focus-visible {
    outline: 2px solid var(--vermillion);
    outline-offset: 3px;
}

/* ---------- Typography defaults ---------- */
.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}

.mono-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
}

/* ---------- Layout primitives ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 10;
}

/* ============================================
   SCROLL SYSTEM (preserved contract)
   ============================================ */

/* About section track */
.scroll-track {
    position: relative;
    min-height: calc(var(--viewport-height) * 1.52);
    isolation: isolate;
}

#about .sticky-view {
    overflow: visible;
}

#about .about-header-layer {
    z-index: 0;
}

#about {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    #about {
        margin-bottom: 0;
    }
}

.sticky-view {
    position: sticky;
    top: 0;
    z-index: 5;
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bio-hero.sticky-view {
    justify-content: flex-start;
    padding-top: calc(var(--nav-height) + clamp(0.7rem, 2.2vh, 1.6rem));
}

.bio-hero .bio-container {
    height: calc(var(--viewport-height) - var(--nav-height) - clamp(0.7rem, 2.2vh, 1.6rem));
    max-width: min(1800px, 100%);
}

.bio-content,
.bio-grid,
.bio-text {
    min-height: 0;
}

.bio-content {
    --hero-stage-width: min(100%, 1600px, calc((var(--viewport-height) - clamp(16rem, 28vh, 20rem)) * 16 / 9));
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(1rem, 3vh, 2rem);
}

.bio-grid {
    flex: 1 1 auto;
    display: flex;
}

.bio-text {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Generic section tracks */
.section-scroll-track {
    position: relative;
    min-height: calc(var(--viewport-height) * 1.35);
    background: transparent;
    overflow: clip;
    isolation: isolate;
}

.section-header-layer {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

/* The giant parallax word — SERIF ITALIC is the signature */
.section-header-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(7rem, 24vw, 30rem);
    color: var(--ink);
    line-height: 0.82;
    opacity: 0;
    letter-spacing: -0.045em;
    will-change: transform, opacity;
    user-select: none;
}

.section-header-title.is-split {
    display: inline-flex;
    white-space: nowrap;
}

.section-header-char {
    display: inline-block;
    transform-origin: 50% 80%;
    will-change: transform, opacity;
}

.section-sticky-view {
    position: sticky;
    top: 0;
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    z-index: 10;
}

.section-content-wrapper {
    position: relative;
    z-index: 15;
    will-change: opacity, transform;
    background: transparent;
    padding: var(--space-xl) 0;
    min-height: var(--viewport-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 10;
}

.massive-section-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(7rem, 24vw, 30rem);
    color: var(--ink);
    opacity: 0;
    font-weight: 500;
    line-height: 0.82;
    letter-spacing: -0.045em;
    transform: translateY(100vh) scale(0.5);
    transition: none;
    will-change: transform, opacity;
}

/* ============================================
   NEXT-SECTION BUTTON
   ============================================ */
.next-section-btn {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.4rem 0.48rem 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(246, 246, 248, 0.78);
    color: #1d1d1f;
    box-shadow: 0 8px 24px rgba(17, 17, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(1.45);
    -webkit-backdrop-filter: blur(20px) saturate(1.45);
    font: 600 0.76rem/1 var(--font-ui);
    text-transform: none;
    letter-spacing: -0.01em;
    opacity: 0;
    transition: opacity 0.3s, color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    z-index: 20;
    pointer-events: none;
}

.next-section-btn:hover {
    background: rgba(255, 255, 255, 0.94);
    color: #0071e3;
    box-shadow: 0 10px 28px rgba(17, 17, 20, 0.18), inset 0 1px 0 #fff;
    transform: translateX(-50%) translateY(2px);
}

#about .next-section-btn {
    bottom: 0.35rem;
    z-index: 40000;
}

.arrow-down {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 113, 227, 0.12);
    color: #0071e3;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.arrow-down svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.next-section-btn:hover .arrow-down {
    background: #0071e3;
    color: #fff;
    transform: translateY(1px);
}

/* ============================================
   BIO / HERO SECTION
   ============================================ */
.bio-greeting {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--graphite);
    margin-bottom: 0.75rem;
}

.bio-header {
    width: var(--hero-stage-width);
    margin-inline: auto;
    padding-top: 0;
    flex: 0 0 auto;
    text-align: center;
}

.bio-name {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(2.9rem, 4.7vw, 5rem);
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.035em;
    margin-bottom: 0.7rem;
}

.bio-role {
    max-width: 720px;
    margin-inline: auto;
    font-family: var(--font-sans);
    font-size: clamp(0.78rem, 1.15vw, 0.94rem);
    font-weight: 500;
    line-height: 1.4;
    color: #626267;
    letter-spacing: -0.012em;
}

.bio-role .accent { color: var(--vermillion); }

.bio-role .muted-role {
    color: var(--graphite);
}

/* Console log terminal (reframed) */
.terminal-scrub-container {
    margin: clamp(0.85rem, 1.8vh, 1.4rem) auto 0;
    width: var(--hero-stage-width);
    max-width: none;
    position: relative;
    z-index: 80;
    isolation: isolate;
}

.terminal-desktop {
    --desktop-window-top: 2.5rem;
    --desktop-dock-space: 5rem;
    --desktop-window-height: 100%;
    position: relative;
    z-index: 40;
    isolation: isolate;
    aspect-ratio: 16 / 9;
    width: 100%;
    min-height: 0;
    padding: var(--desktop-window-top) 0.9rem 4.05rem;
    border: 1px solid rgba(22, 19, 13, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, #fffdf8 0 12%, transparent 28%),
        linear-gradient(140deg, #f5f2e9, #e4ded0);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        0 16px 40px rgba(22, 19, 13, 0.12);
    overflow: hidden;
}

.desktop-menubar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2350;
    height: 30px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.46rem;
    padding: 0 0.7rem;
    border-bottom: 1px solid rgba(22,19,13,0.08);
    background: rgba(255, 253, 248, 0.68);
    color: rgba(22,19,13,0.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    font: 0.62rem/1 var(--font-mono);
}

.desktop-menubar button {
    min-height: 22px;
    border: 0;
    border-radius: 6px;
    padding: 0 0.42rem;
    background: transparent;
    color: inherit;
    font: inherit;
}

.desktop-menubar button:hover,
.desktop-menubar button.is-active {
    background: rgba(48,95,142,0.14);
}

.desktop-menu-logo {
    font-weight: 800;
}

.desktop-menu-app-name {
    font-weight: 700;
}

.desktop-menu-status {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.desktop-wifi {
    width: 17px;
    height: 12px;
    display: inline-block;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.desktop-wifi::before,
.desktop-wifi::after {
    content: '';
    position: absolute;
    left: 50%;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 12px 12px 0 0;
    transform: translateX(-50%);
}

.desktop-wifi::before {
    top: 4px;
    width: 10px;
    height: 7px;
}

.desktop-wifi::after {
    top: 10px;
    width: 3px;
    height: 3px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
}

.desktop-battery {
    width: 22px;
    height: 11px;
    display: inline-block;
    border: 1.6px solid currentColor;
    border-radius: 3px;
    position: relative;
}

.desktop-battery::before {
    content: '';
    position: absolute;
    right: -4px;
    top: 3px;
    width: 2px;
    height: 5px;
    border-radius: 0 2px 2px 0;
    background: currentColor;
}

.desktop-battery::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 5px;
    border-radius: 2px;
    background: #2dbd5a;
}

.desktop-popover {
    position: absolute;
    z-index: 2360;
    top: 2.35rem;
    border: 1px solid rgba(255,255,255,0.58);
    border-radius: 16px;
    background: rgba(255,253,248,0.72);
    box-shadow: 0 22px 60px rgba(22,19,13,0.18);
    backdrop-filter: blur(24px) saturate(1.22);
    -webkit-backdrop-filter: blur(24px) saturate(1.22);
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.35rem) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s ease;
    font: 0.66rem/1.35 var(--font-mono);
}

.desktop-popover.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.desktop-about-menu {
    left: 0.58rem;
    width: 210px;
    display: grid;
    gap: 0.45rem;
    padding: 0.72rem;
}

.desktop-about-menu strong {
    font: 800 0.84rem/1 var(--font-mono);
}

.desktop-about-menu span {
    color: rgba(22,19,13,0.6);
}

.desktop-about-menu button,
.desktop-control-grid button {
    border: 1px solid rgba(22,19,13,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.48);
    color: inherit;
    text-align: left;
    font: inherit;
}

.desktop-about-menu button {
    padding: 0.5rem 0.55rem;
}

.desktop-notification-center {
    right: 0.7rem;
    width: min(300px, calc(100% - 1.4rem));
    padding: 0.75rem;
}

.desktop-popover-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
}

.desktop-popover-heading strong {
    font-size: 0.9rem;
}

.desktop-notification-center article {
    margin: 0 0 0.48rem;
    padding: 0.62rem;
    border: 1px solid rgba(22,19,13,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.52);
}

.desktop-notification-center article:last-child {
    margin-bottom: 0;
}

.desktop-notification-center p {
    margin: 0.2rem 0 0;
    color: rgba(22,19,13,0.65);
}

.desktop-control-center {
    right: 0.7rem;
    width: min(330px, calc(100% - 1.4rem));
    padding: 0.72rem;
}

.desktop-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
    margin-bottom: 0.65rem;
}

.desktop-control-grid button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.48rem;
    align-items: center;
    min-height: 58px;
    padding: 0.52rem;
}

.desktop-control-grid button > span {
    grid-row: span 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(48,95,142,0.14);
    color: #315f8e;
}

.desktop-control-grid button.is-on > span,
.desktop-control-grid button:hover > span {
    background: #315f8e;
    color: #fff;
}

.desktop-control-grid small {
    min-width: 0;
    color: rgba(22,19,13,0.55);
}

.desktop-slider {
    display: grid;
    gap: 0.32rem;
    margin-top: 0.55rem;
}

.desktop-slider input {
    width: 100%;
    accent-color: #315f8e;
}

.desktop-power-screen {
    position: absolute;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.7rem;
    background: #050505;
    color: rgba(255,255,255,0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    font: 0.72rem/1.4 var(--font-mono);
}

.terminal-desktop.is-powered-off .desktop-power-screen {
    opacity: 1;
    pointer-events: auto;
}

.desktop-power-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 18px;
    color: rgba(255,255,255,0.92);
    font: 800 1.2rem/1 var(--font-mono);
}

.desktop-power-screen p {
    margin: 0;
}

.terminal-desktop::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 12% 0%, #fffdf8 0 12%, transparent 28%),
        linear-gradient(140deg, #f5f2e9, #e4ded0);
}

.terminal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #181818;
    color: var(--paper);
    font-family: var(--font-mono);
    border-radius: 12px;
    min-height: 0;
    height: var(--desktop-window-height);
    width: 100%;
    margin-left: 0;
    position: relative;
    z-index: 10;
    overflow: hidden;
    transform-origin: 50% 85%;
    transition:
        transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.24s ease,
        border-radius 0.34s ease,
        box-shadow 0.34s ease;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        0 22px 50px rgba(22, 19, 13, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.terminal-body {
    min-height: 0;
    overflow: hidden;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 0.85rem;
    margin-bottom: 0;
    opacity: 1;
    background:
        linear-gradient(180deg, rgba(244, 241, 234, 0.2), rgba(244, 241, 234, 0.08));
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.terminal .terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.24);
    background: rgba(244,241,234,0.18);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.terminal:hover .terminal-dot-close {
    background: #ff5f57;
    border-color: #ff5f57;
    box-shadow: 0 0 12px rgba(255, 95, 87, 0.42);
}

.terminal:hover .terminal-dot-minimize {
    background: #ffbd2e;
    border-color: #ffbd2e;
    box-shadow: 0 0 12px rgba(255, 189, 46, 0.38);
}

.terminal:hover .terminal-dot-fullscreen {
    background: #28c840;
    border-color: #28c840;
    box-shadow: 0 0 12px rgba(40, 200, 64, 0.36);
}

.terminal .terminal-dot:hover {
    transform: scale(1.18);
}

.terminal-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0;
    color: rgba(244, 241, 234, 0.72);
    text-transform: lowercase;
    transform: translateX(-27px);
}

.terminal-content {
    padding: 0.9rem 1.05rem 1rem;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 241, 234, 0.28) transparent;
    font-size: clamp(0.76rem, 0.92vw, 0.88rem);
    line-height: 1.34;
    color: rgba(244, 241, 234, 0.85);
}

.terminal-content .prompt { color: #7ddf9a; margin-right: 8px; }
.terminal-content .terminal-final-prompt { margin-right: 0.5ch; }
.terminal-content .cmd { color: #f1f1f1; }
.terminal-content .output { display: inline; white-space: pre-wrap; }
.terminal-interactive-history { white-space: pre-wrap; }
.terminal-history-command .prompt { margin-right: 0.5ch; }
.terminal-history-output { white-space: pre-wrap; }
.terminal-command-input { width: 0.15ch; min-width: 0.15ch; max-width: calc(100% - 3ch); margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #f1f1f1; caret-color: var(--vermillion); font: inherit; line-height: inherit; vertical-align: baseline; }
.terminal-command-input:focus + .cursor { visibility: hidden; }

.terminal-content::-webkit-scrollbar { width: 8px; }
.terminal-content::-webkit-scrollbar-track { background: transparent; }
.terminal-content::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(244, 241, 234, 0.28); background-clip: padding-box; }

.cursor {
    display: inline-block;
    width: 0.55em;
    color: var(--vermillion);
    animation: cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.desktop-terminal-glyph {
    background:
        linear-gradient(145deg, #24211b, #11100d);
    color: var(--paper);
}

.desktop-rotate-nudge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4100;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 16px;
    background: rgba(24,24,24,0.82);
    color: #fff;
    box-shadow: 0 14px 38px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.15);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    font: 600 0.62rem/1 var(--font-ui);
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -42%) scale(0.94);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.desktop-rotate-nudge.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.desktop-rotate-symbol {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
}

.desktop-rotate-symbol svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desktop-icons {
    position: absolute;
    top: 2.55rem;
    left: 1rem;
    z-index: 2;
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: 72px;
    gap: 0.55rem 0.72rem;
    justify-items: center;
}

.desktop-app-icon {
    width: 72px;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: rgba(22, 19, 13, 0.8);
    font: 0.62rem/1.15 var(--font-mono);
    text-align: center;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.18s ease;
}

.desktop-app-icon.is-selected {
    background: rgba(48, 95, 142, 0.13);
    border-color: rgba(48, 95, 142, 0.24);
}

.desktop-app-glyph {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    box-shadow:
        0 7px 17px rgba(22, 19, 13, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.16);
}

.desktop-app-label {
    padding: 0.12rem 0.26rem;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

.desktop-app-icon.is-selected .desktop-app-label {
    background: rgba(48, 95, 142, 0.18);
}

.terminal-dock {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    z-index: 2000;
    display: grid;
    grid-auto-flow: column;
    gap: 0.55rem;
    align-items: end;
    padding: 0.48rem 0.62rem;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 18px;
    background: rgba(246, 244, 238, 0.58);
    box-shadow:
        0 16px 40px rgba(22, 19, 13, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.74);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    opacity: 1;
    transform: translateX(-50%);
}

.dock-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    min-width: 48px;
    border: none;
    background: transparent;
    padding: 0;
    color: rgba(22, 19, 13, 0.75);
    font: 0.56rem/1 var(--font-mono);
    transition: transform 0.18s ease;
}

.dock-item:hover {
    transform: translateY(-0.35rem) scale(1.08);
}

.dock-item:focus-visible,
.desktop-app-icon:focus-visible,
.terminal .terminal-dot:focus-visible,
.desktop-app-header button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(85, 200, 255, 0.34);
}

.dock-item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.36rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(22, 19, 13, 0.72);
    opacity: 0;
    transform: translateX(-50%);
}

.dock-item.is-running::after {
    opacity: 1;
}

.dock-glyph {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg, #24211b, #11100d);
    color: var(--paper);
    box-shadow:
        0 6px 16px rgba(22, 19, 13, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.16);
    font-size: 0.72rem;
}

.dock-label {
    position: absolute;
    bottom: calc(100% + 0.55rem);
    left: 50%;
    z-index: 3;
    padding: 0.32rem 0.48rem;
    border-radius: 999px;
    background: rgba(248, 247, 242, 0.9);
    box-shadow: 0 8px 24px rgba(22, 19, 13, 0.16);
    opacity: 0;
    transform: translateX(-50%) translateY(0.2rem);
    transition: opacity 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

.dock-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 4px 4px 12px rgba(22, 19, 13, 0.08);
}

.dock-item:hover .dock-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dock-seeker-face {
    background:
        linear-gradient(90deg, #9ed0ff 0 50%, #f3f5f7 50%),
        #d8e8f7;
    position: relative;
}

.dock-seeker-face::before,
.dock-seeker-face::after {
    content: '';
    position: absolute;
    top: 38%;
    width: 10.5%;
    height: 10.5%;
    border-radius: 50%;
    background: #1a2b36;
}

.dock-seeker-face::before { left: 31%; }
.dock-seeker-face::after { right: 31%; }

.dock-compass-icon {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 50%, #55c8ff 0 54%, transparent 55%),
        linear-gradient(145deg, #ffffff, #e8f0f7);
}

.dock-compass-icon::before {
    content: 'N';
    position: absolute;
    left: 50%;
    top: 5px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #cf1d1d;
    font: 700 0.64rem/1 var(--font-mono);
    transform: translateX(-50%);
    box-shadow: none;
    z-index: 2;
}

.dock-compass-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 22px solid #cf1d1d;
    transform: translate(-50%, -50%) rotate(28deg);
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.75));
    z-index: 2;
}

.dock-trash-icon {
    position: relative;
    overflow: visible;
    border-radius: 9px 9px 12px 12px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.2), transparent 20% 80%, rgba(0,0,0,0.08)),
        linear-gradient(180deg, #f8fbfa, #cfd9d8);
    color: transparent;
}

.dock-trash-icon::before {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: -5px;
    height: 7px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #f6f9f8, #c7d0cf);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.dock-trash-icon::after {
    content: '';
    position: absolute;
    inset: 8px 9px 6px;
    background:
        linear-gradient(90deg, transparent 0 23%, rgba(95,108,106,0.38) 24% 27%, transparent 28% 48%, rgba(95,108,106,0.38) 49% 52%, transparent 53% 73%, rgba(95,108,106,0.38) 74% 77%, transparent 78%);
}

.dock-cliptime-icon {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 50%, #77d4ff 0 32%, #1b86df 33% 54%, transparent 55%),
        linear-gradient(145deg, #272a2f, #090b0d);
}

.dock-cliptime-icon::before {
    content: '';
    position: absolute;
    left: 54%;
    top: 50%;
    width: 32%;
    height: 36%;
    background: #f8fbff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.24));
    transform: translate(-50%, -50%);
    z-index: 2;
}

.dock-cliptime-icon::after {
    content: '';
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
}

.dock-photos-icon {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 14%, transparent 15%),
        conic-gradient(from 0deg, #ff3f5f, #ff9d2e, #ffe15a, #49c266, #23b9ff, #7a69ff, #ff4bb8, #ff3f5f);
}

.dock-photos-icon::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 20%, transparent 21%),
        conic-gradient(from 20deg, rgba(255,255,255,0.82), rgba(255,255,255,0.08), rgba(255,255,255,0.82));
    mix-blend-mode: screen;
}

.dock-notes-icon {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    background:
        linear-gradient(180deg, #ffe371 0 24%, #fffdf6 25% 100%);
}

.dock-notes-icon::before {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 15px;
    height: 1px;
    background: rgba(176,122,30,0.34);
    box-shadow:
        0 6px 0 rgba(176,122,30,0.22),
        0 12px 0 rgba(176,122,30,0.18),
        0 18px 0 rgba(176,122,30,0.14);
}

.dock-notes-icon::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 4px;
    width: 20px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
}

.dock-textedit-icon {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff, #dce8f4);
}

.dock-textedit-icon::before {
    content: 'A';
    position: absolute;
    left: 50%;
    top: 50%;
    color: #315f8e;
    font: 700 1.4rem/1 var(--font-serif);
    transform: translate(-50%, -48%);
}

.dock-textedit-icon::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 8px;
    width: 9px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f6c45e, #b86b2c);
    transform: rotate(35deg);
}

.desktop-app-window {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: var(--desktop-window-top);
    bottom: auto;
    z-index: 30;
    width: auto;
    height: var(--desktop-window-height);
    max-height: none;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(22, 19, 13, 0.16);
    border-radius: 14px;
    background: #f9f8f4;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 26px 80px rgba(22, 19, 13, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.8);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    transform: translateY(0.45rem) scale(0.985);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.desktop-app-window.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.desktop-app-window.is-minimized,
.desktop-app-window.is-closing {
    opacity: 0;
    pointer-events: none;
    transform: translateY(5.6rem) scale(0.08);
}

.desktop-app-header {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0.85rem;
    background:
        linear-gradient(180deg, #fbfaf6, #e8e4db);
    border-bottom: 1px solid rgba(22, 19, 13, 0.12);
}

.desktop-app-header button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.16);
}

.app-window-close { background: #ff5f57; }
.app-window-minimize { background: #ffbd2e; }
.app-window-zoom { background: #28c840; }

.app-window-title {
    flex: 1;
    text-align: center;
    transform: translateX(-27px);
    font: 0.72rem/1 var(--font-mono);
    color: var(--graphite);
}

.desktop-app-body {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow: auto;
    color: var(--ink);
    background: #f9f8f4;
}

.desktop-app-body.is-flush {
    padding: 0;
    overflow: hidden;
}

.seeker-window {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 100%;
    height: 100%;
    margin: 0;
    background: #f9f8f4;
    isolation: isolate;
}

.seeker-sidebar {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1rem 0.75rem;
    border-right: 1px solid rgba(22, 19, 13, 0.12);
    background: #eeeae1;
    color: var(--graphite);
    font: 0.72rem/1.2 var(--font-mono);
}

.seeker-sidebar span {
    margin-bottom: 0.2rem;
    color: var(--graphite-soft);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.seeker-sidebar button,
.photos-sidebar button,
.notes-folders button {
    padding: 0.42rem 0.55rem;
    border-radius: 7px;
    font-weight: 500;
    text-align: left;
    color: var(--graphite);
}

.seeker-sidebar button.is-active,
.seeker-sidebar button:hover,
.photos-sidebar button.is-active,
.photos-sidebar button:hover,
.notes-folders button.is-active,
.notes-folders button:hover {
    background: rgba(48, 95, 142, 0.12);
    color: var(--ink);
}

.seeker-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.seeker-toolbar {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: 0.45rem;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid rgba(22, 19, 13, 0.1);
    background: #f5f2ea;
}

.seeker-toolbar button {
    min-height: 27px;
    padding: 0 0.48rem;
    border: 1px solid rgba(22, 19, 13, 0.1);
    border-radius: 7px;
    background: #fffdf8;
    color: var(--graphite);
    font: 0.62rem/1 var(--font-mono);
}

.seeker-toolbar [data-seeker-back] {
    display: grid;
    place-items: center;
    padding: 0;
}

.seeker-toolbar [data-seeker-back]::before {
    content: '‹';
    font-size: 1.1rem;
    line-height: 1;
}

.seeker-path {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--graphite);
    font: 0.65rem/1 var(--font-mono);
}

.seeker-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    align-content: start;
    gap: 1rem 0.85rem;
    padding: 1rem;
    background: #f9f8f4;
    min-height: 100%;
    overflow: auto;
}

.seeker-content.is-gallery-view {
    display: block;
    padding: 0;
    overflow: hidden;
}

.seeker-content.is-list-view {
    display: block;
    padding: 0;
    overflow: auto;
}

.seeker-list-header,
.seeker-list-item {
    display: grid;
    grid-template-columns: 32px minmax(170px, 1.35fr) minmax(90px, 0.55fr) minmax(180px, 1fr);
    align-items: center;
}

.seeker-list-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 30px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(22,19,13,0.11);
    background: rgba(247,246,242,0.96);
    color: var(--graphite-soft);
    font: 0.56rem/1 var(--font-mono);
}

.seeker-list-item {
    position: relative;
    width: 100%;
    min-height: 38px;
    padding: 4px 12px;
    border-bottom: 1px solid rgba(22,19,13,0.06);
    color: var(--graphite);
    text-align: left;
    font: 0.61rem/1.25 var(--font-mono);
}

.seeker-list-item:hover,
.seeker-list-item.is-selected { background: rgba(48,95,142,0.11); }
.seeker-list-item strong { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.seeker-list-item small { min-width: 0; overflow: hidden; color: var(--graphite-soft); text-overflow: ellipsis; white-space: nowrap; }

.seeker-list-icon {
    width: 28px;
    height: 24px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.seeker-list-thumbnail {
    width: 27px;
    height: 21px;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: #e4e7e9;
    box-shadow: 0 2px 5px rgba(22,19,13,0.16), inset 0 0 0 1px rgba(255,255,255,0.75);
}

.seeker-list-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.seeker-list-thumbnail.is-skill {
    width: 23px;
    height: 23px;
    padding: 2px;
    border-radius: 6px;
    background: #fff;
}

.seeker-list-thumbnail.is-skill img { object-fit: contain; }

.seeker-list-folder-icon {
    position: relative;
    width: 26px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, #76bfff, #2384df);
    box-shadow: 0 2px 5px rgba(35,132,223,0.23), inset 0 1px rgba(255,255,255,0.5);
}

.seeker-list-folder-icon::before {
    content: '';
    position: absolute;
    left: 2px;
    top: -3px;
    width: 11px;
    height: 5px;
    border-radius: 3px 3px 0 0;
    background: #94ccff;
}

.seeker-list-file-icon {
    position: relative;
    width: 19px;
    height: 23px;
    display: block;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff, #e7ebee);
    box-shadow: 0 2px 5px rgba(22,19,13,0.15), inset 0 0 0 1px rgba(22,19,13,0.08);
}

.seeker-list-file-icon::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 7px;
    height: 1px;
    background: #9fb3c4;
    box-shadow: 0 4px #b8c6d1, 0 8px #ccd5dc;
}

.seeker-list-file-icon.is-video {
    width: 27px;
    height: 21px;
    background: linear-gradient(145deg, #55aef4, #1769bc);
    box-shadow: 0 2px 5px rgba(22,19,13,0.2), inset 0 0 0 2px #303943;
}

.seeker-list-file-icon.is-video::before {
    left: 11px;
    right: auto;
    top: 6px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #fff;
    background: transparent;
    box-shadow: none;
}

.seeker-list-file-icon.is-link::after {
    content: '\2197';
    position: absolute;
    right: 2px;
    top: 1px;
    color: #315f8e;
    font: 700 8px/1 var(--font-mono);
}

.seeker-gallery-view {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(42px, auto) 92px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #f9f8f4;
}

.seeker-gallery-preview {
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0.75rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, #ffffff, #f5f3ed);
    border-bottom: 1px solid rgba(22,19,13,0.1);
}

.seeker-gallery-media {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
}

.seeker-gallery-nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 34px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(22,19,13,0.1);
    border-radius: 11px;
    background: rgba(255,255,255,0.84);
    box-shadow: 0 4px 15px rgba(22,19,13,0.12);
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.seeker-gallery-nav::before {
    content: '';
    width: 9px;
    height: 9px;
    border-left: 2px solid #353331;
    border-bottom: 2px solid #353331;
    transform: rotate(45deg) translate(1px, -1px);
}

.seeker-gallery-nav.is-prev { left: 12px; }
.seeker-gallery-nav.is-next { right: 12px; }
.seeker-gallery-nav.is-next::before { transform: rotate(225deg) translate(1px, -1px); }
.seeker-gallery-nav:hover { background: rgba(255,255,255,0.96); }

.seeker-gallery-preview img,
.seeker-gallery-preview video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(22,19,13,0.16);
}

.seeker-gallery-info {
    display: grid;
    gap: 0.12rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid rgba(22,19,13,0.1);
    color: var(--graphite);
    font: 0.62rem/1.3 var(--font-mono);
}

.seeker-gallery-info strong {
    color: var(--ink);
    font-size: 0.72rem;
}

.seeker-gallery-info small {
    color: var(--graphite-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seeker-gallery-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86px;
    gap: 0.5rem;
    height: 92px;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.55rem 0.7rem;
    background: #eeeae1;
}

.seeker-gallery-strip-item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.35rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--graphite);
    font: 0.52rem/1.15 var(--font-mono);
}

.seeker-gallery-strip-item.is-selected,
.seeker-gallery-strip-item:hover {
    background: rgba(48,95,142,0.12);
    border-color: rgba(48,95,142,0.2);
}

.seeker-gallery-strip-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seeker-gallery-document {
    width: min(360px, 100%);
    max-height: 100%;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1rem;
    overflow: hidden;
}

.seeker-gallery-document pre {
    width: 100%;
    max-height: 130px;
    overflow: hidden;
    white-space: pre-wrap;
    border: 1px solid rgba(22,19,13,0.1);
    border-radius: 6px;
    padding: 0.7rem;
    background: #fffdf8;
    color: var(--graphite);
    font: 0.58rem/1.35 var(--font-mono);
}

.seeker-quicklook {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgba(22,19,13,0.22);
}

.seeker-quicklook.is-open {
    display: grid;
}

.seeker-quicklook-panel {
    width: min(620px, 100%);
    height: min(360px, 100%);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    background: rgba(248,247,242,0.94);
    box-shadow: 0 28px 90px rgba(22,19,13,0.34);
}

.seeker-quicklook-media {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0,0,0,0.86);
}

.seeker-quicklook-media img,
.seeker-quicklook-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.seeker-quicklook-meta {
    display: grid;
    gap: 0.14rem;
    padding: 0.65rem 0.85rem;
    color: var(--graphite);
    font: 0.64rem/1.3 var(--font-mono);
}

.seeker-quicklook-meta strong {
    color: var(--ink);
}

.seeker-quicklook-close {
    position: absolute;
    right: 0.65rem;
    top: 0.65rem;
    z-index: 3;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.seeker-quicklook-close::before,
.seeker-quicklook-close::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 13px;
    height: 2px;
    background: #16130d;
}

.seeker-quicklook-close::before { transform: rotate(45deg); }
.seeker-quicklook-close::after { transform: rotate(-45deg); }

.seeker-item small {
    max-width: 100%;
    min-height: 1.1em;
    color: var(--graphite-soft);
    font: 0.58rem/1.25 var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seeker-folder {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.42rem;
    text-align: center;
}

.seeker-folder h4 {
    margin: 0 0 0.35rem;
    color: var(--ink);
    font-size: 0.84rem;
}

.seeker-folder p {
    margin: 0;
    color: var(--graphite);
    font-size: 0.68rem;
    line-height: 1.36;
}

.finder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 1rem;
    align-items: start;
}

.finder-item {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    text-align: center;
    font: 0.68rem/1.25 var(--font-mono);
    color: var(--graphite);
}

.finder-item-button {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: 0.5rem 0.35rem;
    transition: background 0.14s ease, border-color 0.14s ease;
}

.finder-item-button.is-selected,
.finder-item-button:hover {
    background: rgba(48, 95, 142, 0.11);
    border-color: rgba(48, 95, 142, 0.2);
}

.finder-folder,
.finder-file {
    width: 58px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(180deg, #77bfff, #2384df);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 7px 16px rgba(35,132,223,0.24);
    position: relative;
}

.finder-project-folder {
    width: 62px;
    height: 48px;
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25), transparent 45%),
        var(--project-cover) center / cover,
        linear-gradient(180deg, #77bfff, #2384df);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.42),
        0 7px 16px rgba(22,19,13,0.18);
    position: relative;
    overflow: hidden;
}

.finder-project-folder::before {
    content: '';
    position: absolute;
    left: 5px;
    top: -6px;
    width: 26px;
    height: 11px;
    border-radius: 7px 7px 0 0;
    background: #88c8ff;
}

.finder-project-folder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,0.42));
}

.finder-folder::before {
    content: '';
    position: absolute;
    left: 5px;
    top: -7px;
    width: 25px;
    height: 12px;
    border-radius: 7px 7px 0 0;
    background: #94ccff;
}

.finder-file {
    height: 58px;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff, #e8ecef);
    box-shadow: inset 0 0 0 1px rgba(22,19,13,0.08), 0 7px 16px rgba(22,19,13,0.12);
}

.finder-skill-file {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(22,19,13,0.08),
        0 7px 16px rgba(22,19,13,0.14);
}

.finder-skill-file img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 0.34rem;
}

.skill-icon-javascript,
.skill-icon-typescript,
.skill-icon-html,
.skill-icon-css,
.skill-icon-ajax,
.skill-icon-api,
.skill-icon-smithy,
.skill-icon-gateway,
.skill-icon-stepfunctions,
.skill-icon-sql,
.skill-icon-documentdb,
.skill-icon-s3,
.skill-icon-cordova,
.skill-icon-detox,
.skill-icon-lambda,
.skill-icon-emr,
.skill-icon-ec2,
.skill-icon-cloudformation,
.skill-icon-cdk,
.skill-icon-sst {
    background: transparent;
}

.skill-icon-nextjs,
.skill-icon-linux {
    background: #ffffff;
}

.finder-image-file {
    width: 60px;
    height: 48px;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #e8ecef;
    position: relative;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7), 0 7px 16px rgba(22,19,13,0.14);
}

.finder-image-file img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.finder-link-file {
    width: 54px;
    height: 58px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #e8ecef);
    box-shadow: inset 0 0 0 1px rgba(22,19,13,0.08), 0 7px 16px rgba(22,19,13,0.12);
    position: relative;
}

.finder-link-file::before {
    content: '↗';
    position: absolute;
    right: 7px;
    top: 5px;
    color: #315f8e;
    font: 700 1rem/1 var(--font-mono);
}

.finder-link-file::after {
    content: '$';
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: var(--graphite);
    font: 700 1.2rem/1 var(--font-mono);
}

.finder-file::before {
    content: '';
    position: absolute;
    inset: 9px 10px auto;
    height: 3px;
    border-radius: 999px;
    background: rgba(48,95,142,0.42);
    box-shadow: 0 9px 0 rgba(48,95,142,0.26), 0 18px 0 rgba(48,95,142,0.18);
}

.finder-video-file::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid rgba(248,251,255,0.92);
    transform: translate(-38%, -50%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.32));
}

.finder-video-file {
    width: 60px;
    height: 48px;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.1) 0 13%, transparent 13% 87%, rgba(255,255,255,0.1) 87%),
        linear-gradient(180deg, #38404a, #14181d);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 7px 16px rgba(22,19,13,0.16);
}

.finder-video-file::before {
    content: '';
    position: absolute;
    inset: 5px 6px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.78) 0 3px, transparent 3px 8px) left / 5px 100% no-repeat,
        repeating-linear-gradient(0deg, rgba(255,255,255,0.78) 0 3px, transparent 3px 8px) right / 5px 100% no-repeat,
        linear-gradient(145deg, #6abfff, #1769bc);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.photos-window,
.notes-window {
    display: grid;
    height: 100%;
    min-height: 0;
    background: #f8f7f2;
}

.photos-window {
    grid-template-columns: 148px minmax(0, 1fr);
}

.photos-sidebar,
.notes-folders {
    display: grid;
    align-content: start;
    gap: 0.38rem;
    padding: 0.85rem 0.7rem;
    border-right: 1px solid rgba(22,19,13,0.12);
    background: rgba(238,234,225,0.92);
    color: var(--graphite);
    font: 0.68rem/1.2 var(--font-mono);
}

.photos-sidebar span,
.notes-folders span {
    margin: 0.25rem 0 0.12rem;
    color: var(--graphite-soft);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.photos-main {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.photos-toolbar,
.notes-toolbar,
.notes-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid rgba(22,19,13,0.1);
    background: #f5f2ea;
}

.photos-segments {
    display: inline-flex;
    padding: 2px;
    border: 1px solid rgba(22,19,13,0.1);
    border-radius: 8px;
    background: #e9e5dc;
}

.photos-segments button {
    min-height: 26px;
    padding: 0 0.48rem;
    border-radius: 6px;
    color: var(--graphite);
    font: 0.6rem/1 var(--font-mono);
}

.photos-segments button.is-active {
    background: #fffdf8;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(22,19,13,0.1);
}

.photos-toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
}

.photos-toolbar input,
.notes-toolbar input {
    width: clamp(78px, 18vw, 150px);
    min-height: 27px;
    border: 1px solid rgba(22,19,13,0.1);
    border-radius: 7px;
    padding: 0 0.55rem;
    background: #fffdf8;
    color: var(--ink);
    font: 0.62rem/1 var(--font-mono);
}

.photos-toolbar-actions button,
.notes-toolbar button,
.notes-editor-toolbar button {
    width: 27px;
    height: 27px;
    border: 1px solid rgba(22,19,13,0.1);
    border-radius: 7px;
    background: #fffdf8;
    color: var(--graphite);
    position: relative;
}

.notes-editor-toolbar [data-notes-action="share"]::before {
    content: '↗';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 0.75rem/1 var(--font-mono);
}

.photos-status {
    padding: 0.45rem 0.75rem 0;
    color: var(--graphite-soft);
    font: 0.6rem/1 var(--font-mono);
}

.photos-grid {
    min-height: 0;
    overflow: auto;
    padding: 0.7rem 0.75rem 1rem;
}

.photos-group + .photos-group {
    margin-top: 1rem;
}

.photos-group h4 {
    margin: 0 0 0.45rem;
    font: 600 0.74rem/1 var(--font-mono);
    color: var(--ink);
}

.photos-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.55rem;
}

.photos-thumb {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    padding: 0.28rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    text-align: left;
}

.photos-thumb:hover {
    background: rgba(48, 95, 142, 0.1);
    border-color: rgba(48, 95, 142, 0.18);
}

.photos-thumb img,
.photos-thumb video {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: #e5e0d7;
    box-shadow: inset 0 0 0 1px rgba(22,19,13,0.08);
}

.photos-thumb > span:not(.photos-favorite) {
    color: var(--graphite);
    font: 0.56rem/1.2 var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photos-favorite {
    position: absolute;
    top: 0.48rem;
    right: 0.48rem;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.84);
    box-shadow: 0 2px 8px rgba(22,19,13,0.16);
}

.photos-empty {
    min-height: 210px;
    display: grid;
    place-content: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--graphite);
}

.photos-empty strong {
    color: var(--ink);
    font-size: 0.86rem;
}

.photos-empty span {
    max-width: 34ch;
    font-size: 0.68rem;
    line-height: 1.45;
}

.photos-viewer {
    position: absolute;
    inset: 42px 0 0;
    z-index: 5;
    display: none;
    grid-template-rows: minmax(0, 1fr) auto;
    background: rgba(18,18,18,0.94);
}

.photos-viewer.is-open {
    display: grid;
}

.photos-viewer img,
.photos-viewer video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.photos-viewer-close {
    position: absolute;
    right: 0.7rem;
    top: 0.7rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
}

.photos-viewer-close::before,
.photos-viewer-close::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 13px;
    height: 2px;
    background: #16130d;
}

.photos-viewer-close::before { transform: rotate(45deg); }
.photos-viewer-close::after { transform: rotate(-45deg); }

.photos-viewer-caption {
    display: grid;
    gap: 0.16rem;
    padding: 0.65rem 0.85rem;
    background: rgba(0,0,0,0.45);
    color: rgba(248,247,242,0.86);
    font: 0.64rem/1.3 var(--font-mono);
}

.photos-viewer-caption span {
    color: rgba(248,247,242,0.62);
}

.notes-window {
    grid-template-columns: 126px 190px minmax(0, 1fr);
}

.notes-list-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border-right: 1px solid rgba(22,19,13,0.1);
    background: #f7f4ec;
}

.notes-list {
    min-height: 0;
    overflow: auto;
    padding: 0.45rem;
}

.notes-list-item {
    width: 100%;
    display: grid;
    gap: 0.18rem;
    padding: 0.55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
}

.notes-list-item:hover,
.notes-list-item.is-selected {
    background: rgba(255, 218, 90, 0.22);
    border-color: rgba(176,122,30,0.18);
}

.notes-list-item strong,
.notes-list-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-list-item strong {
    color: var(--ink);
    font: 600 0.68rem/1.25 var(--font-mono);
    white-space: nowrap;
}

.notes-list-item time {
    color: var(--graphite-soft);
    font: 0.56rem/1 var(--font-mono);
}

.notes-list-item span {
    color: var(--graphite);
    font: 0.58rem/1.3 var(--font-mono);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notes-window[data-notes-view="gallery"] .notes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    align-content: start;
    gap: 0.45rem;
}

.notes-window[data-notes-view="gallery"] .notes-list-item {
    min-height: 118px;
    background:
        linear-gradient(180deg, rgba(255,227,113,0.38), rgba(255,253,246,0.9));
}

.notes-toolbar [data-notes-action="new"]::before {
    content: '+';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 1rem/1 var(--font-mono);
}

.notes-toolbar [data-notes-action="gallery"]::before {
    content: '▦';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.notes-editor {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: #fffdf6;
}

.notes-editor-toolbar {
    justify-content: flex-end;
}

.notes-editor-toolbar [data-notes-action="pin"]::before { content: '⌖'; }
.notes-editor-toolbar [data-notes-action="checklist"]::before { content: '✓'; }
.notes-editor-toolbar [data-notes-action="lock"]::before { content: '⌘'; }
.notes-editor-toolbar [data-notes-action="pin"]::before,
.notes-editor-toolbar [data-notes-action="checklist"]::before,
.notes-editor-toolbar [data-notes-action="lock"]::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 0.78rem/1 var(--font-mono);
}

.notes-paper {
    position: relative;
    min-height: 0;
    overflow: auto;
    padding: clamp(1rem, 3vw, 1.6rem);
    color: var(--ink);
    background:
        linear-gradient(90deg, rgba(255,227,113,0.16) 0 1px, transparent 1px) 0 0 / 28px 28px,
        #fffdf6;
}

.notes-paper-share {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    color: #68666a;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 150ms ease, transform 150ms ease, color 150ms ease;
}
.notes-paper-share svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.notes-paper:hover .notes-paper-share,
.notes-paper-share:focus-visible { opacity: 1; transform: scale(1); }
.notes-paper-share:hover { color: #c8423b; }

@media (pointer: coarse) {
    .notes-paper-share { opacity: 1; transform: scale(1); }
}

.notes-paper time {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--graphite-soft);
    font: 0.62rem/1 var(--font-mono);
}

.notes-paper h3 {
    margin: 0;
    color: var(--ink);
    font: 400 clamp(1.35rem, 4vw, 2.4rem)/0.98 var(--font-serif);
    font-style: italic;
}

.notes-paper-excerpt {
    margin: 0.55rem 0 1rem;
    color: var(--graphite);
    font: 0.72rem/1.45 var(--font-mono);
}

.notes-paper-body {
    color: var(--ink-soft);
    font: 0.74rem/1.55 var(--font-mono);
}

.notes-paper-body p,
.notes-paper-body h2,
.notes-paper-body pre,
.notes-paper-body figure {
    margin: 0 0 0.8rem;
}

.notes-paper-body img {
    max-width: 100%;
    border-radius: 8px;
}

.notes-paper-body pre {
    overflow: auto;
    padding: 0.8rem;
    border-radius: 8px;
    background: #181818;
    color: var(--paper);
}

.notes-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1rem;
}

.notes-tags span {
    color: var(--graphite);
    font: 0.62rem/1 var(--font-mono);
}

.notes-empty {
    padding: 0.75rem;
    color: var(--graphite);
    font: 0.68rem/1.4 var(--font-mono);
}

.textedit-window {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    background: #f2f1ed;
    color: #1d1d1f;
}

.textedit-filebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    background: linear-gradient(180deg, #fbfbfa, #e5e4e1);
    font: 0.68rem/1.2 var(--font-ui);
}

.textedit-filebar [data-textedit-filename] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #242424;
    font-weight: 600;
}

.textedit-filebar small {
    color: #7b7b7b;
    white-space: nowrap;
}

.textedit-scroll {
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.15rem 1.25rem;
    background: #ffffff;
}

.textedit-page {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: 0.8rem/1.58 var(--font-ui);
}

.textedit-page pre {
    margin: 0;
    white-space: pre-wrap;
    color: #1d1d1f;
    font: 0.78rem/1.55 Menlo, Consolas, monospace;
}

.textedit-document-header {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 0.85rem;
}

.textedit-document-header p {
    margin: 0 0 0.2rem;
    color: #777;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.textedit-document-header h1 {
    margin: 0;
    color: #1d1d1f;
    font: 700 1.38rem/1.08 var(--font-ui);
}

.textedit-document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.textedit-document-meta span {
    padding: 0.18rem 0.36rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 999px;
    background: #f5f5f3;
    color: #555;
    font-size: 0.58rem;
}

.textedit-page section + section {
    margin-top: 0.9rem;
}

.textedit-page h2 {
    margin: 0 0 0.35rem;
    color: #1d1d1f;
    font: 700 0.82rem/1.2 var(--font-ui);
}

.textedit-page p,
.textedit-page ul,
.textedit-page ol {
    margin: 0 0 0.55rem;
}

.textedit-page ul,
.textedit-page ol {
    padding-left: 1.15rem;
}

.textedit-page li {
    list-style: disc;
    margin: 0.18rem 0;
}

.textedit-page ol li {
    list-style: decimal;
}

.textedit-page code {
    display: inline-block;
    margin: 0 0.2rem 0.25rem 0;
    padding: 0.15rem 0.32rem;
    border-radius: 4px;
    background: #f0f0ee;
    color: #333;
    font: 0.66rem/1.2 Menlo, Consolas, monospace;
}

.desktop-toast {
    position: absolute;
    left: 50%;
    bottom: 5.35rem;
    z-index: 2200;
    max-width: min(420px, calc(100% - 2rem));
    padding: 0.58rem 0.75rem;
    border: 1px solid rgba(22,19,13,0.1);
    border-radius: 999px;
    background: rgba(255,253,248,0.92);
    color: var(--ink);
    box-shadow: 0 14px 34px rgba(22,19,13,0.16);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(0.5rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
    font: 0.64rem/1.3 var(--font-mono);
    text-align: center;
}

.desktop-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quicktime-window {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    margin: 0;
    padding: 0;
    background:
        linear-gradient(180deg, #2b2f34, #121416);
    color: #f8f7f2;
}

.quicktime-screen {
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.07), transparent 32%),
        #050505;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}

.quicktime-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #050505;
}

.quicktime-crash-caption {
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 7%, 54px);
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.34em;
    padding: 0.48em 0.72em 0.54em;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(8,10,12,0.54);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    font: 600 clamp(0.72rem, 2vw, 1.08rem)/1.1 var(--font-ui);
    letter-spacing: -0.015em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.quicktime-crash-caption.is-active {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.quicktime-crash-ellipsis {
    display: inline-flex;
    gap: 0.04em;
    margin: 0 -0.2em;
}

.quicktime-crash-caption [data-crash-token] {
    display: none;
}

.quicktime-crash-caption [data-crash-token].is-visible {
    display: inline-block;
    animation: crash-caption-word-in 0.42s cubic-bezier(0.18, 0.8, 0.24, 1.16) both;
}

@keyframes crash-caption-word-in {
    from { opacity: 0; filter: blur(5px); transform: translateY(9px) scale(0.9); }
    to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

.quicktime-controls {
    display: grid;
    grid-template-columns: 30px minmax(90px, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.52rem 0.75rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)),
        #202327;
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.quicktime-control {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 5px 12px rgba(0,0,0,0.24);
}

.quicktime-play span {
    width: 12px;
    height: 14px;
    border-left: 4px solid #f8f7f2;
    border-right: 4px solid #f8f7f2;
}

.quicktime-play.is-paused span {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 12px solid #f8f7f2;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: none;
}

.quicktime-scrubber {
    --progress: 0%;
    width: 100%;
    height: 4px;
    appearance: none;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #63c8ff var(--progress), rgba(255,255,255,0.22) var(--progress));
    outline: none;
}

.quicktime-scrubber::-webkit-slider-thumb {
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    background: linear-gradient(180deg, #ffffff, #cfd6dc);
    box-shadow: 0 1px 5px rgba(0,0,0,0.38);
}

.quicktime-scrubber::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    background: linear-gradient(180deg, #ffffff, #cfd6dc);
    box-shadow: 0 1px 5px rgba(0,0,0,0.38);
}

.quicktime-time {
    color: rgba(248,247,242,0.74);
    font: 0.62rem/1 var(--font-mono);
    white-space: nowrap;
}

.safari-window {
    display: grid;
    gap: 0.8rem;
    background: #f9f8f4;
    isolation: isolate;
}

.safari-address {
    border: 1px solid rgba(22, 19, 13, 0.12);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    background: #ffffff;
    color: var(--graphite);
    font: 0.72rem/1 var(--font-mono);
}

.safari-page {
    min-height: 250px;
    border: 1px solid rgba(22, 19, 13, 0.12);
    border-radius: 12px;
    padding: 1rem;
    background:
        linear-gradient(180deg, #ffffff, #f6f4ee);
    isolation: isolate;
}

.safari-page h4 {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 0.95;
}

.safari-page p {
    max-width: 62ch;
    margin: 0.75rem 0 1rem;
    color: var(--graphite);
    line-height: 1.48;
}

.safari-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.safari-links span {
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(22, 19, 13, 0.12);
    border-radius: 999px;
    font: 0.65rem/1 var(--font-mono);
    color: var(--graphite);
}

.trash-note {
    margin: 0 0 1rem;
    color: var(--graphite);
    font-size: 0.86rem;
    line-height: 1.45;
}

.terminal-scrub-container.is-docked .terminal,
.terminal-scrub-container.is-closed .terminal {
    opacity: 0;
    border-radius: 14px;
    transform: translateY(5.6rem) scale(0.08);
    pointer-events: none;
}

.terminal-scrub-container.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 20000;
    width: auto;
    max-width: none;
    margin: 0;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    background: rgba(244, 241, 234, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.terminal-scrub-container.is-fullscreen .terminal {
    width: 100%;
    height: var(--desktop-window-height);
    min-height: 0;
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(244, 241, 234, 0.08),
        0 34px 120px rgba(0, 0, 0, 0.42);
}

.terminal-scrub-container.is-fullscreen .terminal-desktop {
    width: min(calc(100vw - clamp(1.5rem, 4vw, 3rem)), calc((100vh - clamp(1.5rem, 4vw, 3rem)) * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
}

body.hero-terminal-fullscreen {
    overflow: hidden;
}

body.hero-terminal-fullscreen .nav {
    opacity: 0;
    pointer-events: none;
}

/* Bio links */
.bio-links {
    display: flex;
    gap: 0;
    margin: clamp(0.75rem, 1.7vh, 1.15rem) auto 0;
    position: relative;
    z-index: 30;
    overflow: hidden;
    border: 1px solid rgba(22,19,13,0.11);
    border-radius: 11px;
    background: rgba(255,255,255,0.42);
    width: var(--hero-stage-width);
    max-width: none;
}

.bio-link {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.005em;
    padding: 0.62rem 0;
    flex: 1;
    border-right: var(--rule);
    transition: color 0.2s, background 0.2s;
    position: relative;
    z-index: 31;
    text-align: center;
    color: var(--ink);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bio-link:last-child { border-right: none; }

.bio-link:hover {
    color: var(--vermillion);
    background: var(--hair-soft);
}

/* ============================================
   GALLERY (grid base; detail in components.css)
   ============================================ */
.gallery-container-center {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding-top: clamp(4.75rem, 10vh, 7rem);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 18vw, 240px), 1fr));
    grid-auto-flow: dense;
    gap: clamp(0.45rem, 1vw, 0.75rem);
    flex: 1;
    overflow: visible;
    align-content: start;
    max-height: none;
}

.gallery-grid:empty::before {
    content: 'awaiting exposure — drop frames into assets/gallery/';
    color: var(--graphite-soft);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    text-align: center;
    grid-column: 1 / -1;
    padding: 3rem 0;
}

/* ============================================
   EASTER EGG — BLUEPRINT (CYANOTYPE) MODE
   ============================================ */
body.blueprint-mode {
    background-color: var(--cyanotype-paper);
    background-image:
        /* blueprint measure grid */
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(180deg, #0d2a3a 0%, #0a2230 100%);
    background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px, auto;
    background-attachment: fixed;
    color: #d8eef6;
}

body.blueprint-mode::before {
    opacity: 0.06;
    mix-blend-mode: screen;
}

body.blueprint-mode,
body.blueprint-mode .terminal-content {
    color: #d8eef6;
}

body.blueprint-mode .nav,
body.blueprint-mode .site-progress,
body.blueprint-mode .footer-minimal {
    border-color: rgba(255,255,255,0.2) !important;
}

body.blueprint-mode .nav-logo,
body.blueprint-mode .nav-links a,
body.blueprint-mode .bio-name,
body.blueprint-mode .section-header-title,
body.blueprint-mode .massive-section-title,
body.blueprint-mode .project-title,
body.blueprint-mode .project-card-title,
body.blueprint-mode h1, body.blueprint-mode h2, body.blueprint-mode h3 {
    color: #ffffff !important;
}

body.blueprint-mode .section-header-title,
body.blueprint-mode .massive-section-title {
    opacity: 0.1 !important;
}

body.blueprint-mode .bio-role,
body.blueprint-mode .bio-greeting,
body.blueprint-mode .mono-label,
body.blueprint-mode .graphite-text {
    color: #8fc4d6 !important;
}

body.blueprint-mode .bio-link {
    border-color: rgba(255,255,255,0.18) !important;
    color: #d8eef6 !important;
}

body.blueprint-mode .bio-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

/* cyanotype duotone on imagery */
body.blueprint-mode img,
body.blueprint-mode video {
    filter: grayscale(1) brightness(0.85) sepia(1) hue-rotate(155deg) saturate(2.2) brightness(0.95);
}

body.blueprint-mode .terminal {
    background: #07202c;
    box-shadow: 0 0 0 1px rgba(143,196,214,0.4), 6px 6px 0 0 rgba(143,196,214,0.18);
}

body.blueprint-mode .gallery-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.22) !important;
}

/* A toast confirming the mode */
.blueprint-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cyanotype-deep);
    color: #d8eef6;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.65rem 1.1rem;
    border: 1px solid rgba(255,255,255,0.25);
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.blueprint-toast.show { opacity: 1; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 519px) {
    :root {
        --container-padding: clamp(1rem, 5vw, 1.5rem);
        --nav-height: 42px;
    }

    body {
        font-size: 0.875rem;
    }

    .section-scroll-track {
        min-height: calc(var(--viewport-height) * 1.35);
        overflow: visible;
    }

    .section-scroll-track + .section-scroll-track {
        border-top: var(--rule);
    }

    .section-header-layer {
        position: fixed;
        inset: 0;
        height: auto;
        align-items: center;
        overflow: visible;
    }

    .section-header-title {
        width: max-content;
        max-width: none;
        margin-block: -0.2em;
        padding: 0.2em 0.18em;
        font-size: clamp(4.5rem, 22vw, 7.2rem);
        white-space: nowrap;
        overflow: visible;
    }

    .section-header-char {
        flex: 0 0 auto;
        padding-block: 0.12em;
        margin-block: -0.12em;
        overflow: visible;
        backface-visibility: hidden;
    }

    #projects .section-header-title {
        font-size: clamp(4rem, 18vw, 5.8rem);
    }

    .section-sticky-view {
        position: sticky;
        height: var(--viewport-height);
        min-height: var(--viewport-height);
        overflow: visible;
    }

    .section-content-wrapper {
        min-height: var(--viewport-height);
        padding: clamp(2rem, 8vw, 3.5rem) 0;
    }

    .next-section-btn {
        display: none;
    }

    #about {
        height: var(--about-track-height, calc(var(--viewport-height) * 1.4));
        min-height: var(--about-track-height, calc(var(--viewport-height) * 1.4));
        margin-bottom: clamp(40px, 6vh, 64px);
    }

    /* Mobile hero refinements */
    .bio-hero.sticky-view {
        padding-top: calc(var(--nav-height) + 0.72rem);
        justify-content: flex-start;
    }

    .bio-container {
        height: calc(var(--viewport-height) - var(--nav-height) - 0.72rem);
    }

    .bio-name {
        margin-bottom: 0.45rem;
    }

    .bio-role {
        font-size: 0.72rem;
        line-height: 1.34;
    }

    .bio-role .muted-role {
        white-space: nowrap;
    }

    .terminal-scrub-container {
        width: 100%;
        max-width: 100%;
        margin: 0.58rem 0 0.48rem;
    }

    .terminal-desktop {
        --desktop-window-top: 2.3rem;
        --desktop-window-height: clamp(240px, 38svh, 330px);
        --desktop-dock-space: 4.2rem;
        aspect-ratio: auto;
        width: 100%;
        min-height: calc(var(--desktop-window-height) + var(--desktop-window-top) + var(--desktop-dock-space));
        padding: var(--desktop-window-top) 0.58rem 3.45rem;
        border-radius: 14px;
    }

    .terminal {
        min-height: var(--desktop-window-height);
        height: var(--desktop-window-height);
        width: 100%;
        margin-left: 0;
        box-shadow:
            0 0 0 1px var(--ink),
            4px 4px 0 0 var(--hair-strong);
    }

    .desktop-icons {
        top: 2.25rem;
        left: 0.7rem;
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        grid-auto-columns: 48px;
        gap: 0.34rem 0.48rem;
        justify-items: center;
    }

    .desktop-app-icon {
        width: 48px;
        gap: 0.18rem;
        padding: 0.18rem 0.12rem;
        border-radius: 8px;
        font-size: 0.46rem;
        line-height: 1.1;
    }

    .desktop-app-glyph {
        width: 31px;
        height: 31px;
        border-radius: 9px;
    }

    .desktop-app-label {
        max-width: 48px;
        padding: 0.08rem 0.16rem;
        font-size: 0.54rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-app-window {
        left: 0.65rem;
        right: 0.65rem;
    }

    .desktop-app-header {
        min-height: 34px;
        padding: 0 0.65rem;
    }

    .app-window-title {
        font-size: 0.66rem;
        transform: translateX(-24px);
    }

    .desktop-app-body {
        padding: 0.75rem;
    }

    .terminal-dock {
        bottom: 0.6rem;
        gap: 0.26rem;
        max-width: calc(100% - 1rem);
        padding: 0.36rem 0.42rem;
        border-radius: 16px;
    }

    .dock-item {
        min-width: 40px;
    }

    .dock-glyph {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: 0.56rem;
    }

    .terminal-content {
        padding: 0.45rem 0.5rem 0.55rem;
        font-size: clamp(0.52rem, 2.56vw, 0.625rem);
        line-height: 1.22;
        overflow-wrap: anywhere;
    }

    .terminal-header {
        min-height: 28px;
    }

    .terminal .terminal-dot {
        width: 9px;
        height: 9px;
    }

    .terminal-title {
        font-size: 0.56rem;
        max-width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .seeker-window {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    .seeker-sidebar {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 0.55rem;
        border-right: none;
        border-bottom: 1px solid rgba(22, 19, 13, 0.12);
        overflow-x: auto;
        scrollbar-width: none;
        font-size: 0.58rem;
    }

    .seeker-sidebar::-webkit-scrollbar {
        display: none;
    }

    .seeker-sidebar span {
        flex: 0 0 auto;
        margin: 0 0.1rem 0 0;
        font-size: 0.5rem;
    }

    .seeker-sidebar button {
        flex: 0 0 auto;
        padding: 0.32rem 0.45rem;
        border-radius: 999px;
        white-space: nowrap;
    }

    .seeker-toolbar {
        grid-template-columns: 26px minmax(0, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding: 0.42rem 0.5rem;
    }

    .seeker-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 0.5rem;
        min-height: 0;
        padding: 0.72rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .seeker-folder {
        gap: 0.28rem;
        min-width: 0;
    }

    .seeker-folder .finder-folder {
        width: 45px;
        height: 34px;
        border-radius: 7px;
    }

    .seeker-folder .finder-folder::before {
        left: 4px;
        top: -6px;
        width: 20px;
        height: 10px;
        border-radius: 6px 6px 0 0;
    }

    .seeker-folder h4 {
        margin-bottom: 0.16rem;
        font-size: 0.64rem;
        line-height: 1.15;
    }

    .seeker-folder p {
        font-size: 0.52rem;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .photos-window,
    .notes-window {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .photos-sidebar,
    .notes-folders {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 0.55rem;
        border-right: none;
        border-bottom: 1px solid rgba(22,19,13,0.12);
        overflow-x: auto;
        scrollbar-width: none;
        font-size: 0.58rem;
    }

    .photos-sidebar::-webkit-scrollbar,
    .notes-folders::-webkit-scrollbar {
        display: none;
    }

    .photos-sidebar span,
    .notes-folders span {
        flex: 0 0 auto;
        margin: 0 0.1rem 0 0;
        font-size: 0.5rem;
    }

    .photos-sidebar button,
    .notes-folders button {
        flex: 0 0 auto;
        padding: 0.32rem 0.45rem;
        border-radius: 999px;
        white-space: nowrap;
    }

    .photos-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 0.4rem;
    }

    .photos-toolbar-actions {
        width: 100%;
        margin-left: 0;
    }

    .photos-toolbar input {
        flex: 1;
        width: auto;
    }

    .photos-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notes-window {
        grid-template-rows: auto 112px minmax(0, 1fr);
    }

    .notes-list-panel {
        display: grid;
        border-right: none;
        border-bottom: 1px solid rgba(22,19,13,0.1);
    }

    .notes-toolbar {
        min-height: 36px;
        padding: 0.35rem 0.5rem;
    }

    .notes-list {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        padding: 0.4rem;
    }

    .notes-list-item {
        flex: 0 0 150px;
    }

    .notes-toolbar input {
        flex: 1;
        width: auto;
    }

    .notes-editor-toolbar {
        justify-content: flex-start;
    }

    .notes-paper {
        padding: 0.9rem;
    }

    .desktop-toast {
        bottom: 4.55rem;
        font-size: 0.58rem;
        border-radius: 12px;
    }

    .terminal-scrub-container.is-fullscreen {
        inset: 0.75rem;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .terminal-scrub-container.is-fullscreen .terminal-desktop {
        width: 100%;
        height: calc(100vh - 1.5rem);
        aspect-ratio: auto;
    }

    .terminal-scrub-container.is-fullscreen .terminal {
        width: 100%;
        height: calc(100vh - 1.5rem);
        min-height: calc(100vh - 1.5rem);
    }

    .bio-links {
        margin-top: 0.42rem;
        max-width: none;
    }

    .bio-link {
        font-size: 0.62rem;
        padding: 0.46rem 0.2rem;
        min-height: 40px;
        letter-spacing: 0.08em;
    }
}

@media (orientation: landscape) and (min-width: 760px) and (max-height: 820px) {
    :root {
        --nav-height: 40px;
    }

    .bio-hero.sticky-view {
        padding-top: calc(var(--nav-height) + 0.55rem);
    }

    .bio-name {
        font-size: clamp(2.6rem, 4.6vw, 4.25rem);
        margin-bottom: 0.42rem;
    }

    .bio-role {
        font-size: 0.78rem;
        line-height: 1.32;
    }

    .terminal-scrub-container {
        margin: 0.55rem auto 0.35rem;
    }

    .terminal-desktop {
        --desktop-window-top: 2.2rem;
        --desktop-dock-space: 4.35rem;
        --desktop-window-height: 100%;
        padding: var(--desktop-window-top) 0.78rem 3.55rem;
    }

    .terminal-scrub-container.is-fullscreen .terminal-desktop {
        --desktop-window-height: 100%;
    }

    .bio-links {
        margin: 0.35rem auto 0;
    }

    .bio-link {
        min-height: 40px;
        padding: 0.48rem 0;
    }
}

@media (orientation: landscape) and (min-width: 760px) and (max-height: 520px) {
    .bio-content { --hero-stage-width: 100%; }

    .terminal-scrub-container {
        width: 100%;
        max-width: 100%;
    }

    .terminal-desktop {
        --desktop-window-height: max(72px, calc(100% - 0.8rem));
        width: 100%;
        height: clamp(170px, 51svh, 220px);
        min-height: 0;
        aspect-ratio: auto;
    }

    .terminal {
        min-height: 0;
    }
}

@media (orientation: portrait) and (max-width: 520px) and (min-aspect-ratio: 9 / 19) {
    .bio-name {
        font-size: clamp(2.85rem, 12.5vw, 4.1rem);
    }

    .terminal-desktop {
        --desktop-window-height: clamp(240px, 37svh, 310px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .section-scroll-track {
        height: auto !important;
        min-height: auto;
        overflow: visible;
        padding: var(--space-xl) 0;
    }

    .section-header-layer {
        position: absolute;
    }

    .section-sticky-view {
        position: relative;
        height: auto;
        min-height: auto;
    }

    .section-content-wrapper {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* macOS desktop simulator: windowing, menu bar, Dock, and Control Center */
.terminal-desktop {
    --desktop-menu-height: 26px;
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 193, 122, 0.84), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(78, 151, 190, 0.72), transparent 34%),
        radial-gradient(circle at 70% 82%, rgba(31, 91, 101, 0.72), transparent 42%),
        linear-gradient(145deg, #e9cda9 0%, #9bc3ca 46%, #315e68 100%);
}

.terminal-desktop::before {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 193, 122, 0.84), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(78, 151, 190, 0.72), transparent 34%),
        radial-gradient(circle at 70% 82%, rgba(31, 91, 101, 0.72), transparent 42%),
        linear-gradient(145deg, #e9cda9 0%, #9bc3ca 46%, #315e68 100%);
}

.desktop-menubar {
    height: var(--desktop-menu-height);
    display: flex;
    grid-template-columns: none;
    gap: 0.08rem;
    padding: 0 0.5rem;
    border-bottom-color: rgba(255, 255, 255, 0.2);
    background: rgba(238, 242, 238, 0.69);
    color: #171717;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(24px) saturate(1.65);
    -webkit-backdrop-filter: blur(24px) saturate(1.65);
    font: 600 0.61rem/1 var(--font-ui);
}

.desktop-menubar button {
    min-height: 23px;
    border-radius: 5px;
    padding: 0 0.42rem;
}

.desktop-menu-logo {
    width: 31px;
    padding: 0 !important;
}

.desktop-menu-logo span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 18px;
    border-radius: 7px 7px 8px 8px;
    background: #171717;
    color: #f7f7f5;
    font: 800 0.55rem/1 var(--font-ui);
    letter-spacing: -0.06em;
}

.desktop-menu-app-name {
    margin: 0 0.38rem 0 0.14rem;
    white-space: nowrap;
    font-weight: 720 !important;
}

.desktop-menu-app-name.is-active {
    background: #2878e0 !important;
    color: #fff !important;
}

.desktop-menu-actions {
    display: flex;
    min-width: 0;
}

.desktop-menu-spacer {
    flex: 1;
}

.desktop-menu-status,
.desktop-menu-time {
    flex: 0 0 auto;
}

.desktop-menu-status {
    gap: 0.52rem;
}

.desktop-control-glyph {
    position: relative;
    width: 18px;
    height: 14px;
    display: inline-block;
}

.desktop-control-glyph i {
    position: absolute;
    left: 1px;
    right: 1px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.desktop-control-glyph i:first-child { top: 3px; }
.desktop-control-glyph i:last-child { bottom: 3px; }

.desktop-control-glyph i::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: rgba(238, 242, 238, 0.92);
    transform: translateY(-50%);
}

.desktop-control-glyph i:first-child::after { right: 3px; }
.desktop-control-glyph i:last-child::after { left: 3px; }

.desktop-wifi.is-off {
    opacity: 0.32;
}

.desktop-popover {
    top: calc(var(--desktop-menu-height) + 0.28rem);
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(235, 237, 235, 0.78);
    box-shadow: 0 24px 70px rgba(12, 24, 25, 0.28), inset 0 1px 0 rgba(255,255,255,0.72);
    backdrop-filter: blur(38px) saturate(1.42);
    -webkit-backdrop-filter: blur(38px) saturate(1.42);
    font-family: var(--font-ui);
}

.desktop-about-menu {
    left: 0.35rem;
    width: 248px;
    gap: 0;
    padding: 0.35rem;
    border-radius: 11px;
}

.desktop-about-menu button {
    min-height: 27px;
    padding: 0.25rem 0.58rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font-size: 0.72rem;
}

.desktop-about-menu button:hover {
    background: #2878e0;
    color: #fff;
}

.desktop-about-menu button span:last-child {
    float: right;
}

.desktop-about-menu [data-desktop-force-app] {
    float: none !important;
}

.desktop-menu-separator {
    display: block;
    height: 1px;
    margin: 0.28rem 0.42rem;
    background: rgba(0, 0, 0, 0.13);
}

.desktop-app-menu {
    left: 8.4rem;
    width: 205px;
    padding: 0.35rem;
    border-radius: 11px;
}

.desktop-app-menu button {
    width: 100%;
    min-height: 27px;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: 0.7rem/1.2 var(--font-ui);
}

.desktop-app-menu button:hover {
    background: #2878e0;
    color: #fff;
}

.desktop-active-app-menu {
    left: 2.35rem;
    width: 190px;
    padding: 0.35rem;
    border-radius: 11px;
}

.desktop-active-app-menu button {
    width: 100%;
    min-height: 27px;
    padding: 0.25rem 0.56rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: 0.7rem/1.2 var(--font-ui);
}

.desktop-active-app-menu button:hover {
    background: #2878e0;
    color: #fff;
}

.desktop-control-center {
    right: 0.48rem;
    width: min(420px, calc(100% - 0.96rem));
    padding: 0.62rem;
    border-radius: 17px;
    color: #151515;
}

.desktop-cc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0.52rem;
}

.desktop-cc-tile {
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 5px 14px rgba(20,30,32,0.08);
}

.desktop-cc-connectivity {
    grid-row: span 2;
    display: grid;
    gap: 0.08rem;
    padding: 0.32rem;
}

.desktop-cc-connectivity button,
.desktop-cc-compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
}

.desktop-cc-connectivity button:hover,
.desktop-cc-compact:hover,
.desktop-cc-utilities button:hover {
    background: rgba(255, 255, 255, 0.45);
}

.desktop-cc-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(35, 35, 35, 0.12);
    color: #232323;
    font-size: 0.9rem;
}

.desktop-cc-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desktop-cc-connectivity button.is-on .desktop-cc-icon {
    background: #1687f8;
    color: #fff;
}

.desktop-cc-connectivity b,
.desktop-cc-compact b,
.desktop-cc-now-playing b {
    display: block;
    font-size: 0.68rem;
    line-height: 1.1;
}

.desktop-cc-connectivity small,
.desktop-cc-compact small,
.desktop-cc-now-playing small {
    display: block;
    margin-top: 0.12rem;
    color: rgba(20,20,20,0.58);
    font-size: 0.57rem;
    line-height: 1.1;
}

.desktop-cc-media {
    display: grid;
    min-height: 92px;
    padding: 0.52rem;
}

.desktop-cc-now-playing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.44rem;
}

.desktop-cc-album {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(145deg, #fa6d91, #7f5ce8);
    color: #fff;
}

.desktop-cc-album svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.desktop-cc-media-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 0.35rem;
}

.desktop-cc-media-controls button {
    width: 28px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #171717;
}

.desktop-cc-media-controls button:hover { background: rgba(0,0,0,0.08); }
.desktop-cc-media-controls svg { width: 19px; height: 19px; fill: currentColor; }
.desktop-cc-media-controls .pause-icon { display: none; }
.desktop-cc-media-controls [data-desktop-play].is-playing .play-icon { display: none; }
.desktop-cc-media-controls [data-desktop-play].is-playing .pause-icon { display: block; }
.desktop-cc-media.is-playing { background: linear-gradient(145deg, rgba(255,255,255,0.68), rgba(185,165,242,0.58)); }

.desktop-cc-compact {
    min-height: 50px;
    padding: 0.38rem 0.45rem;
}

.desktop-cc-compact.is-on .desktop-cc-icon {
    background: #7157d9;
    color: #fff;
}

.desktop-slider {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.52rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(255,255,255,0.52);
    border-radius: 13px;
    background: rgba(255,255,255,0.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    font-size: 0.66rem;
}

.desktop-slider > span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
}

.desktop-slider svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.desktop-slider input {
    height: 5px;
    margin: 0;
    accent-color: #fff;
}

.desktop-cc-utilities {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.52rem;
}

.desktop-cc-utilities button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.22rem 0.48rem;
    border: 1px solid rgba(255,255,255,0.52);
    border-radius: 999px;
    background: rgba(255,255,255,0.42);
    color: inherit;
    font: inherit;
}

.desktop-cc-utilities .desktop-cc-icon { width: 25px; height: 25px; }
.desktop-cc-utilities small { font-size: 0.58rem; }

.desktop-screen-dimmer,
.desktop-flashbang {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.desktop-screen-dimmer {
    z-index: 31800;
    background: #000;
    opacity: var(--desktop-dim, 0);
    transition: opacity 0.12s ease;
}

.desktop-flashbang {
    z-index: 2800;
    background: #fff;
    opacity: 0;
}

.desktop-flashbang.is-active {
    animation: desktop-flash 0.9s ease-out;
}

@keyframes desktop-flash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    30% { opacity: 0.92; }
    100% { opacity: 0; }
}

.terminal-desktop.is-dark-mode::before {
    filter: saturate(0.78) brightness(0.53) hue-rotate(155deg);
}

.terminal-dock {
    gap: 0.34rem;
    padding: 0.34rem 0.44rem 0.4rem;
    border-color: rgba(255,255,255,0.52);
    border-radius: 16px;
    background: rgba(221, 229, 226, 0.5);
    box-shadow: 0 14px 34px rgba(16, 34, 36, 0.22), inset 0 1px 0 rgba(255,255,255,0.7);
    backdrop-filter: blur(22px) saturate(1.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
}

.dock-item {
    min-width: 38px;
    transition: transform 0.16s cubic-bezier(.2,.8,.2,1);
}

.dock-item:hover { transform: translateY(-0.5rem) scale(1.18); }
.dock-item:has(+ .dock-item:hover),
.dock-item:hover + .dock-item { transform: translateY(-0.22rem) scale(1.07); }

.dock-item[data-app="trash"] {
    margin-left: 0.4rem;
}

.dock-item[data-app="trash"]::before {
    content: '';
    position: absolute;
    left: -0.47rem;
    top: 2px;
    bottom: 1px;
    width: 1px;
    background: rgba(20,20,20,0.2);
}

/* Keep the pointer inside a stable vertical hit area while Dock icons lift. */
.dock-item::before,
.dock-item[data-app="trash"]::before {
    content: '';
    position: absolute;
    inset: -0.7rem -2px -1rem;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
}

.dock-item[data-app="trash"] {
    padding-left: 0.4rem;
    background: linear-gradient(rgba(20,20,20,0.2), rgba(20,20,20,0.2)) left center / 1px calc(100% - 4px) no-repeat;
}

.dock-glyph {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.dock-item::after {
    bottom: -0.32rem;
    width: 3px;
    height: 3px;
}

.desktop-app-window {
    left: var(--window-left, 6%);
    right: auto;
    top: var(--window-top, 9%);
    bottom: auto;
    width: var(--window-width, 68%);
    height: var(--window-height, 70%);
    min-width: 280px;
    min-height: 190px;
    max-height: none;
    border-color: rgba(0,0,0,0.2);
    border-radius: 11px;
    box-shadow: 0 28px 90px rgba(10,25,27,0.32), 0 2px 8px rgba(10,25,27,0.18), inset 0 1px 0 rgba(255,255,255,0.78);
    transition:
        left 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        top 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        width 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        height 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        border-radius 0.28s ease,
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.desktop-app-window:not(.is-active) {
    box-shadow: 0 14px 46px rgba(10,25,27,0.2), inset 0 1px 0 rgba(255,255,255,0.62);
}

.desktop-app-window:not(.is-active) .desktop-app-header button {
    filter: saturate(0.2);
    opacity: 0.72;
}

.desktop-app-window.is-dragging,
.desktop-app-window.is-resizing {
    transition: none;
    user-select: none;
}

.desktop-app-body.is-flush > :first-child {
    width: 119.05%;
    height: 119.05%;
    transform: scale(0.84);
    transform-origin: 0 0;
}

.desktop-app-body.is-flush > .quicktime-window {
    width: 100%;
    height: 100%;
    transform: none;
}

#hero-terminal .terminal-content {
    font-size: 0.84em;
    line-height: 1.42;
}

@media (max-width: 519px) {
    #hero-terminal .terminal-content {
        font-size: clamp(0.52rem, 2.56vw, 0.625rem);
        line-height: 1.22;
    }
}

.desktop-app-header {
    min-height: 28px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background: linear-gradient(180deg, rgba(250,250,248,0.96), rgba(224,224,220,0.96));
}

.desktop-app-header:active { cursor: grabbing; }
.desktop-app-header button { cursor: default; }

.desktop-app-header .app-window-title,
.terminal-header .terminal-title {
    pointer-events: none;
}

.desktop-app-header button::before,
.terminal-dot::before {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(0,0,0,0.58);
    font: 800 8px/1 sans-serif;
    opacity: 0;
}

.desktop-app-header:hover .app-window-close::before,
.terminal-header:hover .terminal-dot-close::before { content: '×'; opacity: 1; }
.desktop-app-header:hover .app-window-minimize::before,
.terminal-header:hover .terminal-dot-minimize::before { content: '−'; opacity: 1; }
.desktop-app-header:hover .app-window-zoom::before,
.terminal-header:hover .terminal-dot-fullscreen::before { content: '+'; opacity: 1; }

.window-resize-handle {
    position: absolute;
    z-index: 20;
    touch-action: none;
}

.window-resize-handle[data-resize="n"],
.window-resize-handle[data-resize="s"] { left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
.window-resize-handle[data-resize="n"] { top: -3px; }
.window-resize-handle[data-resize="s"] { bottom: -3px; }
.window-resize-handle[data-resize="e"],
.window-resize-handle[data-resize="w"] { top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
.window-resize-handle[data-resize="e"] { right: -3px; }
.window-resize-handle[data-resize="w"] { left: -3px; }
.window-resize-handle[data-resize="ne"],
.window-resize-handle[data-resize="nw"],
.window-resize-handle[data-resize="se"],
.window-resize-handle[data-resize="sw"] { width: 14px; height: 14px; }
.window-resize-handle[data-resize="ne"] { top: -3px; right: -3px; cursor: nesw-resize; }
.window-resize-handle[data-resize="nw"] { top: -3px; left: -3px; cursor: nwse-resize; }
.window-resize-handle[data-resize="se"] { right: -3px; bottom: -3px; cursor: nwse-resize; }
.window-resize-handle[data-resize="sw"] { left: -3px; bottom: -3px; cursor: nesw-resize; }

.terminal-scrub-container.is-fullscreen #hero-terminal.is-managed-window {
    position: absolute;
    left: var(--window-left, 4%);
    top: var(--window-top, 7%);
    width: var(--window-width, 62%);
    height: var(--window-height, 64%);
    min-width: 300px;
    min-height: 190px;
    margin: 0;
}

#hero-terminal.is-managed-window .terminal-header {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

#hero-terminal.is-managed-window.is-dragging,
#hero-terminal.is-managed-window.is-resizing { transition: none; user-select: none; }

.terminal-scrub-container.is-fullscreen #hero-terminal.is-managed-window {
    transition:
        left 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        top 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        width 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        height 0.34s cubic-bezier(0.22, 0.78, 0.2, 1),
        border-radius 0.28s ease,
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.terminal-scrub-container.is-fullscreen #hero-terminal.is-managed-window.is-dragging,
.terminal-scrub-container.is-fullscreen #hero-terminal.is-managed-window.is-resizing {
    transition: none;
}

@media (max-width: 759px) {
    .desktop-menu-actions { display: none; }
    .desktop-menu-app-name { margin-right: auto; }
    .desktop-menu-spacer { display: none; }
    .desktop-menu-status { padding-inline: 0.22rem !important; }
    .desktop-control-center { width: min(360px, calc(100% - 0.7rem)); right: 0.35rem; }
    .desktop-cc-grid { grid-template-columns: 1fr 1fr; }
    .desktop-app-window {
        left: 0.65rem !important;
        top: var(--desktop-window-top) !important;
        width: calc(100% - 1.3rem) !important;
        height: var(--desktop-window-height) !important;
        min-width: 0;
        min-height: 0;
    }
    .window-resize-handle { display: none; }
}

/* Focused simulator refinements */
.terminal-scrub-container.is-fullscreen {
    --desktop-shell-width: min(calc(100vw - 5rem), calc((100dvh - 5rem) * 16 / 9));
    --desktop-shell-height: calc(var(--desktop-shell-width) * 9 / 16);
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.015);
    backdrop-filter: blur(28px) saturate(1.06);
    -webkit-backdrop-filter: blur(28px) saturate(1.06);
    animation: desktop-backdrop-in 0.42s cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.terminal-scrub-container.is-fullscreen.is-leaving {
    pointer-events: none;
    animation: desktop-backdrop-out 0.36s ease both;
}

@keyframes desktop-backdrop-in {
    from { background: rgba(255,255,255,0); backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); }
    to { background: rgba(255,255,255,0.015); backdrop-filter: blur(28px) saturate(1.06); -webkit-backdrop-filter: blur(28px) saturate(1.06); }
}

@keyframes desktop-backdrop-out {
    from { background: rgba(255,255,255,0.015); backdrop-filter: blur(28px) saturate(1.06); -webkit-backdrop-filter: blur(28px) saturate(1.06); }
    to { background: rgba(255,255,255,0); backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); }
}

.terminal-scrub-container.is-fullscreen .terminal-desktop {
    width: var(--desktop-shell-width) !important;
    height: var(--desktop-shell-height) !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 16px;
    box-shadow: 0 38px 120px rgba(0,0,0,0.52), 0 0 0 1px rgba(0,0,0,0.2);
}

.desktop-exit-fullscreen {
    position: absolute;
    left: calc(50% + var(--desktop-shell-width, 0px) / 2 - 22px);
    top: calc(50% - var(--desktop-shell-height, 0px) / 2 - 30px);
    z-index: 32000;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    color: #222;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 0.16s ease, transform 0.16s ease;
    font: 600 15px/1 var(--font-ui);
}

.terminal-scrub-container.is-fullscreen .desktop-exit-fullscreen {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.terminal-scrub-container:has(.terminal-desktop.is-powered-off) > .desktop-exit-fullscreen,
.terminal-scrub-container:has(.desktop-sleep-screen.is-active) > .desktop-exit-fullscreen,
.terminal-scrub-container:has(.desktop-restart-screen.is-active) > .desktop-exit-fullscreen {
    opacity: 0;
    pointer-events: none;
}

.desktop-menu-time {
    margin-right: 0;
}

.desktop-menubar .desktop-wifi {
    width: 18px;
    height: 14px;
    border: 0;
    border-radius: 0;
}

.desktop-menubar .desktop-wifi::before,
.desktop-menubar .desktop-wifi::after {
    display: none;
}

.desktop-menubar .desktop-wifi svg {
    width: 18px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
}

.desktop-cc-flashlight .desktop-cc-icon {
    background: rgba(35,35,35,0.12);
}

.desktop-cc-flashlight:active .desktop-cc-icon {
    background: #1687f8;
    color: #fff;
}

.desktop-cc-media-controls {
    justify-content: center;
}

.desktop-cc-media-controls button[data-desktop-play] {
    width: 38px;
    height: 32px;
}

.desktop-slider input {
    --range-progress: 50%;
    width: 100%;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right, #fff 0 var(--range-progress), rgba(24, 29, 30, 0.34) var(--range-progress) 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.13);
    cursor: pointer;
}

.desktop-slider input::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 999px;
    background: transparent;
}

.desktop-slider input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -3.5px;
    border: 0;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

.desktop-slider input::-moz-range-track {
    height: 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.desktop-slider input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

.desktop-flashbang.is-active {
    animation: desktop-flash 3s ease-out;
}

@keyframes desktop-flash {
    0% { opacity: 0; }
    4% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; }
}

.desktop-app-window.is-app-fullscreen,
.terminal-scrub-container.is-fullscreen #hero-terminal.is-managed-window.is-app-fullscreen {
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border: 0;
    border-radius: 0;
    z-index: 3000 !important;
}

.desktop-app-window.is-app-fullscreen .window-resize-handle,
#hero-terminal.is-app-fullscreen .window-resize-handle {
    display: none;
}

.terminal-scrub-container.is-fullscreen #hero-terminal.is-managed-window {
    left: var(--window-left, 8px);
    top: var(--window-top, 38px);
    width: var(--window-width, calc(100% - 16px));
    height: var(--window-height, calc(100% - 112px));
}

.dock-compass-icon::after {
    left: 50%;
    top: 57%;
    border-left-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 15px;
    transform: translate(-50%, -52%) rotate(0deg);
}

.desktop-about-ray {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2850;
    width: min(440px, calc(100% - 2rem));
    max-height: calc(100% - 3rem);
    padding: 0 2.1rem 1.55rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 20px;
    background: rgba(250,250,249,0.96);
    box-shadow: 0 34px 110px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.9);
    color: #252525;
    opacity: 0;
    pointer-events: none;
    overflow: auto;
    transform: translate(-50%, -48%) scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-family: var(--font-ui);
}

.desktop-about-ray.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.desktop-about-ray header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    margin: 0 -1.7rem;
    padding: 0 0.8rem;
}

.desktop-about-ray header > span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d4d4d4;
    border: 1px solid rgba(0,0,0,0.1);
}

.desktop-about-ray header > span:first-child { background: #ff5f57; }
.desktop-about-ray header button {
    position: absolute;
    inset: 0 auto auto 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
}

.desktop-about-device {
    position: relative;
    width: 220px;
    height: 122px;
    margin: 0.25rem auto 1.2rem;
}

.desktop-about-screen {
    position: absolute;
    left: 28px;
    top: 0;
    width: 164px;
    height: 102px;
    display: grid;
    place-items: center;
    border: 5px solid #202325;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(145deg, #77c6f0, #356ea5);
    color: rgba(255,255,255,0.88);
    font: 800 1.6rem/1 var(--font-ui);
}

.desktop-about-screen::before {
    content: '';
    position: absolute;
    top: -1px;
    width: 26px;
    height: 6px;
    border-radius: 0 0 5px 5px;
    background: #202325;
}

.desktop-about-base {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 5px;
    height: 13px;
    border-radius: 2px 2px 12px 12px;
    background: linear-gradient(#c9ccce, #70767b);
    clip-path: polygon(12% 0, 88% 0, 100% 72%, 96% 100%, 4% 100%, 0 72%);
    box-shadow: 0 3px 5px rgba(0,0,0,0.25);
}

.desktop-about-ray h2 {
    margin: 0;
    text-align: center;
    font-size: 1.9rem;
    line-height: 1;
}

.desktop-about-ray > p {
    margin: 0.35rem 0 1.2rem;
    color: #8a8a8a;
    text-align: center;
    font-size: 0.78rem;
}

.desktop-about-ray dl {
    display: grid;
    gap: 0.36rem;
    margin: 0 auto;
}

.desktop-about-ray dl div {
    display: grid;
    grid-template-columns: 6.3rem minmax(0, 1fr);
    gap: 0.7rem;
}

.desktop-about-ray dt { text-align: right; font-weight: 650; font-size: 0.72rem; }
.desktop-about-ray dd { margin: 0; color: #777; font-size: 0.72rem; }
.desktop-about-ray > small { display: block; margin-top: 1.2rem; color: #b1b1b1; text-align: center; font-size: 0.62rem; }

.desktop-sleep-screen,
.desktop-restart-screen {
    position: absolute;
    inset: 0;
    z-index: 30500;
    background: #020304;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.desktop-sleep-screen.is-active,
.desktop-restart-screen.is-active {
    opacity: 1;
    pointer-events: auto;
}

.desktop-sleep-screen {
    display: grid;
    place-items: center;
}

.desktop-sleep-symbol {
    width: clamp(58px, 7vw, 78px);
    height: auto;
    overflow: visible;
    fill: rgba(232, 238, 248, 0.9);
    filter: drop-shadow(0 0 20px rgba(178, 202, 240, 0.2));
    animation: sleep-symbol-breathe 2.8s ease-in-out infinite;
}

.desktop-sleep-symbol .sleep-z {
    fill: none;
    stroke: rgba(232, 238, 248, 0.86);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation: sleep-symbol-z 2.4s ease-in-out infinite;
}

.desktop-sleep-symbol .sleep-z-two { animation-delay: 0.7s; }

@keyframes sleep-symbol-breathe { 50% { opacity: 0.62; transform: scale(0.975); } }
@keyframes sleep-symbol-z { 0%, 18% { opacity: 0; transform: translateY(3px); } 35%, 70% { opacity: 0.9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } }

.desktop-restart-screen {
    display: grid;
    place-items: center;
}

.desktop-restart-spinner,
.desktop-restart-boot,
.desktop-restart-login {
    grid-area: 1 / 1;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.desktop-restart-screen[data-stage="spinner"] .desktop-restart-spinner,
.desktop-restart-screen[data-stage="boot"] .desktop-restart-boot,
.desktop-restart-screen[data-stage="login"] .desktop-restart-login {
    opacity: 1;
    transform: scale(1);
}

.desktop-restart-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: #fff;
    border-radius: 50%;
    animation: desktop-spinner 0.75s linear infinite;
}

@keyframes desktop-spinner { to { transform: rotate(360deg); } }

.desktop-restart-boot {
    display: grid;
    justify-items: center;
    gap: 2.2rem;
}

.desktop-restart-boot > b {
    width: 74px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 24px 24px 28px 28px;
    background: #f4f4f4;
    color: #111;
    font: 850 1.5rem/1 var(--font-ui);
    letter-spacing: -0.06em;
}

.desktop-restart-boot > span {
    width: 210px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
}

.desktop-restart-boot > span i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.desktop-restart-screen[data-stage="boot"] .desktop-restart-boot > span i {
    animation: desktop-boot-progress 3s cubic-bezier(.25,.65,.25,1) forwards;
}

@keyframes desktop-boot-progress { to { width: 100%; } }

.desktop-restart-login {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.desktop-restart-login::before,
.desktop-restart-login::after {
    content: '';
    position: absolute;
    inset: -24px;
}

.desktop-restart-login::before {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 193, 122, 0.95), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(78, 151, 190, 0.88), transparent 34%),
        radial-gradient(circle at 70% 82%, rgba(31, 91, 101, 0.94), transparent 42%),
        linear-gradient(145deg, #e9cda9 0%, #9bc3ca 46%, #315e68 100%);
    filter: blur(13px) saturate(0.92) brightness(0.72);
    transform: scale(1.06);
}

.desktop-restart-login::after {
    background: linear-gradient(180deg, rgba(8,16,18,0.18), rgba(8,16,18,0.38));
}

.desktop-login-clock {
    position: absolute;
    top: 6.5%;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.28rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.32);
}

.desktop-login-clock strong {
    font: 420 clamp(2.8rem, 7vw, 4.8rem)/0.95 var(--font-ui);
    letter-spacing: -0.05em;
}

.desktop-login-clock span {
    font: 540 clamp(0.72rem, 1.4vw, 0.95rem)/1 var(--font-ui);
}

.desktop-login-profile {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.62rem;
}

.desktop-login-avatar {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(122,207,244,0.92), rgba(37,93,143,0.96));
    box-shadow: 0 9px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.54);
    font: 800 1.3rem/1 var(--font-ui);
}

.desktop-login-profile > strong { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); font: 600 1rem/1 var(--font-ui); }
.desktop-password-field { width: 196px; height: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 23px; align-items: center; padding: 0.24rem 0.28rem 0.24rem 0.7rem; border: 1px solid rgba(255,255,255,0.38); border-radius: 999px; background: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 5px 18px rgba(0,0,0,0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.desktop-password-field > span { min-height: 1em; color: #fff; text-align: center; letter-spacing: 0.24em; }
.desktop-password-field i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.48); border-radius: 50%; color: rgba(255,255,255,0.88); font: 600 0.78rem/1 sans-serif; }
.desktop-login-profile small { color: rgba(255,255,255,0.72); text-shadow: 0 1px 6px rgba(0,0,0,0.3); font: 0.65rem/1 var(--font-ui); }

.desktop-power-screen {
    z-index: 30600;
    gap: 2rem;
    background: #020304;
}

.desktop-dead-battery {
    position: relative;
    width: 92px;
    height: 42px;
    border: 4px solid rgba(255,255,255,0.76);
    border-radius: 8px;
}

.desktop-dead-battery::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 10px;
    width: 6px;
    height: 16px;
    border-radius: 0 4px 4px 0;
    background: rgba(255,255,255,0.76);
}

.desktop-dead-battery i {
    position: absolute;
    inset: 6px auto 6px 6px;
    width: 12px;
    border-radius: 3px;
    background: #e53935;
    animation: battery-blink 1.1s ease-in-out infinite;
}

@keyframes battery-blink { 50% { opacity: 0.35; } }

.desktop-charge-cable {
    display: flex;
    gap: 1rem;
    color: rgba(255,255,255,0.72);
}

.desktop-charge-cable svg { width: 27px; height: 27px; fill: currentColor; }

@media (max-width: 759px) {
    .desktop-menu-time { margin-right: 0; }
    .terminal-scrub-container.is-fullscreen {
        --desktop-shell-width: min(calc(100vw - 2rem), calc((100dvh - 4rem) * 16 / 9));
        --desktop-shell-height: calc(var(--desktop-shell-width) * 9 / 16);
        height: 100dvh !important;
    }
    .terminal-scrub-container.is-fullscreen .terminal-desktop { height: var(--desktop-shell-height) !important; min-height: 0 !important; }
    .desktop-app-window.is-app-fullscreen { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
    .desktop-about-ray { padding-inline: 1rem; }
    .desktop-about-ray dl div { grid-template-columns: 5.3rem minmax(0, 1fr); gap: 0.5rem; }
}

/* macOS-native Compass and Petals surfaces */
.safari-window {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    background: #fff;
    color: #1d1d1f;
    font-family: var(--font-ui);
}

.safari-toolbar {
    z-index: 4;
    display: grid;
    grid-template-columns: 74px minmax(190px, 620px) 74px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 13px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background: rgba(248,248,248,0.94);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.safari-tool,
.safari-history-controls,
.safari-page-actions {
    flex: 0 0 auto;
}

.safari-tool {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: linear-gradient(#fff, #f2f2f2);
    color: #242426;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.safari-tool:hover { background: #e9e9ea; }
.safari-tool:disabled { opacity: 0.34; }
.safari-history-controls,
.safari-page-actions { display: flex; align-items: center; gap: 5px; }
.safari-history-controls { justify-self: start; padding: 0; border: 0; }
.safari-toolbar-balance { width: 74px; height: 1px; justify-self: end; }
.safari-back::before,
.safari-forward::before { content: ''; position: absolute; left: 13px; top: 10px; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.safari-forward::before { left: 10px; transform: rotate(225deg); }
.safari-sidebar-toggle::before { content: ''; position: absolute; inset: 8px; border: 1.5px solid currentColor; border-radius: 3px; }
.safari-sidebar-toggle::after { content: ''; position: absolute; left: 14px; top: 9px; bottom: 9px; border-left: 1.5px solid currentColor; }

.safari-address-form {
    justify-self: center;
    width: 100%;
    height: 36px;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) 29px;
    align-items: center;
    padding: 0 4px 0 8px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.03);
}

.safari-address {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #343438;
    text-align: center;
    font: 500 12px/1 var(--font-ui);
}

.safari-address-spacer { width: 29px; height: 1px; }
.safari-translate,
.safari-reload { position: relative; width: 27px; height: 27px; border-radius: 8px; color: #6a6a6d; font: 700 11px/1 sans-serif; }
.safari-reload::before { content: '↻'; position: absolute; inset: 0; display: grid; place-items: center; font: 500 19px/1 sans-serif; }
.safari-window.is-reloading .safari-reload::before { animation: safari-reload-spin 0.52s ease; }
@keyframes safari-reload-spin { to { transform: rotate(360deg); } }
.safari-profile { color: #1577e8; font: italic 700 20px/1 Georgia, serif; }
.safari-share::before { content: '↑'; position: absolute; left: 10px; top: 6px; font: 500 17px/1 sans-serif; }
.safari-share::after { content: ''; position: absolute; left: 9px; bottom: 7px; width: 14px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; }
.safari-new-tab::before,
.safari-new-tab::after { content: ''; position: absolute; left: 9px; right: 9px; top: 16px; height: 1.5px; background: currentColor; }
.safari-new-tab::after { transform: rotate(90deg); }
.safari-tabs::before,
.safari-tabs::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; }
.safari-tabs::before { left: 8px; top: 8px; }
.safari-tabs::after { left: 12px; top: 12px; background: #f5f5f5; }

.safari-browser { position: relative; min-height: 0; overflow: hidden; background: #fff; }
.safari-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 3; width: 210px; padding: 18px 12px; overflow: auto; border-right: 1px solid rgba(0,0,0,0.11); background: rgba(244,244,244,0.94); transform: translateX(-102%); transition: transform 0.24s ease; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.safari-sidebar.is-open { transform: translateX(0); }
.safari-sidebar strong,
.safari-sidebar small { display: block; margin: 3px 8px 8px; color: #68686d; font-size: 11px; }
.safari-sidebar small { margin-top: 24px; font-weight: 650; }
.safari-sidebar button { width: 100%; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; padding: 7px; border-radius: 7px; color: #26262a; text-align: left; font: 500 12px/1 sans-serif; }
.safari-sidebar button:hover,
.safari-sidebar button.is-active { background: #dedee0; }
.safari-sidebar button span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(145deg, #46a5ff, #0a63d8); color: #fff; font-weight: 700; }
.safari-sidebar p { margin: 0 8px; color: #8a8a8f; font-size: 11px; }

.safari-page { height: 100%; min-height: 0; overflow: auto; border: 0; border-radius: 0; padding: 0; background: #f5f5f7; }
.safari-site-nav { position: sticky; top: 0; z-index: 2; min-height: 44px; display: flex; justify-content: center; align-items: center; gap: clamp(18px, 5vw, 48px); padding: 0 24px; background: rgba(255,255,255,0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #333336; font-size: 11px; }
.safari-site-nav b { font-size: 16px; letter-spacing: -0.06em; }
.safari-site-nav button,
.safari-site-nav span { color: inherit; font: inherit; }
.safari-site-nav button { position: relative; min-height: 44px; padding: 0 2px; }
.safari-site-nav button::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 5px; height: 2px; border-radius: 999px; background: #087cf0; opacity: 0; transform: scaleX(0.35); transition: opacity 0.18s ease, transform 0.18s ease; }
.safari-site-nav button.is-active { color: #087cf0; font-weight: 650; }
.safari-site-nav button.is-active::after { opacity: 1; transform: scaleX(1); }
.safari-site-hero { min-height: 72%; display: grid; justify-items: center; align-content: center; padding: 55px 28px 70px; text-align: center; background: radial-gradient(circle at 50% 85%, #dcecff, transparent 38%), #f5f5f7; }
.safari-site-hero > span,
.safari-about-page > span,
.safari-projects-page > span,
.safari-photos-page > span,
.safari-notes-page > span { color: #6e6e73; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.safari-site-hero h4,
.safari-about-page h4,
.safari-projects-page h4,
.safari-photos-page h4,
.safari-notes-page h4 { margin: 14px 0 16px; color: #1d1d1f; font-family: var(--font-display); font-style: normal; font-size: clamp(38px, 7vw, 74px); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; }
.safari-site-hero p { max-width: 560px; margin: 0; color: #515154; font-size: clamp(15px, 2vw, 20px); line-height: 1.35; }
.safari-site-hero div { display: flex; gap: 10px; margin-top: 28px; }
.safari-site-hero div button,
.safari-photos-page > button { padding: 10px 17px; border-radius: 999px; background: #0071e3; color: #fff; font: 500 13px/1 sans-serif; }
.safari-site-hero div button + button { border: 1px solid #0071e3; background: transparent; color: #0071e3; }
.safari-site-hero .safari-home-proof { width: min(740px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 48px; }
.safari-site-hero .safari-home-proof span { display: grid; gap: 4px; padding: 15px; border: 1px solid rgba(0,0,0,0.07); border-radius: 15px; background: rgba(255,255,255,0.72); color: #68686d; text-align: left; font-size: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); }
.safari-site-hero .safari-home-proof b { color: #1d1d1f; font-size: 12px; }
.safari-site-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; padding: 25px; background: #fff; color: #666; font-size: 11px; }
.safari-site-strip strong { color: #1d1d1f; }
.safari-about-page,
.safari-projects-page,
.safari-photos-page,
.safari-notes-page { max-width: 920px; min-height: 72%; margin: auto; padding: clamp(60px, 9vw, 112px) clamp(28px, 7vw, 80px); scroll-margin-top: 44px; }
.safari-about-page p { max-width: 680px; color: #515154; font-size: clamp(14px, 2vw, 19px); line-height: 1.55; }
.safari-links { margin-top: 30px; }
.safari-project-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.safari-project-cards article { min-height: 160px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 10px 35px rgba(0,0,0,0.05); }
.safari-project-cards small { display: block; color: #818187; font-size: 9px; }
.safari-project-cards strong { display: block; margin: 18px 0 10px; font-size: 18px; }
.safari-project-cards p { color: #666; font-size: 12px; line-height: 1.5; }
.safari-photo-mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; margin: 32px 0 22px; }
.safari-photo-mosaic img { width: 100%; height: 210px; object-fit: cover; border-radius: 14px; }
.safari-photos-page > p { max-width: 620px; color: #606064; font-size: 15px; line-height: 1.5; }
.safari-notes-page > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
.safari-notes-page article { min-height: 145px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 10px 35px rgba(0,0,0,0.05); }
.safari-notes-page small { color: #87878c; font-size: 9px; }
.safari-notes-page strong { display: block; margin: 14px 0 8px; font-size: 16px; }
.safari-notes-page p { margin: 0; color: #666; font-size: 11px; line-height: 1.45; }
.safari-site-footer { display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(28px, 7vw, 80px); background: #1d1d1f; color: rgba(255,255,255,0.7); font-size: 10px; }
.safari-site-footer b { color: #fff; font-size: 14px; }

.safari-personal-page {
    min-height: 100%;
    color: #1d1d1f;
    background: #f5f5f7;
}

.safari-personal-nav {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(22px, 6vw, 68px);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 10px;
}

.safari-personal-nav strong { font-size: 15px; letter-spacing: -0.035em; }
.safari-personal-nav span { color: #6e6e73; }

.safari-personal-hero {
    min-height: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: clamp(22px, 3.6vw, 43px) clamp(24px, 7vw, 80px);
    text-align: center;
}

.safari-personal-hero > span {
    margin-bottom: 15px;
    color: #6e6e73;
    font-size: 11px;
    font-weight: 600;
}

.safari-personal-hero h1 {
    max-width: 820px;
    margin: 0;
    color: #1d1d1f;
    font: 700 clamp(42px, 7.2vw, 76px)/1.02 var(--font-ui);
    letter-spacing: -0.03em;
}

.safari-personal-hero p {
    max-width: 650px;
    margin: 24px 0 0;
    color: #515154;
    font-size: clamp(14px, 2vw, 19px);
    line-height: 1.48;
}

.safari-personal-about {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1.58fr);
    gap: clamp(28px, 7vw, 88px);
    padding: clamp(54px, 8vw, 92px) clamp(24px, 9vw, 110px);
    background: #fff;
}

.safari-personal-label {
    margin: 4px 0 0;
    color: #86868b;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.safari-personal-about > div { max-width: 720px; }
.safari-personal-about > div p { margin: 0; color: #333336; font-size: clamp(15px, 2vw, 20px); line-height: 1.58; }
.safari-personal-about > div p + p { margin-top: 1.15em; }

.safari-personal-photo-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 5vw, 54px);
    margin-top: clamp(32px, 5vw, 52px);
    padding-top: clamp(24px, 4vw, 36px);
    border-top: 1px solid rgba(0,0,0,0.1);
}

.safari-personal-about > div .safari-personal-photo-cta p {
    max-width: 540px;
    color: #6e6e73;
    font-size: clamp(13px, 1.6vw, 16px);
    line-height: 1.5;
}

.safari-personal-photo-cta button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 17px;
    border-radius: 999px;
    background: #0071e3;
    color: #fff;
    font: 600 12px/1 var(--font-ui);
    box-shadow: 0 6px 18px rgba(0,113,227,0.2);
    transition: background 150ms ease, transform 150ms ease;
}

.safari-personal-photo-cta button:hover {
    background: #0077ed;
    transform: translateY(-1px);
}

.safari-personal-photo-cta button:active { transform: translateY(0); }

@media (max-width: 780px) {
    .safari-personal-photo-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

.safari-personal-footer {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(24px, 9vw, 110px);
    background: #1d1d1f;
    color: rgba(255,255,255,0.58);
    font-size: 9px;
}

.safari-personal-footer strong { color: #fff; font-size: 13px; }

.photos-window {
    --petals-thumb-size: 82px;
    --petals-card-size: 141px;
    grid-template-columns: 164px minmax(0, 1fr);
    container: petals / inline-size;
    background: #fff;
    color: #1c1c1e;
    font-family: var(--font-ui);
}

.photos-sidebar {
    gap: 2px;
    padding: 10px 8px 16px;
    overflow-y: auto;
    border-right: 1px solid rgba(0,0,0,0.1);
    background: rgba(240,240,240,0.96);
    color: #252527;
    font-family: inherit;
}

.photos-sidebar-primary { display: grid; gap: 2px; margin-bottom: 9px; }
.photos-sidebar .photos-sidebar-label { display: block; margin: 10px 8px 4px; color: #707074; font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.photos-sidebar-albums { display: contents; }
.photos-sidebar button { min-height: 25px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 6px; color: #262629; font: 500 10px/1.15 inherit; }
.photos-sidebar button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photos-sidebar button > span {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
}
.photos-sidebar button > small { color: #85858a; font-size: 8px; font-variant-numeric: tabular-nums; }
.photos-sidebar button.is-active > small { color: inherit; opacity: 0.72; }
.photos-sidebar button.is-active,
.photos-sidebar button:hover { background: #d7d7d8; color: #111; }

.petals-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photos-sidebar .petals-icon { color: #087cf0; }
.photos-window.is-sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.photos-window.is-sidebar-hidden .photos-sidebar { visibility: hidden; opacity: 0; pointer-events: none; }
.photos-window,
.photos-sidebar { transition: grid-template-columns 0.24s ease, opacity 0.18s ease; }

.photos-main { grid-template-rows: 50px minmax(0, 1fr); background: #fff; }
.photos-toolbar { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; min-height: 50px; padding: 6px 9px; border-bottom: 1px solid rgba(0,0,0,0.08); background: rgba(252,252,252,0.96); }
.photos-library-tools,
.photos-toolbar-actions { display: flex; align-items: center; gap: 7px; }
.photos-toolbar-actions { justify-self: end; width: max-content; min-width: 208px; margin: 0; }
.photos-library-title { display: grid; justify-items: center; min-width: 110px; }
.photos-library-title strong { font-size: 12px; }
.photos-library-tools > button,
.photos-toolbar-actions > button { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,0.09); border-radius: 8px; background: linear-gradient(#fff,#f3f3f3); color: #262629; }
.photos-library-tools > button.is-active { background: #e5e5e7; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03); }
.photos-toolbar-actions > [data-photo-action="hdr"].is-active { background: #1684f6; color: #fff; }
.photos-toolbar-actions .hdr-icon { width: 16px; height: 16px; fill: currentColor; }
.photos-zoom-control { height: 27px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; color: #78787c; background: #f6f6f6; }
.photos-zoom-control .petals-icon { width: 11px; height: 11px; }
.photos-zoom-control input { width: 58px; height: 2px; padding: 0; accent-color: #bfc0c2; }
.photos-toolbar input { width: 96px; min-height: 27px; border-radius: 8px; background: #f1f1f2; font-family: inherit; font-size: 9px; }
.photos-toolbar-actions [data-photo-action]::before,
.photos-toolbar-actions [data-photo-action]::after { content: none; }
.photos-search-control { display: flex; align-items: center; gap: 4px; }
.photos-search-toggle { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(0,0,0,0.09); border-radius: 50%; background: linear-gradient(#fff,#f3f3f3); color: #535357; }
.photos-search-toggle .petals-icon { width: 13px; height: 13px; }
.photos-search-control.is-open .photos-search-toggle { color: #087cf0; background: #e9f3ff; }
.photos-toolbar .photos-search-control input { width: 0; min-width: 0; min-height: 27px; padding: 0; border: 0; opacity: 0; pointer-events: none; transition: width 0.2s ease, opacity 0.15s ease, padding 0.2s ease, border-color 0.15s ease; }
.photos-toolbar .photos-search-control.is-open input { width: 118px; padding: 0 9px; border: 1px solid rgba(0,0,0,0.08); opacity: 1; pointer-events: auto; }
.photos-segments { flex: 0 0 auto; height: 31px; display: grid; grid-template-columns: repeat(4, minmax(40px, 1fr)); align-items: center; padding: 2px; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; background: #e5e5e7; box-shadow: inset 0 1px 2px rgba(0,0,0,0.045); }
.photos-toolbar-actions .photos-segments button { position: static; width: auto; min-width: 40px; height: 25px; min-height: 25px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #5c5c60; box-shadow: none; font: 560 9px/1 inherit; white-space: nowrap; }
.photos-toolbar-actions .photos-segments button:hover { background: rgba(255,255,255,0.42); color: #1c1c1e; }
.photos-toolbar-actions .photos-segments button.is-active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.025); }
.photos-grid { padding: 8px 10px 18px; }
.photos-group h4 { margin: 0 0 6px; font: 650 11px/1 inherit; }
.photos-thumbs { grid-template-columns: repeat(auto-fill, minmax(var(--petals-card-size), 1fr)); grid-auto-flow: dense; gap: 7px; }
.photos-thumb { position: relative; display: block; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #e9e9e7; box-shadow: inset 0 0 0 1px rgba(17,17,17,0.05); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.photos-thumb:hover { transform: translateY(-1px); background: #e9e9e7; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17,17,17,0.05), 0 8px 18px rgba(17,17,17,0.08); }
.photos-thumb img,
.photos-thumb video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; filter: none !important; color-scheme: only light; transition: transform 0.2s ease; }
.photos-thumb:hover img,
.photos-thumb:hover video { transform: scale(1.015); }
.photos-thumb-caption { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 2px; padding: 24px 8px 7px; background: linear-gradient(0deg, rgba(0,0,0,0.52), rgba(0,0,0,0)); color: #fff; text-align: left; opacity: 0; transform: translateY(3px); transition: opacity 0.18s ease, transform 0.18s ease; }
.photos-thumb-caption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1.1 var(--font-ui); }
.photos-thumb-caption small { overflow: hidden; color: rgba(255,255,255,0.72); text-overflow: ellipsis; white-space: nowrap; font: 500 8px/1.1 var(--font-ui); }
.photos-thumb:hover .photos-thumb-caption,
.photos-thumb:focus-visible .photos-thumb-caption { opacity: 1; transform: none; }
.photos-type-badge { position: absolute; left: 7px; top: 7px; z-index: 3; min-height: 23px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid rgba(255,255,255,0.76); border-radius: 999px; background: rgba(248,248,250,0.84); color: rgba(17,17,17,0.78); box-shadow: 0 5px 16px rgba(17,17,20,0.14), inset 0 1px 0 rgba(255,255,255,0.9); backdrop-filter: blur(14px) saturate(1.6) brightness(1.04); -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.04); font: 650 9px/1 var(--font-ui); }
.photos-type-badge .petals-icon { width: 13px; height: 13px; stroke-width: 1.8; }
.photos-favorite { top: 5px; right: 5px; width: 18px; height: 18px; opacity: 0; }
.photos-thumb:hover .photos-favorite,
.photos-favorite.is-favorite { opacity: 1; }
.photos-favorite::before,
.photos-favorite.is-favorite::before { content: none; }
.photos-favorite .petals-icon { width: 12px; height: 12px; color: #c8423b; }
.photos-favorite.is-favorite .petals-icon { fill: #c8423b; }

@supports (dynamic-range-limit: standard) {
    .photos-window { dynamic-range-limit: standard; }
    .photos-window[data-hdr-enabled="true"] { dynamic-range-limit: no-limit; }
}

@media (hover: none), (pointer: coarse) {
    .photos-thumb-caption { opacity: 1; transform: none; }
}

.photos-viewer { inset: 0; z-index: 8; grid-template-rows: 62px minmax(0, 1fr); background: #fff; }
.photos-detail-toolbar { display: grid; grid-template-columns: minmax(125px, 1fr) auto minmax(100px, 1fr); align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,0.08); background: rgba(252,252,252,0.97); }
.photos-detail-left,
.photos-detail-actions { display: flex; align-items: center; gap: 6px; }
.photos-detail-actions { justify-self: end; }
.photos-viewer-close { position: relative; right: auto; top: auto; width: 31px; height: 31px; border: 1px solid rgba(0,0,0,0.09); border-radius: 50%; background: #f8f8f8; }
.photos-viewer-close::before { left: 12px; right: auto; top: 9px; width: 9px; height: 9px; border-left: 2px solid #222; border-bottom: 2px solid #222; background: transparent; transform: rotate(45deg); }
.photos-viewer-close::after { display: none; }
.photos-detail-zoom { height: 29px; display: flex; align-items: center; gap: 3px; padding: 0 5px; border: 1px solid rgba(0,0,0,0.08); border-radius: 9px; color: #737377; background: #f8f8f8; }
.photos-detail-zoom button { width: 21px; height: 23px; display: grid; place-items: center; color: inherit; }
.photos-detail-zoom .petals-icon { width: 11px; height: 11px; }
.photos-detail-zoom input { width: 54px; height: 3px; padding: 0; accent-color: #8b8b90; }
.photos-detail-heading { display: grid; justify-items: center; gap: 2px; min-width: 170px; }
.photos-detail-heading strong { max-width: 280px; overflow: hidden; color: #1c1c1e; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.photos-detail-heading span { color: #77777b; font-size: 9px; }
.photos-detail-actions button { position: relative; min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid rgba(0,0,0,0.08); border-radius: 9px; background: linear-gradient(#fff,#f5f5f5); color: #161618; font: 600 12px/1 sans-serif; }
.photos-detail-actions [data-photo-detail-action]:not(.photos-detail-edit) { min-width: 30px; width: 30px; display: grid; place-items: center; padding: 0; }
.photos-detail-actions [data-photo-detail-action="info"].is-active { background: #1684f6; color: #fff; }
.photos-detail-actions [data-photo-detail-action="hdr"].is-active { background: #1684f6; color: #fff; }
.photos-detail-actions [data-photo-detail-action]::before,
.photos-detail-actions [data-photo-detail-action]::after { content: none; }
.photos-detail-actions .petals-icon { width: 15px; height: 15px; }
.photos-detail-actions .hdr-icon { width: 17px; height: 17px; fill: currentColor; }
.photos-detail-actions [data-photo-detail-action="favorite"].is-favorite { color: #f14262; }
.photos-detail-actions [data-photo-detail-action="favorite"].is-favorite .petals-icon { fill: currentColor; }
.photos-detail-edit { border-radius: 999px !important; }
.photos-detail-canvas { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #f7f7f8; }
.photos-detail-canvas figure { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; place-items: center; margin: 0; padding: 12px 48px 8px; transition: padding-right 0.2s ease; }
.photos-detail-canvas figure > img { width: auto; max-width: 100%; height: auto; max-height: 100%; min-height: 0; object-fit: contain; filter: none !important; transform: scale(var(--photo-viewer-zoom, 1)); transition: transform 0.22s ease; box-shadow: 0 3px 20px rgba(0,0,0,0.08); }
.photos-detail-canvas figcaption { max-width: 680px; padding-top: 7px; color: #6f6f73; text-align: center; font-size: 9px; }
.photos-detail-nav { position: absolute; z-index: 2; top: 50%; width: 30px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,0.78); box-shadow: 0 2px 10px rgba(0,0,0,0.12); transform: translateY(-50%); }
.photos-detail-nav::before { content: ''; width: 9px; height: 9px; border-left: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg) translate(1px, -1px); }
.photos-detail-nav.is-prev { left: 10px; }
.photos-detail-nav.is-next { right: 10px; }
.photos-detail-nav.is-next::before { transform: rotate(225deg) translate(1px, -1px); }
.photos-video-frame { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.photos-video-frame video { width: 100%; max-width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; filter: none !important; transform: scale(var(--photo-viewer-zoom, 1)); transition: transform 0.22s ease; box-shadow: 0 3px 20px rgba(0,0,0,0.08); }
.photos-video-controls { position: absolute; left: 50%; bottom: 18px; z-index: 3; width: min(640px, calc(100% - 36px)); display: grid; gap: 8px; padding: 12px 16px 13px; border: 1px solid rgba(255,255,255,0.38); border-radius: 18px; background: rgba(92,84,82,0.54); color: #fff; box-shadow: 0 14px 42px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18); transform: translateX(-50%); backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25); transition: opacity 0.28s ease, transform 0.28s ease; }
.photos-video-frame.are-controls-hidden .photos-video-controls { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.photos-video-controls-primary { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; }
.photos-video-controls-timeline { display: grid; grid-template-columns: 52px minmax(90px,1fr) 58px; align-items: center; gap: 11px; }
.photos-video-controls button { display: grid; place-items: center; justify-self: center; border-radius: 10px; color: #fff; }
.photos-video-controls button:hover { background: rgba(255,255,255,0.14); }
.photos-video-volume-button { width: 44px; height: 42px; justify-self: start !important; }
.photos-video-play-button { width: 58px; height: 48px; }
.photos-video-volume-button svg { width: 28px; height: 24px; }
.photos-video-play-button svg { width: 42px; height: 42px; }
.photos-video-controls svg { fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.photos-video-controls .photos-video-icon-volume,
.photos-video-controls .photos-video-icon-muted { fill: none; }
.photos-video-icon-pause,
.photos-video-icon-muted,
.photos-video-frame.is-playing .photos-video-icon-play,
.photos-video-frame.is-muted .photos-video-icon-volume { display: none; }
.photos-video-frame.is-playing .photos-video-icon-pause,
.photos-video-frame.is-muted .photos-video-icon-muted { display: block; }
.photos-video-controls-timeline span { min-width: 0; color: #fff; font: 550 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; }
.photos-video-controls-timeline span:last-child { text-align: right; }
.photos-video-controls-timeline input { appearance: none; -webkit-appearance: none; width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.photos-video-controls-timeline input::-webkit-slider-runnable-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.2); }
.photos-video-controls-timeline input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.22); }
.photos-video-controls-timeline input::-moz-range-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.2); }
.photos-video-controls-timeline input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; }
.photos-info-panel { position: absolute; z-index: 4; inset: 0 0 0 auto; width: min(260px, 43%); padding: 14px; overflow: auto; border-left: 1px solid rgba(0,0,0,0.1); background: rgba(250,250,250,0.98); transform: translateX(101%); transition: transform 0.22s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.05); }
.photos-info-panel.is-open { transform: translateX(0); }
.photos-info-panel > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.photos-info-panel > div:first-child strong { font-size: 13px; }
.photos-hdr-off { padding: 3px 6px; border-radius: 999px; background: #e8e8ea; color: #666; font-size: 8px; }
.photos-info-panel h5 { margin: 18px 0 5px; font-size: 15px; }
.photos-info-panel > p { margin: 0 0 15px; color: #666; font-size: 10px; line-height: 1.45; }
.photos-info-panel dl { margin: 0; }
.photos-info-panel dl div { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 8px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.07); font-size: 9px; }
.photos-info-panel dt { color: #7b7b80; }
.photos-info-panel dd { margin: 0; overflow-wrap: anywhere; color: #252527; }
.photos-info-location { display: grid; gap: 4px; margin-top: 13px; padding: 12px; border-radius: 10px; background: linear-gradient(135deg,#dcecf5,#e9e2d3); font-size: 9px; }
.photos-info-location span { color: #69696d; }

@container petals (max-width: 860px) {
    .photos-toolbar-actions { width: auto; min-width: 0; }
    .photos-toolbar .photos-search-control.is-open input { width: 90px; }
}

@container petals (max-width: 660px) {
    .photos-toolbar { grid-template-columns: auto minmax(100px, 1fr) auto; }
    .photos-zoom-control { display: none; }
    .photos-toolbar-actions > button:not([data-photo-action="hdr"]) { display: none; }
    .photos-toolbar-actions { width: auto; min-width: 0; }
    .photos-segments button { min-width: 34px; padding-inline: 5px; font-size: 8px; }
    .photos-detail-actions [data-photo-detail-action="rotate"],
    .photos-detail-actions [data-photo-detail-action="magic"] { display: none; }
}

@media (max-width: 780px) {
    .safari-toolbar { grid-template-columns: 74px minmax(120px,1fr) 74px; gap: 8px; padding-inline: 9px; }
    .safari-history-controls { display: flex; }
    .safari-page-actions .safari-profile,
    .safari-page-actions .safari-new-tab { display: none; }
    .safari-project-cards { grid-template-columns: 1fr; }
    .safari-site-nav { gap: 12px; padding-inline: 12px; }
    .safari-site-hero .safari-home-proof,
    .safari-notes-page > div { grid-template-columns: 1fr; }
    .safari-photo-mosaic img { height: 145px; }
    .safari-personal-hero { min-height: 0; }
    .safari-personal-about { grid-template-columns: 1fr; gap: 18px; }
    .photos-window { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
    .photos-sidebar { display: flex; align-items: center; gap: 3px; padding: 5px 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
    .photos-sidebar-primary { display: flex; margin: 0; }
    .photos-sidebar .photos-sidebar-label { display: none; }
    .photos-sidebar-albums { display: flex; gap: 3px; }
    .photos-sidebar button > small { display: none; }
    .photos-sidebar button { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; min-height: 26px; padding: 5px 8px; white-space: nowrap; }
    .photos-sidebar button::before { display: none; }
    .photos-toolbar { grid-template-columns: auto 1fr; min-height: 52px; }
    .photos-library-title { order: -1; justify-items: start; }
    .photos-library-tools { display: none; }
    .photos-toolbar-actions { min-width: 0; }
    .photos-toolbar-actions > button:not([data-photo-action="hdr"]) { display: none; }
    .photos-segments button { padding: 0 5px; }
    .photos-detail-toolbar { grid-template-columns: auto 1fr auto; }
    .photos-detail-zoom,
    .photos-detail-actions [data-photo-detail-action="rotate"],
    .photos-detail-actions [data-photo-detail-action="magic"] { display: none; }
    .photos-detail-heading { min-width: 0; }
    .photos-detail-heading strong { max-width: 150px; }
}

/* Jot Notes — publication catalog */
.notes-window {
    grid-template-columns: 142px 220px minmax(0, 1fr);
    background: #fbfaf7;
    color: #1d1d1f;
    font-family: var(--font-ui);
}

.notes-folders {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px 10px;
    border-right: 1px solid rgba(0,0,0,0.09);
    background: rgba(239, 237, 231, 0.94);
    color: #606064;
    font-family: var(--font-ui);
}

.notes-library-title {
    display: block;
    align-items: center;
    margin: 0 2px 10px;
    padding: 3px 5px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.notes-library-title > strong {
    color: #202022;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.notes-library-title svg,
.notes-folders button svg,
.notes-toolbar svg,
.notes-editor-toolbar svg,
.notes-list-arrow svg,
.notes-read-more svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.notes-folders > span {
    margin: 7px 7px 3px;
    color: #91908d;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.notes-folders button {
    min-width: 0;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 6px 7px;
    border-radius: 6px;
    color: #59585c;
    text-align: left;
}

.notes-folders button:hover,
.notes-folders button.is-active {
    color: #1d1d1f;
    background: rgba(0,0,0,0.065);
}

.notes-folders button.is-active { box-shadow: none; }
.notes-folders button svg { width: 13px; height: 13px; color: #77767a; }
.notes-folders button b { overflow: hidden; font-size: 9px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.notes-folders button small { color: #9a9895; font-size: 8px; font-variant-numeric: tabular-nums; }

.notes-open-publication {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: auto 4px 0;
    padding: 8px 3px 2px;
    border-top: 1px solid rgba(0,0,0,0.08);
    color: #6f6d6a;
    font-size: 8px;
}

.notes-open-publication:hover { color: #c8423b; }
.notes-open-publication svg { width: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.notes-list-panel {
    grid-template-rows: 48px minmax(0, 1fr);
    border-right: 1px solid rgba(0,0,0,0.09);
    background: rgba(248, 247, 243, 0.98);
}

.notes-toolbar {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: transparent;
}

.notes-toolbar > div { min-width: 0; display: grid; gap: 2px; }
.notes-toolbar > div strong { overflow: hidden; color: #242426; font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.notes-toolbar > div span { color: #979590; font-size: 7px; line-height: 1; }

.notes-toolbar label {
    width: 88px;
    height: 25px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 7px;
    color: #8d8b88;
    background: rgba(255,255,255,0.68);
}

.notes-toolbar label svg { width: 11px; flex: 0 0 auto; }
.notes-toolbar input { width: 100%; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; outline: 0; color: #252527; background: transparent; font: 8px/1 var(--font-ui); }

.notes-list {
    display: block;
    min-height: 0;
    padding: 5px;
    overflow: auto;
}

.notes-list-item {
    position: relative;
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 9px 28px 10px 9px;
    border: 0;
    border-radius: 8px;
    color: #262628;
    background: transparent;
    text-align: left;
}

.notes-list-item + .notes-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 7px;
    left: 9px;
    height: 1px;
    background: rgba(0,0,0,0.07);
}

.notes-list-item:hover { background: rgba(0,0,0,0.035); }
.notes-list-item.is-selected { background: rgba(0,0,0,0.055); }
.notes-list-item.is-selected::before,
.notes-list-item.is-selected + .notes-list-item::before { opacity: 0; }

.notes-list-meta { display: flex; align-items: center; gap: 5px; }
.notes-list-meta b { color: #c8423b; font-size: 7px; font-weight: 680; letter-spacing: 0.05em; text-transform: uppercase; }
.notes-list-meta time { color: #9a9894; font-size: 7px; }
.notes-list-item > strong { color: #202022; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.05; white-space: normal; }
.notes-list-excerpt { display: -webkit-box; overflow: hidden; color: #747277; font-size: 8px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notes-list-arrow { position: absolute; right: 9px; top: 50%; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,0.09); border-radius: 50%; color: #868488; opacity: 0; transform: translate(-3px, -50%); transition: opacity 0.15s ease, transform 0.15s ease; }
.notes-list-item:hover .notes-list-arrow,
.notes-list-item.is-selected .notes-list-arrow { opacity: 1; transform: translate(0, -50%); }
.notes-list-arrow svg { width: 9px; }

.notes-editor { background: #fcfbf8; }

.notes-editor-toolbar {
    min-height: 48px;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: transparent;
    color: #96938f;
    font-size: 8px;
}

.notes-editor-toolbar a { display: inline-flex; align-items: center; gap: 5px; color: #68666a; }
.notes-editor-toolbar a:hover { color: #c8423b; }
.notes-editor-toolbar svg { width: 11px; }

.notes-paper {
    padding: clamp(20px, 4vw, 44px);
    color: #282628;
    background: transparent;
    font-family: var(--font-reading);
}

.notes-paper-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; color: #96938f; font: 7px/1.2 var(--font-ui); }
.notes-paper-meta span { color: #c8423b; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.notes-paper-meta time { display: inline; margin: 0; color: inherit; font: inherit; }
.notes-paper-meta time::before,
.notes-paper-meta b::before { content: '·'; margin-right: 6px; color: #bab7b2; }
.notes-paper-meta b { font-weight: 500; }

.notes-paper h3 {
    max-width: 13ch;
    color: #1f1e20;
    font: 600 clamp(24px, 4vw, 42px)/0.98 var(--font-display);
    font-style: normal;
    letter-spacing: -0.045em;
}

.notes-paper-excerpt {
    max-width: 48ch;
    margin: 12px 0 18px;
    color: #68666a;
    font: 12px/1.5 var(--font-reading);
}

.notes-paper-body {
    max-width: 58ch;
    color: #444246;
    font: 10px/1.65 var(--font-reading);
}

.notes-paper-body p,
.notes-paper-body h2,
.notes-paper-body pre,
.notes-paper-body blockquote,
.notes-paper-body ul { margin: 0 0 12px; }
.notes-paper-body h2 { margin-top: 21px; color: #232225; font: 650 12px/1.25 var(--font-ui); }
.notes-paper-body blockquote { padding-left: 11px; border-left: 2px solid #c8423b; color: #2d2b2e; font-size: 11px; font-style: italic; }
.notes-paper-body blockquote p { margin: 0; }
.notes-paper-body ul { padding-left: 17px; }
.notes-paper-body li { margin: 4px 0; list-style: disc; }
.notes-paper-body pre { padding: 10px; border-radius: 8px; background: #eeeae4; color: #29272a; font: 8px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.notes-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(0,0,0,0.28);
    color: #272629;
    font: 600 9px/1.2 var(--font-ui);
}

.notes-read-more:hover { color: #c8423b; border-color: #c8423b; }
.notes-read-more svg { width: 11px; }

@media (max-width: 759px) {
    .notes-window { grid-template-columns: 1fr; grid-template-rows: 38px 128px minmax(0, 1fr); }
    .notes-folders { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 5px 7px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.09); overflow-x: auto; }
    .notes-library-title,
    .notes-folders > span,
    .notes-open-publication { display: none; }
    .notes-folders button { flex: 0 0 auto; display: flex; gap: 4px; padding: 5px 8px; border: 1px solid rgba(0,0,0,0.07); border-radius: 999px; white-space: nowrap; }
    .notes-folders button.is-active { box-shadow: none; border-color: rgba(0,0,0,0.16); }
    .notes-folders button small { display: none; }
    .notes-list-panel { grid-template-rows: 36px minmax(0, 1fr); border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.09); }
    .notes-toolbar { min-height: 36px; padding: 5px 7px; }
    .notes-list { display: flex; gap: 4px; padding: 4px; overflow-x: auto; }
    .notes-list-item { flex: 0 0 150px; padding: 7px 24px 7px 8px; }
    .notes-list-item + .notes-list-item::before { display: none; }
    .notes-list-excerpt { -webkit-line-clamp: 1; }
    .notes-editor-toolbar { min-height: 36px; padding: 5px 9px; }
    .notes-paper { padding: 16px 18px; }
    .notes-paper h3 { max-width: 16ch; font-size: 25px; }
    .notes-paper-body { font-size: 9px; }
}

/* Compact phone landscape: keep the desktop and its menus inside the viewport. */
@media (orientation: landscape) and (min-width: 760px) and (max-height: 520px) {
    .terminal-desktop {
        --desktop-window-top: 2rem;
        --desktop-dock-space: 3.55rem;
        --desktop-window-height: 100%;
        width: 100%;
        height: clamp(185px, calc(100svh - 11.75rem), 285px);
        min-height: 0;
        aspect-ratio: auto;
        padding: var(--desktop-window-top) 0.62rem 3rem;
    }

    .terminal-desktop .desktop-icons {
        display: none;
    }

    .terminal-desktop #hero-terminal.terminal {
        height: var(--desktop-window-height);
        min-height: 0;
    }

    #hero-terminal .terminal-content {
        font-size: 0.5rem;
        line-height: 1.16;
    }

    .terminal-dock {
        bottom: 0.42rem;
        padding: 0.34rem 0.44rem;
    }

    .bio-links {
        flex: 0 0 40px;
        height: 40px;
    }

    .desktop-popover {
        max-height: calc(100% - var(--desktop-menu-height) - 0.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .desktop-control-center {
        width: min(390px, calc(100% - 0.7rem));
        right: 0.35rem;
        padding: 0.4rem;
        border-radius: 14px;
    }

    .desktop-cc-grid { gap: 0.34rem; }
    .desktop-cc-connectivity { gap: 0; padding: 0.18rem; }

    .desktop-cc-connectivity button,
    .desktop-cc-compact {
        min-height: 29px;
        gap: 0.3rem;
    }

    .desktop-cc-icon { width: 22px; height: 22px; }
    .desktop-cc-icon svg { width: 13px; height: 13px; }
    .desktop-cc-connectivity b,
    .desktop-cc-compact b,
    .desktop-cc-now-playing b { font-size: 0.56rem; }
    .desktop-cc-connectivity small,
    .desktop-cc-compact small,
    .desktop-cc-now-playing small { margin-top: 0.05rem; font-size: 0.48rem; }

    .desktop-cc-media { min-height: 60px; padding: 0.32rem; }
    .desktop-cc-album { width: 26px; height: 26px; }
    .desktop-cc-album svg { width: 15px; height: 15px; }
    .desktop-cc-media-controls { margin-top: 0; }
    .desktop-cc-media-controls button { height: 22px; }
    .desktop-cc-compact { padding: 0.25rem 0.35rem; }

    .desktop-slider {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.28rem;
        padding: 0.28rem 0.4rem;
        font-size: 0.52rem;
    }

    .desktop-slider > span { gap: 0.28rem; }
    .desktop-slider svg { width: 13px; height: 13px; }
    .desktop-cc-utilities { display: none; }
}