:root {
  --paper: #f2efe7;
  --paper-deep: #e6e0d4;
  --surface: #faf8f2;
  --ink: #20231f;
  --moss: #68785a;
  --moss-dark: #3e4c36;
  --clay: #c7654f;
  --mist: #8ca9aa;
  --line: rgba(32, 35, 31, 0.16);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 1.1em; height: 1.1em; stroke-width: 1.8; }

.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; background: var(--ink); color: white; padding: 10px 14px; }
.skip-link:focus { top: 12px; }
.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  height: 72px; padding: 0 clamp(20px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: background-color 220ms, border-color 220ms;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: rgba(242, 239, 231, 0.94); border-color: var(--line); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; font-weight: 700; }
.brand-mark, .footer-mark {
  display: grid; place-items: center; width: 34px; aspect-ratio: 1;
  background: var(--moss-dark); border-radius: 7px;
}
.brand-mark span, .footer-mark span { width: 13px; aspect-ratio: 1; border: 3px solid var(--paper); }
nav { display: flex; gap: clamp(22px, 4vw, 48px); }
nav a { position: relative; text-decoration: none; font-size: 14px; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: currentColor; transition: right 180ms; }
nav a:hover::after { right: 0; }
.header-download { justify-self: end; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 650; }

.hero { position: relative; min-height: min(900px, 100svh); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 0; background: #e9e5dc; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(242, 239, 231, 0.12); }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center top; transform: scale(1.015); filter: saturate(.92); }
.hero-copy {
  position: relative; z-index: 2; min-height: min(900px, 100svh); width: min(50%, 710px);
  padding: clamp(126px, 16vh, 176px) clamp(26px, 6vw, 96px) 100px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(242, 239, 231, 0.94); border-right: 1px solid rgba(32,35,31,.12);
}
.eyebrow, .section-kicker, .platform, .version { font-family: var(--mono); text-transform: uppercase; font-size: 12px; letter-spacing: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 25px; }
.eyebrow span { width: 28px; height: 1px; background: var(--ink); }
h1 { max-width: 620px; margin: 0; font-size: clamp(64px, 7.4vw, 112px); line-height: .92; font-weight: 650; }
.hero-summary { max-width: 510px; margin: 31px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 34px; }
.button {
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 650; text-decoration: none; transition: transform 160ms, background-color 160ms, color 160ms;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--paper); background: var(--moss-dark); }
.button-primary:hover { background: #2f3b29; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-underline-offset: 5px; }
.hero-note { margin: 22px 0 0; color: rgba(32,35,31,.64); font-size: 12px; }
.hero-caption { position: absolute; z-index: 2; right: 35px; bottom: 28px; display: flex; gap: 25px; font-family: var(--mono); font-size: 11px; color: rgba(32,35,31,.68); }

.intro-band, .release-section, .questions, .feedback { padding: 105px clamp(24px, 7vw, 108px); }
.section-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }
.section-kicker span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.intro-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 80px; align-items: end; margin-bottom: 68px; }
.intro-heading h2, .download-lead h2, .release-sticky h2, .questions h2, .feedback h2 { margin: 0; font-size: clamp(46px, 6vw, 82px); line-height: 1.03; font-weight: 620; }
.intro-heading p, .download-lead > p { margin: 0 0 5px; font-size: 17px; line-height: 1.75; color: rgba(32,35,31,.72); }
.feature-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.feature {
  min-width: 0; min-height: 520px; padding: 22px; border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--surface);
}
.feature-wide { grid-row: span 2; min-height: 800px; }
.feature-art { position: relative; flex: 1; min-height: 420px; overflow: hidden; background: var(--paper-deep); }
.search-art { display: grid; place-items: center; isolation: isolate; }
.search-pill { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; width: min(80%, 360px); padding: 16px 18px; background: var(--surface); box-shadow: 0 18px 50px rgba(32,35,31,.11); font-size: 14px; }
.source { position: absolute; z-index: 2; padding: 8px 11px; border: 1px solid rgba(32,35,31,.15); background: rgba(250,248,242,.82); font-family: var(--mono); font-size: 10px; }
.source-one { top: 21%; left: 12%; }.source-two { right: 10%; top: 29%; }.source-three { left: 24%; bottom: 18%; }
.pulse { position: absolute; border-radius: 50%; mix-blend-mode: multiply; animation: breathe 7s ease-in-out infinite alternate; }
.pulse-one { width: 310px; aspect-ratio: 1; left: -45px; bottom: -45px; background: rgba(140,169,170,.58); }
.pulse-two { width: 280px; aspect-ratio: 1; right: -50px; top: -20px; background: rgba(199,101,79,.42); animation-delay: -2s; }
.feature-copy { padding: 26px 8px 6px; }
.feature-copy > svg { color: var(--moss-dark); font-size: 24px; margin-bottom: 22px; }
.feature-copy h3 { margin: 0 0 11px; font-size: clamp(23px, 2.2vw, 32px); line-height: 1.15; }
.feature-copy p { max-width: 570px; margin: 0; line-height: 1.65; color: rgba(32,35,31,.67); }
.organic-cover { position: relative; min-height: 260px; overflow: hidden; background: #49624b; }
.organic-cover > span { position: absolute; border-radius: 50%; opacity: .72; animation: drift 8s ease-in-out infinite alternate; }
.organic-cover > span:nth-child(1) { width: 62%; aspect-ratio: 1; top: -10%; left: 28%; background: #d9b26f; }
.organic-cover > span:nth-child(2) { width: 55%; aspect-ratio: 1; bottom: -24%; left: -8%; background: #f2e9d8; }
.organic-cover > span:nth-child(3) { width: 42%; aspect-ratio: 1; right: -7%; bottom: 2%; background: #e6e0d4; animation-delay: -3s; }
.organic-cover > span:nth-child(4) { width: 25%; aspect-ratio: 1; left: 25%; top: 10%; background: #c7654f; animation-delay: -1s; }
.play-orbit { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 56px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 0; border-radius: 50%; color: var(--paper); background: rgba(32,35,31,.82); display: grid; place-items: center; }
.feature-dark { min-height: 400px; color: var(--paper); background: var(--ink); }
.feature-dark .feature-copy > svg { color: #a7c58f; }
.feature-dark .feature-copy p { color: rgba(242,239,231,.68); }
.code-lines { display: grid; align-content: center; min-height: 180px; padding: 24px; border: 1px solid rgba(242,239,231,.17); font-family: var(--mono); color: #a7c58f; }
.code-lines span { display: block; padding: 10px 0; border-bottom: 1px solid rgba(242,239,231,.12); }
.code-lines span:nth-child(2) { padding-left: 13%; color: var(--paper); }.code-lines span:nth-child(3) { padding-left: 27%; border: 0; color: var(--mist); }

.downloads { padding: 105px clamp(24px, 7vw, 108px); color: var(--paper); background: var(--moss-dark); }
.download-lead { display: grid; grid-template-columns: 1fr 2fr; gap: 18px 70px; align-items: end; margin-bottom: 55px; }
.download-lead .section-kicker { grid-row: span 2; align-self: start; margin: 0; }
.download-lead > p { color: rgba(242,239,231,.7); }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.download-card { position: relative; min-height: 390px; padding: 34px; border: 1px solid rgba(242,239,231,.23); border-radius: 8px; display: grid; grid-template-rows: auto 1fr auto auto; background: rgba(242,239,231,.05); }
.download-card.recommended { border-color: rgba(242,239,231,.55); background: var(--paper); color: var(--ink); }
.recommend-label { position: absolute; right: 18px; top: 18px; padding: 6px 9px; color: var(--paper); background: var(--moss-dark); font-size: 11px; }
.platform-icon { width: 54px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--paper); background: var(--moss); font-size: 25px; }
.platform-icon.clay { background: var(--clay); }
.download-card .platform { margin: 30px 0 8px; color: var(--moss); }
.download-card:not(.recommended) .platform { color: #a7c58f; }
.download-card h3 { margin: 0 0 8px; font-size: 32px; }
.meta, .file-meta { margin: 0; color: currentColor; opacity: .66; }
.download-button { align-self: end; width: 100%; margin-top: 28px; }
.download-card.recommended .download-button { color: var(--paper); background: var(--moss-dark); }
.download-card:not(.recommended) .download-button { color: var(--ink); background: var(--paper); }
.file-meta { margin-top: 13px; text-align: center; font-family: var(--mono); font-size: 10px; }
.download-footnote { display: flex; align-items: center; gap: 9px; margin: 26px 0 0; color: rgba(242,239,231,.67); font-size: 12px; }

.release-section { border-bottom: 1px solid var(--line); }
.release-layout { display: grid; grid-template-columns: .85fr 1.3fr; gap: 100px; }
.release-sticky { align-self: start; position: sticky; top: 120px; }
.version { margin: 0 0 12px; color: var(--clay); }
.release-sticky > p:not(.version) { color: rgba(32,35,31,.62); }
.stable { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 7px 10px; border: 1px solid var(--line); font-size: 12px; }
.stable span { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--moss); }
.changelog { border-top: 1px solid var(--line); }
.change-group { display: grid; grid-template-columns: 50px 1fr; gap: 22px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.change-icon { width: 42px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--paper-deep); }
.change-group h3 { margin: 0 0 8px; font-size: 20px; }.change-group p { margin: 0; line-height: 1.65; color: rgba(32,35,31,.66); }

.questions { background: var(--surface); }
.questions h2 { margin-bottom: 48px; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 620; }
summary::-webkit-details-marker { display: none; }
summary svg { transition: transform 180ms; }
details[open] summary svg { transform: rotate(45deg); }
details p { max-width: 760px; margin: -5px 0 27px; color: rgba(32,35,31,.68); line-height: 1.7; }
.feedback { display: grid; grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr); gap: clamp(60px, 9vw, 150px); color: var(--paper); background: var(--moss-dark); }
.feedback .section-kicker { margin-bottom: 48px; }
.feedback-intro > p { max-width: 510px; margin: 28px 0 0; color: rgba(242,239,231,.7); font-size: 17px; line-height: 1.7; }
.feedback-note { display: flex; align-items: center; gap: 11px; margin-top: 36px; color: rgba(242,239,231,.72); font-family: var(--mono); font-size: 11px; }
.feedback-note svg { color: #a7c58f; }
.feedback-form { align-self: start; padding: 36px; border: 1px solid rgba(242,239,231,.22); border-radius: 8px; background: rgba(242,239,231,.055); }
.feedback-form label, .form-field { display: grid; gap: 10px; margin-bottom: 24px; font-size: 13px; font-weight: 620; }
.feedback-form label > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.field-label { display: block; }
.feedback-form small { color: rgba(242,239,231,.55); font-size: 11px; font-weight: 400; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row label { min-width: 0; }
.feedback-form input, .feedback-form textarea, .select-trigger {
  width: 100%; border: 1px solid rgba(242,239,231,.2); border-radius: 6px; outline: none;
  color: var(--paper); background: rgba(24,27,24,.3); font: inherit; font-weight: 400;
  transition: border-color 160ms, background-color 160ms;
}
.feedback-form input, .select-trigger { height: 50px; padding: 0 14px; }
.feedback-form textarea { min-height: 160px; padding: 14px; resize: vertical; line-height: 1.55; }
.feedback-form input::placeholder, .feedback-form textarea::placeholder { color: rgba(242,239,231,.4); }
.feedback-form input:focus, .feedback-form textarea:focus, .select-trigger:focus-visible { border-color: #a7c58f; background: rgba(24,27,24,.52); }
.custom-select { position: relative; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; }
.select-trigger svg { width: 17px; flex: 0 0 auto; transition: transform 180ms; }
.select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-value.placeholder { color: rgba(242,239,231,.44); }
.custom-select.open .select-trigger { border-color: #a7c58f; background: rgba(24,27,24,.62); }
.custom-select.open .select-trigger svg { transform: rotate(180deg); }
.custom-select.invalid .select-trigger { border-color: #f0ab9d; }
.select-menu {
  position: absolute; z-index: 12; top: calc(100% - 17px); left: 0; right: 0; margin: 0; padding: 7px;
  border: 1px solid rgba(167,197,143,.48); border-radius: 7px; list-style: none;
  background: #252d23; box-shadow: 0 18px 42px rgba(14,18,13,.34);
  opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 150ms, transform 150ms, visibility 150ms;
}
.custom-select.open .select-menu { opacity: 1; visibility: visible; transform: none; }
.select-menu li {
  min-height: 42px; padding: 0 11px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: rgba(242,239,231,.78); cursor: pointer; font-weight: 400; transition: color 120ms, background-color 120ms;
}
.select-menu li:hover, .select-menu li.focused { color: var(--paper); background: rgba(167,197,143,.12); }
.select-menu li[aria-selected="true"] { color: #d4e7c6; background: rgba(167,197,143,.18); }
.select-menu li svg { width: 16px; opacity: 0; }
.select-menu li[aria-selected="true"] svg { opacity: 1; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.form-submit-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
.feedback-submit { min-width: 158px; border: 0; color: var(--ink); background: var(--paper); cursor: pointer; }
.feedback-submit:disabled { cursor: wait; opacity: .65; transform: none; }
.form-status { margin: 0; color: rgba(242,239,231,.72); font-size: 12px; line-height: 1.5; }
.form-status.success { color: #c6dfaF; }.form-status.error { color: #f0ab9d; }
footer { padding: 55px clamp(24px, 7vw, 108px); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; background: var(--ink); color: var(--paper); }
.footer-mark { background: var(--moss); }.footer-mark span { border-color: var(--ink); }
footer strong { font-size: 18px; } footer p { margin: 3px 0 0; color: rgba(242,239,231,.58); }
.footer-tech { text-align: right; font-family: var(--mono); font-size: 11px; line-height: 1.6; }
.back-top { width: 42px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(242,239,231,.25); border-radius: 50%; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes breathe { to { transform: translate(12px, -9px) scale(1.07); } }
@keyframes drift { to { transform: translate(10px, 7px) scale(1.04); } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero { min-height: 940px; padding-top: 0; }
  .hero-media { top: 45%; }
  .hero-media img { object-position: center 10%; }
  .hero-copy { min-height: 50%; width: 100%; padding: 125px 7vw 62px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-caption { display: none; }
  .intro-heading, .download-lead, .release-layout { grid-template-columns: 1fr; gap: 28px; }
  .intro-heading { align-items: start; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-row: auto; min-height: 650px; }
  .download-lead .section-kicker { grid-row: auto; }
  .release-sticky { position: static; }
  .feedback { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 680px) {
  .site-header { height: 62px; padding: 0 18px; }
  .brand-mark { width: 31px; }
  .header-download span { display: none; }
  .hero { min-height: 800px; }
  .hero-media { top: 48%; background: var(--paper); }
  .hero-media img { object-fit: cover; object-position: center top; }
  .hero-copy { min-height: 48%; padding: 105px 24px 50px; background: var(--paper); }
  h1 { font-size: 59px; }
  .hero-summary { margin-top: 23px; font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 25px; gap: 16px; }
  .button-primary { flex: 1; }
  .text-link { justify-content: center; }
  .hero-note { margin-top: 16px; }
  .intro-band, .downloads, .release-section, .questions, .feedback { padding: 78px 22px; }
  .section-kicker { margin-bottom: 38px; }
  .intro-heading { margin-bottom: 45px; gap: 22px; }
  .intro-heading h2, .download-lead h2, .release-sticky h2, .questions h2, .feedback h2 { font-size: 43px; }
  .feature { min-height: 440px; padding: 14px; }
  .feature-wide { min-height: 580px; }
  .feature-art { min-height: 350px; }
  .source-one { left: 5%; }.source-two { right: 3%; }.source-three { left: 12%; }
  .download-grid { grid-template-columns: 1fr; }
  .download-card { min-height: 360px; padding: 27px; }
  .download-footnote { align-items: flex-start; line-height: 1.5; }
  .change-group { grid-template-columns: 42px 1fr; gap: 14px; }
  summary { min-height: 74px; font-size: 17px; }
  .feedback-form { padding: 22px 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-submit-row { grid-template-columns: 1fr; gap: 14px; }
  .feedback-submit { width: 100%; }
  footer { grid-template-columns: auto 1fr auto; padding: 40px 22px; }
  .footer-tech { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}