/* SmurfVillage shared shell repair - 2026-05-18.
   Loaded after page-local CSS so the public chrome follows the same
   Apple-style header and menu system used by tinyblue.dev and system-ai-x.com. */
:root {
  --sv-shell-max: 1120px;
  --sv-shell-blue: #2c7bff;
  --sv-shell-blue-dark: #1f63d9;
  --sv-shell-blue-soft: rgba(44,123,255,.12);
  --sv-shell-text-light: #1d1d1f;
  --sv-shell-muted-light: #6e6e73;
  --sv-shell-rule-light: rgba(15,22,38,.10);
  --sv-shell-rule-dark: rgba(255,255,255,.12);
  --sv-shell-ease: cubic-bezier(.32,.72,0,1);
}

@media (max-height:520px) and (max-width:940px) and (orientation:landscape) {
  #tbn-bar {
    top:calc(var(--sv-shell-nav-h, 64px) + env(safe-area-inset-top, 0px) + 8px) !important;
    bottom:auto !important;
  }

  #tbn-restore,
  #tbn-fab {
    top:calc(var(--sv-shell-nav-h, 64px) + env(safe-area-inset-top, 0px) + 8px) !important;
    bottom:auto !important;
  }
}

html[data-theme="dark"] body {
  background:#000;
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(980px 560px at 74% -14%, rgba(44,123,255,.13), transparent 62%),
    radial-gradient(680px 500px at 12% 24%, rgba(111,165,255,.055), transparent 68%),
    linear-gradient(180deg, rgba(6,10,18,.86), rgba(0,0,0,1) 56%);
}

html[data-theme="dark"] body::after {
  opacity:.58;
}

.glyph,
.drawer-cell-icon svg,
.row svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav {
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  width:100% !important;
  height:69px !important;
  min-height:calc(69px + env(safe-area-inset-top, 0px)) !important;
  padding:env(safe-area-inset-top, 0px) 0 0 !important;
  border-bottom:1px solid var(--sv-shell-rule-dark) !important;
  background:rgba(8,9,14,.82) !important;
  color:#f5f5f7 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 54px -44px rgba(0,0,0,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(24px) !important;
  backdrop-filter:saturate(180%) blur(24px) !important;
}

html[data-theme="light"] .nav,
:root:not([data-theme="dark"]) .nav {
  background:rgba(255,255,255,.92) !important;
  border-bottom-color:var(--sv-shell-rule-light) !important;
  color:var(--sv-shell-text-light) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset, 0 18px 48px -40px rgba(15,22,38,.48) !important;
}

.nav-inner {
  width:min(var(--sv-shell-max), calc(100% - 66px)) !important;
  max-width:none !important;
  height:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:24px !important;
}

.brand {
  justify-self:start !important;
  min-width:0 !important;
  height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  color:inherit !important;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:650 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.brand:hover {
  color:inherit !important;
}

.brand i {
  color:#a1a1a6 !important;
  font-style:normal !important;
  font-weight:500 !important;
}

html[data-theme="light"] .brand i,
:root:not([data-theme="dark"]) .brand i {
  color:var(--sv-shell-muted-light) !important;
}

.brand .dot {
  position:relative !important;
  width:22px !important;
  height:22px !important;
  flex:0 0 auto !important;
  margin:0 !important;
  border-radius:5px !important;
  background:linear-gradient(180deg, #70a6ff, var(--sv-shell-blue)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 24px -18px rgba(44,123,255,.85) !important;
}

.brand .dot::after {
  content:"" !important;
  position:absolute !important;
  inset:5px !important;
  border:1.5px solid rgba(255,255,255,.92) !important;
  border-radius:2px !important;
}

.nav-links {
  justify-self:center !important;
  height:56px !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:5px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.075) !important;
  color:rgba(245,245,247,.62) !important;
  font-size:17px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -24px rgba(0,0,0,.72) !important;
}

html[data-theme="light"] .nav-links,
:root:not([data-theme="dark"]) .nav-links {
  border-color:rgba(0,0,0,.035) !important;
  background:#f1f1f4 !important;
  color:#6e6e73 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78), 0 10px 24px -22px rgba(15,22,38,.36) !important;
}

.nav-links a:not(.nav-cta) {
  min-width:128px !important;
  min-height:46px !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:inherit !important;
  font-size:17px !important;
  font-weight:650 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transition:color .2s var(--sv-shell-ease), background .2s var(--sv-shell-ease), box-shadow .2s var(--sv-shell-ease), transform .2s var(--sv-shell-ease) !important;
}

.nav-links svg {
  width:21px !important;
  height:21px !important;
  flex:0 0 auto !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.nav-links span {
  display:block !important;
}

.nav-links a:not(.nav-cta)::after {
  content:none !important;
}

.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible,
.nav-links a[aria-current="page"],
.nav-links:not(:has([aria-current="page"])) a:first-child {
  color:#f5f5f7 !important;
  background:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 26px -20px rgba(0,0,0,.72) !important;
}

html[data-theme="light"] .nav-links a:not(.nav-cta):hover,
html[data-theme="light"] .nav-links a:not(.nav-cta):focus-visible,
html[data-theme="light"] .nav-links a[aria-current="page"],
html[data-theme="light"] .nav-links:not(:has([aria-current="page"])) a:first-child,
:root:not([data-theme="dark"]) .nav-links a:not(.nav-cta):hover,
:root:not([data-theme="dark"]) .nav-links a:not(.nav-cta):focus-visible,
:root:not([data-theme="dark"]) .nav-links a[aria-current="page"],
:root:not([data-theme="dark"]) .nav-links:not(:has([aria-current="page"])) a:first-child {
  color:var(--sv-shell-text-light) !important;
  background:#fff !important;
  box-shadow:0 1px 1px rgba(15,22,38,.04), 0 8px 20px -15px rgba(15,22,38,.46) !important;
}

.nav-mob {
  justify-self:end !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
}

.nav-cta {
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, #4f93ff 0%, var(--sv-shell-blue) 62%, var(--sv-shell-blue-dark) 100%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:650 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  box-shadow:0 16px 38px -22px rgba(44,123,255,.88) !important;
  transition:transform .18s var(--sv-shell-ease), box-shadow .18s var(--sv-shell-ease), filter .18s var(--sv-shell-ease) !important;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  color:#fff !important;
  transform:translateY(-1px) !important;
  filter:saturate(1.04) !important;
  box-shadow:0 18px 44px -22px rgba(44,123,255,.96) !important;
}

.nav-iconbtn,
.drawer-close {
  width:44px !important;
  height:44px !important;
  display:inline-grid !important;
  place-items:center !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:rgba(255,255,255,.075) !important;
  color:#f5f5f7 !important;
  box-shadow:0 10px 28px -22px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor:pointer !important;
  transition:background .18s var(--sv-shell-ease), border-color .18s var(--sv-shell-ease), transform .18s var(--sv-shell-ease) !important;
}

html[data-theme="light"] .nav-iconbtn,
html[data-theme="light"] .drawer-close,
:root:not([data-theme="dark"]) .nav-iconbtn,
:root:not([data-theme="dark"]) .drawer-close {
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(0,0,0,.12) !important;
  color:var(--sv-shell-text-light) !important;
  box-shadow:0 12px 30px -24px rgba(15,22,38,.55), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.nav-iconbtn:hover,
.drawer-close:hover {
  border-color:color-mix(in oklab, var(--sv-shell-blue) 56%, rgba(255,255,255,.18)) !important;
  background:rgba(44,123,255,.12) !important;
  transform:translateY(-1px) !important;
}

.nav-iconbtn svg,
.drawer-close svg {
  width:18px !important;
  height:18px !important;
  display:block !important;
}

.nav-iconbtn .glyph-moon,
.drawer-close .glyph-moon {
  display:block !important;
}

.nav-iconbtn .glyph-sun,
.drawer-close .glyph-sun,
html[data-theme="light"] .nav-iconbtn .glyph-sun,
:root:not([data-theme="dark"]) .nav-iconbtn .glyph-sun {
  display:none !important;
}

html[data-theme="dark"] .nav-iconbtn .glyph-moon,
html[data-theme="dark"] .drawer-close .glyph-moon {
  display:none !important;
}

html[data-theme="dark"] .nav-iconbtn .glyph-sun,
html[data-theme="dark"] .drawer-close .glyph-sun {
  display:block !important;
}

#theme-toggle {
  display:inline-grid !important;
}

#menu-toggle,
#tba-btn {
  display:none !important;
}

.chrome #menu-toggle {
  display:inline-flex !important;
}

.drawer-scrim {
  position:fixed !important;
  inset:0 !important;
  z-index:80 !important;
  background:transparent !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.drawer-scrim.is-open {
  opacity:1 !important;
  pointer-events:none !important;
}

.drawer {
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  z-index:90 !important;
  width:auto !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:none !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#07080d !important;
  color:#f5f5f7 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:auto !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-8px) !important;
  transition:opacity .22s var(--sv-shell-ease), transform .26s var(--sv-shell-ease) !important;
  -webkit-backdrop-filter:saturate(170%) blur(24px) !important;
  backdrop-filter:saturate(170%) blur(24px) !important;
}

.drawer[hidden] {
  display:none !important;
}

.drawer.is-open {
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}

html[data-theme="light"] .drawer,
:root:not([data-theme="dark"]) .drawer {
  background:#f6f7fb !important;
  color:var(--sv-shell-text-light) !important;
}

.drawer-head {
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  width:100% !important;
  max-width:520px !important;
  min-height:64px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 auto !important;
  padding:max(16px, calc(env(safe-area-inset-top, 0px) + 14px)) 18px 14px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg, rgba(7,8,13,.96), rgba(7,8,13,.78)) !important;
  -webkit-backdrop-filter:saturate(170%) blur(24px) !important;
  backdrop-filter:saturate(170%) blur(24px) !important;
}

html[data-theme="light"] .drawer-head,
:root:not([data-theme="dark"]) .drawer-head {
  border-bottom-color:rgba(0,0,0,.07) !important;
  background:linear-gradient(180deg, rgba(246,247,251,.98), rgba(246,247,251,.82)) !important;
}

.drawer-head .brand {
  font-size:17px !important;
  font-weight:720 !important;
}

.drawer-section,
.drawer-links,
.drawer-row,
.drawer-cta {
  width:min(520px, calc(100% - 36px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.drawer-section {
  padding:22px 8px 8px !important;
  color:rgba(245,245,247,.46) !important;
  font-size:12px !important;
  font-weight:680 !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

html[data-theme="light"] .drawer-section,
:root:not([data-theme="dark"]) .drawer-section {
  color:rgba(29,29,31,.48) !important;
}

.drawer-head + .drawer-links {
  margin-top:30px !important;
}

.drawer-links,
.drawer-group {
  display:grid !important;
  gap:1px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  margin-bottom:18px !important;
}

.drawer-cell,
.drawer-links a {
  min-height:56px !important;
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 18px !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:4px !important;
  background:rgba(255,255,255,.065) !important;
  color:#f5f5f7 !important;
  font-size:17px !important;
  font-weight:560 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  transition:background .18s var(--sv-shell-ease), transform .18s var(--sv-shell-ease) !important;
}

html[data-theme="light"] .drawer-cell,
html[data-theme="light"] .drawer-links a,
:root:not([data-theme="dark"]) .drawer-cell,
:root:not([data-theme="dark"]) .drawer-links a {
  background:rgba(255,255,255,.90) !important;
  color:var(--sv-shell-text-light) !important;
}

.drawer-links a:first-child {
  border-top-left-radius:18px !important;
  border-top-right-radius:18px !important;
}

.drawer-links a:last-child {
  border-bottom-left-radius:18px !important;
  border-bottom-right-radius:18px !important;
}

.drawer-cell:hover,
.drawer-links a:hover,
.drawer-cell:focus-visible,
.drawer-links a:focus-visible {
  background:rgba(255,255,255,.11) !important;
  color:inherit !important;
  transform:translateY(-1px) !important;
}

html[data-theme="light"] .drawer-cell:hover,
html[data-theme="light"] .drawer-links a:hover,
html[data-theme="light"] .drawer-cell:focus-visible,
html[data-theme="light"] .drawer-links a:focus-visible,
:root:not([data-theme="dark"]) .drawer-cell:hover,
:root:not([data-theme="dark"]) .drawer-links a:hover,
:root:not([data-theme="dark"]) .drawer-cell:focus-visible,
:root:not([data-theme="dark"]) .drawer-links a:focus-visible {
  background:#fff !important;
}

.drawer-cell-icon,
.drawer-links:not(.drawer-group) a::before {
  content:"" !important;
  width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  background:linear-gradient(135deg, #70a6ff, var(--sv-shell-blue)) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24), 0 10px 20px -16px rgba(44,123,255,.84) !important;
}

.drawer-cell-icon svg {
  width:17px !important;
  height:17px !important;
}

.drawer-links:not(.drawer-group) a[href*="systems"]::before {
  background:linear-gradient(135deg, #64d2ff, #2c7bff) !important;
}

.drawer-links:not(.drawer-group) a[href*="about"]::before {
  background:linear-gradient(135deg, #8f8cff, #5e5ce6) !important;
}

.drawer-links:not(.drawer-group) a[href*="gamepad"]::before {
  background:linear-gradient(135deg, #34c759, #64d2ff) !important;
}

.drawer-links:not(.drawer-group) a[href*="legal"]::before {
  background:linear-gradient(135deg, #8e8e93, #5e5ce6) !important;
}

.drawer-cell-label {
  min-width:0 !important;
  color:inherit !important;
}

.chev,
.drawer-links a .chev {
  width:8px !important;
  height:8px !important;
  justify-self:center !important;
  overflow:hidden !important;
  border-top:1.8px solid currentColor !important;
  border-right:1.8px solid currentColor !important;
  color:rgba(245,245,247,.38) !important;
  font-size:0 !important;
  transform:rotate(45deg) !important;
  transition:color .18s var(--sv-shell-ease), transform .18s var(--sv-shell-ease) !important;
}

html[data-theme="light"] .chev,
html[data-theme="light"] .drawer-links a .chev,
:root:not([data-theme="dark"]) .chev,
:root:not([data-theme="dark"]) .drawer-links a .chev {
  color:rgba(29,29,31,.32) !important;
}

.drawer-links a:hover .chev,
.drawer-cell:hover .chev {
  color:currentColor !important;
  transform:rotate(45deg) translate(1px,-1px) !important;
}

.drawer-row {
  display:none !important;
}

.drawer-cta {
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin-top:16px !important;
  margin-bottom:max(36px, calc(env(safe-area-inset-bottom, 0px) + 36px)) !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #4f93ff, var(--sv-shell-blue)) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:680 !important;
  box-shadow:0 18px 42px -26px rgba(44,123,255,.88) !important;
}

.drawer-cta:hover,
.drawer-cta:focus-visible {
  color:#fff !important;
  transform:translateY(-1px) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav {
    background:rgba(8,9,14,.82) !important;
    border-bottom-color:var(--sv-shell-rule-dark) !important;
    color:#f5f5f7 !important;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 54px -44px rgba(0,0,0,.86) !important;
  }

  :root:not([data-theme="light"]) .brand i {
    color:#a1a1a6 !important;
  }

  :root:not([data-theme="light"]) .nav-links {
    border-color:rgba(255,255,255,.08) !important;
    background:rgba(255,255,255,.075) !important;
    color:rgba(245,245,247,.62) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -24px rgba(0,0,0,.72) !important;
  }

  :root:not([data-theme="light"]) .nav-links a:not(.nav-cta):hover,
  :root:not([data-theme="light"]) .nav-links a:not(.nav-cta):focus-visible,
  :root:not([data-theme="light"]) .nav-links a[aria-current="page"],
  :root:not([data-theme="light"]) .nav-links:not(:has([aria-current="page"])) a:first-child {
    color:#f5f5f7 !important;
    background:rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 26px -20px rgba(0,0,0,.72) !important;
  }

  :root:not([data-theme="light"]) .nav-iconbtn,
  :root:not([data-theme="light"]) .drawer-close {
    background:rgba(255,255,255,.075) !important;
    border-color:rgba(255,255,255,.15) !important;
    color:#f5f5f7 !important;
    box-shadow:0 10px 28px -22px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  :root:not([data-theme="light"]) .nav-iconbtn .glyph-moon,
  :root:not([data-theme="light"]) .drawer-close .glyph-moon {
    display:none !important;
  }

  :root:not([data-theme="light"]) .nav-iconbtn .glyph-sun,
  :root:not([data-theme="light"]) .drawer-close .glyph-sun {
    display:block !important;
  }

  :root:not([data-theme="light"]) .drawer {
    background:#07080d !important;
    color:#f5f5f7 !important;
  }

  :root:not([data-theme="light"]) .drawer-head {
    border-bottom-color:rgba(255,255,255,.08) !important;
    background:linear-gradient(180deg, rgba(7,8,13,.96), rgba(7,8,13,.78)) !important;
  }

  :root:not([data-theme="light"]) .drawer-section {
    color:rgba(245,245,247,.46) !important;
  }

  :root:not([data-theme="light"]) .drawer-cell,
  :root:not([data-theme="light"]) .drawer-links a {
    background:rgba(255,255,255,.065) !important;
    color:#f5f5f7 !important;
  }

  :root:not([data-theme="light"]) .drawer-cell:hover,
  :root:not([data-theme="light"]) .drawer-links a:hover,
  :root:not([data-theme="light"]) .drawer-cell:focus-visible,
  :root:not([data-theme="light"]) .drawer-links a:focus-visible {
    background:rgba(255,255,255,.11) !important;
  }

  :root:not([data-theme="light"]) .chev,
  :root:not([data-theme="light"]) .drawer-links a .chev {
    color:rgba(245,245,247,.38) !important;
  }
}

@media (max-width:900px) {
  .nav {
    height:64px !important;
    min-height:calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  .nav-inner {
    width:calc(100% - 36px) !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    gap:16px !important;
  }

  .nav-cta {
    display:none !important;
  }

  .nav-links {
    height:48px !important;
    padding:4px !important;
    gap:3px !important;
    font-size:15px !important;
  }

  .nav-links a:not(.nav-cta) {
    min-width:104px !important;
    min-height:40px !important;
    gap:8px !important;
    padding:0 14px !important;
    font-size:15px !important;
  }

  .nav-links svg {
    width:18px !important;
    height:18px !important;
  }

  .nav-mob {
    gap:10px !important;
  }

  #menu-toggle {
    display:inline-grid !important;
  }

  .brand {
    max-width:58vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media (max-width:760px) {
  .nav {
    height:61px !important;
    min-height:calc(61px + env(safe-area-inset-top, 0px)) !important;
  }

  .nav-inner {
    grid-template-columns:minmax(0,1fr) auto !important;
  }

  .nav-links {
    display:none !important;
  }

  .brand {
    font-size:15px !important;
  }

  .nav-iconbtn,
  .drawer-close {
    width:40px !important;
    height:40px !important;
  }
}

@media (max-width:370px) {
  .brand {
    font-size:14px !important;
  }

  .brand .dot {
    width:20px !important;
    height:20px !important;
  }

  .nav-inner {
    width:calc(100% - 28px) !important;
  }
}

/* Play screen chrome gets the same tonal treatment without moving gameplay UI. */
.chrome {
  background:rgba(8,9,14,.82) !important;
  border-bottom-color:var(--sv-shell-rule-dark) !important;
  z-index:1000 !important;
}

html[data-theme="light"] .chrome,
:root:not([data-theme="dark"]) .chrome {
  background:rgba(255,255,255,.92) !important;
  border-bottom-color:var(--sv-shell-rule-light) !important;
}

/* CardsCloud-style shell pass: compact centered selector, desktop action cluster,
   and a floating mobile drawer tucked under the toolbar. */
:root {
  --sv-shell-max:1260px;
}

.nav {
  z-index:1000 !important;
  height:72px !important;
  min-height:calc(72px + env(safe-area-inset-top, 0px)) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:rgba(8,9,14,.78) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 54px -46px rgba(0,0,0,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
}

html[data-theme="light"] .nav,
:root:not([data-theme="dark"]) .nav {
  background:rgba(255,255,255,.90) !important;
  border-bottom-color:rgba(15,22,38,.085) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset, 0 18px 48px -42px rgba(15,22,38,.46) !important;
}

.nav-inner {
  width:min(var(--sv-shell-max), calc(100% - 48px)) !important;
  height:72px !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  gap:28px !important;
}

.brand {
  height:44px !important;
  gap:9px !important;
  font-size:14px !important;
  font-weight:690 !important;
}

.brand .dot {
  width:24px !important;
  height:24px !important;
  border-radius:7px !important;
}

.brand .dot::after {
  inset:6px !important;
  border-width:1.4px !important;
  border-radius:2px !important;
}

.nav-links {
  --sv-nav-eye-x:5px;
  --sv-nav-eye-y:5px;
  --sv-nav-eye-w:108px;
  --sv-nav-eye-h:44px;
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  height:54px !important;
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(108px, 1fr) !important;
  align-items:center !important;
  gap:2px !important;
  padding:5px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.075) !important;
  color:rgba(245,245,247,.64) !important;
  font-size:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px -26px rgba(0,0,0,.76) !important;
  transform:translateZ(0) !important;
}

html[data-theme="light"] .nav-links,
:root:not([data-theme="dark"]) .nav-links {
  border-color:rgba(15,22,38,.07) !important;
  background:#f5f5f7 !important;
  color:#696a70 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px -22px rgba(15,22,38,.34) !important;
}

.nav-links a:not(.nav-cta) {
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  min-height:0 !important;
  height:44px !important;
  gap:8px !important;
  padding:0 18px !important;
  font-size:14px !important;
  font-weight:590 !important;
  letter-spacing:0 !important;
  border-radius:999px !important;
}

.sv-nav-eye {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  z-index:0 !important;
  width:var(--sv-nav-eye-w) !important;
  height:var(--sv-nav-eye-h) !important;
  border-radius:999px !important;
  pointer-events:none !important;
  opacity:0 !important;
  transform:translate3d(var(--sv-nav-eye-x), var(--sv-nav-eye-y), 0) !important;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, #fff 12%, transparent),
      color-mix(in oklab, #12151e 70%, transparent) 52%,
      color-mix(in oklab, #fff 8%, transparent)),
    color-mix(in oklab, #10131c 74%, transparent) !important;
  border:1px solid color-mix(in oklab, #fff 16%, rgba(255,255,255,.10)) !important;
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, #fff 18%, transparent),
    inset 0 -1px 1px color-mix(in oklab, #000 70%, transparent),
    0 1px 2px rgba(0,0,0,.34),
    0 20px 38px -24px rgba(0,0,0,.72) !important;
  -webkit-backdrop-filter:blur(18px) saturate(190%) contrast(1.04) !important;
  backdrop-filter:blur(18px) saturate(190%) contrast(1.04) !important;
  transition:
    transform 560ms var(--sv-shell-ease),
    width 560ms var(--sv-shell-ease),
    height 560ms var(--sv-shell-ease),
    opacity 180ms var(--sv-shell-ease),
    box-shadow 260ms var(--sv-shell-ease) !important;
}

.sv-nav-eye::before,
.sv-nav-eye::after {
  content:"" !important;
  position:absolute !important;
  pointer-events:none !important;
  border-radius:inherit !important;
}

.sv-nav-eye::before {
  inset:1px !important;
  background:
    radial-gradient(120% 90% at 18% 0%, color-mix(in oklab, #fff 72%, transparent), transparent 48%),
    radial-gradient(90% 80% at 86% 100%, color-mix(in oklab, var(--sv-shell-blue) 16%, transparent), transparent 62%) !important;
  opacity:.72 !important;
  mix-blend-mode:screen !important;
}

.sv-nav-eye::after {
  left:11px !important;
  right:11px !important;
  bottom:4px !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, #fff 72%, var(--sv-shell-blue) 28%), transparent) !important;
  opacity:.74 !important;
}

html[data-theme="light"] .sv-nav-eye {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, #fff 92%, transparent),
      color-mix(in oklab, #fbfbfd 66%, transparent) 48%,
      color-mix(in oklab, #1d1d1f 5%, transparent)),
    color-mix(in oklab, #fff 82%, transparent) !important;
  border-color:color-mix(in oklab, rgba(15,22,38,.10) 48%, #fff 36%) !important;
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, #fff 92%, transparent),
    inset 0 -1px 1px color-mix(in oklab, #1d1d1f 8%, transparent),
    0 1px 2px color-mix(in oklab, #1d1d1f 8%, transparent),
    0 16px 34px -24px color-mix(in oklab, #1d1d1f 40%, transparent) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sv-nav-eye {
    background:
      linear-gradient(135deg,
        color-mix(in oklab, #fff 92%, transparent),
        color-mix(in oklab, #fbfbfd 66%, transparent) 48%,
        color-mix(in oklab, #1d1d1f 5%, transparent)),
      color-mix(in oklab, #fff 82%, transparent) !important;
    border-color:color-mix(in oklab, rgba(15,22,38,.10) 48%, #fff 36%) !important;
    box-shadow:
      inset 0 1px 1px color-mix(in oklab, #fff 92%, transparent),
      inset 0 -1px 1px color-mix(in oklab, #1d1d1f 8%, transparent),
      0 1px 2px color-mix(in oklab, #1d1d1f 8%, transparent),
      0 16px 34px -24px color-mix(in oklab, #1d1d1f 40%, transparent) !important;
  }
}

.nav-links.has-sv-nav-eye.is-eye-visible .sv-nav-eye {
  opacity:1 !important;
}

.nav-links.has-sv-nav-eye.is-eye-hovered .sv-nav-eye {
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, #fff 26%, transparent),
    inset 0 -1px 1px color-mix(in oklab, #000 72%, transparent),
    0 1px 2px rgba(0,0,0,.36),
    0 22px 44px -24px rgba(0,0,0,.78) !important;
}

html[data-theme="light"] .nav-links.has-sv-nav-eye.is-eye-hovered .sv-nav-eye {
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, #fff 96%, transparent),
    inset 0 -1px 1px color-mix(in oklab, #1d1d1f 9%, transparent),
    0 1px 2px color-mix(in oklab, #1d1d1f 9%, transparent),
    0 20px 42px -26px color-mix(in oklab, #1d1d1f 46%, transparent) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nav-links.has-sv-nav-eye.is-eye-hovered .sv-nav-eye {
    box-shadow:
      inset 0 1px 1px color-mix(in oklab, #fff 96%, transparent),
      inset 0 -1px 1px color-mix(in oklab, #1d1d1f 9%, transparent),
      0 1px 2px color-mix(in oklab, #1d1d1f 9%, transparent),
      0 20px 42px -26px color-mix(in oklab, #1d1d1f 46%, transparent) !important;
  }
}

.nav-links svg {
  width:15px !important;
  height:15px !important;
  stroke-width:1.9 !important;
}

.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible,
.nav-links a[aria-current="page"],
.nav-links:not(:has([aria-current="page"])) a:first-child {
  color:#f5f5f7 !important;
  background:rgba(255,255,255,.135) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 8px 18px -16px rgba(0,0,0,.76) !important;
  transform:none !important;
}

.nav-links.has-sv-nav-eye a:not(.nav-cta):hover,
.nav-links.has-sv-nav-eye a:not(.nav-cta):focus-visible,
.nav-links.has-sv-nav-eye a[aria-current="page"],
.nav-links.has-sv-nav-eye:not(.nav-links-no-default):not(:has([aria-current="page"])) a:first-child {
  background:transparent !important;
  box-shadow:none !important;
}

html[data-theme="light"] .nav-links a:not(.nav-cta):hover,
html[data-theme="light"] .nav-links a:not(.nav-cta):focus-visible,
html[data-theme="light"] .nav-links a[aria-current="page"],
html[data-theme="light"] .nav-links:not(:has([aria-current="page"])) a:first-child,
:root:not([data-theme="dark"]) .nav-links a:not(.nav-cta):hover,
:root:not([data-theme="dark"]) .nav-links a:not(.nav-cta):focus-visible,
:root:not([data-theme="dark"]) .nav-links a[aria-current="page"],
:root:not([data-theme="dark"]) .nav-links:not(:has([aria-current="page"])) a:first-child {
  color:#1d1d1f !important;
  background:#fff !important;
  box-shadow:0 1px 1px rgba(15,22,38,.04), 0 8px 18px -15px rgba(15,22,38,.42) !important;
}

html[data-theme="light"] .nav-links.has-sv-nav-eye a:not(.nav-cta):hover,
html[data-theme="light"] .nav-links.has-sv-nav-eye a:not(.nav-cta):focus-visible,
html[data-theme="light"] .nav-links.has-sv-nav-eye a[aria-current="page"],
html[data-theme="light"] .nav-links.has-sv-nav-eye:not(.nav-links-no-default):not(:has([aria-current="page"])) a:first-child,
:root:not([data-theme="dark"]) .nav-links.has-sv-nav-eye a:not(.nav-cta):hover,
:root:not([data-theme="dark"]) .nav-links.has-sv-nav-eye a:not(.nav-cta):focus-visible,
:root:not([data-theme="dark"]) .nav-links.has-sv-nav-eye a[aria-current="page"],
:root:not([data-theme="dark"]) .nav-links.has-sv-nav-eye:not(.nav-links-no-default):not(:has([aria-current="page"])) a:first-child {
  background:transparent !important;
  box-shadow:none !important;
}

.nav-mob {
  height:44px !important;
  gap:12px !important;
}

.nav-action-link {
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 4px !important;
  border-radius:999px !important;
  color:rgba(245,245,247,.74) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  transition:color .18s var(--sv-shell-ease) !important;
}

.nav-action-link:hover,
.nav-action-link:focus-visible,
.nav-action-link[aria-current="page"] {
  color:#f5f5f7 !important;
}

html[data-theme="light"] .nav-action-link,
:root:not([data-theme="dark"]) .nav-action-link {
  color:#3f4147 !important;
}

html[data-theme="light"] .nav-action-link:hover,
html[data-theme="light"] .nav-action-link:focus-visible,
html[data-theme="light"] .nav-action-link[aria-current="page"],
:root:not([data-theme="dark"]) .nav-action-link:hover,
:root:not([data-theme="dark"]) .nav-action-link:focus-visible,
:root:not([data-theme="dark"]) .nav-action-link[aria-current="page"] {
  color:#1d1d1f !important;
}

.nav-cta {
  min-height:44px !important;
  padding:0 22px !important;
  font-size:14px !important;
  font-weight:650 !important;
  box-shadow:none !important;
}

.nav-iconbtn,
.drawer-close {
  width:44px !important;
  height:44px !important;
  border-color:rgba(255,255,255,.13) !important;
  background:rgba(255,255,255,.055) !important;
  box-shadow:none !important;
}

.nav-iconbtn .glyph-moon {
  display:none !important;
}

.nav-iconbtn .glyph-sun {
  display:block !important;
}

html[data-theme="light"] .nav-iconbtn .glyph-moon,
:root:not([data-theme="dark"]) .nav-iconbtn .glyph-moon {
  display:none !important;
}

html[data-theme="light"] .nav-iconbtn .glyph-sun,
:root:not([data-theme="dark"]) .nav-iconbtn .glyph-sun {
  display:block !important;
}

html[data-theme="dark"] .nav-iconbtn .glyph-moon {
  display:block !important;
}

html[data-theme="dark"] .nav-iconbtn .glyph-sun {
  display:none !important;
}

html[data-theme="light"] .nav-iconbtn,
html[data-theme="light"] .drawer-close,
:root:not([data-theme="dark"]) .nav-iconbtn,
:root:not([data-theme="dark"]) .drawer-close {
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(15,22,38,.10) !important;
  box-shadow:none !important;
}

.nav-iconbtn.sv-theme-toggle {
  position:relative !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.055) !important;
  color:rgba(245,245,247,.76) !important;
  box-shadow:none !important;
  transition:
    color .16s var(--sv-shell-ease),
    background .16s var(--sv-shell-ease),
    border-color .16s var(--sv-shell-ease),
    transform .16s var(--sv-shell-ease) !important;
}

.nav-iconbtn.sv-theme-toggle .sv-theme-icon,
.nav-iconbtn.sv-theme-toggle svg {
  display:none !important;
}

.nav-iconbtn.sv-theme-toggle::before {
  content:"" !important;
  width:17px !important;
  height:17px !important;
  display:block !important;
  border:1.8px solid currentColor !important;
  border-radius:999px !important;
  box-shadow:inset -5px 0 0 currentColor !important;
  opacity:.92 !important;
}

html[data-theme="light"] .nav-iconbtn.sv-theme-toggle,
:root:not([data-theme="dark"]) .nav-iconbtn.sv-theme-toggle {
  background:rgba(255,255,255,.84) !important;
  border-color:rgba(15,22,38,.10) !important;
  color:rgba(29,29,31,.68) !important;
}

html[data-theme="light"] .nav-iconbtn.sv-theme-toggle::before,
:root:not([data-theme="dark"]) .nav-iconbtn.sv-theme-toggle::before {
  border-color:currentColor !important;
  box-shadow:
    0 -7px 0 -6px currentColor,
    0 7px 0 -6px currentColor,
    7px 0 0 -6px currentColor,
    -7px 0 0 -6px currentColor,
    5px 5px 0 -6px currentColor,
    -5px -5px 0 -6px currentColor,
    5px -5px 0 -6px currentColor,
    -5px 5px 0 -6px currentColor !important;
}

html[data-theme="dark"] .nav-iconbtn.sv-theme-toggle {
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.13) !important;
  color:rgba(245,245,247,.76) !important;
}

html[data-theme="dark"] .nav-iconbtn.sv-theme-toggle::before {
  box-shadow:inset -5px 0 0 currentColor !important;
}

.nav-iconbtn.sv-theme-toggle:hover,
.nav-iconbtn.sv-theme-toggle:focus-visible {
  border-color:color-mix(in srgb, var(--sv-shell-blue) 48%, rgba(255,255,255,.18)) !important;
  background:color-mix(in srgb, var(--sv-shell-blue) 12%, rgba(255,255,255,.08)) !important;
  color:inherit !important;
  transform:translateY(-1px) !important;
}

.drawer-scrim {
  z-index:900 !important;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.drawer-scrim.is-open {
  pointer-events:auto !important;
  background:rgba(0,0,0,.16) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  backdrop-filter:blur(2px) !important;
}

.drawer {
  top:calc(72px + env(safe-area-inset-top, 0px)) !important;
  right:12px !important;
  bottom:auto !important;
  left:12px !important;
  inset:calc(72px + env(safe-area-inset-top, 0px)) 12px auto 12px !important;
  z-index:999 !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  max-height:calc(100vh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  padding:10px 10px 14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:18px !important;
  background:rgba(12,13,18,.97) !important;
  color:#f5f5f7 !important;
  box-shadow:0 30px 80px rgba(0,0,0,.38) !important;
  overflow-y:auto !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-8px) scale(.985) !important;
  transition:opacity .2s var(--sv-shell-ease), transform .22s var(--sv-shell-ease), visibility .2s var(--sv-shell-ease) !important;
  -webkit-backdrop-filter:saturate(180%) blur(28px) !important;
  backdrop-filter:saturate(180%) blur(28px) !important;
}

.drawer.is-open {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
}

html[data-theme="light"] .drawer,
:root:not([data-theme="dark"]) .drawer {
  border-color:rgba(15,22,38,.09) !important;
  background:rgba(255,255,255,.98) !important;
  color:#1d1d1f !important;
  box-shadow:0 30px 80px rgba(15,22,38,.18) !important;
}

.drawer-head {
  display:none !important;
}

.drawer-section,
.drawer-links,
.drawer-row,
.drawer-cta {
  width:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.drawer-section {
  padding:7px 10px 8px !important;
  font-size:11px !important;
  font-weight:720 !important;
  letter-spacing:.10em !important;
}

.drawer-head + .drawer-links {
  margin-top:0 !important;
}

.drawer-links,
.drawer-group {
  display:grid !important;
  gap:0 !important;
  margin:0 0 8px !important;
  padding:4px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.055) !important;
  overflow:hidden !important;
}

html[data-theme="light"] .drawer-links,
html[data-theme="light"] .drawer-group,
:root:not([data-theme="dark"]) .drawer-links,
:root:not([data-theme="dark"]) .drawer-group {
  border-color:rgba(15,22,38,.08) !important;
  background:rgba(15,22,38,.035) !important;
}

.drawer-cell,
.drawer-links a {
  min-height:52px !important;
  display:grid !important;
  grid-template-columns:32px minmax(0,1fr) 14px !important;
  gap:10px !important;
  padding:9px 10px !important;
  border-radius:12px !important;
  background:transparent !important;
  font-size:15px !important;
  font-weight:590 !important;
}

html[data-theme="light"] .drawer-cell,
html[data-theme="light"] .drawer-links a,
:root:not([data-theme="dark"]) .drawer-cell,
:root:not([data-theme="dark"]) .drawer-links a {
  background:transparent !important;
}

.drawer-group .drawer-cell + .drawer-cell,
.drawer-links:not(.drawer-group) a + a {
  border-top:1px solid rgba(255,255,255,.08) !important;
}

html[data-theme="light"] .drawer-group .drawer-cell + .drawer-cell,
html[data-theme="light"] .drawer-links:not(.drawer-group) a + a,
:root:not([data-theme="dark"]) .drawer-group .drawer-cell + .drawer-cell,
:root:not([data-theme="dark"]) .drawer-links:not(.drawer-group) a + a {
  border-top-color:rgba(15,22,38,.07) !important;
}

.drawer-cell:hover,
.drawer-links a:hover,
.drawer-cell:focus-visible,
.drawer-links a:focus-visible,
html[data-theme="light"] .drawer-cell:hover,
html[data-theme="light"] .drawer-links a:hover,
html[data-theme="light"] .drawer-cell:focus-visible,
html[data-theme="light"] .drawer-links a:focus-visible,
:root:not([data-theme="dark"]) .drawer-cell:hover,
:root:not([data-theme="dark"]) .drawer-links a:hover,
:root:not([data-theme="dark"]) .drawer-cell:focus-visible,
:root:not([data-theme="dark"]) .drawer-links a:focus-visible {
  background:rgba(255,255,255,.09) !important;
  transform:none !important;
}

html[data-theme="light"] .drawer-cell:hover,
html[data-theme="light"] .drawer-links a:hover,
html[data-theme="light"] .drawer-cell:focus-visible,
html[data-theme="light"] .drawer-links a:focus-visible,
:root:not([data-theme="dark"]) .drawer-cell:hover,
:root:not([data-theme="dark"]) .drawer-links a:hover,
:root:not([data-theme="dark"]) .drawer-cell:focus-visible,
:root:not([data-theme="dark"]) .drawer-links a:focus-visible {
  background:#fff !important;
}

.drawer-cell-icon,
.drawer-links:not(.drawer-group) a::before {
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

.drawer-cell-icon svg {
  width:15px !important;
  height:15px !important;
}

.drawer-cta {
  min-height:52px !important;
  margin-top:8px !important;
  margin-bottom:0 !important;
  border-radius:14px !important;
  font-size:15px !important;
  font-weight:680 !important;
  box-shadow:none !important;
}

@media (max-width:900px) {
  .nav {
    height:64px !important;
    min-height:calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  .nav-inner {
    width:calc(100% - 36px) !important;
    height:64px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:14px !important;
  }

  .nav-links,
  .nav-action-link,
  .nav-cta {
    display:none !important;
  }

  #menu-toggle {
    display:inline-grid !important;
  }

  .brand {
    max-width:58vw !important;
  }

  .drawer {
    top:calc(64px + env(safe-area-inset-top, 0px)) !important;
    inset:calc(64px + env(safe-area-inset-top, 0px)) 12px auto 12px !important;
    max-height:calc(100vh - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width:760px) {
  .nav {
    height:64px !important;
    min-height:calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  .nav-inner {
    width:calc(100% - 32px) !important;
    height:64px !important;
  }

  .nav-iconbtn,
  .drawer-close {
    width:40px !important;
    height:40px !important;
  }

  .drawer {
    left:10px !important;
    right:10px !important;
    inset:calc(64px + env(safe-area-inset-top, 0px)) 10px auto 10px !important;
  }
}

/* Account/profile shell additions. */
.nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child {
  color:inherit !important;
  background:transparent !important;
  box-shadow:none !important;
}

.nav-links.nav-links-no-default > a:first-child:not([aria-current="page"]) {
  color:inherit !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body .nav .nav-links.nav-links-no-default > a:first-child:not([aria-current="page"]) {
  color:inherit !important;
  background:transparent !important;
  box-shadow:none !important;
}

.nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:hover,
.nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:focus-visible,
.nav-links.nav-links-no-default > a:first-child:not([aria-current="page"]):hover,
.nav-links.nav-links-no-default > a:first-child:not([aria-current="page"]):focus-visible {
  color:#f5f5f7 !important;
  background:rgba(255,255,255,.135) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 8px 18px -16px rgba(0,0,0,.76) !important;
}

html[data-theme="light"] .nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:hover,
html[data-theme="light"] .nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:focus-visible,
:root:not([data-theme="dark"]) .nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:hover,
:root:not([data-theme="dark"]) .nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:focus-visible {
  color:#1d1d1f !important;
  background:#fff !important;
  box-shadow:0 1px 1px rgba(15,22,38,.04), 0 8px 18px -15px rgba(15,22,38,.42) !important;
}

.drawer-cell[href*="login"] .drawer-cell-icon,
.drawer-cell[href*="profile"] .drawer-cell-icon,
.drawer-links:not(.drawer-group) a[href*="login"]::before,
.drawer-links:not(.drawer-group) a[href*="profile"]::before {
  background:linear-gradient(135deg, #70a6ff, #5e5ce6) !important;
}

@media (max-width:760px) {
  .nav-action-link:not([data-account-link]) {
    display:none !important;
  }
}

@media (max-width:370px) {
  .nav-action-link {
    display:none !important;
  }
}

.nav-action-link,
.nav-cta,
.drawer-cell,
.drawer-links a,
.drawer-cta {
  text-decoration:none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav,
  :root:not([data-theme]) .chrome {
    background:rgba(8,9,14,.78) !important;
    border-bottom-color:rgba(255,255,255,.10) !important;
    color:#f5f5f7 !important;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 54px -46px rgba(0,0,0,.86) !important;
  }

  :root:not([data-theme]) .brand,
  :root:not([data-theme]) .nav-action-link {
    color:rgba(245,245,247,.74) !important;
  }

  :root:not([data-theme]) .brand i {
    color:#a1a1a6 !important;
  }

  :root:not([data-theme]) .nav-action-link:hover,
  :root:not([data-theme]) .nav-action-link:focus-visible,
  :root:not([data-theme]) .nav-action-link[aria-current="page"] {
    color:#f5f5f7 !important;
  }

  :root:not([data-theme]) .nav-links {
    border-color:rgba(255,255,255,.09) !important;
    background:rgba(255,255,255,.075) !important;
    color:rgba(245,245,247,.64) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px -26px rgba(0,0,0,.76) !important;
  }

  :root:not([data-theme]) .nav-links a:not(.nav-cta):hover,
  :root:not([data-theme]) .nav-links a:not(.nav-cta):focus-visible,
  :root:not([data-theme]) .nav-links a[aria-current="page"],
  :root:not([data-theme]) .nav-links:not(:has([aria-current="page"])) a:first-child,
  :root:not([data-theme]) .nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:hover,
  :root:not([data-theme]) .nav-links.nav-links-no-default:not(:has([aria-current="page"])) a:first-child:focus-visible {
    color:#f5f5f7 !important;
    background:rgba(255,255,255,.135) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 8px 18px -16px rgba(0,0,0,.76) !important;
  }

  :root:not([data-theme]) .nav-iconbtn,
  :root:not([data-theme]) .drawer-close {
    background:rgba(255,255,255,.055) !important;
    border-color:rgba(255,255,255,.13) !important;
    color:#f5f5f7 !important;
    box-shadow:none !important;
  }

  :root:not([data-theme]) .nav-iconbtn .glyph-moon,
  :root:not([data-theme]) .drawer-close .glyph-moon {
    display:block !important;
  }

  :root:not([data-theme]) .nav-iconbtn .glyph-sun,
  :root:not([data-theme]) .drawer-close .glyph-sun {
    display:none !important;
  }

  :root:not([data-theme]) .drawer {
    border-color:rgba(255,255,255,.12) !important;
    background:rgba(12,13,18,.97) !important;
    color:#f5f5f7 !important;
  }

  :root:not([data-theme]) .drawer-links,
  :root:not([data-theme]) .drawer-group {
    border-color:rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.06) !important;
  }

  :root:not([data-theme]) .drawer-cell,
  :root:not([data-theme]) .drawer-links a {
    background:transparent !important;
    color:#f5f5f7 !important;
  }

  :root:not([data-theme]) .drawer-group .drawer-cell + .drawer-cell,
  :root:not([data-theme]) .drawer-links:not(.drawer-group) a + a {
    border-top-color:rgba(255,255,255,.08) !important;
  }

  :root:not([data-theme]) .drawer-cell:hover,
  :root:not([data-theme]) .drawer-links a:hover,
  :root:not([data-theme]) .drawer-cell:focus-visible,
  :root:not([data-theme]) .drawer-links a:focus-visible {
    background:rgba(255,255,255,.09) !important;
  }
}