@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/fonts/manrope-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/fonts/manrope-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: light dark;
--accent: #e8646e;
--accent: light-dark(#d90429, #e8646e);
--accent-hover: #e1636b;
--accent-hover: light-dark(#bd0323, #e1636b);
--bg: #121214;
--bg: light-dark(#ffffff, #121214);
--surface: #19191e;
--surface: light-dark(#f2f2f5, #19191e);
--surface-2: #24242a;
--surface-2: light-dark(#e5e5ea, #24242a);
--surface-3: #2e2d33;
--surface-3: light-dark(#d7d7de, #2e2d33);
--text: #f1f1f1;
--text: light-dark(#17171a, #f1f1f1);
--muted: #a8a8ad;
--muted: light-dark(#47474f, #a8a8ad);
--line: #26252b;
--line: light-dark(#e2e2e7, #26252b);
--line-strong: #3a3a3f;
--line-strong: light-dark(#8a8a95, #3a3a3f);
--hit-wash: rgba(232, 100, 110, 0.14);
--hit-wash: light-dark(rgba(217, 4, 41, 0.10), rgba(232, 100, 110, 0.14));
--selection: rgba(232, 100, 110, 0.32);
--selection: light-dark(rgba(217, 4, 41, 0.18), rgba(232, 100, 110, 0.32));
--ring: rgba(255, 255, 255, 0.05);
--ring: light-dark(rgba(15, 15, 20, 0.09), rgba(255, 255, 255, 0.05));
--shadow-sticky: rgba(0, 0, 0, 0.9);
--shadow-sticky: light-dark(rgba(15, 15, 20, 0.30), rgba(0, 0, 0, 0.9));
--radius-pill: 999px;
--radius: 12px;
--radius-lg: 16px;
--header-h: 64px;
--gutter: 32px;
--font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@supports (color: light-dark(#fff, #000)) {
.theme-light { color-scheme: light; }
.theme-dark { color-scheme: dark; }
}
@media (max-width: 720px) {
:root { --gutter: 20px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 15px/1.5 var(--font);
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
overflow-x: hidden;
}
a { color: inherit; }
img, svg, iframe { max-width: 100%; }
button, input, select { font-family: inherit; }
h1, h2, h3 { letter-spacing: -0.02em; font-weight: 800; }
.sentence, .byline .who, .queue-item, .panel, .clip-line, .clip-sub {
overflow-wrap: break-word;
}
.w { display: inline-block; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
::selection { background: var(--selection); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
padding: 10px 16px;
background: var(--accent-hover);
color: #fff;
border-radius: var(--radius-pill);
font-weight: 700;
text-decoration: none;
z-index: 20;
}
.skip-link:focus { left: 8px; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.site-header {
height: var(--header-h);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
}
.site-header .wrap {
width: 100%;
display: flex;
align-items: center;
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex: none;
}
.brand-mark {
display: block;
flex: none;
transform: translateY(1.9px);
}
.brand-mark .mark-face { fill: var(--text); }
.brand-mark .mark-tongue { fill: var(--accent); }
.brand-word {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
white-space: nowrap;
}
.brand-word b { color: var(--accent); font-weight: 800; }
.header-search {
flex: 1;
display: flex;
justify-content: center;
min-width: 0;
}
.header-search { justify-content: flex-start; }
.header-search > * { flex: 1 1 auto; max-width: 640px; min-width: 0; }
.header-search .search-form.compact { width: 100%; max-width: 640px; min-width: 0; }
.site-nav {
display: flex;
align-items: center;
gap: 20px;
margin-left: auto;
}
.site-nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: inherit;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current='page'] { color: var(--accent); }
@media (max-width: 560px) {
.site-nav { gap: 14px; }
.site-nav a { font-size: 13px; }
.site-header .wrap { gap: 12px; }
.brand-word { font-size: 19px; }
}
.me-ava { width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden; background: var(--surface-3); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.me-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-me { display: none; text-decoration: none; }
.shell-main { min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell-main > main { flex: 1; container: main / inline-size; }
.top-brand { display: none; }
.site-header:not(.has-search) { display: none; }
@media (max-width: 760px) {
.site-header:not(.has-search) { display: flex; }
.top-brand { display: flex; }
.top-me { display: inline-flex; margin-left: auto; min-height: 44px; align-items: center; }
.site-header.has-search { height: auto; padding: 10px 0; }
.site-header .wrap { flex-wrap: wrap; row-gap: 10px; }
.header-search { flex-basis: 100%; }
.header-search > *, .header-search .search-form.compact { max-width: none; }
}
.theme-switch { display: flex; gap: 6px; }
.theme-switch button {
height: 32px;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: none;
color: var(--muted);
font: 700 13px var(--font);
cursor: pointer;
}
.theme-switch button:hover { background: var(--surface); color: var(--text); }
:root[data-theme='auto'] [data-theme-set='auto'],
:root[data-theme='light'] [data-theme-set='light'],
:root[data-theme='dark'] [data-theme-set='dark'] {
background: var(--text);
border-color: var(--text);
color: var(--bg);
}
html:not(.js) .theme-switch { display: none; }
.search-form {
display: flex;
align-items: center;
gap: 8px;
width: 720px;
max-width: 100%;
margin: 0 auto;
min-height: 56px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
padding: 0 7px 0 22px;
background: var(--surface);
box-shadow: none;
}
.search-form .icon { flex: none; display: block; }
.search-form .icon circle, .search-form .icon path {
fill: none; stroke: var(--muted); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.search-form .q {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: 400 17px var(--font);
color: var(--text);
padding: 0 8px;
height: 54px;
}
.search-form .q::-webkit-search-cancel-button { display: none; }
.search-form .q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.search-form:focus-within { border-color: var(--accent); }
.search-form label { position: absolute; left: -9999px; }
.search-form select {
border: 0;
background: transparent;
color: var(--muted);
font: 600 14px var(--font);
padding: 0 4px;
cursor: pointer;
max-width: 130px;
}
.search-form button[type='submit'] {
display: inline-flex;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 20px;
border-radius: var(--radius-pill);
background: var(--accent-hover);
color: #fff;
border: 0;
font: 800 15px var(--font);
cursor: pointer;
flex: none;
}
.search-form button[type='submit']:hover { background: var(--accent-hover); }
.search-form.compact {
width: 640px;
min-height: 48px;
padding: 0 4px 0 18px;
background: var(--surface);
border-color: var(--line-strong);
box-shadow: none;
margin: 0;
}
.search-form.compact .q { font-size: 16px; height: 46px; padding: 0; }
.search-form.compact .icon { display: none; }
.search-form.compact select { display: none; }
.search-form.compact button[type='submit'] {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
display: grid;
place-items: center;
}
.search-form.compact button[type='submit'] .label { display: none; }
@media (max-width: 720px) {
.search-form { padding: 0 6px 0 16px; }
.search-form .q { font-size: 16px; }
.search-form button[type='submit'] { padding: 0 14px; }
}
.pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
.pills.center { justify-content: center; }
.pill {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border: 0;
cursor: pointer;
white-space: nowrap;
}
.pill:hover { background: var(--surface-3); }
.pill.is-active { background: var(--text); color: var(--bg); }
.pill.is-active:hover { background: var(--text); }
.pill[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; }
.pill-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 6px; }
.section { padding: 24px 0 48px; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.section-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.results aside .section-head h2 { font-size: 16px; }
.results aside .section-head { margin-top: 24px; }
.section-head .aside { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.onb-hero {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
gap: 48px;
align-items: start;
padding: 48px 0 56px;
}
.onb-wel-slot { display: none; min-width: 0; }
html.is-me .onb:not(.is-out) .onb-wel-slot, .onb.is-in .onb-wel-slot { display: block; }
html.is-me .onb:not(.is-out) :is(.onb-fenn, .onb-eyebrow, .onb-out), .onb.is-in :is(.onb-fenn, .onb-eyebrow, .onb-out) { display: none; }
.onb-in { display: none; }
html.is-me .onb:not(.is-out) .onb-in, .onb.is-in .onb-in { display: inline; }
.onb-hero-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; container-type: inline-size; }
.onb-hero-main > * { margin: 0; }
.onb-eyebrow {
align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 4px;
border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 700;
}
.onb-hero .onb-h1 { font-size: 52px; font-size: clamp(38px, 9.4cqi, 58px); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; }
.onb-hero .lede { font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--muted); max-width: 620px; }
.onb-hero .search-form { margin: 4px 0 0; max-width: min(100%, 640px); }
.onb-try { font-size: 15px; font-weight: 500; color: var(--muted); }
.onb-try a { color: var(--text); }
.onb-fenn { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.onb-fenn .bubble { width: 100%; max-width: 400px; padding: 20px 22px; border-radius: 24px; }
.onb-fenn .bubble-down::before { left: calc(50% - 8px); }
.onb-fenn .bubble-text p + .onb-fenn-acts { margin-top: 16px; }
.onb-fenn .fn-btn { width: 100%; min-height: 52px; white-space: normal; text-align: center; }
.onb-wel { background: var(--surface); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.onb-wel.is-loading { min-height: 380px; }
@media (prefers-reduced-motion: no-preference) { .onb-wel:not(.is-loading) { animation: fn-fade 0.35s ease-out both; } }
.onb-wel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 2px; }
.onb-wel-hi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.onb-wel-hi h2 { margin: 0; font-size: 22px; font-weight: 800; }
.onb-wel-hi p { margin: 0; font-size: 15px; color: var(--muted); }
.onb-wel-streak { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.onb-wel-streak b { font-size: 13px; color: var(--accent); }
.onb-wel-streak ol { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.onb-wel-streak li { width: 11px; height: 11px; border-radius: 3px; background: var(--surface-3); }
.onb-wel-streak li.is-on { background: var(--accent); }
.onb-wel .says.onb-wel-says { flex-direction: row; align-items: center; gap: 12px; }
.onb-wel .says.onb-wel-says .bubble { flex: 1 1 auto; min-width: 0; max-width: none; box-shadow: none; }
.onb-wel .says.onb-wel-says .bubble::before { left: -7px; right: auto; top: 26px; }
.onb-wel-says .bubble-text p.onb-wel-says-acts { margin-top: 8px; }
.onb-wel-daily {
display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 16px; border-radius: 14px;
background: var(--accent-hover); color: #fff; text-decoration: none; line-height: 1.35;
}
.onb-wel-daily:hover { filter: brightness(1.08); }
.onb-wel-daily.is-done { background: var(--surface-2); color: var(--text); }
.onb-wel-daily.is-done:hover { filter: none; background: var(--surface-3); }
.onb-wel-dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-wel-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.onb-wel-daily.is-done .onb-wel-kicker { color: var(--muted); }
.onb-wel-title { font-size: 17px; font-weight: 800; line-height: 1.25; }
.onb-wel-foot { font-size: 13px; font-weight: 700; }
.onb-wel-go { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--radius-pill); background: #fff; color: var(--accent-hover); font-size: 14px; font-weight: 800; }
.onb-wel-daily.is-done .onb-wel-go { background: var(--text); color: var(--bg); }
.onb-wel-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; }
.onb-wel-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px 6px 7px; color: var(--text); text-decoration: none; }
.onb-wel-row + .onb-wel-row { border-top: 1px solid var(--line); }
.onb-wel-row:first-child { border-radius: 13px 13px 0 0; }
.onb-wel-row:last-child { border-radius: 0 0 13px 13px; }
.onb-wel-row:only-child { border-radius: 13px; }
.onb-wel-row:hover { background: var(--surface-2); }
.onb-wel-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.onb-wel-ico.is-red { color: var(--accent); }
.onb-wel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.onb-wel-text b { font-size: 15px; }
.onb-wel-text > span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-wel-arr { color: var(--muted); }
.onb-wel-badges { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 2px 2px 0; }
.onb-wel-badges .onb-wel-kicker { color: var(--muted); }
.onb-wel-badges ul { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.onb-wel-badges a { margin-left: auto; display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 700; }
.onb-prods { display: flex; flex-direction: column; gap: 20px; padding: 0 0 56px; }
.onb-prods-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.onb-prods-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.onb-prods-head p { margin: 0; font-size: 15px; font-weight: 500; color: var(--muted); }
.onb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.onb-card {
--pc: var(--b-coral); --pc-bg: var(--b-coral-bg);
display: flex; flex-direction: column; min-width: 0; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: 22px; color: var(--text); text-decoration: none;
}
.onb-card:hover { border-color: var(--line-strong); }
.onb-card-dict { --pc: var(--b-amber); --pc-bg: var(--b-amber-bg); }
.onb-card-shadow { --pc: var(--b-teal); --pc-bg: var(--b-teal-bg); }
.onb-card-lib { --pc: var(--b-blue); --pc-bg: var(--b-blue-bg); }
.onb-card-app { --pc: var(--b-violet); --pc-bg: var(--b-violet-bg); }
.onb-card-in {
flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
align-items: center; gap: 10px; padding: 18px 22px 20px;
}
.onb-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-bg); color: var(--pc); }
.onb-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc); }
.onb-title, .onb-text, .onb-foot { grid-column: 1 / -1; margin: 0; }
.onb-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.onb-text { font-size: 15px; line-height: 1.5; color: var(--muted); }
.onb-text.is-short, .onb-chev { display: none; }
.onb-foot { align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; font-size: 13px; font-weight: 700; }
.onb-go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text); }
.onb-card:hover .onb-go { background: var(--pc); color: var(--bg); }
.onb-pic {
position: relative; height: 184px; padding: 20px 22px; overflow: hidden;
display: flex; flex-direction: column; justify-content: center; gap: 14px;
background: color-mix(in srgb, var(--surface) 55%, var(--bg)); border-bottom: 1px solid var(--line);
}
.onb-pic > * { margin: 0; }
.pv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-tabs span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 13px; font-weight: 700; }
.pv-tabs .is-on { background: var(--pc); color: var(--bg); font-weight: 800; }
.pv-line { font-size: 20px; font-weight: 700; line-height: 1.4; }
.pv-line u { color: var(--pc); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pv-typed { display: inline-block; min-width: 96px; border-bottom: 3px solid var(--pc); color: var(--pc); line-height: 1.2; }
.pv-typed::after { content: ''; display: inline-block; width: 2px; height: 20px; margin-left: 1px; background: var(--pc); vertical-align: -3px; }
.pv-prog { display: flex; align-items: center; gap: 10px; }
.pv-prog span { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.pv-prog i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--pc); }
.pv-prog b { font-size: 12px; font-weight: 800; color: var(--muted); }
.onb-card-shadow .onb-pic { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.pv-ring { position: relative; flex: none; width: 96px; height: 96px; }
.pv-ring svg { display: block; fill: none; stroke-width: 9; }
.pv-ring circle:first-child { stroke: var(--surface-2); }
.pv-ring circle:last-child { stroke: var(--pc); stroke-linecap: round; stroke-dasharray: 181 252; transform: rotate(-90deg); transform-origin: 48px 48px; }
.pv-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.pv-say { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pv-say > * { margin: 0; }
.pv-phs { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-phs span { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 46px; padding: 0 6px; border-radius: 10px; background: var(--b-teal-bg); color: var(--b-teal); font-size: 16px; font-weight: 800; line-height: 1; }
.pv-phs small { margin-top: 3px; font-size: 10px; font-weight: 700; }
.pv-phs .is-bad { background: var(--b-coral-bg); color: var(--b-coral); }
.onb-card-ext .onb-pic { justify-content: flex-start; }
.pv-page { color-scheme: light; padding: 14px 16px 40px; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--line); font: 16px/1.6 Georgia, 'Times New Roman', serif; }
.pv-page mark, .pv-screen mark { background: color-mix(in srgb, var(--b-blue) 28%, transparent); color: inherit; }
.pv-page mark { border-bottom: 2px dotted var(--accent); }
.pv-menu {
color-scheme: light; position: absolute; left: 70px; top: 98px; padding: 6px; border-radius: 10px; white-space: nowrap;
display: flex; flex-direction: column; background: var(--bg); color: var(--text); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); font-size: 13px;
}
.pv-menu span { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; color: var(--muted); }
.pv-menu .is-on { background: var(--surface); color: var(--text); font-weight: 800; }
.pv-mark { flex: none; }
.pv-mark circle { fill: var(--text); }
.pv-mark rect { fill: var(--accent); }
.onb-card-lib .onb-pic { justify-content: flex-start; gap: 8px; padding-top: 18px; }
.pv-site { font-size: 12px; font-weight: 700; color: var(--muted); }
.pv-item { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 12px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 50%, var(--surface-2)); font-size: 14px; font-weight: 700; }
.pv-item b { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pc); }
.onb-card-app .onb-pic { align-items: center; justify-content: flex-start; padding: 18px 22px 0; }
.pv-phone { flex: none; width: 150px; height: 166px; border: 3px solid var(--line-strong); border-bottom: 0; border-radius: 26px 26px 0 0; overflow: hidden; }
.pv-screen { color-scheme: light; position: relative; height: 100%; padding: 23px 12px 0; background: var(--surface); color: var(--text); font: 12px/1.55 Georgia, 'Times New Roman', serif; }
.pv-screen p { margin: 0; }
.pv-sel { color-scheme: dark; position: absolute; left: 8px; right: 8px; top: 74px; display: flex; height: 30px; border-radius: 8px; overflow: hidden; background: var(--bg); color: var(--text); font: 700 11px var(--font); }
.pv-sel span { flex: 1; display: grid; place-items: center; }
.pv-sel .is-on { flex: 1.6; background: var(--b-violet); color: var(--bg); font-weight: 800; }
.pv-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; padding: 10px 12px; border-radius: 14px 14px 0 0; background: var(--bg); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18); font-family: var(--font); }
.pv-sheet b { display: block; font-size: 12px; font-weight: 800; }
.pv-sheet i { display: block; width: 80%; height: 6px; margin-top: 5px; border-radius: var(--radius-pill); background: var(--line); }
.pv-abc { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.pv-abc span { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--surface-2); font-size: 13px; font-weight: 800; }
.pv-abc .is-on { background: var(--accent-hover); color: #fff; }
.pv-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-pills span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 700; }
.onb-pro {
display: none; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 20px 24px; border-radius: 22px;
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--bg));
color: var(--text); text-decoration: none;
}
html.is-me:not(.is-pro) .onb:not(.is-in):not(.is-out) .onb-pro, .onb.is-free .onb-pro { display: flex; }
.onb-pro:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.onb-pro-k { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--b-coral-bg); color: var(--b-coral); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.onb-pro-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.onb-pro-text b { font-size: 19px; font-weight: 800; }
.onb-pro-text span { font-size: 14px; color: var(--muted); }
.onb-pro-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.onb-pro-price { font-size: 15px; font-weight: 700; }
.onb-pro-go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--accent-hover); color: #fff; font-size: 16px; font-weight: 800; }
@container main (max-width: 980px) {
.onb-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.onb-fenn { flex-direction: row-reverse; justify-content: flex-end; align-items: center; align-self: stretch; }
.onb-fenn .fenn { width: auto; height: 180px; }
.onb-fenn .bubble { flex: 0 1 auto; width: auto; min-width: 0; }
.onb-fenn .bubble-down::before { left: -7px; top: 26px; bottom: auto; }
}
@media (max-width: 760px) {
.onb-prods { gap: 12px; }
.onb-prods-head h2 { font-size: 23px; }
.onb-cards { display: flex; flex-direction: column; gap: 12px; }
.onb-card { flex-direction: row; align-items: center; border-radius: 20px; }
.onb-card-ext { order: 1; }
.onb-pic, .onb-title, .onb-text, .onb-foot { display: none; }
.onb-card-in { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: none; align-content: center; gap: 3px 14px; min-height: 90px; padding: 16px 0 16px 16px; }
.onb-ico { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; }
.onb-ico svg { width: 22px; height: 22px; }
.onb-name { grid-column: 2; align-self: end; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--text); }
.onb-text.is-short { display: block; grid-column: 2; align-self: start; font-size: 14px; line-height: 1.4; }
.onb-chev { flex: none; display: grid; place-items: center; padding: 0 16px 0 10px; color: var(--muted); }
.onb-pro { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 4px; padding: 18px; border-radius: 20px; }
.onb-pro-k { align-self: flex-start; height: 28px; font-size: 11px; }
.onb-pro-text { flex: none; }
.onb-pro-text b { font-size: 17px; line-height: 1.35; }
.onb-pro-text span { display: none; }
.onb-pro-end { justify-content: space-between; gap: 10px; }
.onb-pro-price { font-size: 14px; }
.onb-pro-go { min-height: 44px; padding: 0 20px; font-size: 15px; }
}
@media (max-width: 720px) {
.onb-hero { padding: 24px 0 28px; }
.onb-hero-main { gap: 16px; }
.onb-hero .onb-h1 { font-size: 34px; letter-spacing: -0.03em; }
.onb-hero .lede { font-size: 16px; }
.onb-try { font-size: 14px; }
.onb-fenn { gap: 12px; }
.onb-fenn .fenn { height: 120px; }
.onb-fenn .bubble { padding: 14px 16px; }
.onb-fenn .bubble-text { font-size: 15px; }
.onb-fenn .fn-btn { min-height: 48px; }
.onb-wel { padding: 16px; }
}
.clip-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px 16px;
}
@container main (max-width: 1004px) { .clip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container main (max-width: 744px) { .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .clip-grid { grid-template-columns: 1fr; } }
.clip { display: block; color: inherit; text-decoration: none; }
.thumb {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
background: var(--surface-3);
display: block;
box-shadow: inset 0 0 0 1px var(--ring);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .at {
position: absolute;
right: 8px;
bottom: 8px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.clip-meta { display: flex; gap: 12px; margin-top: 12px; }
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-3);
display: grid;
place-items: center;
font-size: 14px;
font-weight: 800;
flex: none;
}
.clip-line { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.clip-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.results-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 0 0;
flex-wrap: wrap;
}
.results-count { margin-left: auto; font-size: 14px; color: var(--muted); }
.results-count b { color: var(--text); font-weight: 800; }
.results-count.standalone { margin: 16px 0 0; margin-left: 0; }
.results-count .hit-word {
padding: 0 4px;
border-radius: 4px;
background: var(--hit-wash);
box-shadow: inset 0 -0.12em 0 0 var(--accent);
}
.spell-link {
color: var(--accent);
font-weight: 700;
text-underline-offset: 3px;
}
.results[hidden] { display: none; }
.results {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 24px;
padding: 20px 0 48px;
}
@container main (max-width: 1004px) { .results { grid-template-columns: minmax(0, 1fr); } }
@container main (min-width: 1005px) {
.stage { position: sticky; top: 16px; align-self: start; }
.results aside {
position: sticky; top: 16px; align-self: start;
max-height: calc(100vh - 32px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--surface-2) transparent;
}
.stage .player-frame {
width: 100%;
max-height: max(220px, calc(100vh - 414px));
}
}
.player-frame {
position: relative;
aspect-ratio: 16 / 9;
color-scheme: dark;
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.player-frame iframe {
position: absolute;
inset: 8px 8px 0;
width: calc(100% - 16px);
height: calc(100% - 8px);
border: 0;
border-radius: var(--radius) var(--radius) 0 0;
}
.player-frame .placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--muted);
font: 12px var(--mono);
}
.moment { --pad: 0.13em; }
.sentence {
margin: 0 calc(-1 * var(--pad));
font-size: 19px;
line-height: 30px;
font-weight: 400;
letter-spacing: 0;
color: var(--text);
}
.sentence, .moment-near { text-wrap: balance; }
.sentence .w, .moment-near .w { margin-right: 0; padding: 0 var(--pad); }
.sentence .w[data-at] { cursor: pointer; }
.sentence .w[data-at]:hover { background: var(--surface-2); }
.sentence .w.is-hit {
color: var(--text);
font-weight: 800;
padding: 0 var(--pad);
border-radius: 4px;
background: var(--hit-wash);
box-shadow: inset 0 -0.12em 0 0 var(--accent);
}
.sentence .w.is-hit + .w.is-hit { border-radius: 0 4px 4px 0; }
.sentence .w.is-hit:has(+ .w.is-hit) { border-radius: 4px 0 0 4px; }
.queue-item .line { color: var(--muted); }
.queue-item .line .w { margin-right: 0.24em; }
.queue-item .line .w.is-hit {
color: var(--text);
font-weight: 800;
box-shadow: inset 0 -0.12em 0 0 var(--accent);
}
.byline { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.byline .avatar { width: 40px; height: 40px; font-size: 15px; }
.byline .who { flex: 1 1 0; min-width: 0; }
.byline .who p { margin: 0; }
.byline .who .name { font-size: 15px; font-weight: 700; }
.byline .who .sub { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
.byline .who { flex-basis: calc(100% - 52px); }
.byline .btn { margin-left: 52px; }
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 16px;
border-radius: var(--radius-pill);
border: 1px solid var(--line-strong);
background: transparent;
color: var(--text);
font: 700 14px var(--font);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.controls {
display: flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 8px;
border-radius: var(--radius-pill);
background: var(--surface);
flex-wrap: wrap;
}
.controls button {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text);
border: 0;
font: 700 14px var(--font);
cursor: pointer;
}
.controls button:hover:not(:disabled) { background: var(--surface-3); }
.controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.controls .hint { margin-left: auto; margin-right: 12px; font-size: 13px; color: var(--muted); }
.page-indicator { margin-left: auto; margin-right: auto; font-size: 13px; color: var(--muted); }
.results aside .controls { margin-top: 16px; }
@container main (max-width: 744px) {
.controls { border-radius: var(--radius); }
}
@media (max-width: 560px) {
.controls .hint { display: none; }
.controls {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 8px;
}
.controls button {
height: 56px;
padding: 0 6px;
border-radius: 14px;
font-size: 13px;
justify-content: center;
}
.transport { grid-template-columns: 48px 48px 48px auto auto minmax(0, 1fr); gap: 6px; }
.save-word.in-bar > button { width: 48px; }
.transport button { height: 48px; border-radius: 12px; padding: 0; }
.transport-next { padding: 0 10px; }
@media (max-width: 420px) {
.transport { grid-template-columns: 44px 44px 44px auto auto minmax(0, 1fr); gap: 4px; }
.save-word.in-bar > button { width: 44px; }
.transport > * { min-width: 0; }
.transport-next { overflow: hidden; white-space: nowrap; }
}
.transport .next-word {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.transport .bar-practice { gap: 6px; padding: 0; border: 0; }
.transport .bar-go { height: 48px; border-radius: 12px; background: var(--surface-3); }
.transport svg { width: 24px; height: 24px; }
.transport-step .transport-label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.controls-secondary { grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
}
.panel {
margin-top: 20px;
padding: 18px 20px;
border-radius: var(--radius);
background: var(--surface);
}
.panel-title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.panel .around { margin: 0; font-size: 15px; line-height: 24px; color: var(--muted); }
.panel .now { margin: 4px 0; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--text); }
@media (max-width: 720px) {
.results { display: block; }
.results aside { margin-top: 24px; }
.stage { display: contents; }
.stage-pin {
position: relative;
z-index: 2;
margin: 0 calc(-1 * var(--gutter));
background: var(--bg);
}
.stage .player-frame { border-radius: 0; }
.stage .player-frame iframe { inset: 0; width: 100%; height: 100%; border-radius: 0; }
.stage .transport {
border-radius: 0;
padding: 6px var(--gutter);
box-shadow: none;
}
.moment {
margin: 12px calc(-1 * var(--gutter)) 0;
padding: 10px var(--gutter);
border-radius: 0;
}
.moment-near {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
}
@media (max-width: 720px) and (max-aspect-ratio: 3/4) {
.stage-pin {
position: sticky;
top: 0;
box-shadow: 0 10px 20px -12px var(--shadow-sticky);
}
}
.moment {
margin-top: 16px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 12px;
}
.moment > .sentence { margin-top: -1.5px; margin-bottom: 1.5px; }
.moment-near {
margin: 0 calc(-1 * var(--pad));
font-size: 19px;
line-height: 30px;
font-weight: 400;
color: var(--text);
overflow-wrap: break-word;
}
.moment-near .w[data-at] { cursor: pointer; }
.moment-near .w[data-at]:hover { background: var(--surface-2); }
@media (max-width: 720px) {
.sentence + .moment-near { display: none; }
.moment-near, .sentence { font-size: 17px; line-height: 27px; }
}
.results aside > :first-child { margin-top: 0; }
.practice {
margin-top: 16px;
padding: 16px;
border-radius: var(--radius);
background: var(--surface);
}
.practice h2 { margin: 0 0 12px; font-size: 17px; line-height: 1.3; font-weight: 800; }
.practice-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.practice-go {
display: flex;
align-items: center;
gap: 14px;
min-height: 44px;
padding: 14px;
border-radius: var(--radius);
background: var(--bg);
color: var(--text);
text-decoration: none;
}
.practice-go:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.practice-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.practice-ico {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius);
background: var(--surface-2);
}
.practice-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.practice-tx b { font-size: 16px; font-weight: 800; }
.practice-tx b .beta { margin-left: 4px; vertical-align: 2px; }
.practice-tx > span { font-size: 14px; color: var(--muted); }
.practice-arr { flex: none; font-size: 18px; font-weight: 800; color: var(--accent); }
@media (max-width: 720px) {
.practice { margin: 16px calc(-1 * var(--gutter)) 0; padding: 14px var(--gutter); border-radius: 0; }
.practice h2 { font-size: 16px; margin-bottom: 10px; }
.practice-links { grid-template-columns: minmax(0, 1fr); }
.practice-go { padding: 12px; gap: 12px; }
.practice-ico { width: 36px; height: 36px; border-radius: 10px; }
.practice-tx b { font-size: 15px; }
.practice-tx > span { font-size: 13px; }
}
.nudge {
position: absolute;
left: 20px;
right: 20px;
bottom: 64px;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 8px 12px 16px;
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 96%, transparent);
box-shadow: 0 0 0 1px var(--line-strong), 0 12px 32px rgba(0, 0, 0, 0.5);
color: var(--text);
animation: nudge-in 0.25s ease-out;
}
@keyframes nudge-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }
.nudge-tx { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.nudge-tx b { font-size: 16px; font-weight: 800; }
.nudge-tx span { font-size: 14px; color: var(--muted); }
.nudge-go {
flex: none;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 10px;
background: var(--surface-3);
color: var(--text);
font-size: 14px;
font-weight: 800;
text-decoration: none;
}
.nudge-go.is-primary { background: var(--text); color: var(--bg); }
.nudge-go:focus-visible, .nudge-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nudge-x {
flex: none;
width: 44px;
height: 44px;
border: 0;
background: none;
color: var(--muted);
font-size: 22px;
cursor: pointer;
}
@media (max-width: 720px) {
.nudge { left: 8px; right: 8px; bottom: 44px; gap: 6px; padding: 6px 4px 6px 12px; }
.nudge-tx span { display: none; }
.nudge-tx b { font-size: 14px; }
.nudge-go { min-height: 40px; padding: 0 10px; font-size: 13px; }
.nudge-x { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
.nudge-tx b { font-size: 13px; }
}
.stage-pin { container-type: inline-size; }
@media (min-width: 721px) { .stage-pin { position: relative; } }
.bar-practice {
display: flex;
align-items: center;
gap: 8px;
padding-right: 12px;
border-right: 1px solid var(--line-strong);
}
.bar-go {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 14px;
border-radius: 10px;
background: var(--surface-2);
color: var(--text);
font: 700 14px var(--font);
text-decoration: none;
}
.bar-go:hover { background: var(--surface-3); }
.bar-go.is-open { box-shadow: inset 0 0 0 2px var(--text); }
@container (max-width: 759px) {
.bar-go { width: 44px; padding: 0; }
.bar-label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.bar-tip {
position: absolute;
left: 12px;
right: 12px;
bottom: 72px;
z-index: 4;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 8px;
padding: 12px 6px 12px 14px;
border-radius: var(--radius);
background: #f1f1f1;
color: #17171a;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
animation: nudge-in 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) { .bar-tip { animation: none; } }
.bar-tip p { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.4; color: #47474f; }
.bar-tip p b { font-size: 15px; color: #17171a; }
.bar-tip p .beta { margin-left: 6px; vertical-align: 2px; color: #a35300; border-color: #a35300; }
.bar-tip-go {
grid-column: 1;
justify-self: start;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 10px;
background: #d90429;
color: #fff;
font-size: 14px;
font-weight: 800;
text-decoration: none;
}
.bar-tip-x {
grid-column: 2;
grid-row: 1;
width: 44px;
height: 44px;
border: 0;
background: none;
color: #47474f;
font-size: 22px;
cursor: pointer;
}
.practice.is-rail { display: none; margin: 0 0 16px; }
.rail-mn { margin-bottom: 16px; }
.rail-mn h2 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rail-mn .cm.is-card + .cm { margin-top: 10px; }
@container main (min-width: 1005px) {
.results aside .rail-mn { margin-bottom: 12px; }
.results aside .rail-pin + .section-head { margin-top: 4px; }
.results aside .rail-mn .cm { min-height: 228px; box-sizing: border-box; }
.results aside .rail-mn .cm.is-card { min-height: 0; }
.results aside .rail-mn .cm-f { margin-top: auto; }
.results aside .rail-mn .cm-d,
.results aside .rail-mn .cm-q { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.results aside .rail-mn .cm-d,
.results aside .rail-mn .cm-q { -webkit-line-clamp: 2; line-clamp: 2; }
.practice.is-rail { display: block; margin: 0; padding: 14px; }
.stage .practice { display: none; }
.practice.is-rail h2 { font-size: 16px; margin-bottom: 10px; }
.practice.is-rail .practice-links { grid-template-columns: minmax(0, 1fr); }
.practice.is-rail .practice-go { padding: 12px; gap: 12px; }
.practice.is-rail .practice-ico { width: 36px; height: 36px; border-radius: 10px; }
.practice.is-rail .practice-tx b { font-size: 15px; }
.practice.is-rail .practice-tx > span { font-size: 13px; }
}
@media (min-height: 800px) {
@container main (min-width: 1005px) {
.results aside .rail-pin { position: sticky; top: 0; z-index: 1; padding-bottom: 12px; background: var(--bg); }
}
}
.player-frame { border-radius: calc(var(--radius) + 8px) calc(var(--radius) + 8px) 0 0; }
.transport {
display: grid;
grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px;
padding: 8px;
color-scheme: dark;
background: var(--surface);
border-radius: 0 0 calc(var(--radius) + 8px) calc(var(--radius) + 8px);
box-shadow: 0 1px 1px rgba(15, 15, 20, 0.05), 0 10px 24px -10px rgba(15, 15, 20, 0.28);
}
.transport button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 16px;
border: 0;
border-radius: 10px;
background: var(--surface-2);
color: var(--text);
font: 700 14px var(--font);
cursor: pointer;
position: relative;
}
.transport button:hover:not(:disabled) { background: var(--surface-3); }
.transport button:disabled { opacity: 0.4; cursor: not-allowed; }
.transport svg {
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.transport-next {
background: var(--accent);
color: #fff;
font-weight: 800;
padding: 0 18px;
}
.transport-next:hover:not(:disabled) { background: var(--accent-hover); }
.transport-next:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.controls button.is-on {
background: var(--surface-3);
box-shadow: inset 0 0 0 1px var(--line-strong);
}
.report { position: relative; }
.controls .report-toggle {
background: transparent;
color: var(--muted);
padding: 0 14px 0 12px;
}
.controls .report-toggle:hover:not([aria-disabled='true']),
.controls .report-toggle[aria-expanded='true'] { background: var(--surface-2); color: var(--text); }
.controls .report-toggle[aria-disabled='true'] { cursor: default; }
.report-toggle svg {
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.report-toggle.is-done svg path:last-child { fill: currentColor; }
.report-pop {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
z-index: 5;
width: 300px;
max-width: calc(100vw - 2 * var(--gutter));
padding: 14px;
border-radius: var(--radius);
background: var(--bg);
border: 1px solid var(--line-strong);
box-shadow: 0 16px 40px -12px var(--shadow-sticky);
color: var(--text);
text-align: left;
}
.report-pop form { display: grid; gap: 12px; }
.report-pop fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.report-pop legend { padding: 0 0 6px; font-size: 14px; font-weight: 800; }
.report-reason {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 0 10px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.report-reason:hover { background: var(--surface); }
.report-reason:has(input:checked) { background: var(--surface-2); }
.report-reason input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.report-note { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.report-note textarea {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 56px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text);
font: 500 14px/20px var(--font);
}
.report-error { margin: 0; font-size: 13px; color: var(--accent); font-weight: 700; }
.report-thanks { margin: 0; font-size: 14px; font-weight: 700; }
.report-thanks:empty { display: none; }
.report-actions { display: flex; justify-content: flex-end; gap: 8px; }
.controls .report-actions button {
height: 36px;
padding: 0 14px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text);
font-size: 14px;
}
.controls .report-actions .report-send { background: var(--accent-hover); color: #fff; }
.controls .report-actions .report-send:disabled { opacity: 0.45; }
.controls .report-actions .report-send[aria-disabled='true'] { opacity: 0.7; cursor: progress; }
.controls-secondary { container-type: inline-size; }
@container (max-width: 637px) {
.report-label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.controls .report-toggle { width: 40px; padding: 0; justify-content: center; }
}
@container (max-width: 579px) {
.controls .hint { display: none; }
}
@media (max-width: 560px) {
.controls-secondary { grid-template-columns: 1fr 1fr 56px; }
.controls .report-toggle { width: 100%; background: var(--surface-2); }
.report-toggle svg { width: 22px; height: 22px; }
.report-reason { min-height: 44px; }
}
.queue { display: flex; flex-direction: column; gap: 20px; }
.queue-item {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: 12px;
color: inherit;
text-decoration: none;
background: none;
border: 0;
padding: 6px 0;
margin: -6px 0;
border-radius: 8px;
text-align: left;
cursor: pointer;
font: inherit;
width: 100%;
}
.queue-item:hover { background: var(--surface); }
.queue-item[aria-current='true'] { background: var(--surface-2); }
.queue-item .thumb { border-radius: 8px; }
.queue-item .line { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.queue-item .sub { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 480px) {
.queue-item { grid-template-columns: 140px minmax(0, 1fr); }
}
.lede { font-size: 17px; line-height: 26px; color: var(--muted); max-width: 600px; }
.word-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.word-links a {
display: inline-flex; align-items: center; min-height: 44px;
padding: 0 14px; border-radius: var(--radius-pill);
border: 1px solid var(--line-strong); text-decoration: none; font-size: 14px; font-weight: 600;
}
.word-links a:hover { background: var(--surface); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0 0; }
.pager a {
display: inline-flex; align-items: center; min-height: 44px;
font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted);
}
.pager a:hover { color: var(--accent); }
.prose { max-width: 680px; }
.prose h2 { font-size: 22px; margin: 32px 0 12px; }
.prose h3 { font-size: 17px; margin: 24px 0 8px; }
.prose p, .prose li { font-size: 16px; line-height: 26px; color: var(--muted); }
.prose strong { color: var(--text); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.word-seo { border-top: 1px solid var(--line); padding: 32px 0 0; }
.word-seo h1 { margin: 8px 0 0; }
.word-sub { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--muted); }
.crumbs { margin: 0; }
.crumbs a { color: inherit; }
.letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.letters a {
display: inline-grid; place-items: center; width: 44px; height: 44px;
border-radius: var(--radius); border: 1px solid var(--line-strong);
font-weight: 800; text-decoration: none;
}
.letters a:hover { background: var(--surface); }
.letters a[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
.coll-cards { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.coll-cards a {
display: grid; gap: 6px; height: 100%; padding: 16px; box-sizing: border-box;
border-radius: var(--radius); background: var(--surface); text-decoration: none;
}
.coll-cards a:hover { background: var(--surface-2); }
.coll-cards span { font-size: 14px; color: var(--muted); }
.coll-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.coll-list li { padding: 16px; border-radius: var(--radius); background: var(--surface); }
.coll-list h2 { margin: 0; font-size: 22px; }
.coll-list h2 a { text-decoration: none; }
.coll-list h2 a:hover { color: var(--accent); }
.coll-note { margin: 6px 0 0; font-weight: 600; }
.coll-list blockquote { margin: 10px 0 0; color: var(--muted); }
.coll-list mark { background: var(--hit-wash); color: var(--text); padding: 0 2px; border-radius: 3px; }
.coll-list a { color: var(--accent); }
.coll-list h2 a { color: var(--text); }
.examples { margin: 32px 0 0; }
.examples h2 { font-size: 22px; margin: 0 0 8px; }
.example-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 16px; }
.example-list li {
padding: 16px 18px;
border-radius: var(--radius);
background: var(--surface);
}
.example-list blockquote {
margin: 0;
font-size: 17px;
line-height: 27px;
color: var(--text);
overflow-wrap: anywhere;
}
.example-list mark {
background: var(--hit-wash);
color: var(--text);
font-weight: 800;
padding: 0 3px;
border-radius: 4px;
box-shadow: inset 0 -0.13em 0 0 var(--accent);
}
.example-list cite { font-style: normal; font-weight: 600; color: var(--text); }
.example-list p { margin: 10px 0 0; }
.example-list a { color: var(--accent); }
.ad {
display: block;
margin: 20px 0 0;
border-radius: var(--radius);
background: var(--surface);
contain: layout;
}
.ad-rect { min-height: 250px; }
.ad-strip { min-height: 90px; }
@media (max-width: 720px) { .ad-strip { min-height: 100px; } }
.ad-stub {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 250px;
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
text-align: center;
text-decoration: none;
transition: border-color 0.15s;
}
.ad-strip .ad-stub { height: 90px; gap: 6px; padding: 12px 16px; }
@media (max-width: 720px) { .ad-strip .ad-stub { height: 100px; } }
.ad-stub:hover { border-color: var(--line-strong); }
.ad-stub-mark {
flex: none;
width: 26px;
height: 9px;
border-radius: var(--radius-pill);
background: var(--accent);
}
.ad-strip .ad-stub-mark { display: none; }
.ad-stub-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ad-strip .ad-stub-title { font-size: 16px; }
.ad-stub-sub { max-width: 40ch; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ad-stub-cta {
display: inline-flex;
align-items: center;
height: 34px;
margin-top: 2px;
padding: 0 16px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 700;
}
.ad-strip .ad-stub-cta { display: none; }
.ad-stub:hover .ad-stub-cta { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .ad-stub { transition: none; } }
.state {
padding: 48px 0;
text-align: center;
color: var(--muted);
}
.state h2 { color: var(--text); font-size: 20px; margin: 0 0 8px; }
.noscript {
margin: 20px 0;
padding: 14px 18px;
border-radius: var(--radius);
background: var(--surface);
color: var(--muted);
font-size: 14px;
}
.js .noscript { display: none; }
.skeleton {
background: var(--surface-2);
border-radius: 6px;
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.ext-promo, .ext-alt-only { display: none; }
.ext-cr:not(.ext-off) .ext-promo { display: block; }
.js:not(.ext-cr) .ext-cr-only { display: none; }
.js:not(.ext-cr) .ext-alt-only { display: block; }
.ext-note { display: none; }
.ext-promo.is-dismissed .ext-body { display: none; }
.ext-promo.is-dismissed .ext-note {
display: block;
margin: 16px 0 0;
padding: 12px 14px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
font-size: 14px;
color: var(--muted);
}
.ext-note a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.ext-undo {
margin-left: 6px;
padding: 4px 10px;
border: 0;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text);
font: 700 14px var(--font);
cursor: pointer;
}
.ext-undo:hover { background: var(--surface-2); }
.ext-mark .mark-face { fill: var(--text); }
.ext-mark .mark-tongue { fill: var(--accent); }
.ext-x {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: none;
color: var(--muted);
font: 400 22px/1 var(--font);
cursor: pointer;
}
.ext-x:hover { background: var(--surface); color: var(--text); }
.ext-cta {
display: inline-flex;
align-items: center;
height: 48px;
padding: 0 22px;
border-radius: var(--radius-pill);
background: var(--accent-hover);
color: #fff;
font-size: 16px;
font-weight: 800;
white-space: nowrap;
text-decoration: none;
}
.ext-cta:hover { filter: brightness(1.08); }
.ext-cta-sm { height: 40px; padding: 0 18px; font-size: 14px; }
kbd {
display: inline-block;
padding: 0 7px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font: 700 13px/22px var(--font);
}
.ext-keys { white-space: nowrap; }
.ext-sel { background: #b9d3ff; color: #17171a; border-radius: 2px; padding: 0 1px; }
.ext-card { max-width: 880px; margin: 28px 0 0; }
.ext-card .ext-body {
position: relative;
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 28px;
align-items: center;
padding: 20px 52px 20px 20px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.ext-card .ext-x { position: absolute; top: 10px; right: 10px; }
.ext-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ext-card-h { margin: 6px 0 0; font-size: 22px; line-height: 1.2; }
.ext-card-t { margin: 8px 0 0; font-size: 16px; line-height: 25px; color: var(--muted); }
.ext-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.ext-viz { position: relative; height: 190px; border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ext-viz-para { position: absolute; left: 16px; right: 16px; top: 16px; margin: 0; font: 400 13px/21px Georgia, serif; color: var(--muted); }
.ext-mini {
color-scheme: dark;
position: absolute;
left: 52px;
top: 80px;
width: 188px;
border-radius: 10px;
background: #0f0f10;
color: #f1f1f1;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.ext-mini-fr {
display: grid;
place-items: center;
height: 56px;
background: repeating-linear-gradient(135deg, #1c1c1f 0 10px, #232327 10px 20px);
}
.ext-mini-fr i {
width: 28px;
height: 20px;
border-radius: 6px;
background: #d91b32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='%23fff'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.ext-mini-ln { margin: 0; padding: 7px 10px 9px; font-size: 11.5px; line-height: 1.35; font-weight: 600; }
.ext-mini-ln span { box-shadow: inset 0 -0.14em 0 0 #ef233c; }
.ext-acc { display: flex; gap: 3px; padding: 6px 8px; border-bottom: 1px solid #2c2c30; }
.ext-acc i {
height: 16px;
padding: 0 6px;
border: 1px solid #2c2c30;
border-radius: 999px;
font: normal 700 9px/14px var(--font);
color: #a8a8ad;
}
.ext-acc i.on { border-color: #f1f1f1; background: #f1f1f1; color: #0f0f10; }
.ext-mini .ext-acc { padding: 5px 8px; }
.ext-acc + .ext-mini-fr { height: 40px; }
@media (max-width: 720px) {
.ext-card .ext-body { grid-template-columns: minmax(0, 1fr); }
.ext-viz { display: none; }
}
.ext-strip { margin-top: 16px; }
.ext-strip .ext-body {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 6px 6px 6px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.ext-strip .ext-mark { flex: none; }
.ext-strip-tx { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ext-strip-tx b { color: var(--text); font-weight: 800; }
.ext-strip-go { font-size: 14px; font-weight: 800; color: var(--accent); white-space: nowrap; text-decoration: none; }
.ext-strip-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.ext-strip .ext-note { margin-top: 0; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.results-head .results-count.standalone { margin: 0; }
.save-word { position: relative; display: inline-flex; flex: none; }
.save-word:not(.in-bar) > button {
display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
border-radius: var(--radius-pill); border: 1.5px solid var(--accent); background: transparent;
color: var(--accent); font: 700 14px var(--font); cursor: pointer; white-space: nowrap;
}
.save-word:not(.in-bar) > button:hover { background: var(--hit-wash); }
.save-word:not(.in-bar) > button.is-on { background: var(--hit-wash); }
.save-word.in-bar > button.is-on { color: var(--accent); }
.save-word.in-bar > button svg { stroke-width: 2; }
.save-word.in-bar .save-menu { left: 0; right: auto; }
.save-word.in-bar .save-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-menu {
color: var(--text);
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 30;
width: 260px;
padding: 6px;
border-radius: var(--radius);
background: var(--bg);
border: 1px solid var(--line);
box-shadow: 0 12px 32px var(--shadow-sticky);
display: flex;
flex-direction: column;
gap: 2px;
}
.save-menu-h { padding: 8px 10px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-menu label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.save-menu label:hover { background: var(--surface); }
.save-menu label.is-on { font-weight: 700; }
.save-menu input[type='checkbox'] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.save-menu form { display: flex; gap: 6px; padding: 6px 4px 2px; }
.save-menu form input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 600 14px var(--font); }
.save-menu form button { height: 36px; padding: 0 12px; }
.save-menu-note { margin: 4px 10px; font-size: 13px; color: var(--muted); }
.save-menu-note a, .save-menu-lib { color: var(--accent); font-weight: 700; }
.save-menu-lib { padding: 8px 10px 4px; font-size: 13px; text-decoration: none; }
@media (max-width: 560px) {
.save-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 12px 12px 20px;
border-radius: 16px 16px 0 0; border-width: 1px 0 0; margin: 0; max-width: none; }
.save-menu label { min-height: 44px; }
}
:root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ytg-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ytg-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ytg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ytg-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ytg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.save-menu { transform-origin: top left; animation: ytg-pop 0.18s var(--ease-out); }
.save-label { display: inline-block; animation: ytg-swap 0.2s var(--ease-out); }
.save-word > button { transition: background-color 0.15s, color 0.15s, transform 0.1s; }
.save-word > button:active { transform: scale(0.96); }
@media (max-width: 560px) {
.save-menu { animation: ytg-sheet 0.26s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
.save-menu, .save-label { animation: none; }
.save-word > button { transition: none; }
}
.save-word > button.is-on svg { fill: currentColor; }
.inapp { display: none; }
.in-app .inapp { display: block; position: relative; background: var(--surface); border-bottom: 1px solid var(--line); }
.inapp-in { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.inapp-t { margin: 0; flex: 1 1 280px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.inapp-t b { color: var(--text); }
.inapp-btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
border-radius: var(--radius-pill); background: var(--accent-hover); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
}
[data-os='ios'] .inapp-android, [data-os='android'] .inapp-ios { display: none; }
.inapp.is-pulse { animation: inapp-pulse 0.9s ease-out 2; }
@keyframes inapp-pulse { 0% { box-shadow: inset 0 0 0 0 var(--accent); } 50% { box-shadow: inset 0 0 0 3px var(--accent); } 100% { box-shadow: inset 0 0 0 0 var(--accent); } }
.inapp-guide { display: flex; align-items: center; gap: 16px; flex-basis: 100%; }
.inapp-phone { position: relative; flex: none; width: 150px; height: 112px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); overflow: hidden; }
.inapp-bar { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 8px; border-bottom: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.inapp-url { font-weight: 700; color: var(--text); }
.inapp-dots { position: relative; font-weight: 800; color: var(--text); letter-spacing: 1px; }
.inapp-page { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.inapp-page i { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); }
.inapp-page i:nth-child(2) { width: 70%; } .inapp-page i:nth-child(3) { width: 85%; }
.inapp-sheet {
position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 4px 0;
background: var(--surface-2); border-top: 1px solid var(--line-strong); font-size: 10px; transform: translateY(100%);
animation: inapp-sheet 4.8s ease-in-out infinite;
}
.inapp-sheet span { position: relative; padding: 4px 10px; color: var(--muted); }
.inapp-sheet span.is-hit { color: var(--text); font-weight: 800; animation: inapp-hit 4.8s ease-in-out infinite; }
.inapp-tap { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; }
.inapp-dots .inapp-tap { left: 50%; top: 50%; animation: inapp-tap1 4.8s ease-out infinite; }
.inapp-sheet .inapp-tap { left: 70%; top: 50%; animation: inapp-tap2 4.8s ease-out infinite; }
@keyframes inapp-tap1 { 0%, 8% { opacity: 0; transform: scale(0.4); } 15% { opacity: 0.6; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes inapp-sheet { 0%, 28% { transform: translateY(100%); } 40%, 88% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@keyframes inapp-tap2 { 0%, 55% { opacity: 0; transform: scale(0.4); } 62% { opacity: 0.6; transform: scale(1); } 76%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes inapp-hit { 0%, 58% { background: transparent; } 64%, 84% { background: var(--hit-wash); } 100% { background: transparent; } }
.inapp-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.inapp-steps span { color: var(--muted); font-size: 13px; }
.inapp-arrow { position: absolute; top: 4px; right: 12px; font-size: 26px; font-weight: 800; color: var(--accent); animation: inapp-nudge 1.2s ease-in-out infinite; }
@keyframes inapp-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -4px); } }
@media (prefers-reduced-motion: reduce) {
.inapp.is-pulse { animation: none; outline: 3px solid var(--accent); }
.inapp-sheet { animation: none; transform: none; }
.inapp-sheet span.is-hit { animation: none; background: var(--hit-wash); }
.inapp-tap, .inapp-arrow { animation: none; }
}
.cm {
--cm-ink: #ff6b7d; --cm-ink: light-dark(#bd0323, #ff6b7d);
display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface);
}
.cm p { margin: 0; }
.cm-k { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cm-ink); }
.cm-k.is-muted { color: var(--muted); }
.cm-k svg { flex: none; }
.cm-left { margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.cm-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cm-w { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cm-pos { font-style: italic; color: var(--muted); font-size: 13px; }
.cm-lvl { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.cm-d { font-size: 15px; font-weight: 600; line-height: 1.45; }
.cm-q { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.45; overflow-wrap: break-word; }
.cm mark { margin: 0 -2px; padding: 0 2px; border-bottom: 2px solid var(--accent); background: var(--hit-wash); color: var(--text); font-weight: 700; }
.cm-f { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.cm-link { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--cm-ink); cursor: pointer; }
.cm-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cm-fb { display: flex; flex-direction: column; gap: 8px; }
.cm-fb-h { font-size: 13px; font-weight: 700; }
.cm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-opt, .cm-ghost {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 700 13px var(--font); cursor: pointer;
}
.cm-opt:hover, .cm-ghost:hover { border-color: var(--text); }
.cm-opt[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: var(--bg); }
.cm-opt[aria-disabled='true'] { cursor: default; }
.cm-opt[aria-disabled='true']:not([aria-pressed='true']) { opacity: 0.55; }
.cm-ghost { align-self: flex-start; }
.cm-note { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cm-ask {
align-self: flex-start; min-height: 36px; padding: 6px 0; border: 0; background: none; color: var(--cm-ink); text-align: left;
font: 800 13px/1.4 var(--font); cursor: pointer;
}
.cm-ask:hover { text-decoration: underline; text-underline-offset: 2px; }
.cm-blur { filter: blur(5px); user-select: none; pointer-events: none; }
.cm-gate-h { font-size: 15px; font-weight: 800; }
.cm-gate-s { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cm-signin {
align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
border-radius: var(--radius-pill); border: 1px solid var(--text); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none;
}
.cm-signin:hover { background: var(--text); color: var(--bg); }
.cm-cta {
align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
border-radius: var(--radius-pill); background: var(--accent-hover); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
}
.cm-mini {
flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
border-radius: var(--radius-pill); background: var(--accent-hover); color: #fff; font-weight: 700; font-size: 12px; text-decoration: none;
}
.cm-cta:hover, .cm-mini:hover { background: var(--accent); color: #fff; }
.cm-gate-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; font-weight: 700; }
.cm-sk { display: block; height: 13px; border-radius: 6px; background: var(--surface-2); animation: cm-pulse 1.4s ease-in-out infinite; }
.cm-sk.is-short { width: 70%; }
@keyframes cm-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .cm-sk { animation: none; } }
.cm.is-compact { gap: 7px; border-radius: 14px; background: var(--bg); }
.cm.is-compact .cm-w { font-size: 15px; }
.cm.is-compact .cm-d { font-size: 14px; }
.cm-brief-w, .cm-brief .cm-pos, .cm-brief .cm-lvl { margin-right: 6px; }
.cm-brief .cm-lvl { vertical-align: 1px; }
.sh {
--sh-good: light-dark(#0b5c40, #6fd3a8); --sh-good-bg: light-dark(#e3f4ec, #12392b);
--sh-mid: light-dark(#6b4600, #f0c36b); --sh-mid-bg: light-dark(#fdf1d8, #3b2e10);
--sh-bad: light-dark(#8c1d18, #ff9b93); --sh-bad-bg: light-dark(#fde7e4, #4a1916);
--sh-ring-good: light-dark(#0b6e4f, #6fd3a8); --sh-ring-mid: light-dark(#8a5a00, #f0c36b); --sh-ring-bad: light-dark(#b3261e, #ff9b93);
margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 14px;
}
.sh p { margin: 0; }
.sh-center { align-items: center; text-align: center; }
.sh-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-title { margin: 0; font-size: 17px; font-weight: 800; }
.sh-new { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); }
.sh-ref, .sh-step { margin-left: auto; font-size: 13px; color: var(--muted); }
.sh-ref b, .sh-step { color: var(--text); font-weight: 700; }
.sh-row { display: flex; align-items: center; gap: 18px; }
.sh-lede { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-h { font-size: 16px; font-weight: 700; }
.sh-h2 { font-size: 20px; font-weight: 800; }
.sh-s { font-size: 14px; color: var(--muted); line-height: 1.5; }
.sh-s b { color: var(--text); }
.sh-fine { font-size: 12px; color: var(--muted); }
.sh-fine b { color: var(--text); }
.sh-note { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); font-size: 14px; line-height: 1.5; }
.sh-label { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sh-mic {
flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-pill); border: 0;
background: var(--accent-hover); color: #fff; cursor: pointer; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
.sh-mic:hover { background: var(--accent); }
.sh-mic:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.sh-mic.is-off { background: var(--surface); color: var(--muted); box-shadow: none; cursor: default; }
.sh-mic.is-warn { width: 44px; height: 44px; background: var(--sh-bad-bg); color: var(--sh-bad); box-shadow: none; cursor: default; }
.sh-mic.is-rec { animation: sh-pulse 1.2s ease-in-out infinite; }
@keyframes sh-pulse { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sh-mic.is-rec, .sh-pulse, .sh-spin { animation: none; } }
.sh-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px; }
.sh-steps li, .sh-perks li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: var(--surface); text-align: left; }
.sh-steps span, .sh-perks span { color: var(--muted); }
.sh-perks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; font-size: 13px; }
.sh-dots { display: flex; gap: 6px; }
.sh-dots span { width: 34px; height: 8px; border-radius: 8px; background: var(--text); }
.sh-listen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.sh-pulse { flex: none; width: 12px; height: 12px; border-radius: 999px; background: var(--text); animation: sh-blink 1s ease-in-out infinite; }
@keyframes sh-blink { 50% { opacity: 0.25; } }
.sh-spin { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 3px solid var(--surface-2); border-top-color: var(--text); animation: sh-turn 0.8s linear infinite; }
@keyframes sh-turn { to { transform: rotate(360deg); } }
.sh-rec { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: var(--radius); border: 2px solid var(--accent-hover); }
.sh-rec-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-meter { display: flex; align-items: center; gap: 3px; height: 36px; overflow: hidden; }
.sh-meter span { flex: none; width: 4px; border-radius: 2px; background: var(--surface-3); }
.sh-meter span.is-on { background: var(--accent-hover); }
.sh-time { flex: none; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sh-time small { font-size: 14px; font-weight: 600; color: var(--muted); }
.sh-ring {
--c: var(--sh-ring-mid);
flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 999px;
background: conic-gradient(var(--c) 0 var(--p), var(--surface-2) var(--p) 100%);
}
.sh-ring.is-good { --c: var(--sh-ring-good); }
.sh-ring.is-bad { --c: var(--sh-ring-bad); }
.sh-ring span { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 999px; background: var(--bg); font-size: 28px; font-weight: 800; }
.sh-sounds { display: flex; flex-direction: column; gap: 10px; }
.sh-word { display: flex; flex-direction: column; gap: 6px; }
.sh-w { font-size: 13px; font-weight: 700; }
.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: var(--radius); }
.sh-chip b { font-size: 21px; font-weight: 800; line-height: 1.2; }
.sh-chip small { font-size: 12px; font-weight: 600; }
.sh-chip.is-good { background: var(--sh-good-bg); color: var(--sh-good); }
.sh-chip.is-mid { background: var(--sh-mid-bg); color: var(--sh-mid); }
.sh-chip.is-bad { background: var(--sh-bad-bg); color: var(--sh-bad); box-shadow: inset 0 0 0 2px var(--sh-bad); }
.sh-chip.is-bad small { font-weight: 700; }
.sh-chip.is-stress { align-items: flex-start; background: var(--surface); color: var(--text); }
.sh-chip.is-stress b { font-size: 14px; }
.sh-chip.is-stress small { color: var(--muted); font-weight: 700; }
.sh-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sh-tips li { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); font-size: 14px; line-height: 1.5; }
.sh-tips b { flex: none; }
.sh-locked { position: relative; border-radius: 14px; overflow: hidden; }
.sh-blur { display: flex; gap: 8px; padding: 12px; filter: blur(5px); opacity: 0.7; }
.sh-blur span { width: 64px; height: 62px; border-radius: var(--radius); background: var(--sh-good-bg); }
.sh-blur .is-bad { background: var(--sh-bad-bg); }
.sh-blur .is-mid { background: var(--sh-mid-bg); }
.sh-blur .is-wide { width: 140px; background: var(--surface); }
.sh-gate {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px;
background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.sh-gate > div { display: flex; flex-direction: column; gap: 2px; }
.sh-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-btn {
min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
background: var(--bg); color: var(--text); font: 700 14px var(--font); cursor: pointer;
}
.sh-btn:hover { background: var(--surface); }
.sh-btn:disabled { opacity: 0.5; cursor: default; }
.sh-btn.is-dark { border-color: var(--text); background: var(--text); color: var(--bg); }
.sh-btn.is-go { margin-left: auto; border-color: var(--accent-hover); background: var(--accent-hover); color: #fff; }
.sh-btn.is-go:hover { background: var(--accent); }
.sh-cta, .sh-google {
flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; text-decoration: none;
}
.sh-cta { background: var(--accent-hover); color: #fff; }
.sh-cta:hover { background: var(--accent); color: #fff; }
.sh-google { background: var(--text); color: var(--bg); }
.sh-google:hover { color: var(--bg); opacity: 0.9; }
@media (max-width: 560px) {
.sh { padding: 14px; }
.sh-row { gap: 14px; }
.sh-mic { width: 60px; height: 60px; }
.sh-steps { display: none; }
.sh-perks { grid-template-columns: 1fr; }
.sh-ring { width: 64px; height: 64px; }
.sh-ring span { width: 50px; height: 50px; font-size: 20px; }
.sh-h2 { font-size: 17px; }
.sh-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sh-chip { min-width: 0; padding: 8px 4px; }
.sh-chip.is-stress { grid-column: 1 / -1; }
.sh-rec { gap: 12px; }
.sh-time { font-size: 18px; }
.sh-gate { flex-direction: column; justify-content: center; text-align: center; }
.sh-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-btn.is-go { margin-left: 0; }
}
.beta {
--beta: light-dark(#a35300, #ffb703);
display: inline-flex; align-items: center; flex: none;
padding: 2px 6px; border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, var(--beta) 45%, transparent);
background: color-mix(in srgb, var(--beta) 12%, transparent);
color: var(--beta);
font-size: 9px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.4;
vertical-align: middle;
}
.beta.is-big { padding: 4px 10px; font-size: 11px; letter-spacing: 0.14em; }
.site-nav a .beta { margin-left: 6px; }
@media (max-width: 400px) { .site-nav a .beta { display: none; } }
html:not(.is-android) .android-only { display: none !important; }
.is-android .not-android { display: none !important; }
.app-icon {
flex: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #d90429;
}
.app-icon svg { display: block; }
.appbar { color-scheme: dark; background: var(--surface); color: var(--text); }
.appbar-off .appbar { display: none; }
.appbar-in { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.appbar-x {
flex: none;
width: 28px;
height: 44px;
margin: -8px 0 -8px -6px;
padding: 0;
border: 0;
background: none;
color: var(--muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.appbar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.appbar-t b { font-size: 14px; font-weight: 800; }
.appbar-t span { font-size: 12px; color: var(--muted); }
.appbar-go {
flex: none;
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 16px;
border-radius: var(--radius-pill);
background: var(--accent-hover);
color: #fff;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.nav-app {
--app-ink: #ff6b7d;
--app-ink: light-dark(#bd0323, #ff6b7d);
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border-radius: var(--radius-pill);
color: var(--app-ink);
font-size: 15px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.nav-app:hover { background: var(--surface); }
.nav-app span { font-size: 12px; font-weight: 600; color: var(--muted); }
.is-android:not(.appbar-off) .has-appbar .nav-app { display: none; }
@media (max-width: 560px) { .nav-app { padding: 0 10px; margin-top: -10px; } }
.app-card {
color-scheme: dark;
display: flex;
align-items: center;
gap: 14px;
margin-top: 16px;
padding: 16px;
border-radius: 18px;
background: #0f0f10;
color: var(--text);
overflow: hidden;
}
.app-card-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.app-card-tx > * { margin: 0; }
.app-card-k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ef233c; }
.app-card h2 { font-size: 18px; line-height: 1.2; font-weight: 800; }
.app-card-s { font-size: 13px; color: var(--muted); }
.app-play {
align-self: flex-start;
display: inline-flex;
align-items: center;
height: 40px;
margin-top: 4px;
padding: 0 16px;
border-radius: var(--radius-pill);
background: var(--accent-hover);
color: #fff;
font-size: 14px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.app-play:hover { filter: brightness(1.08); }
.app-card-phone {
flex: none;
width: 96px;
height: 170px;
padding: 4px;
border-radius: 16px;
background: #2a2a2e;
}
.app-card-phone img { display: block; width: 88px; height: 162px; border-radius: 12px; object-fit: cover; object-position: top; }
@media (max-width: 720px) {
.app-card-phone { width: 86px; height: 152px; }
.app-card-phone img { width: 78px; height: 144px; }
}
:root {
--bubble: #ffffff;
--bubble: light-dark(#17171a, #ffffff);
--bubble-ink: #17171a;
--bubble-ink: light-dark(#f1f1f1, #17171a);
--bubble-name: #d90429;
--bubble-name: light-dark(#ff6b7d, #d90429);
--b-amber: #ffb703; --b-amber: light-dark(#8a4600, #ffb703);
--b-amber-bg: #3b2e10; --b-amber-bg: light-dark(#fdf1d8, #3b2e10);
--b-teal: #6fd3a8; --b-teal: light-dark(#0b6e4f, #6fd3a8);
--b-teal-bg: #12392b; --b-teal-bg: light-dark(#e3f4ec, #12392b);
--b-coral: #ff6b7d; --b-coral: light-dark(#bd0323, #ff6b7d);
--b-coral-bg: #3a171c; --b-coral-bg: light-dark(#fde7e9, #3a171c);
--b-blue: #7cb6ff; --b-blue: light-dark(#1f5fae, #7cb6ff);
--b-blue-bg: #142538; --b-blue-bg: light-dark(#e3eefb, #142538);
--b-violet: #b9a3ff; --b-violet: light-dark(#5b3fb0, #b9a3ff);
--b-violet-bg: #251d3a; --b-violet-bg: light-dark(#eee9fb, #251d3a);
}
.fenn { display: block; max-width: 100%; height: auto; flex: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.bubble {
position: relative; box-sizing: border-box; max-width: 440px; padding: 16px 20px; border-radius: 20px;
background: var(--bubble); color: var(--bubble-ink); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.bubble.is-compact { padding: 12px 15px; border-radius: 16px; max-width: 320px; }
.bubble-name { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bubble-name); margin-bottom: 4px; }
.bubble-text { font-size: 17px; font-weight: 600; line-height: 1.45; }
.bubble.is-compact .bubble-text { font-size: 15px; }
.bubble-text p { margin: 0; }
.bubble-text p + p { margin-top: 6px; }
.bubble::before { content: ''; position: absolute; width: 16px; height: 16px; background: var(--bubble); transform: rotate(45deg); }
.bubble-left::before { left: -7px; top: 26px; }
.bubble-right::before { right: -7px; top: 26px; }
.bubble-up::before { top: -7px; left: 48px; }
.bubble-down::before { bottom: -7px; left: 48px; }
.bubble-none::before { display: none; }
.says { display: flex; align-items: center; gap: 20px; }
.says-right { flex-direction: row-reverse; justify-content: flex-end; }
.says-top { flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 560px) {
.says:not(.says-top) { flex-direction: column; align-items: flex-start; gap: 12px; }
.says:not(.says-top) .bubble::before { top: -7px; left: 40px; right: auto; }
}
.fn-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
border-radius: var(--radius-pill); border: 0; background: var(--surface-2); color: var(--text);
font: 700 15px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.fn-btn:hover { background: var(--surface-3); }
.fn-btn.is-primary { background: var(--accent-hover); color: #fff; font-weight: 800; }
.fn-btn.is-primary:hover { filter: brightness(1.08); background: var(--accent-hover); }
.fn-btn.is-ghost { background: transparent; color: var(--muted); }
.fn-btn.is-ghost:hover { color: var(--text); background: var(--surface); }
.fn-btn.is-small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.fn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach { position: relative; display: flex; align-items: flex-end; gap: 12px; }
.coach-inline { margin: 14px 0 0; }
.coach-fixed { position: fixed; left: calc(var(--side-w, 0px) + 24px); bottom: 24px; z-index: 40; max-width: min(520px, calc(100vw - 48px)); }
.coach-fenn { margin-bottom: -2px; }
.coach-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.coach-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-x {
position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%; border: 0;
background: var(--surface-3); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 760px) {
.coach-fixed { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }
}
.medal {
--mc: var(--b-amber); --mb: var(--b-amber-bg);
position: relative; flex: none; box-sizing: border-box; width: var(--m, 72px); height: var(--m, 72px); border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: calc(var(--m, 72px) * 0.045) solid var(--mc); background: var(--mb); color: var(--mc);
}
.medal-amber { --mc: var(--b-amber); --mb: var(--b-amber-bg); }
.medal-teal { --mc: var(--b-teal); --mb: var(--b-teal-bg); }
.medal-coral { --mc: var(--b-coral); --mb: var(--b-coral-bg); }
.medal-blue { --mc: var(--b-blue); --mb: var(--b-blue-bg); }
.medal-violet { --mc: var(--b-violet); --mb: var(--b-violet-bg); }
.medal.is-locked { border-color: var(--line-strong); background: var(--surface); color: var(--muted); }
.medal.is-locked svg { opacity: 0.55; }
.medal.is-locked.is-next { border-color: var(--mc); }
.medal-lock {
position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
background: var(--surface-2); color: var(--muted); border: 2px solid var(--bg);
display: inline-flex; align-items: center; justify-content: center;
}
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.confetti i { position: absolute; width: 8px; height: 8px; border-radius: 2px; }
.confetti .c0 { left: 8%; top: 8%; background: var(--b-amber); transform: rotate(20deg); }
.confetti .c1 { left: 20%; top: 20%; background: var(--b-teal); border-radius: 50%; width: 7px; height: 7px; }
.confetti .c2 { left: 12%; top: 38%; background: var(--b-coral); transform: rotate(-30deg); }
.confetti .c3 { left: 6%; top: 58%; background: var(--b-blue); border-radius: 50%; width: 6px; height: 6px; }
.confetti .c4 { left: 22%; top: 70%; background: var(--b-violet); transform: rotate(45deg); width: 10px; height: 10px; }
.confetti .c5 { left: 32%; top: 4%; background: var(--b-violet); transform: rotate(12deg); }
.confetti .c6 { right: 9%; top: 6%; background: var(--b-coral); border-radius: 50%; }
.confetti .c7 { right: 20%; top: 16%; background: var(--b-blue); transform: rotate(-15deg); width: 9px; height: 9px; }
.confetti .c8 { right: 7%; top: 30%; background: var(--b-teal); transform: rotate(35deg); width: 10px; height: 10px; }
.confetti .c9 { right: 18%; top: 48%; background: var(--b-violet); border-radius: 50%; width: 6px; height: 6px; }
.confetti .c10 { right: 8%; top: 62%; background: var(--b-amber); transform: rotate(60deg); }
.confetti .c11 { right: 30%; top: 3%; background: var(--b-teal); border-radius: 50%; width: 6px; height: 6px; }
@media (prefers-reduced-motion: no-preference) {
.badge-up[open] .confetti i { animation: fn-fall 1.4s ease-out both; }
.badge-up[open] .medal { animation: fn-pop 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
}
@keyframes fn-fall { from { translate: 0 -24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes fn-pop { from { scale: 0.6; } to { scale: 1; } }
.badge-up { border: 0; padding: 0; border-radius: 28px; background: var(--surface); color: var(--text); width: min(440px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.badge-up::backdrop { background: rgba(10, 10, 12, 0.6); backdrop-filter: blur(4px); }
.badge-up-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 28px 24px; text-align: center; border: 2px solid var(--mc, var(--b-teal)); border-radius: 28px; }
.badge-up-in > .fenn { position: relative; margin-bottom: -18px; }
.badge-up-in > .medal { position: relative; }
.badge-up-k { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mc, var(--b-teal)); }
.badge-up-t { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.badge-up-line { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 300px; }
.badge-up-acts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin-top: 8px; }
.tour-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.tour-strip-path {
display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 5px; border-radius: var(--radius-pill);
background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 700;
}
.tour-strip-path:hover { background: var(--surface-2); }
.tour-strip-l { font-size: 14px; font-weight: 700; color: var(--muted); }
.tour-strip .fn-btn { margin-left: auto; }
.top-path, .tour-invite-card { display: none; }
.side-fenn { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--surface-3); flex: none; }
.top-path { align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 4px; border-radius: var(--radius-pill); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { html.path-on .top-path { display: inline-flex; margin-left: auto; } html.path-on .top-me { margin-left: 8px; } }
html.tour-invite:not(.tour-invite-off) .tour-invite-card { display: flex; }
.tour-invite-card { position: fixed; right: 24px; bottom: 24px; z-index: 45; align-items: flex-end; gap: 10px; max-width: min(460px, calc(100vw - 48px)); }
.tour-invite-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tour-invite-acts .fn-btn { min-height: 42px; }
.tour-invite-acts .fn-btn.is-ghost { color: var(--bubble-ink); opacity: 0.75; }
.tour-invite-acts .fn-btn.is-ghost:hover { opacity: 1; background: transparent; text-decoration: underline; }
@media (max-width: 760px) {
.tour-invite-card { right: 12px; left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }
.tour-invite-card .fenn { width: 72px; }
}
@keyframes fn-fade { from { opacity: 0; } }
@keyframes fn-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes fn-hop {
0% { opacity: 0; translate: 0 18px; scale: 0.94; }
60% { opacity: 1; translate: 0 -4px; scale: 1.01; }
100% { translate: 0 0; scale: 1; }
}
@keyframes fn-bubble { 0% { opacity: 0; scale: 0.88; } 70% { opacity: 1; scale: 1.015; } 100% { scale: 1; } }
@keyframes fn-dialog { from { opacity: 0; scale: 0.92; translate: 0 12px; } }
@keyframes fn-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.bubble-left { transform-origin: 0 34px; }
.bubble-right { transform-origin: 100% 34px; }
.bubble-up { transform-origin: 56px 0; }
.bubble-down { transform-origin: 56px 100%; }
@media (prefers-reduced-motion: no-preference) {
.bubble { animation: fn-bubble 0.42s cubic-bezier(.2, 1, .3, 1) 0.08s both; }
.says > .fenn, .coach-fenn, .tour-invite-card > .fenn { animation: fn-hop 0.55s cubic-bezier(.2, 1, .3, 1) both; }
.tour-invite-card { animation: fn-rise 0.45s cubic-bezier(.2, 1, .3, 1) both; }
.coach { animation: fn-rise 0.4s cubic-bezier(.2, 1, .3, 1) both; }
.badge-up[open] { animation: fn-dialog 0.38s cubic-bezier(.2, 1.15, .35, 1) both; }
.badge-up[open]::backdrop { animation: fn-fade 0.3s ease both; }
.tour-strip { animation: fn-fade 0.3s ease both; }
.fn-btn { transition: background-color 0.15s, filter 0.15s, scale 0.1s; }
.fn-btn:active { scale: 0.97; }
}
:root {
--ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 320ms;
--dur-4: 560ms;
}
@supports (transition-timing-function: linear(0, 1)) {
:root { --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.016 63.9%, 1.001 82%, 1); }
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}
@keyframes m-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes m-reveal { from { opacity: 0; translate: 0 32px; scale: 0.985; } to { opacity: 1; translate: none; scale: none; } }
a, button, summary, [role='button'], input, select, textarea {
transition-property: color, background-color, border-color, box-shadow, outline-color, text-decoration-color, fill, stroke;
transition-duration: var(--dur-2);
transition-timing-function: var(--ease-out);
}
:is(.gn-btn, .gn-ic, .gn-chip, .gn-search button, .search-form button, .pill, .theme-switch button, .hv-btn, .hv-chip, .hv-tab, .hv-card-go) {
transition-property: color, background-color, border-color, box-shadow, transform;
transition-duration: var(--dur-2), var(--dur-2), var(--dur-2), var(--dur-2), var(--dur-3);
transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-spring);
}
@media (prefers-reduced-motion: no-preference) {
:is(.gn-btn, .gn-ic, .gn-chip, .gn-search button, .search-form button, .pill, .theme-switch button, .hv-btn, .hv-chip, .hv-tab):active { transform: scale(0.96); transition-duration: var(--dur-1); }
}
@media (prefers-reduced-motion: no-preference) {
html:has(.hv) { scroll-behavior: smooth; }
}
.gn { border-bottom-color: var(--line); }
@supports (animation-timeline: scroll()) {
.gn { border-bottom-color: transparent; animation: m-gn-scrolled linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
@keyframes m-gn-scrolled { to { border-bottom-color: var(--line); } }
}
@media (max-width: 760px) { html .gn { animation: none; border-bottom-color: var(--line); } }
.gn-menu, .gn-find {
transition-property: opacity, transform, overlay, display;
transition-duration: var(--dur-3), var(--dur-3), var(--dur-3), var(--dur-3);
transition-timing-function: var(--ease-out), var(--ease-emph), linear, linear;
transition-behavior: allow-discrete;
opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: 50% 0;
}
.gn-menu:popover-open, .gn-find:popover-open { opacity: 1; transform: none; }
@starting-style {
.gn-menu:popover-open, .gn-find:popover-open { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
.gn-menu::backdrop {
background: light-dark(rgb(16 16 24 / 0.16), rgb(0 0 0 / 0.45));
transition: background-color var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
}
.gn-menu:not(:popover-open)::backdrop { background: rgb(16 16 24 / 0); }
@starting-style { .gn-menu:popover-open::backdrop { background: rgb(16 16 24 / 0); } }
@media (max-width: 760px) {
.gn-menu, .gn-find { transform: translateY(16px); }
@starting-style { .gn-menu:popover-open, .gn-find:popover-open { transform: translateY(16px); } }
}
@media (prefers-reduced-motion: no-preference) {
:is(.gn-menu, .gn-find):popover-open :is(.gn-rows > li, .gn-label, .gn-m-search, .gn-m-new, .gn-m-links, .gn-chips) { animation: m-rise var(--dur-4) var(--ease-emph) both; }
:is(.gn-menu, .gn-find):popover-open .gn-rows > li:nth-child(2) { animation-delay: 20ms; }
:is(.gn-menu, .gn-find):popover-open .gn-rows > li:nth-child(3) { animation-delay: 40ms; }
:is(.gn-menu, .gn-find):popover-open .gn-rows > li:nth-child(4) { animation-delay: 60ms; }
.gn-menu:popover-open :is(.gn-m-new, .gn-m-links) { animation-delay: 80ms; }
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.rv { animation: m-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
.rv-row > * { animation: m-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
.rv-row > :nth-child(2) { animation-range: entry 4% cover 25%; }
.rv-row > :nth-child(3) { animation-range: entry 8% cover 28%; }
.rv-row > :nth-child(n+4) { animation-range: entry 12% cover 31%; }
}
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.gn { view-transition-name: gn; }
::view-transition-old(root) { animation: 140ms var(--ease-out) both m-vt-out; }
::view-transition-new(root) { animation: 300ms var(--ease-emph) 40ms both m-vt-in; }
::view-transition-group(gn), ::view-transition-group(side) { animation-duration: 0s; }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; transform: translateY(8px); } }
}
:root {
--gn-h: 76px;
--tone-dict: #e8b07a;
--tone-dict: light-dark(#b45309, #e8b07a);
--tone-shadow: #8fd0aa;
--tone-shadow: light-dark(#18794e, #8fd0aa);
--tone-tests: #aab2f0;
--tone-tests: light-dark(#3949a0, #aab2f0);
--tone-cards: #e8a0ae;
--tone-cards: light-dark(#a11d33, #e8a0ae);
--tile-dict: #3c3120;
--tile-dict: light-dark(#f8eee6, #3c3120);
--tile-shadow: #27402f;
--tile-shadow: light-dark(#e9f3eb, #27402f);
--tile-tests: #2a305a;
--tile-tests: light-dark(#eceff8, #2a305a);
--tile-cards: #42262e;
--tile-cards: light-dark(#f6eced, #42262e);
--tile-red: #4a202a;
--tile-red: light-dark(#f6ecec, #4a202a);
--cta: #e1636b;
--cta: light-dark(#d90429, #e1636b);
--ink-red: #e9a3ae;
--ink-red: light-dark(#9b1c31, #e9a3ae);
--pop: #201e24;
--pop: light-dark(#ffffff, #201e24);
--pop-shadow: 0 24px 64px -16px light-dark(rgba(16, 16, 24, 0.22), rgba(0, 0, 0, 0.7)), 0 0 0 1px light-dark(rgba(16, 16, 24, 0.06), rgba(255, 255, 255, 0.08));
}
@media (max-width: 760px) { :root { --gn-h: 66px; } }
.ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.s18 { width: 18px; height: 18px; }
.ic.s16 { width: 16px; height: 16px; stroke-width: 2.2; }
.gn { display: block; }
.shell { display: block; }
.site-header, .site-header:not(.has-search) { display: none !important; }
@media (max-width: 760px) { .shell-main { padding-bottom: 0; } }
.gn-me { display: none; }
html.is-me .gn-in > .gn-btn.is-ghost, html.is-me .gn-m-foot .gn-btn.is-ghost, html.is-pro .gn-in > .gn-btn.is-primary, html.is-pro .gn-m-foot .gn-btn.is-primary { display: none; }
html.is-me .gn-me { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; text-decoration: none; }
html.is-me .gn-me .me-ava { width: 38px; height: 38px; font-size: 15px; }
html.is-pro .gn-m-foot { display: none !important; }
@media (max-width: 760px) { html.is-me .gn-in > .gn-me { display: none; } }
.gn { position: sticky; top: 0; z-index: 25; background: var(--bg); border-bottom: 1px solid transparent; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.gn { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.gn-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); height: var(--gn-h); display: flex; align-items: center; gap: 10px; }
.gn-in > .brand { margin-right: 18px; }
.gn-slot { flex: 0 1 400px; min-width: 0; }
.gn-search {
display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 4px 0 16px;
border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted);
}
.gn-search:focus-within { background: var(--bg); border-color: var(--line-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 6%, transparent); }
.gn-search input[type='search'], .gn-m-search input[type='search'] {
flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: 500 16px var(--font); outline: none;
}
.gn-search input::placeholder, .gn-m-search input::placeholder { color: var(--muted); opacity: 0.85; }
:is(.gn-search, .gn-m-search) input::-webkit-search-cancel-button { display: none; }
.gn-search button {
flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: var(--radius-pill);
background: light-dark(#141416, #2c2a30); color: #fff; font: 700 15px var(--font); cursor: pointer;
}
.gn-slot.is-page > *, .gn-slot.is-page .search-form { width: 100%; max-width: 100%; margin: 0; }
.gn-links { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 8px; }
.gn-link {
display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-pill);
background: none; color: var(--muted); font: 600 16px var(--font); text-decoration: none; cursor: pointer;
}
.gn-link:hover, .gn-link[aria-current='page'] { color: var(--text); }
.gn-tools { color: var(--text); }
.gn-tools .ic { transition: transform var(--dur-3) var(--ease-emph); }
.gn-tools:hover, html:has(#gn-menu:popover-open) .gn-tools { background: var(--surface); }
html:has(#gn-menu:popover-open) .gn-tools .ic { transform: rotate(180deg); }
.gn-btn {
display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px;
border-radius: var(--radius-pill); font: 700 16px var(--font); text-decoration: none; white-space: nowrap;
}
.gn-btn.is-ghost { color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px light-dark(#e2e2e7, #3a3a40); }
.gn-btn.is-ghost:hover { background: var(--surface); }
.gn-btn.is-primary { color: #fff; background: var(--cta); }
.gn-btn.is-primary:hover { background: color-mix(in srgb, var(--cta) 88%, #000); }
.gn-ic {
display: inline-grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0;
border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none;
}
.gn-ic:hover { background: var(--surface-2); }
.gn-ic.is-ph { display: none; }
@media (max-width: 1180px) { .gn-slot { flex-basis: 300px; } }
@media (max-width: 980px) { .gn-in > .gn-btn.is-ghost { display: none; } .gn-link { padding: 0 8px; } }
@media (max-width: 760px) {
.gn-in { gap: 6px; }
.gn-links, .gn-in > .gn-btn, .gn-slot { display: none; }
.gn-ic.is-ph { display: inline-grid; width: 40px; height: 40px; }
.gn-ic.is-ph.gn-burger { width: 42px; height: 42px; }
html.is-me .gn-ic.is-ph.is-acct { width: 32px; height: 32px; }
.gn-in > .brand { gap: 8px; margin-right: auto; }
.gn-in > .brand .brand-word { font-size: 22px; letter-spacing: -0.02em; }
.gn:has(.gn-slot.is-page) .gn-in { height: auto; min-height: var(--gn-h); flex-wrap: wrap; padding-block: 11px; row-gap: 10px; }
.gn-slot.is-page { display: block; flex-basis: 100%; order: 3; }
.gn:has(.gn-slot.is-page) [popovertarget='gn-find'] { display: none; }
}
.gn-menu {
position: fixed; inset: auto; top: calc(var(--gn-h) + 6px);
right: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter) + 150px));
margin: 0; width: min(700px, calc(100vw - 2 * var(--gutter))); padding: 22px; border: 0;
border-radius: 24px; background: var(--pop); color: var(--text); box-shadow: var(--pop-shadow);
}
@supports (position-anchor: --a) {
.gn-tools { anchor-name: --gn-tools; }
.gn-menu { position-anchor: --gn-tools; top: calc(anchor(bottom) + 14px); left: clamp(var(--gutter), calc(anchor(left) - 168px), calc(100% - 700px - var(--gutter))); right: auto; }
}
.gn-m-search, .gn-m-links, .gn-m-foot { display: none; }
.gn-burger .ic + .ic { display: none; }
html:has(#gn-menu:popover-open) .gn-burger .ic:first-child { display: none; }
html:has(#gn-menu:popover-open) .gn-burger .ic + .ic { display: block; }
html:has(#gn-menu:popover-open) .gn-ic.is-ph:not(.gn-burger) { visibility: hidden; }
html:has(#gn-menu:popover-open) .gn-burger { background: none; }
.gn-m-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 22px; }
.gn-label { margin: 6px 0 6px 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gn-rows + .gn-label { margin-top: 16px; }
.gn-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gn-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; color: var(--text); text-decoration: none; }
.gn-row:hover, .gn-row:focus-visible, .gn-row[aria-current='page'] { background: light-dark(var(--surface), #2a282e); }
.gn-row-t { display: flex; flex-direction: column; min-width: 0; }
.gn-row-t b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.gn-row-t small { font-size: 13px; color: var(--muted); }
.gn-ico {
--tone: var(--text);
flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
color: var(--tone); background: light-dark(var(--surface), #1a181e);
}
.gn-ico.is-dict { --tone: var(--tone-dict); background: var(--tile-dict); }
.gn-ico.is-shadow { --tone: var(--tone-shadow); background: var(--tile-shadow); }
.gn-ico.is-tests { --tone: var(--tone-tests); background: var(--tile-tests); }
.gn-ico.is-cards { --tone: var(--tone-cards); background: var(--tile-cards); }
.gn-m-new {
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px;
border-radius: 14px; background: var(--tile-red); color: var(--ink-red);
font-size: 14px; font-weight: 700; text-decoration: none;
}
.gn-m-new .ic { transition: transform var(--dur-2) var(--ease-out); }
.gn-m-new:hover .ic { transform: translateX(3px); }
.gn-find { display: none; }
@media (max-width: 760px) {
.gn-menu, .gn-find {
inset: 0; top: 0; left: 0; right: auto; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); color: var(--text);
flex-direction: column; overflow: hidden;
}
.gn-menu:popover-open, .gn-find:popover-open { display: flex; }
.gn-menu { top: var(--gn-h); height: calc(100% - var(--gn-h)); border-top: 1px solid var(--line); }
.gn-m-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 24px; }
.gn-m-search {
display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; margin: 4px 0 14px;
border-radius: var(--radius-pill); background: var(--surface); color: var(--muted);
}
.gn-m-search input[type='search'] { font-size: 17px; }
.gn-m-cols { grid-template-columns: 1fr; }
.gn-label { margin: 14px 0 4px; }
.gn-rows + .gn-label { margin-top: 14px; }
.gn-row { padding: 8px 0; min-height: 52px; border-radius: 0; }
.gn-row:hover, .gn-row[aria-current='page'] { background: none; }
.gn-row[aria-current='page'] b { font-weight: 800; }
.gn-row .gn-ico { width: 32px; height: 32px; border-radius: 9px; }
.gn-ico:not([class*='is-']) { background: none; width: 28px; }
.gn-row-t b { font-size: 17px; font-weight: 600; }
.gn-row-t small { font-size: 14px; }
.gn-m-new { display: none; }
.gn-m-links { display: flex; gap: 22px; margin: 22px 0 0; }
.gn-m-links a { color: var(--muted); font-size: 17px; font-weight: 500; text-decoration: none; }
.gn-m-foot {
flex: none; display: flex; flex-direction: column; gap: 12px;
padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
}
.gn-m-foot .gn-btn { width: 100%; height: 52px; font-size: 17px; }
.gn-find-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
.gn-search.is-big { flex: 1; min-width: 0; height: 54px; padding: 0 6px 0 16px; background: var(--bg); border: 2px solid var(--text); color: var(--text); }
.gn-search.is-big input[type='search'] { font-size: 18px; caret-color: var(--accent); }
.gn-search.is-big button { height: 42px; background: var(--cta); color: #fff; }
.gn-cancel { flex: none; padding: 8px 0; border: 0; background: none; color: var(--muted); font: 600 17px var(--font); cursor: pointer; }
.gn-find .gn-label { margin: 8px 0 12px; }
.gn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.gn-chip {
display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--radius-pill);
background: var(--surface); color: var(--text); font-size: 17px; font-weight: 600; text-decoration: none;
}
.gn-chip:hover { background: var(--surface-2); }
html:has(:is(#gn-menu, #gn-find):popover-open) { overflow: hidden; }
}
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot-in {
max-width: 1280px; margin: 0 auto; padding: 28px var(--gutter);
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 36px;
}
.foot-tag, .foot-h { display: none; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-col { display: contents; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.foot-cols a:hover { color: var(--text); }
.foot-cols .foot-app { display: none; }
.foot-legal { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
.foot-lic summary { cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.foot-lic summary::-webkit-details-marker { display: none; }
.foot-lic summary:hover { color: var(--text); }
.foot-lic[open] { flex-basis: 100%; order: 3; }
.foot-lic-in { margin-top: 10px; max-width: 920px; font-size: 12px; line-height: 1.55; }
.foot-lic-in p { margin: 0 0 4px; }
.foot-lic-in a { color: inherit; }
.foot .theme-switch button { height: 30px; font-size: 12px; }
@media (max-width: 900px) {
.foot-in { grid-template-columns: 1fr; align-items: start; gap: 28px; padding-block: 36px 48px; }
.foot-tag { display: block; margin: 8px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.foot-col { display: flex; flex-direction: column; min-width: 0; }
.foot-h { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; }
.foot-cols a { min-height: 33px; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.4; }
.foot-cols .foot-app { display: inline-flex; }
.foot-legal { justify-content: flex-start; font-size: 12px; }
}
.sb { display: none; }
.sb .sb-find-ic { display: none; }
@media (min-width: 761px) {
html.is-me:not(.tt-stage):not(.dc-stage) .shell { display: flex; flex-direction: row; align-items: stretch; }
html.is-me:not(.tt-stage):not(.dc-stage) .shell-main { flex: 1; }
html.is-me:not(.tt-stage):not(.dc-stage) .sb { display: flex; }
html.is-me .gn:not(:has(.gn-slot.is-page)) { display: none; }
html.is-me .gn-in > :is(.brand, .gn-links, .gn-btn, .gn-me) { display: none; }
}
.sb {
--sb-ink: #f2f2f5;
--sb-ink: light-dark(#17171a, #f2f2f5);
--sb-ink2: #ccccd6;
--sb-ink2: light-dark(#45454d, #ccccd6);
--sb-mute: #b8b8c2;
--sb-mute: light-dark(#5c5c66, #b8b8c2);
--sb-soft: #1c1c21;
--sb-soft: light-dark(#f4f4f7, #1c1c21);
--sb-key: #2a2a31;
--sb-key: light-dark(#ffffff, #2a2a31);
--sb-line: #2f2f37;
--sb-line: light-dark(#e3e3e8, #2f2f37);
--sb-wine: #ffa8b6;
--sb-wine: light-dark(#7a1f2e, #ffa8b6);
--sb-wine-bg: #5c1f2b;
--sb-wine-bg: light-dark(#7a1f2e, #5c1f2b);
position: sticky;
top: 0;
z-index: 26;
flex: none;
flex-direction: column;
gap: 2px;
width: 232px;
height: 100vh;
height: 100dvh;
padding: 18px 14px 16px;
background: var(--bg);
border-right: 1px solid var(--sb-line);
overflow: hidden auto;
overscroll-behavior: contain;
color: var(--sb-ink2);
font-family: var(--font);
line-height: 1.4;
}
.sb .ic { stroke-width: 1.6; color: var(--sb-mute); }
.sb-top { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 0 14px 6px; }
.sb-brand { gap: 8px; }
.sb-brand .brand-word { letter-spacing: -0.02em; color: var(--sb-ink); }
.sb-tog, .sb-find-ic { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sb-tog { display: flex; width: 30px; height: 30px; padding: 6px; border-radius: 8px; }
.sb-tog:hover, .sb-i:hover { background: var(--sb-soft); }
.sb-find { display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 14px; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--sb-soft); }
.sb-find:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-find input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--sb-ink); font: 500 13px/1.4 var(--font); outline: none; }
.sb-find input::placeholder { color: var(--sb-mute); opacity: 1; }
.sb-find input::-webkit-search-cancel-button { display: none; }
.sb-find kbd { flex: none; padding: 1px 6px; border: 0; border-radius: 5px; box-shadow: none; background: var(--sb-key); color: var(--sb-mute); font: 700 11px/1.4 var(--font); }
.sb-find:focus-within kbd { display: none; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-i { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 9px 10px; border-radius: 10px; color: var(--sb-ink2); font-size: 14px; font-weight: 600; text-decoration: none; }
.sb-i[aria-current='page'] { background: var(--sb-soft); color: var(--sb-ink); font-weight: 700; }
.sb-i[aria-current='page'] .ic { color: var(--sb-ink); }
.sb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tag, .sb-n, .sb-due { margin-left: auto; }
.sb-tag { color: var(--sb-mute); font-size: 11px; font-weight: 600; }
.sb-n { color: var(--sb-mute); font-size: 12px; font-weight: 600; }
.sb-due { padding: 1px 7px; border-radius: 999px; background: var(--sb-wine-bg); color: #fff; font-size: 11px; font-weight: 800; }
.sb-n:empty, .sb-due:empty { display: none; }
.sb-hr { flex: none; width: 204px; height: 1px; margin: 8px 0; border: 0; background: var(--sb-line); }
.sb-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.sb-i.is-app { min-height: 34px; padding: 8px 10px; font-size: 13px; }
.sb-me { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--sb-line); }
.sb-me-in { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.sb-me .me-ava { width: 32px; height: 32px; background: var(--sb-wine-bg); color: #fff; font-size: 13px; font-weight: 800; }
.sb-me .sb-t { display: flex; flex-direction: column; }
.sb-me b { color: var(--sb-ink); font-size: 13px; font-weight: 700; }
.sb-me small { color: var(--sb-mute); font-size: 11px; font-weight: 500; }
.sb-pro { flex: none; color: var(--sb-wine); font-size: 12px; font-weight: 800; text-decoration: none; }
html.is-pro .sb-pro { display: none; }
@media (min-width: 761px) and (max-width: 1023px) {
.sb { width: 68px; padding: 18px 10px 16px; }
.sb :is(.sb-t, .sb-tag, .sb-n, .brand-word, .sb-find, .sb-tog) { display: none; }
.sb-top { justify-content: center; padding: 0 0 14px; }
.sb .sb-find-ic { display: flex; }
.sb-i { position: relative; justify-content: center; padding: 9px 0; }
.sb-due { position: absolute; top: 3px; right: 4px; padding: 0 5px; font-size: 10px; }
.sb-hr { width: 100%; }
.sb-me { justify-content: center; padding: 12px 0 4px; }
.sb-me-in { flex: none; }
}
@media (min-width: 1024px) {
html.side-c .sb { width: 68px; padding: 18px 10px 16px; }
html.side-c .sb :is(.sb-t, .sb-tag, .sb-n, .brand-word, .sb-find) { display: none; }
html.side-c .sb-top { flex-direction: column; gap: 10px; padding: 0 0 14px; }
html.side-c .sb .sb-find-ic { display: flex; }
html.side-c .sb-i { position: relative; justify-content: center; padding: 9px 0; }
html.side-c .sb-due { position: absolute; top: 3px; right: 4px; padding: 0 5px; font-size: 10px; }
html.side-c .sb-hr { width: 100%; }
html.side-c .sb-me { justify-content: center; padding: 12px 0 4px; }
html.side-c .sb-me-in { flex: none; }
}
.gn-ic.is-acct .me-ava { display: none; }
html.is-me .gn-ic.is-acct { background: none; }
html.is-me .gn-ic.is-acct > svg { display: none; }
html.is-me .gn-ic.is-acct .me-ava { display: inline-flex; width: 32px; height: 32px; background: light-dark(#7a1f2e, #5c1f2b); color: #fff; font-size: 13px; font-weight: 800; }