/* Based on Raycast public CSS inspected 2026-10-26.
   Navbar: pSp8Ga_navbar; buttons: _3dJGfa_light / dark;
   tabs: _3Yq4tG_categories / activeBackdrop. See REFERENCE-NOTES.md. */
:root {
  --rc-nav: linear-gradient(137deg, #121212bf 4.87%, #0d0d0de6 75.88%);
  --rc-card: linear-gradient(137deg, #121212 4.87%, #0d0d0d 75.88%);
  --rc-border: #ffffff0f;
  --rc-top: #ffffff26;
  --rc-muted: #9c9c9c;
  --rc-loud: #ffffff;
  --rc-dark-button: linear-gradient(#ffffff08 0%, #ffffff1a 100%);
  --rc-button-edge: #ffffff40;
  --rc-button-hover: #ffffff80;
  --rc-button-active: #ffffff26;
  --rc-button-top: #ffffff0d;
  --rc-button-bottom: #00000033;
  --rc-light: #e6e6e6;
  --rc-light-hover: #ffffff;
  --rc-light-active: #cecece;
  --rc-light-ink: #303030;
  --rc-light-ring: #00000080;
  --rc-light-glow: #ffffff30;
  --rc-light-top: #ffffff;
  --rc-tab: radial-gradient(51.07% 92.4% at 51% 7.61%, #5a5a5a 0%, #1a1a1a 100%);
  --rc-tab-rim: linear-gradient(#ffffff, #ffffff00);
}



.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; width: 100%;
  margin: 0; padding: 16px 16px 0; border: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
}
.nav-shell {
  position: relative; width: 100%; max-width: 1204px; height: 76px;
  padding: 16px 32px; margin: auto; gap: 24px;
  border: 1px solid var(--rc-border); border-radius: 16px;
  background: var(--rc-nav); box-shadow: inset 0 1px 1px var(--rc-top);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: height .3s, transform .3s; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
}
#main { padding-top: 92px; }
.site-header .brand { position: absolute; left: 32px; font-size: 18px; gap: 10px; letter-spacing: 1.4px; }
.site-header .brand-cn { font-size: 12px; margin-left: 9px; letter-spacing: 1px; }
.site-header .orbit-mark { width: 28px; height: 28px; }
.site-header nav { gap: 16px; display: flex; align-items: center; }
.site-header nav a {
  padding: 12px 8px; min-height: 40px; border-radius: 6px;
  font-size: 14px; font-weight: 500; letter-spacing: .2px;
  color: var(--rc-muted); white-space: nowrap; line-height: normal;
  transition: color .2s ease-in-out;
}
.site-header nav a:hover { color: var(--rc-loud); background: transparent; }
.nav-actions { position: absolute; right: 32px; display: flex; align-items: center; gap: 24px; }
.nav-dot { vertical-align: top; margin: 1px 0 0 4px; }

/* Raycast's bright buttons use a flat fill and fine inset edges. */
.button, .nav-download {
  border: none; border-radius: 8px; font-weight: 500; letter-spacing: .2px;
  transition: background-color .2s, box-shadow .2s ease-in-out, transform .1s ease-in-out;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.button { min-height: 44px; }
.button:hover, .button:active, .nav-download:hover, .nav-download:active { transform: none; }
.button-primary, .nav-download {
  color: var(--rc-light-ink); background: var(--rc-light);
  box-shadow: 0 0 0 2px var(--rc-light-ring), 0 0 14px var(--rc-light-glow), inset 0 -1px .4px #00000033, inset 0 1px .4px var(--rc-light-top);
}
.button-primary:hover, .nav-download:hover {
  background: var(--rc-light-hover);
  box-shadow: inset 0 -1px .4px #00000033, inset 0 1px .4px var(--rc-light-top), 0 0 0 2px var(--rc-light-ring), 0 0 14px var(--rc-light-glow);
}
.button-primary:active, .nav-download:active { background: var(--rc-light-active); }
.nav-download { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; gap: 8px; font-size: 14px; line-height: 16px; }
.nav-download .icon { width: 16px; height: 16px; }
.button-text, .button-small {
  color: var(--rc-loud); background: var(--rc-dark-button);
  box-shadow: inset 0 1px var(--rc-button-top), 0 0 0 1px var(--rc-button-edge), inset 0 -1px var(--rc-button-bottom);
}
.button-text:hover, .button-small:hover {
  box-shadow: inset 0 1px var(--rc-button-top), 0 0 0 1px var(--rc-button-hover), inset 0 -1px var(--rc-button-bottom);
}
.button-text:active, .button-small:active {
  box-shadow: inset 0 1px var(--rc-button-top), 0 0 0 1px var(--rc-button-active), inset 0 -1px var(--rc-button-bottom);
}
.button-small { min-height: 40px; }
/* Quiet actions stay text-only, preserving hierarchy. */
button.text-link { min-height: 40px; padding: 6px 0; background: none; border: 0; box-shadow: none; }
.icon-button { position: relative; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; box-shadow: none; transition: color .2s, background-color .2s; }
.icon-button:hover { transform: none; background: #88888812; }






/* Reference tab geometry and top-lit radial fill. The rim fades to transparent. */
.showcase-switcher {
  position: relative; isolation: isolate; gap: 0; padding: 8px;
  border: 1px solid var(--rc-border); border-bottom: 0; border-radius: 31px;
  background: var(--rc-card); box-shadow: inset 0 1px #ffffff1a;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.showcase-switcher::before { content: none; }
.tab-glass {
  position: absolute; top: 8px; left: 0; height: 46px;
  width: var(--tab-width, 0px); transform: translate3d(var(--tab-left, 8px), 0, 0);
  border-radius: 36px; background: var(--rc-tab); pointer-events: none;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.tab-glass::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  opacity: .2; background: var(--rc-tab-rim);
  -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.showcase-switcher[data-ready=true] .tab-glass { transition: transform .3s, width .3s; }
.showcase-switcher button {
  position: relative; z-index: 1; height: 46px; min-height: 46px;
  padding: 0 20px; border: 0; border-radius: 36px;
  color: var(--rc-muted); font-size: 12px; font-weight: 500; letter-spacing: .2px;
  background: transparent; box-shadow: none; transition: color .3s;
}
.showcase-switcher button[aria-selected=true], .showcase-switcher button:hover {
  color: var(--rc-loud); background: transparent; border: 0; box-shadow: none;
}
.showcase-switcher button:active { transform: none; }
.demo-scene { position: absolute; inset: 0; animation: none; }
.demo-scene[aria-hidden=true] { pointer-events: none; }

@media (max-width: 1000px) and (min-width: 701px) {
  .nav-shell { padding-inline: 24px; }
  .site-header .brand { left: 24px; }
  .nav-actions { right: 24px; gap: 12px; }
  .site-header nav { gap: 8px; }
}
@media (max-width: 700px) {
  .site-header { padding: 12px 12px 0; }
  .nav-shell { height: 64px; padding: 9px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 44px auto; gap: 0; align-items: start; overflow: hidden; border-radius: 16px; }
  .site-header .brand { position: static; align-self: center; font-size: 16px; letter-spacing: 1px; gap: 8px; }
  .site-header .brand-cn { font-size: 10px; margin-left: 6px; }
  .site-header .orbit-mark { width: 25px; height: 25px; }
  .nav-actions { position: static; gap: 8px; grid-column: 2; grid-row: 1; }
  .nav-download { display: none; }
  .icon-button { width: 44px; height: 44px; }
  .mobile-menu { display: flex; }
  .mobile-menu span { width: 20px; transition: transform .5s, opacity .25s; }
  .site-header nav {
    position: static; top: auto; left: auto; right: auto; grid-column: 1 / -1; grid-row: 2;
    display: flex; flex-direction: column; gap: 4px; align-items: stretch;
    padding: 24px 0 12px; background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .3s, visibility 0s .3s;
  }
  .site-header nav a { padding: 13px 8px; min-height: 44px; }
  .menu-open .nav-shell { height: 240px; }
  .menu-open nav { visibility: visible; opacity: 1; transform: none; transition: opacity .3s .07s, transform .3s, visibility 0s; }
  #main { padding-top: 76px; }
  .showcase-switcher button { padding: 0 12px; font-size: 10px; }
  .button-small, button.text-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-switcher[data-ready=true] .tab-glass, .nav-shell, .site-header nav, .menu-open nav { transition: none; }
}
@media (max-width: 390px) {
  .hero h1 { font-size: 8.2vw; letter-spacing: -1px; }
  .showcase-switcher button { padding-inline: 9px; font-size: 9px; gap: 6px; }
}