/* A separate material layer; typography, content and section layout come from preview.css. */
:root { --glass-fill: rgba(255, 255, 255, .38); --glass-edge: rgba(255, 255, 255, .7); --glass-shadow: 0 8px 28px rgba(62, 55, 40, .055), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(112, 101, 78, .08); }
section, [id] { scroll-margin-top: 128px; }
/* Navigation destinations keep semantic focus without drawing a box around content. */
main :is(section, h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
#navbar { position: sticky; top: 32px; z-index: 20; margin-top: 32px; margin-bottom: 0; width: min(var(--page), 1000px); padding: 10px 16px 10px 23px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-fill); -webkit-backdrop-filter: blur(22px) saturate(145%); backdrop-filter: blur(22px) saturate(145%); box-shadow: var(--glass-shadow), 0 0 0 1px rgba(83, 75, 58, .035); transition: box-shadow 220ms ease, background-color 220ms ease; }
#navbar.is-scrolled { background: rgba(255, 255, 255, .56); box-shadow: 0 10px 32px rgba(62, 55, 40, .085), inset 0 1px 0 white, inset 0 -1px 0 rgba(112, 101, 78, .1), 0 0 0 1px rgba(83, 75, 58, .035); }
.navbar-nav { position: relative; align-items: center; gap: 3px; }
.navbar-nav > .nav-item { position: relative; z-index: 1; }
.nav-link { display: block; padding: 9px 13px; border-radius: 999px; transition: color 180ms ease; }
.nav-link:hover { text-decoration: none; color: var(--ink); }
.nav-link[aria-current=location] { color: #70482f; }
.nav-indicator { position: absolute; top: 0; left: 0; height: 100%; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; background: rgba(153, 99, 74, .09); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 1px rgba(99, 74, 49, .04), 0 2px 5px rgba(99, 74, 49, .035); pointer-events: none; transition: transform 260ms cubic-bezier(.22, 1, .36, 1), width 260ms cubic-bezier(.22, 1, .36, 1); list-style: none; }
.intro-links { gap: 10px; }
.intro-links a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 19px; min-height: 44px; border: 1px solid var(--glass-edge); border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 3px 12px rgba(62, 55, 40, .045), inset 0 1px 0 rgba(255, 255, 255, .95); transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.intro-links a:hover { color: var(--accent); background: rgba(255, 255, 255, .88); box-shadow: 0 5px 15px rgba(62, 55, 40, .08), inset 0 1px 0 white; transform: translateY(-1px); }
.intro-links a:active { transform: scale(.97); }
.hero-portrait img { border-radius: 24px; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 12px 32px rgba(62, 55, 40, .07); }
.research-project { border-radius: 24px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .88); box-shadow: 0 4px 18px rgba(62, 55, 40, .035), 0 0 0 1px rgba(83, 75, 58, .04); }
.project-image { border-radius: 16px; overflow: hidden; }
.navbar-toggler { border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 white; }
@media (max-width: 1000px) and (min-width: 701px) { #navbar { gap: 12px; padding-left: 20px; padding-right: 12px; } .navbar-brand { font-size: 15px; } .navbar-brand [lang=zh] { font-size: 12px; margin-left: 5px; } .nav-link { padding: 9px 10px; font-size: 12px; } }
@media (max-width: 700px) { #navbar { top: 22px; margin-top: 22px; margin-bottom: 0; padding: 10px 12px 10px 17px; border-radius: 27px; } .navbar-brand { font-size: 15px; } .navbar-brand [lang=zh] { font-size: 12px; margin-left: 5px; } .navbar-toggler { border-color: rgba(93, 84, 64, .1); padding: 7px 12px; min-height: 40px; } .navbar-nav { gap: 5px; padding-top: 5px; padding-bottom: 3px; } .nav-link { padding: 8px 12px; } .nav-link[aria-current=location] { background: rgba(153, 99, 74, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } .nav-indicator { display: none; } .hero-portrait img { border-radius: 20px; } .intro-links { gap: 9px; } .intro-links a { padding-inline: 17px; } .research-project { border-radius: 22px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #navbar, #navbar.is-scrolled, .intro-links a { background: #f8f7f3; } }
@media (prefers-reduced-transparency: reduce) { #navbar, #navbar.is-scrolled, .intro-links a { background: #f8f7f3; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { #navbar, .nav-link, .nav-indicator, .intro-links a { transition: none; } .intro-links a:hover, .intro-links a:active { transform: none; } }
@media (forced-colors: active) { #navbar, .intro-links a, .research-project { border: 1px solid CanvasText; box-shadow: none; } .nav-indicator, .nav-link[aria-current=location] { border: 1px solid Highlight; } }