/* Copyright Ayers Electronics Inc. All rights reserved. */
/* The frame and controls shared by every product page. Colors come from its skin. */
.product-site {
  --reading-ink: color-mix(in srgb, var(--ink) 86%, var(--surface));
  --quiet-ink: color-mix(in srgb, var(--ink) 70%, var(--surface));
  --hairline: color-mix(in srgb, var(--ink) 21%, var(--surface));
  --control-line: color-mix(in srgb, var(--ink) 50%, var(--surface));
  --page-title-size: clamp(2.625rem, 4.6vw, 4rem);
  margin: 0; color: var(--ink); background: var(--surface);
  font: 1.125rem/1.65 var(--face-text, system-ui, sans-serif);
  color-scheme: light dark; min-width: 0;
}
.product-site *, .product-site *::before, .product-site *::after { box-sizing: border-box; }
.product-site a { color: inherit; text-underline-offset: .24em; }
.product-site a:hover { text-decoration-thickness: 2px; }
.product-site button { font: inherit; }
.product-site :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.product-site ::selection { background: var(--accent); color: var(--surface); }
.product-site h1, .product-site h2, .product-site h3 { font-weight: 500; text-wrap: balance; }
.product-site p { margin: 0 0 1em; }
.product-site [hidden] { display: none !important; }
.product-skip { position: absolute; top: -120px; left: 24px; z-index: 20; padding: 12px 20px; background: var(--surface); }
.product-skip:focus { top: 12px; }
.product-world { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 2% 54%, color-mix(in srgb, var(--accent) 24%, var(--surface)), transparent 58%), radial-gradient(ellipse at 100% 28%, color-mix(in srgb, var(--accent) 19%, var(--surface)), transparent 60%), var(--surface); }
.product-world canvas { display: block; width: 100%; height: 100%; opacity: .34; }
.page-overview .product-world canvas { opacity: 1; }
.product-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface), transparent 25%, transparent 65%, var(--surface)); }
.product-frame { isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; }
.product-header { flex: none; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.product-header-inner { width: min(100%, 1280px); margin: auto; padding: 0 40px; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.product-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-size: 1.25rem; font-weight: 500; line-height: 1.2; text-decoration: none; }
.product-brand img { width: 28px; height: 34px; object-fit: contain; }
.product-nav { display: flex; align-items: center; gap: 36px; }
.product-nav a { font-size: 1rem; min-height: 48px; display: flex; align-items: center; text-decoration: none; color: var(--reading-ink); position: relative; }
.product-nav a:hover, .product-nav a[aria-current] { color: var(--ink); }
.product-nav a[aria-current]::after { content: ""; height: 2px; background: var(--accent); position: absolute; inset: auto 0 0; }
.product-main { flex: 1; width: min(100%, 1280px); margin: 0 auto; padding: 58px 40px 72px; }
.page-manual .product-main, .page-support .product-main, .page-downloads .product-main { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.page-title { margin: 0 0 14px; font-size: var(--page-title-size); line-height: 1.08; letter-spacing: -.035em; }
.page-intro { max-width: 64ch; margin-bottom: 44px; }
.page-intro > p { font-size: 1.25rem; color: var(--reading-ink); line-height: 1.6; }
.product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.product-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 10px 23px; border: 1px solid var(--control-line); border-radius: 7px; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--ink); background: var(--surface-panel); text-decoration: none; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.product-button:hover { border-color: var(--accent); background: var(--accent-wash); }
.product-button.primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.product-button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.inline-link { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-size: 1rem; }
.platform-icon { display: inline-block; width: 26px; height: 26px; flex: 0 0 26px; background: currentColor; mask: var(--platform-mark) center / contain no-repeat; }
.icon-windows { --platform-mark: url("icons/windows.svg"); }
.icon-apple { --platform-mark: url("icons/apple.svg"); }
.icon-linux { --platform-mark: url("icons/linux.svg"); }
.icon-android { --platform-mark: url("icons/android.svg"); }
.icon-docker { --platform-mark: url("icons/docker.svg"); }
.icon-globe { --platform-mark: url("icons/globe.svg"); }
.icon-npm { --platform-mark: url("icons/npm.svg"); }
.icon-tv { --platform-mark: url("icons/tv.svg"); }
.icon-amazon { --platform-mark: url("icons/amazon.svg"); }
.icon-xbox { --platform-mark: url("icons/xbox.svg"); }
.icon-react { --platform-mark: url("icons/react.svg"); }
.icon-vuejs { --platform-mark: url("icons/vuejs.svg"); }
.icon-html5 { --platform-mark: url("icons/html5.svg"); }
.icon-cubes { --platform-mark: url("icons/cubes.svg"); }
.action-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; font-size: 0; line-height: 0; background: currentColor; mask: var(--action-mark) center / contain no-repeat; }
.arrow-down { --action-mark: url("icons/arrow-down.svg"); }
.arrow-right { --action-mark: url("icons/arrow-right.svg"); }
.arrow-up-right { --action-mark: url("icons/arrow-up-right.svg"); }
.product-footer { background: color-mix(in srgb, var(--surface) 92%, black); margin-top: auto; }
.product-footer-inner { width: min(100%, 1280px); padding: 24px 40px; margin: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px 30px; }
.product-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; }
.product-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--reading-ink); text-decoration: none; }
.product-footer a:hover { color: var(--ink); text-decoration: underline; }
.product-footer .company-link { color: var(--ink); font-weight: 500; font-size: 1rem; line-height: 1.25; gap: 8px; min-height: 44px; }
.company-link .action-icon { width: 16px; height: 16px; flex-basis: 16px; }
.product-footer-credit p { font-size: .75rem; line-height: 1.5; color: var(--quiet-ink); margin: 0; }
.support-layout { display: grid; grid-template-columns: 1fr 1.8fr; gap: 80px; }
.support-layout h2 { margin: 0 0 16px; font-size: 1.75rem; line-height: 1.3; }
.support-layout p { color: var(--reading-ink); }
.support-layout .support-privacy { font-size: 1rem; margin-top: 20px; }
.support-routes { list-style: none; padding: 0; margin: 0; }
.support-routes li { border-top: 1px solid var(--hairline); }
.support-routes a { display: grid; grid-template-columns: 1fr 24px; gap: 12px; padding: 22px 0; text-decoration: none; }
.support-routes b { font-weight: 500; font-size: 1.375rem; display: block; }
.support-routes small { font-size: 1rem; color: var(--reading-ink); display: block; margin-top: 5px; }
.support-routes a:hover b { text-decoration: underline; text-underline-offset: .2em; }
@view-transition { navigation: auto; }
.product-header { view-transition-name: product-header; }
.product-footer { view-transition-name: product-footer; }
::view-transition-group(*) { animation-duration: 180ms; }
@media (max-width: 900px) {
  .product-header-inner { padding-inline: 28px; }
  .product-main { padding: 44px 28px 56px; }
  .product-footer-inner { padding-inline: 28px; }
  .support-layout { gap: 40px; grid-template-columns: 1fr 1.65fr; }
}
@media (max-width: 600px) {
  .product-header-inner { padding: 10px 20px 0; min-height: auto; flex-wrap: wrap; gap: 0; }
  .product-brand { min-height: 44px; font-size: 1.125rem; }
  .product-brand img { height: 28px; width: 24px; }
  .product-nav { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .product-nav a { min-height: 48px; font-size: .9375rem; }
  .product-main { padding: 34px 20px 44px; }
  .page-intro { margin-bottom: 32px; }
  .page-intro > p { font-size: 1.125rem; }
  .product-footer-inner { padding: 22px 20px; grid-template-columns: 1fr; gap: 16px 12px; }
  .product-footer-credit { grid-column: 1; }
  .product-footer nav { grid-row: 2; grid-column: 1 / -1; gap: 0 26px; }
  .support-layout { display: block; }
  .support-routes { margin-top: 32px; }
  .page-overview .product-world::after { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent) 20%, color-mix(in srgb, var(--surface) 55%, transparent) 85%, var(--surface)); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .product-button { transition: none; }
  ::view-transition-group(*) { animation: none; }
}
@media (forced-colors: active) {
  .product-world { display: none; }
  .product-site { --ink: CanvasText; --reading-ink: CanvasText; --quiet-ink: CanvasText; --surface: Canvas; --surface-panel: Canvas; --accent: LinkText; --hairline: CanvasText; --control-line: ButtonText; }
  .product-button.primary { color: ButtonText; border-color: ButtonText; }
  .platform-icon { background: CanvasText; forced-color-adjust: none; }
}