@font-face {
font-family: "Onest Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
size-adjust: 102%;
ascent-override: 98%;
descent-override: 24.5%;
line-gap-override: 0%;
}
:root {
color-scheme: light dark;
--c-paper: #F4F3EF;
--c-white: #FFFFFF;
--c-ink: #1A1918;
--c-teal: #43A392;
--c-teal-brand: #64BFAF;
--c-teal-ink: #26756A;
--c-teal-deep: #17584F;
--c-mint: #D4F0EC;
--c-navy: #1B2A4A;
--c-midnight: #243B63;
--c-coral: #F0506E;
--c-coral-buddy: #EF5A74;
--c-sun: #F2A516;
--c-sun-2: #FFC94A;
--c-lavender: #7B61D1;
--c-ocean: #2F8FD8;
--c-wise: #4E9A5B;
--bg: var(--c-paper);
--bg-dot: rgba(26, 25, 24, 0.085);
--surface: #FFFFFF;
--surface-2: #FAFAF8;
--muted: #EDECEA;
--line: #E5E4E1;
--line-strong: #8E8D8A;
--text: var(--c-ink);
--text-2: #5C5B58;
--text-3: #6B6A67;
--accent: var(--c-teal-ink);
--accent-hover: var(--c-teal-deep);
--fill: var(--c-teal);
--fill-hover: #37927F;
--on-fill: #FFFFFF;
--fill-soft: var(--c-mint);
--fill-soft-ink: var(--c-teal-deep);
--strong: var(--c-navy);
--on-strong: #FFFFFF;
--on-strong-2: #C9D3E6;
--on-strong-accent: #7FD0C2;
--on-strong-mint: #9ADBD0;
--footer: var(--c-navy);
--footer-dot: rgba(255, 255, 255, 0.06);
--footer-ink: #F4F3EF;
--footer-ink-2: #C9D3E6;
--footer-ink-3: #A9B6CF;
--mark: #BFE8DF;
--tag-bg: var(--c-navy);
--tag-ink: #FFFFFF;
--tag-note: #9ADBD0;
--focus: var(--c-teal-ink);
--device: #1A1918;
--device-ring: rgba(26, 25, 24, 0.14);
--success: #2B7530;
--danger: #B3261E;
--classic-soft: #E3F4F0;  --classic-ink: #1F6A60;  --classic-fill: #43A392;  --classic-dot: rgba(23, 88, 79, 0.11);
--coral-soft: #FDECEF;    --coral-ink: #B0233F;    --coral-fill: #EF5A74;    --coral-dot: rgba(184, 39, 74, 0.10);
--sunny-soft: #FFF5DA;    --sunny-ink: #7A5000;    --sunny-fill: #F2A516;    --sunny-dot: rgba(138, 90, 0, 0.10);
--ocean-soft: #E6F3FB;    --ocean-ink: #16609A;    --ocean-fill: #2F8FD8;    --ocean-dot: rgba(28, 106, 168, 0.10);
--lavender-soft: #F0EBFB; --lavender-ink: #5B43B0; --lavender-fill: #7B61D1; --lavender-dot: rgba(91, 67, 176, 0.10);
--wise-soft: #EEF5EC;     --wise-ink: #35703F;     --wise-fill: #4E9A5B;     --wise-dot: rgba(59, 122, 70, 0.10);
--midnight-soft: #EAF0F7; --midnight-ink: #243B63; --midnight-fill: #243B63; --midnight-dot: rgba(36, 59, 99, 0.10);
--font: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-cyr: "Onest Cyr", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-caption: 0.8125rem;
--fs-small: 0.9375rem;
--fs-body: 1.0625rem;
--fs-read: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
--fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
--fs-h4: 1.1875rem;
--fs-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem);
--fs-h2-read: clamp(1.5rem, 1.33rem + 0.7vw, 1.875rem);
--fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
--fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
--fs-display: clamp(2.375rem, 1.55rem + 3.4vw, 4.5rem);
--fw-body: 440;
--fw-medium: 520;
--fw-strong: 640;
--fw-title: 700;
--fw-display: 760;
--lh-tight: 1.04;
--lh-head: 1.12;
--lh-snug: 1.3;
--lh-body: 1.6;
--lh-read: 1.72;
--ls-display: -0.034em;
--ls-h1: -0.03em;
--ls-h2: -0.026em;
--ls-h3: -0.012em;
--measure: 66ch;
--measure-lead: 46ch;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-7: 2rem;
--s-8: 2.5rem;
--s-9: 3.5rem;
--s-10: 4.5rem;
--s-11: 6rem;
--s-12: 8rem;
--section-y: clamp(4rem, 2.6rem + 5.5vw, 8rem);
--gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
--max: 76rem;
--max-narrow: 48rem;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 20px;
--r-xl: 32px;
--r-pill: 999px;
--shadow-1: 0 1px 0 rgba(27, 42, 74, 0.05), 0 1px 3px rgba(27, 42, 74, 0.06);
--shadow-2: 0 1px 2px rgba(27, 42, 74, 0.06), 0 10px 28px -14px rgba(27, 42, 74, 0.28);
--shadow-3: 0 2px 6px rgba(27, 42, 74, 0.06), 0 28px 56px -28px rgba(27, 42, 74, 0.42);
--shadow-device: 0 40px 70px -40px rgba(27, 42, 74, 0.55), 0 14px 28px -18px rgba(27, 42, 74, 0.35);
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--t-fast: 140ms;
--t-med: 240ms;
--t-slow: 700ms;
--dot-size: 24px;
--dot-r: 1.15px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #121A2C;
--bg-dot: rgba(255, 255, 255, 0.055);
--surface: #1B2A4A;
--surface-2: #213356;
--muted: #1F3052;
--line: #2A3B5E;
--line-strong: #7384A6;
--text: #F4F3EF;
--text-2: #C9D3E6;
--text-3: #A9B6CF;
--accent: #7FD0C2;
--accent-hover: #A3DED3;
--fill: var(--c-teal-brand);
--fill-hover: #7FD0C2;
--on-fill: #0A2E29;
--fill-soft: #173B36;
--fill-soft-ink: #9ADBD0;
--strong: #F4F3EF;
--on-strong: #1B2A4A;
--on-strong-2: #3D4B66;
--on-strong-accent: #1F6A60;
--on-strong-mint: #1F6A60;
--footer: #0D1424;
--footer-dot: rgba(255, 255, 255, 0.05);
--mark: #24574F;
--tag-bg: #F4F3EF;
--tag-ink: #1B2A4A;
--tag-note: #1F6A60;
--focus: #7FD0C2;
--device: #0A0F1A;
--device-ring: rgba(255, 255, 255, 0.16);
--success: #81C784;
--danger: #EF9A9A;
--classic-soft: #173B36;  --classic-ink: #9ADBD0;  --classic-dot: rgba(154, 219, 208, 0.08);
--coral-soft: #3A2031;    --coral-ink: #FF9CAE;    --coral-dot: rgba(255, 156, 174, 0.08);
--sunny-soft: #33291A;    --sunny-ink: #FFD37A;    --sunny-dot: rgba(255, 211, 122, 0.08);
--ocean-soft: #16304F;    --ocean-ink: #8CC8F5;    --ocean-dot: rgba(140, 200, 245, 0.08);
--lavender-soft: #2A2450; --lavender-ink: #C4B5F7; --lavender-dot: rgba(196, 181, 247, 0.08);
--wise-soft: #1C3328;     --wise-ink: #9ED9A8;     --wise-dot: rgba(158, 217, 168, 0.08);
--midnight-soft: #1F3052; --midnight-ink: #B9C8E6; --midnight-dot: rgba(185, 200, 230, 0.08);
--shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2);
--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
--shadow-3: 0 2px 6px rgba(0, 0, 0, 0.25), 0 28px 56px -28px rgba(0, 0, 0, 0.7);
--shadow-device: 0 40px 70px -40px rgba(0, 0, 0, 0.8), 0 14px 28px -18px rgba(0, 0, 0, 0.6);
}
}
:root[data-theme="dark"] {
--bg: #121A2C; --bg-dot: rgba(255, 255, 255, 0.055); --surface: #1B2A4A; --surface-2: #213356; --muted: #1F3052;
--line: #2A3B5E; --line-strong: #7384A6; --text: #F4F3EF; --text-2: #C9D3E6; --text-3: #A9B6CF;
--accent: #7FD0C2; --accent-hover: #A3DED3; --fill: #64BFAF; --fill-hover: #7FD0C2; --on-fill: #0A2E29;
--fill-soft: #173B36; --fill-soft-ink: #9ADBD0; --strong: #F4F3EF; --on-strong: #1B2A4A; --on-strong-2: #3D4B66;
--on-strong-accent: #1F6A60; --on-strong-mint: #1F6A60; --footer: #0D1424; --mark: #24574F; --focus: #7FD0C2;
--tag-bg: #F4F3EF; --tag-ink: #1B2A4A; --tag-note: #1F6A60;
--device: #0A0F1A; --device-ring: rgba(255, 255, 255, 0.16);
}
:root:lang(ru) { --font: var(--font-cyr); }
@font-face {
font-family: "Onest";
src: url("/assets/onest-latin.40b0a3ec.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Onest Cyr";
src: url("/assets/onest-cyrillic.40ff837a.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Onest Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
size-adjust: 104.7%;
ascent-override: 92.6%;
descent-override: 29.1%;
line-gap-override: 0.0%;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s-6); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
color: var(--text);
background-color: var(--bg);
background-image: radial-gradient(circle, var(--bg-dot) var(--dot-r), transparent calc(var(--dot-r) + 0.6px));
background-size: var(--dot-size) var(--dot-size);
background-position: calc(var(--dot-size) / 2) calc(var(--dot-size) / 2);
font-family: var(--font);
font-size: var(--fs-body);
font-weight: var(--fw-body);
line-height: var(--lh-body);
font-synthesis: none;
font-kerning: normal;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; display: block; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--text); text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
p, ul, ol, dl, figure, table, blockquote { margin: 0; }
strong, b { font-weight: var(--fw-strong); }
p:lang(de), li:lang(de), dd:lang(de), td:lang(de) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 3 3; }
h1, h2, h3, .display { hyphens: manual; -webkit-hyphens: manual; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--mark); color: var(--text); }
svg.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1;
stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { width: min(var(--max-narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: calc(var(--section-y) * 0.6); }
.section-head { max-width: 40rem; margin-bottom: var(--s-8); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: var(--s-4); }
.stack > * + * { margin-top: var(--s-4); }
.display {
font-size: var(--fs-display); font-weight: var(--fw-display);
line-height: var(--lh-tight); letter-spacing: var(--ls-display);
}
.h1 { font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: var(--lh-head); letter-spacing: var(--ls-h1); }
.h2, .section h2 { font-size: var(--fs-h2); font-weight: var(--fw-title); line-height: var(--lh-head); letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-title); line-height: var(--lh-snug); letter-spacing: var(--ls-h3); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: var(--measure-lead); }
.fine { font-size: var(--fs-small); color: var(--text-3); }
.meta { font-size: var(--fs-small); color: var(--text-3); }
mark, .mark {
color: inherit;
background-color: transparent;
background-image: linear-gradient(var(--mark), var(--mark));
background-repeat: no-repeat;
background-size: 100% 0.3em;
background-position: 0 90%;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
padding-inline: 0.04em;
}
.num { font-variant-numeric: tabular-nums; }
.skip {
position: absolute; left: var(--s-4); top: -100px; z-index: 50;
padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
background: var(--strong); color: var(--on-strong); font-weight: var(--fw-title); text-decoration: none;
}
.skip:focus { top: var(--s-3); }
.site-header { position: relative; z-index: 20; padding-block: var(--s-4); }
.header-row { display: flex; align-items: center; gap: var(--s-5); min-height: 52px; }
.brand {
display: inline-flex; align-items: center; gap: 0.55rem;
color: var(--text); text-decoration: none;
font-size: 1.3125rem; font-weight: var(--fw-title); letter-spacing: -0.02em; line-height: 1;
white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand img { width: 23px; height: 35px; margin-block: -2px -5px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav a {
display: block; padding: 0.55rem 0.85rem; border-radius: var(--r-pill);
color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.nav a:hover { color: var(--text); background: var(--muted); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: var(--shadow-1); }
.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.nav + .header-actions { margin-left: var(--s-2); }
.lang { position: relative; }
.lang > summary {
list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
height: 42px; padding: 0 0.8rem; border-radius: var(--r-pill);
border: 1px solid var(--line); background: var(--surface);
color: var(--text); font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.lang > summary:hover { border-color: var(--line-strong); }
.lang .chev { width: 0.9em; height: 0.9em; transition: transform var(--t-fast); }
.lang[open] .chev { transform: rotate(180deg); }
.lang-code { display: none; }
.lang-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 13rem;
list-style: none; margin: 0; padding: var(--s-2);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3);
}
.lang-menu a {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: 0.6rem 0.8rem; border-radius: var(--r-sm);
color: var(--text); text-decoration: none; font-weight: var(--fw-medium);
}
.lang-menu a:hover { background: var(--muted); }
.lang-menu a[aria-current] { background: var(--fill-soft); color: var(--fill-soft-ink); }
.lang-menu a[aria-current]::after {
content: ""; width: 1rem; height: 1rem; background: currentColor;
-webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.lang-menu a[aria-current] .endonym-code { display: none; }
.lang-menu .endonym-code { color: var(--text-3); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.menu { display: none; }
.menu > summary {
list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
height: 42px; min-width: 42px; padding: 0 0.7rem; border-radius: var(--r-pill);
border: 1px solid var(--line); background: var(--surface); color: var(--text);
font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.menu .i-close { display: none; }
.menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel {
position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); z-index: 30;
padding: var(--s-3); background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--shadow-3);
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-links a {
display: block; padding: 0.85rem 0.9rem; border-radius: var(--r-sm);
color: var(--text); text-decoration: none; font-size: 1.125rem; font-weight: var(--fw-strong);
}
.menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--muted); }
.menu-langs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3) var(--s-2) var(--s-1);
border-top: 1px solid var(--line); }
.menu-langs a {
display: inline-block; padding: 0.4rem 0.75rem; border-radius: var(--r-pill); border: 1px solid var(--line);
color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.menu-langs a[aria-current] { border-color: var(--fill-soft-ink); color: var(--fill-soft-ink); background: var(--fill-soft); }
@media (max-width: 940px) {
.nav, .header-actions .lang { display: none; }
.menu { display: block; }
.header-actions, .nav + .header-actions { margin-left: auto; }
}
@media (max-width: 440px) {
.menu > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu > summary { width: 42px; padding: 0; }
.brand { font-size: 1.1875rem; gap: 0.45rem; }
.brand img { width: 21px; height: 32px; }
.header-row { gap: var(--s-3); }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
min-height: 52px; padding: 0 1.4rem; border-radius: var(--r-pill); border: 0;
background: var(--fill); color: var(--on-fill);
font: inherit; font-size: var(--fs-h4); font-weight: var(--fw-title); line-height: 1; letter-spacing: -0.005em;
text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--fill-hover); color: var(--on-fill); }
.btn-ink { background: var(--strong); color: var(--on-strong); }
.btn-ink:hover { background: var(--strong); color: var(--on-strong); box-shadow: var(--shadow-2); }
.btn-small { min-height: 42px; padding: 0 1.05rem; font-size: var(--fs-small); background: var(--strong); color: var(--on-strong); }
.btn-small:hover { background: var(--strong); color: var(--on-strong); box-shadow: var(--shadow-2); }
.btn-quiet {
background: transparent; color: var(--accent); padding-inline: 0.25rem; min-height: 44px;
font-size: var(--fs-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.btn-quiet:hover { background: transparent; color: var(--accent-hover); text-decoration-thickness: 2px; }
.btn-outline { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: var(--fs-body); }
.btn-outline:hover { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.store {
display: inline-flex; align-items: center; gap: 0.75rem;
min-height: 60px; padding: 0.55rem 1.35rem 0.55rem 1rem; border-radius: 16px;
background: var(--strong); color: var(--on-strong); text-decoration: none;
box-shadow: var(--shadow-1);
}
.store:hover { color: var(--on-strong); box-shadow: var(--shadow-2); }
.store svg.i { width: 26px; height: 26px; stroke-width: 2; }
.store-text { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.05; }
.store-kicker { font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--on-strong-2); }
.store-name { font-size: 1.1875rem; font-weight: var(--fw-title); letter-spacing: -0.01em; }
.store.is-soon { background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--line); pointer-events: none; }
.store.is-soon .store-kicker { color: var(--text-3); }
.store .soon-tag {
margin-left: 0.25rem; padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
background: var(--fill-soft); color: var(--fill-soft-ink); font-size: 0.75rem; font-weight: var(--fw-title);
}
.store-badge { height: 56px; width: auto; }
.stores.center { justify-content: center; }
.stores.small .store { min-height: 50px; padding: 0.4rem 1.1rem 0.4rem 0.85rem; border-radius: 14px; }
.stores.small .store-name { font-size: 1.0625rem; }
.hero { padding-block: clamp(1.5rem, 0.5rem + 4vw, 4.5rem) clamp(1rem, 0rem + 3vw, 3rem); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--s-8); align-items: center; }
.hero-copy > * + * { margin-top: var(--s-6); }
.hero-copy .stores { margin-top: var(--s-8); }
.hero-copy .fine { margin-top: var(--s-4); }
.hero-title { display: block; }
.app-chip {
display: inline-flex; align-items: center; gap: 0.6rem;
margin-bottom: var(--s-6); padding: 0.4rem 0.95rem 0.4rem 0.4rem; border-radius: var(--r-pill);
background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
font-size: var(--fs-small); font-weight: var(--fw-strong); letter-spacing: 0; line-height: 1.2; color: var(--text);
vertical-align: middle;
}
.app-chip img { width: 30px; height: 30px; border-radius: 8px; }
.app-chip img, .byline .who img, .author-box img, .app-note img { box-shadow: 0 0 0 1px rgba(26, 25, 24, 0.08), 0 2px 6px -2px rgba(27, 42, 74, 0.25); }
.hero-promise { display: block; }
.hero .lead { font-size: var(--fs-lead); }
.hero-art { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 520 / 600; }
.hero-disc {
position: absolute; inset: 6% -4% 2% 8%; border-radius: 50%;
background: var(--classic-soft);
background-image: radial-gradient(circle, var(--classic-dot) var(--dot-r), transparent calc(var(--dot-r) + 0.6px));
background-size: var(--dot-size) var(--dot-size);
}
.hero-art .device { position: absolute; left: 34%; top: 0; width: 54%; transform: rotate(3deg); }
.hero-art .buddy-hero { position: absolute; left: 2%; bottom: 0; width: 37%; z-index: 2; }
@media (max-width: 480px) {
.stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.stores .store { justify-content: center; padding: 0.55rem 0.6rem; min-height: 58px; }
.stores .store svg.i { display: none; }
.stores .store-text { align-items: center; text-align: center; }
.store-kicker { font-size: 0.75rem; }
.store-name { font-size: 1.0625rem; }
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
.hero-art { width: min(100%, 420px); aspect-ratio: 420 / 430; overflow: hidden;
-webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.hero-art .device { left: 36%; width: 52%; top: 4%; }
.hero-art .buddy-hero { width: 34%; left: 6%; bottom: 20%; }
.hero-disc { inset: 4% 0 -10% 12%; }
}
.device {
position: relative; margin: 0; padding: 0;
border-radius: 15.5% / 7.2%;
background: var(--device);
box-shadow: var(--shadow-device), inset 0 0 0 1.5px var(--device-ring), 0 0 0 1px var(--device-ring);
}
.device img { width: 93.6%; margin: 3.2%; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top; border-radius: 12.5% / 5.8%; background: var(--c-paper); }
.device-caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-3); text-align: center; }
.buddy { aspect-ratio: 500 / 762; height: auto; user-select: none; -webkit-user-drag: none; }
.buddy-tile { aspect-ratio: 1; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(26, 25, 24, 0.07), 0 6px 16px -8px rgba(27, 42, 74, 0.3); }
.tone-classic  { --tone-soft: var(--classic-soft);  --tone-ink: var(--classic-ink);  --tone-fill: var(--classic-fill);  --tone-dot: var(--classic-dot); }
.tone-coral    { --tone-soft: var(--coral-soft);    --tone-ink: var(--coral-ink);    --tone-fill: var(--coral-fill);    --tone-dot: var(--coral-dot); }
.tone-sunny    { --tone-soft: var(--sunny-soft);    --tone-ink: var(--sunny-ink);    --tone-fill: var(--sunny-fill);    --tone-dot: var(--sunny-dot); }
.tone-ocean    { --tone-soft: var(--ocean-soft);    --tone-ink: var(--ocean-ink);    --tone-fill: var(--ocean-fill);    --tone-dot: var(--ocean-dot); }
.tone-lavender { --tone-soft: var(--lavender-soft); --tone-ink: var(--lavender-ink); --tone-fill: var(--lavender-fill); --tone-dot: var(--lavender-dot); }
.tone-wise     { --tone-soft: var(--wise-soft);     --tone-ink: var(--wise-ink);     --tone-fill: var(--wise-fill);     --tone-dot: var(--wise-dot); }
.tone-midnight { --tone-soft: var(--midnight-soft); --tone-ink: var(--midnight-ink); --tone-fill: var(--midnight-fill); --tone-dot: var(--midnight-dot); }
.spread { padding-block: calc(var(--section-y) * 0.6); }
.spread-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.spread.flip .spread-copy { order: 2; }
.spread-copy > * + * { margin-top: var(--s-5); }
.spread-copy h2 { font-size: var(--fs-h2); font-weight: var(--fw-title); line-height: var(--lh-head); letter-spacing: var(--ls-h2); }
.spread-copy .lead { color: var(--text-2); }
.spread-copy .more { margin-top: var(--s-6); }
.feature-name { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); font-weight: var(--fw-title); color: var(--tone-ink, var(--accent)); }
.feature-name svg.i { width: 1.15em; height: 1.15em; }
.stage {
position: relative; overflow: hidden; isolation: isolate;
aspect-ratio: 6 / 5; border-radius: var(--r-xl);
background-color: var(--tone-soft, var(--classic-soft));
background-image: radial-gradient(circle, var(--tone-dot) var(--dot-r), transparent calc(var(--dot-r) + 0.6px));
background-size: var(--dot-size) var(--dot-size);
background-position: calc(var(--dot-size) / 2) calc(var(--dot-size) / 2);
}
.stage .device { position: absolute; left: 50%; top: 10%; width: 42%; transform: translateX(-50%); }
.stage .stage-buddy { position: absolute; width: 15%; right: 4%; bottom: 5%; z-index: 2; transform: rotate(-7deg); transform-origin: 50% 100%;
filter: drop-shadow(0 14px 14px rgba(27, 42, 74, 0.18)); }
.stage.buddy-left .stage-buddy { right: auto; left: 4%; transform: rotate(7deg); }
.stage.duo .device { width: 38%; }
.stage.duo .device:nth-of-type(1) { left: 31%; top: 14%; transform: translateX(-50%) rotate(-5deg); }
.stage.duo .device:nth-of-type(2) { left: 67%; top: 8%; transform: translateX(-50%) rotate(4deg); z-index: 1; }
.stage.trio { aspect-ratio: 2 / 1; }
.stage.trio .device { width: 24%; top: 12%; }
.stage.trio .device:nth-of-type(1) { left: 23%; transform: translateX(-50%) rotate(-5deg); top: 17%; }
.stage.trio .device:nth-of-type(2) { left: 50%; top: 9%; z-index: 1; }
.stage.trio .device:nth-of-type(3) { left: 77%; transform: translateX(-50%) rotate(5deg); top: 17%; }
.stage-label {
position: absolute; z-index: 3; padding: 0.45rem 0.9rem; border-radius: var(--r-pill);
background: var(--surface); color: var(--text); box-shadow: var(--shadow-2);
font-size: var(--fs-small); font-weight: var(--fw-title); white-space: nowrap;
}
@media (max-width: 860px) {
.spread-grid { grid-template-columns: 1fr; }
.spread.flip .spread-copy { order: 0; }
.stage { aspect-ratio: 1 / 1.05; }
.stage .device { width: 56%; top: 8%; }
.stage.duo .device { width: 48%; }
.stage.duo .device:nth-of-type(1) { left: 30%; }
.stage.duo .device:nth-of-type(2) { left: 70%; }
.stage.trio { aspect-ratio: 1 / 0.95; }
.stage.trio .device { width: 40%; }
.stage.trio .device:nth-of-type(1) { left: 22%; }
.stage.trio .device:nth-of-type(3) { left: 78%; }
.stage .stage-buddy { width: 21%; right: 4%; bottom: 5%; }
.stage.buddy-left .stage-buddy { left: 4%; }
}
.ticks { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.ticks li { position: relative; padding-left: 2.1rem; }
.ticks li::before {
content: ""; position: absolute; left: 0; top: 0.18em; width: 1.35rem; height: 1.35rem; border-radius: 50%;
background: var(--tone-soft, var(--fill-soft));
}
.ticks li::after {
content: ""; position: absolute; left: 0.27rem; top: calc(0.18em + 0.27rem); width: 0.81rem; height: 0.81rem;
background: var(--tone-ink, var(--fill-soft-ink));
-webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.stage-bg .ticks li::before, .on-tone .ticks li::before { background: var(--surface); }
.modes { display: grid; gap: var(--s-3); }
.mode {
display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); row-gap: 0.15rem; align-items: start;
padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1);
}
.mode dt { grid-column: 2; font-weight: var(--fw-title); font-size: var(--fs-h4); line-height: 1.3; }
.mode dd { grid-column: 2; margin: 0; color: var(--text-2); }
.mode .mode-icon {
grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--tone-soft, var(--fill-soft)); color: var(--tone-ink, var(--fill-soft-ink));
}
.mode .mode-icon svg.i { width: 24px; height: 24px; }
.modes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.modes-row .mode { grid-template-columns: 1fr; row-gap: var(--s-2); padding: var(--s-6); }
.modes-row .mode .mode-icon { grid-row: auto; margin-bottom: var(--s-2); }
.modes-row .mode dt, .modes-row .mode dd { grid-column: 1; }
@media (max-width: 860px) { .modes-row { grid-template-columns: 1fr; } }
.direction { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-small); color: var(--text-2); }
.direction span { padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--fw-medium); }
.courses { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.course { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: 0.45rem; align-items: baseline; }
.course-name { font-weight: var(--fw-title); }
.course-bar { grid-column: 1 / -1; grid-row: 2; height: 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.course-bar span { display: block; height: 100%; border-radius: inherit; background: var(--tone-fill, var(--fill)); }
.course-num { grid-column: 2; grid-row: 1; font-size: var(--fs-small); color: var(--text-2); text-align: right; }
.course-num strong { color: var(--text); font-variant-numeric: tabular-nums; }
.bar-662 { width: 100%; } .bar-341 { width: 51.5%; } .bar-286 { width: 43.2%; } .bar-246 { width: 37.2%; }
.levels { display: flex; flex-wrap: wrap; gap: 6px; }
.levels span {
min-width: 2.6rem; padding: 0.3rem 0.5rem; border-radius: 10px; text-align: center;
background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
font-size: var(--fs-small); font-weight: var(--fw-title); color: var(--tone-ink, var(--text));
}
.ruled {
--rule: 2rem;
position: relative; border-radius: var(--r-lg); background-color: var(--surface);
box-shadow: var(--shadow-2);
padding: var(--rule) var(--s-7) var(--rule) 4.5rem;
background-image:
linear-gradient(90deg, transparent 3rem, var(--margin-line) 3rem, var(--margin-line) calc(3rem + 2px), transparent calc(3rem + 2px)),
linear-gradient(transparent calc(var(--rule) - 1px), var(--line) calc(var(--rule) - 1px));
background-size: 100% 100%, 100% var(--rule);
background-position: 0 0, 0 var(--rule-shift);
--rule-shift: -0.3rem;
--margin-line: color-mix(in srgb, var(--c-coral) 55%, transparent);
}
.ruled h3 { font-size: var(--fs-h3); line-height: var(--rule); margin-bottom: var(--rule); }
.ruled ul { list-style: none; padding: 0; }
.ruled li { position: relative; line-height: var(--rule); }
.ruled li + li { margin-top: var(--rule); }
.ruled li::before {
content: ""; position: absolute; left: -2.4rem; top: calc(var(--rule) / 2 - 0.5rem); width: 0.9rem; height: 0.9rem;
background: var(--accent);
-webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.ruled strong { font-weight: var(--fw-title); }
.ruled.is-not li::before { -webkit-mask-image: var(--icon-dash); mask-image: var(--icon-dash); background: var(--coral-ink); }
.price-tag {
position: relative; display: inline-flex; flex-direction: column; gap: 0.1rem;
margin-left: 30px; padding: 0.9rem 1.6rem 0.95rem 1.5rem; border-radius: 0 16px 16px 0;
background: var(--tag-bg); color: var(--tag-ink); transform: rotate(-3deg); transform-origin: 0 50%;
box-shadow: 0 16px 30px -18px rgba(27, 42, 74, 0.7);
}
.price-tag::before {
content: ""; position: absolute; right: calc(100% - 1px); top: 0; bottom: 0; width: 30px; background: inherit;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.price-tag::after {
content: ""; position: absolute; left: -10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.price-amount { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); font-weight: var(--fw-display); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-note { font-size: var(--fs-h4); font-weight: var(--fw-title); color: var(--tag-note); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .price-tag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 30px -18px rgba(0, 0, 0, 0.8); } }
.honest { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.honest-side > * + * { margin-top: var(--s-5); }
.honest-side .buddy { width: 34%; max-width: 150px; }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; } .ruled { padding-left: 3.6rem; padding-right: var(--s-5);
background-image: linear-gradient(90deg, transparent 2.3rem, var(--margin-line) 2.3rem, var(--margin-line) calc(2.3rem + 2px), transparent calc(2.3rem + 2px)), linear-gradient(transparent calc(var(--rule) - 1px), var(--line) calc(var(--rule) - 1px)); }
.ruled li::before { left: -1.95rem; } }
.picker { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(0.75rem, 0.3rem + 1.4vw, 1.5rem); }
.picker li { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.picker img { width: 100%; }
.picker .name { font-weight: var(--fw-strong); font-size: var(--fs-small); line-height: 1.25; }
.picker li:first-child img { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--fill); }
@media (max-width: 860px) { .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--s-7) var(--s-6); }
.fact { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem var(--s-4); align-items: start; }
.fact .fact-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.fact strong { font-weight: var(--fw-title); line-height: 1.35; padding-top: 0.1rem; }
.fact span { color: var(--text-2); font-size: var(--fs-small); }
.faq { display: grid; gap: var(--s-3); max-width: 50rem; }
.faq details { border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.faq summary {
list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: 1.15rem 1.35rem; font-size: var(--fs-h4); font-weight: var(--fw-strong); line-height: 1.35;
}
.faq summary:hover { color: var(--accent); }
.faq-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--muted); }
.faq-icon::before, .faq-icon::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
border-radius: 2px; background: var(--text); transition: transform var(--t-med) var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq details[open] .faq-icon { background: var(--fill-soft); }
.faq details[open] .faq-icon::after { transform: rotate(0deg); }
.faq-body { padding: 0 1.35rem 1.3rem; color: var(--text-2); max-width: 62ch; }
.faq-body > * + * { margin-top: var(--s-3); }
.faq-more { margin-top: var(--s-6); }
.cta-band { text-align: center; padding-block: var(--section-y) calc(var(--section-y) * 0.55); }
.cta-band h2 { font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: var(--ls-h2); line-height: var(--lh-head); }
.cta-band .lead { margin: var(--s-4) auto 0; }
.cta-band .stores { margin-top: var(--s-7); justify-content: center; }
.cta-band .fine { margin-top: var(--s-4); }
.site-footer {
--shelf-h: 104px;
position: relative; overflow-x: clip; margin-top: calc(var(--shelf-h) * 0.86 + var(--s-4));
color: var(--footer-ink-2); background: var(--footer);
background-image: radial-gradient(circle, var(--footer-dot) var(--dot-r), transparent calc(var(--dot-r) + 0.6px));
background-size: var(--dot-size) var(--dot-size);
border-top: 6px solid #243B63;
padding-block: calc(var(--s-10) + 8px) var(--s-7);
font-size: var(--fs-small);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { border-top-color: #1B2A4A; } }
.shelf { position: absolute; left: 0; right: 0; top: -6px; height: 0; pointer-events: none; }
.shelf-row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.5rem, 0.2rem + 1vw, 1.1rem); }
.shelf-buddy { --h: var(--shelf-h); height: var(--h); width: auto; margin-bottom: calc(var(--h) * -0.1404); pointer-events: auto; transform-origin: 30% 86%; }
.shelf-buddy.s1 { --h: calc(var(--shelf-h) * 0.88); }
.shelf-buddy.s2 { --h: calc(var(--shelf-h) * 1.06); }
.shelf-buddy.s3 { --h: calc(var(--shelf-h) * 0.94); }
.shelf-buddy.s4 { --h: calc(var(--shelf-h) * 1.12); }
.shelf-buddy.s5 { --h: calc(var(--shelf-h) * 0.9); }
.shelf-buddy.s6 { --h: calc(var(--shelf-h) * 1); }
.shelf-buddy.s7 { --h: calc(var(--shelf-h) * 1.08); }
.shelf-buddy.lean { transform: rotate(9deg); transform-origin: 88% 86%; margin-left: 0.6rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.footer-brand > * + * { margin-top: var(--s-4); }
.footer-brand .brand { color: var(--footer-ink); }
.footer-brand p { max-width: 30ch; line-height: 1.55; }
.site-footer h2 { font-size: var(--fs-small); font-weight: var(--fw-title); color: var(--footer-ink); margin-bottom: var(--s-3); letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: var(--footer-ink-2); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer :focus-visible { outline-color: #7FD0C2; }
.footer-base {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-7);
margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-caption);
}
.site-footer .footer-langs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.footer-langs a[aria-current] { color: #FFFFFF; font-weight: var(--fw-title); }
.footer-legal { flex-basis: 100%; color: var(--footer-ink-3); line-height: 1.5; max-width: 80ch; }
.site-footer .en-note { color: var(--footer-ink-3); font-size: var(--fs-caption); }
@media (max-width: 940px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.site-footer { --shelf-h: 82px; }
.shelf-buddy:nth-child(n+7) { display: none; }
}
@media (max-width: 400px) { .shelf-buddy:nth-child(n+6) { display: none; } }
.page-head { padding-block: clamp(1.5rem, 0.8rem + 3vw, 3.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.page-head + .section-tight, .page-head + .section { padding-top: 0; }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: end; }
.page-head h1 { font-size: var(--fs-h1); font-weight: var(--fw-display); letter-spacing: var(--ls-h1); line-height: var(--lh-head); max-width: 18ch; }
.page-head h1.wide { max-width: 24ch; }
.page-head .article-grid .crumbs { margin-bottom: 0; }
.page-head .lead { margin-top: var(--s-5); }
.page-head .buddy { width: clamp(80px, 60px + 4vw, 124px); margin-right: var(--s-6); transform: rotate(6deg); }
@media (max-width: 700px) { .page-head-grid { grid-template-columns: 1fr; } .page-head-grid .buddy { display: none; } }
.crumbs { margin-bottom: var(--s-5); font-size: var(--fs-small); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-3); }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--text-3); border-top: 1.5px solid var(--text-3); transform: rotate(45deg); margin-right: 0.15rem; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-3); max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.chips a, .chips > li > span, .chips > span {
display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: var(--r-pill);
background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none;
font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
}
.chips a:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); }
.chips a[aria-current] { background: var(--strong); color: var(--on-strong); box-shadow: none; }
.chips .dot { flex: none; width: 9px; height: 9px; padding: 0; border-radius: 50%; box-shadow: none; background: var(--tone-fill, var(--fill)); }
.chips svg.i { width: 1em; height: 1em; }
.chips-scroll { overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
@media (max-width: 860px) { .chips-scroll { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll .chips { flex-wrap: nowrap; }
.subnav { position: sticky; top: 0; z-index: 10; padding-block: var(--s-3); background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .subnav { backdrop-filter: blur(8px); } }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-8) var(--s-7); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.plan h2 { font-size: var(--fs-h3); font-weight: var(--fw-title); letter-spacing: var(--ls-h3); }
.plan .plan-price { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); font-weight: var(--fw-display); letter-spacing: -0.035em; line-height: 1; }
.plan .plan-sub { color: var(--text-2); }
.plan .ticks { margin-top: var(--s-2); }
.plan-pro { background: var(--c-navy); color: #F4F3EF; }
.plan-pro h2, .plan-pro .plan-price { color: #FFFFFF; }
.plan-pro .plan-sub { color: #C9D3E6; }
.plan-pro .ticks li::before { background: rgba(255, 255, 255, 0.1); }
.plan-pro .ticks li::after { background: #9ADBD0; }
.plan-pro .buddy { position: absolute; right: -2%; bottom: -9%; width: 26%; max-width: 132px; transform: rotate(-8deg); opacity: 1; }
.plan-pro .price-tag { align-self: flex-start; --tag-bg: var(--c-paper); --tag-ink: var(--c-navy); --tag-note: var(--c-teal-ink); }
.plan-pro .price-tag::after { background: var(--c-navy); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-pro { box-shadow: 0 0 0 1px #2A3B5E, var(--shadow-2); } }
@media (max-width: 760px) {
.plans { grid-template-columns: 1fr; }
.plan { padding: var(--s-7) var(--s-6); }
.plan-pro { padding-bottom: 7.5rem; }
.plan-pro .buddy { width: 92px; right: 6%; bottom: -26px; }
}
.compare-wrap { max-width: 50rem; overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.compare { width: 100%; border-collapse: collapse; min-width: 34rem; }
.compare th, .compare td { padding: 1rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: var(--fs-small); color: var(--text-2); font-weight: var(--fw-title); background: var(--muted); }
.compare tbody th { font-weight: var(--fw-strong); width: 36%; }
.compare tr:last-child > * { border-bottom: 0; }
@media (max-width: 560px) {
.compare { min-width: 0; font-size: var(--fs-small); }
.compare th, .compare td { padding: 0.8rem 0.7rem; }
.compare tbody th { width: 40%; }
}
.compare .yes, .compare .no { display: inline-flex; align-items: center; gap: 0.45rem; }
.compare .yes::before, .compare .no::before {
content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: var(--success);
-webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.compare .no::before { background: var(--text-3); -webkit-mask-image: var(--icon-dash); mask-image: var(--icon-dash); }
.ad-moments { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: m; }
.ad-moments li { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.ad-moments strong { display: block; font-size: var(--fs-h4); font-weight: var(--fw-title); margin: var(--s-3) 0 var(--s-2); }
.ad-moments p { color: var(--text-2); }
.ad-moments .pill { display: inline-block; padding: 0.25rem 0.65rem; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-title); }
.pill-none { background: var(--fill-soft); color: var(--fill-soft-ink); }
.pill-small { background: var(--sunny-soft); color: var(--sunny-ink); }
.pill-full { background: var(--coral-soft); color: var(--coral-ink); }
@media (max-width: 760px) { .ad-moments { grid-template-columns: 1fr; } }
.topics { margin-bottom: var(--s-8); }
.post-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.post-card .cover { margin-bottom: var(--s-2); }
.post-card h2, .post-card h3 { font-size: var(--fs-h4); font-weight: var(--fw-title); line-height: 1.3; letter-spacing: -0.01em; }
.post-card h2 a, .post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h2 a::after, .post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.post-card:hover h2 a, .post-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.post-card p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; align-items: center; font-size: var(--fs-caption); color: var(--text-3); }
.post-meta .topic { color: var(--tone-ink, var(--accent)); font-weight: var(--fw-title); }
.post-card:hover .cover { box-shadow: var(--shadow-2); }
.cover {
position: relative; overflow: hidden; aspect-ratio: 1200 / 630; border-radius: var(--r-lg);
display: flex; align-items: center; padding: 0 30% 0 7%;
background-color: var(--tone-soft, var(--classic-soft));
background-image: radial-gradient(circle, var(--tone-dot) var(--dot-r), transparent calc(var(--dot-r) + 0.6px));
background-size: 18px 18px;
transition: box-shadow var(--t-med);
}
.cover-word { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); font-weight: var(--fw-display); letter-spacing: -0.03em; line-height: 1.02; color: var(--tone-ink); overflow-wrap: anywhere; hyphens: none; }
.cover .buddy { position: absolute; right: 7%; bottom: -12%; width: 20%; transform: rotate(-5deg); }
.post-grid .feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; gap: var(--s-4) var(--s-8); }
.post-grid .feature .cover { grid-row: 1 / -1; grid-column: 1; margin: 0; }
.post-grid .feature > :not(.cover) { grid-column: 2; }
.post-grid .feature .post-meta { grid-row: 2; }
.post-grid .feature h2 { grid-row: 3; }
.post-grid .feature > p:last-child { grid-row: 4; }
.post-grid .feature h2 { font-size: var(--fs-h2-read); letter-spacing: var(--ls-h2); line-height: 1.15; }
.post-grid .feature p { font-size: var(--fs-body); }
.post-grid .feature .cover-word { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.post-grid { grid-template-columns: 1fr; gap: var(--s-8); }
.post-grid .feature { grid-template-columns: 1fr; grid-template-rows: none; }
.post-grid .feature .cover, .post-grid .feature > :not(.cover), .post-grid .feature .post-meta, .post-grid .feature h2, .post-grid .feature > p:last-child { grid-row: auto; grid-column: 1; }
}
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line); font-weight: var(--fw-strong); }
.pager .pages { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.pager .pages a, .pager .pages span { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill); text-decoration: none; color: var(--text); }
.pager .pages [aria-current] { background: var(--strong); color: var(--on-strong); }
.app-note {
display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-10);
padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.app-note img { width: 52px; height: 52px; border-radius: 12px; }
.app-note p { flex: 1 1 18rem; }
.app-note p strong { display: block; font-size: var(--fs-h4); }
.article-head { padding-block: clamp(1.25rem, 0.8rem + 2vw, 2.5rem) var(--s-8); }
.article-head h1 { font-size: var(--fs-h1); font-weight: var(--fw-display); letter-spacing: var(--ls-h1); line-height: 1.1; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font-size: var(--fs-small); color: var(--text-3); }
.byline .who { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: var(--fw-strong); text-decoration: none; }
.byline .who img { width: 36px; height: 36px; border-radius: 10px; }
.article-grid > .article-cover { margin-top: var(--s-7); }
.article-cover .cover { aspect-ratio: 1200 / 540; padding-left: 7%; }
.article-cover .cover-word { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.5rem); }
.article-grid, .article-layout {
width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
display: grid; grid-template-columns: 14rem minmax(0, 46rem); column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); justify-content: center;
}
.article-grid > * { grid-column: 2; }
.article-grid > * + * { margin-top: var(--s-5); }
.article-layout > .toc-rail { grid-column: 1; }
.article-layout > .prose { grid-column: 2; max-width: none; }
.toc-rail .toc { position: sticky; top: var(--s-6); }
.toc h2 { font-size: var(--fs-small); font-weight: var(--fw-title); color: var(--text); margin-bottom: var(--s-3); letter-spacing: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 0.35rem 0 0.35rem 0.95rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; font-size: var(--fs-small); line-height: 1.4; }
.toc a:hover { color: var(--text); border-left-color: var(--line-strong); }
.toc-mobile { display: none; }
@media (max-width: 1100px) {
.article-grid, .article-layout { grid-template-columns: minmax(0, 46rem); }
.article-grid > *, .article-layout > .prose { grid-column: 1; }
.toc-rail { display: none; }
.toc-mobile { display: block; margin-bottom: var(--s-7); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.toc-mobile summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 1.2rem; font-weight: var(--fw-title); }
.toc-mobile summary .chev { width: 1em; height: 1em; transition: transform var(--t-fast); }
.toc-mobile[open] summary .chev { transform: rotate(180deg); }
.toc-mobile ol { margin: 0 1.2rem 1.1rem; border-left: 2px solid var(--line); list-style: none; padding: 0; }
.toc-mobile a { display: block; padding: 0.4rem 0 0.4rem 0.9rem; color: var(--text-2); text-decoration: none; font-size: var(--fs-small); }
}
.prose { font-size: var(--fs-read); line-height: var(--lh-read); max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-h2-read); font-weight: var(--fw-title); letter-spacing: -0.02em; line-height: 1.2; margin-top: 2.4em; scroll-margin-top: var(--s-6); }
.prose h2 .step { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 0.3em; }
.prose h3 { font-size: var(--fs-h3); font-weight: var(--fw-title); letter-spacing: -0.01em; line-height: 1.3; margin-top: 1.9em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--accent); font-weight: var(--fw-title); }
.prose blockquote { padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid var(--fill); color: var(--text-2); font-style: normal; }
.prose figure img { border-radius: var(--r-md); }
.prose figcaption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-3); line-height: 1.5; }
.prose .figure-phone { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-6); align-items: center; padding: var(--s-6); border-radius: var(--r-lg); background: var(--classic-soft); }
.prose .figure-phone .device { width: 100%; }
.prose .figure-phone figcaption { margin: 0; font-size: var(--fs-body); color: var(--text-2); }
@media (max-width: 560px) { .prose .figure-phone { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); padding: var(--s-4); gap: var(--s-4); } .prose .figure-phone figcaption { font-size: var(--fs-small); } }
.tldr { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--fill-soft); color: var(--text); }
.tldr .tldr-label { display: block; font-size: var(--fs-small); font-weight: var(--fw-title); color: var(--fill-soft-ink); margin-bottom: var(--s-2); }
.tldr p { font-size: var(--fs-body); line-height: 1.6; }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; min-width: 30rem; }
.prose caption { caption-side: top; text-align: left; padding: 0.9rem 1.1rem 0; font-weight: var(--fw-title); color: var(--text); font-size: var(--fs-small); }
.prose th, .prose td { padding: 0.75rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { color: var(--text-2); font-weight: var(--fw-title); }
.prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose td [lang] { font-weight: var(--fw-strong); }
.prose td, .prose th { font-variant-numeric: tabular-nums; }
.callout { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: var(--tone-soft, var(--fill-soft)); font-size: var(--fs-body); line-height: 1.6; }
.callout .callout-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--tone-ink); }
.callout .callout-icon svg.i { width: 20px; height: 20px; }
.callout strong.callout-title { display: block; color: var(--tone-ink); font-weight: var(--fw-title); margin-bottom: 0.15rem; }
.callout > div > * + * { margin-top: 0.5em; }
.word-card { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.word-card .wc-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.word-card .wc-term { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: var(--fw-display); letter-spacing: -0.025em; line-height: 1.1; }
.word-card .wc-pos { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }
.word-card .wc-meaning { margin-top: var(--s-2); color: var(--accent); font-size: var(--fs-h3); font-weight: var(--fw-title); line-height: 1.3; }
.word-card .wc-example { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-sm); background: var(--muted); display: grid; grid-template-columns: 1fr auto; gap: 0.25rem var(--s-3); }
.word-card .wc-example p { grid-column: 1; line-height: 1.5; }
.word-card .wc-example .tr { color: var(--text-2); font-size: var(--fs-small); }
.word-card .wc-example svg.i { grid-column: 2; grid-row: 1; color: var(--accent); width: 22px; height: 22px; }
.word-card mark { background-size: 100% 0.42em; }
.word-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 560px) { .word-pair { grid-template-columns: 1fr; } }
.cta-box {
position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end;
padding: var(--s-7); border-radius: var(--r-xl); background: var(--classic-soft); font-size: var(--fs-body); line-height: 1.55;
background-image: radial-gradient(circle, var(--classic-dot) var(--dot-r), transparent calc(var(--dot-r) + 0.6px)); background-size: var(--dot-size) var(--dot-size);
}
.cta-box h2, .cta-box .cta-title { font-size: var(--fs-h3); font-weight: var(--fw-title); letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.cta-box > div > * + * { margin-top: var(--s-3); }
.cta-box .stores { margin-top: var(--s-5); }
.cta-box .buddy { width: 108px; align-self: center; margin-right: var(--s-4); transform: rotate(-6deg); }
@media (max-width: 620px) { .cta-box { grid-template-columns: 1fr; padding: var(--s-6); } .cta-box .buddy { position: absolute; right: 14px; top: 16px; width: 64px; margin: 0; } .cta-box > div > :first-child { padding-right: 70px; } }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-5); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-body); line-height: 1.55; }
.author-box img { width: 60px; height: 60px; border-radius: 15px; }
.author-box .author-name { font-weight: var(--fw-title); font-size: var(--fs-h4); }
.author-box p { color: var(--text-2); }
.author-box > div > * + * { margin-top: 0.35rem; }
.also-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-small); color: var(--text-3); }
.series-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); font-size: var(--fs-body); }
.series-nav a { display: block; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--text); font-weight: var(--fw-strong); line-height: 1.35; }
.series-nav a span { display: block; font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-medium); margin-bottom: 0.25rem; }
.series-nav a:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.series-nav .next { text-align: right; }
@media (max-width: 560px) { .series-nav { grid-template-columns: 1fr; } .series-nav .next { text-align: left; } }
.related { margin-top: var(--s-11); }
.related h2 { font-size: var(--fs-h2-read); font-weight: var(--fw-title); letter-spacing: -0.02em; margin-bottom: var(--s-6); }
.doc .prose { font-size: var(--fs-body); line-height: 1.7; }
.doc .prose h2 { font-size: var(--fs-h3); margin-top: 2.2em; }
.doc-summary { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); border-left: 5px solid var(--fill); }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-3); }
.lost { text-align: center; padding-block: clamp(2rem, 1rem + 5vw, 6rem) var(--s-10); }
.lost .buddy { width: clamp(110px, 80px + 8vw, 170px); margin: 0 auto var(--s-7); transform: rotate(-6deg); }
.lost h1 { font-size: var(--fs-h1); font-weight: var(--fw-display); letter-spacing: var(--ls-h1); line-height: var(--lh-head); }
.lost .lead { margin: var(--s-5) auto 0; }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-8); }
.lost-links .btn { font-size: var(--fs-body); min-height: 48px; }
@media (max-width: 480px) { .lost-links { display: grid; grid-template-columns: 1fr 1fr; } }
.lost .other-lang { margin-top: var(--s-8); font-size: var(--fs-small); color: var(--text-3); }
.lost .code { display: inline-block; margin-bottom: var(--s-4); padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); font-size: var(--fs-caption); font-weight: var(--fw-title); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
.hero-art .device { animation: settle var(--t-slow) var(--ease-out) both; }
.hero-promise mark { animation: sweep 650ms var(--ease-out) 450ms both; }
.hero-art .buddy-hero { animation: hop 900ms var(--ease-spring) 650ms both; }
.faq details[open] .faq-body, .toc-mobile[open] ol, .menu[open] .menu-panel, .lang[open] .lang-menu { animation: open var(--t-med) var(--ease-out); }
.store, .btn, .cover, .chips a { transition: box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), background-color var(--t-fast); }
.store:hover, .btn-ink:hover, .btn-small:hover { transform: translateY(-1px); }
.shelf-buddy { transition: transform var(--t-med) var(--ease-spring); }
.shelf-buddy:hover { transform: translateY(-10px); }
.shelf-buddy.lean:hover { transform: rotate(0deg) translateY(-10px); }
.picker img { transition: transform var(--t-med) var(--ease-spring); }
.picker li:hover img { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes settle { from { opacity: 0; transform: translateY(24px) rotate(3deg); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes sweep { from { background-size: 0% 0.3em; } to { background-size: 100% 0.3em; } }
@keyframes hop {
0% { opacity: 0; transform: translateY(40%) rotate(-8deg); }
60% { opacity: 1; transform: translateY(-4%) rotate(2deg); }
100% { opacity: 1; transform: none; }
}
@keyframes open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.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; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.nowrap { white-space: nowrap; }
.surface-band { background: var(--surface); border-block: 1px solid var(--line); }
:root {
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
--icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
@media print {
body { background: #fff; color: #000; }
.site-header .nav, .header-actions, .shelf, .stores, .cta-band, .toc-rail, .subnav, .cta-box, .related { display: none !important; }
.site-footer { background: none; color: #000; border: 0; margin-top: 2rem; padding: 1rem 0 0; }
.site-footer a { color: #000; }
a { color: #000; }
.faq details { box-shadow: none; border: 1px solid #ccc; }
}
.eyebrow { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-3); letter-spacing: 0; }
.hero-copy .eyebrow + .hero-title { margin-top: var(--s-3); }
.hero-copy .hero-note { margin-top: var(--s-2); font-size: var(--fs-caption); max-width: 52ch; }
.section-head.wide-head { max-width: 48rem; }
.more { margin-top: var(--s-6); font-weight: var(--fw-strong); }
.more .sep { color: var(--text-3); font-weight: var(--fw-body); }
.more.center { text-align: center; }
.cta-band .more { margin-top: var(--s-5); }
.spread-copy .spread-title { font-size: var(--fs-h2); font-weight: var(--fw-title); line-height: var(--lh-head); letter-spacing: var(--ls-h2); }
.section-tight.pb-0 { padding-bottom: 0; }
.steps .mode-icon.step-no { font-size: 1.25rem; font-weight: var(--fw-display); font-variant-numeric: tabular-nums; }
.courses + .fine, .courses + .ticks { margin-top: var(--s-5); }
.spread-copy .courses { margin-top: var(--s-6); }
.plan .plan-name { font-size: var(--fs-h3); font-weight: var(--fw-title); letter-spacing: var(--ls-h3); }
.plan-pro .plan-name { color: #FFFFFF; }
.plan-pro .ticks strong, .plan .ticks strong { font-weight: var(--fw-title); }
.price-tag-text .price-amount { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); letter-spacing: -0.02em; }
.plans-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-7); }
.plans-cta .fine { flex: 1 1 14rem; }
.duo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .duo-cards { grid-template-columns: 1fr; } }
.duo-cards li p { color: var(--text-2); margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.store-look { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.store-look-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 0 1px rgba(26, 25, 24, 0.08), 0 6px 16px -8px rgba(27, 42, 74, 0.3); }
.kv { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-3); max-width: 44rem; }
.kv li { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
@media (max-width: 560px) { .store-look { grid-template-columns: 1fr; gap: var(--s-5); } .store-look-icon { width: 72px; height: 72px; border-radius: 17px; } }
.qr-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: center; }
.qr-block .qr { width: 200px; height: 200px; padding: 14px; border-radius: var(--r-lg); background: #FFFFFF; box-shadow: var(--shadow-2); }
@media (max-width: 640px) { .qr-block { grid-template-columns: 1fr; } }
.support-intro { max-width: var(--measure); }
.link-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); font-weight: var(--fw-strong); }
.picker.buddy-family { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-3); padding: 0; margin-top: var(--s-5); }
.prose .picker.buddy-family { padding-left: 0; }
.prose .picker li + li { margin-top: 0; }
@media (max-width: 560px) { .picker.buddy-family { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prose th[scope="row"] { font-weight: var(--fw-strong); color: var(--text); width: 34%; }
.prose .table-wrap table { margin: 0; }
.lead-prose { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); }
.lead-prose > * + * { margin-top: var(--s-4); }
.h1-page { display: block; margin-top: var(--s-2); font-size: var(--fs-h3); font-weight: var(--fw-title); letter-spacing: var(--ls-h3); color: var(--text-3); }
.word-card .wc-ipa { margin-top: var(--s-1); color: var(--text-3); font-size: var(--fs-small); }
.cover-long .cover-word { font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem); }
.post-grid .feature .cover-long .cover-word { font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.article-cover .cover-long .cover-word { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.2rem); }
.site-footer .en-note { font-size: var(--fs-caption); }
.page-head .doc-meta { margin-top: var(--s-4); }
.prose .doc-summary + * { margin-top: 1.4em; }
.prose > .cta-box { margin-block: 2.2em; }
article > .related:last-child { margin-bottom: var(--s-9); }
.also-in .chips a { padding: 0.35rem 0.75rem; }
.stores { --bh: 48px; display: flex; flex-wrap: wrap; gap: calc(var(--bh) / 4); }
.stores.small { --bh: 40px; }
.stores.stores-big { --bh: 56px; }
.badge { display: block; flex: none; }
.badge img { display: block; height: var(--bh); width: auto; border-radius: 0; box-shadow: none; }
.badge-play img { height: calc(var(--bh) * 250 / 192); margin-block: calc(var(--bh) * -29 / 192); }
.badge-play.is-padded img { height: calc(var(--bh) * 250 / 168); margin: calc(var(--bh) * -41 / 168); }
@media (max-width: 480px) { .stores, .stores.stores-big { display: flex; --bh: 44px; } .stores.small { --bh: 40px; } }
@media (max-width: 480px) { .lost-links .btn { white-space: normal; text-align: center; line-height: 1.2; padding-inline: 0.8rem; } }
@media (max-width: 480px) { .plans-cta > .stores { flex: 1 1 100%; } }
@media (max-width: 480px) { .picker .name { font-size: var(--fs-caption); overflow-wrap: anywhere; } }
:root:not(.js-theme) .js-only { display: none !important; }
.theme-menu { position: relative; }
.theme-menu > summary {
list-style: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill);
border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.theme-menu > summary:hover { border-color: var(--line-strong); }
.theme-menu .ti { display: none; }
.theme-menu svg.i { width: 20px; height: 20px; }
:root:not([data-theme]) .theme-menu .ti-system,
:root[data-theme="light"] .theme-menu .ti-light,
:root[data-theme="dark"] .theme-menu .ti-dark { display: inline-flex; }
.theme-options {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 11rem;
list-style: none; margin: 0; padding: var(--s-2);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3);
}
.theme-options button {
display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 42px; padding: 0.55rem 0.8rem;
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text);
font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); text-align: left; cursor: pointer;
}
.theme-options button:hover { background: var(--muted); }
.theme-options button[aria-pressed="true"] { background: var(--fill-soft); color: var(--fill-soft-ink); }
.theme-options button:focus-visible, .segmented button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 940px) { .header-actions .theme-menu { display: none; } }
.menu-panel .menu-langs { margin: var(--s-3) 0.9rem 0; padding: var(--s-4) 0 var(--s-1); gap: var(--s-2); }
.menu-panel .menu-theme {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4);
margin: var(--s-3) 0.9rem 0; padding: var(--s-4) 0 var(--s-1); border-top: 1px solid var(--line);
}
.menu-theme-label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-2); }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--muted); }
.segmented button {
min-height: 40px; padding: 0 0.9rem; border: 0; border-radius: var(--r-pill); background: transparent;
color: var(--text-2); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--fill-soft); color: var(--fill-soft-ink); box-shadow: var(--shadow-1); }
@media (prefers-reduced-motion: no-preference) { .theme-menu[open] .theme-options { animation: open var(--t-med) var(--ease-out); } }
.avatar-initials { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c-navy); color: #FFFFFF; font-size: 0.8rem; font-weight: var(--fw-title); letter-spacing: 0.02em; line-height: 1; box-shadow: 0 0 0 1px rgba(26, 25, 24, 0.08), 0 2px 6px -2px rgba(27, 42, 74, 0.25); }
.avatar-initials.avatar-lg { width: 60px; height: 60px; border-radius: 15px; font-size: 1.25rem; }
.avatar-initials.avatar-xl { width: 88px; height: 88px; border-radius: 22px; font-size: 1.8rem; }
.byline .reviewed-by { display: inline-flex; align-items: center; gap: 0.6rem; }
.byline .reviewed-by a { color: var(--text); font-weight: var(--fw-strong); }
.author-box + .author-box { margin-top: var(--s-4); }
.author-box .author-name a { color: inherit; }
.profile-head { display: flex; align-items: center; gap: var(--s-6); }
.profile-head .lead { margin-top: var(--s-2); }
@media (max-width: 520px) { .profile-head { gap: var(--s-4); } .avatar-initials.avatar-xl { width: 64px; height: 64px; border-radius: 16px; font-size: 1.35rem; } }
.profile-links a { font-weight: var(--fw-strong); }
.reviewed-list time { color: var(--text-3); font-size: var(--fs-small); white-space: nowrap; }
.byline .reviewed-by .role { white-space: nowrap; }
:root { --buddy-shadow: rgba(27, 42, 74, 0.26); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --buddy-shadow: rgba(0, 0, 0, 0.5); }
}
.hero-art .hero-buddy { position: absolute; left: 2%; bottom: 0; width: 37%; z-index: 2; }
.hero-art .hero-buddy .buddy-bob { display: block; transform-origin: 47% 97%; }
.hero-art .hero-buddy .buddy-hero { position: relative; left: auto; bottom: auto; width: 100%; z-index: auto; transform-origin: 47% 97%; }
.buddy-ground { position: absolute; left: 11%; right: 17%; bottom: -3.2%; height: 6%; }
.buddy-shadow { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, var(--buddy-shadow), transparent); }
@media (max-width: 860px) { .hero-art .hero-buddy { width: 34%; left: 6%; bottom: 20%; } }
@media (prefers-reduced-motion: no-preference) {
.hero-art .buddy-ground { animation: shadow-in 900ms var(--ease-out) 650ms both; }
.hero-art .buddy-shadow { animation: shadow-bob 7s ease-in-out 2.2s infinite; }
.hero-art .buddy-bob { animation: bob 7s ease-in-out 2.2s infinite; }
.hero-art.is-off .buddy-bob, .hero-art.is-off .buddy-shadow { animation-play-state: paused; }
}
@keyframes shadow-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes bob {
0%, 84%, 100% { transform: none; }
86.5% { transform: scale(1.04, 0.95); }
90.5% { transform: translateY(-11%) scale(0.97, 1.04); }
94.5% { transform: scale(1.05, 0.95); }
97% { transform: translateY(-1.5%) scale(0.99, 1.01); }
}
@keyframes shadow-bob {
0%, 84%, 100% { transform: none; opacity: 1; }
86.5% { transform: scale(1.06, 1); }
90.5% { transform: scale(0.7); opacity: 0.55; }
94.5% { transform: scale(1.08, 1); opacity: 1; }
}
.stage-wrap { position: relative; }
.wander { display: none; }
@supports (animation-timeline: view()) {
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.spread .stage-wrap .wander {
--ww: clamp(40px, 1.6vw + 22px, 54px);
display: block; position: absolute; z-index: 3; right: 7%; top: calc(var(--ww) * -1.31);
width: var(--ww); transform-origin: 47% 97%;
animation: wander linear both; animation-timeline: view(block 27% 30%);
}
.spread.flip .stage-wrap .wander { right: auto; left: 7%; }
.subnav + .spread .stage-wrap .wander { display: none; }
}
}
@keyframes wander {
0% { opacity: 0; translate: 0 -90%; rotate: -10deg; scale: 1; }
9% { opacity: 0.2; }
15% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1.06 0.94; }
20% { translate: 0 -12%; scale: 0.98 1.03; }
25%, 73% { translate: 0 0; rotate: 0deg; scale: 1; }
79% { translate: 0 0; scale: 1.05 0.95; }
86% { opacity: 1; translate: 25% -25%; rotate: 10deg; scale: 0.98 1.03; }
92% { opacity: 0.25; }
100% { opacity: 0; translate: 50% 110%; rotate: 22deg; scale: 1; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.js-motion .stage-buddy:not(.is-in) { opacity: 0; }
.js-motion .stage-buddy.is-in { animation: rise-hop 900ms var(--ease-out) both; }
}
@keyframes rise-hop {
0% { opacity: 0; translate: 0 80%; scale: 1; }
40% { opacity: 1; translate: 0 -16%; scale: 0.97 1.04; }
65% { translate: 0 0; scale: 1.05 0.95; }
82% { translate: 0 -4%; scale: 0.99 1.01; }
100% { opacity: 1; translate: 0 0; scale: 1; }
}
.shelf-buddy.s1 { --n: 0; } .shelf-buddy.s2 { --n: 1; } .shelf-buddy.s3 { --n: 2; } .shelf-buddy.s4 { --n: 3; }
.shelf-buddy.s5 { --n: 4; } .shelf-buddy.s6 { --n: 5; } .shelf-buddy.s7 { --n: 6; } .shelf-buddy.lean { --n: 7; }
@media (prefers-reduced-motion: no-preference) {
.js-motion .shelf-buddy:not(.lean) { transform-origin: 47% 86%; }
.js-motion .shelf-row.is-in .shelf-buddy { animation: shelf-hop 640ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 75ms + 120ms); }
.js-motion .shelf-buddy:hover { transform: none; }
.js-motion .shelf-buddy.lean:hover { transform: rotate(9deg); }
}
@keyframes shelf-hop {
0%, 100% { translate: 0 0; scale: 1; }
18% { translate: 0 0; scale: 1.05 0.95; }
48% { translate: 0 -26%; scale: 0.97 1.04; }
78% { translate: 0 0; scale: 1.05 0.95; }
90% { translate: 0 -3%; scale: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.post-card:hover .cover .buddy { animation: peek 700ms var(--ease-out); }
}
@keyframes peek {
0%, 100% { translate: 0 0; rotate: 0deg; }
40% { translate: 0 -14%; rotate: 4deg; }
70% { translate: 0 2%; rotate: -1deg; }
}
.buddy { cursor: default; }
/* manual theme (generated by build.py from the prefers-color-scheme rules) */
:root[data-theme="dark"] {
--bg: #121A2C;
--bg-dot: rgba(255, 255, 255, 0.055);
--surface: #1B2A4A;
--surface-2: #213356;
--muted: #1F3052;
--line: #2A3B5E;
--line-strong: #7384A6;
--text: #F4F3EF;
--text-2: #C9D3E6;
--text-3: #A9B6CF;
--accent: #7FD0C2;
--accent-hover: #A3DED3;
--fill: var(--c-teal-brand);
--fill-hover: #7FD0C2;
--on-fill: #0A2E29;
--fill-soft: #173B36;
--fill-soft-ink: #9ADBD0;
--strong: #F4F3EF;
--on-strong: #1B2A4A;
--on-strong-2: #3D4B66;
--on-strong-accent: #1F6A60;
--on-strong-mint: #1F6A60;
--footer: #0D1424;
--footer-dot: rgba(255, 255, 255, 0.05);
--mark: #24574F;
--tag-bg: #F4F3EF;
--tag-ink: #1B2A4A;
--tag-note: #1F6A60;
--focus: #7FD0C2;
--device: #0A0F1A;
--device-ring: rgba(255, 255, 255, 0.16);
--success: #81C784;
--danger: #EF9A9A;
--classic-soft: #173B36;  --classic-ink: #9ADBD0;  --classic-dot: rgba(154, 219, 208, 0.08);
--coral-soft: #3A2031;    --coral-ink: #FF9CAE;    --coral-dot: rgba(255, 156, 174, 0.08);
--sunny-soft: #33291A;    --sunny-ink: #FFD37A;    --sunny-dot: rgba(255, 211, 122, 0.08);
--ocean-soft: #16304F;    --ocean-ink: #8CC8F5;    --ocean-dot: rgba(140, 200, 245, 0.08);
--lavender-soft: #2A2450; --lavender-ink: #C4B5F7; --lavender-dot: rgba(196, 181, 247, 0.08);
--wise-soft: #1C3328;     --wise-ink: #9ED9A8;     --wise-dot: rgba(158, 217, 168, 0.08);
--midnight-soft: #1F3052; --midnight-ink: #B9C8E6; --midnight-dot: rgba(185, 200, 230, 0.08);
--shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2);
--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
--shadow-3: 0 2px 6px rgba(0, 0, 0, 0.25), 0 28px 56px -28px rgba(0, 0, 0, 0.7);
--shadow-device: 0 40px 70px -40px rgba(0, 0, 0, 0.8), 0 14px 28px -18px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .price-tag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 30px -18px rgba(0, 0, 0, 0.8); }
:root[data-theme="dark"] .site-footer { border-top-color: #1B2A4A; }
:root[data-theme="dark"] .plan-pro { box-shadow: 0 0 0 1px #2A3B5E, var(--shadow-2); }
:root[data-theme="dark"] { --buddy-shadow: rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }