@font-face{font-family:'LogoSC Unbounded Sans';src:url('/fonts/LogoSCUnboundedSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.wordmark span{font-family:'LogoSC Unbounded Sans',sans-serif;font-weight:400;font-size:16px;letter-spacing:normal}
:root[data-mode=dark]{color-scheme:dark;--page:#181b20;--ink:#f0f1f3;--muted:#b4bac4;--panel:#242930;--surface-hover:#343c46;--line:#4d5764;background:var(--page);color:var(--ink)}
[data-mode=dark] body{background-color:var(--page);color:var(--ink)}
[data-mode=dark] .header,[data-mode=dark] .hero,[data-mode=dark] .footer{color:var(--ink)}
/* Bound the brightest moving background without changing its hues or artwork. */
[data-mode=dark] .hero-scene{filter:brightness(.28)}
[data-mode=dark] .footer-scene{filter:brightness(.24)}
[data-mode=dark] .works-page,[data-mode=dark] .grid-surface{background-color:var(--page);background-blend-mode:soft-light}
[data-mode=dark] .works-page:before,[data-mode=dark] .works-page:after{opacity:.2}
[data-mode=dark] .works-page .footer,[data-mode=dark] .brands{background:var(--panel);color:var(--ink)}
[data-mode=dark] .wordmark>img,[data-mode=dark] .theme-switch img,[data-mode=dark] .mail-icon img{filter:invert(1)}
[data-mode=dark] .theme-switch{background:var(--panel);border:1px solid var(--line)}
[data-mode=dark] .theme-switch button[aria-pressed=true]{background:var(--surface-hover)}
[data-mode=dark] .top-nav button:disabled{opacity:1;color:#8e96a2}
[data-mode=dark] .skill-cloud li{background:var(--panel);color:var(--ink);text-shadow:none}
[data-mode=dark] .brand-logo{filter:grayscale(1) invert(1)}
[data-mode=dark] .brand-note,[data-mode=dark] .wechat figcaption,[data-mode=dark] .project-meta dt{color:var(--muted);opacity:1}
[data-mode=dark] .experience-nav a,[data-mode=dark] .section-nav a{color:var(--muted);border-color:var(--line)}
[data-mode=dark] .experience-nav a[aria-current],[data-mode=dark] .section-nav .active{color:var(--ink)}
[data-mode=dark] .project-meta .meta-tag,[data-mode=dark] .socials button,[data-mode=dark] .socials a{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
[data-mode=dark] .socials button:disabled{color:var(--muted)}
[data-mode=dark] .hero .split-button,[data-mode=dark] .project-back{color:var(--page)}
[data-mode=dark] .hero .split-button span,[data-mode=dark] .project-back{background:var(--ink)}
[data-mode=dark] .split-button>span:last-child,[data-mode=dark] .project-back span:first-child{border-color:#181b2050}
[data-mode=dark] .wechat button{background:#fff;color:#111}
[data-mode=dark] .dock{background:#242930f5;border-color:var(--line);box-shadow:0 12px 36px #0006}
[data-mode=dark] body .dock a:not([aria-current]) img,[data-mode=dark] body .dock button img{filter:grayscale(1) brightness(0) invert(.85)}
[data-mode=dark] .dock button:disabled img{opacity:.6}
[data-mode=dark] .dock-divider{background:var(--line)}
[data-mode=dark] .dock [data-label]:before{background:var(--ink);color:var(--page)}
[data-mode=dark] :is(a,button):focus-visible{outline-color:#ff9897}
[data-mode=dark] .work-image{background:var(--panel)}
[data-mode=dark] dialog{background:var(--panel);border:1px solid var(--line)}
[data-mode=dark] .dialog-close{background:var(--surface-hover)}
/* The light grid texture has an opaque pale base; draw dark grid lines directly. */
[data-mode=dark] .works-page,[data-mode=dark] .grid-surface{background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:200px 200px;background-blend-mode:normal}

/* Independent midnight / indigo / violet palette; retain the glass and sticker colours. */
[data-mode=dark] .hero-scene{filter:none;background:radial-gradient(ellipse at 75% 30%,#253b78,transparent 60%),radial-gradient(ellipse at 25% 75%,#45377c,transparent 60%),linear-gradient(125deg,#10152e,#322654 55%,#141c38)}

/* Dark liquid glass keeps reflected highlights while preserving readable contrast. */
[data-mode=dark]{--liquid-glass:linear-gradient(135deg,rgba(58,66,82,.72),rgba(24,29,40,.48) 52%,rgba(63,52,86,.58));--liquid-glass-border:rgba(255,255,255,.18);--liquid-glass-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.30)}
[data-mode=dark] :is(.theme-switch,.skill-cloud li,.brands,.socials a,.socials button,.dock,.wechat button){background:var(--liquid-glass);border-color:var(--liquid-glass-border);box-shadow:var(--liquid-glass-shadow);color:var(--ink)}
[data-mode=dark] .theme-switch button[aria-pressed=true]{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
[data-mode=dark] .wechat button{color:#111;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.52))}
[data-mode=dark] :is(.brands,.socials a,.socials button,.wechat button){box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06)}