/* Confirmed website layout, product preview and support marks. */
/* Keep the actual application window and the original downstream sections. */
body { isolation: isolate; }
body > .hero-field { position: fixed; inset: 0; z-index: -1; opacity: .4; mask-image: none; -webkit-mask-image: none; }
body > .hero-field .field { mask-image: radial-gradient(ellipse 42% 45% at 50% 30%, transparent 30%, #000 100%); -webkit-mask-image: radial-gradient(ellipse 42% 45% at 50% 30%, transparent 30%, #000 100%); }
.hero#download { min-height: 420px; padding: 112px 0 40px; z-index: 2; }
.hero#download h1 { font-family: var(--sans); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 450; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.brand .brand-mark { display: none; }
.hero-description { max-width: 40em; margin: 14px auto 0; color: var(--graphite); font-size: 16px; font-weight: 400; line-height: 1.8; text-wrap: balance; }
.hero#download .download-actions { margin-top: 24px; }
.features#experience { position: relative; z-index: 1; padding-top: 22px; }
.features > .wrap { display: flex; flex-direction: column; }
.demo-caption { align-self: center; max-width: 48em; min-height: 1.8em; margin: 22px 0 0; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.8; text-align: center; text-wrap: pretty; }
.demo-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 28px; height: 34px; pointer-events: none; will-change: transform; }
.demo-cursor[hidden] { display: none; }
.demo-cursor > svg { width: 28px; height: 34px; filter: drop-shadow(0 1px 2px #0003); }
.demo-click-ring { position: absolute; left: -13px; top: -13px; width: 32px; height: 32px; border: 1.5px solid #17181a88; border-radius: 50%; background: #ffffff66; opacity: 0; }
.features .demo-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 22px; }
.features .seg { background: transparent; gap: 4px; padding: 0; }
.features .seg button { min-height: 34px; padding: 0 16px; font-size: 13px; }
.features .seg button[aria-selected="true"] { background: var(--sunk); box-shadow: none; }
.demo-playback { display: flex; align-items: center; }
.demo-playback button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 6px; padding: 7px; background: transparent; color: var(--graphite); cursor: pointer; }
.demo-playback svg { width: 17px; height: 17px; }
.demo-playback button:hover { background: #E8E9E5; }
.window iframe { background: var(--paper); }
@media (max-width: 760px) {
  .hero#download { min-height: 370px; padding: 108px 0 40px; }
  .hero-description { max-width: 23em; font-size: 15px; }
  .hero#download h1 > span { display: block; }
  .features .demo-controls { gap: 4px; margin-bottom: 18px; }
  .features .seg { display: flex; gap: 0; }
  .features .seg button { font-size: 12px; padding: 0 7px; }
  .demo-caption { font-size: 14px; margin-top: 18px; padding-inline: 6px; }
  body > .hero-field { opacity: .32; }
}
.language-picker { position: relative; }
.language-picker[hidden], .language-menu[hidden] { display: none; }
.language-trigger { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; color: var(--graphite); background: transparent; cursor: pointer; }
.language-trigger:hover, .language-trigger[aria-expanded='true'] { color: var(--ink); background: var(--sunk); }
.language-trigger svg { width: 19px; height: 19px; }
.language-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 168px; padding: 6px; border: 1px solid #E2E3E1; border-radius: 10px; background: var(--paper); box-shadow: 0 12px 36px -12px rgb(23 24 26 / .18); }
.language-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--graphite); font: 400 14px/1.4 var(--sans); text-align: left; cursor: pointer; }
.language-menu button:hover, .language-menu button:focus-visible { background: var(--sunk); color: var(--ink); }
.language-menu button:focus-visible { outline-offset: -2px; }
.language-menu button[aria-checked='true'] { color: var(--ink); }
.language-menu button svg { width: 15px; height: 15px; visibility: hidden; }
.language-menu button[aria-checked='true'] svg { visibility: visible; }
@media (max-width: 760px) {
  header .wrap { gap: 12px; }
  nav { gap: 12px; }
  html[lang='en'] .hero h1 { font-size: clamp(36px, 7.4vw, 58px); }
}
.hero { position: relative; isolation: isolate; min-height: clamp(640px, 88svh, 820px); overflow: clip; }
.hero-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--field-opacity, .44); mask-image: linear-gradient(transparent 10%, #000 28%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(transparent 10%, #000 28%, #000 86%, transparent 100%); }
.hero-field .field { display: block; width: 100%; height: 100%; mask-image: radial-gradient(ellipse 44% 30% at 50% 44%, transparent 48%, #000 100%); -webkit-mask-image: radial-gradient(ellipse 44% 30% at 50% 44%, transparent 48%, #000 100%); }
body[data-field-motion='off'] .hero-field { visibility: hidden; }
.hero h1 { font-family: var(--hero-font, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei UI', sans-serif); font-size: clamp(48px, 5.6vw, 76px); font-weight: var(--hero-weight, 500); line-height: 1.24; letter-spacing: -.035em; }
.hero-details { width: 100%; margin-top: 0; }
.hero .actions { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 24px; margin-top: 52px; }
.hero .btn.large { position: relative; height: var(--download-height, 38px); min-height: var(--download-height, 38px); padding: 0 14px; border-radius: 8px; gap: 8px; font: 400 13px/1 var(--hero-font, var(--sans)); white-space: nowrap; }
.hero .btn::after { content: ''; position: absolute; inset: -4px 0; }
.hero .btn svg { width: 15px; height: 15px; flex: none; }
body[data-download-style='outline'] .hero .btn { background: var(--paper); color: var(--ink); border-color: #B9BDC1; }
body[data-download-style='outline'] .hero .btn:hover { background: var(--sunk); border-color: var(--ink); }
.hero .dl-msg:not(:empty) { margin-top: 20px; }
.safety-layout { grid-template-columns: 1fr; gap: 56px; }
.safety-layout > .title, #support > .wrap > .title { text-align: center; max-width: none; }
.safety { width: min(100%, 880px); margin-inline: auto; column-gap: 72px; }
.community .actions { grid-template-columns: repeat(4, minmax(0, 150px)); width: min(100%, 672px); gap: 24px; }
.community-link { position: relative; min-height: var(--download-height, 38px); padding: 0 14px; border-radius: 8px; gap: 8px; font: 400 13px/1.4 var(--hero-font, var(--sans)); }
.community-link::after { content: ''; position: absolute; inset: -4px 0; }
.community-link svg { width: 15px; height: 15px; }
@media (max-width: 1024px) {
  .community .actions { grid-template-columns: repeat(2, minmax(0, 150px)); width: min(100%, 324px); }
}
@media (max-width: 760px) {
  .hero { min-height: max(600px, 86svh); }
  .hero h1 { font-size: clamp(44px, 8vw, 60px); line-height: 1.28; }
  .hero .actions { grid-template-columns: repeat(2, minmax(0, 148px)); margin-top: 44px; gap: 20px; }
  .hero .btn.large { padding-inline: 12px; font-size: 12px; gap: 7px; }
  .hero-field .field { mask-image: radial-gradient(ellipse 55% 28% at 50% 42%, transparent 50%, #000 100%); -webkit-mask-image: radial-gradient(ellipse 55% 28% at 50% 42%, transparent 50%, #000 100%); }
  .seg { display: grid; grid-template-columns: repeat(2, 1fr); }
  .seg button { min-height: 38px; }
  .safety { column-gap: 36px; }
  .safety-layout { gap: 40px; }
  .community .actions { gap: 20px; }
  .community-link { white-space: nowrap; padding-inline: 10px; font-size: 12px; gap: 7px; }
}
@media (max-width: 380px) {
  .hero .btn.large { padding-inline: 8px; font-size: 11px; gap: 6px; }
  .hero .btn svg { width: 14px; height: 14px; }
}

/* Typography controls affect the landing page, never the embedded product UI. */
body { font-weight: var(--body-weight, 400); letter-spacing: var(--body-tracking, 0); line-height: var(--body-leading, 1.7); }
.hero h1 { font-size: clamp(calc(48px * var(--hero-scale, 1)), calc(5.6vw * var(--hero-scale, 1)), calc(76px * var(--hero-scale, 1))); font-weight: var(--hero-weight, 500); letter-spacing: var(--hero-tracking, -.035em); line-height: var(--hero-leading, 1.24); }
.title h2 { font-size: clamp(calc(30px * var(--section-scale, 1)), calc(3vw * var(--section-scale, 1)), calc(42px * var(--section-scale, 1))); font-weight: var(--section-weight, 660); letter-spacing: var(--section-tracking, -.035em); line-height: var(--section-leading, 1.3); }
.safety h3 { font-size: calc(17px * var(--section-scale, 1)); font-weight: var(--section-weight, 640); letter-spacing: var(--section-tracking, 0); line-height: var(--section-leading, 1.5); }
.row h3 { font-size: calc(15px * var(--section-scale, 1)); font-weight: var(--section-weight, 650); letter-spacing: var(--section-tracking, 0); line-height: var(--section-leading, 1.5); }
.safety p, .track li { font-size: calc(14px * var(--body-scale, 1)); font-weight: var(--body-weight, 400); line-height: var(--body-leading, 1.7); }
.feature-copy { font-family: var(--sans); letter-spacing: var(--body-tracking, 0); font-size: calc(16px * var(--body-scale, 1)); font-weight: var(--body-weight, 400); line-height: var(--body-leading, 1.7); }
footer { font-size: calc(13px * var(--body-scale, 1)); }
nav > a:not(.btn) { font-size: calc(14px * var(--control-scale, 1)); }
.brand { font-size: calc(15px * var(--control-scale, 1)); }
.brand, nav > a, .seg button, .hero .btn.large, .community-link { font-weight: var(--control-weight, 400); letter-spacing: var(--control-tracking, 0); line-height: var(--control-leading, 1.4); }
.seg button { font-size: calc(14px * var(--control-scale, 1)); }
.hero .btn.large, .community-link { font-size: calc(13px * var(--control-scale, 1)); }
.hero .btn.large { height: auto; padding-block: 8px; }
body[data-font-mode='original'] .safety h3 { font-weight: 640; letter-spacing: normal; line-height: 1.5; }
body[data-font-mode='original'] .row h3 { font-weight: 650; letter-spacing: normal; line-height: 1.7; }
body[data-font-mode='original'] .track li { line-height: 1.5; }
body[data-font-mode='original'] .brand { font-weight: 650; letter-spacing: -.01em; line-height: 1.7; }
body[data-font-mode='original'] .seg button { font-weight: 500; line-height: 1; }

/* Accepted footer directions, with the previous button version available for comparison. */
.community-copy { margin: 24px 0 0; font-size: calc(17px * var(--body-scale, 1)); color: var(--graphite); font-weight: var(--body-weight, 400); line-height: var(--body-leading, 1.7); }
body[data-footer-layout='original'] .community-copy { display: none; }
body:not([data-footer-layout='original']) .community { padding-top: 136px; padding-bottom: 92px; }
body:not([data-footer-layout='original']) .community-layout { gap: 40px; }
body:not([data-footer-layout='original']) .community .title h2 { font-size: clamp(32px, 3.6vw, calc(44px * var(--section-scale, 1))); }
body:not([data-footer-layout='original']) .community .actions { display: flex; flex-wrap: wrap; justify-content: center; width: auto; gap: 16px 40px; }
body:not([data-footer-layout='original']) .community-link { min-height: 36px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--sans); font-size: calc(15px * var(--control-scale, 1)); }
body:not([data-footer-layout='original']) .community-link svg { display: none; }
body:not([data-footer-layout='original']) .community-link::after { display: none; }
body:not([data-footer-layout='original']) .community-link:hover { background: transparent; text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(calc(44px * var(--hero-scale, 1)), calc(8vw * var(--hero-scale, 1)), calc(60px * var(--hero-scale, 1))); }
  body[data-font-mode='original'] .hero h1 { line-height: 1.28; }
  .hero .btn.large { font-size: calc(12px * var(--control-scale, 1)); }
  .feature-copy { font-size: calc(15px * var(--body-scale, 1)); }
  body:not([data-footer-layout='original']) .community { padding-top: 96px; padding-bottom: 64px; }
  body:not([data-footer-layout='original']) .community .title h2 { font-size: calc(30px * var(--section-scale, 1)); }
  body:not([data-footer-layout='original']) .community .actions { gap: 12px 28px; }
}

/* Approved typography and button settings, saved 2026-10-17. */
:root {
  --sans: "Urbanist", "Noto Sans SC", system-ui, sans-serif;
  --hero-font: "Urbanist", "Noto Sans SC", system-ui, sans-serif;
  --download-height: 34px;
  --field-opacity: .65;
  --hero-weight: 300;
  --hero-scale: 0.98;
  --hero-tracking: 0.025em;
  --hero-leading: 1.4;
  --section-weight: 300;
  --section-scale: 1.0;
  --section-tracking: -0.035em;
  --section-leading: 1.3;
  --body-weight: 300;
  --body-scale: 1.0;
  --body-tracking: 0em;
  --body-leading: 1.7;
  --control-weight: 400;
  --control-scale: 1.0;
  --control-tracking: 0em;
  --control-leading: 1.4;
}

/* Start with the document paint, independently of fonts and demo readiness. */
@keyframes site-enter {
  from { opacity: .12; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes field-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes preview-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  header .wrap { animation: site-enter .65s var(--ease) both; }
  .hero h1 { animation: site-enter .9s var(--ease) both; }
  .hero-details { animation: site-enter .9s var(--ease) .12s both; }
  .hero-field .field { animation: field-enter 1.2s var(--ease) both; }
  .window:not(.ready) .cover span { animation: preview-breathe 1.8s ease-in-out infinite; }
}
.window iframe { opacity: 0; transition: opacity .4s var(--ease); }
.window.ready iframe { opacity: 1; }
.window.ready .cover { transition: opacity .4s var(--ease), visibility 0s .4s; }
@media (prefers-reduced-motion: reduce) {
  .window iframe, .window.ready .cover { transition: none; }
}

/* A single recommendation, with every published package one step away. */
.hero { overflow: visible; }
.hero-field { overflow: clip; }
.hero .download-actions { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 184px minmax(0, 1fr); align-items: start; justify-content: stretch; gap: 24px; width: 100%; max-width: none; margin-inline: auto; }
.download-main { grid-column: 2; width: 100%; }
.download-main .btn { width: 100%; }
.download-options { grid-column: 3; justify-self: start; text-align: left; z-index: 3; }
.download-options > summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; color: var(--graphite); font-size: 13px; cursor: pointer; list-style: none; white-space: nowrap; }
.download-options > summary::-webkit-details-marker, .chip-help > summary::-webkit-details-marker { display: none; }
.download-options > summary svg { width: 13px; height: 13px; transition: transform .18s var(--ease); }
.download-options[open] > summary svg { transform: rotate(180deg); }
.download-options > summary:hover, .chip-help > summary:hover { color: var(--ink); }
.download-choices { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); width: min(324px, calc(100vw - 48px)); padding: 18px 12px 12px; border: 1px solid #E2E3E1; border-radius: 14px; background: var(--paper); box-shadow: 0 12px 36px -12px rgb(23 24 26 / .18); }
.download-heading { margin: 0 10px 10px; color: var(--quiet); font-size: 12px; }
.download-choice { display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 10px; border-radius: 8px; text-decoration: none; }
.download-choice:hover { background: var(--sunk); }
.download-choice[aria-disabled="true"] { opacity: .55; cursor: default; }
.download-choice[aria-disabled="true"]:hover { background: transparent; }
.download-choice > svg { width: 21px; height: 21px; flex: none; }
.download-choice-copy { display: grid; gap: 3px; flex: 1; }
.download-choice strong { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.download-choice small, .download-file { color: var(--quiet); font-size: 12px; }
.download-file { display: flex; align-items: center; gap: 10px; }
.download-file svg { width: 15px; height: 15px; }
.download-context[hidden] { display: none; }
.download-context { margin: 10px 10px 4px; color: var(--graphite); font-size: 12px; line-height: 1.7; }
.chip-help { margin: 12px 10px 0; font-size: 12px; color: var(--quiet); }
.chip-help > summary { width: fit-content; list-style: none; cursor: pointer; }
.chip-help > summary::after { content: '＋'; margin-left: 6px; }
.chip-help[open] > summary::after { content: '−'; }
.chip-help p { margin: 8px 0; line-height: 1.8; }
.download-history { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 0; padding: 10px; color: var(--graphite); font-size: 12px; text-decoration: none; border-radius: 6px; }
.download-history:hover { background: var(--sunk); color: var(--ink); }
@media (max-width: 760px) {
  .hero .download-actions { grid-template-columns: minmax(0, 1fr) 166px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 380px) {
  .hero .download-actions { grid-template-columns: minmax(0, 1fr) 144px minmax(0, 1fr); gap: 8px; }
  .download-options > summary { font-size: 12px; gap: 6px; }
}
@media (max-width: 480px) {
  html[lang='en'] .hero .download-actions { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  html[lang='en'] .download-main { grid-column: 1; width: 184px; }
  html[lang='en'] .download-options { grid-column: 1; justify-self: center; }
  html[lang='en'] .download-choices { top: 92px; }
}

/* Preview compositions share the same copy, dot field and real product window. */
@media (min-width: 761px) {
  html[data-hero-layout='center'] .hero#download { min-height: max(620px, calc(100svh - 96px)); padding-top: 128px; padding-bottom: 160px; }
  html[data-hero-layout='center'] .hero#download h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.18; letter-spacing: -.02em; }
  html[data-hero-layout='center'] .hero-description { margin-top: 24px; font-size: 18px; }
  html[data-hero-layout='center'] .hero#download .download-actions { margin-top: 32px; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); }
  html[data-hero-layout='center'] .hero .btn.large { min-height: 44px; padding-block: 10px; font-size: 14px; }
  html[data-hero-layout='center'] .download-options > summary { min-height: 44px; }
}
@media (max-width: 760px) {
  html[data-hero-layout='center'] .hero#download { min-height: max(500px, calc(100svh - 84px)); padding-bottom: 144px; }
  html[data-hero-layout='center'] .hero#download h1 { font-size: clamp(2.25rem, 7vw, 2.75rem); }
  html[data-hero-layout='center'] .hero-description { margin-top: 20px; font-size: 16px; }
  html[data-hero-layout='center'] .hero#download .download-actions { margin-top: 28px; }
}
html[data-hero-layout='center'] .features .demo-controls { margin-bottom: 16px; }
@keyframes demo-arrive {
  from { opacity: .72; }
  to { opacity: 1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-hero-layout='center'] #demo-panel { animation: demo-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 24%; }
  }
}
html[data-hero-layout='brand'] .brand { gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
html[data-hero-layout='brand'] .brand .brand-mark { display: block; width: 30px; height: 30px; }
html[data-hero-layout='brand'] .hero#download h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); font-weight: 500; line-height: 1.18; }
html[data-hero-layout='brand'] .hero#download h1 > span { display: block; }
@media (min-width: 901px) {
  html[data-hero-layout='split'] .hero-content { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 72px; justify-items: start; align-items: center; text-align: left; }
  html[data-hero-layout='split'] .hero#download h1 { grid-column: 1; grid-row: 1; font-weight: 500; }
  html[data-hero-layout='split'] .hero#download h1 > span { display: block; }
  html[data-hero-layout='split'] .hero-description { grid-column: 1; grid-row: 2; margin: 20px 0 0; text-wrap: pretty; }
  html[data-hero-layout='split'] .hero-details { grid-column: 2; grid-row: 1 / span 2; }
  html[data-hero-layout='split'] .hero#download .download-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
  html[data-hero-layout='split'] .download-main { width: 184px; }
  html[data-hero-layout='split'] .download-options { position: relative; }
  html[data-hero-layout='split'] .features .demo-controls { justify-content: flex-start; }
}
@media (max-width: 760px) {
  html[data-hero-layout='brand'] .brand { font-size: 20px; }
  html[data-hero-layout='brand'] .brand .brand-mark { width: 26px; height: 26px; }
}