/* Reference: compact floating bar → width expansion → vertical content reveal. */
.floating-navigation {user-select:none;--nav-bar-height:72px;--nav-top:16px;position:fixed;top:var(--nav-top);left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));height:var(--nav-bar-height);padding:0;display:block;z-index:90;border:0;background:transparent;backdrop-filter:none;isolation:isolate;color:var(--text);border-radius:var(--ui-radius);transition:color .28s ease}
.header-spacer {height:104px}
.site-header.floating-navigation {transition:translate .28s ease-out,color .28s ease}
html[data-reading-idle] .floating-navigation[data-nav-state="closed"]:not(:has([aria-expanded="true"], :focus-visible)) {
  translate: 0 calc(-100% - var(--nav-top) - 40px);
  pointer-events: none;
}
@media (prefers-reduced-motion:reduce) {
  .site-header.floating-navigation {transition:none}
}
.nav-surface {position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bg);border:1px solid #ffffff1c;box-shadow:0 12px 40px #0003;backdrop-filter:blur(24px);transition:background .28s,border-color .28s,box-shadow .28s;pointer-events:none}
html[data-theme="light"] .nav-surface {background:#fff;border-color:#20251d1c;box-shadow:0 12px 40px #20251d12}
.nav-bar {height:var(--nav-bar-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;position:absolute;top:0;left:0;right:0;z-index:3}
.floating-navigation .identity {gap:11px;font-size:12px;letter-spacing:.045em;flex:none}
.floating-navigation .identity-mark {width:38px;height:30px}
.floating-navigation .identity-cn {font-size:9px;margin-top:4px}
.floating-navigation .header-actions {display:flex;align-items:center;gap:22px;flex:none}
.floating-navigation .theme-control {opacity:1;pointer-events:auto}
.floating-navigation .theme-toggle {min-width:54px;font-size:11px;gap:7px}
.sm-toggle {display:flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer}
.sm-toggle-textWrap {width:2em;display:block;overflow:hidden}
.sm-toggle-textInner,.sm-toggle-line {display:block}
.sm-icon {width:18px;height:18px;position:relative;display:block}
.sm-icon-line {position:absolute;left:0;top:6px;height:1px;width:18px;background:currentColor;transition:transform .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1)}
.sm-icon-line-second {top:11px}
.sm-toggle[aria-expanded="true"] .sm-icon-line {top:9px;transform:rotate(45deg)}
.sm-toggle[aria-expanded="true"] .sm-icon-line-second {transform:rotate(-45deg)}
.sm-toggle:focus-visible {outline:1px solid currentColor;outline-offset:4px;border-radius:4px}
.nav-reveal {position:absolute;left:0;right:0;top:var(--nav-bar-height);bottom:0;overflow:hidden;border-radius:0 0 var(--ui-radius) var(--ui-radius)}
.staggered-menu-wrapper {position:relative;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.staggered-menu-wrapper[hidden],.nav-dismiss[hidden] {display:none}
.staggered-menu-panel {background:transparent;color:inherit;padding:16px 28px 24px}
.nav-panel-top {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;color:var(--muted);font-size:9px;letter-spacing:.1em}
.sm-panel-kicker {font-size:9px;font-weight:400;line-height:1.3;margin:0;color:inherit;letter-spacing:inherit}
.nav-content-grid {display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:40px;align-items:center}
.floating-navigation nav {display:block}
.sm-panel-list {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.sm-panel-itemWrap {margin:0;padding:0}
.floating-navigation .sm-panel-item {display:flex;align-items:center;gap:12px;padding:7px 0;color:var(--text);text-decoration:none;transition:opacity .3s,color .3s;min-height:43px;outline-offset:4px}
.nav-item-number {flex:0 0 18px;color:var(--muted);font-size:9px;letter-spacing:0;transition:transform .35s,opacity .35s;opacity:.65}
.nav-item-copy {display:flex;align-items:baseline;gap:12px;min-width:0;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.sm-panel-itemLabel {font-size:clamp(23px,2.5vw,30px);font-weight:450;line-height:1.2;letter-spacing:-.035em;white-space:nowrap}
.floating-navigation nav sup {font-size:9px;letter-spacing:0;font-weight:400;color:var(--muted);position:relative;top:-.7em;margin-left:2px}
.nav-item-english {font-size:9px;line-height:1.3;color:var(--muted);max-width:8em}

.sm-panel-list[data-hovering] .sm-panel-item:not(.is-preview) .sm-panel-itemLabel {opacity:.55}
.sm-panel-itemLabel {transition:opacity .3s}
@media(max-width:680px){.sm-panel-list[data-hovering] .sm-panel-item:not(.is-preview) .sm-panel-itemLabel{opacity:.72}}
.floating-navigation .sm-panel-item.is-preview,.floating-navigation .sm-panel-item:focus-visible {color:var(--text);opacity:1}
.sm-panel-item.is-preview .nav-item-copy {transform:translateX(6px)}
.sm-panel-item.is-preview .nav-item-number {opacity:1;transform:translateX(2px)}
.sm-panel-item[aria-current="location"] .nav-item-number {color:var(--accent);opacity:1}
.sm-panel-item:focus-visible {outline:1px solid var(--text);border-radius:4px}
.nav-preview {margin:0;min-width:0;align-self:center}
.nav-preview-frame {position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg);border-radius:var(--ui-radius)}
.nav-preview-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .32s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.nav-preview-image.is-current {opacity:1;transform:scale(1)}
.nav-preview-image[data-kind="home"] {object-fit:contain;padding:14px}
.nav-preview-image[data-kind="contact"] {object-fit:cover;object-position:50% 60%;padding:0;filter:none}
.nav-preview-image[data-kind="about"] {object-fit:contain;object-position:center}
.nav-preview figcaption {display:flex;flex-direction:column;gap:9px;margin-top:15px;min-height:47px}
.nav-preview-caption {font-size:10px;letter-spacing:.08em;line-height:1.4;color:var(--text)}
.nav-preview-description {font-size:11px;line-height:1.65;color:var(--muted)}
.sm-footer {margin-top:28px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:9px;letter-spacing:.04em;line-height:1.5}
.nav-dismiss {position:fixed;inset:0;z-index:85;background:#00000012;opacity:0;transition:opacity .3s}
body.directory-visible {overflow:hidden}
.directory-visible .nav-dismiss {opacity:1}
@media(min-width:1600px){.floating-navigation{padding:0}}
@media(max-width:680px){
 .floating-navigation {--nav-bar-height:64px;--nav-top:12px;width:calc(100% - 24px)}
 .header-spacer {height:88px}
 .nav-bar {padding:0 18px;gap:12px}
 .floating-navigation .identity {font-size:11px;gap:9px}
 .floating-navigation .identity-mark {width:33px;height:26px}
 .floating-navigation .identity-cn {font-size:8px}
 .floating-navigation .header-actions {gap:16px}
 .floating-navigation .theme-toggle {min-width:28px;width:28px;padding:0}
 .floating-navigation .theme-label,.sm-toggle-textWrap {display:none}
 .sm-toggle {min-width:24px;justify-content:flex-end}
 .staggered-menu-panel {padding:12px 20px 20px}
 .nav-panel-top {margin-bottom:15px;font-size:8px}
 .nav-content-grid {grid-template-columns:1fr;gap:22px}
 .sm-panel-list {gap:0}
 .floating-navigation .sm-panel-item {min-height:38px;padding:5px 0}
 .sm-panel-itemLabel {font-size:23px}
 .nav-item-copy {gap:14px}
 .nav-item-english {font-size:9px;max-width:none}
 .nav-item-number {font-size:8px;flex-basis:16px}
 .nav-preview-frame {max-height:190px;aspect-ratio:16/9}
 .nav-preview-description {font-size:10px}
 .nav-preview figcaption {margin-top:11px;gap:6px;min-height:0}
 .sm-footer {margin-top:20px;font-size:8px}
}
@media(max-width:360px){.nav-item-english{max-width:9em;font-size:8px}.nav-item-copy{gap:10px}.sm-panel-itemLabel{font-size:20px}.nav-bar{padding:0 16px}.floating-navigation .header-actions{gap:12px}}
@media(max-height:600px) and (min-width:681px){.staggered-menu-panel{padding-top:8px;padding-bottom:16px}.nav-panel-top{margin-bottom:8px}.sm-panel-itemLabel{font-size:23px}.floating-navigation .sm-panel-item{min-height:34px;padding:3px 0}.sm-footer{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.floating-navigation *,.nav-dismiss{transition:none!important;animation:none!important}}
.directory-visible .floating-navigation .header-actions>.theme-control {opacity:1;pointer-events:auto}
/* Align translations to a shared column rather than the Chinese word length. */
.nav-item-copy {display:grid;grid-template-columns:minmax(0,1fr) 116px;align-items:center;flex:1}
.nav-item-english {max-width:none;font-size:10px}
.nav-content-grid nav {container:directory-links / inline-size}
.floating-navigation .sm-panel-item:is(:active,:focus-visible,[aria-current="location"])
 :is(.sm-panel-itemLabel,.nav-item-english,.nav-item-number,sup) {color:var(--menu-accent)}
@media(max-width:680px){.nav-item-copy{grid-template-columns:minmax(0,1fr) 118px}.nav-item-english{font-size:9px}}
@media(max-width:360px){.nav-item-copy{grid-template-columns:minmax(0,1fr) 98px;gap:6px}.nav-item-english{font-size:8px}.floating-navigation .sm-panel-item{gap:8px}}
/* Tablet widths keep translations below titles to avoid crowding the preview. */
@media(min-width:681px) and (max-width:960px){
 .nav-content-grid{grid-template-columns:.95fr 1fr;gap:28px}
 .nav-item-copy{grid-template-columns:minmax(0,1fr);gap:4px}
 .nav-item-english{font-size:9px;line-height:1.2}
 .floating-navigation .sm-panel-item{padding:5px 0;min-height:52px}
}
@container directory-links (max-width:340px) {
 .nav-item-copy {grid-template-columns:minmax(0,1fr);gap:2px}
}