:root {
  --bg: #080a15;
  --bg-deep: #050611;
  --surface: #10152a;
  --surface-raised: #161d36;
  --ink: #f5f7ff;
  --muted: #aab4d0;
  --quiet: #737e9e;
  --line: rgba(230, 237, 255, 0.14);
  --line-strong: rgba(230, 237, 255, 0.24);
  --accent: #9baeff;
  --accent-bright: #71e5ff;
  --accent-warm: #ffbd85;
  --success: #6ee0bb;
  --glass: rgba(25, 33, 65, 0.48);
  --glass-strong: rgba(15, 20, 41, 0.78);
  --paper: #f4f6ff;
  --paper-ink: #101832;
  --shadow: 0 28px 80px rgba(0, 3, 17, 0.46);
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius: 26px;
  --radius-lg: 36px;
  --shell: min(1180px, calc(100vw - 56px));
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --utility: "Manrope", "Noto Sans SC", sans-serif;
  --portal-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --mono: "Space Mono", ui-monospace, monospace;
  color-scheme: dark;
}

/* Native system fonts preserve Japanese glyph shapes and Korean word spacing. */
html:lang(ja) {
  --sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --utility: "Manrope", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --portal-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  line-break: strict;
}
html:lang(ko) {
  --sans: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --utility: "Manrope", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --portal-serif: "Batang", "AppleMyungjo", "Noto Serif KR", serif;
}
html:lang(ko) :is(h1, h2, h3, p) { word-break: keep-all; overflow-wrap: break-word; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(820px 500px at 78% -5%, rgba(79, 107, 255, 0.24), transparent 70%),
    radial-gradient(620px 560px at -12% 36%, rgba(86, 230, 255, 0.12), transparent 72%),
    linear-gradient(165deg, #0b0e1d 0%, var(--bg) 38%, var(--bg-deep) 100%);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(2, 4, 13, 0.52) 100%);
}

a { color: inherit; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
}

::selection { color: #07111f; background: var(--accent-bright); }

.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  inset-inline-start: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  color: #07101e;
  background: var(--accent-bright);
  transform: translateY(-180%);
  transition: transform 0.16s ease;
}

.skip-link:focus { transform: none; }

.page-orbit {
  position: absolute;
  z-index: -1;
  width: 440px;
  aspect-ratio: 1;
  pointer-events: none;
  filter: blur(2px);
  border: 1px solid rgba(172, 197, 255, 0.09);
  border-radius: 50%;
}

.page-orbit::before,
.page-orbit::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: inherit;
  border-radius: inherit;
}

.page-orbit::after { inset: 28%; }
.page-orbit--one { top: 200px; right: -270px; transform: rotate(22deg); }
.page-orbit--two { top: 1580px; left: -335px; width: 600px; opacity: 0.42; }

/* Header */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  padding-top: 14px;
  transition: padding 0.22s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 8px 10px 8px 14px;
  border: 1px solid transparent;
  border-radius: 20px;
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.site-header.is-scrolled { padding-top: 9px; }

.site-header.is-scrolled .site-header__inner {
  border-color: rgba(255, 255, 255, 0.19);
  background: rgba(10, 14, 31, 0.64);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.brand img {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  box-shadow: 0 3px 12px rgba(88, 187, 255, 0.22);
}

.brand__copy { display: grid; gap: 0; line-height: 1.1; }
.brand__copy strong { font-size: 14px; letter-spacing: -0.03em; }
.brand__copy small {
  color: var(--quiet);
  font-family:var(--utility);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: clamp(28px, 5vw, 78px);
}

.site-nav a,
.text-action {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.site-nav a { border-radius: 10px; }
.site-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.text-action:hover { color: var(--ink); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

/* 外观由共享控件拥有；这里仅限制长语言名的占位，并对齐导航操作。 */
.ui-language-host { display: flex; align-items: center; min-width: 0; }
.site-header__actions select.ui-language { max-width: 168px; }
.site-header__actions > :is(.text-action, .button) { display: inline-flex; align-items: center; min-height: 44px; }

/* Button and recurring material */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 15px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.38), transparent 29%, transparent 66%, rgba(144, 182, 255, 0.16));
}

.button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 12px 26px rgba(0, 4, 19, 0.26);
}

.button:active { transform: translateY(0) scale(0.98); }

/* Primary action colors are owned by shared/design.ts and loaded from controls.css. */

.button--quiet {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.button--compact {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 12px;
  color: #0b1530;
  background: rgba(223, 231, 255, 0.94);
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(0, 0, 0, 0.2);
  font-size: 12px;
}

.button--compact:hover { color: #0b1530; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: var(--accent-bright);
  font-family:var(--utility);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(110, 224, 187, 0.12), 0 0 14px rgba(110, 224, 187, 0.68);
}

/* Hero */
.hero { position: relative; padding: clamp(58px, 8vw, 110px) 0 32px; }

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100px;
  left: 43%;
  width: min(74vw, 1020px);
  height: 580px;
  pointer-events: none;
  border-radius: 48% 52% 42% 58%;
  opacity: 0.78;
  filter: blur(16px);
  background:
    radial-gradient(circle at 34% 42%, rgba(90, 229, 255, 0.32), transparent 23%),
    radial-gradient(circle at 72% 28%, rgba(139, 120, 255, 0.38), transparent 31%),
    radial-gradient(circle at 55% 73%, rgba(64, 99, 255, 0.26), transparent 38%);
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(285px, 0.77fr) minmax(560px, 1.23fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
}

.hero__copy { padding: 16px 0; }

.hero h1,
.section-heading h2,
.player-showcase__copy h2,
.web-showcase__copy h2,
.closing-card h2 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 65px);
  font-weight: 800;
  letter-spacing: -0.068em;
  line-height: 1.08;
}

.hero h1 em {
  color: #d8e5ff;
  font-style: normal;
  text-shadow: 0 0 28px rgba(117, 191, 255, 0.22);
}

.hero__summary {
  max-width: 33em;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.hero__notes {
  display: grid;
  gap: 8px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12px;
}

.hero__notes li { display: flex; align-items: center; gap: 9px; }
.hero__notes span {
  color: var(--quiet);
  font-family: "Space Mono", monospace;
  font-size: 10px;
}

/* Watch page: a composite rendering of the context in which the extension lives. */
.watch-page {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(230, 239, 255, 0.24);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(36, 48, 91, 0.77), rgba(11, 15, 34, 0.93));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.23), inset 0 -1px 0 rgba(7, 9, 21, 0.54);
}

.watch-page::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.19), transparent 18%, transparent 71%, rgba(123, 140, 255, 0.16)),
    linear-gradient(0deg, rgba(0, 2, 12, 0.25), transparent 32%);
}

.watch-page__top,
.watch-page__content,
.watch-page__bottom { position: relative; z-index: 1; }

.watch-page__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: rgba(224, 231, 255, 0.55);
  background: rgba(3, 6, 19, 0.27);
  font-family:var(--utility);
  font-size: 9px;
  letter-spacing: 0.03em;
}

.watch-page__traffic { display: flex; gap: 5px; }
.watch-page__traffic i { width: 6px; height: 6px; border-radius: 50%; background: rgba(229, 236, 255, 0.24); }
.watch-page__traffic i:first-child { background: rgba(255, 164, 145, 0.66); }
.watch-page__traffic i:nth-child(2) { background: rgba(254, 206, 119, 0.61); }
.watch-page__traffic i:last-child { background: rgba(104, 222, 176, 0.61); }

.watch-page__address {
  justify-self: center;
  width: min(100%, 310px);
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: rgba(227, 235, 255, 0.62);
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-page__profile {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #19233e;
  background: linear-gradient(135deg, #d0dcff, #84dbed);
  font-size: 10px;
  font-weight: 800;
}

.watch-page__content {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(160px, 0.38fr);
  min-height: 394px;
}

.watch-page__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(2, 5, 18, 0.32);
}

.watch-page__logo {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 7px;
  color: #101a39;
  background: linear-gradient(135deg, #ced8ff, #70e2f7);
  font-family:var(--utility);
  font-size: 11px;
  font-weight: 800;
}

.watch-page__rail-line { width: 13px; height: 2px; border-radius: 99px; background: rgba(225, 235, 255, 0.27); }
.watch-page__rail-line.is-active { width: 18px; background: var(--accent-bright); box-shadow: 0 0 9px rgba(113, 229, 255, 0.5); }

.watch-page__stage { min-width: 0; padding: 16px 14px 13px; }

.watch-page__breadcrumbs {
  overflow: hidden;
  margin-bottom: 10px;
  color: rgba(234, 240, 255, 0.52);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-page__breadcrumbs b { padding: 0 2px; color: rgba(234, 240, 255, 0.25); }
.watch-page__breadcrumbs strong { color: rgba(243, 247, 255, 0.8); font-weight: 600; }

.pt-screen { position: relative; isolation: isolate; }

.player-screen {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 218px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(3, 8, 23, 0.1), rgba(3, 5, 17, 0.28) 44%, rgba(2, 4, 15, 0.82)),
    url("./art/monet-cliff-frame.jpg") center / cover no-repeat;
  box-shadow: 0 16px 28px rgba(0, 2, 13, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.player-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background: radial-gradient(circle at 80% 10%, rgba(153, 111, 255, 0.24), transparent 28%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.player-screen__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 35, 0.31), transparent 23%, transparent 53%, rgba(1, 4, 13, 0.87));
}

.player-screen__top {
  position: absolute;
  top: 10px;
  right: 11px;
  left: 11px;
  display: flex;
  justify-content: space-between;
  color: rgba(249, 251, 255, 0.82);
  font-family:var(--utility);
  font-size: 9px;
  font-weight: 700;
}

.player-screen__live { display: inline-flex; align-items: center; gap: 5px; }
.player-screen__live i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }

.pt-cue {
  position: absolute;
  z-index: 2;
  right: 9%;
  bottom: 49px;
  left: 9%;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
}

.pt-cue.is-turning { opacity: 0; transform: translateY(5px); }
.pt-cue p { margin: 0; }

.pt-cue__src {
  color: rgba(255, 255, 255, 0.89);
  font-family:var(--utility);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  line-height: 1.4;
}

.pt-cue__dst {
  margin-top: 4px !important;
  color: white;
  font-size: clamp(14px, 1.55vw, 19px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

[data-mode="src"] .pt-cue__dst,
[data-mode="dst"] .pt-cue__src { display: none; }

.pt-term {
  padding: 0 0.08em;
  border-radius: 3px;
  color: #fff4cb;
  background: linear-gradient(180deg, transparent 42%, rgba(255, 183, 107, 0.42));
}

.player-screen__controls {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 15px;
  align-items: center;
  gap: 9px;
}

.pt-play {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #091328;
  background: rgba(244, 249, 255, 0.91);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3), inset 0 1px 0 #fff;
  font-size: 8px;
  line-height: 1;
}

.pt-timeline {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.pt-timeline__played {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 7.6%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-bright), #d1e3ff);
  box-shadow: 0 0 8px rgba(113, 229, 255, 0.72);
  transition: width 0.35s ease;
}

.pt-tick {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
  background: #33405d;
  transform: translate(-50%, -50%);
}

.pt-tick.is-past { border-color: #c4e8ff; background: var(--accent-bright); }
.pt-tick.is-now { width: 10px; height: 10px; border-color: #fff; background: #fff; box-shadow: 0 0 12px rgba(139, 225, 255, 0.9); }

.pt-clock {
  color: rgba(244, 248, 255, 0.75);
  font-family: "Space Mono", monospace;
  font-size: 8px;
  white-space: nowrap;
}

.pt-clock b { padding: 0 2px; color: rgba(255,255,255,0.35); font-weight: 400; }
.player-screen__full { padding: 0; border: 0; color: rgba(255,255,255,0.8); background: transparent; font-size: 16px; }

.watch-page__metadata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}

.watch-page__metadata p { margin: 0 0 2px; color: var(--quiet); font-size: 9px; }
.watch-page__metadata h2 { margin: 0; font-family:var(--utility); font-size: 11px; letter-spacing: -0.02em; line-height: 1.2; }
.watch-page__metadata h2 span { color: var(--muted); font-weight: 500; }
.watch-page__metadata-actions { display: flex; gap: 9px; color: rgba(229, 235, 255, 0.66); font-family:var(--utility); font-size: 14px; }

.extension-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 12px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(235, 241, 255, 0.09);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.13);
}

.extension-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255,255,255,0.22), transparent 28%, transparent 76%, rgba(133, 143, 255, 0.12));
}

.extension-card > * { position: relative; z-index: 1; }

.extension-card__head { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; }
.extension-card__head img { width: 22px; height: 22px; border-radius: 7px; }
.extension-card__head div { display: grid; min-width: 0; }
.extension-card__head span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.extension-card__head b { color: var(--ink); font-size: 10px; line-height: 1.35; }
.extension-card__ready { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(110, 224, 187, 0.8); }

.extension-card__progress { padding: 9px; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; background: rgba(5, 9, 23, 0.24); }
.extension-card__progress > div:first-child { display:flex; justify-content:space-between; gap: 6px; color: var(--muted); font-size: 9px; }
.extension-card__progress strong { color: #ddecff; font-family:"Space Mono", monospace; font-size: 8px; font-weight: 400; }
.extension-card__meter { height: 3px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,0.16); }
.extension-card__meter i { display: block; width: 100%; height:100%; border-radius:inherit; background: linear-gradient(90deg, var(--accent-bright), #d6e0ff); box-shadow: 0 0 8px rgba(113, 229, 255, 0.5); }

.extension-card__ledger { min-height: 0; }
.extension-card__section-title { display:flex; align-items:center; justify-content:space-between; gap: 5px; margin-bottom: 5px; }
.extension-card__section-title span { font-size: 10px; font-weight: 700; }
.extension-card__section-title small { color: var(--quiet); font-size: 8px; }

.pt-ledger__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pt-ledger__empty { padding: 7px 0; color: var(--quiet); font-size: 9px; }
.pt-ledger__row { padding: 6px 7px; border: 1px solid transparent; border-radius: 8px; background: rgba(7, 10, 25, 0.18); transition: background-color .2s ease, border-color .2s ease; }
.pt-ledger__row--hit { border-color: rgba(146, 223, 255, 0.3); background: rgba(105, 176, 255, 0.14); }
.pt-gloss { display: grid; gap: 0; }
.pt-gloss__src { overflow: hidden; color: var(--muted); font-family:var(--utility); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pt-gloss__dst { color: #f2f6ff; font-size: 10px; font-weight: 700; line-height: 1.35; }

.extension-card__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; margin-top: auto; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; background: rgba(3, 6, 19, 0.28); }
.extension-card__modes button { min-height: 24px; padding: 2px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; }
.extension-card__modes button[aria-pressed="true"] { color: #101932; background: #edf4ff; box-shadow: 0 2px 5px rgba(0,0,0,.18), inset 0 1px 0 #fff; }

.watch-page__bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(218, 228, 255, 0.48);
  background: rgba(2, 4, 15, 0.22);
  font-size: 9px;
}

.watch-page__bottom span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.watch-page__bottom i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-warm); }

.platform-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 22px;
  color: var(--quiet);
  font-family:var(--utility);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.platform-strip > span { flex: 0 0 auto; }
.platform-strip > div { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-strip b { padding: 5px 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: rgba(214, 224, 250, 0.64); font-weight: 700; }

/* Sections */
.section { position: relative; padding: clamp(88px, 12vw, 166px) 0; }

.section-heading {
  display: grid;
  align-items: end;
  gap: 32px;
}

.section-heading--split { grid-template-columns: minmax(0, 1.05fr) minmax(270px, .72fr); }
.section-heading--split > p,
.section-heading--plans > p {
  max-width: 34em;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.section-heading h2 { font-size: clamp(33px, 3.5vw, 51px); }
.section-heading--compact { display: block; }

/* Translation flow */
.section--flow { padding-top: clamp(98px, 12vw, 160px); }

.translation-flow {
  position: relative;
  overflow: hidden;
  margin-top: clamp(37px, 5vw, 66px);
  padding: clamp(23px, 3.5vw, 48px);
  border: 1px solid rgba(215, 228, 255, 0.17);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 5%, rgba(95, 125, 255, 0.19), transparent 29%),
    linear-gradient(145deg, rgba(27, 37, 77, 0.67), rgba(8, 12, 28, 0.9));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.13);
}

.translation-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .58;
  background: linear-gradient(105deg, rgba(255,255,255,.1), transparent 19%, transparent 69%, rgba(104, 235, 255, .08));
}

.translation-flow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 35px;
}

.translation-flow__track::before { content:""; position:absolute; top:50%; right:2%; left:2%; height:1px; background: rgba(214,226,255,.18); }
.translation-flow__track span { position:relative; z-index:1; justify-self:center; width: 10px; height: 10px; border: 2px solid #5a678b; border-radius:50%; background: var(--surface); }
.translation-flow__track span.is-current { width: 14px; height: 14px; border-color: #dff5ff; background: var(--accent-bright); box-shadow: 0 0 0 5px rgba(113,229,255,.12), 0 0 20px rgba(113,229,255,.84); }

.translation-flow__columns { position:relative; display:grid; grid-template-columns: 1fr .68fr 1fr; gap: 12px; align-items:stretch; }
.translation-flow__line { min-height: 142px; padding: 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(4,8,23,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.translation-flow__line p { margin: 19px 0 14px; color:#f6f8ff; font-family:var(--utility); font-size:clamp(13px,1.35vw,17px); font-weight:600; line-height:1.45; }
.translation-flow__line small { color: var(--quiet); font-size: 10px; }
.translation-flow__line--context { display:flex; flex-direction:column; justify-content:center; text-align:center; border-color: rgba(113,229,255,.24); background: linear-gradient(155deg, rgba(55,119,182,.26), rgba(14,24,57,.52)); }
.translation-flow__line--context p { margin: 10px 0 6px; font-size: 12px; line-height: 1.7; }
.translation-flow__line--context strong { color: var(--accent-bright); }
.flow-icon { display:grid; width:27px; height:27px; place-items:center; margin:0 auto; border:1px solid rgba(184,238,255,.56); border-radius:9px; color:var(--accent-bright); background: rgba(108,220,255,.1); font-size:14px; box-shadow:0 0 18px rgba(113,229,255,.18); }
.timecode { color:#afc0ef; font-family:"Space Mono",monospace; font-size:10px; }
.translation-flow__line--output { border-color:rgba(190, 204, 255, .32); background:rgba(113, 134, 239, .11); }
.translation-flow__line--output p { color:#fff; }

.translation-flow__steps { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap: 16px; margin-top: 20px; }
.translation-flow__steps article { display:grid; grid-template-columns: auto 1fr; column-gap: 9px; }
.translation-flow__steps span { color: var(--accent-bright); font-family:"Space Mono",monospace; font-size:9px; }
.translation-flow__steps h3 { margin: 0; font-size: 13px; letter-spacing: -0.02em; }
.translation-flow__steps p { grid-column:2; margin:3px 0 0; color:var(--quiet); font-size:11px; line-height:1.6; }

/* Player showcase */
.section--player {
  overflow: hidden;
  background:
    radial-gradient(600px 400px at 0% 50%, rgba(89, 208, 255, 0.1), transparent 72%),
    linear-gradient(180deg, transparent, rgba(14, 20, 43, .42), transparent);
}

.player-showcase { display:grid; grid-template-columns: minmax(260px,.76fr) minmax(530px,1.24fr); gap: clamp(35px, 7vw, 108px); align-items:center; }
.player-showcase__copy > p:not(.eyebrow), .web-showcase__copy > p:not(.eyebrow) { max-width:34em; margin:22px 0 0; color:var(--muted); font-size:15px; line-height:1.9; }
.check-list { display:grid; gap:13px; margin:27px 0; padding:0; list-style:none; }
.check-list li { display:grid; grid-template-columns:20px 1fr; gap:10px; color:var(--muted); font-size:13px; line-height:1.6; }
.check-list i { display:grid; width:20px; height:20px; place-items:center; border:1px solid rgba(113,229,255,.35); border-radius:50%; color:var(--accent-bright); background:rgba(113,229,255,.1); font-size:11px; font-style:normal; }
.check-list b { color:var(--ink); }
.text-link { display:inline-flex; gap:8px; color:var(--accent-bright); font-size:14px; font-weight:700; text-decoration:none; }
.text-link:hover { color:#d6fbff; text-decoration:underline; text-underline-offset:4px; }

.overlay-demo {
  position:relative;
  min-height:410px;
  overflow:hidden;
  padding:14px;
  border:1px solid rgba(225,235,255,.2);
  border-radius:30px;
  background:rgba(19, 28, 59, .68);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.15);
}

.overlay-demo::after { content:""; position:absolute; z-index:0; top:-120px; right:-100px; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle,rgba(131,124,255,.32),transparent 67%); filter:blur(8px); }
.overlay-demo__chrome,.overlay-demo__video,.overlay-demo__dock,.visual-caption { position:relative; z-index:1; }
.overlay-demo__chrome { display:flex; align-items:center; gap:5px; height:30px; color:rgba(227,236,255,.55); font-family:var(--utility); font-size:9px; }
.overlay-demo__chrome span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); }
.overlay-demo__chrome b { margin-left:7px; font-weight:600; }
.overlay-demo__video { min-height:352px; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:17px; background:linear-gradient(180deg,rgba(8,10,28,.12),rgba(3,5,17,.9)),url("./art/monet-cliff-frame.jpg") center / cover; box-shadow:inset 0 0 90px rgba(1,3,12,.32); }
.overlay-demo__video::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,4,15,.45),transparent 52%); }
.overlay-demo__original,.overlay-demo__subtitle { position:absolute; z-index:1; left:7%; right:7%; text-align:center; text-shadow:0 2px 7px #000; }
.overlay-demo__original { bottom:103px; color:rgba(255,255,255,.88); font-family:var(--utility); font-size:14px; font-weight:600; }
.overlay-demo__subtitle { bottom:75px; color:#fff; font-size:20px; font-weight:700; }
.overlay-demo__controls { position:absolute; z-index:1; right:20px; bottom:17px; left:20px; display:grid; grid-template-columns:15px 1fr auto 13px; align-items:center; gap:10px; color:#fff; font-size:11px; }
.overlay-demo__controls i { font-style:normal; }
.overlay-demo__controls span { height:3px; border-radius:99px; background:rgba(255,255,255,.35); }
.overlay-demo__controls span b { display:block; width:47%; height:100%; border-radius:inherit; background:var(--accent-bright); }
.overlay-demo__controls em { font-family:"Space Mono",monospace; font-size:8px; font-style:normal; }

.overlay-demo__dock { position:absolute; right:25px; bottom:32px; width:178px; padding:13px; border:1px solid rgba(255,255,255,.26); border-radius:14px; background:rgba(236,242,255,.18); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 15px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3); }
.overlay-demo__dock > div:first-child { display:grid; grid-template-columns:19px 1fr auto; align-items:center; gap:7px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.15); font-size:10px; }
.overlay-demo__dock img { width:19px; height:19px; border-radius:6px; }
.overlay-demo__dock > div:first-child span { color:var(--muted); }
.overlay-demo__dock label { display:flex; justify-content:space-between; gap:7px; padding-top:10px; color:var(--muted); font-size:9px; }
.overlay-demo__dock strong { color:#f3f7ff; font-family:"Space Mono",monospace; font-size:8px; font-weight:400; }
.overlay-demo__sliders { display:grid; gap:7px; margin-top:9px; }
.overlay-demo__sliders i { position:relative; display:block; height:3px; border-radius:99px; background:rgba(255,255,255,.19); }
.overlay-demo__sliders i::before { content:""; display:block; width:55%; height:100%; border-radius:inherit; background:var(--accent-bright); }
.overlay-demo__sliders i:nth-child(2)::before { width:72%; }
.overlay-demo__sliders i:last-child::before { width:38%; }
.visual-caption { margin:10px 4px 0; color:var(--quiet); font-size:10px; }

/* Bento */
.section--bento { padding-top:clamp(92px,12vw,160px); }
.bento-grid { display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:15px; margin-top:38px; }
.bento-card { position:relative; min-height:350px; overflow:hidden; padding:23px; border:1px solid rgba(226,236,255,.14); border-radius:25px; background:linear-gradient(155deg,rgba(26,35,70,.68),rgba(9,13,29,.8)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.bento-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(132deg,rgba(255,255,255,.12),transparent 28%,transparent 78%,rgba(104,220,255,.08)); }
.bento-card > * { position:relative; z-index:1; }
.bento-card h3 { margin:18px 0 7px; font-size:18px; letter-spacing:-.03em; line-height:1.35; }
.bento-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.bento-card__top { display:flex; justify-content:space-between; color:var(--accent-bright); font-family:var(--utility); font-size:10px; font-weight:700; }
.bento-card__top i { padding:3px 6px; border:1px solid rgba(110,224,187,.3); border-radius:99px; color:var(--success); background:rgba(110,224,187,.08); font-size:8px; font-style:normal; }
.glossary-preview { display:grid; gap:6px; margin-top:22px; padding:10px; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:rgba(3,6,18,.26); }
.glossary-preview div { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:7px; padding:7px 3px; border-bottom:1px solid rgba(255,255,255,.07); }
.glossary-preview div:last-child { border-bottom:0; }
.glossary-preview small { color:var(--muted); font-family:var(--utility); font-size:10px; }
.glossary-preview b { color:#fff; font-size:12px; }
.glossary-preview em { padding:2px 5px; border-radius:5px; color:#aab7de; background:rgba(159,174,255,.12); font-size:8px; font-style:normal; }
.glossary-preview div:last-child em { color:#ffe1bf; background:rgba(255,189,133,.13); }

.bento-card--reuse { display:flex; flex-direction:column; justify-content:end; background:radial-gradient(circle at 50% 24%,rgba(112,227,255,.15),transparent 26%),linear-gradient(155deg,rgba(27,36,71,.68),rgba(9,13,29,.8)); }
.reuse-orb { position:absolute; top:35px; left:50%; display:grid; width:134px; height:134px; place-content:center; border:1px solid rgba(193,238,255,.5); border-radius:50%; background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.3),transparent 30%),rgba(89,163,220,.13); box-shadow:0 0 0 16px rgba(108,222,255,.04),0 0 52px rgba(89,185,255,.2),inset 0 1px 0 rgba(255,255,255,.25); transform:translateX(-50%); text-align:center; }
.reuse-orb span { font-family:"Space Mono",monospace; font-size:27px; line-height:1; }
.reuse-orb small { margin-top:5px; color:var(--muted); font-size:9px; }
.reuse-wave { position:absolute; top:106px; left:-20%; width:140%; height:2px; background:linear-gradient(90deg,transparent,rgba(113,229,255,.7),transparent); box-shadow:0 -16px 0 rgba(113,229,255,.11),0 16px 0 rgba(113,229,255,.11); transform:rotate(-7deg); }

.bento-card--privacy { display:flex; flex-direction:column; justify-content:end; background:radial-gradient(circle at 50% 24%,rgba(153,132,255,.16),transparent 29%),linear-gradient(155deg,rgba(29,34,72,.71),rgba(9,13,29,.8)); }
.privacy-preview { position:absolute; top:30px; left:50%; width:200px; height:160px; transform:translateX(-50%); }
.privacy-preview__ring { position:absolute; top:2px; left:50%; width:122px; height:122px; border:1px solid rgba(207,198,255,.55); border-radius:50%; box-shadow:0 0 0 14px rgba(158,141,255,.05),inset 0 1px 0 rgba(255,255,255,.2); transform:translateX(-50%); }
.privacy-preview__ring::after { content:""; position:absolute; inset:17px; border:1px dashed rgba(198,222,255,.27); border-radius:inherit; }
.privacy-preview__lock { position:absolute; top:40px; left:50%; display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(213,207,255,.62); border-radius:15px; color:#dbd5ff; background:rgba(157,136,255,.18); box-shadow:0 0 28px rgba(157,136,255,.28); font-family:"Space Mono",monospace; font-size:22px; transform:translateX(-50%); }
.privacy-preview small { position:absolute; bottom:2px; left:50%; width:220px; color:var(--quiet); font-size:9px; text-align:center; transform:translateX(-50%); }

/* Web demonstration */
.section--web { background:linear-gradient(180deg,transparent,rgba(17,23,51,.6),transparent); }
.web-showcase { display:grid; grid-template-columns:minmax(510px,1.08fr) minmax(265px,.72fr); gap:clamp(36px,7vw,100px); align-items:center; }
.web-showcase__browser { position:relative; overflow:hidden; border:1px solid rgba(224,234,255,.23); border-radius:25px; color:var(--paper-ink); background:#e8edf9; box-shadow:var(--shadow),inset 0 1px 0 #fff; }
.web-showcase__tabs { display:flex; align-items:center; gap:8px; height:37px; padding:0 12px; color:#586681; background:#cfd7eb; font-family:var(--utility); font-size:9px; }
.web-showcase__tabs span:first-child { padding:6px 18px; border-radius:8px 8px 0 0; color:#27314e; background:#edf1fa; }
.web-showcase__tabs span:nth-child(2) { margin-left:2px; font-size:14px; }
.web-showcase__tabs i { width:14px; height:14px; margin-left:auto; border-radius:4px; background:#a6b4d0; }
.web-showcase__address { display:flex; align-items:center; gap:7px; height:34px; margin:7px 12px; padding:0 10px; border-radius:7px; color:#7b88a3; background:#e0e6f4; font-family:var(--utility); font-size:9px; }
.web-showcase__address span { font-size:13px; }
.web-showcase__paper { min-height:330px; padding:32px 13% 36px; background:#f8f9fe; }
.web-showcase__kicker { margin:0; color:#7890b7; font-family:var(--utility); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.web-showcase__paper h3 { max-width:380px; margin:11px 0 1px; color:#111936; font-family:Georgia,"Times New Roman",serif; font-size:clamp(19px,2.2vw,28px); font-weight:500; letter-spacing:-.04em; line-height:1.15; }
.web-showcase__paper h4 { margin:0 0 23px; color:#63769b; font-size:14px; font-weight:500; }
.web-paragraph { padding:12px 0; border-top:1px solid #dce1ef; }
.web-paragraph p { margin:0; color:#69748c; font-family:Georgia,"Times New Roman",serif; font-size:11px; line-height:1.65; }
.web-paragraph p + p { margin-top:4px; color:#202a46; font-family:var(--sans); font-size:11px; }
.web-paragraph--selected { margin:0 -10px; padding:12px 10px; border-left:3px solid #6788e8; background:linear-gradient(90deg,rgba(108,142,241,.13),transparent); }
.web-showcase__selection { position:absolute; right:22px; bottom:21px; display:flex; align-items:center; gap:8px; padding:7px 8px 7px 11px; border:1px solid rgba(106,136,222,.3); border-radius:10px; color:#536795; background:rgba(250,252,255,.88); box-shadow:0 6px 18px rgba(67,86,133,.18); font-size:9px; }
.web-showcase__selection b { color:#1d2b56; font-weight:700; }
.web-showcase__selection span { padding:5px 7px; border-radius:6px; color:#fff; background:#536ed0; font-size:8px; }
.web-showcase__facts { display:grid; gap:0; margin-top:27px; border-top:1px solid var(--line); }
.web-showcase__facts div { display:grid; grid-template-columns:66px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.web-showcase__facts b { color:#eaf2ff; font-size:12px; }
.web-showcase__facts span { color:var(--quiet); font-size:11px; }

/* Plans and ending */
.section--plans { padding-top:clamp(95px,12vw,155px); }
.section-heading--plans { grid-template-columns:1fr minmax(245px,.55fr); }
.plan-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-top:38px; }
.plan-card { position:relative; display:flex; flex-direction:column; min-height:206px; padding:19px 15px; border:1px solid rgba(227,236,255,.15); border-radius:18px; background:rgba(22,29,59,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.plan-card p { margin:0; color:var(--muted); font-size:11px; }
.plan-card h3 { margin:10px 0 20px; color:#fff; font-family:var(--utility); font-size:23px; letter-spacing:-.06em; line-height:1; }
.plan-card h3 small { color:var(--quiet); font-size:9px; font-weight:600; letter-spacing:0; }
.plan-card > b { color:#dce8ff; font-family:"Space Mono",monospace; font-size:11px; font-weight:400; }
.plan-card > span { margin-top:7px; color:var(--quiet); font-size:10px; line-height:1.6; }
.plan-card--trial { background:linear-gradient(150deg,rgba(76,90,147,.5),rgba(17,22,48,.65)); }
.plan-card--featured { overflow:hidden; border-color:rgba(139,210,255,.58); background:linear-gradient(150deg,rgba(65,112,177,.55),rgba(27,31,78,.8)); box-shadow:0 12px 32px rgba(63,104,190,.17),inset 0 1px 0 rgba(255,255,255,.23); }
.plan-card--featured::after { content:""; position:absolute; top:-75px; right:-80px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(115,234,255,.28),transparent 68%); }
.plan-card--featured > * { position:relative; z-index:1; }
.plan-card--featured > i { align-self:flex-start; margin-bottom:8px; padding:3px 6px; border-radius:99px; color:#0b1a38; background:#b3ecff; font-size:8px; font-style:normal; font-weight:800; }
.plan-card--featured h3 { margin-top:7px; }
.plans-note { margin:14px 0 0; color:var(--quiet); font-size:11px; }

.section--closing { padding-top:28px; padding-bottom:clamp(86px,10vw,142px); }
.closing-card { position:relative; display:flex; justify-content:space-between; gap:35px; overflow:hidden; padding:clamp(28px,5vw,60px); border:1px solid rgba(217,237,255,.24); border-radius:var(--radius-lg); background:linear-gradient(125deg,rgba(67,84,163,.63),rgba(23,30,65,.84) 55%,rgba(8,12,31,.9)); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.2); }
.closing-card::before { content:""; position:absolute; top:-170px; right:-50px; width:420px; height:420px; border:1px solid rgba(206,233,255,.2); border-radius:50%; box-shadow:0 0 0 45px rgba(138,181,255,.05),0 0 0 90px rgba(138,181,255,.035); }
.closing-card > * { position:relative; z-index:1; }
.closing-card h2 { font-size:clamp(28px,3.5vw,46px); }
.closing-card p:not(.eyebrow) { max-width:35em; margin:16px 0 0; color:var(--muted); font-size:14px; }
.closing-card__actions { display:flex; flex:0 0 auto; flex-direction:column; align-items:stretch; justify-content:center; gap:9px; min-width:185px; }

.site-footer { border-top:1px solid rgba(255,255,255,.08); }
.site-footer__inner { display:grid; grid-template-columns:auto minmax(260px,1fr) auto; align-items:center; gap:30px; padding:30px 0 42px; }
.site-footer p { margin:0; color:var(--quiet); font-size:10px; line-height:1.7; }
.site-footer__inner > div { display:flex; gap:14px; }
.site-footer__inner > div a { color:var(--muted); font-size:11px; text-decoration:none; }
.site-footer__inner > div a:hover { color:var(--accent-bright); }

/* Capability fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled .site-header__inner { background: #10162a; }
  .button--quiet { background:#202944; }
  .extension-card, .overlay-demo__dock { background:#202945; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled .site-header__inner,
  .button--quiet,
  .extension-card,
  .overlay-demo__dock {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .site-header.is-scrolled .site-header__inner { background:#11172c; }
  .button--quiet { background:#26304d; }
  .extension-card, .overlay-demo__dock { background:#212a47; }
}

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

/* Responsive */
@media (max-width: 1120px) {
  :root { --shell:min(100% - 40px, 920px); }
  .hero__layout { grid-template-columns:1fr; gap:32px; }
  .hero__copy { max-width:660px; padding:0; }
  .hero h1 { font-size:clamp(40px,6vw,60px); }
  .watch-page { max-width:860px; }
  .player-showcase, .web-showcase { grid-template-columns:1fr; gap:38px; }
  .player-showcase__copy, .web-showcase__copy { max-width:650px; }
  .web-showcase__copy { order:-1; }
  .section-heading--plans { grid-template-columns:1fr; }
  .plan-track { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 780px) {
  :root { --shell:calc(100% - 32px); }
  .site-header { padding-top:8px; }
  .site-header__inner { min-height:53px; padding:6px 8px 6px 10px; border-radius:16px; }
  .site-nav { display:none; }
  .brand img { width:28px; height:28px; }
  .site-header__actions { gap:2px; max-width:100%; flex-wrap:wrap; justify-content:flex-end; }
  .text-action { padding:7px; }
  .button--compact { min-height:34px; padding:8px 10px; font-size:11px; }
  .hero { padding-top:50px; }
  .hero__summary { font-size:14px; }
  .hero__notes { grid-template-columns:1fr 1fr; font-size:11px; }
  .watch-page__content { grid-template-columns:1fr; }
  .watch-page__rail { display:none; }
  .watch-page__stage { padding:13px 12px 12px; }
  .extension-card { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.1); border-left:0; }
  .extension-card__head { grid-column:1 / -1; }
  .extension-card__ledger { display:none; }
  .extension-card__modes { margin-top:0; }
  .watch-page__bottom span:last-child { display:none; }
  .section { padding:85px 0; }
  .section-heading--split { grid-template-columns:1fr; }
  .translation-flow__columns { grid-template-columns:1fr; }
  .translation-flow__line { min-height:102px; }
  .translation-flow__line--context { min-height:83px; }
  .translation-flow__steps { grid-template-columns:1fr; gap:13px; }
  .translation-flow__steps p { max-width:37em; }
  .bento-grid { grid-template-columns:1fr; }
  .bento-card { min-height:285px; }
  .bento-card--glossary { min-height:330px; }
  .plan-track { grid-template-columns:repeat(2,1fr); }
  .site-footer__inner { grid-template-columns:1fr; gap:17px; padding:28px 0 35px; }
}

@media (max-width: 500px) {
  .brand__copy small { display:none; }
  .hero h1 { font-size:38px; }
  .hero__actions { display:grid; grid-template-columns:1fr; }
  .hero__notes { grid-template-columns:1fr; margin-top:25px; }
  .watch-page { border-radius:22px; }
  .watch-page__top { grid-template-columns:auto 1fr; gap:10px; padding:0 10px; }
  .watch-page__profile { display:none; }
  .watch-page__address { width:100%; }
  .player-screen { min-height:0; border-radius:11px; }
  .pt-cue { right:5%; bottom:42px; left:5%; }
  .pt-cue__src { font-size:9px; }
  .pt-cue__dst { font-size:13px; }
  .player-screen__controls { right:8px; bottom:8px; left:8px; grid-template-columns:20px minmax(0,1fr) auto; gap:7px; }
  .pt-clock { font-size:7px; }
  .player-screen__full { display:none; }
  .extension-card { grid-template-columns:1fr; }
  .extension-card__progress { display:none; }
  .platform-strip { align-items:flex-start; flex-direction:column; gap:9px; padding-top:16px; }
  .section-heading h2, .player-showcase__copy h2, .web-showcase__copy h2 { font-size:32px; }
  .translation-flow { padding:19px 15px; border-radius:23px; }
  .translation-flow__track { margin-bottom:24px; }
  .overlay-demo { min-height:310px; padding:10px; border-radius:22px; }
  .overlay-demo__video { min-height:260px; }
  .overlay-demo__dock { right:17px; bottom:26px; width:150px; padding:10px; }
  .overlay-demo__original { bottom:80px; font-size:10px; }
  .overlay-demo__subtitle { bottom:59px; font-size:15px; }
  .overlay-demo__controls { right:13px; bottom:11px; left:13px; }
  .overlay-demo__dock label { padding-top:7px; font-size:8px; }
  .overlay-demo__sliders { gap:5px; margin-top:6px; }
  .web-showcase__paper { min-height:290px; padding:25px 12% 30px; }
  .web-showcase__paper h3 { font-size:20px; }
  .web-showcase__selection { right:12px; bottom:13px; }
  .plan-track { grid-template-columns:1fr; }
  .plan-card { min-height:156px; }
  .plan-card h3 { margin-bottom:12px; }
  .closing-card { flex-direction:column; padding:28px 22px; border-radius:25px; }
  .closing-card__actions { width:100%; }
}

/* ==========================================================================
   Bright cliff palette
   --------------------------------------------------------------------------
   The page is the clear morning around the painting, not a dark cinema lobby.
   The video itself keeps a controlled shade so the bilingual subtitle remains
   legible; all surrounding product surfaces draw from the cliff's sky, sea
   foam and blue-grey rock.
   ========================================================================== */
:root {
  --bg: #eaf5fa;
  --bg-deep: #f9fcfe;
  --surface: #e1f1f8;
  --surface-raised: #ffffff;
  --ink: #18394c;
  --muted: #527386;
  --quiet: #7d9baa;
  --line: rgba(43, 111, 143, 0.17);
  --line-strong: rgba(43, 111, 143, 0.28);
  --accent: #347fa4;
  --accent-bright: #43bedc;
  --accent-warm: #d77d64;
  --success: #149875;
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(249, 253, 255, 0.92);
  --paper: #ffffff;
  --paper-ink: #18394c;
  --shadow: 0 24px 64px rgba(51, 105, 132, 0.16);
  color-scheme: light;
}

html { overflow-x: clip; }

body {
  background:
    radial-gradient(780px 560px at 79% -6%, rgba(119, 202, 232, 0.34), transparent 69%),
    radial-gradient(680px 640px at -12% 34%, rgba(174, 218, 238, 0.52), transparent 72%),
    linear-gradient(165deg, #f8fcfe 0%, #eaf5fa 39%, #f8fcfd 100%);
}

body::before {
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(33, 102, 137, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 102, 137, 0.035) 1px, transparent 1px);
}

body::after {
  background:
    radial-gradient(ellipse at center, transparent 34%, rgba(196, 223, 235, 0.28) 100%);
}

.page-orbit { border-color: rgba(46, 126, 163, 0.14); }

.site-header.is-scrolled .site-header__inner {
  border-color: rgba(255, 255, 255, 0.88);
  background: rgba(250, 254, 255, 0.72);
  box-shadow: 0 13px 32px rgba(36, 96, 126, 0.13), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(50, 114, 143, 0.1);
}

.brand img { box-shadow: 0 3px 12px rgba(67, 157, 190, 0.2); }
.site-nav a,
.text-action { color: var(--muted); }
.site-nav a:hover { color: var(--ink); background: rgba(64, 160, 197, 0.11); }

/* Shared product disclosure. Links stay native, including without JavaScript. */
.site-nav > a,
.site-products > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  white-space: nowrap;
}
.site-nav > a[aria-current="page"] { color: var(--ink); background: #e2f1fa; }
.site-products { position: relative; }
.site-products > summary {
  gap: 9px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.site-products > summary::-webkit-details-marker { display: none; }
.site-products > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.site-products[open] > summary,
.site-products > summary:hover { color: var(--ink); background: #e2f1fa; }
.site-products[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.site-products__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 248px;
  padding: 7px;
  border: 1px solid #dceaf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(43, 90, 116, .13);
}
.site-products__panel a { display: grid; gap: 4px; min-height: 72px; padding: 13px 14px; }
.site-products__panel a:hover { background: #eef7fc; }
.site-products__panel span { color: var(--ink); font-size: 14px; }
.site-products__panel small { color: var(--muted); font-size: 12px; font-weight: 400; }
@media (max-width: 780px) {
  :is(.home-page, .subscription-page) .site-header__inner { flex-wrap: wrap; gap: 4px 0; }
  :is(.home-page, .subscription-page) :is(main, section, figure)[id] { scroll-margin-top: 132px; }
  .site-nav {
    display: flex;
    order: 3;
    width: 100%;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid #dceaf2;
  }
}

.button {
  border-color: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: 0 9px 22px rgba(49, 113, 146, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.button::before {
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.86), transparent 31%, transparent 66%, rgba(83, 181, 213, 0.14));
}

.button--quiet {
  border-color: rgba(61, 136, 169, 0.2);
  background: rgba(255, 255, 255, 0.55);
}

.button--compact {
  color: #174158;
  background: rgba(248, 253, 255, 0.94);
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(52, 118, 146, 0.12);
}

.eyebrow { color: #287c9e; }
.status-dot { box-shadow: 0 0 0 4px rgba(20, 152, 117, 0.1), 0 0 14px rgba(20, 152, 117, 0.36); }

.hero::before {
  opacity: 0.95;
  background:
    radial-gradient(circle at 34% 42%, rgba(117, 208, 229, 0.48), transparent 24%),
    radial-gradient(circle at 72% 28%, rgba(166, 205, 239, 0.68), transparent 34%),
    radial-gradient(circle at 55% 73%, rgba(105, 174, 210, 0.26), transparent 40%);
}

.hero h1,
.section-heading h2,
.player-showcase__copy h2,
.web-showcase__copy h2,
.closing-card h2 { color: var(--ink); }

.hero h1 em { color: #27799d; text-shadow: 0 0 28px rgba(90, 188, 219, 0.17); }
.hero__summary { color: var(--muted); }
.hero__notes { color: var(--muted); }
.hero__notes span { color: #88a6b4; }

/* Headlines use two spoken beats, rather than relying on the browser to split
   Chinese glyphs wherever the column happens to end. */
.hero h1 {
  display: grid;
  gap: 0.07em;
  max-width: max-content;
  font-size: clamp(44px, 4vw, 58px);
  letter-spacing: -0.075em;
  line-height: 1.03;
  text-wrap: balance;
}

.hero h1 > span,
.hero h1 em,
.web-showcase__copy h2 > span,
.web-showcase__copy h2 em {
  display: block;
  white-space: nowrap;
}

.hero h1 em {
  position: relative;
  width: fit-content;
  padding: 0 0.07em 0.08em 0;
  font-style: normal;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.02em;
  bottom: 0.09em;
  left: -0.055em;
  height: 0.3em;
  border: 1px solid rgba(153, 221, 236, 0.52);
  border-radius: 0.15em 0.24em 0.18em 0.12em;
  background: linear-gradient(100deg, rgba(228, 249, 253, 0.84), rgba(136, 212, 231, 0.4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.hero__painting {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 22px 0 0;
  padding: 6px 12px 6px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 10px 24px rgba(61, 127, 151, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero__painting img {
  display: block;
  width: 70px;
  height: 50px;
  object-fit: cover;
  object-position: 72% 48%;
  border-radius: 9px;
}

.hero__painting figcaption { display: grid; gap: 1px; min-width: 0; line-height: 1.35; }
.hero__painting figcaption span {
  overflow: hidden;
  color: #6f93a2;
  font-family: var(--utility);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__painting figcaption b { color: #24566d; font-size: 11px; font-weight: 700; white-space: nowrap; }

.watch-page {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(251, 254, 255, 0.92), rgba(214, 239, 248, 0.88) 58%, rgba(187, 221, 237, 0.92));
  box-shadow: 0 28px 74px rgba(43, 116, 149, 0.18), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(34, 100, 133, 0.12);
}

.watch-page::before {
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.9), transparent 20%, transparent 69%, rgba(72, 174, 207, 0.17)),
    linear-gradient(0deg, rgba(117, 194, 222, 0.08), transparent 32%);
}

.watch-page__top {
  border-bottom-color: rgba(45, 113, 144, 0.13);
  color: rgba(41, 96, 120, 0.62);
  background: rgba(255, 255, 255, 0.42);
}

.watch-page__traffic i { background: rgba(48, 121, 149, 0.24); }
.watch-page__address {
  border-color: rgba(47, 120, 150, 0.13);
  color: rgba(36, 94, 118, 0.69);
  background: rgba(255, 255, 255, 0.56);
}

.watch-page__profile { color: #174257; background: linear-gradient(135deg, #f7fcff, #8fd5e9); }
.watch-page__content { background: rgba(255, 255, 255, 0.16); }
.watch-page__rail { border-right-color: rgba(45, 113, 144, 0.12); background: rgba(255, 255, 255, 0.34); }
.watch-page__logo { color: #16435a; background: linear-gradient(135deg, #f5fcff, #8dd8e8); }
.watch-page__rail-line { background: rgba(54, 122, 150, 0.28); }
.watch-page__rail-line.is-active { background: var(--accent-bright); box-shadow: 0 0 9px rgba(67, 190, 220, 0.45); }
.watch-page__breadcrumbs { color: rgba(35, 86, 108, 0.6); }
.watch-page__breadcrumbs strong { color: rgba(23, 57, 76, 0.88); }

.watch-page__metadata p { color: #7f9baa; }
.watch-page__metadata h2 { color: var(--ink); }
.watch-page__metadata h2 span { color: var(--muted); }
.watch-page__metadata-actions { color: rgba(41, 103, 130, 0.65); }

.extension-card {
  border-left-color: rgba(42, 109, 138, 0.15);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.74);
}

.extension-card::before {
  background: linear-gradient(130deg, rgba(255,255,255,0.86), transparent 29%, transparent 76%, rgba(74, 173, 205, 0.11));
}

.extension-card__head span { color: var(--muted); }
.extension-card__head b { color: var(--ink); }
.extension-card__progress {
  border-color: rgba(43, 114, 144, 0.12);
  background: rgba(235, 248, 252, 0.68);
}

.extension-card__progress > div:first-child { color: var(--muted); }
.extension-card__progress strong { color: #317593; }
.extension-card__meter { background: rgba(53, 125, 153, 0.17); }
.extension-card__meter i { background: linear-gradient(90deg, #3abbd9, #b0ebf5); box-shadow: 0 0 8px rgba(67, 190, 220, 0.35); }
.extension-card__section-title small { color: var(--quiet); }
.pt-ledger__empty { color: var(--quiet); }
.pt-ledger__row { background: rgba(235, 247, 251, 0.72); }
.pt-ledger__row--hit { border-color: rgba(55, 151, 184, 0.34); background: rgba(147, 218, 235, 0.38); }
.pt-gloss__src { color: var(--muted); }
.pt-gloss__dst { color: var(--ink); }
.extension-card__modes { border-color: rgba(43, 114, 144, 0.14); background: rgba(225, 243, 249, 0.64); }
.extension-card__modes button { color: var(--muted); }
.extension-card__modes button[aria-pressed="true"] { color: #164255; background: #fff; box-shadow: 0 2px 5px rgba(47, 112, 138, .14), inset 0 1px 0 #fff; }
.watch-page__bottom { border-top-color: rgba(45, 113, 144, 0.13); color: rgba(38, 93, 116, 0.62); background: rgba(255, 255, 255, 0.32); }
.platform-strip { color: var(--quiet); }
.platform-strip b { border-color: rgba(43, 113, 143, 0.12); color: rgba(37, 92, 114, 0.7); background: rgba(255,255,255,.32); }

.section--flow,
.section--bento,
.section--plans { background: transparent; }

.translation-flow {
  border-color: rgba(255, 255, 255, 0.88);
  background:
    radial-gradient(circle at 80% 5%, rgba(104, 195, 224, 0.22), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(221, 242, 249, 0.85));
  box-shadow: 0 21px 54px rgba(54, 120, 148, 0.13), inset 0 1px 0 #fff;
}

.translation-flow::before { background: linear-gradient(105deg, rgba(255,255,255,.8), transparent 20%, transparent 69%, rgba(60, 172, 205, .09)); }
.translation-flow__track::before { background: rgba(49, 121, 150, 0.2); }
.translation-flow__track span { border-color: #88afc1; background: #eef8fb; }
.translation-flow__track span.is-current { border-color: #fff; background: var(--accent-bright); box-shadow: 0 0 0 5px rgba(67,190,220,.15), 0 0 20px rgba(67,190,220,.45); }
.translation-flow__line { border-color: rgba(44, 115, 145, .15); background: rgba(255,255,255,.74); box-shadow: inset 0 1px 0 #fff; }
.translation-flow__line p { color: var(--ink); }
.translation-flow__line small { color: var(--quiet); }
.translation-flow__line--context { border-color: rgba(55, 157, 191, .31); background: linear-gradient(155deg, rgba(187,231,242,.68), rgba(238,249,252,.84)); }
.translation-flow__line--context strong { color: #267b9d; }
.flow-icon { border-color: rgba(45, 144, 177, .45); color: #2782a5; background: rgba(107,211,236,.18); box-shadow: 0 0 18px rgba(67,190,220,.16); }
.timecode { color: #4d8aa2; }
.translation-flow__line--output { border-color: rgba(70, 151, 183, .34); background: rgba(203, 237, 246, .72); }
.translation-flow__line--output p { color: #153c50; }
.translation-flow__steps span { color: #2b85a8; }
.translation-flow__steps h3 { color: var(--ink); }
.translation-flow__steps p { color: var(--quiet); }

.section--player {
  background:
    radial-gradient(620px 430px at 0% 50%, rgba(123, 208, 232, 0.25), transparent 72%),
    linear-gradient(180deg, transparent, rgba(215, 239, 248, .68), transparent);
}

@media (min-width: 1121px) {
  .player-showcase {
    grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(36px, 5vw, 76px);
  }

  .player-showcase__copy h2 {
    max-width: 16ch;
    font-size: clamp(33px, 3vw, 44px);
  }
}

.player-showcase__copy > p:not(.eyebrow),
.web-showcase__copy > p:not(.eyebrow) { color: var(--muted); }
.check-list li { color: var(--muted); }
.check-list b { color: var(--ink); }
.check-list i { border-color: rgba(47, 151, 183, .35); color: #237d9e; background: rgba(78, 190, 218, .12); }
.text-link { color: #247e9f; }
.text-link:hover { color: #165a73; }

.overlay-demo {
  border-color: rgba(255,255,255,.86);
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(211,239,248,.86));
  box-shadow: 0 22px 56px rgba(48, 115, 146, .15), inset 0 1px 0 #fff;
}

.overlay-demo::after { background: radial-gradient(circle,rgba(94, 194, 221, .28),transparent 67%); }
.overlay-demo__chrome { color: rgba(35, 94, 117, .6); }
.overlay-demo__chrome span { background: rgba(46, 117, 145, .27); }
.overlay-demo__video { box-shadow: inset 0 0 90px rgba(1,3,12,.32); }
.overlay-demo__dock {
  border-color: rgba(255,255,255,.72);
  color: var(--ink);
  background: rgba(252, 255, 255, .68);
  box-shadow: 0 15px 28px rgba(45, 107, 138, .23), inset 0 1px 0 #fff;
}

.overlay-demo__dock > div:first-child { border-bottom-color: rgba(44, 114, 144, .14); }
.overlay-demo__dock > div:first-child span,
.overlay-demo__dock label { color: var(--muted); }
.overlay-demo__dock strong { color: #246d89; }
.overlay-demo__sliders i { background: rgba(47, 120, 150, .19); }
.overlay-demo__sliders i::before { background: var(--accent-bright); }
.visual-caption { color: var(--quiet); }

.bento-card {
  border-color: rgba(255, 255, 255, .86);
  background: linear-gradient(155deg, rgba(255, 255, 255, .89), rgba(219, 241, 248, .86));
  box-shadow: 0 18px 45px rgba(56, 119, 147, .1), inset 0 1px 0 #fff;
}

.bento-card::before { background: linear-gradient(132deg, rgba(255,255,255,.88), transparent 28%,transparent 78%,rgba(104,202,229,.1)); }
.bento-card h3 { color: var(--ink); }
.bento-card p { color: var(--muted); }
.bento-card__top { color: #287e9f; }
.bento-card__top i { border-color: rgba(20,152,117,.24); color: #128367; background: rgba(20,152,117,.1); }
.glossary-preview { border-color: rgba(44, 114, 144, .13); background: rgba(247, 253, 255, .74); }
.glossary-preview div { border-bottom-color: rgba(44,114,144,.08); }
.glossary-preview small { color: var(--muted); }
.glossary-preview b { color: var(--ink); }
.glossary-preview em { color: #39758d; background: rgba(100, 188, 214, .12); }
.glossary-preview div:last-child em { color: #9d543f; background: rgba(215,125,100,.12); }

.bento-card--reuse { background: radial-gradient(circle at 50% 24%,rgba(99,197,222,.2),transparent 28%), linear-gradient(155deg,rgba(255,255,255,.89),rgba(215,241,248,.86)); }
.reuse-orb { border-color: rgba(82,175,202,.52); color: #1b6f90; background: radial-gradient(circle at 34% 25%,rgba(255,255,255,.86),transparent 30%),rgba(136,214,233,.3); box-shadow: 0 0 0 16px rgba(108,202,226,.08), 0 0 52px rgba(75,178,207,.2), inset 0 1px 0 #fff; }
.reuse-orb span { font-family:var(--sans); font-size: 33px; font-weight: 800; }
.reuse-orb small { color: var(--muted); }
.reuse-wave { background: linear-gradient(90deg,transparent,rgba(64,171,201,.62),transparent); box-shadow: 0 -16px 0 rgba(64,171,201,.11),0 16px 0 rgba(64,171,201,.11); }

.bento-card--privacy { background: radial-gradient(circle at 50% 24%,rgba(128,200,231,.2),transparent 29%),linear-gradient(155deg,rgba(255,255,255,.89),rgba(218,241,248,.86)); }
.privacy-preview__ring { border-color: rgba(76,159,191,.5); box-shadow: 0 0 0 14px rgba(110,194,220,.08), inset 0 1px 0 #fff; }
.privacy-preview__ring::after { border-color: rgba(69,147,178,.3); }
.privacy-preview__lock { border-color: rgba(87,171,203,.52); color: #277b9b; background: rgba(127,211,234,.24); box-shadow: 0 0 28px rgba(75,178,207,.22); }
.privacy-preview small { color: var(--quiet); }

.section--web { background: linear-gradient(180deg,transparent,rgba(202,234,246,.55),transparent); }
.web-showcase__browser { border-color: rgba(255,255,255,.9); box-shadow: 0 21px 52px rgba(57,119,146,.17),inset 0 1px 0 #fff; }
.web-showcase__copy h2 {
  display: grid;
  gap: 0.13em;
  max-width: max-content;
  font-size: clamp(34px, 3vw, 47px);
  letter-spacing: -0.065em;
  line-height: 1.1;
}
.web-showcase__copy h2 em { color: #27799d; font-style: normal; }
.web-showcase__facts { border-top-color: var(--line); }
.web-showcase__facts div { border-bottom-color: var(--line); }
.web-showcase__facts b { color: var(--ink); }
.web-showcase__facts span { color: var(--quiet); }

.section-heading--split > p,
.section-heading--plans > p { color: var(--muted); }

.plans-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 30px;
}

.plans-explainer article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 17px;
  background: rgba(255, 255, 255, .53);
  box-shadow: 0 11px 27px rgba(54, 119, 147, .08), inset 0 1px 0 rgba(255,255,255,.92);
}

.plans-explainer__mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(59, 158, 192, .25);
  border-radius: 10px;
  color: #237a9a;
  background: linear-gradient(145deg, rgba(241,253,255,.94), rgba(162,223,239,.57));
  box-shadow: inset 0 1px 0 #fff;
  font-family: "Space Mono", monospace;
  font-size: 13px;
}

.plans-explainer b {
  display: block;
  color: var(--ink);
  font-family:var(--utility);
  font-size: 13px;
  line-height: 1.45;
}

.plans-explainer p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.plans-explainer__future {
  background: linear-gradient(135deg, rgba(247, 254, 255, .8), rgba(205, 239, 247, .7)) !important;
}

.plans-explainer + .plan-track { margin-top: 18px; }

.plan-card {
  border-color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.66);
  box-shadow: 0 13px 31px rgba(54,119,147,.1), inset 0 1px 0 #fff;
}

.plan-card p { color: var(--muted); }
.plan-card h3 { color: var(--ink); }
.plan-card h3 small { color: var(--quiet); }
.plan-card > b { color: #2d7897; }
.plan-card > span { color: var(--quiet); }
.plan-card--trial { background: linear-gradient(150deg,rgba(233,249,253,.96),rgba(207,235,246,.84)); }
.plan-card--featured { border-color: rgba(89,183,211,.66); background: linear-gradient(150deg,rgba(237,253,255,.98),rgba(151,217,236,.78)); box-shadow: 0 16px 37px rgba(64,163,194,.18),inset 0 1px 0 #fff; }
.plan-card--featured::after { background: radial-gradient(circle,rgba(82,186,215,.25),transparent 68%); }
.plan-card--featured > i { color:#164358; background:#b5ecf6; }
.plans-note { color: var(--quiet); }

.closing-card {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(125deg,rgba(232,249,253,.95),rgba(180,222,238,.88) 55%,rgba(223,244,250,.96));
  box-shadow: 0 21px 54px rgba(51,116,145,.15),inset 0 1px 0 #fff;
}

.closing-card::before { border-color: rgba(74,162,194,.19); box-shadow: 0 0 0 45px rgba(89,184,214,.06),0 0 0 90px rgba(89,184,214,.035); }
.closing-card p:not(.eyebrow) { color: var(--muted); }

.site-footer { border-top-color: rgba(43,113,143,.11); background: rgba(255,255,255,.25); }
.site-footer p { color: var(--quiet); }
.site-footer__inner > div a { color: var(--muted); }
.site-footer__inner > div a:hover { color: #237b9b; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled .site-header__inner { background: #f8fcfe; }
  .button--quiet { background: #f6fbfd; }
  .extension-card, .overlay-demo__dock { background: #f8fcfe; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled .site-header__inner { background: #f8fcfe; }
  .button--quiet { background: #f6fbfd; }
  .extension-card, .overlay-demo__dock { background: #f8fcfe; }
}

@media (max-width: 780px) {
  .extension-card { border-top-color: rgba(42,109,138,.15); }
  .page-orbit { display: none; }
  .reuse-wave { left: 0; width: 100%; }
  .plans-explainer { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 52px); }
  .hero__painting { margin-top: 18px; }
  .web-showcase__copy h2 { font-size: clamp(32px, 9vw, 42px); }
}

@media (max-width: 390px) {
  .hero h1 { font-size: clamp(38px, 11vw, 43px); }
  .hero__painting { grid-template-columns: 62px minmax(0, 1fr); }
  .hero__painting img { width: 62px; height: 46px; }
  .hero__painting figcaption span { font-size: 7px; }
  .hero__painting figcaption b { font-size: 10px; }
}