:root {
    --bg: #f7f9fc;
    --panel: rgba(255, 255, 255, 0.7);
    --card: rgba(255, 255, 255, 0.78);
    --glass: rgba(255, 255, 255, 0.54);
    --text: #111827;
    --muted: #5c6880;
    --primary: #1d4ed8;
    --secondary: #6d5dfc;
    --cyan: #0891b2;
    --line: rgba(111, 126, 150, 0.18);
    --shadow: 0 26px 80px rgba(35, 48, 82, 0.13);
    --shadow-hover: 0 32px 92px rgba(36, 75, 160, 0.18);
    --cursor-x: 50vw;
    --cursor-y: 40vh;
    --cursor-soft-x: 50vw;
    --cursor-soft-y: 40vh;
}

[data-theme="dark"] {
    --bg: #0b1020;
    --panel: rgba(17, 24, 39, 0.72);
    --card: rgba(17, 24, 39, 0.78);
    --glass: rgba(15, 23, 42, 0.58);
    --text: #eaf1ff;
    --muted: #a8b6cf;
    --line: rgba(226, 232, 240, 0.16);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    --shadow-hover: 0 30px 90px rgba(70, 120, 255, 0.22);
}

html {
    scroll-behavior: smooth;
    text-rendering: geometricPrecision;
}

body {
    color: var(--text);
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(91, 109, 246, 0.2), transparent 19rem),
        radial-gradient(circle at 12% 8%, rgba(199, 210, 254, 0.42), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(186, 230, 253, 0.38), transparent 28%),
        radial-gradient(circle at 50% 92%, rgba(226, 232, 240, 0.7), transparent 35%),
        linear-gradient(118deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.96) 42%, rgba(238, 242, 255, 0.9) 72%, rgba(250, 252, 255, 0.98) 100%);
    background-size: 190% 190%;
    animation: liquidBackground 18s ease-in-out infinite;
    overflow-x: hidden;
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(96, 165, 250, 0.16), transparent 19rem),
        linear-gradient(118deg, #07111f 0%, #101827 38%, #171430 70%, #071b24 100%);
    background-size: 190% 190%;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.34), transparent 24%, rgba(255,255,255,0.2) 48%, transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.42), transparent 44%);
    mix-blend-mode: soft-light;
    opacity: 0.8;
    z-index: -1;
}

.liquid-cursor-aura,
.liquid-cursor-lens {
    position: fixed;
    left: var(--cursor-soft-x);
    top: var(--cursor-soft-y);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 360ms ease;
}

.liquid-field-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.88;
    mix-blend-mode: screen;
}

.liquid-cursor-aura {
    width: min(52vw, 620px);
    height: min(52vw, 620px);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.58), rgba(166, 190, 255, 0.2) 34%, transparent 66%);
    filter: blur(38px) saturate(1.32);
    mix-blend-mode: screen;
}

.liquid-cursor-lens {
    width: 210px;
    height: 210px;
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)),
        radial-gradient(circle at 32% 22%, rgba(255,255,255,0.52), transparent 28%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 18px 0 38px rgba(255,255,255,0.12),
        0 20px 55px rgba(46, 88, 190, 0.14);
    backdrop-filter: blur(12px) saturate(160%) contrast(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(160%) contrast(1.05);
    animation: liquidLensMorph 8s ease-in-out infinite alternate;
}

.liquid-cursor-lens::before,
.liquid-cursor-lens::after,
.liquid-cursor-lens span {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}

.liquid-cursor-lens::before {
    inset: 12px;
    border: 1px solid rgba(255,255,255,0.28);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), transparent 34%),
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.5), transparent 18%);
    filter: blur(.2px);
}

.liquid-cursor-lens::after {
    inset: -18px;
    border: 1px solid rgba(255,255,255,0.16);
    filter: blur(10px);
    background: radial-gradient(circle, rgba(120,160,255,0.14), transparent 58%);
}

.liquid-cursor-lens span {
    width: 58%;
    height: 16%;
    left: 18%;
    top: 21%;
    transform: rotate(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.58), transparent);
    filter: blur(8px);
    mix-blend-mode: screen;
}

body.pointer-active .liquid-cursor-aura,
body.pointer-active .liquid-cursor-lens {
    opacity: 1;
}

[data-theme="dark"] .liquid-cursor-aura {
    background:
        radial-gradient(circle, rgba(96,165,250,0.32), rgba(124,58,237,0.14) 38%, transparent 68%);
}

[data-theme="dark"] .liquid-cursor-lens {
    border-color: rgba(255,255,255,0.18);
    background:
        linear-gradient(135deg, rgba(96,165,250,0.16), rgba(124,58,237,0.08)),
        radial-gradient(circle at 32% 22%, rgba(255,255,255,0.22), transparent 28%);
}

@keyframes liquidLensMorph {
    0% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
    50% { border-radius: 58% 42% 47% 53% / 44% 56% 44% 56%; }
    100% { border-radius: 48% 52% 62% 38% / 56% 38% 62% 44%; }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.62), transparent 26%),
        linear-gradient(135deg, rgba(248,250,252,.88), rgba(226,232,240,.54));
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: opacity 260ms ease, backdrop-filter 260ms ease;
}

body.page-enter {
    animation: pageGaussianIn 420ms cubic-bezier(.16, 1, .3, 1) both;
}

body.page-leave::after {
    opacity: .34;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.page-leave .shell,
html:has(body.page-leave) .shell {
    transform: translateY(-6px) scale(.996);
    filter: blur(4px) !important;
    opacity: .78;
    transition: transform 320ms cubic-bezier(.16, 1, .3, 1), filter 280ms ease, opacity 240ms ease;
}

.liquid-transition {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

.liquid-transition__glass,
.liquid-transition__shine,
.liquid-transition__line {
    position: absolute;
    top: -12vh;
    bottom: -12vh;
    left: -18vw;
    width: 138vw;
    transform: translateX(-115%) skewX(-8deg) scale(1.04);
    transform-origin: center;
    border: 1px solid rgba(255, 255, 255, 0.58);
    clip-path: polygon(0 0, 88% 0, 100% 100%, 8% 100%);
}

.liquid-transition__glass {
    background:
        linear-gradient(118deg, rgba(255,255,255,0.76), rgba(214,226,255,0.45) 34%, rgba(126,154,255,0.3) 58%, rgba(255,255,255,0.58)),
        linear-gradient(90deg, rgba(255,255,255,0.1), transparent 26%, rgba(255,255,255,0.22) 54%, transparent 80%);
    backdrop-filter: blur(28px) saturate(180%) contrast(1.06);
    -webkit-backdrop-filter: blur(28px) saturate(180%) contrast(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 26px 0 70px rgba(255,255,255,0.24),
        0 0 120px rgba(78, 108, 220, 0.24);
}

.liquid-transition__shine {
    width: 72vw;
    left: -10vw;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.66), transparent);
    mix-blend-mode: screen;
    opacity: 0.72;
    filter: blur(18px);
}

.liquid-transition__line {
    width: 18vw;
    left: -4vw;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), rgba(129, 158, 255, 0.32), transparent);
    opacity: 0.7;
    filter: blur(10px);
}

.liquid-transition.leave,
.liquid-transition.enter {
    opacity: 1;
}

.liquid-transition.leave .liquid-transition__glass {
    animation: liquidCover 400ms cubic-bezier(.55, 0, .12, 1) both;
}

.liquid-transition.leave .liquid-transition__shine {
    animation: liquidShineCover 400ms cubic-bezier(.55, 0, .12, 1) both;
}

.liquid-transition.leave .liquid-transition__line {
    animation: liquidLineCover 400ms cubic-bezier(.55, 0, .12, 1) both;
}

.liquid-transition.enter .liquid-transition__glass {
    animation: liquidReveal 420ms cubic-bezier(.16, 1, .3, 1) both;
}

.liquid-transition.enter .liquid-transition__shine {
    animation: liquidShineReveal 420ms cubic-bezier(.16, 1, .3, 1) both;
}

.liquid-transition.enter .liquid-transition__line {
    animation: liquidLineReveal 420ms cubic-bezier(.16, 1, .3, 1) both;
}

body.liquid-leaving .shell {
    animation: none !important;
    transform: translateY(-6px) scale(.996) !important;
    filter: blur(3px) saturate(1.04) !important;
    opacity: .82 !important;
    transition: transform 340ms cubic-bezier(.55, 0, .12, 1), filter 300ms ease, opacity 240ms ease;
}

body.liquid-entering .shell {
    animation: liquidContentReveal 420ms cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes liquidCover {
    0% { transform: translateX(-118%) skewX(-8deg) scale(1.06); opacity: 0; filter: blur(8px); }
    18% { opacity: 1; filter: blur(0); }
    72% { transform: translateX(-18%) skewX(-4deg) scale(1.02); }
    100% { transform: translateX(-4%) skewX(0deg) scale(1); opacity: 1; }
}

@keyframes liquidReveal {
    0% { transform: translateX(-4%) skewX(0deg) scale(1); opacity: 1; }
    58% { opacity: 1; }
    100% { transform: translateX(112%) skewX(8deg) scale(1.04); opacity: 0; filter: blur(6px); }
}

@keyframes liquidShineCover {
    0% { transform: translateX(-130%) skewX(-8deg) scale(1.08); opacity: 0; }
    28% { opacity: .72; }
    100% { transform: translateX(58%) skewX(0deg) scale(1); opacity: .44; }
}

@keyframes liquidShineReveal {
    0% { transform: translateX(40%) skewX(0deg) scale(1); opacity: .42; }
    100% { transform: translateX(165%) skewX(8deg) scale(1.06); opacity: 0; }
}

@keyframes liquidLineCover {
    0% { transform: translateX(-150%) skewX(-8deg) scale(1.1); opacity: 0; }
    20% { opacity: .74; }
    100% { transform: translateX(420%) skewX(0deg) scale(1); opacity: .32; }
}

@keyframes liquidLineReveal {
    0% { transform: translateX(420%) skewX(0deg) scale(1); opacity: .34; }
    100% { transform: translateX(760%) skewX(8deg) scale(1.08); opacity: 0; }
}

@keyframes liquidContentReveal {
    0% { opacity: .62; transform: translateY(18px) scale(.99); filter: blur(10px) saturate(1.04); }
    52% { opacity: .72; }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1); }
}

@keyframes pageGaussianIn {
    from {
        opacity: .72;
        transform: translateY(12px) scale(.994);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes liquidBackground {
    0%, 100% { background-position: 0% 42%; }
    50% { background-position: 100% 58%; }
}

.shell {
    animation: pageFloatIn 460ms ease both;
}

@keyframes pageFloatIn {
    from { opacity: 0; transform: translateY(18px) scale(0.99); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.topbar,
.hero,
.toolbar,
.panel,
.posts-panel,
.aside-card,
.section-panel,
.post-card,
.article-shell,
.profile-card,
.camera-lab,
.timeline-card,
.tool-card,
.lab-card,
.stat,
.footer,
.resume-card,
.resume-panel,
.resume-hero,
.resume-strip,
.contact-card {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.46)) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
}

.resume-panel,
.resume-card,
.resume-strip,
.contact-card,
.section-panel,
.panel,
.aside-card,
.posts-panel,
.profile-card,
.timeline-card,
.camera-lab {
    background:
        radial-gradient(circle at 18% 0%, rgba(91, 109, 246, 0.12), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.1), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,255,255,0.44)) !important;
}

[data-theme="dark"] .resume-panel,
[data-theme="dark"] .resume-card,
[data-theme="dark"] .resume-strip,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .section-panel,
[data-theme="dark"] .panel,
[data-theme="dark"] .aside-card,
[data-theme="dark"] .posts-panel,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .timeline-card,
[data-theme="dark"] .camera-lab {
    background:
        radial-gradient(circle at 16% 0%, rgba(91, 109, 246, 0.2), transparent 34%),
        radial-gradient(circle at 90% 8%, rgba(14, 165, 233, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(14, 25, 46, 0.9), rgba(22, 29, 52, 0.72)) !important;
    border-color: rgba(255,255,255,.13) !important;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .hero,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .panel,
[data-theme="dark"] .posts-panel,
[data-theme="dark"] .aside-card,
[data-theme="dark"] .section-panel,
[data-theme="dark"] .post-card,
[data-theme="dark"] .article-shell,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .camera-lab,
[data-theme="dark"] .timeline-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .lab-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .footer,
[data-theme="dark"] .resume-card,
[data-theme="dark"] .resume-panel,
[data-theme="dark"] .resume-hero,
[data-theme="dark"] .resume-strip,
[data-theme="dark"] .contact-card {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: linear-gradient(135deg, rgba(15,23,42,0.82), rgba(15,23,42,0.48)) !important;
}

.topbar,
.hero,
.toolbar,
.panel,
.posts-panel,
.aside-card,
.section-panel,
.article-shell,
.profile-card,
.camera-lab,
.timeline-card,
.tool-card,
.lab-card,
.footer,
.resume-hero,
.resume-panel,
.resume-strip,
.contact-card {
    position: relative;
    overflow: hidden;
    transform:
        translate3d(calc(var(--tilt-x, 0) * 1px), calc(var(--tilt-y, 0) * 1px), 0)
        perspective(1100px)
        rotateX(var(--card-rx, 0deg))
        rotateY(var(--card-ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.topbar::before,
.hero::before,
.panel::before,
.section-panel::before,
.camera-lab::before,
.timeline-card::before,
.tool-card::before,
.resume-card::before,
.resume-panel::before,
.resume-hero::before,
.contact-card::before,
.posts-panel::before,
.aside-card::before,
.profile-card::before,
.article-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    opacity: var(--card-glow, 0);
    background:
        radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255,255,255,0.72), rgba(180,205,255,0.24) 18%, transparent 46%),
        conic-gradient(from 180deg at var(--card-x, 50%) var(--card-y, 50%), transparent, rgba(255,255,255,0.34), transparent 26%);
    mix-blend-mode: screen;
    transition: opacity 220ms ease;
}

.topbar > *,
.hero > *,
.panel > *,
.section-panel > *,
.camera-lab > *,
.timeline-card > *,
.tool-card > *,
.resume-card > *,
.resume-panel > *,
.resume-hero > *,
.contact-card > *,
.posts-panel > *,
.aside-card > *,
.profile-card > *,
.article-shell > * {
    position: relative;
    z-index: 1;
}

.topbar::after,
.hero::after,
.panel::after,
.section-panel::after,
.camera-lab::after,
.timeline-card::after,
.tool-card::after,
.resume-card::after,
.resume-panel::after,
.resume-hero::after,
.contact-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,0.58), transparent 20%, transparent 72%, rgba(211,224,255,0.24));
    opacity: 0.55;
}

.nav {
    align-items: center;
}

.nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

a,
button,
.btn,
.nav a,
.tab-btn,
.preset-btn,
.effect-btn,
.filter-btn,
.upload-label {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button,
.btn,
.nav a,
.tab-btn,
.preset-btn,
.effect-btn,
.filter-btn,
.upload-label {
    position: relative;
    overflow: hidden;
}

.theme-btn {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 120 !important;
    overflow: hidden;
}

button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.nav a:focus-visible,
.tab-btn:focus-visible,
.preset-btn:focus-visible,
.effect-btn:focus-visible,
.filter-btn:focus-visible,
.upload-label:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 3px;
}

.nav a:hover,
.nav a.active {
    color: #fff !important;
    border-color: rgba(255,255,255,0.38);
    background: linear-gradient(135deg, #1d4ed8, #5b6df6 54%, #7c3aed) !important;
    box-shadow: 0 14px 38px rgba(46, 88, 190, 0.22);
}

.btn,
.chip,
.tag,
.stat {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.btn {
    transform: translateZ(0);
}

.btn:active,
.nav a:active,
.theme-btn:active,
.tab-btn:active,
.preset-btn:active,
.effect-btn:active,
.filter-btn:active {
    transform: translateY(1px) scale(0.985) !important;
}

.btn[data-loading="1"],
.btn.is-loading,
button[data-loading="1"],
button.is-loading {
    cursor: progress !important;
    opacity: 0.76;
    pointer-events: none;
}

.btn.is-error,
button.is-error {
    animation: uiShake 360ms ease;
}

@keyframes uiShake {
    0%, 100% { transform: translateX(0); }
    28% { transform: translateX(-4px); }
    56% { transform: translateX(4px); }
    78% { transform: translateX(-2px); }
}

.ui-click-ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.76), rgba(255,255,255,0.28) 34%, transparent 68%);
    transform: scale(0);
    opacity: 0.72;
    animation: uiClickRipple 560ms cubic-bezier(.16, 1, .3, 1) forwards;
    mix-blend-mode: screen;
}

@keyframes uiClickRipple {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

.btn:hover,
.post-card:hover,
.panel:hover,
.aside-card:hover,
.section-panel:hover,
.resume-card:hover,
.contact-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: var(--shadow-hover) !important;
}

.btn.primary,
.nav a.active {
    background: linear-gradient(135deg, #1d4ed8, #5b6df6 54%, #7c3aed) !important;
}

.tab-btn.active,
.preset-btn.active,
.effect-btn.active,
.filter-btn.active,
.btn.toggle-active {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: linear-gradient(135deg, #1d4ed8, #5b6df6 54%, #7c3aed) !important;
    box-shadow: 0 16px 40px rgba(46, 88, 190, 0.2) !important;
}

.tab-btn,
.preset-btn,
.effect-btn,
.filter-btn,
.upload-label {
    border-color: rgba(111, 126, 150, 0.16) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 14px 38px rgba(35, 48, 82, 0.08) !important;
}

.reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    filter: blur(4px);
    transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.post-card,
.section-panel,
.profile-card,
.resume-panel,
.resume-card,
.contact-card,
.article-figure,
.timeline-card,
.tool-card,
.lab-card {
    content-visibility: auto;
    contain-intrinsic-size: 320px;
}

.liquid-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: #1f55b8;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(86, 115, 178, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}

[data-theme="dark"] .liquid-chip {
    color: #b9cdfd;
    background: rgba(15, 23, 42, 0.56);
}

.post-heat,
.archive-heat,
[data-post-heat],
[data-article-heat] {
    color: var(--primary);
}

.btn:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none !important;
}

.empty-state.visible {
    display: block;
}

.nav[aria-label] a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.skip-link {
    position: fixed;
    left: 18px;
    top: 14px;
    z-index: 12000;
    padding: 10px 14px;
    border-radius: 12px;
    color: #fff;
    background: #111827;
    transform: translateY(-160%);
    transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.nav-more-toggle,
.nav-more-menu { display: none; }

.site-search-trigger {
    position: fixed;
    top: 84px;
    right: 24px;
    z-index: 42;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 50%;
    color: var(--text);
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    cursor: pointer;
}

.site-search-trigger:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.site-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: max(10vh, 54px) 18px 24px;
    background: rgba(226,232,240,.58);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

[data-theme="dark"] .site-search-overlay { background: rgba(2,6,23,.72); }
.site-search-overlay.open { opacity: 1; visibility: visible; }

.site-search-dialog {
    width: min(680px, 100%);
    max-height: min(76vh, 720px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    color: var(--text);
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(247,250,255,.8));
    box-shadow: 0 32px 90px rgba(15,23,42,.2);
    transform: translateY(14px) scale(.985);
    transition: transform 240ms cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] .site-search-dialog {
    border-color: rgba(255,255,255,.13);
    background: linear-gradient(145deg, rgba(15,23,42,.97), rgba(17,24,39,.92));
}

.site-search-overlay.open .site-search-dialog { transform: none; }
.site-search-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); }
.site-search-head > i { color:var(--primary); }
.site-search-input { min-width:0; width:100%; border:0; outline:0; color:var(--text); background:transparent; font:inherit; font-size:17px; }
.site-search-close { width:38px; height:38px; border:0; border-radius:12px; display:grid; place-items:center; color:var(--muted); background:var(--card); cursor:pointer; }
.site-search-results { overflow:auto; padding:10px; }
.site-search-result { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:16px; transition:background 180ms ease, transform 180ms ease; }
.site-search-result:hover,.site-search-result:focus-visible { background:rgba(37,99,235,.09); transform:translateX(3px); outline:0; }
.site-search-result > i { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--primary); background:rgba(37,99,235,.1); }
.site-search-result strong,.site-search-result span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-search-result span { margin-top:3px; color:var(--muted); font-size:13px; }
.site-search-result em { color:var(--muted); font-size:12px; font-style:normal; }
.site-search-empty { padding:34px 18px; text-align:center; color:var(--muted); }
.site-search-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.site-search-foot kbd { padding:3px 7px; border:1px solid var(--border); border-radius:7px; background:var(--card); box-shadow:inset 0 -1px 0 var(--border); }
body.search-open { overflow:hidden; }

.continue-reading-card {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    margin-bottom:22px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.78);
    border-radius:20px;
    color:var(--text);
    background:linear-gradient(135deg, rgba(219,234,254,.78), rgba(255,255,255,.72));
    box-shadow:var(--shadow);
}

[data-theme="dark"] .continue-reading-card { border-color:rgba(255,255,255,.13); background:linear-gradient(135deg, rgba(30,64,175,.2), rgba(15,23,42,.84)); }
.continue-reading-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.continue-reading-card strong,.continue-reading-card span { display:block; }
.continue-reading-card span { margin-top:3px; color:var(--muted); font-size:13px; }
.continue-reading-progress { height:4px; margin-top:9px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.22); }
.continue-reading-progress i { display:block; width:var(--reading-progress,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--secondary)); }

.bookmark-btn.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.saved-label { display:inline-flex; align-items:center; gap:5px; color:var(--primary); }

.mobile-reading-tools > summary { display:none; }
.mobile-reading-tools-content { display:contents; }

.install-app-button { border:0; color:var(--primary); background:transparent; cursor:pointer; font:inherit; font-size:12px; }
.install-app-button[hidden] { display:none; }

.home-hero {
    grid-template-columns: minmax(0,1fr) !important;
    gap:22px !important;
    padding:clamp(28px,4vw,48px) !important;
}
.home-hero .hero-text { max-width:900px; }
.home-hero .hero-text h1 { max-width:840px; font-size:clamp(40px,5vw,60px); line-height:1.08; }
.home-hero .hero-text p { max-width:780px; }
.home-hero .hero-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-hero .stat { min-height:112px; }
.home-hero .barrage-container { opacity:.42; }

@media (min-width: 761px) and (max-width: 900px) {
    .topbar {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto;
        gap:14px !important;
        padding:18px !important;
    }
    .topbar .brand { grid-column:1 / 2; max-width:calc(100% - 112px); }
    .nav {
        grid-column:1 / -1;
        width:100%;
        position:relative;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) 44px;
        gap:6px !important;
    }
    .nav > a { justify-content:center; min-width:0; padding:8px !important; white-space:nowrap; }
    .nav > a.nav-secondary { display:none !important; }
    .nav-more-toggle { width:44px; min-height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:14px; color:var(--muted); background:var(--card); cursor:pointer; }
    .nav-more-toggle.active,.nav-more-toggle[aria-expanded="true"] { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
    .nav-more-menu { position:absolute; top:50px; right:0; z-index:100; width:280px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px; border:1px solid rgba(255,255,255,.78); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 60px rgba(15,23,42,.18); }
    [data-theme="dark"] .nav-more-menu { border-color:rgba(255,255,255,.13); background:rgba(15,23,42,.97); }
    .nav-more-menu:not([hidden]) { display:grid; }
    .nav-more-menu a { justify-content:flex-start; padding:9px 10px !important; }
    .topbar.nav-menu-open { overflow:visible !important; z-index:80; }
    .site-search-trigger { top:16px; right:68px; }
}

@media (max-width: 760px) {
    body {
        background-size: 240% 240%;
    }

    body.page-enter {
        animation: mobilePageIn 280ms cubic-bezier(.2, .8, .2, 1) both;
    }

    body.page-leave::after {
        opacity: .2;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.page-leave .shell,
    html:has(body.page-leave) .shell,
    body.liquid-leaving .shell {
        transform: translateX(-10px) scale(.995) !important;
        filter: none !important;
        opacity: .5 !important;
        transition: transform 220ms ease, opacity 180ms ease !important;
    }

    body.liquid-entering .shell {
        animation: mobileContentReveal 300ms cubic-bezier(.2, .8, .2, 1) both !important;
    }

    .liquid-transition__glass {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: linear-gradient(112deg, rgba(255,255,255,.84), rgba(209,224,255,.58) 52%, rgba(255,255,255,.72));
    }

    .liquid-transition__shine,
    .liquid-transition__line {
        filter: none;
    }

    .liquid-transition.leave .liquid-transition__glass,
    .liquid-transition.leave .liquid-transition__shine,
    .liquid-transition.leave .liquid-transition__line,
    .liquid-transition.enter .liquid-transition__glass,
    .liquid-transition.enter .liquid-transition__shine,
    .liquid-transition.enter .liquid-transition__line {
        animation-duration: 360ms;
    }

    .shell {
        width: min(100% - 18px, 1120px) !important;
        animation: none;
    }

    .topbar {
        padding: 16px !important;
        border-radius: 24px !important;
    }

    .nav {
        width: 100%;
        position: relative;
        display: grid !important;
        grid-template-columns: repeat(4,minmax(0,1fr)) 44px;
        gap: 5px !important;
        overflow: visible;
        padding: 2px 0;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav a {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 8px 3px !important;
        font-size: 13px;
        white-space: nowrap;
    }

    .nav > a.nav-secondary { display:none; }
    .nav-more-toggle { width:44px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; color:var(--muted); background:var(--card); cursor:pointer; }
    .nav-more-toggle.active,.nav-more-toggle[aria-expanded="true"] { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
    .nav-more-menu { position:absolute; top:50px; right:0; z-index:100; width:min(272px,calc(100vw - 38px)); grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px; border:1px solid rgba(255,255,255,.78); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 60px rgba(15,23,42,.18); }
    [data-theme="dark"] .nav-more-menu { border-color:rgba(255,255,255,.13); background:rgba(15,23,42,.97); }
    .nav-more-menu:not([hidden]) { display:grid; }
    .nav-more-menu a { justify-content:flex-start; padding:9px 10px !important; }
    .topbar.nav-menu-open { overflow:visible !important; z-index:80; }

    .site-search-trigger { top:16px; right:68px; width:44px; height:44px; backdrop-filter:none; -webkit-backdrop-filter:none; }
    .site-search-overlay { align-items:end; padding:12px; }
    .site-search-dialog { max-height:82vh; border-radius:24px; transform:translateY(22px); }
    .site-search-result { grid-template-columns:38px minmax(0,1fr); }
    .site-search-result > i { width:38px; height:38px; }
    .site-search-result em { display:none; }
    .site-search-foot { align-items:flex-start; flex-direction:column; }

    .continue-reading-card { grid-template-columns:auto minmax(0,1fr); padding:15px; }
    .continue-reading-card .btn { grid-column:1 / -1; justify-content:center; }

    .home-hero { padding:20px !important; gap:18px !important; }
    .home-hero .hero-text h1 { font-size:clamp(32px,9vw,38px); line-height:1.12; }
    .home-hero .hero-text p { line-height:1.68; }
    .home-hero .actions { display:grid; grid-template-columns:1fr 1fr; }
    .home-hero .actions .btn { width:100%; justify-content:center; padding:0 10px; }
    .home-hero .hero-stats { grid-template-columns:1fr 1fr; gap:10px; }
    .home-hero .stat { min-height:86px; padding:14px; }

    .mobile-reading-tools { display:block; margin-bottom:12px; border:1px solid var(--border); border-radius:20px; background:var(--panel); box-shadow:var(--shadow); }
    .mobile-reading-tools > summary { min-height:48px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:800; cursor:pointer; list-style:none; }
    .mobile-reading-tools > summary::-webkit-details-marker { display:none; }
    .mobile-reading-tools > summary::after { content:"+"; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:var(--primary); background:rgba(37,99,235,.1); transition:transform 180ms ease; }
    .mobile-reading-tools[open] > summary::after { transform:rotate(45deg); }
    .mobile-reading-tools-content { display:block; padding:0 10px 10px; }
    .mobile-reading-tools .reader-guide,.mobile-reading-tools .toc-panel { margin-bottom:8px; box-shadow:none; background:var(--card) !important; }

    .liquid-field-canvas,
    .liquid-cursor-aura,
    .liquid-cursor-lens {
        display: none !important;
    }

    .hero,
    .resume-hero,
    .panel,
    .section-panel,
    .posts-panel,
    .aside-card,
    .profile-card,
    .lab-card,
    .article-body,
    .resume-panel {
        border-radius: 26px !important;
        padding: 20px !important;
    }

    .toolbar {
        border-radius: 24px !important;
    }

    .reveal {
        filter: none;
        transform: translateY(16px);
        transition-duration: 340ms;
    }

    .reveal.reveal-immediate {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .topbar,
    .hero,
    .toolbar,
    .panel,
    .section-panel,
    .posts-panel,
    .aside-card,
    .profile-card,
    .resume-panel,
    .resume-card,
    .contact-card {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@keyframes mobilePageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mobileContentReveal {
    from { opacity: .72; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    body,
    body.page-enter,
    .shell,
    .reveal,
    .ui-click-ripple,
    .liquid-transition,
    .liquid-transition * {
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }
}