@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}
:root { color-scheme: light dark; scroll-behavior: smooth; }
/* System follows the OS; a saved Light or Dark choice sets data-theme before first paint (appearance.js). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body.home {
  /* Warm paper in light; the apps' dark canvas (web/src/palette.ts) in dark. */
  --paper: light-dark(#f3f1ec, #191e1c);
  --ink: light-dark(#1c3432, #ecf0e8);
  --muted: light-dark(#64706a, #adb9af);
  --rule: light-dark(#d7dbd2, #343d38);
  --raised: light-dark(#e9ece3, #212824);
  --card: light-dark(#f8f7f3, #272e2a);
  --tint: light-dark(#e9ece4, #232a26);
  --hover: light-dark(#e8e8df, #e1ebdd14);
  --primary: light-dark(#1c3432, #c3d8c6);
  --on-primary: light-dark(#f3f1ec, #20382c);
  --pill-border: light-dark(#879489, #5d6b62);
  --font-family-body: "DM Sans", sans-serif;
  --font-family-heading: "DM Sans", sans-serif;
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);
  --color-text-accent: light-dark(#385a46, #b1d6b9);
  --color-background-body: var(--paper);
  --color-focus-ring: light-dark(#385a46, #b1d6b9);
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
::selection { color: var(--ink); background: light-dark(#d8dfcf, #35463a); }
h1, h2, p, figure { margin: 0; }
img { display: block; }
.home-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px clamp(24px, 4.2vw, 72px);
  gap: 32px;
}
.home-header::before {
  content: "";
  position: absolute;
  inset: 12px clamp(12px, 2vw, 32px);
  z-index: -1;
  border: 1px solid light-dark(#fffdf6a3, #e1ebdd1f);
  border-radius: 20px;
  background: light-dark(#f3f1eceb, #191e1ceb);
  box-shadow: 0 2px 12px #283c2d04, inset 0 1px 0 light-dark(#ffffff70, #ffffff0d);
  pointer-events: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .home-header::before {
    background: light-dark(#f3f1ec9e, #191e1c9e);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
  }
}
.home-brand { font-size: 26px; font-weight: 500; letter-spacing: -.045em; }
.home-navigation { display: flex; align-items: center; gap: 36px; font-size: 13px; }
.home-launch { justify-self: end; font-size: 13px; display: flex; align-items: center; gap: 24px; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 20; transform: translateY(-200%); background: var(--paper); padding: 0 16px; border: 1px solid var(--ink); }
.skip-link:focus-within { transform: translateY(0); }
.hero { position: relative; }
.hero-stage { position: relative; height: max(780px, 100svh); overflow: clip; isolation: isolate; }
.hero-world { position: absolute; inset: 0; pointer-events: none; }
.hero-copy { position: absolute; z-index: 2; width: 100%; top: 50%; transform: translateY(-48%); padding: 0 24px; text-align: center; }
.hero h1 { font-weight: 350; font-size: clamp(48px, 5.2vw, 82px); line-height: 1.075; letter-spacing: -.055em; }
.hero-line { display: block; }
.hero h1 em { font-style: normal; color: light-dark(#557554, #a9c9a5); position: relative; }
.hero h1 em::after { content: ""; position: absolute; bottom: -.025em; left: 0; width: 100%; height: 1px; background: currentColor; opacity: .4; transform-origin: left; }
.hero-subtitle { margin-top: 36px; font-size: 16px; letter-spacing: -.01em; }
.hero-downloads { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 28px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.hero-scroll { position: absolute; z-index: 3; bottom: 28px; left: 0; width: 100%; display: flex; justify-content: center; font-size: 12px; }
.hero-scroll:focus-within { opacity: 1 !important; }
.gadget { position: absolute; width: clamp(210px, 22vw, 360px); mix-blend-mode: multiply; transform-style: preserve-3d; }
.gadget img { width: 100%; height: auto; mask-image: radial-gradient(ellipse at 50% 50%, #000 52%, transparent 73%); }
.gadget-robot { top: 9%; left: 3.5%; --tilt: -12deg; }
.gadget-pendant { top: 8%; right: 8%; width: clamp(180px, 19vw, 300px); --tilt: 16deg; }
.gadget-speaker { bottom: 5%; left: 11%; width: clamp(170px, 18vw, 290px); --tilt: -10deg; }
.gadget-camera { bottom: 4%; right: 3%; --tilt: 12deg; }
.gadget-float { transform: rotate(var(--tilt)); }
.architecture-section { position: relative; padding: 95px max(24px, calc((100vw - 1140px) / 2)) 90px; background: var(--raised); border-radius: 48px 48px 0 0; }
.architecture-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px 40px; align-items: end; }
.eyebrow { grid-column: 1 / -1; font-size: 13px; }
.architecture-heading h2 { font-weight: 350; font-size: clamp(40px, 4vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.architecture-heading > p:last-child { color: light-dark(#54645b, #b3c0b5); font-size: 16px; line-height: 1.6; padding-bottom: 4px; }
.architecture-figure { margin-top: 32px; }
.home-diagram { container-type: inline-size; }
.home-diagram > svg { width: 100%; height: auto; aspect-ratio: 1040 / 560; display: block; }
@container (max-width: 600px) { .home-diagram > svg { aspect-ratio: 360 / 680; } }
.architecture-figure figcaption { text-align: center; font-size: 14px; margin-top: 16px; }
.home-footer {
  --ink: #f3f1e9;
  --muted: #d3ddd2;
  --rule: #d4e1ce38;
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);
  --color-focus-ring: #f3f1e9;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 132px clamp(32px, 6.25vw, 96px) 28px;
  background: var(--raised);
  color: var(--ink);
}
.footer-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.footer-atmosphere::before {
  content: "";
  position: absolute;
  inset: 18px 14px 0;
  border-radius: 32px 32px 0 0;
  background: #203f37;
  filter: blur(6px);
}
.footer-atmosphere img { position: relative; width: 100%; height: 100%; object-fit: fill; }
.footer-invitation { text-align: center; margin: 0 auto 100px; }
.footer-invitation .eyebrow { color: var(--muted); font-size: 13px; }
.footer-invitation h2 { margin: 30px 0 28px; font-size: clamp(72px, 8.5vw, 132px); font-weight: 350; line-height: .94; letter-spacing: -.055em; }
.footer-invitation > p:last-child { font-size: 17px; line-height: 1.6; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 72px; max-width: 1140px; margin: auto; }
.footer-identity { align-self: start; justify-self: start; padding: 4px 14px 4px 10px; border: 1px solid #fafbf1ad; border-radius: 16px; background: #f3f1ec; color: #1c3432; --color-text-primary: #1c3432; --color-focus-ring: #385a46; }
.footer-label { color: var(--muted); font-size: 12px; margin-bottom: 16px; }
.footer-downloads, .footer-explore { display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; }
.footer-main small { color: var(--muted); font-size: 11px; margin-left: 7px; }
.footer-bottom { max-width: 1140px; margin: 64px auto 0; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--muted); font-size: 12px; }
.footer-bottom nav { display: flex; gap: 24px; }
/* The footer artwork stays dark in both appearances, so its control uses Astryx's dark media. */
.footer-bottom .appearance-control { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero { height: 165svh; min-height: 1250px; }
  .motion-ready .hero-stage { position: sticky; top: 0; }
  .hero-copy { animation: copy-enter 1.1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero h1 em::after { animation: underline-enter 1.4s .35s cubic-bezier(.16, 1, .3, 1) both; }
  .gadget-float { animation: gadget-enter 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  .gadget-pendant .gadget-float { animation-delay: .12s; }
  .gadget-speaker .gadget-float { animation-delay: .22s; }
  .gadget-camera .gadget-float { animation-delay: .3s; }
  @keyframes copy-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @keyframes underline-enter { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes gadget-enter { from { opacity: 0; transform: rotate(calc(var(--tilt) * .4)) scale(.8) translateY(30px); } to { opacity: 1; transform: rotate(var(--tilt)) scale(1) translateY(0); } }
}
@media (min-width: 1800px) {
  .hero-world { left: calc((100vw - 1800px) / 2); right: calc((100vw - 1800px) / 2); }
}
@media (max-width: 900px) {
  .home-header { gap: 16px; }
  .home-navigation { gap: 20px; }
  .hero-stage { height: max(760px, 100svh); }
  .hero h1 { font-size: clamp(42px, 5.8vw, 56px); }
  .gadget-robot { left: 1%; top: 13%; }
  .gadget-pendant { right: 5%; top: 12%; }
  .gadget-camera { right: 1%; bottom: 6%; }
  .gadget-speaker { left: 6%; bottom: 8%; }
  .architecture-section { padding: 70px 32px; }
  .architecture-heading { gap: 18px 32px; }
  .footer-main { gap: 40px; }
}
@media (max-width: 600px) {
  .home-header { padding: 18px 22px; grid-template-columns: 1fr auto; gap: 16px; }
  .home-header::before { inset: 10px; border-radius: 18px; }
  .home-brand { font-size: 24px; }
  .home-navigation { display: none; }
  .home-launch { font-size: 12px; white-space: nowrap; gap: 18px; }
  .hero-stage { height: max(690px, 100svh); }
  .hero-copy { padding: 0 22px; top: 51%; }
  .hero h1 { font-size: clamp(35px, 7.5vw, 45px); line-height: 1.1; letter-spacing: -.045em; max-width: 480px; margin-inline: auto; }
  .hero-line { display: inline; }
  .hero-subtitle { font-size: 14px; margin-top: 22px; }
  .hero-downloads { gap: 0 24px; margin-top: 4px; font-size: 12px; }
  .gadget { width: 155px; }
  .gadget-robot { left: -4px; top: 14%; }
  .gadget-pendant { right: 16px; top: 12%; width: 128px; }
  .gadget-speaker { left: 20px; bottom: 10%; width: 128px; }
  .gadget-camera { right: 0; bottom: 8%; }
  .hero-scroll { bottom: 24px; font-size: 11px; }
  .architecture-section { padding: 56px 22px 48px; border-radius: 28px 28px 0 0; }
  .architecture-heading { display: block; }
  .architecture-heading h2 { margin-top: 24px; font-size: 42px; }
  .architecture-heading > p:last-child { margin-top: 24px; font-size: 14px; }
  .architecture-figure { margin-top: 24px; }
  .home-diagram > svg { aspect-ratio: 360 / 680; }
  .architecture-figure figcaption { margin-top: 0; }
  .home-footer { padding: 96px 28px 24px; }
  .footer-atmosphere img { width: 180%; max-width: none; margin-left: -40%; }
  .footer-invitation { margin-bottom: 64px; }
  .footer-invitation h2 { font-size: clamp(64px, 15vw, 90px); margin: 26px 0; }
  .footer-invitation > p:last-child { max-width: 220px; margin: auto; font-size: 15px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-label { margin-bottom: 10px; }
  .footer-bottom { margin-top: 36px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-bottom nav { flex-wrap: wrap; gap: 0 24px; }
  .footer-bottom .appearance-control { margin: 8px 0; }
  .motion-ready .hero { min-height: 940px; height: 135svh; }
}
@media (prefers-reduced-transparency: reduce) {
  .home-header::before { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .footer-atmosphere { display: none; }
  .home-footer { background: Canvas; color: CanvasText; --muted: CanvasText; --rule: CanvasText; }
  .footer-identity { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .home-header::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .motion-ready .hero { height: auto; min-height: 0; }
  .motion-ready .hero-stage { position: relative; }
}
/* Language switcher: a native disclosure, so the static page opens it without a script. */
.home-language { position: relative; }
.home-language summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); letter-spacing: .02em; }
.home-language summary::-webkit-details-marker { display: none; }
.home-language summary::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.home-language[open] summary::after { transform: translateY(1px) rotate(225deg); }
.home-language summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: 6px; }
.home-language-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: flex; flex-direction: column; min-width: 168px; padding: 8px 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 32px light-dark(#283c2d14, #0000004d); }
.home-language-menu a { padding: 0 12px; border-radius: 8px; white-space: nowrap; }
.home-language-menu a:hover { background: var(--hover); }
.home-language-menu a[aria-current="page"] { color: var(--color-text-accent); font-weight: 500; }
/* CJK headlines keep normal tracking; DM Sans covers Latin only, so these fall back to system fonts. */
.home:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, .home-brand ~ p) { letter-spacing: 0; }
.home:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 { font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.2; }
/* Developers page: the homepage header and footer around a reading column. */
.partners { max-width: 1040px; margin: 0 auto; padding: 168px 24px 120px; }
.partners .eyebrow { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.partners h1 { margin-top: 18px; font-weight: 350; font-size: clamp(44px, 5vw, 76px); line-height: 1.08; letter-spacing: -.05em; }
.partners h2 { font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; }
.partners-lead { max-width: 640px; margin-top: 28px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.partners section + section { margin-top: 96px; }
.partners-steps ol { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.partners-steps li { padding: 28px 24px 30px; border: 1px solid var(--rule); border-radius: 20px; background: var(--card); }
.partners-step-number { font-size: 13px; color: var(--color-text-accent); letter-spacing: .06em; }
.partners-steps h3 { margin: 14px 0 10px; font-weight: 500; font-size: 18px; }
.partners-steps p, .partners-access p, .partners-contact p { margin: 0; line-height: 1.65; color: var(--muted); }
.partners-access p, .partners-contact > p { max-width: 640px; margin-top: 16px; }
.partners-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.partners-contact { padding: 48px clamp(24px, 4vw, 56px); border-radius: 28px; background: var(--tint); }
.partners-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.partners-actions .partners-primary { color: var(--on-primary); }
.partners-note { margin-top: 16px; font-size: 13px; }
.home-navigation a[aria-current="page"] { color: var(--color-text-accent); }
.home:is(:lang(zh), :lang(ja), :lang(ko)) .partners h1 { letter-spacing: 0; font-weight: 400; line-height: 1.2; }
@media (max-width: 760px) {
  .partners { padding: 128px 16px 88px; }
  .partners-steps ol { grid-template-columns: 1fr; }
  .partners section + section { margin-top: 64px; }
}
/* The source link sits in the hero, between the subtitle and the downloads, as it did before. */
.hero-source { margin-top: 14px; font-size: 14px; color: var(--color-text-accent); }
.hero-source a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* On phones a CJK headline line must fit on one line: up to about nine characters at 8.2vw. */
@media (max-width: 600px) {
  .home:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 { font-size: 8.2vw; }
  .home:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 { max-width: none; }
  .home:is(:lang(zh), :lang(ja), :lang(ko)) .hero-line { display: block; }
  .home:lang(ja) .hero h1 { font-size: 6.2vw; }
}
/* Dark: the concept renders sit on light studio paper, so they drop the multiply blend and
   show as dimmed objects in soft pools of light that fade into the dark canvas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gadget { mix-blend-mode: normal; }
  :root:not([data-theme="light"]) .gadget img { mask-image: radial-gradient(closest-side, #000 45%, transparent 92%); filter: brightness(.76) saturate(.9); }
}
:root[data-theme="dark"] .gadget { mix-blend-mode: normal; }
:root[data-theme="dark"] .gadget img { mask-image: radial-gradient(closest-side, #000 45%, transparent 92%); filter: brightness(.76) saturate(.9); }