:root {
  --white: #f4f7ff;
  --muted: #94a3b9;
  --night: #030711;
  --cyan: #61e8fa;
  --violet: #9c82ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background: var(--night);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; width: 168px; }
.navlinks { display: flex; gap: 32px; color: #a9b5c9; font-size: 13px; }
.pill { padding: 11px 16px; border: 1px solid #2d3b52; border-radius: 99px; background: #ffffff08; font-size: 13px; font-weight: 700; }

.hero { position: relative; padding-top: 90px; text-align: center; }
.hero::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  width: min(800px, 100%);
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse, #285dd148, #6339d322 36%, transparent 70%);
  filter: blur(12px);
}
.eyebrow, .kicker { position: relative; color: #7f92ae; font: 700 10px ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid #30415c; border-radius: 99px; background: #09101dcc; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #5cffac; box-shadow: 0 0 0 4px #5cffac18, 0 0 14px #5cffac; }
.hero h1 { position: relative; margin: 32px 0 30px; font-size: clamp(54px, 8vw, 104px); line-height: .92; letter-spacing: -.068em; }
.hero h1 em { color: transparent; background: linear-gradient(90deg, #fff, #68e9ff 48%, #a17aff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.herocopy { position: relative; width: min(680px, 100%); margin: auto; color: #9caac0; font-size: 18px; line-height: 1.65; }
.actions { position: relative; display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 10px; font-size: 14px; font-weight: 800; }
.primary { color: #06101b; background: linear-gradient(135deg, #78f3ff, #8a83ff); box-shadow: 0 10px 45px #536fff38, inset 0 1px #fff; }
.secondary { border: 1px solid #2a3950; color: #c2cada; background: #0b111d; }

.stage { position: relative; height: 690px; margin-top: 78px; perspective: 1200px; }
.stage::after { content: ""; position: absolute; right: 10%; bottom: 0; left: 10%; height: 180px; background: radial-gradient(ellipse, #3574ff32, transparent 68%); filter: blur(18px); }
.product-shot { position: absolute; z-index: 2; margin: 0; overflow: hidden; border: 1px solid #334763; background: #070c15; box-shadow: 0 35px 100px #000, 0 0 80px #315fd52b; }
.product-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-shot-main { top: 24px; left: 9%; width: 82%; aspect-ratio: 16 / 9; border-radius: 17px; }
.product-shot-main figcaption { position: absolute; z-index: 1; top: 14px; right: 16px; padding: 7px 10px; border: 1px solid #60718b80; border-radius: 99px; color: #dae4f7; background: #07101ddd; font: 700 8px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.product-shot-side { z-index: 5; top: 390px; width: 38%; aspect-ratio: 16 / 9; border-radius: 13px; }
.product-shot-left { left: 0; transform: rotate(-4deg); }
.product-shot-right { right: 0; transform: rotate(4deg); }
.trust { display: flex; height: 70px; align-items: center; justify-content: center; gap: 22px; border-block: 1px solid #172237; color: #7788a1; font-size: 12px; }
.trust i { width: 3px; height: 3px; border-radius: 50%; background: #394b67; }

.statement { padding: 180px 0; text-align: center; }
.statement h2, .sectionhead h2, .flowsec h2, .roadmap h2, .cta h2 { margin: 22px 0 30px; font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -.055em; }
.statement p:last-child { max-width: 720px; margin: auto; color: var(--muted); font-size: 18px; line-height: 1.75; }
.explainer { padding-bottom: 170px; }
.explainhead { max-width: 850px; margin-bottom: 54px; }
.explainhead h2, .audience h2 { margin: 22px 0 26px; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: -.052em; }
.explainhead > p:last-child { max-width: 760px; color: #93a2b8; font-size: 18px; line-height: 1.75; }
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.platform-modes { grid-template-columns: repeat(2, 1fr); }
.platform-modes .explain-card { min-height: 320px; }
.module-showcase { display: grid; grid-template-columns: 280px minmax(0, 1fr); margin-top: 34px; overflow: hidden; border: 1px solid #263b59; border-radius: 22px; background: radial-gradient(circle at 78% 0, #315fd52e, transparent 42%), #070d17; box-shadow: 0 35px 100px #0008; }
.module-rail { padding: 26px 20px; border-right: 1px solid #21334d; background: #080f1bdb; }
.module-rail > p { margin: 0 12px 18px; color: #61738d; font: 750 8px ui-monospace, monospace; letter-spacing: .16em; }
.module-tab { display: grid; width: 100%; min-height: 66px; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 10px 12px; appearance: none; cursor: pointer; border: 1px solid transparent; border-radius: 11px; color: #8798b1; background: transparent; font: inherit; text-align: left; transition: .22s ease; }
.module-tab span { color: #4f6380; font: 750 8px ui-monospace, monospace; }
.module-tab strong { font-size: 14px; letter-spacing: -.015em; }
.module-tab:hover { color: #dbe7f8; background: #111c2c; }
.module-tab:focus-visible { outline: 2px solid #68e9ff; outline-offset: 2px; }
.module-tab.selected { border-color: #4d68a9; color: #f2f6ff; background: linear-gradient(135deg, #152443, #101a2d); box-shadow: inset 3px 0 #66e8fa, 0 12px 35px #0005; }
.module-tab.selected span { color: #68e9ff; }
.module-panel { display: grid; min-width: 0; grid-template-rows: auto 1fr; padding: 44px; outline: none; }
.module-copy { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; align-items: end; margin-bottom: 32px; }
.module-copy > span { align-self: start; color: #68e9ff; font: 750 8px ui-monospace, monospace; letter-spacing: .16em; }
.module-copy small { color: #60738f; font: 750 9px ui-monospace, monospace; letter-spacing: .12em; }
.module-copy h3 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 58px); line-height: .95; letter-spacing: -.055em; }
.module-copy p { grid-column: 1 / -1; max-width: 920px; margin: 2px 0 0; padding: 3px 0 3px 20px; border-left: 3px solid #68e9ff; color: #c9d5e7; font-size: 20px; font-weight: 520; line-height: 1.58; letter-spacing: -.012em; }
.module-visual { position: relative; min-height: 390px; margin: 0; overflow: hidden; border: 1px solid #2a405f; border-radius: 15px; background: #040912; box-shadow: 0 24px 65px #0008; }
.module-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px #ffffff08, inset 0 -80px 110px #03070d66; }
.module-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .16s ease, transform .35s ease; }
.module-visual.focus-captions img { transform: scale(1.13); transform-origin: center 76%; }
.module-visual.focus-monitor img { transform: scale(1.04); transform-origin: center top; }
.module-visual.focus-lyrics img { transform: scale(1.1); transform-origin: center 68%; }
.module-visual.focus-smart-link img { transform: scale(1.24); transform-origin: center 54%; }
.module-visual.focus-checker img { transform: scale(1.08); transform-origin: center 42%; }
.explain-card { min-height: 360px; padding: 32px; border: 1px solid #1d2d45; border-radius: 18px; background: linear-gradient(145deg, #0b121f, #070b13); }
.explain-card.featured { border-color: #536cac; background: radial-gradient(circle at 50% 0, #315bd339, transparent 48%), linear-gradient(145deg, #10192a, #080d16); box-shadow: 0 24px 70px #0007, 0 0 55px #4556c31d; }
.explain-card > span { color: #68e9ff; font: 700 9px ui-monospace, monospace; letter-spacing: .14em; }
.explain-card h3 { margin: 72px 0 18px; font-size: 27px; line-height: 1.12; letter-spacing: -.035em; }
.explain-card p { margin: 0; color: #8e9db3; font-size: 14px; line-height: 1.75; }
.audiences { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 170px; }
.audience { min-height: 610px; padding: 46px; overflow: hidden; border: 1px solid #243650; border-radius: 22px; background: radial-gradient(circle at 100% 0, #2d5ad637, transparent 43%), linear-gradient(150deg, #0b1424, #070b13); }
.audience.team { background: radial-gradient(circle at 0 0, #6645c838, transparent 43%), linear-gradient(150deg, #0c1322, #070b13); }
.audience h2 { font-size: clamp(38px, 3.7vw, 54px); }
.audience > p:not(.kicker) { color: #92a1b7; line-height: 1.75; }
.audience ul { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.audience li { position: relative; padding: 14px 16px 14px 42px; border: 1px solid #24344c; border-radius: 10px; color: #c5cfdf; background: #050a1399; font-size: 13px; line-height: 1.45; }
.audience li::before { content: "✓"; position: absolute; left: 16px; color: #61e8fa; font-weight: 900; }
.sectionhead { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }
.sectionhead > p { width: 350px; color: #8c9bb2; line-height: 1.7; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card { position: relative; min-height: 490px; overflow: hidden; padding: 28px; appearance: none; cursor: pointer; border: 1px solid #1c2a40; border-radius: 18px; color: inherit; background: linear-gradient(145deg, #0b121f, #070b13); font: inherit; text-align: left; transition: .35s; }
.card:hover, .card:focus-visible { transform: translateY(-5px); outline: none; border-color: #55dff0; box-shadow: 0 25px 65px #0008, 0 0 0 1px #55dff044; }
.cardtop { display: flex; justify-content: space-between; color: #60718b; font: 700 9px ui-monospace, monospace; letter-spacing: .12em; }
.visual { display: flex; width: 100%; height: auto; aspect-ratio: 16 / 9; align-items: center; justify-content: center; margin: 25px 0; overflow: hidden; border: 1px solid #1e304a; border-radius: 10px; background: radial-gradient(circle, #345ed833, transparent 64%); }
.visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.visual-focus-captions img { transform: scale(1.24); transform-origin: center 78%; }
.visual-focus-lyrics img { transform: scale(1.22); transform-origin: center 68%; }
.visual-focus-smart-link img { transform: scale(1.42); transform-origin: center 54%; }
.visual-focus-monitor img { transform: scale(1.1); transform-origin: center top; }
.visual-focus-checker img { transform: scale(1.14); transform-origin: center 42%; }
.card h3 { margin: 10px 0; font-size: 30px; letter-spacing: -.04em; }
.card p { margin: 0; color: #8e9db3; line-height: 1.65; }
.learn { display: block; margin-top: 18px; color: #68e9ff; font: 700 9px ui-monospace, monospace; letter-spacing: .1em; }

.flowsec { margin-top: 170px; padding: 150px 0; border-block: 1px solid #142137; background: linear-gradient(#050a13, #07101c, #050a13); text-align: center; }
.flowsec h2 em { color: #61728e; font-style: normal; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 70px; }
.node { display: flex; height: 190px; flex-direction: column; padding: 25px; border: 1px solid #223149; border-radius: 13px; background: #09101b; text-align: left; }
.node.active { border-color: #536cac; box-shadow: 0 0 45px #4556c32b; }
.node em { color: #5e728e; font: 700 9px ui-monospace, monospace; }
.node strong { margin: 38px 0 10px; font-size: 22px; }
.node span { color: #7f90aa; font-size: 12px; line-height: 1.5; }
.roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; padding: 180px 0; }
.development { width: max-content; max-width: 100%; margin-bottom: 28px; padding: 10px 13px; border: 1px solid #8c6dff55; border-radius: 99px; color: #b9a7ff; background: #6d4cff17; font: 750 9px ui-monospace, monospace; letter-spacing: .1em; }
.roadmap p:not(.kicker) { color: #8e9db4; line-height: 1.7; }
.roadmap small { color: #a48cff; font: 700 9px ui-monospace, monospace; letter-spacing: .15em; }
.rlist button { display: grid; width: 100%; height: 76px; grid-template-columns: 40px 1fr auto 20px; gap: 12px; align-items: center; appearance: none; cursor: pointer; border: 0; border-bottom: 1px solid #1d2a3d; color: inherit; background: transparent; font: inherit; text-align: left; }
.rlist span { color: #51647f; font: 700 9px ui-monospace, monospace; }
.rlist strong { font-size: 18px; }
.rlist em { padding: 6px 8px; border: 1px solid #7a61d155; border-radius: 99px; color: #a48cff; font: 700 7px ui-monospace, monospace; font-style: normal; }
.rlist i { color: #596d8c; font-style: normal; }
.rlist button:hover strong, .rlist button:focus-visible strong { color: #b29cff; }
.cta { display: flex; min-height: 520px; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 120px; padding: 30px; border: 1px solid #253856; border-radius: 24px; background: radial-gradient(circle at 50% 0, #4264d84c, transparent 45%), linear-gradient(145deg, #0b1424, #070b13); text-align: center; }
.cta .emblem { width: 52px; }
.cta p { color: #62e6ff; font: 700 10px ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.cta > span { max-width: 560px; margin-bottom: 32px; color: #8192aa; line-height: 1.6; }
.footer { display: flex; min-height: 110px; align-items: center; justify-content: space-between; border-top: 1px solid #1b293e; color: #72839d; font-size: 12px; }
.footer div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.legal { margin: -20px auto 28px; padding-top: 18px; border-top: 1px solid #121d2d; color: #56677f; font-size: 10px; line-height: 1.5; text-align: center; }

.backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: #01040bd9; backdrop-filter: blur(12px); }
.backdrop[hidden] { display: none; }
.modal { position: relative; width: min(1080px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 42px; border: 1px solid #344968; border-radius: 20px; background: radial-gradient(circle at 85% 0, #4b43a53b, transparent 38%), linear-gradient(145deg, #101a2a, #080d16); box-shadow: 0 40px 120px #000; }
.close { position: absolute; top: 15px; right: 18px; width: 38px; height: 38px; cursor: pointer; border: 1px solid #33445d; border-radius: 50%; color: #9fb0c7; background: #ffffff08; font-size: 25px; }
.modalstatus { display: inline-block; padding: 8px 10px; border: 1px solid #4ad5eb55; border-radius: 99px; color: #67e8f8; font: 750 9px ui-monospace, monospace; letter-spacing: .14em; }
.modalstatus.dev { border-color: #8568df66; color: #b29cff; }
.modal h2 { margin: 24px 0 16px; font-size: 42px; letter-spacing: -.045em; }
.modalmedia { width: 100%; margin: 0 0 22px; overflow: hidden; border: 1px solid #31445f; border-radius: 12px; background: #050a13; }
.modalmedia[hidden] { display: none; }
.modalmedia img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.modal p { color: #a3b1c5; font-size: 17px; line-height: 1.75; }
.done { margin-top: 18px; padding: 12px 18px; cursor: pointer; border: 0; border-radius: 9px; color: #06101b; background: linear-gradient(135deg, #70ecfa, #8d83ff); font-weight: 800; }

@media (max-width: 800px) {
  .shell { width: min(100% - 28px, 600px); }
  .nav { height: 72px; }
  .logo { width: 145px; }
  .navlinks { display: none; }
  .hero { padding-top: 70px; }
  .hero h1 { font-size: 52px; }
  .herocopy { font-size: 16px; }
  .actions { flex-direction: column; }
  .stage { height: 430px; margin-top: 54px; }
  .product-shot-main { left: 0; width: 100%; }
  .product-shot-main figcaption { top: 8px; right: 8px; }
  .product-shot-side { top: 230px; width: 58%; border-radius: 9px; }
  .product-shot-left { left: 0; }
  .product-shot-right { right: 0; }
  .trust { gap: 10px; font-size: 9px; }
  .statement { padding: 120px 0; }
  .statement h2, .sectionhead h2, .flowsec h2, .roadmap h2, .cta h2, .explainhead h2, .audience h2 { font-size: 42px; }
  .statement p:last-child { font-size: 16px; }
  .explainer { padding-bottom: 110px; }
  .explainhead > p:last-child { font-size: 16px; }
  .explain-grid, .audiences { grid-template-columns: 1fr; }
  .explain-card { min-height: 0; }
  .explain-card h3 { margin-top: 42px; }
  .module-showcase { display: block; margin-top: 24px; overflow: visible; border-radius: 17px; }
  .module-rail { display: flex; gap: 8px; overflow-x: auto; padding: 14px; border-right: 0; border-bottom: 1px solid #21334d; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .module-rail > p { display: none; }
  .module-tab { width: auto; min-width: max-content; min-height: 46px; grid-template-columns: auto auto; padding: 9px 13px; scroll-snap-align: start; }
  .module-tab strong { font-size: 12px; }
  .module-panel { padding: 24px 18px 18px; }
  .module-copy { display: block; margin-bottom: 22px; }
  .module-copy > span { display: block; margin-bottom: 24px; }
  .module-copy h3 { font-size: 40px; }
  .module-copy p { margin-top: 20px; padding-left: 15px; font-size: 17px; line-height: 1.55; }
  .module-visual { min-height: 0; aspect-ratio: 16 / 10; border-radius: 11px; }
  .audiences { padding-bottom: 110px; }
  .audience { min-height: 0; padding: 30px 24px; }
  .sectionhead { display: block; }
  .sectionhead > p { width: auto; }
  .grid { grid-template-columns: 1fr; }
  .flowsec { padding: 110px 0; }
  .flow { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; gap: 50px; padding: 120px 0; }
  .rlist button { grid-template-columns: 34px 1fr 20px; }
  .rlist em { display: none; }
  .cta { min-height: 470px; margin-bottom: 70px; padding: 25px; }
  .footer { flex-direction: column; gap: 22px; padding: 40px 0; }
  .backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); padding: 34px 24px; }
  .modal h2 { font-size: 34px; }
  .modal p { font-size: 15px; }
}


/* Supported-language catalog */
.language-section{padding:170px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}
.language-intro h2{font-size:clamp(44px,5.4vw,74px);line-height:1;letter-spacing:-.055em;margin:22px 0 28px}
.language-intro>p:not(.kicker){color:#93a2b8;font-size:17px;line-height:1.75}
.language-intro small{display:inline-block;margin-top:24px;color:#68e9ff;font:700 9px ui-monospace,monospace;letter-spacing:.14em}
.language-catalog{border:1px solid #253856;border-radius:18px;background:linear-gradient(145deg,#0b121f,#070b13);overflow:hidden}
.language-catalog summary{display:flex;justify-content:space-between;align-items:center;padding:28px 30px;color:#dce6f6;font-weight:750;cursor:pointer;list-style:none}
.language-catalog summary::-webkit-details-marker{display:none}
.language-catalog summary span{color:#68e9ff;font-size:22px;transition:transform .2s ease}
.language-catalog[open] summary span{transform:rotate(45deg)}
.language-catalog ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0 30px 30px;list-style:none}
.language-catalog li{padding:9px 10px 9px 0;border-top:1px solid #152238;color:#91a0b6;font-size:12px;line-height:1.4}
@media(max-width:800px){.language-section{padding:110px 0;grid-template-columns:1fr;gap:44px}.language-intro h2{font-size:42px}.language-catalog ul{grid-template-columns:repeat(2,1fr);padding-inline:22px}.language-catalog summary{padding:24px 22px}}

.audio-source-note{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center;margin-top:46px;padding:26px 30px;border:1px solid #29425e;border-radius:16px;background:#07111d;text-align:left}
.audio-source-note div{display:flex;flex-direction:column;gap:8px}
.audio-source-note span{color:#68e9ff;font:700 8px ui-monospace,monospace;letter-spacing:.14em}
.audio-source-note strong{font-size:16px;line-height:1.4}
.audio-source-note p{margin:0;color:#91a0b6;font-size:13px;line-height:1.7}
@media(max-width:800px){.audio-source-note{grid-template-columns:1fr;gap:18px;padding:24px}}


/* Translation-first FS Viewer product graphics */
.viewer-showcase{height:650px;margin-top:74px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.viewer-window{position:relative;z-index:3;width:82%;height:540px;border:1px solid #405678;border-radius:22px;overflow:hidden;background:#091321;box-shadow:0 42px 120px #000c,0 0 90px #315fd533}
.viewer-window-bar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #ffffff12;background:#08111f}
.viewer-window-bar img{width:170px}
.viewer-window-bar>div{display:flex;gap:8px}
.viewer-window-bar span{padding:9px 11px;border:1px solid #ffffff18;border-radius:9px;color:#aab7c9;font-size:9px;font-weight:800}
.viewer-window-bar span.selected{border-color:#48df9a88;background:#15392e;color:#72efae}
.viewer-translation{height:436px;padding:25px 38px 72px;background:radial-gradient(circle at 76% 8%,#21488566,transparent 38%),linear-gradient(145deg,#0b1526,#111e37)}
.translation-meta{display:flex;align-items:center;justify-content:space-between;color:#71829a;font-size:10px}
.translation-meta>span{display:flex;align-items:center;gap:8px;color:#69ebb1;font-weight:850;letter-spacing:.13em}
.translation-meta i,.viewer-status i{width:7px;height:7px;border-radius:50%;background:#48df91;box-shadow:0 0 12px #48df91}
.translation-copy{width:min(760px,88%);margin:24px auto 0}
.translation-copy p{margin:0 0 13px;color:#77879f;font-size:16px;line-height:1.55;text-align:left}
.translation-copy p.current{color:#f4f8ff;font-size:24px;line-height:1.48;font-weight:620}
.translation-working{display:flex;align-items:center;gap:5px;color:#68e5ad;font-size:9px;font-weight:800}
.translation-working i{width:4px;height:4px;border-radius:50%;background:#68e5ad}
.new-content-preview{appearance:none;position:absolute;left:50%;bottom:56px;transform:translateX(-50%);width:min(630px,82%);display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:13px 16px;border:1px solid #58749a;border-radius:12px;background:#101d31f2;color:#fff;text-align:left;box-shadow:0 14px 35px #0009}
.new-content-preview span{color:#6debb3;font:800 8px ui-monospace,monospace;letter-spacing:.12em}
.new-content-preview strong{font-size:11px}
.new-content-preview b{grid-column:2;grid-row:1/3;color:#7feabb;font-size:18px}
.viewer-status{position:absolute;left:0;right:0;bottom:0;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-top:1px solid #ffffff12;background:#08111f;color:#6f8098;font-size:8px}
.viewer-status span:first-child{display:flex;align-items:center;gap:7px;color:#b8c6d8}
.viewer-preview-card{position:absolute;z-index:4;width:218px;padding:20px;border:1px solid #304866;border-radius:17px;background:#0b1628f5;box-shadow:0 28px 70px #000b;text-align:left}
.preview-language{left:-12px;top:190px;transform:rotate(-5deg)}
.preview-slide{right:-12px;bottom:54px;transform:rotate(5deg)}
.preview-kicker{color:#65e8ad;font:800 7px ui-monospace,monospace;letter-spacing:.13em}
.viewer-preview-card h3{margin:12px 0 15px;font-size:18px;letter-spacing:-.03em}
.language-choice{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:10px;border:1px solid #243954;border-radius:9px;color:#b9c5d6;font-size:10px}
.language-choice.selected{border-color:#51dc9c;background:#13372d;color:#fff}
.language-choice small{color:#71839c;font-size:7px}
.viewer-preview-card>p{margin:14px 0 0;color:#667991;font-size:8px}
.preview-slide>small{display:block;margin-top:16px;color:#7b8ca5;font:800 7px ui-monospace,monospace;letter-spacing:.12em}
.preview-slide blockquote{margin:12px 0 18px;font-family:Georgia,serif;font-size:17px;line-height:1.45}
.preview-slide button{width:100%;padding:10px;border:1px solid #49678e;border-radius:8px;background:#ffffff08;color:#dbe6f5;font-size:8px;font-weight:800}
@media(max-width:800px){.viewer-showcase{height:520px;margin-top:52px}.viewer-window{width:100%;height:440px}.viewer-window-bar{height:54px;padding:0 13px}.viewer-window-bar img{width:126px}.viewer-window-bar span{display:none}.viewer-window-bar span.selected{display:block}.viewer-translation{height:346px;padding:20px 18px 65px}.translation-copy{width:100%;margin-top:19px}.translation-copy p{font-size:11px}.translation-copy p:first-child{display:none}.translation-copy p.current{font-size:17px}.new-content-preview{bottom:50px;width:88%}.viewer-preview-card{width:142px;padding:13px}.preview-language{left:-8px;top:145px}.preview-slide{right:-8px;bottom:24px}.viewer-preview-card h3{font-size:12px}.language-choice:nth-of-type(n+3){display:none}.preview-slide blockquote{font-size:11px}.viewer-status span:nth-child(2){display:none}}

/* FS Monitor download */
.download-hero{position:relative;padding:96px 0 68px;text-align:center}
.download-hero::before{content:"";position:absolute;top:-110px;left:50%;width:min(800px,100%);height:520px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse,#285dd148,#6339d322 36%,transparent 70%);filter:blur(12px)}
.download-hero h1{position:relative;margin:30px auto 24px;font-size:clamp(52px,7vw,92px);line-height:.94;letter-spacing:-.064em}
.download-hero h1 em{color:transparent;background:linear-gradient(90deg,#fff,#68e9ff 48%,#a17aff);background-clip:text;-webkit-background-clip:text;font-style:normal}
.download-hero>p{position:relative;width:min(690px,100%);margin:auto;color:#9caac0;font-size:18px;line-height:1.7}
.download-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:start;padding-bottom:150px}
.download-requirements{display:grid;gap:16px}
.requirement-card{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:32px;border:1px solid #253856;border-radius:18px;background:linear-gradient(145deg,#0b1424,#070b13)}
.requirement-card>span{display:grid;width:52px;height:52px;place-items:center;border:1px solid #4f6aa2;border-radius:14px;color:#68e9ff;background:#10213a;font:800 12px ui-monospace,monospace}
.requirement-card small{color:#68e9ff;font:750 9px ui-monospace,monospace;letter-spacing:.14em}
.requirement-card h2{margin:9px 0 12px;font-size:27px;line-height:1.14;letter-spacing:-.035em}
.requirement-card p{margin:0;color:#91a0b6;font-size:14px;line-height:1.75}
.download-panel{position:sticky;top:24px;padding:34px;border:1px solid #536cac;border-radius:20px;background:radial-gradient(circle at 50% 0,#315bd339,transparent 48%),linear-gradient(145deg,#10192a,#080d16);box-shadow:0 24px 70px #0007,0 0 55px #4556c31d}
.download-panel>span{color:#68e9ff;font:750 9px ui-monospace,monospace;letter-spacing:.14em}
.download-panel h2{margin:15px 0 10px;font-size:34px;line-height:1;letter-spacing:-.045em}
.download-panel>p{margin:0 0 22px;color:#9aa9be;font-size:14px;line-height:1.65}
.download-panel .button{width:100%}
.download-meta{display:grid;gap:9px;margin:22px 0 0;padding:18px 0 0;border-top:1px solid #253856;color:#71839c;font-size:11px}
.download-meta span{display:flex;justify-content:space-between;gap:18px}
.download-meta strong{color:#cbd5e4;font-weight:700;text-align:right}
.download-panel .download-account-note{margin:18px 0 0;color:#7788a1;font-size:12px;line-height:1.6;text-align:center}
.download-account-note a{color:#68e9ff;text-decoration:underline;text-underline-offset:3px}
.download-assurance{padding-bottom:120px;text-align:center}
.download-assurance h2{margin:20px auto 18px;max-width:720px;font-size:clamp(38px,4.8vw,62px);line-height:1;letter-spacing:-.052em}
.download-assurance>p{max-width:680px;margin:0 auto;color:#91a0b6;font-size:16px;line-height:1.75}
@media(max-width:800px){.download-hero{padding:70px 0 52px}.download-hero h1{font-size:50px}.download-hero>p{font-size:16px}.download-layout{grid-template-columns:1fr;padding-bottom:105px}.requirement-card{grid-template-columns:1fr;padding:25px}.download-panel{position:static}.download-assurance{padding-bottom:90px}.download-assurance h2{font-size:40px}}