:root {
  --mist: #edf0f7;
  --paper: #ffffff;
  --ink: #131a35;
  --ink-2: #4a5373;
  --ink-3: #7d86a3;
  --line: #d9deea;
  --indigo: #2b54c9;
  --indigo-deep: #1f3f9e;
  --mark: #ffe27a;
  --cap-edge: #c3cbdf;
  /* The app's own surfaces, for the popup and the quick bar drawn in the demo. */
  --app-subtle: #f3f4f7;
  --app-hover: #eceef2;
  --app-line: #e1e3e8;
  --sans: "Be Vietnam Pro", "Zen Kaku Gothic New", "Segoe UI", system-ui, sans-serif;
  --jp: "Zen Kaku Gothic New", "Be Vietnam Pro", "Yu Gothic UI", "Meiryo", sans-serif;
  --hand: "Patrick Hand", "Yomogi", "Segoe Print", cursive;
  /* Springs: opening overshoots a touch, closing settles without bouncing. */
  --spring-open: cubic-bezier(0.26, 1.12, 0.32, 1);
  --spring-close: cubic-bezier(0.3, 0.9, 0.32, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The page is as wide as a desktop screenshot can usefully be, with room at the sides. */
  --page: 1440px;
  --gutter: clamp(1rem, 4.8vw, 4.4rem);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:lang(ja) { font-family: var(--jp); font-feature-settings: "palt"; }

:lang(vi) { font-family: var(--sans); font-feature-settings: normal; }

/* Content written for one kind of user: a Vietnamese team member or a Japanese client. */
html[lang="ja"] [data-for="vi"],
html[lang="vi"] [data-for="ja"] { display: none; }

/* Japanese visitors: keep the Vietnamese defaults hidden until app.js has swapped the text. */
html[lang="ja"]:not(.ready) [data-i18n] { visibility: hidden; }

h1, h2, h3, p { margin: 0; }

.phrase { display: inline-block; white-space: nowrap; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Top bar */

/* Once the page scrolls, the bar floats as a pill over the content. */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    top 0.45s var(--spring-open),
    max-width 0.5s var(--spring-open),
    padding 0.45s var(--spring-open),
    border-radius 0.45s var(--ease-out),
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.bar[data-scrolled] {
  top: 0.6rem;
  max-width: 1100px;
  padding: 0.45rem 0.5rem 0.45rem 0.9rem;
  border-color: rgb(217 222 234 / 0.8);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 14px 34px -20px rgb(19 26 53 / 0.4);
}

.bar[data-scrolled] .btn-small { border-radius: 999px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand img { border-radius: 8px; }

.bar-end { display: flex; align-items: center; gap: 0.75rem; }

.lang {
  display: inline-flex;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.lang button {
  font: 600 0.85rem/1 var(--sans);
  white-space: nowrap;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}

.lang button[data-lang="ja"] { font-family: var(--jp); }

.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  /* As wide as its longest label in any language (app.js), with the shorter ones centered. */
  justify-content: center;
  gap: 0.6rem;
  background: var(--indigo);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--indigo-deep);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.btn:hover { background: #3260dc; }

.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--indigo-deep); }

.btn-small { white-space: nowrap; padding: 0.5rem 0.95rem; font-size: 0.9rem; border-radius: 10px; box-shadow: 0 3px 0 var(--indigo-deep); }

.btn-big { padding: 1rem 1.6rem; font-size: 1.1rem; }

.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--line);
  transition: transform 80ms ease, box-shadow 80ms ease, border-color 120ms ease;
}

.btn-ghost:hover { border-color: var(--cap-edge); }

.btn-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

.btn-ghost svg { width: 1.15em; height: 1.15em; fill: currentColor; }

.btn-ghost svg.line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }


/* Hero: the pitch and the download, then the desktop where the app is shown at work. */

main { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.hero { padding: 3.5rem 0 3rem; }

h1 {
  max-width: 20em;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

:lang(ja) h1 { font-weight: 900; letter-spacing: 0; line-height: 1.25; }

.lede { margin-top: 1rem; max-width: 36em; font-size: 1.2rem; color: var(--ink-2); text-wrap: pretty; }

:lang(ja) .lede { font-size: 1.1rem; line-height: 1.8; }

.cta { margin-top: 2rem; scroll-margin-top: 7rem; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; }

/* Which system to install on: picked from the browser, switched here. */
.os-pick {
  display: inline-flex;
  margin-bottom: 0.9rem;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.os-pick button {
  font: 600 0.95rem/1 var(--sans);
  white-space: nowrap;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease;
}

.os-pick button:hover { color: var(--ink); }

.os-pick button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

html:not([data-os="linux"]) [data-os-panel="linux"],
html[data-os="linux"] [data-os-panel="windows"] { display: none; }

/* The install command, drawn as a terminal line as tall as the download button beside it. */
.term {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  max-width: 100%;
  height: 3.75rem;
  padding: 0 0.5rem 0 1.15rem;
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 #070b1c;
  font: 500 1rem/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  color: #eef1fb;
}

.term-prompt { flex: none; color: #8f9ac6; user-select: none; }

/* One line, scrolled sideways on a phone: a command broken inside the address is hard to read. */
.term-cmd { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font: inherit; line-height: 1.6; }

.term-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #b7c0e2;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.term-copy:hover { background: rgb(255 255 255 / 0.1); color: #fff; }

.term-copy:focus-visible { outline-color: #8fb0ff; outline-offset: 0; }

.term-copy svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.term-icon-done,
.term-copy[data-copied] .term-icon-copy { display: none; }

.term-copy[data-copied] { color: #7fe0a6; }

.term-copy[data-copied] .term-icon-done { display: block; }

.cta-or { color: var(--ink-3); text-align: center; }

.cta-direct { display: inline-flex; align-items: center; gap: 0.4rem; }

.cta-hint { margin-top: 1rem; max-width: 52em; font-size: 1rem; color: var(--ink-2); text-wrap: pretty; }

/* Japanese lines break between phrases, not inside a word. */
:lang(ja) .cta-hint,
:lang(ja) .cta-meta { word-break: auto-phrase; }

.cta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.3em; margin-top: 0.4rem; font-size: 1rem; color: var(--ink-2); }

.direct { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

.direct:hover { color: var(--indigo); text-decoration-color: currentColor; }

.nowrap { white-space: nowrap; }


.intro .marker { animation: mark-in 0.9s var(--ease-out) 0.7s both; }

.settled .intro .marker { animation: none; background-size: 100% 42%; }

@keyframes mark-in {
  from { background-size: 0% 42%; }
  to { background-size: 100% 42%; }
}

.cta-meta.trust { flex-wrap: nowrap; gap: 0.4rem; margin-top: 0.9rem; }

.trust svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; }

/* The desktop: as wide as the page, the app shown at work on it. */
.desk { margin: 3rem 0 0; scroll-margin-top: 6rem; }

.meet { scroll-margin-top: 6rem; }

/*
 * The two features, side by side under the download so both are on the first screen: a small picture of what the
 * user sees (the translation popup, the subtitle bar), its name, one line and its key. Each leads to its full demo.
 */
.feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.feat {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  height: 100%;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.feat:hover { border-color: var(--cap-edge); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgb(19 26 53 / 0.45); }

.feat:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.fv {
  position: relative;
  flex: none;
  width: 15.5rem;
  height: 8rem;
  overflow: hidden;
  border-radius: 10px;
  font-family: var(--sans);
}

/* The translation: a message selected in the chat, and the popup under it. */
.fv-chat { padding: 0.7rem 0.75rem; background: var(--app-subtle); }

.fv-msg { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.68rem; line-height: 1.45; color: var(--ink); }

.fv-msg i { flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 4px; background: #1d8a6d; font: 700 0.6rem/1 var(--sans); color: #fff; font-style: normal; }

.fv-sel { background: #b4d5fe; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.fv-pop {
  position: absolute;
  left: 1.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.35rem 0.55rem 0.45rem;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px -12px rgb(19 26 53 / 0.45);
}

.fv-dir { display: block; padding-bottom: 0.2rem; border-bottom: 1px solid var(--app-line); font-size: 0.58rem; font-weight: 600; color: var(--ink-3); }

.fv-out { display: block; padding-top: 0.25rem; font-size: 0.72rem; line-height: 1.4; font-weight: 500; color: var(--ink); }

/* The subtitles: the bar over a dark call, as the app draws it. */
.fv-meet { background: #1b1b1f linear-gradient(90deg, #2c2c33 0 48%, transparent 48% 52%, #2c2c33 52%) 0.5rem 0.5rem / calc(100% - 1rem) 3.4rem no-repeat; }

.fv-bar {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.55rem;
  padding: 0 0.55rem 0.45rem;
  border-radius: 7px;
  background: rgb(22 23 27 / 0.92);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}

.fv-head { display: flex; align-items: center; gap: 0.3rem; height: 1.2rem; font-size: 0.55rem; color: #c9cbd1; }

.fv-head i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #ff4d4f; }

/* As in the app: the translation on top, the words said under a thin line. */
.fv-src { display: block; overflow: hidden; margin-top: 0.2rem; padding-top: 0.15rem; border-top: 1px solid rgb(255 255 255 / 0.15); font-size: 0.58rem; line-height: 1.5; color: rgb(255 255 255 / 0.75); white-space: nowrap; text-overflow: ellipsis; }

.fv-sub { display: block; font-size: 0.74rem; line-height: 1.35; font-weight: 500; color: #fff; }

.feat-copy { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.feat-copy b { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }

:lang(ja) .feat-copy b { font-weight: 900; letter-spacing: 0; }

.feat-copy em { padding: 0.12rem 0.5rem; border-radius: 999px; background: #fff4cc; font-size: 0.72rem; font-style: normal; font-weight: 700; letter-spacing: 0; color: #7a5a00; }

.feat-copy > span:not(.feat-key) { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

:lang(ja) .feat-copy > span { word-break: auto-phrase; }

.feat-key { display: flex; gap: 0.2rem; margin-top: 0.15rem; }

.feat-key kbd { display: inline-grid; place-items: center; min-width: 1.5rem; padding: 0.1rem 0.4rem; border: 1px solid var(--cap-edge); border-bottom-width: 2px; border-radius: 5px; background: #f6f7fb; font: 600 0.75rem/1.3 var(--sans); color: var(--ink); }

@media (max-width: 1100px) {
  .feats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .feat { flex-direction: column; align-items: stretch; }
  .fv { width: 100%; }
}

/* The hero arrives in steps: text rises out of a blur, then the demo screen tilts up into place. */
.intro { animation: rise 0.9s var(--ease-out) calc(var(--i, 0) * 90ms) both; }

.intro-stage { animation: tilt-up 1.2s var(--ease-out) 0.25s both; transform-origin: 50% 100%; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes tilt-up {
  from { opacity: 0; transform: perspective(1400px) rotateX(16deg) translateY(48px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Scroll reveals: hidden only when the script that reveals them runs (html.js). */
html.js [data-reveal],
html.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 0.8s ease calc(var(--d, 0) * 110ms),
    transform 1s var(--ease-out) calc(var(--d, 0) * 110ms),
    filter 0.8s ease calc(var(--d, 0) * 110ms);
}

html.js [data-reveal].in,
html.js [data-reveal-group].in > * { opacity: 1; transform: none; filter: none; }

/* A highlighter stroke swept under the words that matter, once they are on screen. */
.marker {
  background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 42%;
  border-radius: 4px;
  transition: background-size 0.9s var(--ease-out) 0.35s;
}

.in .marker,
html:not(.js) .marker { background-size: 100% 42%; }


/* Three points under the demo: what it shows, readable at a glance. */
.points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.5rem;
  margin: 0;
  padding: 3.5rem 0 1.5rem;
  list-style: none;
}

.points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
}

.points li::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.3 11.6 2.7 8l1.1-1.1 2.5 2.5 5.9-5.9 1.1 1.1z'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}


/*
 * Meeting subtitles: the copy and a meeting drawn like the app's subtitle bar (dark, at the bottom of the call). The
 * still state is the last frame; once in view, one 12 s loop plays the key, the bar, then two sentences, each
 * translated while it is heard, the first rolling up when the second comes. Without motion (reduced motion, no
 * script) it stays on that last frame.
 */
.meet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 2rem 3.5rem;
  margin: 3rem 0 0;
  padding: 2.5rem 2.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.meet-tag { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

.meet-tag span {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #fff4cc;
  font-size: 0.85rem;
  font-weight: 700;
  color: #7a5a00;
}

.meet-tag .meet-os { background: var(--mist); color: var(--ink-2); }

.meet h2 { margin: 0.9rem 0 0; font-size: 1.9rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; }

:lang(ja) .meet h2 { font-weight: 900; letter-spacing: 0; }

.meet-copy > p:not(.meet-tag) { margin: 0.75rem 0 0; max-width: 34em; font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }

.meet kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  margin: 0 0.12em;
  padding: 0.12em 0.4em;
  border: 1px solid var(--cap-edge);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f6f7fb;
  font: 600 0.82em/1.2 var(--sans);
  color: var(--ink);
  vertical-align: 0.08em;
}

.meet .keys { white-space: nowrap; }

:lang(ja) .meet p, :lang(ja) .meet li { word-break: auto-phrase; }

.meet-points { display: grid; gap: 0.55rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }

.meet-points li { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 600; color: var(--ink); }

.meet-points li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2em;
  border-radius: 50%;
  background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.3 11.6 2.7 8l1.1-1.1 2.5 2.5 5.9-5.9 1.1 1.1z'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.meet-copy > p.meet-how { margin-top: 1.2rem; font-size: 0.95rem; color: var(--ink-3); }

.meet-stage { margin: 0; }

.mt-win {
  position: relative;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  border-radius: 14px;
  background: #1b1b1f;
  box-shadow: 0 40px 80px -45px rgb(19 26 53 / 0.65), 0 0 0 1px rgb(19 26 53 / 0.08);
  font-family: var(--sans);
}

.mt-title { display: flex; align-items: center; gap: 0.45rem; height: 2.1rem; margin: 0; padding: 0 0.9rem; font-size: 0.8rem; color: rgb(255 255 255 / 0.55); }

.mt-title i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #2d8cff; }

.mt-grid { position: absolute; inset: 2.1rem 0.7rem 0.7rem; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 0.45rem; }

.mt-grid span { display: grid; place-items: center; border-radius: 9px; background: #2c2c33; font-size: 1.15rem; font-weight: 600; color: rgb(255 255 255 / 0.65); }

.mt-grid .mt-speaking { box-shadow: inset 0 0 0 2px #3fb950; }

.mt-key {
  position: absolute;
  white-space: nowrap;
  top: 38%;
  left: 50%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.mt-key kbd { font-size: 0.95rem; }

.mt-bar {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  width: 76%;
  padding: 0 0.85rem 0.65rem;
  border-radius: 9px;
  background: rgb(22 23 27 / 0.9);
  color: #fff;
  transform: translateX(-50%);
}

/* The head, as in the app: the dot, the meeting app, then "Lời gốc", pause, look, record and close. */
.mt-head { display: flex; align-items: center; gap: 0.4rem; height: 1.9rem; margin: 0; font-size: 0.72rem; color: rgb(255 255 255 / 0.75); white-space: nowrap; }

.mt-head i { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #ff4d4f; }

.mt-btns { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; color: rgb(255 255 255 / 0.85); }

.mt-btns b { font-weight: 500; font-size: 0.72rem; }

.mt-btns svg { width: 0.78rem; height: 0.78rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/*
 * The translations, newest at the bottom, the one before dimmed above it; under a thin line, the words said. A new
 * sentence takes room from nothing, so the one before rolls up, as in the app.
 */
.mt-outs { display: flex; flex-direction: column; justify-content: flex-end; }

.mt-out { margin: 0; overflow: hidden; font-size: 1rem; line-height: 1.4; font-weight: 500; }

.mt-out.mt-old { opacity: 0.7; }

.mt-srcs { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid rgb(255 255 255 / 0.15); }

.mt-src { margin: 0; overflow: hidden; font-size: 0.76rem; line-height: 1.5; color: rgb(255 255 255 / 0.75); white-space: nowrap; text-overflow: ellipsis; }

.mt-src span { display: inline; }

.meet.in .mt-key { animation: mt-key 12s infinite; }
.meet.in .mt-bar { animation: mt-bar 12s infinite; }
.meet.in .mt-old.mt-src span { animation: mt-say-old 12s linear infinite; }
.meet.in .mt-new.mt-src { animation: mt-room-src 12s infinite; }
.meet.in .mt-new.mt-src span { animation: mt-say-new 12s linear infinite; }
.meet.in .mt-old.mt-out { animation: mt-out-old 12s ease-out infinite; }
.meet.in .mt-new.mt-out { animation: mt-out-new 12s ease-out infinite; }
.meet.in .mt-speaking { animation: mt-speak 12s infinite; }
.meet.in .mt-head i { animation: mt-live 1.4s ease-in-out infinite; }

/* The key, pressed to turn the subtitles on, and again to turn them off. */
@keyframes mt-key {
  0%, 6% { opacity: 0; transform: translate(-50%, -40%) scale(0.92); }
  9%, 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  18%, 86% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  89%, 93% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%, 100% { opacity: 0; }
}

@keyframes mt-bar {
  0%, 14% { opacity: 0; transform: translate(-50%, 0.6rem); }
  17%, 92% { opacity: 1; transform: translate(-50%, 0); }
  96%, 100% { opacity: 0; transform: translate(-50%, 0); }
}

/* The first sentence: the words run in as they are heard, the translation comes while they still do. */
@keyframes mt-say-old {
  0%, 19% { clip-path: inset(0 100% 0 0); }
  34%, 100% { clip-path: inset(0 0 0 0); }
}

@keyframes mt-out-old {
  0%, 25% { opacity: 0; transform: translateY(0.3rem); }
  30%, 62% { opacity: 1; transform: none; }
  66%, 100% { opacity: 0.7; transform: none; }
}

/* The second: a new line for its words, then its translation under the first, which rolls up and dims. */
@keyframes mt-room-src {
  0%, 44% { max-height: 0; }
  46%, 100% { max-height: 1.6em; }
}

@keyframes mt-say-new {
  0%, 46% { clip-path: inset(0 100% 0 0); }
  66%, 100% { clip-path: inset(0 0 0 0); }
}

@keyframes mt-out-new {
  0%, 54% { max-height: 0; opacity: 0; }
  60% { max-height: 4.2em; opacity: 0; }
  64%, 100% { max-height: 4.2em; opacity: 1; }
}

@keyframes mt-speak {
  0%, 18% { box-shadow: inset 0 0 0 2px transparent; }
  20%, 66% { box-shadow: inset 0 0 0 2px #3fb950; }
  69%, 100% { box-shadow: inset 0 0 0 2px transparent; }
}

@keyframes mt-live { 50% { opacity: 0.35; } }

/*
 * How the app gets its AI: two plans side by side, MyTranslate Cloud's free plan first and marked, then the visitor's
 * own AI. One column on narrow screens.
 */
.plans {
  margin: 3rem 0 0;
  padding: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  scroll-margin-top: 6rem;
}

.plans-head h2 { margin: 0; font-size: 1.9rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; }

:lang(ja) .plans-head h2 { font-weight: 900; letter-spacing: 0; }

.plans-head p { margin: 0.6rem 0 0; max-width: 44em; font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }

:lang(ja) .plans p, :lang(ja) .plans li { word-break: auto-phrase; }

.plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--app-subtle);
}

.plan-free { border-color: var(--indigo); background: #f3f6fe; box-shadow: 0 0 0 1px var(--indigo); }

.plan-tag { margin: 0; }

.plan-tag span {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--mist);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-2);
}

.plan-free .plan-tag span { background: var(--indigo); color: #fff; }

.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin: 0.9rem 0 0; }

.plan-price b { font-size: 1.9rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }

.plan:not(.plan-free) .plan-price b { font-size: 1.45rem; }

.plan-price span { font-weight: 600; color: var(--ink-2); }

.plan-list { display: grid; gap: 0.55rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }

.plan-list li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.55; color: var(--ink); }

.plan-list li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2em;
  border-radius: 50%;
  background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.3 11.6 2.7 8l1.1-1.1 2.5 2.5 5.9-5.9 1.1 1.1z'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.plan-list b { font-weight: 700; }

.plan-note { margin: auto 0 0; padding-top: 1.1rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }

@media (max-width: 900px) {
  .meet { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 1.25rem; }
  .meet h2 { font-size: 1.55rem; }
  .plans { padding: 1.75rem 1.25rem; }
  .plans-head h2 { font-size: 1.55rem; }
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .mt-win { aspect-ratio: 4 / 3.4; }
  .mt-bar { width: 90%; padding: 0 0.7rem 0.55rem; }
  .mt-btns { gap: 0.45rem; }
  .mt-grid span { font-size: 0.95rem; }
  .mt-out { font-size: 0.86rem; }
  .mt-src { font-size: 0.7rem; }
  .plan { padding: 1.25rem; }
}

/* Help: one band under the points, the text on one side and the two ways in on the other. */
.help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin: 3rem 0 1rem;
  padding: 2rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.help-copy { flex: 1 1 28rem; }

.help h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }

:lang(ja) .help h2 { font-weight: 900; letter-spacing: 0; }

.help p { margin: 0.5rem 0 0; max-width: 40em; color: var(--ink-2); text-wrap: pretty; }

.help-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/*
 * The demo screen is drawn at a fixed size (1200 x 700; 440 x 760 on narrow screens, Slack maximized) and scaled to
 * its box by app.js (--s), so the cursor, the popup and the text keep their places at any width.
 * --pace scales every duration of the demo, its script's waits in app.js included: 0.5 plays it twice as fast.
 */
.cf-screen {
  --pace: 0.667;
  position: relative;
  aspect-ratio: 1200 / 700;
  overflow: hidden;
  border-radius: 14px;
  background: #1b2140;
  box-shadow: 0 50px 100px -50px rgb(19 26 53 / 0.6), 0 0 0 1px rgb(19 26 53 / 0.08);
}

.cf-screen[data-narrow] { aspect-ratio: 440 / 760; max-width: 480px; margin: 0 auto; }

.cf-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 700px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  color: #1d1c1d;
  font: 400 14px/1.45 "Segoe UI", system-ui, sans-serif;
}

[data-narrow] .cf-canvas { width: 440px; height: 760px; }

.cf-canvas p { margin: 0; }

.cf-canvas svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A Windows 11 wallpaper: soft blue light blooming from the lower middle. */
.cf-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 55% at 50% 100%, rgb(255 255 255 / 0.75), transparent 70%),
    radial-gradient(45% 70% at 30% 85%, #6f9cf0, transparent 70%),
    radial-gradient(45% 70% at 72% 85%, #8c7ff0, transparent 70%),
    radial-gradient(70% 60% at 50% 20%, #cfe0ff, transparent 75%),
    linear-gradient(180deg, #b9cdf5, #7f9fe6 60%, #6a7fd8);
}

/* Slack, as it looks on Windows: its own title bar with the window buttons, the rail, the sidebar, the channel. */
.cf-win {
  position: absolute;
  left: 48px;
  top: 20px;
  width: 1104px;
  height: 574px;
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px -20px rgb(15 20 60 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.18);
}

[data-narrow] .cf-win { inset: 0 0 48px; width: auto; height: auto; border-radius: 0; box-shadow: none; }

.cf-titlebar { flex: none; position: relative; display: flex; align-items: center; height: 40px; padding-left: 12px; background: #350d36; color: rgb(255 255 255 / 0.8); }

.cf-nav { display: flex; gap: 12px; }

.cf-nav svg { width: 17px; height: 17px; }

.cf-search {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 44%;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.16);
  font-size: 13px;
  transform: translateX(-50%);
}

.cf-search svg { width: 14px; height: 14px; }

[data-narrow] .cf-nav { display: none; }

[data-narrow] .cf-search { left: 12px; width: 60%; transform: none; }

.cf-winctl { margin-left: auto; display: flex; height: 100%; }

.cf-winctl i { position: relative; width: 46px; height: 100%; }

.cf-winctl i::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }

.cf-min::before { width: 10px; height: 1px; background: currentColor; }

.cf-max::before { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 2px; }

.cf-close::before,
.cf-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; background: currentColor; translate: -50% -50%; rotate: 45deg; }

.cf-close::after { rotate: -45deg; }

.cf-body { flex: 1; min-height: 0; display: flex; }

.cf-rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 70px; padding-top: 12px; background: #350d36; color: rgb(255 255 255 / 0.75); }

.cf-ws-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #fff; color: #350d36; font-weight: 800; font-size: 17px; }

.cf-rail-item { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; }

.cf-rail-item svg { width: 19px; height: 19px; }

.cf-rail-on { background: rgb(255 255 255 / 0.2); color: #fff; }

.cf-side { flex: none; width: 230px; padding: 12px 10px; background: #3f0e40; color: rgb(255 255 255 / 0.72); font-size: 15px; }

[data-narrow] .cf-rail,
[data-narrow] .cf-side { display: none; }

.cf-ws { display: flex; align-items: center; gap: 4px; padding: 0 8px 12px; color: #fff; font-size: 18px; font-weight: 800; }

.cf-ws svg { width: 16px; height: 16px; }

.cf-group { padding: 12px 8px 4px; font-size: 13px; }

.cf-ch { padding: 3px 8px; border-radius: 6px; }

.cf-on { background: #1164a3; color: #fff; font-weight: 700; }

.cf-dm { display: flex; align-items: center; gap: 8px; }

.cf-dm i { width: 8px; height: 8px; border-radius: 50%; background: #2bac76; }

.cf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cf-head { flex: none; display: flex; align-items: center; height: 50px; padding: 0 20px; border-bottom: 1px solid #e8e8e8; font-size: 17px; }

.cf-members { margin-left: auto; display: flex; align-items: center; padding: 3px 6px 3px 4px; border: 1px solid #ddd; border-radius: 7px; font-size: 13px; color: #616061; }

.cf-members i { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #fff; background: var(--c); }

.cf-members i + i { margin-left: -6px; }

.cf-members span { margin-left: 5px; }

/* Messages sit at the bottom, like a channel scrolled to the newest; older ones leave at the top. */
.cf-feed { flex: 1; min-height: 0; position: relative; overflow: hidden; transition: opacity calc(0.5s * var(--pace)) ease; }

/*
 * The messages stack from the top of a track that app.js moves up with a transform, so the newest sits at the bottom.
 * Stacking them at the bottom of the feed instead moved every older message in the layout at each new one, which
 * search engines count as the page shifting under the reader (Cumulative Layout Shift).
 */
.cf-track { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; padding-bottom: 6px; }

.cf-feed.leaving { opacity: 0; }

/* The day lines between yesterday's messages and today's. */
.cf-day { flex: none; position: relative; margin: 14px 20px 4px !important; text-align: center; }

.cf-day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #e8e8e8; }

.cf-day span { position: relative; padding: 2px 12px; border: 1px solid #e0e0e0; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }

.cf-msg { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 9px; padding: 7px 20px; }

.cf-msg.new { animation: cf-arrive calc(0.6s * var(--pace)) var(--spring-open) both; }

@keyframes cf-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cf-ava { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: var(--c); color: #fff; font-weight: 700; font-size: 15px; }

.cf-who { font-size: 15px; font-weight: 800; line-height: 1.3; }

.cf-who time { margin-left: 6px; font-size: 12px; font-weight: 400; color: #616061; }

.cf-text { font-size: 15px; line-height: 1.55; }

.cf-text b,
.cf-text u { font-weight: inherit; text-decoration: none; }

/* While the app reads the thread, a light passes over each earlier message, one after another. */
.cf-msg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(43 84 201 / 0.14) 45%, rgb(43 84 201 / 0.14) 55%, transparent) no-repeat -100% 0 / 50% 100%;
  opacity: 0;
  pointer-events: none;
}

.cf-msg.scan::after { animation: cf-scan calc(1.1s * var(--pace)) var(--ease-out) calc(var(--n, 0) * calc(420ms * var(--pace))) both; }

@keyframes cf-scan {
  0% { opacity: 1; background-position: -100% 0; }
  80% { opacity: 1; }
  100% { opacity: 0; background-position: 200% 0; }
}

/* The words a later message points back to, marked in the thread and in the popup alike. */
.cf-ref { border-radius: 3px; transition: background-color calc(0.6s * var(--pace)) ease, box-shadow calc(0.6s * var(--pace)) ease; }

.cf-ref.on { background: #dff3e8; box-shadow: 0 2px 0 #3fae78; }

.cf-composer { flex: none; margin: 0 20px; border: 1px solid #c4c4c4; border-radius: 9px; transition: border-color calc(0.2s * var(--pace)) ease, box-shadow calc(0.2s * var(--pace)) ease; }

.cf-composer.focus { border-color: #868686; box-shadow: 0 1px 6px rgb(0 0 0 / 0.08); }

.cf-tools { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: 9px 9px 0 0; background: #f8f8f8; color: #8a8a8a; font-size: 13px; font-weight: 700; }

.cf-tools i { display: grid; place-items: center; width: 24px; font-style: normal; }

.cf-tools .cf-tool-sep { width: 1px; height: 16px; background: #ddd; }

.cf-input { min-height: 46px; padding: 10px 12px 2px; font-size: 15px; line-height: 1.5; }

.cf-input:empty::before { content: attr(data-placeholder); color: #8a8a8a; }

.cf-input.flash { animation: flash calc(0.8s * var(--pace)) ease; border-radius: 4px; }

@keyframes flash {
  from { background: var(--mark); }
  to { background: transparent; }
}

.cf-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: #1d1c1d; animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

.cf-actions { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px; }

.cf-plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eee; color: #616061; font-size: 16px; line-height: 1; }

.cf-send { display: grid; place-items: center; width: 32px; height: 26px; border-radius: 5px; color: #b5b5b5; transition: background-color calc(0.2s * var(--pace)) ease, color calc(0.2s * var(--pace)) ease, transform calc(0.1s * var(--pace)) ease; }

.cf-send svg { width: 16px; height: 16px; }

.cf-composer.filled .cf-send { background: #007a5a; color: #fff; }

.cf-send.down { transform: scale(0.9); }

.cf-typing { flex: none; height: 26px; padding: 4px 22px 0; font-size: 12px; color: #616061; opacity: 0; transition: opacity calc(0.2s * var(--pace)) ease; }

.cf-typing.on { opacity: 1; }

/* Windows 11 taskbar: the apps in the middle, Slack open; MyTranslate waits in the tray by the clock. */
.cf-taskbar {
  position: absolute;
  inset: auto 0 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238 241 248 / 0.86);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgb(255 255 255 / 0.5);
}

.cf-tb-apps { display: flex; gap: 6px; }

.cf-tb-apps > i { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; }

.cf-tb-start { grid-template-columns: repeat(2, 9px); gap: 2px; place-content: center; }

.cf-tb-start b { width: 9px; height: 9px; border-radius: 1px; background: linear-gradient(135deg, #1fa2ff, #0067c0); }

.cf-tb-search svg { width: 20px; height: 20px; color: #333; }

.cf-tb-files::before { content: ""; width: 24px; height: 18px; border-radius: 3px; background: linear-gradient(#ffd75e, #f5b417); box-shadow: inset 0 4px 0 #e9a40e; }

.cf-tb-edge::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 200deg, #36c05f, #0f8fd8, #0b62c9, #36c05f); }

/* Slack: four rounded bars in its colours, crossing like a hash. */
.cf-tb-slack { background: rgb(255 255 255 / 0.7); }

.cf-slack-mark { position: relative; display: grid; place-items: center; width: 20px; height: 20px; }

.cf-slack-mark b { position: absolute; width: 5px; height: 16px; border-radius: 3px; }

.cf-slack-mark b:nth-child(1) { background: #36c5f0; transform: translate(-4px, -2px); }

.cf-slack-mark b:nth-child(2) { background: #2eb67d; transform: translate(-2px, 4px) rotate(90deg); }

.cf-slack-mark b:nth-child(3) { background: #ecb22e; transform: translate(4px, 2px); }

.cf-slack-mark b:nth-child(4) { background: #e01e5a; transform: translate(2px, -4px) rotate(90deg); }

.cf-tb-on::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 16px; height: 3px; border-radius: 2px; background: #0067c0; translate: -50% 0; }

.cf-tray { position: absolute; right: 10px; display: flex; align-items: center; gap: 12px; color: #222; }

.cf-tray svg { width: 16px; height: 16px; }

.cf-tray img { border-radius: 4px; }

.cf-tray img.ping,
.cf-tp-status img.ping { animation: cf-ping calc(1.2s * var(--pace)) var(--ease-out) 2; }

@keyframes cf-ping {
  from { box-shadow: 0 0 0 0 rgb(43 84 201 / 0.6); }
  to { box-shadow: 0 0 0 12px rgb(43 84 201 / 0); }
}

.cf-clock { display: grid; justify-items: end; font-size: 12px; line-height: 1.35; }

[data-narrow] .cf-tb-files,
[data-narrow] .cf-tb-edge,
[data-narrow] .cf-tray-chev,
[data-narrow] .cf-clock span + span { display: none; }

/*
 * Ubuntu: Slack's window under GNOME's black top bar, beside the Ubuntu Dock, on the Ubuntu wallpaper's aubergine and
 * orange. MyTranslate's icon sits with the status icons, as Ubuntu shows tray icons.
 */
html[data-os="linux"] .cf-wall {
  background:
    radial-gradient(55% 75% at 85% 105%, rgb(233 84 32 / 0.85), transparent 70%),
    radial-gradient(50% 60% at 15% 10%, rgb(160 50 130 / 0.7), transparent 70%),
    linear-gradient(155deg, #2c001e, #4e1442 50%, #7a2547);
}

html[data-os="linux"] .cf-screen:not([data-narrow]) .cf-win { left: 96px; top: 46px; width: 1064px; height: 558px; }

html[data-os="linux"] [data-narrow] .cf-win { inset: 32px 0 0; }

/* Slack on Ubuntu takes GNOME's round window buttons. */
html[data-os="linux"] .cf-winctl { gap: 12px; align-items: center; padding-right: 10px; }

html[data-os="linux"] .cf-winctl i { width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }

html[data-os="linux"] .cf-min::before { width: 8px; }

html[data-os="linux"] .cf-max::before { width: 7px; height: 7px; border-radius: 1px; }

html[data-os="linux"] .cf-close::before,
html[data-os="linux"] .cf-close::after { width: 9px; }

.cf-topbar {
  position: absolute;
  inset: 0 0 auto;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font: 700 13px/1 Ubuntu, Cantarell, "Segoe UI", system-ui, sans-serif;
}

/* GNOME's workspace dots, the current one drawn long. */
.cf-tp-ws { position: absolute; left: 14px; display: flex; gap: 6px; padding: 5px 10px; border-radius: 99px; }

.cf-tp-ws i { width: 7px; height: 7px; border-radius: 4px; background: rgb(255 255 255 / 0.5); }

.cf-tp-ws i:first-child { width: 32px; background: #fff; }

.cf-tp-clock { display: flex; gap: 10px; }

.cf-tp-status { position: absolute; right: 14px; display: flex; align-items: center; gap: 14px; }

.cf-tp-status svg { width: 15px; height: 15px; }

.cf-tp-status .cf-fillicon { fill: currentColor; stroke: none; }

.cf-tp-status img { border-radius: 4px; }

.cf-dock {
  position: absolute;
  left: 0;
  top: 32px;
  bottom: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  background: rgb(22 10 20 / 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.cf-dock > i { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; }

/* An open app: an orange dot by its icon, on the screen's edge. */
.cf-dk-on { background: rgb(255 255 255 / 0.12); }

.cf-dk-on::before { content: ""; position: absolute; left: -6px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #e95420; translate: 0 -50%; }

.cf-dk-slack .cf-slack-mark { width: 34px; height: 34px; border-radius: 8px; background: #fff; scale: 1.15; }

.cf-dk-firefox::before { content: ""; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #ffbd4f, transparent 45%), conic-gradient(from 210deg, #ff3750, #ff980e, #ffde3a, #ff7139, #9059ff, #ff3750); }

.cf-dk-files::before { content: ""; width: 36px; height: 28px; border-radius: 4px; background: linear-gradient(#a8a8a8, #8a8a8a); box-shadow: inset 0 6px 0 #6f6f6f; }

.cf-dk-term span { display: grid; place-items: center; width: 36px; height: 34px; border-radius: 7px; background: #2b2b2b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); color: #fff; font: 700 13px/1 ui-monospace, monospace; }

/* Show Apps, at the bottom of the dock. */
.cf-dk-apps { margin-top: auto; grid-template-columns: repeat(3, 5px); gap: 5px; place-content: center; }

.cf-dk-apps b { width: 5px; height: 5px; border-radius: 50%; background: #fff; }

[data-narrow] .cf-dock,
[data-narrow] .cf-tp-ws,
[data-narrow] .cf-tp-status svg:nth-child(3) { display: none; }

/* The selection, drawn over the text like the system highlight. */
.cf-sel { position: absolute; inset: 0; pointer-events: none; }

.cf-sel i { position: absolute; background: rgb(0 120 215 / 0.28); }

.cf-qbar {
  position: absolute;
  z-index: 3;
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 12px 28px -8px rgb(19 26 53 / 0.3), 0 2px 4px rgb(19 26 53 / 0.06);
  flex-direction: column;
  font-family: var(--sans);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity calc(0.14s * var(--pace)) ease, transform calc(0.16s * var(--pace)) ease;
}

.cf-qbar.open { opacity: 1; transform: none; }

.cf-qbtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }

.cf-qbtn svg { width: 15px; height: 15px; stroke-width: 2.2; }

.cf-qprimary { font-weight: 600; color: var(--ink); transition: background-color calc(0.08s * var(--pace)) ease, transform calc(0.08s * var(--pace)) ease; }

/* As in the app, the main button differs only by its bolder label; the pointer resting on it gives it the hover colour. */
.cf-qbar.hint .cf-qprimary { background: var(--app-hover); }

.cf-qprimary.down { background: var(--app-hover); transform: scale(0.96); }

.cf-qrow { display: flex; align-items: center; gap: 2px; }

.cf-qsep { width: 1px; height: 16px; margin: 0 2px; background: var(--line); }

.cf-qx { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink-3); }

.cf-qx svg { width: 13px; height: 13px; }

/* The shortcut of the button the pointer rests on, in a line under the buttons. */
.cf-qhint { display: none; align-items: center; gap: 4px; margin: 4px 0 0; padding: 6px 4px 2px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; }

.cf-qbar.hint .cf-qhint { display: flex; animation: cf-arrive calc(0.25s * var(--pace)) var(--ease-out) both; }

.cf-qhint span { margin-right: 2px; }

.cf-qhint kbd { padding: 2px 5px; border: 1px solid var(--cap-edge); border-radius: 4px; background: #f6f7fb; font: 600 10.5px/1 var(--sans); color: var(--ink); }

/* The popup grows out of where it was opened (--ox, --oy) and goes back into the chat box when used. */
.cf-pop {
  position: absolute;
  z-index: 3;
  width: var(--w, 440px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 28px 60px -18px rgb(19 26 53 / 0.5), 0 2px 6px rgb(19 26 53 / 0.08);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transform-origin: var(--ox, 50%) var(--oy, 0);
  transition: opacity calc(0.18s * var(--pace)) ease, transform calc(0.3s * var(--pace)) var(--spring-close), visibility calc(0.3s * var(--pace)), top calc(0.45s * var(--pace)) var(--spring-open);
}

.cf-pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity calc(0.14s * var(--pace)) ease, transform calc(0.45s * var(--pace)) var(--spring-open), top calc(0.45s * var(--pace)) var(--spring-open); }

/* The app's header: a grip to drag it, the chat it was opened in, a check's verdict, the AI, pin and close. */
.cf-pop-head { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 6px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.cf-pop-head svg { flex: none; width: 14px; height: 14px; }

.cf-pop-head .cf-grip { width: 14px; fill: currentColor; stroke: none; }

.cf-badge { display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 9.5px; font-weight: 700; line-height: 1; color: #fff; }

.cf-slack { background: #4a154b; }

.cf-claude { background: #d97757; }

.cf-where { font-size: 12.5px; font-weight: 600; color: var(--ink); }

.cf-fill { flex: 1; }

.cf-chip { padding: 2px 8px; border-radius: 999px; font-weight: 600; }

.cf-chip:empty { display: none; }

.cf-pop.check .cf-chip { background: #fdf1d9; color: #9a6200; }

.cf-ai { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; padding: 0 2px 0 4px; font-weight: 500; color: var(--ink-2); }

.cf-pop-head .cf-ai svg { width: 12px; height: 12px; opacity: 0.7; }

.cf-sec { padding: 11px 13px 12px; }

.cf-sec + .cf-sec { border-top: 1px solid var(--line); }

.cf-out { font-size: 15.5px; line-height: 1.6; }

.cf-out del,
.cf-issues del { color: #c42b1c; text-decoration-color: rgb(196 43 28 / 0.7); }

.cf-out ins,
.cf-issues ins { padding: 0 2px; border-radius: 2px; background: #e3f4ea; color: #1a7f4b; text-decoration: none; }

/* A check: its suggestion is labelled, and what it means follows in the visitor's language. */
.cf-pop:not(.check) .cf-sugg { display: none; }

.cf-meaning { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.cf-meaning:empty { display: none; }

.cf-skel { display: none; gap: 7px; padding: 4px 0 2px; }

.cf-skel i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #eef1f7 30%, #dde3f0 50%, #eef1f7 70%) 0 0 / 300% 100%; animation: cf-shimmer 1.1s linear infinite; }

.cf-skel i:last-child { width: 62%; }

.cf-pop.loading .cf-result .cf-skel,
.cf-pop.rloading .cf-rres .cf-skel { display: grid; }

@keyframes cf-shimmer { to { background-position: -150% 0; } }

.cf-back,
.cf-issues,
.cf-rres,
.cf-rback { display: none; }

.cf-pop.has-back .cf-back,
.cf-pop.has-issues.done .cf-issues,
.cf-pop.replied .cf-rres,
.cf-pop.rdone .cf-rback { display: block; animation: cf-arrive calc(0.45s * var(--pace)) var(--ease-out) both; }

.cf-back,
.cf-rback { background: #f6f7fb; }

.cf-back b,
.cf-rback b { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }

.cf-back p,
.cf-rback p { margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.cf-issues ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.cf-issues li { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; }

.cf-num { display: grid; flex: none; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #fdf1d9; font-size: 11px; font-weight: 700; color: #9a6200; }

.cf-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

.cf-kind { padding: 1px 6px; border-radius: 4px; background: var(--app-subtle); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

.cf-arrow { font-size: 12px; color: var(--ink-3); }

.cf-why { margin-top: 4px; color: var(--ink); }

.cf-label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }

.cf-label svg { width: 12px; height: 12px; color: var(--indigo); }

.cf-pop-foot { display: none; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line); }

.cf-pop.done .cf-pop-foot { display: flex; animation: cf-arrive calc(0.35s * var(--pace)) var(--ease-out) both; }

.cf-seg { display: none; padding: 2px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-subtle); font-size: 12px; white-space: nowrap; }

.cf-pop.keigo .cf-seg { display: inline-flex; }

.cf-seg span { padding: 4px 9px; border-radius: 6px; font-weight: 500; color: var(--ink-2); transition: background-color calc(0.2s * var(--pace)) ease, color calc(0.2s * var(--pace)) ease, box-shadow calc(0.2s * var(--pace)) ease; }

.cf-seg .on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(19 26 53 / 0.12); }

.cf-sbtn svg,
.cf-pbtn svg { flex: none; width: 13px; height: 13px; }

/* One look for every button, as in the app: the main action (usually Enter) differs only by its bolder label. */
.cf-sbtn,
.cf-pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--paper); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color calc(0.08s * var(--pace)) ease, transform calc(0.08s * var(--pace)) ease; }

.cf-pbtn { margin-left: auto; font-weight: 600; }

.cf-sbtn.down,
.cf-pbtn.down { background: var(--app-hover); transform: scale(0.95); }

.cf-sbtn kbd,
.cf-pbtn kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid #c9ccd3; border-radius: 4px; background: var(--app-subtle); font: 500 10.5px/1 var(--sans); color: var(--ink-2); }

.cf-pop:not(.read) .cf-for-read,
.cf-pop:not(.check) .cf-for-check { display: none; }

/* The reply box, in the footer's place while the user writes back from a message they read. */
.cf-replybox { display: none; padding: 9px 11px; border-top: 1px solid var(--line); }

.cf-pop.replying .cf-pop-foot { display: none; }

.cf-pop.replying .cf-replybox { display: block; animation: cf-arrive calc(0.35s * var(--pace)) var(--ease-out) both; }

.cf-rinput { min-height: 52px; padding: 7px 10px; border: 1px solid var(--indigo); border-radius: 7px; box-shadow: 0 0 0 3px rgb(43 84 201 / 0.12); font-size: 13.5px; line-height: 1.5; }

/* The caret stands before the placeholder, as in an empty box that has the focus. */
.cf-rinput.blank::after { content: attr(data-placeholder); color: var(--ink-3); }

/* Wraps like the app's: the actions move under the keigo choice when the row is too narrow for both. */
.cf-rrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

.cf-racts { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* The reply is written at a keigo level too, the user's default in the demo. */
.cf-pop .cf-rseg { display: inline-flex; margin-right: auto; }

.cf-rrow .cf-pbtn { margin-left: 0; }

.cf-pop.rchecked .cf-rrow .cf-sbtn { display: none; }

/* A copied reply: the note slides up from the popup's bottom edge. */
.cf-copied {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity calc(0.2s * var(--pace)) ease, transform calc(0.3s * var(--pace)) var(--spring-open);
}

.cf-copied svg { width: 14px; height: 14px; stroke: #7ee2a8 !important; stroke-width: 3 !important; }

.cf-copied.on { opacity: 1; transform: translate(-50%, 0); }

/* The keys being pressed, shown the way a screencast does. */
.cf-keys {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 64px;
  display: flex;
  gap: 7px;
  padding: 8px;
  border-radius: 14px;
  background: rgb(19 26 53 / 0.88);
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.5);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity calc(0.2s * var(--pace)) ease, transform calc(0.25s * var(--pace)) var(--spring-open);
}

.cf-keys.on { opacity: 1; transform: translate(-50%, 0); }

[data-narrow] .cf-keys { bottom: auto; top: 52px; }

/* Over a popup that reaches down to them, the keys stand at the top instead, so the buttons they press stay in sight. */
.cf-keys.high { bottom: auto; top: 52px; }

.cf-keys kbd {
  display: none;
  min-width: 46px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 0 #b9c1d6;
  color: var(--ink);
  font: 700 16px/1 var(--sans);
  text-align: center;
  transition: transform calc(0.08s * var(--pace)) ease, box-shadow calc(0.08s * var(--pace)) ease, background-color calc(0.08s * var(--pace)) ease, color calc(0.08s * var(--pace)) ease;
}

.cf-keys kbd.shown { display: block; }

.cf-keys kbd.down { transform: translateY(3px); box-shadow: 0 0 0 #b9c1d6; background: var(--indigo); color: #fff; }

/* At the end of the exchange, on the desktop under Slack: what it took. */
.cf-done {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 622px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 700 18px/1.2 var(--sans);
  white-space: nowrap;
  box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.5);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity calc(0.3s * var(--pace)) ease, transform calc(0.5s * var(--pace)) var(--spring-open);
}

.cf-done.on { opacity: 1; transform: translate(-50%, -50%); }

.cf-done i { width: 6px; height: 6px; border-radius: 50%; background: var(--mark); }

[data-narrow] .cf-done { top: 46%; flex-direction: column; gap: 4px; border-radius: 18px; text-align: center; }

[data-narrow] .cf-done i { display: none; }

.cf-cursor {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -2px 0 0 -3px;
  opacity: 0;
  transform: translate(var(--x, 600px), var(--y, 300px));
  transition: opacity calc(0.2s * var(--pace)) ease;
  pointer-events: none;
}

.cf-cursor.show { opacity: 1; }

.cf-cursor.glide { transition: opacity calc(0.2s * var(--pace)) ease, transform calc(0.9s * var(--pace)) cubic-bezier(0.45, 0, 0.2, 1); }

.cf-cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cf-arrow { fill: #fff !important; stroke: #111 !important; stroke-width: 1.5 !important; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25)); transform-origin: 4px 3px; transition: transform calc(0.12s * var(--pace)) ease; }

.cf-ibeam { display: none; stroke: #111 !important; transform: translate(-30%, -50%); }

.cf-cursor.ibeam .cf-arrow { display: none; }

.cf-cursor.ibeam .cf-ibeam { display: block; }

.cf-cursor::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(43 84 201 / 0.35);
  opacity: 0;
  transform: scale(0.3);
}

.cf-cursor.press .cf-arrow { transform: scale(0.86); }

.cf-cursor.press::after { animation: ripple calc(0.45s * var(--pace)) ease-out; }

@keyframes ripple {
  0% { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Without scripts the demo would stay blank. */
html:not(.js) .desk { display: none; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* Text pages: privacy policy and support. One article per language; the one matching <html lang> shows. */

html.js[lang="vi"] .doc article:not([lang="vi"]),
html.js[lang="ja"] .doc article:not([lang="ja"]),
html.js[lang="en"] .doc article:not([lang="en"]) { display: none; }

html:not(.js) .doc article + article { margin-top: 4rem; }

.doc { padding-bottom: 2rem; }

.doc article { max-width: 52rem; }

.doc-head { padding: 3rem 0 2.25rem; }

.doc-head h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); }

.doc-head .marker { animation: mark-in 0.9s var(--ease-out) 0.3s both; }

.doc-date,
.doc-lede { margin-top: 1rem; font-size: 1.1rem; color: var(--ink-2); }

.doc-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  margin-top: 1.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.doc-mail:hover { border-color: var(--indigo); box-shadow: 0 6px 18px -12px rgb(43 84 201 / 0.6); }

.doc-mail svg { flex: none; width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.doc-body {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px -40px rgb(19 26 53 / 0.35);
}

.doc-body section + section { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }

.doc-body h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }

.doc-body p,
.doc-body ul { margin: 0.75rem 0 0; color: var(--ink-2); line-height: 1.75; }

.doc-body ul { padding-left: 1.25rem; }

.doc-body li + li { margin-top: 0.5rem; }

.doc-body li::marker { color: var(--indigo); }

.doc-body strong { color: var(--ink); font-weight: 600; }

.doc-body a { color: var(--indigo); text-underline-offset: 0.18em; }

.foot a { color: inherit; text-decoration: none; }

/* Each part keeps its width in every language (app.js): the version in the middle, the links on the right. */
.foot > :nth-child(2) { text-align: center; }

.foot > :last-child { text-align: right; }

.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }

/* Smaller screens */

@media (max-width: 960px) {
  .hero { padding-top: 2.5rem; }
  /* The command takes its own line and the button sits under it, so "or" between them would dangle. */
  .term { flex-basis: 100%; }
  .cta-or { display: none; }
  .desk { margin-top: 2.5rem; }
}

@media (max-width: 720px) {
  .bar { padding: 1rem; }
  .doc-head { padding: 2rem 0 1.75rem; }
  .brand span { display: none; }
  .help { padding: 1.5rem 1.25rem; }
  .bar[data-scrolled] { top: 0.5rem; margin: 0 0.5rem; }
  .btn-big { padding: 0.9rem 1.15rem; font-size: 1rem; white-space: nowrap; }
  .term { height: 3.4rem; padding-left: 0.9rem; font-size: 0.9rem; }
  /* The command is longer than a phone is wide: its end fades out to show it scrolls; the copy button takes it all. */
  .term-cmd { mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
  .points li { font-size: 1.1rem; }
  /* Stacked on a phone: one under the other from the same left edge, as the rest of the page, not each centered
     on its own width (app.js gives each point the width of its longest language). */
  .points { flex-direction: column; align-items: stretch; padding-top: 2.5rem; }
  .points li { width: auto !important; }
}

/* Fingers need more room than a pointer: the language switch gets taller buttons on touch screens. */
@media (pointer: coarse) {
  .lang button { min-height: 2.5rem; }
}

@media (max-width: 400px) {
  .bar-end { gap: 0.4rem; }
  .lang button { padding: 0.45rem 0.6rem; }
}

@media (max-width: 360px) {
  /* The bar's three parts keep one width in every language: on the smallest phones they need the room. */
  .bar { gap: 0.5rem; }
  .bar[data-scrolled] { padding-left: 0.5rem; }
  .lang button { padding: 0.45rem 0.45rem; }
}

@media (max-width: 340px) {
  .btn-small { padding: 0.5rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .marker { background-size: 100% 42%; }
}