html, body { overflow-x: hidden; }
body { min-height: 100vh; }
.site { display: block !important; width: 100% !important; min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; width: 74px; height: 100vh; }
.content { width: 100% !important; max-width: 1280px; box-sizing: border-box; margin: 0 auto !important; padding: 30px 28px 16px 102px !important; }
.hero { position: relative !important; width: 100% !important; height: auto !important; min-height: 260px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; }
.hero-cover { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
.hero-body { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: 70px minmax(0,1fr) !important; gap: 18px !important; align-items: center; padding: 30px 34px 18px !important; }
.avatar-wrap { position: static !important; width: 70px !important; height: 70px !important; margin: 0 !important; }
.hero-text { min-width: 0; }
.hero-text h1 { margin: 0 0 8px !important; font-size: clamp(32px, 3.5vw, 44px) !important; line-height: 1.1; }
.identity-copy { max-width: 650px; margin: 0 !important; font-size: 14px; line-height: 1.75; }
.hero-search-wrap { position: relative !important; inset: auto !important; width: 100% !important; padding: 8px 34px 30px !important; }
.hero-search { width: min(680px, 100%) !important; margin: 0 auto !important; }
.desk { width: auto !important; max-width: 1280px; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 28px 80px 102px !important; display: grid !important; grid-template-columns: 180px minmax(0,1fr) !important; gap: 18px !important; align-items: start; }
.desk-sidebar { position: sticky !important; top: 24px; height: fit-content; min-height: 0 !important; padding: 14px !important; }
.desk-cards { height: auto !important; min-height: 0 !important; padding: 18px !important; }
.card-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 12px !important; align-content: start; }
.bookmark-card, .site-card { min-width: 0; min-height: 76px; padding: 14px !important; }
.mobile-top { display: none; }

@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 760px) {
  .rail { display: none !important; }
  .mobile-top { position: sticky; top: 0; z-index: 30; display: flex !important; }
  .content { padding: 14px 12px 10px !important; }
  .hero { min-height: 0 !important; }
  .hero-body { grid-template-columns: 56px minmax(0,1fr) !important; padding: 22px 20px 12px !important; gap: 12px !important; }
  .avatar-wrap { width: 56px !important; height: 56px !important; }
  .hero-text h1 { font-size: clamp(26px, 9vw, 38px) !important; }
  .hero-search-wrap { padding: 8px 14px 20px !important; }
  .desk { padding: 0 12px 64px !important; grid-template-columns: 1fr !important; }
  .desk-sidebar { position: static !important; display: flex !important; overflow-x: auto; flex-wrap: nowrap !important; }
  .desk-sidebar button, .desk-sidebar a { flex: 0 0 auto; }
  .card-grid { grid-template-columns: 1fr !important; }
}

/* Search-led navigation desk: generous overview, regular utility cards. */
.rail-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.rail-mark { display: grid !important; place-items: center; }
.avatar-wrap,
.avatar-mark { border-radius: 18px !important; }
.search-btn { background: transparent !important; color: var(--muted) !important; }
.search-btn.is-active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

@media (min-width: 1100px) {
  .rail { width: 82px; }
  .content { max-width: none; margin: 0 !important; padding: 48px 48px 24px 122px !important; }
  .hero { min-height: 330px !important; }
  .hero-body { grid-template-columns: 80px minmax(0, 1fr) !important; gap: 26px !important; padding: 50px 48px 24px !important; }
  .avatar-wrap { width: 80px !important; height: 80px !important; }
  .identity-copy { max-width: 760px; font-size: 15px; line-height: 1.9; }
  .hero-search-wrap { padding: 20px 48px 46px !important; }
  .hero-search { width: min(780px, 100%) !important; }
  .desk { max-width: none; margin: 0 !important; padding: 0 48px 112px 122px !important; grid-template-columns: 210px minmax(0, 1fr) !important; gap: 28px !important; }
  .desk-sidebar { top: 32px; padding: 20px !important; }
  .desk-cards { padding: 28px !important; }
  .card-grid { gap: 20px !important; }
  .bookmark-card, .site-card { min-height: 92px; padding: 18px !important; }
}

:root[data-theme="dark"] .rail,
:root[data-theme="dark"] .mobile-top {
  background: rgba(18, 23, 28, .92) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
:root[data-theme="dark"] .hero-search,
:root[data-theme="dark"] .hero-search input,
:root[data-theme="dark"] .desk-sidebar,
:root[data-theme="dark"] .desk-cards {
  background: rgba(25, 31, 37, .94) !important;
  color: #ebf2f7 !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

@media (max-width: 760px) {
  .hero-body { grid-template-columns: 64px minmax(0,1fr) !important; }
  .avatar-wrap { width: 64px !important; height: 64px !important; }
}