:root {
  --brand-gradient: linear-gradient(120deg, #14ffff 0%, #51a6ff 40%, #6665ff 60%, #8954ff 70%, #e24cff 100%);
  --brand-text-gradient: var(--brand-gradient);
  --sequence-gradient: linear-gradient(90deg, #14ffff 0%, #51a6ff 40%, #6665ff 60%, #8954ff 70%, #e24cff 100%);
  --brand-panel: linear-gradient(125deg, #b4f7fb 0%, #c0e0ff 39%, #cfcbff 72%, #edc6fa 100%);
  --brand-wash: linear-gradient(110deg, #e3f9fc 0%, #eaf0ff 52%, #f0e8fc 100%);
  --brand-border: #dae3f2;
  --panel-radius: 10px;
  --control-radius: 6px;
  --section-space: clamp(56px, 6vw, 80px);
  --panel-space: clamp(24px, 3.4vw, 48px);
  --grid-gap: 32px;
  --label: #4a5c84;
  --surface: #fff;
  --surface-soft: #f0f3f7;
  --surface-inset: #f9fbfe;
  --header-background: #f9fbfef5;
  --secondary: #63738c;
  --preview-ink: #172644;
  --preview-label: #3a5580;
  --preview-control: #ffffff70;
  --preview-control-hover: #ffffffb0;
  --preview-border: #ffffff90;
  color-scheme: light;
}

:root[data-theme=dark] {
  --ink: #edf0f6;
  --muted: #b0bbcd;
  --blue: #9bb6ff;
  --blue-dark: #b7cbff;
  --line: #343e4d;
  --page: #11151b;
  --white: #1c232d;
  --brand-border: #343e4d;
  --brand-panel: linear-gradient(125deg, #193f4e 0%, #283958 44%, #403457 75%, #503650 100%);
  --brand-wash: linear-gradient(110deg, #20373e 0%, #263246 52%, #393047 100%);
  --label: #b5c3da;
  --surface: #1c232d;
  --surface-soft: #171d25;
  --surface-inset: #111820;
  --header-background: #11151bf5;
  --secondary: #a1aec1;
  --preview-ink: #edf0f6;
  --preview-label: #c3d2e9;
  --preview-control: #14213480;
  --preview-control-hover: #142134c0;
  --preview-border: #6e809b80;
  color-scheme: dark;
}

body { background: var(--page); color: var(--ink); }
.site-header { background: var(--header-background); border-color: var(--line); }
.header-inner { gap: 20px; }
nav { gap: 22px; margin-left: auto; }
.header-download { gap: 0; }
.download-product { white-space: pre; }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); padding: 0; }
.theme-toggle[hidden], .theme-sun { display: none; }
.theme-toggle:hover { background: var(--surface-soft); border-color: var(--secondary); }
[data-theme=dark] .theme-moon { display: none; }
[data-theme=dark] .theme-sun { display: block; }
.hero { min-height: 0; padding-block: 64px 72px; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; }
h2, .community-copy h2, .download-copy h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
h3 { font-weight: 650; letter-spacing: -.025em; }
.eyebrow, .visual-topline, .result-label { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.eyebrow { color: var(--label); }
.hero-visual { border-radius: var(--panel-radius); color: var(--preview-ink); }
.hero-visual::before { border-radius: calc(var(--panel-radius) - 1px); border-color: var(--preview-border); }
.visual-topline { color: var(--preview-label); }
.platform-strip, .skip-link { background: var(--surface); }
.platform-inner { min-height: 84px; }
.platform-inner .eyebrow, .feature-top > span, .product-tour figcaption, .hero-visual figcaption,
.compatibility-result .compatibility-caveat, .download-origin, .all-releases,
.stats-freshness span, .footer-top > p, .footer-top > div, .footer-bottom, .disclaimers { color: var(--secondary); }
.compatibility-picker, .download-card, .dialog-close, .screenshot-button span { background: var(--surface); }
.compatibility-picker select { background: var(--surface-inset); border-color: var(--line); }
.compatibility-result .compatibility-caveat, .all-releases { border-color: var(--line); }
.tuning-note { color: var(--muted); }
.tuning-note strong { color: var(--ink); }
.tuning-note svg, .faq-list summary span { color: var(--secondary); }
.text-link { text-decoration-color: var(--secondary); }
.community-brand img { transform: none; box-shadow: none; border-radius: 16px; }
.community-brand p { color: var(--secondary); }
dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme=dark] .framework-logo { filter: invert(1); }
[data-theme=dark] .ayaneo-logo { filter: brightness(1.85); }

.section, .compatibility-layout, .community-layout { padding-block: var(--section-space); }
.section-intro, .getting-started .section-intro { margin-bottom: 40px; }
.section-intro .eyebrow, .compatibility-layout .eyebrow, .download-copy .eyebrow,
.faq-section .eyebrow, .community-copy .eyebrow { margin-bottom: 16px; color: var(--label); }
.feature-grid, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.feature-grid, .steps { grid-template-rows: auto auto 1fr; }
.feature, .steps li { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
.feature h3, .steps h3 { font-size: 1.1875rem; line-height: 1.45; }
.feature-top { margin-bottom: 24px; }
.feature p, .steps p { margin-top: 12px; max-width: none; }
.product-tour, .download-panel { padding: var(--panel-space); gap: var(--panel-space); }
.compatibility-picker, .download-card { padding: 32px; border: 1px solid var(--brand-border); }
.hero-copy, .tour-copy, .download-copy, .community-copy { min-width: 0; }
.text-link { white-space: normal; }
.hero-actions { flex-wrap: wrap; row-gap: 18px; }
.header-download { white-space: nowrap; flex-shrink: 0; }
.section-body { max-width: 440px; }
.download-copy { padding-top: 0; }
.download-copy > p:not(.eyebrow), .section-body, .community-copy > p:not(.eyebrow) { margin-top: 20px; }
.tuning-note { background: var(--surface-soft); border-color: var(--brand-border); border-radius: var(--control-radius); }
.compatibility-result .result-label { color: var(--label); }

.button, .button:hover {
  background: var(--brand-gradient) center / 100% 100% no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  color: #fff;
  text-shadow: 0 1px 2px #17264440;
  border-radius: var(--control-radius);
}
.button { box-shadow: none; transition: box-shadow .2s, transform .2s; }
.button:hover { box-shadow: 0 4px 12px #6050d526; transform: translateY(-1px); }

h1 span, .step-number {
  background: var(--brand-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.release-link span {
  background: var(--surface-soft);
  border-color: var(--brand-border);
  color: var(--label);
}
.hero-visual { background: var(--brand-panel); }
.product-tour, .compatibility-section, .community-section { background: var(--surface-soft); border-color: var(--brand-border); }
.product-tour, .download-panel, .compatibility-picker, .download-card { border-radius: var(--panel-radius); }
.download-panel { color: var(--ink); background: var(--surface-soft); border: 1px solid var(--brand-border); }
.download-card, .compatibility-picker { box-shadow: none; }
.download-copy > p:not(.eyebrow), .release-details,
.release-details span:last-child { color: var(--muted); }
.download-copy .text-link { color: var(--ink); text-decoration-color: var(--secondary); }
.release-details span:first-child { color: var(--ink); background: var(--surface); border-color: var(--line); }
.download-file span { color: inherit; }
.feature, .steps li { --sequence-position: 0%; }
.feature:nth-child(2), .steps li:nth-child(2) { --sequence-position: 50%; }
.feature:nth-child(3), .steps li:nth-child(3) { --sequence-position: 100%; }
.step-number {
  width: max-content;
  background-image: var(--sequence-gradient);
  background-size: 300% 100%;
  background-position: var(--sequence-position) center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.feature { position: relative; border-top-color: transparent; }
.feature::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sequence-gradient) var(--sequence-position) center / 300% 100% no-repeat;
}
.features .section-intro { display: block; }
.features .section-intro > p { max-width: 640px; margin-top: 18px; font-size: 1.0625rem; line-height: 1.7; }

.supporters-section { border-top: 1px solid var(--brand-border); }
.supporters-intro { display: block; }
.supporters-intro > p { max-width: 640px; margin-top: 18px; padding-bottom: 0; font-size: 1rem; line-height: 1.75; }
.supporter-logos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 0 0;
  list-style: none;
}
.supporter-logos::after { content: ''; position: absolute; top: 8px; bottom: 0; left: 50%; border-left: 1px solid var(--brand-border); pointer-events: none; }
.supporter-link { display: flex; align-items: center; justify-content: center; min-height: 116px; padding: 24px 40px; border-radius: var(--control-radius); }
.supporter-link:hover { background: var(--brand-wash); }
.supporter-link img { height: auto; object-fit: contain; }
.framework-logo { width: 300px; }
.ayaneo-logo { width: 160px; }


.tour-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 8px; }
.package-picker { border: 0; gap: 8px; }
.tour-tabs button, .package-picker button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--muted);
  padding: 10px 12px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color .2s, background-color .2s;
}
.tour-tabs button { text-align: left; }
.tour-tabs button:last-child { grid-column: 1 / -1; }
.tour-tabs button:hover, .package-picker button:hover { border-color: var(--secondary); }
.tour-tabs button[aria-selected=true], .package-picker button[aria-selected=true] {
  background: var(--brand-wash);
  border-color: var(--secondary);
  color: var(--ink);
  box-shadow: none;
}
.package-picker button[aria-selected=true]:after { content: none; }
.package-picker button span { background: var(--surface-soft); color: var(--label); }
.compatibility-picker select, .dialog-close { border-radius: var(--control-radius); }
.tour-copy h3, .tour-copy #tour-description { min-height: 0; }
.tour-copy > p { max-width: none; }
.tour-copy .tour-note { line-height: 1.65; }


.feature p, .steps p, .tour-copy > p:not(.tour-note),
.compatibility-result p:not(.compatibility-caveat), .community-copy > p:not(.eyebrow),
.faq-list details p, #package-description, .section-body,
.download-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; }
.text-link, .compatibility-layout .text-link, .compatibility-picker .text-link,
.community-actions .text-link, .hero-actions .text-link { font-size: .875rem; }

.project-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  margin-top: 28px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
  max-width: 460px;
}
.project-stats > a { display: flex; flex-direction: column; gap: 4px; }
.project-stats > a:hover strong { color: var(--blue); }
.project-stats strong {
  font-family: var(--heading);
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.project-stats span { font-size: .75rem; color: var(--muted); }
.stats-freshness { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 18px; }
.stats-freshness span { font-size: .75rem; line-height: 1.6; color: var(--secondary); }


.product-window {
  position: relative;
  box-shadow: 0 14px 28px #101a3030;
  border-color: var(--preview-border);
  transform: rotate(var(--preview-angle, -3deg));
  transition: transform 750ms cubic-bezier(.22,.61,.36,1);
}
.product-window .hero-slide { opacity: 0; transition: opacity 650ms ease; }
.product-window .hero-slide:last-child { position: absolute; inset: 0; }
.product-window .hero-slide.is-active { opacity: 1; }
#hero-position { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-controls { display: flex; gap: 8px; align-items: center; }
.hero-controls[hidden] { display: none; }
.hero-controls button {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 11px;
  color: var(--preview-ink);
  background: var(--preview-control);
  border: 1px solid var(--preview-border);
  border-radius: var(--control-radius);
}
.hero-controls button:hover, .hero-controls button[aria-pressed=true] { background: var(--preview-control-hover); }

.pattern-surface { position: relative; isolation: isolate; }
.pattern-field {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: calc(var(--panel-radius) - 2px);
  pointer-events: none;
  z-index: -1;
  opacity: .56;
}
.product-tour .pattern-field, .download-panel .pattern-field { mask-image: linear-gradient(155deg, transparent 15%, #000 75%); }
[data-theme=dark] .pattern-field { opacity: .5; }

.button, .button:hover, h1 span, .hero-visual,
.tour-tabs button[aria-selected=true], .package-picker button[aria-selected=true], .supporter-link:hover {
  background-size: 150% 100%;
  background-repeat: no-repeat;
  animation: gradient-drift 24s ease-in-out infinite;
}
.feature, .steps li { --sequence-peak: 8%; }
.feature:nth-child(2), .steps li:nth-child(2) { --sequence-peak: 58%; }
.feature:nth-child(3), .steps li:nth-child(3) { --sequence-peak: 92%; }
.step-number, .feature::before { animation: sequence-drift 24s ease-in-out infinite; }
.feature-top stop { animation: icon-drift 24s ease-in-out infinite; }
.feature-top stop:nth-child(1) { --colour-shift: #45e5ff; }
.feature-top stop:nth-child(2) { --colour-shift: #5a91ff; }
.feature-top stop:nth-child(3) { --colour-shift: #785bff; }
.feature-top stop:nth-child(4) { --colour-shift: #ac50ff; }
.feature-top stop:nth-child(5) { --colour-shift: #c65bff; }
:root[data-motion=paused] *, :root[data-motion=paused] *::before,
:root.motion-hidden *, :root.motion-hidden *::before { animation-play-state: paused; }
.screenshot-button .tour-outgoing { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.screenshot-button span { z-index: 1; }
.faq-list summary span { transition: transform .2s ease; }
.faq-list details[data-expanding=false] summary span { transform: rotate(0deg); }
.theme-changing, .theme-changing * { transition: color .22s ease, background-color .22s ease, border-color .22s ease; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
::view-transition { pointer-events: none; }

@keyframes gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes sequence-drift {
  0%, 100% { background-position: var(--sequence-position) center; }
  50% { background-position: var(--sequence-peak) center; }
}
@keyframes icon-drift {
  50% { stop-color: var(--colour-shift); }
}

@media (max-width: 1100px) {
  .header-inner { gap: 14px; }
  nav { gap: 18px; }
  .visual-bottom { align-items: flex-start; flex-direction: column; gap: 16px; }
  .compatibility-picker, .download-card { padding: 24px; }
}
@media (max-width: 760px) {
  .hero { padding-block: 40px 64px; }
  h1 { font-size: clamp(2.5rem, 8.5vw, 3.75rem); }
  nav { background: var(--surface); margin-left: 0; }
  .header-inner { gap: 10px; }
  .theme-toggle { width: 34px; height: 34px; }
  .feature-grid, .steps { grid-template-columns: 1fr; grid-template-rows: none; }
  .feature { display: block; grid-row: auto; }
  .steps li { grid-template-rows: auto auto; grid-row: auto; }
  .feature-top { margin-bottom: 16px; }
  .section-intro, .getting-started .section-intro { margin-bottom: 32px; }
  .features .section-intro > p { font-size: 1rem; }
  .product-tour, .download-panel { gap: 32px; }
  .menu-toggle { width: 32px; height: 40px; align-items: center; flex-shrink: 0; }
  .tour-tabs { max-width: none; }
  .tour-tabs button { padding: 10px 8px; }
  .tour-copy h3, .tour-copy #tour-description { min-height: 0; }
  .project-stats { gap: 12px 20px; margin-top: 25px; }
  .project-stats strong { font-size: 1.5rem; }
}
@media (max-width: 560px) {
  .site-header .brand-caption { display: none; }
  .header-download .download-product { display: none; }
  .header-inner { gap: 10px; }
  .supporter-logos { gap: 24px; }
  .supporter-link { min-height: 96px; padding: 18px 6px; }
  .ayaneo-logo { width: 100px; }
}
@media (max-width: 390px) {
  .header-inner { gap: 6px; }
  .site-header .brand { font-size: 1.375rem; gap: 8px; }
  .site-header .brand img { width: 32px; height: 32px; }
  .theme-toggle, .menu-toggle { width: 32px; }
  .project-stats { column-gap: 14px; }
  .project-stats strong { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .product-window { transform: none; }
  .button, .button:hover, h1 span, .hero-visual,
  .tour-tabs button[aria-selected=true], .package-picker button[aria-selected=true], .supporter-link:hover { background-size: 100% 100%; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (forced-colors: active) {
  .pattern-field { display: none; }
  h1 span, .step-number { background: none; color: CanvasText; }
  .feature-top svg path { stroke: CanvasText; }
  .feature { border-top-color: CanvasText; }
  .feature::before { display: none; }
  .tour-tabs button[aria-selected=true], .package-picker button[aria-selected=true] { border-color: Highlight; }
}