/* 目录字体与图标 (web/js/navmark.js). Only under html[data-navmark="on"]. */
:root[data-navmark="on"] {
  --nm-serif: "Navmark Serif", "Yashima Mincho", "Noto Serif SC", "Source Han Serif SC", serif;
}

/* ---------- the serif ---------- */
:root[data-navmark="on"] .sidebar nav a,
:root[data-navmark="on"] .sidebar nav a .lamp-nm { font-family: var(--nm-serif); font-weight: 600; letter-spacing: .22em; }
:root[data-navmark="on"] .sidebar nav a .lamp-nm { font-size: 17px; }
:root[data-navmark="on"] .sidebar nav a .lamp-nm small { font-family: var(--nm-serif); font-weight: 400; font-size: 10.5px; letter-spacing: .2em; margin-top: 4px; }
:root[data-navmark="on"] .sidebar .studio-link,
:root[data-navmark="on"] .sidebar-bottom > p,
:root[data-navmark="on"] .sidebar-bottom > small { font-family: var(--nm-serif); font-weight: 400; letter-spacing: .12em; }
:root[data-navmark="on"] .sidebar .studio-link > span { font-weight: 600; }
:root[data-navmark="on"] .sidebar .studio-link small { font-weight: 400; letter-spacing: .06em; }
:root[data-navmark="on"] .mobile-nav :is(a, button) { font-family: var(--nm-serif); font-weight: 600; letter-spacing: .14em; }

/* ---------- icons: a fine outline; the open page's icon fills in ---------- */
:root[data-navmark="on"] .nm-ic { display: inline-grid !important; place-items: center; width: 20px; height: 20px; font-size: 0 !important; line-height: 0; flex: none; }
:root[data-navmark="on"] .nm-ic svg { width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-navmark="on"] .nm-ic .f { fill: currentColor; fill-opacity: 0; transition: fill-opacity .5s ease; }
:root[data-navmark="on"] :is(a, button).active .nm-ic .f,
:root[data-navmark="on"] a[aria-current="page"] .nm-ic .f { fill-opacity: 1; }
:root[data-navmark="on"] :is(a, button).active .nm-ic svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--yx-glow, #f2dfae) 70%, transparent)); }
:root[data-navmark="on"][data-theme="soft-anime"] :is(a, button).active .nm-ic svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--yx-accent, #e58ea8) 45%, transparent)); }
/* 连接's two rings and 更多's dots stay light when filled */
:root[data-navmark="on"] :is(a, button).active .nm-ic[data-navmark="connections"] .f { fill-opacity: .35; }
:root[data-navmark="on"] .nm-ic[data-navmark="more"] .f { fill-opacity: .55; stroke: none; }
:root[data-navmark="on"] button.active .nm-ic[data-navmark="more"] .f { fill-opacity: 1; }

/* the moment a page opens: the icon breathes in once */
@keyframes nm-press { 0% { transform: scale(.78); } 55% { transform: scale(1.08); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-navmark="on"] body[data-motion="gentle"] :is(a, button).active .nm-ic svg { animation: nm-press .55s cubic-bezier(.3, 1.3, .5, 1); }
  :root[data-navmark="on"] .sidebar nav a:hover .nm-ic svg { transform: translateY(-1px); transition: transform .3s ease; }
}