/* Independent visual implementation from the supplied screenshots and measurements.
   No OneNav source, remote fonts, remote icon proxy, advertising or tracking. */
:root { --nav-bg:#f2f4f7; --nav-paper:#fff; --nav-text:#484b4f; --nav-muted:#888b8f; --nav-line:#edf0f3; --nav-accent:#f1405b; --nav-rail:150px; --nav-hero-height:604px; }
html { scroll-behavior:smooth; }
.nav-body { margin:0; min-height:100vh; background:var(--nav-bg); color:var(--nav-text); font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.nav-body *, .nav-body *::before, .nav-body *::after { box-sizing:border-box; }
.nav-body a { color:inherit; text-decoration:none; }
.nav-body a:hover { color:var(--nav-accent); }
.nav-body button, .nav-body input { font:inherit; }
.nav-body button { color:inherit; border:0; background:none; cursor:pointer; }
.nav-body input { min-width:0; }
.nav-body svg, .nav-body img { max-width:100%; }
.nav-body [hidden] { display:none !important; }
.nav-body h1, .nav-body h2, .nav-body h3, .nav-body h4, .nav-body p { margin-top:0; }
.nav-body h1, .nav-body h2, .nav-body h3 { line-height:1.3; }
.nav-body :focus-visible { outline:2px solid #f1405b; outline-offset:3px; border-radius:5px; }
.nav-body .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#c6c8cd; border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }
.skip-link { position:fixed; top:-80px; left:12px; z-index:300; padding:10px 16px; background:#fff; color:#f1405b !important; border-radius:8px; }
.skip-link:focus { top:12px; }
.nav-header { position:fixed; z-index:100; top:0; left:0; width:100%; height:80px; padding:10px; pointer-events:none; }
.nav-topbar { position:relative; display:flex; align-items:center; height:60px; gap:15px; padding:0 13px; border-radius:12px; background:rgba(245,245,245,.75); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); pointer-events:auto; }
.nav-brand { display:flex; align-items:center; gap:7px; white-space:nowrap; min-width:165px; }
.brand-mark { display:block; font-family:Arial,Helvetica,sans-serif; font-size:36px; line-height:1; font-weight:900; font-style:italic; letter-spacing:-6px; padding-right:6px; background:linear-gradient(145deg,#ee413f,#ff971a 55%,#5b1559 56%); color:transparent; background-clip:text; -webkit-background-clip:text; }
.brand-word { color:#38373d; font-size:17px; font-weight:500; letter-spacing:2px; }
.header-menu-toggle { display:none; }
.desktop-sidebar-toggle { width:30px; height:36px; padding:0; color:#5b5861 !important; font-size:20px !important; }
.header-links { display:flex; align-items:center; gap:24px; font-size:14px; white-space:nowrap; }
.header-links a { display:flex; align-items:center; gap:8px; }
.header-links i { font-size:13px; }
.header-motto { flex:1; min-width:0; text-align:right; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:0; font-size:12px; color:#48454e; }
.header-actions { display:flex; align-items:center; gap:17px; flex-shrink:0; }
.header-actions button, .header-actions > a:not(.header-guide) { width:20px; height:36px; display:grid; place-items:center; padding:0; font-size:18px; }
.header-language { font-size:10px; color:#bf344a; padding:2px 4px; border-radius:3px; background:rgba(255,255,255,.45); }
.header-guide { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#fff !important; background:#604245; padding:5px 12px; border-radius:15px; white-space:nowrap; }
.header-search-panel { position:absolute; z-index:3; left:230px; right:10px; top:9px; display:flex; align-items:center; gap:12px; height:43px; background:#f2f4f7; border-radius:10px; }
.header-search-panel form { position:relative; width:100%; display:flex; height:43px; align-items:center; }
.header-search-label { flex-shrink:0; padding:0 22px; font-size:13px; color:#666; }
.header-search-panel input { width:100%; height:100%; border:0; background:transparent; outline:none; font-size:14px; padding:10px 8px; }
.header-search-panel form button { width:45px; height:43px; color:#5a5b63; flex-shrink:0; }
.header-search-close { width:35px; height:43px; flex-shrink:0; }
.nav-shell { min-height:100vh; }
.nav-main { min-height:60vh; margin-left:var(--nav-rail); padding:110px 20px 40px 15px; }
.nav-home .nav-main { margin-left:0; padding:0; }
.nav-sidebar { position:absolute; top:100px; bottom:155px; left:10px; width:140px; z-index:35; }
.nav-home .nav-sidebar { top:calc(var(--nav-hero-height) + 24px); }
.nav-sidebar-inner { position:sticky; top:80px; max-height:calc(100vh - 95px); overflow-y:auto; padding:9px 4px 10px; background:rgba(255,255,255,.22); border-radius:0 0 12px 12px; box-shadow:0 6px 12px rgba(0,0,0,.025); scrollbar-width:thin; }
.sidebar-link { display:flex; align-items:center; gap:10px; min-height:38px; padding:8px 12px; white-space:nowrap; border-radius:7px; font-size:14px; }
.sidebar-link > i { width:17px; flex-shrink:0; text-align:center; font-size:16px; }
.sidebar-link.is-current, .sidebar-link:hover { background:#e9ecef; color:#36393d !important; }
.sidebar-collapse { display:flex; align-items:center; gap:10px; width:100%; padding:13px 12px 4px; font-size:14px !important; margin-top:8px; border-top:1px solid rgba(230,232,235,.65) !important; }
.sidebar-collapse i { width:17px; font-size:17px; }
.sidebar-collapsed { --nav-rail:70px; }
.sidebar-collapsed .nav-sidebar { width:60px; }
.sidebar-collapsed .sidebar-link { justify-content:center; padding-left:7px; padding-right:7px; }
.sidebar-collapsed .sidebar-link span, .sidebar-collapsed .sidebar-collapse span { display:none; }
.sidebar-collapsed .sidebar-collapse { justify-content:center; padding-left:7px; padding-right:7px; }
.mobile-drawer, .drawer-backdrop { display:none; }
.nav-hero { position:relative; height:var(--nav-hero-height); margin:0; background:linear-gradient(45deg,#8618db 0%,#d711ff 50%,#460fdd 100%); }
.nav-hero::after { content:""; position:absolute; inset:auto 0 0; height:380px; background:linear-gradient(to top,var(--nav-bg) 0%,transparent 80%); pointer-events:none; }
.hero-search-box { position:absolute; z-index:4; top:172px; left:50%; transform:translateX(-50%); width:800px; max-width:calc(100% - 20px); height:136px; color:#fff; }
.hero-search-tabs { display:flex; justify-content:center; gap:28px; height:44px; padding-top:9px; }
.hero-search-tabs button { position:relative; padding:0 3px; height:26px; line-height:26px; font-size:18px; color:rgba(255,255,255,.82); white-space:nowrap; }
.hero-search-tabs button:hover, .hero-search-tabs button.is-active { color:#fff; }
.hero-search-tabs button.is-active::after { content:""; position:absolute; bottom:-4px; height:3px; left:7px; right:7px; background:#fff; border-radius:3px; }
.hero-search-form { position:relative; height:50px; background:#fff; border-radius:12px; overflow:hidden; }
.hero-search-form input { width:100%; height:50px; margin:0; padding:9px 70px 9px 20px; border:0; outline:0; border-radius:12px; background:#fff; color:#777; font-size:16px; }
.hero-search-form input::placeholder { color:#9a9da0; opacity:1; }
.hero-search-form button { position:absolute; top:3px; right:3px; width:44px; height:44px; border-radius:10px; background:var(--nav-accent); color:#fff; font-size:17px; }
.hero-search-form button:hover { background:#e93450; }
.hero-keywords { display:flex; justify-content:center; gap:26px; margin-top:10px; height:24px; font-size:14px; overflow:hidden; }
.hero-keywords a { color:rgba(255,255,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.hero-keywords a:hover { color:#fff; }
.search-engine-options { position:absolute; z-index:5; top:140px; left:0; right:0; padding:15px 18px; background:rgba(255,255,255,.96); border-radius:12px; box-shadow:0 8px 24px rgba(72,17,105,.2); color:#575b65; }
.search-engine-options > span { display:block; font-size:12px; color:#979ba3; margin-bottom:9px; }
.search-engine-options > div { display:flex; flex-wrap:wrap; gap:8px; }
.search-engine-options button { min-height:34px; padding:5px 13px; border-radius:7px; font-size:13px; background:#f2f3f6; }
.search-engine-options button:hover, .search-engine-options button.is-active { background:#fff0f3; color:#e13c59; }
.search-engine-options small { display:block; font-size:11px; color:#94989e; margin-top:9px; }
.hero-orb { position:absolute; z-index:1; right:23px; top:344px; width:60px; height:60px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#f7d4ff 0%,#8fcef0 28%,#596e9f 53%,#202741 70%,#777e9e 100%); border:1px solid rgba(34,38,55,.8); box-shadow:0 11px 16px rgba(33,40,57,.35),inset 1px 1px 7px rgba(255,255,255,.6); }
.hero-hot-panel { position:absolute; z-index:2; bottom:47px; left:50%; transform:translateX(-50%); width:1200px; max-width:calc(100% - 40px); height:108px; padding:8px; background:rgba(245,245,245,.69); border:1px solid rgba(255,255,255,.55); border-radius:12px; box-shadow:0 12px 22px rgba(70,63,98,.1); backdrop-filter:blur(10px); }
.hero-hot-heading { display:flex; justify-content:space-between; align-items:center; height:22px; margin-bottom:5px; color:#62616b; font-size:13px; }
.hero-hot-heading > span > i { margin-right:7px; }
.hot-editorial-note { font-size:9px; color:#9994a0; margin-left:7px; }
.hero-hot-heading > a { border:1px solid #f6a244; color:#ee9341 !important; border-radius:8px; padding:1px 7px; line-height:18px; font-size:11px; }
.hero-hot-heading > a i { font-size:10px; margin-right:4px; }
.hero-hot-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.hero-hot-grid > a { display:flex; align-items:center; gap:7px; height:27px; min-width:0; padding:2px 8px; border-radius:7px; background:rgba(203,195,212,.32); font-size:12px; color:#66616d; }
.hero-hot-grid > a:hover { background:rgba(255,255,255,.5); }
.hero-hot-grid > a > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-hot-grid .site-icon { height:21px; width:21px; flex-basis:21px; border-radius:50%; font-size:18px; }
.hero-hot-grid .site-icon img { max-width:21px; max-height:21px; }
.home-content { margin-top:24px; margin-left:var(--nav-rail); padding:0 10px 0 15px; }
.time-ribbon { height:28px; display:flex; align-items:center; justify-content:space-between; gap:25px; overflow:hidden; border-radius:12px; padding:3px 14px; background:#e9eaec; font-size:12px; line-height:20px; color:#7a7d82; }
.world-clock { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.world-clock > span:first-child { font-size:14px; line-height:1; }
.world-clock time { color:#909398; }
.hot-directory { margin-top:25px; scroll-margin-top:88px; }
.hot-directory-header { display:flex; align-items:center; gap:12px; height:24px; margin-bottom:16px; overflow:hidden; }
.hot-directory-header h2 { display:flex; align-items:center; gap:9px; margin:0; flex-shrink:0; font-size:16px; font-weight:500; white-space:nowrap; }
.hot-directory-header h2 i { font-size:15px; color:#ef566b; }
.hot-sort { display:flex; align-items:center; gap:0; min-width:0; white-space:nowrap; border-left:1px solid #cfd1d6; padding-left:10px; }
.hot-sort button { position:relative; padding:2px 6px; font-size:13px; color:#909298; line-height:18px; }
.hot-sort button+button::before { content:"·"; position:absolute; left:-2px; color:#97999d; }
.hot-sort button:hover, .hot-sort button.is-active { color:#64666e; }
.hot-sort button[aria-pressed="true"][data-hot-filter] { color:#f1405b; }
.hot-local-filter { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 12px; margin:0 0 16px; border-radius:10px; background:#fff; font-size:12px; }
.hot-local-filter label { white-space:nowrap; }
.hot-local-filter label i { margin-right:6px; color:#ee516c; }
.hot-local-filter input { flex:1; height:34px; min-width:160px; padding:6px 10px; border:1px solid #e6e8ec; border-radius:6px; background:#f7f8fa; }
.hot-local-filter button { min-height:34px; font-size:12px; color:#8f9299; }
.hot-local-filter [role=status] { font-size:11px; color:#a37d85; }
.site-grid, .nav-site-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.hot-site-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.site-card { position:relative; min-width:0; height:60px; border-radius:12px; background:#fff; overflow:hidden; transition:box-shadow .15s,background .15s; }
.site-card:hover { box-shadow:0 5px 16px rgba(0,0,0,.045); }
.site-card-link { display:flex; align-items:center; gap:10px; height:60px; min-width:0; padding:10px; padding-right:20px; }
.site-icon { position:relative; display:flex; align-items:center; justify-content:center; height:40px; width:40px; flex:0 0 40px; border-radius:50%; color:#b9bcbe; font-size:38px; overflow:hidden; }
.site-icon img { object-fit:contain; width:auto; height:auto; max-width:40px; max-height:40px; }
.site-icon .fa-globe { line-height:1; }
.site-card-content { min-width:0; width:100%; }
.site-card-title { display:block; margin:0 0 3px; font-size:14px; line-height:19px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-card-description { display:block; font-size:12px; line-height:17px; color:#93969a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-official-link { position:absolute; top:20px; right:4px; display:grid; place-items:center; width:20px; height:20px; border-radius:5px; opacity:0; font-size:10px; color:#b4b7bc !important; }
.site-official-link:hover { color:#f1405b !important; background:#fff0f2; }
.site-card:hover .site-official-link, .site-card:focus-within .site-official-link { opacity:1; }
.site-card-rich { height:106.35px; box-shadow:0 0 25px rgba(116,116,116,.1) inset; }
.site-card-rich .site-card-link { height:72px; padding:12px 10px; }
.site-card-rich .site-icon { width:44px; height:44px; flex-basis:44px; }
.site-card-rich .site-icon img { max-width:44px; max-height:44px; }
.site-card-footer { display:flex; align-items:center; gap:8px; height:34.35px; border-top:1px solid #f4f4f5; margin:0 9px; padding:3px 20px 3px 0; min-width:0; overflow:hidden; font-size:9px; color:#a0a2a5; white-space:nowrap; }
.site-editorial-label { flex-shrink:0; color:#f37787 !important; font-size:9px; }
.site-editorial-label i { font-size:9px; margin-right:4px; }
.site-card-taxonomy { flex-shrink:0; }
.site-card-subcategory { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-card-rich .site-official-link { top:auto; bottom:7px; right:7px; opacity:.75; }
.hot-loadmore { display:flex; align-items:center; justify-content:center; gap:25px; margin-top:16px; height:24px; color:#a2a5aa; font-size:13px; }
.hot-loadmore span { width:105px; height:1px; background:#d4d6db; }
.hot-loadmore a { white-space:nowrap; }
.directory-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:25px; margin-top:20px; align-items:start; scroll-margin-top:90px; }
.directory-primary { min-width:0; }
.directory-panel { background:var(--nav-paper); padding:12px; border-radius:12px; margin-bottom:16px; scroll-margin-top:90px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; height:19.2px; margin-bottom:8px; }
.panel-heading h2 { display:flex; align-items:center; gap:7px; margin:0; font-size:16px; line-height:19.2px; font-weight:500; white-space:nowrap; }
.panel-heading h2 i { font-size:13px; }
.panel-heading > a { flex-shrink:0; font-size:12px; color:#92969a; }
.panel-heading > a:hover { color:#f1405b; }
.rich-site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.category-site-grid .site-card { background:#f6f6f7; box-shadow:0 0 20px rgba(220,222,225,.18) inset; }
.category-site-grid .site-card:hover { background:#fff; }
.category-site-grid .site-card-title { font-size:13px; }
.category-site-grid .site-card-description { font-size:11px; }
.category-site-grid .site-card-link { gap:6px; padding:8px; padding-right:17px; }
.category-site-grid .site-icon { flex-basis:34px; width:34px; height:34px; font-size:33px; }
.category-site-grid .site-icon img { max-width:34px; max-height:34px; }
.directory-right { min-width:0; }
.sidebar-brand-card { position:relative; display:flex; align-items:flex-start; gap:12px; height:120px; border:5px solid #fff; border-radius:12px; padding:15px 16px 34px; overflow:hidden; color:#fff; background:linear-gradient(130deg,#281560,#971cbf 58%,#ee63cf); }
.sidebar-brand-card::before { content:""; position:absolute; width:175px; height:175px; top:-54px; right:-45px; border:16px solid rgba(255,255,255,.13); transform:rotate(38deg); border-radius:24px; }
.sidebar-brand-symbol { display:grid; place-items:center; position:relative; width:50px; height:50px; flex:0 0 50px; font-size:24px; font-weight:800; font-style:italic; border-radius:50%; background:#fff; color:#d23691; border:5px solid #f7c93b; letter-spacing:-3px; }
.sidebar-brand-card > div { position:relative; padding-top:5px; }
.sidebar-brand-card strong { font-size:17px; font-weight:600; white-space:nowrap; }
.sidebar-brand-card p { font-size:11px; color:#f7dcf5; margin:5px 0 0; }
.sidebar-brand-card nav { position:absolute; bottom:0; left:0; right:0; display:flex; height:30px; align-items:center; justify-content:space-around; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-brand-card nav a { color:#f7d8f4; font-size:14px; }
.catalog-stats { padding:0 5px; margin:3px 0 16px; }
.catalog-total { display:flex; flex-direction:column; align-items:center; height:65px; justify-content:center; border:1px solid #f18ba0; border-radius:7px; background:#fff2f4; color:#f06b82; }
.catalog-total strong { line-height:1.15; font-size:26px; font-weight:500; }
.catalog-total span { font-size:10px; margin-top:3px; }
.catalog-stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:6px; }
.catalog-stat-row > div { display:flex; flex-direction:column; justify-content:center; align-items:center; height:62px; background:#ecf8ff; border:1px solid #9fdcf4; border-radius:7px; color:#44a7ce; }
.catalog-stat-row > div:nth-child(2) { color:#74b886; background:#eef9e9; border-color:#b4d79b; }
.catalog-stat-row > div:nth-child(3) { color:#eb8b97; background:#fff1f2; border-color:#f0a1aa; }
.catalog-stat-row strong { font-size:19px; font-weight:500; white-space:nowrap; line-height:1.2; }
.catalog-stat-row > div:nth-child(3) strong { font-size:12px; }
.catalog-stat-row span { font-size:9px; margin-top:4px; }
.sidebar-widget { padding:14px 15px; margin-bottom:16px; background:#fff; border-radius:12px; }
.sidebar-widget h2 { display:flex; align-items:center; gap:7px; margin:0 0 14px; font-size:14px; font-weight:500; }
.sidebar-widget h2 > i { font-size:13px; color:#ed8191; }
.sidebar-widget h2 > a { margin-left:auto; color:#c0c3c8; }
.sidebar-topic-list { margin:0; padding:0; list-style:none; counter-reset:topic; }
.sidebar-topic-list li { counter-increment:topic; font-size:12px; margin:10px 0; display:flex; gap:8px; min-width:0; }
.sidebar-topic-list li::before { content:counter(topic); flex-shrink:0; font-size:11px; color:#efa0ac; width:12px; }
.sidebar-topic-list a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-policy { font-size:12px; line-height:1.8; color:#979ba0; }
.sidebar-policy p { margin-bottom:11px; }
.sidebar-policy p:last-child { margin-bottom:0; }
.sidebar-policy a { font-size:11px; color:#e98093; }
.sidebar-policy a i { margin-left:7px; }
.topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.topic-mini-card { display:flex; align-items:center; gap:10px; padding:12px; background:#f6f6f7; border-radius:10px; min-width:0; }
.topic-mini-card > i { font-size:24px; color:#c7c9cd; }
.topic-mini-card > div { min-width:0; }
.topic-mini-card strong { display:block; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.topic-mini-card span { display:block; font-size:11px; color:#a0a3a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-footer { margin:24px 10px 0 var(--nav-rail); padding:10px 15px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px 16px; font-size:11px; color:#9b9ea5; }
.nav-footer > div { display:flex; align-items:center; gap:12px; }
.nav-footer > div a { color:#787d83; font-weight:500; }
.nav-footer nav { display:flex; flex-wrap:wrap; gap:15px; }
.nav-footer p { margin:0; width:100%; font-size:10px; line-height:1.8; }
.footer-tools { position:fixed; z-index:60; right:10px; bottom:30px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.footer-tools > button, .footer-tools > a { display:grid; place-items:center; height:40px; width:40px; padding:0; border-radius:12px; background:rgba(222,225,231,.8); color:#85888f; font-size:17px; backdrop-filter:blur(8px); pointer-events:auto; }
.footer-tools > button:hover, .footer-tools > a:hover { background:#fbdce4; color:#e13c59; }
.nav-breadcrumb { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:#969aa2; margin:0 0 22px; }
.nav-breadcrumb > span[aria-hidden] { color:#c4c6cb; }
.nav-breadcrumb a:hover { color:#f1405b; }
.page-heading, .nav-page-heading { margin-bottom:24px; max-width:1050px; }
.page-heading h1, .nav-page-heading h1 { font-size:28px; font-weight:500; margin-bottom:14px; }
.page-heading h1 > span { color:#f1405b; }
.eyebrow, .nav-eyebrow { display:block; color:#a5a8af; font-size:11px; letter-spacing:.12em; margin-bottom:12px; }
.page-description, .nav-page-heading > p { color:#8d929a; font-size:14px; line-height:1.85; }
.page-description p:last-child { margin-bottom:0; }
.archive-site-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.empty-state, .nav-empty { padding:40px 25px; background:#fff; border-radius:12px; text-align:center; margin:24px 0; color:#969aa2; font-size:14px; }
.empty-state h1, .empty-state h2 { font-size:24px; color:#626770; font-weight:500; }
.button, .nav-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 19px; min-height:42px; border-radius:9px; background:#f6e8ed; color:#e95a74 !important; font-size:13px; white-space:nowrap; }
.button:hover, .nav-button:hover { background:#f4dce5; }
.button-primary { background:#f1405b; color:#fff !important; }
.button-primary:hover { background:#e2344f; }
.nav-back-link { display:inline-flex; padding:5px 0; margin-bottom:14px; color:#979ca4 !important; font-size:12px; }
.nav-pagination { display:flex; justify-content:center; margin:25px 0 10px; }
.nav-pagination .nav-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.nav-pagination .page-numbers { min-width:35px; min-height:35px; padding:8px 12px; border-radius:7px; background:#fff; font-size:12px; text-align:center; }
.nav-pagination .page-numbers.current { background:#f1405b; color:#fff; }
.site-detail { background:var(--nav-paper); border-radius:12px; overflow:hidden; }
.site-detail-hero { display:flex; align-items:center; gap:24px; padding:28px; border-bottom:1px solid var(--nav-line); }
.site-detail-hero > .site-icon { width:76px; height:76px; flex-basis:76px; font-size:72px; }
.site-detail-hero > .site-icon img { max-width:70px; max-height:70px; }
.site-detail-heading { min-width:0; }
.site-detail-heading h1 { font-size:30px; font-weight:500; margin:9px 0; }
.site-detail-heading > p { max-width:700px; font-size:14px; color:#90969e; margin-bottom:8px; }
.detail-category-chips { display:flex; gap:6px; flex-wrap:wrap; }
.detail-category-chips a { font-size:11px; color:#e16f85; background:#fff0f3; border-radius:5px; padding:3px 8px; }
.detail-domain { font-size:12px; color:#abaeb5; overflow-wrap:anywhere; }
.site-detail-action { margin-left:auto; flex-shrink:0; text-align:center; }
.site-detail-action small { display:block; font-size:10px; color:#a7abb2; margin-top:7px; }
.site-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.detail-content { padding:30px; min-width:0; }
.detail-info { padding:28px; border-left:1px solid var(--nav-line); background:rgba(248,249,250,.65); }
.detail-info h2 { font-size:15px; font-weight:500; margin-bottom:20px; }
.detail-info dl { margin:0; }
.detail-info dt { font-size:11px; color:#a1a7af; margin-top:17px; }
.detail-info dt:first-child { margin-top:0; }
.detail-info dd { margin:4px 0 0; font-size:12px; color:#828991; overflow-wrap:anywhere; }
.official-source-link { color:#dc6f84 !important; text-decoration:underline !important; text-underline-offset:3px; }
.source-note { font-size:10px; color:#a1a6ae; line-height:1.8; margin-top:15px; }
.visit-note { margin-top:20px; border-top:1px solid #eceef1; padding-top:17px; }
.visit-note strong { font-size:11px; font-weight:500; }
.visit-note p { font-size:11px; color:#9fa4ad; line-height:1.8; margin:8px 0 0; }
.related-section { margin-top:25px; padding:16px; background:#fff; border-radius:12px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.section-heading h2 { margin:0; font-size:18px; font-weight:500; }
.section-kicker { margin-bottom:5px; color:#adb1b7; font-size:10px; letter-spacing:.1em; }
.prose, .nav-prose { font-size:14px; line-height:1.95; color:#7b828c; overflow-wrap:anywhere; }
.prose h2, .nav-prose h2 { margin:27px 0 13px; color:#525b66; font-size:20px; font-weight:500; }
.prose h3, .nav-prose h3 { margin:23px 0 11px; color:#525b66; font-size:17px; font-weight:500; }
.prose h2:first-child, .prose h3:first-child, .nav-prose h2:first-child { margin-top:0; }
.prose p, .nav-prose p { margin-bottom:17px; }
.prose p:last-child, .nav-prose p:last-child { margin-bottom:0; }
.prose a, .nav-prose a { color:#df6b81; text-decoration:underline; text-underline-offset:3px; }
.prose ul, .prose ol, .nav-prose ul, .nav-prose ol { padding-left:23px; }
.prose blockquote, .nav-prose blockquote { border-left:3px solid #f7c2ce; padding:10px 16px; background:#fff7f9; margin:20px 0; }
.prose table, .nav-prose table { width:100%; border-collapse:collapse; font-size:12px; }
.prose td, .prose th, .nav-prose td, .nav-prose th { border:1px solid #e7e9ec; padding:9px; text-align:left; }
.prose pre, .nav-prose pre { overflow:auto; padding:16px; background:#f6f7f9; border-radius:8px; font-size:12px; }
.page-content-panel, .nav-panel { max-width:1000px; padding:28px; background:#fff; border-radius:12px; }
.topic-card, .nav-topic-card { min-width:0; background:#fff; border-radius:12px; }
.topic-card > a, .nav-topic-card > a { display:flex; flex-direction:column; height:100%; padding:24px; }
.topic-card-mark { display:grid; place-items:center; height:40px; width:40px; background:#fceff3; color:#ea8c9e; border-radius:11px; font-size:22px; margin-bottom:18px; }
.topic-card h2, .nav-topic-card h2 { margin-bottom:12px; font-size:19px; font-weight:500; }
.topic-card p, .nav-topic-card p { font-size:13px; color:#9299a3; line-height:1.8; margin-bottom:20px; }
.topic-card-action { display:flex; align-items:center; justify-content:space-between; margin-top:auto; font-size:12px; color:#e77c92; }
.topic-detail-heading { padding:28px; background:#fff; border-radius:12px; max-width:none; }
.topic-article { max-width:1050px; padding:28px; border-radius:12px; background:#fff; margin-bottom:26px; }
.topic-article:empty { display:none; }
.admin-bar .nav-header { top:32px; }
.admin-bar .nav-sidebar-inner { top:112px; }
[data-nav-theme="dark"] { --nav-bg:#22252b; --nav-paper:#2c3038; --nav-text:#cfd1d6; --nav-muted:#a0a4af; --nav-line:#393c43; }
[data-nav-theme="dark"] .nav-topbar { background:rgba(47,48,58,.82); }
[data-nav-theme="dark"] .brand-word, [data-nav-theme="dark"] .header-motto { color:#e0dce4; }
[data-nav-theme="dark"] .nav-sidebar-inner { background:rgba(44,48,56,.5); }
[data-nav-theme="dark"] .time-ribbon, [data-nav-theme="dark"] .site-card, [data-nav-theme="dark"] .category-site-grid .site-card, [data-nav-theme="dark"] .topic-mini-card { background:#30343c; }
[data-nav-theme="dark"] .header-search-panel, [data-nav-theme="dark"] .sidebar-widget, [data-nav-theme="dark"] .related-section, [data-nav-theme="dark"] .nav-panel, [data-nav-theme="dark"] .topic-article, [data-nav-theme="dark"] .topic-detail-heading, [data-nav-theme="dark"] .nav-topic-card, [data-nav-theme="dark"] .topic-card { background:#2c3038; }
[data-nav-theme="dark"] .footer-tools > button, [data-nav-theme="dark"] .footer-tools > a { background:rgba(57,61,69,.9); color:#a5aab3; }
[data-nav-theme="dark"] .hero-hot-panel { background:rgba(64,55,82,.66); }
[data-nav-theme="dark"] .hero-hot-heading, [data-nav-theme="dark"] .hero-hot-grid > a { color:#d2c5df; }
[data-nav-theme="dark"] .mobile-drawer { background:#2c3038; }
[data-nav-theme="dark"] .drawer-primary { background:#353943; }
@media (max-width:1250px) {
  .header-links { gap:17px; font-size:13px; }
  .header-motto { display:none; }
  .header-actions { margin-left:auto; }
  .directory-layout { grid-template-columns:minmax(0,1fr) 280px; gap:20px; }
  .hero-hot-panel { max-width:calc(100% - 80px); }
  .category-site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rich-site-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .site-card-rich .site-card-title { font-size:13px; }
  .hot-site-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .archive-site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:1000px) {
  .header-links a:nth-child(n+4) { display:none; }
  .nav-brand { min-width:150px; }
  .header-links { gap:15px; }
  .directory-layout { grid-template-columns:minmax(0,1fr); }
  .directory-right { display:none; }
  .hot-site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .category-site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rich-site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero-hot-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .site-detail-layout { grid-template-columns:minmax(0,1fr) 240px; }
  .site-detail-hero { flex-wrap:wrap; }
  .site-detail-action { margin-left:100px; }
}
@media (max-width:767px) {
  :root { --nav-rail:0px; --nav-hero-height:510px; }
  .nav-header { height:80px; padding:10px; }
  .nav-topbar { justify-content:center; gap:0; padding:0 14px; }
  .header-menu-toggle { display:grid; place-items:center; position:absolute; left:12px; top:10px; width:30px; height:40px; padding:0; font-size:20px !important; }
  .nav-brand { justify-content:center; min-width:0; gap:6px; }
  .brand-mark { font-size:36px; }
  .brand-word { font-size:16px; letter-spacing:2px; }
  .desktop-sidebar-toggle, .header-links, .header-motto, .header-about-icon, .header-language, .header-guide { display:none !important; }
  .header-actions { position:absolute; right:12px; top:10px; height:40px; margin:0; }
  .header-actions .header-search-toggle { height:40px; width:26px; font-size:19px; }
  .header-search-panel { left:15px; right:15px; top:10px; height:43px; }
  .header-search-label { padding:0 14px; }
  .header-search-panel input { font-size:13px; }
  .nav-sidebar { display:none; }
  .nav-main { margin-left:0; padding:100px 10px 25px; }
  .nav-home .nav-main { padding:0; }
  .hero-search-box { top:122px; width:calc(100% - 20px); max-width:none; height:136px; }
  .hero-search-tabs { padding:9px 10px 0; justify-content:space-between; gap:0; }
  .hero-search-tabs button { font-size:16px; padding:0 1px; }
  .hero-search-tabs button.is-active::after { left:5px; right:5px; }
  .hero-search-form input { padding-left:20px; font-size:16px; }
  .hero-keywords { gap:22px; font-size:14px; }
  .hero-keywords a { max-width:95px; }
  .hero-orb { display:none; }
  .nav-hero::after { height:250px; }
  .hero-hot-panel { bottom:16px; width:calc(100% - 20px); max-width:none; height:178px; padding:8px; }
  .hero-hot-heading { height:22px; margin-bottom:5px; font-size:13px; }
  .hero-hot-heading > a { padding:1px 6px; font-size:11px; }
  .hero-hot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px 6px; }
  .hero-hot-grid > a { height:28px; padding:2px 6px; font-size:12px; gap:5px; }
  .hero-hot-grid .site-icon { height:21px; width:21px; flex-basis:21px; font-size:19px; }
  .hot-editorial-note { display:none; }
  .home-content { margin:24px 0 0; padding:0 10px; }
  .time-ribbon { height:28px; padding:3px 10px; gap:25px; }
  .time-ribbon .world-clock:not(:first-child) { display:none; }
  .world-clock { gap:5px; font-size:12px; }
  .world-clock > span:first-child { font-size:14px; }
  .hot-directory { margin-top:24px; }
  .hot-directory-header { gap:8px; margin-bottom:12px; }
  .hot-directory-header h2 { font-size:16px; gap:8px; }
  .hot-sort { padding-left:6px; }
  .hot-sort button { padding:2px 5px; font-size:13px; }
  .hot-sort button[data-hot-filter] { display:none; }
  .site-grid, .nav-site-grid, .hot-site-grid, .category-site-grid, .archive-site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .site-card-link { padding:10px; gap:8px; padding-right:17px; }
  .site-icon { width:38px; height:38px; flex-basis:38px; font-size:37px; }
  .site-icon img { max-width:38px; max-height:38px; }
  .site-card-title { font-size:14px; }
  .site-card-description { font-size:12px; }
  .site-official-link { opacity:.55; font-size:9px; right:1px; }
  .hot-loadmore { font-size:12px; gap:20px; }
  .hot-loadmore span { width:72px; }
  .directory-layout { display:block; margin-top:20px; }
  .directory-panel { padding:12px; margin-bottom:16px; }
  .panel-heading h2 { font-size:16px; }
  .panel-heading > a { font-size:11px; }
  .rich-site-grid { grid-template-columns:minmax(0,1fr); }
  .site-card-rich { height:106.35px; }
  .site-card-rich .site-card-link { height:72px; padding:12px; gap:12px; }
  .site-card-rich .site-icon { width:44px; height:44px; flex-basis:44px; }
  .site-card-rich .site-card-title { font-size:14px; }
  .site-card-rich .site-card-description { font-size:12px; }
  .site-card-footer { font-size:10px; gap:10px; padding-left:3px; }
  .site-editorial-label { font-size:10px; }
  .site-card-rich .site-official-link { bottom:7px; right:7px; opacity:1; font-size:11px; }
  .category-site-grid .site-card-link { gap:6px; padding-left:7px; padding-right:15px; }
  .category-site-grid .site-icon { width:32px; height:32px; flex-basis:32px; font-size:32px; }
  .category-site-grid .site-icon img { max-width:32px; max-height:32px; }
  .category-site-grid .site-card-title { font-size:12px; }
  .category-site-grid .site-card-description { font-size:11px; }
  .topic-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .topic-mini-card { padding:11px; }
  .drawer-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55); padding:0; border:0; }
  .mobile-drawer:not([hidden]) { display:block; position:fixed; z-index:90; left:0; top:0; bottom:0; width:80vw; max-width:360px; overflow-y:auto; overscroll-behavior:contain; background:#fff; padding:80px 20px 24px; }
  .drawer-open { overflow:hidden; }
  .drawer-open .nav-topbar { background:rgba(245,245,245,.82); }
  .drawer-primary { padding:15px 18px; border-radius:12px; background:#f0f0f0; }
  .drawer-primary a { display:flex; align-items:center; gap:13px; min-height:41px; font-size:14px; color:#5c5d63; }
  .drawer-primary a i { width:18px; text-align:center; font-size:13px; }
  .drawer-primary a:hover { color:#f1405b; }
  .drawer-introduction { display:flex; align-items:center; gap:10px; padding:10px 12px; height:59px; margin-top:24px; border-radius:10px; background:linear-gradient(100deg,#4661d4,#0076ba); color:#fff; box-shadow:0 4px 10px rgba(2,65,103,.1); }
  .drawer-introduction > span { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); font-size:26px; }
  .drawer-introduction strong { display:block; font-size:15px; font-weight:500; }
  .drawer-introduction small { display:block; font-size:11px; margin-top:3px; color:#d9e9ff; }
  .drawer-policy-link { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:8px; min-height:35px; padding:5px; border-radius:7px; color:#efdbc6 !important; background:linear-gradient(100deg,#704531,#512735); font-size:11px; }
  .drawer-category-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
  .drawer-category-links a { display:flex; gap:6px; align-items:center; min-height:35px; padding:7px 8px; border-radius:7px; background:#f1f5f8; color:#7191a4; font-size:11px; }
  .drawer-category-links a:nth-child(3n+2) { background:#edf7ed; color:#75a775; }
  .drawer-category-links a:nth-child(3n) { background:#fff2e9; color:#cd9b78; }
  /* Keep mobile actions in document flow: floating controls covered card links. */
  .footer-tools { position:static; width:max-content; margin:0 auto 24px; flex-direction:row; gap:8px; }
  .footer-tools > button, .footer-tools > a { width:40px; height:40px; border-radius:12px; font-size:17px; }
  .nav-footer { margin-left:0; margin-right:0; padding:10px 15px 20px; }
  .nav-footer > div { flex-wrap:wrap; gap:7px 12px; }
  .nav-footer p { font-size:10px; }
  .site-detail-hero { padding:22px; gap:16px; }
  .site-detail-hero > .site-icon { width:58px; height:58px; flex-basis:58px; font-size:55px; }
  .site-detail-hero > .site-icon img { max-width:55px; max-height:55px; }
  .site-detail-heading { flex:1; }
  .site-detail-heading h1 { font-size:26px; }
  .site-detail-heading > p { font-size:12px; line-height:1.8; }
  .site-detail-action { width:calc(100% - 74px); max-width:calc(100% - 74px); margin-left:74px; text-align:left; }
  .site-detail-action small { display:none; }
  .site-detail-layout { display:block; }
  .detail-content, .detail-info { padding:24px 22px; }
  .detail-info { border-left:0; border-top:1px solid #eceef1; }
  .detail-info dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; }
  .detail-info dt { margin-top:0; }
  .detail-info dd { margin:0; }
  .page-heading h1, .nav-page-heading h1 { font-size:26px; }
  .page-description, .nav-page-heading > p { font-size:13px; }
  .prose, .nav-prose { font-size:13px; }
  .prose h2, .nav-prose h2 { font-size:19px; }
  .topic-detail-heading, .topic-article, .page-content-panel, .nav-panel { padding:22px; }
  .topic-card > a, .nav-topic-card > a { padding:22px; }
  .related-section { padding:12px; }
  .related-section .section-heading h2 { font-size:16px; }
  .admin-bar .mobile-drawer { top:46px; }
  .admin-bar .nav-header { top:46px; }
}
@media (max-width:360px) {
  .brand-word { font-size:15px; }
  .hero-search-tabs { padding-left:6px; padding-right:6px; }
  .hero-search-tabs button { font-size:15px; }
  .site-card-link { gap:6px; padding-left:8px; }
  .site-card-title { font-size:12px; }
  .site-card-description { font-size:11px; }
  .hero-keywords { gap:16px; font-size:12px; }
  .site-card .site-icon { width:32px; height:32px; flex-basis:32px; font-size:31px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .nav-body *, .nav-body *::before, .nav-body *::after { animation:none !important; transition:none !important; }
}

/* High-specificity dark overrides follow every responsive rule. */
.nav-body[data-nav-theme="dark"] .mobile-drawer:not([hidden]) { background:#2c3038; color:#dce0e8; }
.nav-body[data-nav-theme="dark"].drawer-open .nav-topbar { background:rgba(47,48,58,.88); }
.nav-body[data-nav-theme="dark"] .drawer-primary { background:#353943; }
.nav-body[data-nav-theme="dark"] .drawer-primary a { color:#dce0e8; }
.nav-body[data-nav-theme="dark"] .drawer-primary a:hover { color:#ff91a5; }
.nav-body[data-nav-theme="dark"] .drawer-category-links a { background:#3c4450; color:#d2dce8; }
.nav-body[data-nav-theme="dark"] .drawer-category-links a:nth-child(3n+2) { background:#35453d; color:#c9e6d2; }
.nav-body[data-nav-theme="dark"] .drawer-category-links a:nth-child(3n) { background:#4d403c; color:#efdbcf; }
.nav-body[data-nav-theme="dark"] .header-search-panel input { color:#dce0e8; }
.nav-body[data-nav-theme="dark"] .header-search-label { color:#bbc1cd; }
.nav-body[data-nav-theme="dark"] .hot-local-filter { background:#2c3038; color:#dce0e8; }
.nav-body[data-nav-theme="dark"] .hot-local-filter input { background:#353943; color:#dce0e8; border-color:#596170; }
.nav-body[data-nav-theme="dark"] .hot-local-filter input::placeholder { color:#b5bfcd; }
.nav-body[data-nav-theme="dark"] .hot-local-filter button { color:#dce0e8; }
.nav-body[data-nav-theme="dark"] .hot-local-filter [role="status"] { color:#ffc2d0; }
.nav-body[data-nav-theme="dark"] :is(.prose,.nav-prose) :is(h2,h3) { color:#e5e9f0; }
.nav-body[data-nav-theme="dark"] .header-search-panel button { color:#e5e9f0; }

/* Bind the sticky rail to the whole document, not the initial viewport. */
.nav-body { position:relative; }
@media (min-width:768px) {
  /* Reserve a real gutter instead of painting fixed tools over outbound links. */
  .home-content { padding-right:60px; }
  .nav-body:not(.nav-home) .nav-main { padding-right:60px; }
  .nav-footer { margin-right:60px; }
}
@media (min-width:768px) and (max-height:780px) {
  /* Landscape/short windows must not place the tool rail over hero search. */
  .footer-tools { position:static; width:max-content; margin:0 auto 24px; flex-direction:row; }
}
.hero-search-form:focus-within, .site-card:focus-within { outline:2px solid #a13fde; outline-offset:2px; }
.nav-body[data-nav-theme="dark"] :is(.prose,.nav-prose) { color:#c4ccd8; }
.nav-body[data-nav-theme="dark"] .detail-info { background:#30343c; color:#e5e9f0; }
.nav-body[data-nav-theme="dark"] .detail-info :is(dt,dd) { color:#c4ccd8; }
@media (max-width:767px) {
  .hot-sort { overflow-x:auto; scrollbar-width:none; }
  .hot-sort button[data-hot-filter] { display:block; flex-shrink:0; }
}