/* zolatau.com / translate.zolatau.com */

:root {
  color-scheme: dark;
  --bg: #0D1038;
  --bg-deep: #08092A;
  --surface: #1A1B55;
  --surface-2: #242463;
  --ink: #EEEAF8;
  --ink-2: #B7ADDC;
  --ink-3: #8379B3;
  --line: rgba(183, 173, 220, .13);
  --line-strong: rgba(183, 173, 220, .28);
  --acc: #8B2BFF;
  --acc-hi: #B274FF;
  --acc-lo: #6E00D6;
  --acc-soft: rgba(168, 85, 255, .16);
  --acc-text: #C6A3FF;
  --on-acc: #FFFFFF;
  --asagi: #4CCAD2;
  --asagi-soft: rgba(76, 202, 210, .14);
  --shu: #E4572E;
  --pink: #F29BAE;
  --cat-eye: #3F8FD8;
  --cat-fur: #EEEAF8;
  --cat-pupil: #141033;
  --glass: rgba(33, 30, 92, .5);
  --glass-solid: #1E1C50;
  --glass-strong: rgba(26, 25, 80, .86);
  --glass-line: rgba(238, 234, 248, .14);
  --glass-hi: rgba(255, 255, 255, .07);
  --shadow: 0 24px 70px -28px rgba(4, 3, 24, .85);
  --glow-a: rgba(139, 43, 255, .18);
  --glow-b: rgba(76, 202, 210, .09);
  --grain: .07;

  --font-display: "ZL Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-text: "ZL Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "ZL Mono", "ZL Onest", "ZL Text", ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: clamp(15.5px, .92rem + .18vw, 17px);
  --fs-l: clamp(17px, 1rem + .45vw, 21px);
  --fs-h3: clamp(19px, 1.05rem + .55vw, 25px);
  --fs-h2: clamp(28px, .9rem + 4.6vw, 82px);
  --fs-name: clamp(56px, calc((min(100vw, 1448px) - 2 * var(--pad)) * .118), 150px);

  --pad: clamp(18px, 5vw, 64px);
  --maxw: 1320px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 26px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --nav-h: 60px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F0FA;
  --bg-deep: #E7E2F5;
  --surface: #FFFFFF;
  --surface-2: #F8F6FD;
  --ink: #1B1345;
  --ink-2: #4F4480;
  --ink-3: #7A6FA6;
  --line: rgba(27, 19, 69, .10);
  --line-strong: rgba(27, 19, 69, .2);
  --acc: #7A10E8;
  --acc-hi: #9B4DFF;
  --acc-lo: #5A00AE;
  --acc-soft: rgba(122, 16, 232, .12);
  --acc-text: #6D00C8;
  --on-acc: #FFFFFF;
  --asagi: #007C86;
  --asagi-soft: rgba(0, 124, 134, .1);
  --shu: #D81C0C;
  --cat-eye: #74C6FA;
  --cat-fur: #362B63;
  --cat-pupil: #141033;
  --glass: rgba(255, 255, 255, .65);
  --glass-solid: #F8F5FE;
  --glass-strong: rgba(252, 251, 255, .95);
  --glass-line: rgba(27, 19, 69, .15);
  --glass-hi: rgba(255, 255, 255, .6);
  --shadow: 0 24px 60px -30px rgba(27, 19, 69, .32);
  --glow-a: rgba(122, 16, 232, .14);
  --glow-b: rgba(0, 124, 134, .08);
  --grain: .045;
}

html[lang="vi"] { --font-text: "ZL Onest", "ZL Text", system-ui, sans-serif; }
html[lang="zh"] {
  --font-display: "ZL Display Latin", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-text: "ZL Text Latin", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
html[lang="zh"] :is(h1, h2, h3, .display) { font-weight: 800; }
html[lang="ar"], html[lang="th"] { --fs-m: clamp(16px, .95rem + .2vw, 17.5px); }

/* base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-m);
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
code, kbd, pre { font-family: var(--font-mono); }
::selection { background: var(--acc); color: var(--on-acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; inset-inline-start: 16px; top: -60px; z-index: 200;
  background: var(--acc); color: var(--on-acc); padding: 10px 16px; border-radius: 999px; font-weight: 700;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; }
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .02em; }
.i { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* page atmosphere: column rules, grain, soft light */

.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmos::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60vw 50vw at 88% -8%, var(--glow-a), transparent 60%),
    radial-gradient(55vw 45vw at -10% 30%, var(--glow-b), transparent 62%);
}
.atmos__cols {
  position: absolute; inset: 0; margin-inline: auto;
  width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); padding-inline: var(--pad);
}
.atmos__cols::before {
  content: ""; position: absolute; inset: 0 var(--pad);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 4) 100%;
  border-inline-end: 1px solid var(--line);
  opacity: .8;
}
.atmos::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain);
  mix-blend-mode: overlay;
}
@media (max-width: 760px) { .atmos__cols::before { background-size: calc(100% / 2) 100%; } }

.cross { position: absolute; width: 13px; height: 13px; color: var(--line-strong); pointer-events: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: currentColor; }
.cross::before { left: 6px; top: 0; width: 1px; height: 13px; }
.cross::after { top: 6px; left: 0; height: 1px; width: 13px; }

/* buttons, chips, small parts */

.btn {
  --b-bg: transparent; --b-ink: var(--ink); --b-line: var(--line-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-line);
  font-weight: 700; font-size: 15.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .3s, background-color .3s, color .3s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--b-hover, var(--glass-hi)); transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn .i { font-size: 18px; transition: transform .5s var(--ease); }
.btn:hover .i-arrow { transform: translateX(3px); }
[dir="rtl"] .btn .i-arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .i-arrow { transform: scaleX(-1) translateX(3px); }
.btn--acc { --b-bg: var(--acc); --b-ink: var(--on-acc); --b-line: transparent; --b-hover: var(--acc-hi); box-shadow: 0 10px 30px -12px rgba(139, 43, 255, .55); }
.btn--ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px;
  border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }

.glass {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 var(--glass-hi), var(--shadow);
}

.app-mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(145deg, var(--acc-hi), var(--acc) 45%, var(--acc-lo));
  color: #FFFFFF; box-shadow: 0 12px 30px -14px rgba(110, 0, 214, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.app-mark svg { width: 60%; height: 60%; fill: currentColor; }
.app-mark--lg { width: 76px; height: 76px; border-radius: 22px; }

/* vertical section label (tategaki) with its reading */

.vlabel {
  display: flex; align-items: center; gap: 10px;
  writing-mode: vertical-rl; color: var(--ink-3); user-select: none;
}
.vlabel b { font-family: var(--font-text); font-weight: 700; font-size: 18px; letter-spacing: .3em; color: var(--ink-2); }
.vlabel i { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; }
.vlabel::after { content: ""; width: 1px; height: 38px; background: var(--line-strong); order: 1; }
.vlabel i { order: 2; }
@media (max-width: 900px) {
  .vlabel { writing-mode: horizontal-tb; margin-bottom: 18px; }
  .vlabel b { letter-spacing: .12em; }
  .vlabel::after { width: 26px; height: 1px; }
}

.section { position: relative; padding-block: clamp(32px, 6vw, 88px); }
.section__head { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(20px, 3vw, 44px); align-items: start; }
.section__head .vlabel { grid-row: span 3; margin-top: 10px; }
.section__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.section__lead { margin-top: 22px; max-width: 62ch; font-size: var(--fs-l); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 900px) {
  .section__head { grid-template-columns: minmax(0, 1fr); }
  .section__head .vlabel { grid-row: auto; margin-top: 0; }
}

/* reveal of section titles: a single wipe, once */
.js .rv { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.js .rv.is-in { clip-path: inset(0 0 -20% 0); transform: none; }

/* navigation: a floating glass pill */

.nav {
  position: fixed; top: 14px; inset-inline: 0; z-index: 90;
  display: flex; justify-content: center; padding-inline: 12px; pointer-events: none;
  transition: transform .6s var(--ease);
}
.nav.is-hidden { transform: translateY(calc(-100% - 20px)); }
.nav__pill {
  position: relative; display: flex; align-items: center; gap: 4px;
  height: var(--nav-h); padding: 6px; border-radius: 999px; pointer-events: auto; max-width: 100%;
}
.js .nav__pill { clip-path: inset(0 calc(50% - 30px) round 999px); }
.nav.is-open .nav__pill { clip-path: inset(0 0 round 999px); transition: clip-path 1s var(--ease-io); }
.nav.is-done .nav__pill { clip-path: none; }
@media (max-width: 860px) { .nav__home { display: none; } }
.js .nav__pill > :not(.nav__mark) { opacity: 0; transition: opacity .5s var(--ease) calc(.35s + var(--d, 0s)); }
.nav.is-open .nav__pill > :not(.nav__mark) { opacity: 1; }

.nav__mark { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; transition: transform .6s var(--ease); }
.nav__mark > img, .nav__mark > svg { width: 34px; height: 34px; }
.nav__mark:hover { transform: rotate(-8deg) scale(1.06); }
.nav__mark .app-mark { width: 40px; height: 40px; border-radius: 12px; }

.nav__links { position: relative; display: flex; align-items: center; gap: 2px; padding-inline: 4px; }
.nav__links a {
  position: relative; z-index: 1; display: flex; align-items: center; height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: color .3s;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--acc);
}
.nav__blob {
  position: absolute; z-index: 0; top: 0; left: 0; height: 44px; border-radius: 999px;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line);
  opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
:root[data-theme="light"] .nav__blob { background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(122, 16, 232, .2); }
.nav__sep { width: 1px; height: 24px; background: var(--line-strong); margin-inline: 4px; }
.nav__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink-2);
  font-size: 13px; font-weight: 700; transition: color .3s, background-color .3s;
}
.nav__btn:hover { color: var(--ink); background: var(--glass-hi); }
.nav__btn .i { font-size: 19px; }
.nav__lang span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
.nav__menu-btn { display: none; }
.nav__home { display: inline-flex; align-items: center; gap: 8px; }
.nav__home .app-mark { width: 26px; height: 26px; border-radius: 8px; }

.theme-ico { position: relative; width: 20px; height: 20px; }
.theme-ico svg { position: absolute; inset: 0; width: 20px; height: 20px; transition: transform .6s var(--ease), opacity .4s; }
.theme-ico .sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="light"] .theme-ico .sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-ico .moon { opacity: 0; transform: rotate(90deg) scale(.4); }

@media (max-width: 860px) {
  .nav__links, .nav__sep { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .nav__pill { gap: 2px; }
}

/* language picker */

.lang { position: relative; }
.lang__menu {
  position: absolute; top: calc(100% + 12px); right: 12px; z-index: 5; pointer-events: auto;
  width: min(420px, calc(100vw - 24px)); padding: 10px; border-radius: 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px;
  background: var(--glass-strong);
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow);
  transform-origin: top right; animation: pop .35s var(--ease);
}
[dir="rtl"] .lang__menu { transform-origin: top left; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 42px; padding: 0 12px; border-radius: 12px; text-align: start; font-size: 15px; color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.lang__opt small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.lang__opt:hover, .lang__opt:focus-visible { background: var(--glass-hi); color: var(--ink); outline: none; }
.lang__opt[aria-selected="true"] { color: var(--ink); background: var(--acc-soft); }
.lang__opt[aria-selected="true"] small { color: var(--acc-text); }
.lang__opt [lang="ar"], .lang__opt [lang="th"] { font-family: var(--font-text); }
@media (max-width: 860px) {
  .lang__menu { position: fixed; top: calc(var(--nav-h) + 30px); left: 12px !important; right: 12px !important; width: auto; }
}

/* mobile menu */

.menu {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 48px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.menu__links { display: grid; gap: 4px; }
.menu__links a {
  display: flex; align-items: baseline; gap: 14px; padding-block: 8px;
  font-family: var(--font-display); font-size: clamp(34px, 10vw, 54px); line-height: 1.1;
  transform: translateY(20px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.menu__links a small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links li:nth-child(2) a { transition-delay: .05s; }
.menu.is-open .menu__links li:nth-child(3) a { transition-delay: .1s; }
.menu.is-open .menu__links li:nth-child(4) a { transition-delay: .15s; }
.menu.is-open .menu__links li:nth-child(5) a { transition-delay: .2s; }
.menu__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; color: var(--ink-3); }
.menu-lock { overflow: hidden; }

.menu-ico { position: relative; width: 20px; height: 12px; }
.menu-ico::before, .menu-ico::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.menu-ico::before { top: 1px; }
.menu-ico::after { top: 9px; }
[aria-expanded="true"] > .menu-ico::before { top: 5px; transform: rotate(45deg); }
[aria-expanded="true"] > .menu-ico::after { top: 5px; transform: rotate(-45deg); }

/* loader: a cat walks the progress line, then the screen splits along it */

.loader { position: fixed; inset: 0; z-index: 150; color: var(--ink); pointer-events: auto; }
.loader__half {
  position: absolute; inset-inline: 0; background: var(--bg-deep);
  transition: transform 1.05s var(--ease-io);
}
.loader__half--top { top: 0; bottom: 50%; }
.loader__half--bottom { top: 50%; bottom: 0; }
.loader.is-done .loader__half--top { transform: translateY(-100%); }
.loader.is-done .loader__half--bottom { transform: translateY(100%); }
.loader__stage { position: absolute; inset: 0; transition: opacity .35s; }
.loader.is-done .loader__stage { opacity: 0; }
.loader__word {
  position: absolute; left: 0; right: 0; bottom: calc(50% + 70px); text-align: center;
  font-family: var(--font-display); font-size: clamp(34px, 7vw, 78px); line-height: 1.1; color: var(--ink);
}
.loader__track { position: absolute; top: 50%; inset-inline: var(--pad); height: 1px; background: var(--line-strong); }
.loader__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; background: var(--acc); transform: scaleX(var(--p, 0)); transform-origin: left; }
[dir="rtl"] .loader__fill { transform-origin: right; }
.loader__cat {
  position: absolute; bottom: 0; inset-inline-start: calc(var(--p, 0) * 100%); width: 84px;
  margin-inline-start: -42px; color: var(--cat-fur); translate: 0 1px;
}
[dir="rtl"] .loader__cat svg { transform: scaleX(-1); }
.loader.is-done .loader__cat { animation: hop .5s var(--ease-io) forwards; }
@keyframes hop { 40% { translate: 0 -28px; } 100% { translate: 0 -8px; opacity: 0; } }
.loader__meta {
  position: absolute; top: calc(50% + 22px); inset-inline: var(--pad);
  display: flex; justify-content: space-between; color: var(--ink-3);
}
.loader__count { color: var(--acc-text); font-variant-numeric: tabular-nums; }
.no-loader .loader { display: none; }

/* cats */

.cat-walk .leg { transform-box: view-box; animation: step .5s ease-in-out infinite alternate; }
.cat-walk .l1 { transform-origin: 44px 46px; }
.cat-walk .l2 { transform-origin: 47px 47px; animation-delay: -.5s; }
.cat-walk .l3 { transform-origin: 72px 46px; animation-delay: -.5s; }
.cat-walk .l4 { transform-origin: 75px 47px; }
.cat-walk .body { animation: bob .25s ease-in-out infinite alternate; }
.cat-walk .wtail { transform-box: view-box; transform-origin: 36px 38px; animation: wtail 1.1s ease-in-out infinite alternate; }
@keyframes step { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes bob { to { transform: translateY(-1.6px); } }
@keyframes wtail { from { transform: rotate(8deg); } to { transform: rotate(-10deg); } }

.cat-sit { overflow: visible; color: var(--cat-fur); }
.cat-sit .tail { transform-box: view-box; transform-origin: 100px 140px; animation: tail 3.4s ease-in-out infinite; }
.cat-sit .eyes { transform-box: view-box; transform-origin: 70px 61px; animation: blink 5.5s infinite; }
.cat-sit .pupils { transition: transform .25s ease-out; }
.cat-sit .pupil, .cat-walk .pupil { fill: var(--cat-pupil); }
.cat-sit .mouth { stroke: var(--cat-pupil); }
.cat-sit .whiskers { stroke: var(--bg); }
.cat-sit .pink { fill: var(--pink); }
.cat-sit .eye, .cat-walk .eye { fill: var(--cat-eye); }
@keyframes tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes blink { 0%, 92%, 98%, 100% { transform: scaleY(1); animation-timing-function: ease-in-out; } 95% { transform: scaleY(.1); animation-timing-function: ease-in-out; } }
.cat-sit .tail-wrap { transform-box: view-box; transform-origin: 100px 140px; }
.cat-sit .eyes-wrap { transform-box: view-box; transform-origin: 70px 61px; }
.cat.is-happy .cat-sit { transform-origin: 50% 100%; animation: cat-hop .95s linear; }
.cat.is-happy .cat-sit .tail-wrap { animation: cat-wag 1.4s var(--ease-io); }
.cat.is-happy .cat-sit .eyes-wrap { animation: cat-squint 1.3s ease-in-out; }
@keyframes cat-hop {
  0% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  16% { transform: translateY(0) scale(1.04, .95); animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  48% { transform: translateY(-6%) scale(.98, 1.03); animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  78% { transform: translateY(0) scale(1.03, .97); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes cat-wag { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 80% { transform: rotate(-8deg); } }
@keyframes cat-squint { 0%, 100% { transform: scaleY(1); } 28%, 70% { transform: scaleY(.42); } }

/* ───────── home: hero ───────── */

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 40px); }
.hero__grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.hero__copy { position: relative; z-index: 2; padding-block: 24px; }

.news {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 5px 14px 5px 5px; border-radius: 999px; font-size: 14px; color: var(--ink-2);
  transition: color .3s, box-shadow .3s;
}
.news:hover { color: var(--ink); }
.news__tag {
  padding: 4px 10px; border-radius: 999px; background: var(--acc); color: var(--on-acc);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.news .i { font-size: 16px; transition: transform .5s var(--ease); }
.news:hover .i { transform: translateX(3px); }
[dir="rtl"] .news .i { transform: scaleX(-1); }

.hero__name {
  position: relative; margin-top: clamp(28px, 4vw, 52px);
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-name);
  line-height: .9; letter-spacing: -.03em;
}
.hero__gloss {
  display: flex; align-items: center; gap: 10px; height: 20px; margin-bottom: .16em;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; line-height: 1; color: var(--acc-text);
}
.hero__gloss::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.hero__gloss span { display: inline-block; transition: opacity .35s, transform .35s var(--ease); }
.hero__gloss.is-swap span { opacity: 0; transform: translateY(-6px); }
.hero__first, .hero__last { display: block; width: fit-content; white-space: nowrap; }
.hero__first { min-height: 1em; unicode-bidi: isolate; }
.hero__last { color: transparent; -webkit-text-stroke: 1.5px var(--ink); padding-bottom: .04em; }
.scr { color: var(--acc); }

.hero__lead { margin-top: clamp(22px, 3vw, 34px); max-width: 34em; font-size: var(--fs-l); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.hero__lead b { color: var(--ink); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }

.hero__art { position: relative; z-index: 1; align-self: end; display: flex; justify-content: center; }
.portrait {
  position: relative; container-type: inline-size;
  width: min(520px, 42vw, calc((100svh - 230px) / 1.35)); aspect-ratio: 1 / 1.345;
}
.portrait__coin {
  position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(90% 90% at 32% 24%, var(--acc-hi) 0%, var(--acc) 42%, var(--acc-lo) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 -40px 90px rgba(36, 0, 84, .34), 0 40px 90px -40px rgba(139, 43, 255, .5);
  overflow: hidden;
}
.portrait__coin::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34); box-shadow: inset 0 0 0 1px rgba(60, 0, 120, .16);
}
.portrait__coin::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%); animation: shine 9s var(--ease-io) 2.5s infinite;
}
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.portrait__img { position: absolute; top: 0; left: 8.7%; width: 82.6%; }
.portrait__img img {
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(circle 50cqw at 50% 62.7%, #000 calc(50cqw - .6px), transparent 50cqw), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, 100% 26.4%;
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(circle 50cqw at 50% 62.7%, #000 calc(50cqw - .6px), transparent 50cqw), linear-gradient(#000, #000);
  mask-size: 100% 100%, 100% 26.4%;
  mask-repeat: no-repeat;
}
.portrait__hanko {
  position: absolute; width: 16%; right: -1%; top: 60%; transform: rotate(-8deg);
  filter: drop-shadow(0 6px 12px rgba(80, 20, 0, .25));
}
.hero__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.hero__foot::before { content: ""; position: absolute; inset-inline: var(--pad); top: 0; height: 1px; background: var(--line); }
.hero__foot .cross { top: -6px; }
.hero__foot .cross:first-of-type { inset-inline-start: calc(var(--pad) - 6px); }
.hero__foot .cross:last-of-type { inset-inline-end: calc(var(--pad) - 6px); }
.clock { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.clock time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.clock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--asagi); box-shadow: 0 0 0 0 var(--asagi); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--asagi) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.scroll-hint span { position: relative; width: 1px; height: 26px; background: var(--line-strong); overflow: hidden; }
.scroll-hint span::after { content: ""; position: absolute; inset: 0; background: var(--acc); animation: drip 2.2s var(--ease-io) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* hero entrance, played once the loader is gone */
.js .hero [data-in] { opacity: 0; transform: translateY(18px); }
.is-ready .hero [data-in] { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--in, 0) * 90ms + 150ms); }
.js .hero__last { clip-path: inset(0 0 100% 0); }
.is-ready .hero__last { clip-path: inset(-10% -5% -20% -5%); transition: clip-path 1.1s var(--ease) .35s; }
.js .portrait__coin { transform: scale(.86); opacity: 0; }
.is-ready .portrait__coin { transform: none; opacity: 1; transition: transform 1.3s var(--ease) .25s, opacity .8s .25s; }
.js .portrait__img { transform: translateY(8%); opacity: 0; }
.is-ready .portrait__img { transform: none; opacity: 1; transition: transform 1.3s var(--ease) .45s, opacity .9s .45s; }
.js .portrait__hanko { opacity: 0; }
.is-ready .portrait__hanko { animation: stamp .6s cubic-bezier(.3, 1.6, .5, 1) 1.35s both; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(4deg) scale(1.9); }
  55% { opacity: 1; transform: rotate(-10deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
.is-ready .portrait { animation: thud .35s ease-out 1.66s; }
@keyframes thud { 40% { transform: translateY(3px); } }

@media (max-width: 900px) {
  :root { --fs-name: clamp(52px, calc((100vw - 2 * var(--pad)) / 4.5), 120px); }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 28px); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero__art { order: -1; }
  .portrait { width: min(78vw, 400px); }
  .hero__copy { padding-block: 0 8px; }
  .hero__name { margin-top: 18px; }
  .news { font-size: 13.5px; }
  .hero__foot { height: 64px; margin-top: 40px; }
}
@media (max-width: 480px) {
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__last { -webkit-text-stroke-width: 1.2px; }
}

/* ───────── chat demo (shared by both pages) ───────── */

.chat {
  position: relative; border-radius: var(--r-l); overflow: hidden; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; min-width: 0;
}
.chat__head {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--glass-line); color: var(--ink-2); font-size: 14px; font-weight: 700;
}
.chat__head b { color: var(--ink); font-weight: 700; }
.chat__hash { color: var(--ink-3); font-size: 20px; font-weight: 400; line-height: 1; }
.chat__state {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; min-width: 0; max-width: 72%;
  border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--glass-hi);
  transition: color .4s, background-color .4s, box-shadow .4s;
}
.chat__state .i { font-size: 14px; }
.chat__state span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__head b { white-space: nowrap; }
.chat.is-on .chat__state { color: var(--on-acc); background: var(--acc); }
.chat__body { display: flex; flex-direction: column; gap: 18px; padding: 20px 18px 22px; min-height: 250px; }
.msg { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.msg.is-off { opacity: 0; transform: translateY(10px); }
.msg__ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; }
.msg__ava img { width: 38px; height: 38px; }
.msg--them .msg__ava { background: linear-gradient(135deg, #4CCAD2, #3F6FD8); }
.msg__meta { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.msg__meta b { font-weight: 700; color: var(--ink); }
.msg__meta time { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.msg__text { color: var(--ink); overflow-wrap: anywhere; min-height: 1.5em; }
.msg__orig { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; transition: opacity .5s; }
.msg__orig.is-off, .msg__tr.is-off { opacity: 0; }
.msg__tr {
  margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--asagi-soft);
  border-inline-start: 2px solid var(--asagi); transition: opacity .5s;
}
.msg__tr small { display: block; font-size: 11.5px; color: var(--asagi); font-weight: 700; margin-bottom: 1px; }
.msg__tr p { color: var(--ink); overflow-wrap: anywhere; }
.ctx {
  position: absolute; z-index: 3; top: 28px; inset-inline-end: 6px; width: 190px; padding: 6px; border-radius: 12px;
  background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow);
  font-size: 13.5px; transform-origin: top right; transition: opacity .25s, transform .35s var(--ease);
}
[dir="rtl"] .ctx { transform-origin: top left; }
.ctx.is-off { opacity: 0; transform: scale(.94); pointer-events: none; }
.ctx__item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); }
.ctx__item .i { font-size: 15px; }
.ctx__item.is-hot { background: var(--acc); color: var(--on-acc); font-weight: 700; }
.ctx__bar { height: 8px; margin: 12px 10px; border-radius: 4px; background: var(--line); }
.ctx__sep { height: 1px; margin: 5px 4px; background: var(--glass-line); }
.chat__input {
  display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; height: 50px; padding: 0 8px 0 16px; border-radius: 14px;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line); color: var(--ink);
}
.chat__typing { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__typing:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
.chat__btn {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-3);
  transition: color .3s, background-color .3s;
}
.chat__btn .i { font-size: 22px; }
.chat.is-on .chat__btn { color: var(--acc); }
.chat__btn.is-busy::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid var(--acc);
  border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chat__tip {
  position: absolute; bottom: 72px; inset-inline-end: 12px; padding: 7px 11px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: opacity .3s, transform .4s var(--ease);
}
.chat__tip::after { content: ""; position: absolute; top: 100%; inset-inline-end: 22px; border: 6px solid transparent; border-top-color: var(--ink); }
.chat__tip.is-off { opacity: 0; transform: translateY(6px); }

/* ───────── home: showcase ───────── */

.showcase__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.showcase .app-mark { margin-bottom: 26px; }
.ticks { display: grid; gap: 14px; margin-top: 30px; max-width: 34em; }
.ticks li { position: relative; padding-inline-start: 30px; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: 16px; height: 9px;
  border-inline-start: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(-45deg); transform-origin: center;
}
[dir="rtl"] .ticks li::before { transform: rotate(45deg) scaleX(-1); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.showcase__demo { position: relative; }
.showcase__demo::before {
  content: ""; position: absolute; inset: 12% -6% -8% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--acc-soft), transparent);
}
@media (max-width: 900px) { .showcase__grid { grid-template-columns: minmax(0, 1fr); } .showcase__demo::before { inset: 10% 0 -6% 8%; } }

/* ───────── home: about ───────── */

.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.about__bio {
  margin-top: 30px; max-width: 25em; font-size: clamp(22px, 1.1rem + 1.1vw, 34px); line-height: 1.45; letter-spacing: -.005em;
  text-wrap: pretty;
}
.langs-title { margin-top: clamp(38px, 5.5vw, 72px); font-size: var(--fs-s); font-weight: 700; color: var(--ink-3); }
.langs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.langs li {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  min-height: 190px; padding: 20px 20px 18px; border-radius: var(--r-l); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.langs__name { font-family: var(--font-display); font-size: clamp(19px, .8rem + .85vw, 28px); line-height: 1.1; overflow-wrap: anywhere; }
.langs__name[lang="ja"] { font-size: clamp(22px, .9rem + 1vw, 30px); }
.langs__state { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.seal { position: relative; width: 38px; height: 38px; flex: none; }
.seal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seal circle { fill: none; stroke-width: 3; }
.seal .track { stroke: var(--line-strong); }
.seal .fill { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.langs .is-native .fill { stroke-dashoffset: 0; }
.langs .is-learning .fill { stroke-dashoffset: 58; }
.langs .is-planned .track { stroke-dasharray: 3 5; }
.langs .is-native { background: var(--acc); color: var(--on-acc); box-shadow: none; }
.langs .is-native .langs__state { color: var(--on-acc); }
.langs .is-native .track { stroke: rgba(255, 255, 255, .34); }
.langs .is-native .fill { stroke: var(--on-acc); }
.langs .is-learning { background: var(--glass); box-shadow: inset 0 0 0 1px var(--acc); }
.langs .is-learning::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--acc) 0 14px, transparent 14px 22px);
  animation: march 1.6s linear infinite;
}
@keyframes march { to { background-position: 22px 0; } }
.js .langs .fill { stroke-dashoffset: 100; }
.langs.is-in .is-native .fill { stroke-dashoffset: 0; }
.langs.is-in .is-learning .fill { stroke-dashoffset: 58; }
@media (max-width: 1100px) { .langs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .langs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .langs li { min-height: 150px; padding: 16px; gap: 22px; }
  .langs li:first-child { grid-column: span 2; min-height: 120px; }
}

/* ───────── home: contact ───────── */

.links { margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--line-strong); }
.links a {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 28px; align-items: center; gap: 18px;
  min-height: 92px; padding: 14px 8px; border-bottom: 1px solid var(--line-strong); overflow: hidden; isolation: isolate;
}
.links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--acc);
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
.links a:hover::before, .links a:focus-visible::before { transform: scaleY(1); }
.links a:hover, .links a:focus-visible { color: var(--on-acc); }
.links a:hover .links__handle, .links a:focus-visible .links__handle { color: var(--on-acc); }
.links__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }
.links__ico .i { font-size: 22px; }
.links__name { font-family: var(--font-display); font-size: clamp(24px, 1rem + 1.8vw, 44px); line-height: 1.1; }
.links__handle { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); transition: color .3s; }
.links .i-arrow-up { font-size: 24px; transition: transform .6s var(--ease); }
.links a:hover .i-arrow-up { transform: translate(4px, -4px); }
[dir="rtl"] .links .i-arrow-up { transform: scaleX(-1); }
[dir="rtl"] .links a:hover .i-arrow-up { transform: scaleX(-1) translate(4px, -4px); }
@media (max-width: 640px) {
  .links a { grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 14px; min-height: 80px; }
  .links__ico { width: 42px; height: 42px; }
  .links__handle { grid-column: 2; grid-row: 2; margin-top: -8px; }
  .links .i-arrow-up { grid-column: 3; grid-row: 1 / span 2; }
}

/* ───────── footer ───────── */

.footer { position: relative; padding-top: clamp(28px, 4.5vw, 70px); overflow-x: clip; }
.footer__stage { position: relative; }
.wordmark {
  display: block; width: 100%; text-align: center; white-space: nowrap; user-select: none;
  font-family: "ZL Display", var(--font-display); font-size: 20vw; line-height: .78; letter-spacing: -.035em;
  padding-top: .06em; color: transparent;
  background: linear-gradient(180deg, var(--surface-2) 10%, color-mix(in srgb, var(--surface) 60%, var(--bg)) 90%);
  -webkit-background-clip: text; background-clip: text;
}
:root[data-theme="light"] .wordmark { background-image: linear-gradient(180deg, #A897DB 10%, #CDC1EA 90%); }
.footer .cat {
  position: absolute; bottom: 80.9%; left: 63.5%; translate: -50% 0; width: clamp(64px, 8.6vw, 124px); cursor: pointer;
}
.cat__say {
  position: absolute; bottom: 92%; left: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s, transform .35s var(--ease);
}
.cat__say::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.cat.is-happy .cat__say { opacity: 1; transform: none; }
.footer__row {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 22px 26px; font-size: 13.5px; color: var(--ink-3);
}
.footer__row a { color: var(--ink-2); transition: color .3s; }
.footer__row a:hover { color: var(--acc-text); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.contact { padding-bottom: clamp(26px, 4vw, 52px); }

/* ───────── translate: hero ───────── */

.thero { position: relative; padding-top: calc(var(--nav-h) + clamp(34px, 6vw, 86px)); padding-bottom: clamp(40px, 6vw, 86px); }
.thero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.thero__grid > * { min-width: 0; }
.thero h1 {
  margin-top: 26px; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, calc((min(100vw, 1448px) - 2 * var(--pad)) * .05), 74px);
  line-height: 1.06; letter-spacing: -.03em; white-space: nowrap;
}
.thero__tagline { margin-top: 26px; max-width: 22em; font-size: clamp(20px, 1.05rem + .9vw, 30px); line-height: 1.4; font-weight: 700; text-wrap: balance; }
.thero__sub { margin-top: 16px; max-width: 36em; color: var(--ink-2); font-size: var(--fs-l); line-height: 1.6; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.thero__demo .chat__body { min-height: 300px; }
.js .thero [data-in] { opacity: 0; transform: translateY(18px); }
.is-ready .thero [data-in] { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--in, 0) * 90ms + 120ms); }
@media (max-width: 960px) {
  .thero__grid { grid-template-columns: minmax(0, 1fr); }
  .thero h1 { font-size: clamp(32px, calc((100vw - 2 * var(--pad)) / 8.7), 100px); }
}

/* ───────── translate: chat is not prose ───────── */

.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.compare > div { display: flex; flex-direction: column; gap: 18px; min-height: 200px; padding: 22px; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line-strong); }
.compare h3 { font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.compare p { font-size: clamp(19px, 1rem + .8vw, 26px); line-height: 1.35; overflow-wrap: anywhere; }
.compare .is-bad p { color: var(--ink-2); }
.compare .is-bad mark { background: none; color: var(--shu); text-decoration: underline wavy color-mix(in srgb, var(--shu) 70%, transparent); text-underline-offset: 5px; }
.compare .is-good { background: var(--acc); color: var(--on-acc); box-shadow: none; }
.compare .is-good h3 { color: var(--on-acc); opacity: .75; }
.compare .compare__note { margin-top: auto; font-size: 13.5px; line-height: 1.5; }
.compare .is-bad .compare__note { color: var(--ink-3); }
@media (max-width: 860px) { .compare { grid-template-columns: minmax(0, 1fr); } .compare > div { min-height: 0; } }

/* ───────── translate: features bento ───────── */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-l);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); overflow: hidden; min-width: 0;
}
.tile h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.tile p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.tile--a { grid-column: span 3; }
.tile--b { grid-column: span 3; }
.tile--c { grid-column: span 2; }
.tile--wide { grid-column: span 4; }
.tile__art { margin-top: auto; padding-top: 18px; }
.tile .tile__num { font-family: var(--font-display); font-size: clamp(56px, 5vw, 84px); line-height: .9; color: var(--acc-text); }
@media (max-width: 1000px) { .tile--a, .tile--b { grid-column: span 6; } .tile--c { grid-column: span 3; } .tile--wide { grid-column: span 6; } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile--a, .tile--b, .tile--c, .tile--wide { grid-column: auto; } }

.toggle-demo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill-state {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3);
}
.pill-state .i { font-size: 17px; }
.pill-state.is-on { background: var(--acc); color: var(--on-acc); box-shadow: none; }
.menu-demo { width: min(100%, 240px); padding: 6px; border-radius: 14px; background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow); font-size: 14px; }
.explain { padding: 14px 16px; border-radius: 14px; background: var(--asagi-soft); border-inline-start: 2px solid var(--asagi); font-size: 14px; line-height: 1.55; }
.explain small { display: block; margin-bottom: 4px; font-weight: 700; color: var(--asagi); font-size: 12px; }
.explain__msg { margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line); font-size: 15px; }
.keep { display: grid; gap: 10px; font-size: 14.5px; }
.keep > div { padding: 10px 14px; border-radius: 12px; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line); overflow-wrap: anywhere; }
.keep small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; }
.keep code { font-family: inherit; color: var(--acc-text); font-weight: 700; }

/* ───────── translate: providers ───────── */

.prov { margin-top: clamp(40px, 5vw, 64px); border-radius: var(--r-l); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-strong); }
.prov table { width: 100%; border-collapse: collapse; }
.prov th, .prov td { padding: 18px 22px; text-align: start; vertical-align: middle; }
.prov thead th { font-size: 13px; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); }
.prov tbody tr + tr td, .prov tbody tr + tr th { border-top: 1px solid var(--line); }
.prov tbody th { font-weight: 700; font-size: 17px; white-space: nowrap; }
.prov td { color: var(--ink-2); }
.yes, .no { display: inline-flex; align-items: center; gap: 8px; }
.yes::before, .no::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.yes::before { background: var(--acc); }
.no::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.prov__note { margin-top: 20px; font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 640px) {
  .prov th, .prov td { padding: 14px 16px; }
  .prov tbody th { white-space: normal; font-size: 16px; }
}

/* ───────── translate: install ───────── */

.install__box { margin-top: clamp(40px, 5vw, 64px); border-radius: var(--r-l); overflow: hidden; }
.tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--glass-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px;
  font-weight: 700; font-size: 14.5px; color: var(--ink-3); white-space: nowrap; transition: color .3s, background-color .3s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--on-acc); background: var(--acc); }
.tab .i { font-size: 17px; }
.panel { padding: clamp(20px, 3vw, 36px); }
.steps { display: grid; gap: 22px; counter-reset: s; }
.steps > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.steps > li::before {
  counter-increment: s; content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--acc-text); box-shadow: inset 0 0 0 1px var(--acc);
}
.steps > li > div { padding-top: 7px; min-width: 0; }
.steps p + p, .steps p + .cmd, .steps .cmd + p { margin-top: 10px; }
.steps .note { font-size: 14px; color: var(--ink-3); }
.cmd {
  display: flex; align-items: stretch; gap: 0; border-radius: 14px; overflow: hidden; direction: ltr;
  background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-strong);
}
:root[data-theme="light"] .cmd { background: #EDE7FA; }
:root[data-theme="light"] .cmd pre { color: #2E2359; }
:root[data-theme="light"] .copy { color: #2E2359; border-color: rgba(27, 19, 69, .14); background: rgba(27, 19, 69, .04); }
:root[data-theme="light"] .copy:hover { background: rgba(27, 19, 69, .09); }
:root[data-theme="light"] .copy.is-done { color: var(--on-acc); background: var(--acc); }
.cmd pre {
  flex: 1; min-width: 0; margin: 0; padding: 16px 18px; overflow-x: auto; white-space: pre; tab-size: 2;
  font-size: 13.5px; line-height: 1.6; color: #EEEAF8; font-variation-settings: "wdth" 90; scrollbar-width: thin;
}
.cmd pre::before { content: "›"; margin-inline-end: 10px; color: var(--acc); }
.cmd pre.multi::before { content: none; }
.copy {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-left: 1px solid; border-color: rgba(238, 234, 248, .12);
  color: #EEEAF8; font-size: 13.5px; font-weight: 700; background: rgba(255, 255, 255, .04); transition: background-color .3s, color .3s;
}
.copy:hover { background: rgba(255, 255, 255, .1); }
.copy .i { font-size: 17px; }
.copy.is-done { color: var(--on-acc); background: var(--acc); }
.path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.path span { padding: 2px 10px; border-radius: 8px; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line); font-size: 14px; font-weight: 700; }
.path i { font-style: normal; color: var(--ink-3); }
.install__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.install__more > div { padding: 22px; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line-strong); min-width: 0; }
.install__more h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.install__more p { font-size: 14.5px; color: var(--ink-2); }
.install__more .cmd { margin-top: 14px; }
.install__more .cmd pre { font-size: 12.5px; padding: 12px 14px; }
@media (max-width: 1000px) { .install__more { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .cmd { flex-direction: column; }
  .copy { justify-content: center; height: 44px; border-left: 0; border-top: 1px solid; }
  .steps > li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .steps > li::before { width: 32px; height: 32px; font-size: 13px; }
  .steps > li > div { padding-top: 4px; }
}

/* ───────── translate: questions ───────── */

.faq { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; padding-inline: 4px 20px; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1rem + .6vw, 24px); font-weight: 700; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .5s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { padding-block: 0 26px; padding-inline: 4px 20px; color: var(--ink-2); }
.faq details.is-closing summary::after { transform: rotate(45deg) translate(-3px, -3px); }
.faq details p.is-moving { overflow: hidden; }

/* ───────── translate: help ───────── */

.help__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; padding: clamp(26px, 4vw, 56px); border-radius: var(--r-l); overflow: hidden; }
.help__card h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 1.3rem + 2.4vw, 56px); line-height: 1.05; text-wrap: balance; }
.help__card p { margin-top: 16px; color: var(--ink-2); max-width: 46ch; }
.help__links { display: grid; gap: 8px; align-content: center; }
.help__links a {
  display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 18px; border-radius: 16px; font-weight: 700;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line); transition: background-color .3s, color .3s, transform .5s var(--ease);
}
.help__links a:hover { background: var(--acc); color: var(--on-acc); transform: translateX(4px); }
[dir="rtl"] .help__links a:hover { transform: translateX(-4px); }
.help__links .i { font-size: 20px; }
.help__links small { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; opacity: .7; }
@media (max-width: 860px) { .help__card { grid-template-columns: minmax(0, 1fr); } }

/* ───────── 404 ───────── */

.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--pad) 60px; }
.lost .lost__num { font-family: var(--font-display); font-size: clamp(90px, 22vw, 260px); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.lost .cat { width: 120px; margin: -46px auto 0; position: relative; }
.lost h1 { margin-top: 26px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 1.3rem + 2.4vw, 52px); line-height: 1.1; }
.lost p { margin-top: 12px; color: var(--ink-2); }
.lost .cta-row { justify-content: center; }

/* ───────── motion preferences ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .portrait__coin::after { display: none; }
}
.compare h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.compare__lang { font-family: var(--font-mono); font-size: 11px; font-weight: 400; padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; }
.compare__lang:empty { display: none; }

/* odds and ends */
.i18n-wait body > :not(.loader):not(.atmos) { opacity: 0; }
.vt, .vt * { transition: none !important; }
/* a snapshot has no backdrop to filter, so the glass would blink during the theme switch */
.vt .glass, .vt .btn--ghost, .vt .lang__menu, .vt .menu, .vt .menu-demo {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background-color: var(--glass-solid) !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.cat-sit .paw { stroke: var(--bg); stroke-width: 2; }
.touch-note { display: none; margin-top: 14px; font-size: 14px; color: var(--ink-3); }
@media (hover: none) and (pointer: coarse) { .touch-note { display: block; } }
.made { display: inline-flex; align-items: center; gap: .4em; }
.made .heart { display: inline-block; width: 1em; height: 1em; fill: currentColor; color: inherit; }

/* touch screens: links in the footer and the news pill get a finger-sized tap target */
@media (hover: none) and (pointer: coarse) {
  .footer__row a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__links { gap: 0 22px; }
  .news { min-height: 44px; }
}