/* Shared homepage palette and measured x.ai container geometry. */
body.home-page {
  --page-bg:#fff; --page-ink:#080808; --page-muted:#747474; --page-faint:#929292;
  --page-line:#e7e7e7; --page-surface:#f5f5f5; --page-active:#e9e9e9;
  --page-header:rgba(255,255,255,.94); --hero-glow:#fafafa; --page-button:#0b0b0b; --page-button-ink:#fff;
  --hp-bg:var(--page-bg); --hp-ink:var(--page-ink); --hp-muted:var(--page-muted); --hp-faint:var(--page-faint);
  --hp-line:var(--page-line); --hp-hover:var(--page-surface); --hp-fill:var(--page-button); --hp-fill-ink:var(--page-button-ink); --hp-nav:var(--page-ink);
  background:var(--page-bg)!important; color:var(--page-ink)!important; color-scheme:light;
}
html.dark body.home-page {
  --page-bg:#0b0b0b; --page-ink:#f5f5f5; --page-muted:#a1a1a1; --page-faint:#818181;
  --page-line:#292929; --page-surface:#181818; --page-active:#292929;
  --page-header:rgba(11,11,11,.94); --hero-glow:#171717; --page-button:#f5f5f5; --page-button-ink:#0b0b0b;
  color-scheme:dark;
}
body.home-page .hp { background:var(--page-bg); color:var(--page-ink); }
body.home-page .hp .hp-hero { background:radial-gradient(ellipse at 50% 85%,var(--hero-glow),var(--page-bg) 70%); }
body.home-page .hp .hp-hero .hp-h1 { color:var(--page-ink); }
body.home-page .hp .hp-hero .grad { color:var(--page-muted); }
body.home-page .hp .hp-hero p.lead,body.home-page .hp .hp-en,body.home-page .hp .hp-hero .hp-eyebrow { color:var(--page-muted); }
body.home-page .hp-eyebrow i { background:#9dac50; }
html.dark body.home-page .hp-eyebrow i { background:#e8fc8b; }
.hero-spark { color:var(--page-line); }
.hero-controls > button { color:var(--page-ink); border-color:var(--page-line); background:var(--page-surface); }
.hero-controls > button:hover { background:var(--page-active); }
.hero-controls .hero-autoplay,.hero-status { color:var(--page-muted); }
.hero-dots button { background:var(--page-line); }
.hero-dots button[aria-pressed="true"] { background:var(--page-ink); }
.hero-carousel button:focus-visible { outline-color:var(--page-ink); }
body.home-page > header.sticky,body.home-page.hp-scrolled > header.sticky {
  background:var(--page-header)!important; border-bottom:1px solid var(--page-line)!important; backdrop-filter:blur(18px)!important;
}
body.home-page > header.sticky > div { width:100%; max-width:1280px; height:80px; margin:0 auto; padding:0 24px; }
body.home-page > header.sticky nav,body.home-page.hp-scrolled > header.sticky nav { background:var(--page-surface); border-color:var(--page-line); }
body.home-page > header.sticky nav a,body.home-page.hp-scrolled > header.sticky nav a { color:var(--page-muted)!important; }
body.home-page > header.sticky nav a:hover,body.home-page > header.sticky nav a[href="/"],body.home-page.hp-scrolled > header.sticky nav a:hover,body.home-page.hp-scrolled > header.sticky nav a[href="/"] { color:var(--page-ink)!important; background:var(--page-active); }
body.home-page > header.sticky > div > a,body.home-page > header.sticky > div > a span,body.home-page > header.sticky > div > a .hero-brand-mark,
body.home-page.hp-scrolled > header.sticky > div > a span,body.home-page.hp-scrolled > header.sticky > div > a .hero-brand-mark { color:var(--page-ink)!important; }
body.home-page > header a > div.bg-gradient-to-br::after,body.home-page.hp-scrolled > header a > div.bg-gradient-to-br::after { color:var(--page-ink); }
body.home-page > header.sticky #loginBtn,body.home-page.hp-scrolled > header.sticky #loginBtn { color:var(--page-ink)!important; }
body.home-page > header.sticky #themeToggle { display:inline-flex!important; width:36px; height:36px!important; padding:0; border:1px solid var(--page-line)!important; background:var(--page-surface)!important; color:var(--page-ink)!important; border-radius:50%!important; flex-shrink:0; }
body.home-page > header.sticky #themeToggle:hover { background:var(--page-active)!important; }
body.home-page .hero-contact,body.home-page.hp-scrolled .hero-contact { background:var(--page-button); color:var(--page-button-ink)!important; }
body.home-page .hero-menu-toggle,body.home-page.hp-scrolled > header.sticky .hero-menu-toggle { color:var(--page-ink)!important; }
body.home-page .studio-home { background:var(--page-bg); color:var(--page-ink); --studio-line:var(--page-line); --studio-muted:var(--page-muted); }
.studio-home .studio-start,.studio-home .studio-footer { background:var(--page-bg); }
.studio-home .studio-kicker,.studio-home .studio-lead,.studio-home .studio-caption,.studio-home .studio-tool p,.studio-home .workflow-steps p,.studio-home .workflow-panel,.studio-home .canvas-note,
.studio-home .selected-meta,.studio-home .stat-item > span,.studio-home .news-title > span,.studio-home .footer-top p,.studio-home .footer-links,.studio-home .footer-bottom,
.studio-home .start-card li,.studio-home .start-wechat,.studio-home .start-card > p { color:var(--page-muted); }
.studio-home .studio-text-link,.studio-home .tool-label > span,.studio-home .journal-meta,.studio-home .footer-wordmark,.studio-home .start-card li::before { color:var(--page-ink); }
.studio-home .dark-button { background:var(--page-button); color:var(--page-button-ink)!important; }
.studio-home .dark-button:hover { opacity:.82; }
.studio-home .studio-footer,.studio-home .start-grid,.studio-home .start-card + .start-card,.studio-home .start-card ul,.studio-home .footer-bottom,
.studio-home .stats-grid,.studio-home .stat-item + .stat-item,.studio-home .workflow-steps,.studio-home .studio-text-link,.studio-home .news-cover { border-color:var(--page-line); }
.studio-home .stat-item small,.studio-home .workflow-steps b { color:var(--page-faint); }
.studio-home .workflow-tabs button { color:var(--page-muted); }
.studio-home .workflow-tabs button[aria-selected=true] { background:var(--page-active); color:var(--page-ink); }
.studio-home .journal-card:hover h3 { color:var(--page-muted); }
.studio-home a:focus-visible,.studio-home button:focus-visible { outline-color:var(--page-ink); }
html.dark .studio-home .design-window { background:#181818; border-color:#444; box-shadow:0 20px 30px #0005; }
html.dark .studio-home .window-bar,html.dark .studio-home .window-sidebar { border-color:#353535; }
html.dark .studio-home .window-bar small,html.dark .studio-home .canvas-meta { color:#aaa; }
/* A 1280px outer container yields 1232px of usable content on desktop. */
body.home-page .studio-container,body.home-page .hp-wrap { width:100%; max-width:1280px; padding:0 24px; margin-left:auto; margin-right:auto; }
.studio-home .journal-grid { gap:20px; }
@media(max-width:767px) {
  body.home-page > header.sticky > div { height:64px; padding:0 24px; gap:10px; }
  body.home-page > header.sticky > div > .flex { gap:8px; }
  body.home-page .hero-contact { padding:9px 11px; }
  body.home-page > header.sticky #themeToggle { width:32px; height:32px!important; }
  body.home-page > header.sticky nav.is-open { left:16px; right:16px; top:60px; }
  body.home-page .studio-container,body.home-page .hp-wrap,body.home-page .hp .hp-hero .hp-wrap { padding:0 24px; }
}
@media(max-width:639px) {
  .studio-home .journal-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  .studio-home .journal-card h3 { font-size:18px; line-height:1.45; }
  .studio-home .journal-meta { font-size:12px; margin:14px 0 10px; gap:8px; }
  .studio-home .stats-grid { grid-template-columns:1fr; gap:32px; padding:32px 0; }
  .studio-home .stat-item,.studio-home .stat-item:first-child { padding:0; }
  .studio-home .stat-item + .stat-item { border-left:0; }
  .studio-home .stat-item strong { font-size:48px; }
  .studio-home .stat-item > span { margin-top:12px; font-size:14px; }
  .studio-home .stat-item small { display:none; }
}
html:not(.dark) body.home-page .hero-card { box-shadow:inset 0 2px 2px #ffffff80,inset 2px 0 3px #ffffff35,inset -2px -3px 5px #00000025,0 18px 36px #00000020,0 2px 5px #00000015; }

@media(min-width:640px) and (max-width:1023px) {
  .studio-home .journal-grid { grid-template-columns:repeat(4,293px); overflow-x:auto; padding-bottom:14px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--page-line) transparent; }
  .studio-home .journal-card { scroll-snap-align:start; }
  .studio-home .journal-card h3 { font-size:17px; }
  .studio-home .journal-meta { font-size:11px; }
}
@media(max-width:639px) {
  body.home-page > header.sticky > div { padding:0 16px; }
  body.home-page .studio-container,body.home-page .hp-wrap,body.home-page .hp .hp-hero .hp-wrap { padding:0 16px; }
}

/* Flat navigation and rounded actions, following the x.ai header. */
body.home-page > header.sticky,
body.home-page.hp-scrolled > header.sticky { border-bottom:0!important; }
body.home-page > header.sticky > div { height:64px; gap:32px; }
body.home-page > header.sticky nav,
body.home-page.hp-scrolled > header.sticky nav {
  margin-right:auto; background:transparent; border:0; border-radius:0;
  padding:0; gap:24px!important; font-size:13px!important;
}
body.home-page > header.sticky nav a,
body.home-page.hp-scrolled > header.sticky nav a {
  padding:8px 0; border-radius:0; color:var(--page-ink)!important;
  background:transparent!important; font-weight:400;
}
body.home-page > header.sticky nav a:hover,
body.home-page.hp-scrolled > header.sticky nav a:hover { color:var(--page-muted)!important; }
body.home-page .hero-contact,
body.home-page.hp-scrolled .hero-contact {
  order:0; padding:10px 17px; border-radius:999px;
  color:var(--page-ink)!important; background:var(--page-surface); font-size:13px;
}
body.home-page > header.sticky #loginBtn,
body.home-page.hp-scrolled > header.sticky #loginBtn {
  order:2; border-radius:999px; padding:10px 19px; height:38px;
  background:var(--page-button)!important; color:var(--page-button-ink)!important; font-weight:400; font-size:13px;
}
body.home-page > header.sticky #themeToggle {
  order:1; border:0!important; background:transparent!important; box-shadow:none;
}
body.home-page > header.sticky > div > a .hero-brand-mark { font-size:32px; }
@media(max-width:1100px) {
  body.home-page > header.sticky > div { gap:20px; }
  body.home-page > header.sticky nav { gap:16px!important; font-size:12px!important; }
}
@media(max-width:900px) {
  body.home-page > header.sticky nav { display:none; }
  body.home-page .hero-menu-toggle { display:block; margin-left:auto; font-size:21px; }
  body.home-page > header.sticky nav.is-open {
    display:flex; position:absolute; left:16px; right:16px; top:64px;
    margin:0; padding:16px; gap:6px!important; border:1px solid var(--page-line);
    border-radius:16px; background:var(--page-bg); box-shadow:0 12px 30px #0001; flex-wrap:wrap;
  }
  body.home-page > header.sticky nav.is-open a { flex:1 0 28%; padding:12px 8px; text-align:left; }
}
@media(max-width:639px) {
  body.home-page > header.sticky > div { gap:12px; }
  body.home-page .hero-contact { padding:9px 12px; font-size:12px; }
  body.home-page > header.sticky #loginBtn { padding:9px 14px; font-size:12px; }
}