/* Words from a text (24 Oct 2026): the owner's pick, Codex's "Read and
   collect" - one workspace with the text on one side and its words on the
   other. On a phone the same card stacks (text, then words); details open in
   a sheet. Colours are the site's tokens from word/style.css, so the light
   theme and the palettes follow. */
/* word/style.css lays every <main> out as a word page (text + aside): one column here. */
main.tw-main { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100% - 32px, 1150px); max-width: none; margin: 0 auto; padding: 18px 0 40px; gap: 16px; align-content: start; }
.tw-main > * { grid-column: 1; min-width: 0; }
.tw-main, .tw-sheet { --tw-card: var(--surface); --tw-panel: var(--button-bg, color-mix(in srgb, var(--ink) 4%, var(--surface))); --tw-pink: var(--teal); --tw-gold: var(--accent-text, var(--teal-dark)); }

/* Word library | From a text: one pill; the fill slides across on a switch. */
.tw-switch { position: relative; display: inline-flex; width: max-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tw-panel); }
.tw-switch a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; min-height: 2rem; padding: .3rem .95rem; border-radius: 999px; color: var(--muted); font-size: .86rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
.tw-switch a:hover { color: var(--ink); }
.tw-switch a[aria-current="page"], .tw-switch a.is-target { color: var(--primary-ink, #17181a); }
.tw-switch a[aria-current="page"] { background: var(--tw-pink); }
.tw-switch.is-moving a[aria-current="page"] { background: transparent; color: var(--muted); }
.tw-switch .switch-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--tw-pink); transition: transform .12s cubic-bezier(.3, .7, .2, 1), width .12s cubic-bezier(.3, .7, .2, 1); }
/* In the middle on a laptop, as on the Words page, so the switch stays put. */
@media (min-width: 721px) { .tw-switch { display: flex; margin-inline: auto; } }
.tw-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons, shared by the paste card and the result. */
.tw-primary, .tw-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border: 1px solid var(--line); border-radius: var(--radius, 8px); font: inherit; font-weight: 900; white-space: nowrap; cursor: pointer; box-shadow: none; }
.tw-main .tw-primary { background: var(--vk-accent, #c00d1e); border-color: var(--vk-accent, #c00d1e); color: #fff; }
.tw-main .tw-primary:hover { filter: brightness(1.1); transform: none; }
.tw-main .tw-primary[disabled] { opacity: .6; cursor: progress; }
.tw-main .tw-secondary { background: var(--tw-panel); color: var(--tw-gold); }
.tw-main .tw-secondary:hover { border-color: var(--muted); transform: none; }
.tw-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius, 8px); background: var(--tw-panel); color: var(--muted); box-shadow: none; cursor: pointer; font: 700 1.2rem/1 inherit; }
.tw-icon:hover { color: var(--ink); border-color: var(--muted); transform: none; }
.tw-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The paste card: the same frame as the result. */
.tw-paste-title { margin: 0 0 14px; color: var(--ink); font-size: 1.5rem; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
.tw-frame { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--tw-card); overflow: hidden; }
.tw-frame::before, .tw-workspace::before, .tw-sheet-box::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--theme-1) 0 33.33%, var(--theme-2) 33.33% 66.66%, var(--theme-3) 66.66%); }
.tw-paste-card { padding: 26px 26px 22px; }
.tw-paste-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.tw-paste-head h1, .tw-heading h2 { margin: 0 0 6px; color: var(--ink); font-size: 1.75rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.tw-paste-head p, .tw-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.tw-paste { display: block; width: 100%; min-height: 170px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--tw-panel); color: var(--ink); font: 500 1.02rem/1.7 inherit; font-family: inherit; resize: vertical; }
.tw-paste:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: 2px; }
.tw-go-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.tw-count { margin-inline-start: auto; color: var(--muted); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-note { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.tw-error, .text-missing, .tw-status { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tw-pink) 45%, transparent); background: color-mix(in srgb, var(--tw-pink) 9%, transparent); color: var(--ink); }
.tw-status { margin: 0; }

/* The figures above the card: how many to study, and their levels. */
/* Each number centred over its label, the pair in line with the content of
   the card below (its badges and speakers), not with its outer border. */
.tw-figures { display: flex; align-items: flex-end; justify-content: flex-end; gap: 26px; text-align: center; padding-inline-end: 20px; }
/* On the right in Arabic too, where flex-end would mean the left. */
[dir="rtl"] .tw-figures { justify-content: flex-start; padding-inline-end: 0; padding-inline-start: 20px; }
.tw-figure b { display: block; color: var(--ink); font-size: 1.6rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tw-figure.is-key b { color: var(--tw-pink); }
.tw-figure small { color: var(--muted); font-size: .74rem; }
/* Result heading: the title on one side, the one number on the other. */
.tw-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tw-heading-copy { min-width: 0; }
.tw-heading-side { display: flex; align-items: center; gap: 20px; text-align: center; }
.tw-total b, .tw-levels b { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tw-total b { color: var(--tw-pink); }
.tw-total small, .tw-levels small { color: var(--muted); font-size: .72rem; }
.tw-tools { display: flex; gap: 6px; }

/* The workspace. */
.tw-workspace { position: relative; display: grid; grid-template-columns: 45% 55%; height: min(520px, calc(100vh - 290px)); min-height: 400px; border: 1px solid var(--line); border-radius: 12px; background: var(--tw-card); overflow: hidden; }
.tw-reader { position: relative; min-width: 0; padding: 24px 26px; border-inline-end: 1px solid var(--line); overflow: auto; }
/* The German text always runs left to right, so its edit button sits on the
   right in both languages. */
.tw-edit { position: absolute; z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; opacity: .8; }
.tw-edit:hover { opacity: 1; }
.tw-text { padding-right: 28px; }
.tw-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: .74rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tw-hint { font-weight: 600; letter-spacing: 0; text-transform: none; }
.tw-text { margin: 0; color: var(--muted); font-size: 1.15rem; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.tw-hit { display: inline; padding: 0 1px; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--tw-pink) 40%, transparent); border-radius: 3px; background: none; box-shadow: none; color: var(--ink); font: inherit; font-weight: 800; line-height: inherit; cursor: pointer; }
.tw-hit:hover { background: color-mix(in srgb, var(--tw-pink) 18%, transparent); transform: none; }
.tw-hit.is-active { background: var(--tw-pink); border-color: var(--tw-pink); color: var(--primary-ink, #17181a); }
.tw-hit:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: 2px; }
.tw-unknown { border-bottom: 1px dashed var(--muted); }
.tw-more-text { display: none; }
/* Editing in place: the text becomes a box, with Cancel and Get the words. */
.tw-reader.is-editing > :not(.tw-editor) { display: none; }
.tw-editor { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.tw-main .tw-edit-area { flex: 1; min-height: 0; resize: none; font-size: 1.05rem; line-height: 1.8; }
.tw-edit-row { display: flex; justify-content: flex-end; gap: 10px; }
#twResult.is-busy .tw-workspace, #twResult.is-busy .tw-figures { opacity: .55; transition: opacity .2s; }
#twResult.is-busy .tw-workspace { pointer-events: none; }
/* Study and Play would take the old words: they step aside while the text is edited. */
body.tw-editing .tw-actions { display: none; }
.tw-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; color: var(--muted); font-size: .76rem; }
.tw-legend i { display: inline-block; width: 9px; height: 9px; margin-inline-end: 6px; border-radius: 2px; background: var(--tw-pink); }
.tw-legend i.is-out { background: transparent; border: 1px dashed var(--muted); }

.tw-lexicon { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.tw-tabs { display: flex; justify-content: center; padding: 12px; background: var(--tw-panel); border-bottom: 1px solid var(--line); }
.tw-seg { position: relative; display: inline-flex; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--tw-card); overflow-x: auto; scrollbar-width: none; }
.tw-seg-slider { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; border-radius: 999px; background: var(--tw-pink); transition: transform .28s cubic-bezier(.3, .7, .2, 1), width .28s cubic-bezier(.3, .7, .2, 1); }
.tw-tab { position: relative; z-index: 1; flex: none; padding: 8px 16px; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: color .2s; }
.tw-tab b { margin-inline-start: 4px; color: inherit; opacity: .8; }
.tw-tab[aria-selected="true"] { color: var(--primary-ink, #17181a); }
.tw-tab:hover { color: var(--ink); transform: none; }
.tw-tab[aria-selected="true"]:hover { color: var(--primary-ink, #17181a); }
@media (prefers-reduced-motion: reduce) { .tw-seg-slider, .tw-tab { transition: none; } }
.tw-list { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.tw-row.is-active { background: color-mix(in srgb, var(--tw-pink) 7%, transparent); box-shadow: inset 3px 0 0 var(--tw-pink); }
[dir="rtl"] .tw-row.is-active { box-shadow: inset -3px 0 0 var(--tw-pink); }
.tw-term { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.tw-term:hover { transform: none; }
.tw-term strong { display: block; font-size: 1rem; font-weight: 900; }
.tw-term small { display: block; overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.tw-art { font-weight: 900; }
.tw-art.der { color: var(--accent-4); } .tw-art.die { color: var(--teal); } .tw-art.das { color: var(--accent-3); }
.tw-cefr { min-width: 34px; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; background: var(--meta-level-bg); color: var(--meta-level-ink); font-size: .7rem; font-weight: 700; text-align: center; }
.tw-sound { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid var(--sound-border, var(--line)); border-radius: 50%; background: var(--sound-bg, transparent); color: var(--sound-ink, currentColor); box-shadow: none; cursor: pointer; }
.tw-sound svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tw-sound:hover { transform: none; filter: brightness(1.1); }
/* The picked word, docked under the list: tinted so it never reads as one more row. */
.tw-inspector { position: relative; min-height: 112px; padding: 14px 18px; background: color-mix(in srgb, var(--tw-pink) 12%, var(--tw-card)); border-top: 2px solid var(--tw-pink); box-shadow: 0 -12px 20px -14px rgb(0 0 0 / .55); }
.tw-caption { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tw-inspector strong { display: block; margin-top: 2px; font-size: 1rem; }
.tw-arrow { color: var(--muted); font-weight: 600; }
.tw-quote { margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.tw-quote mark { background: none; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--tw-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tw-page-link { display: inline-block; margin-top: 6px; color: var(--tw-gold); font-size: .82rem; font-weight: 800; text-decoration: none; }
.tw-page-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-panel { padding: 20px 20px 24px; }
.tw-panel > p { margin: 0 0 14px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.tw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--tw-panel); color: var(--ink); font-size: .9rem; text-decoration: none; }
a.tw-chip:hover { border-color: var(--tw-pink); }
.tw-ask { margin-top: 14px; padding: 4px 0; border: 0; background: none; box-shadow: none; color: var(--tw-gold); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; }
.tw-empty { margin: 24px 20px; color: var(--muted); }
.tw-show-all { display: block; width: 100%; min-height: 46px; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; color: var(--tw-gold); font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }

/* Under the workspace: what the set is, and the two ways into it. */
.tw-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding-top: 6px; }
.tw-actions p { margin: 0; color: var(--muted); font-size: .82rem; }
.tw-actions p b { color: var(--ink); }
.tw-buttons { display: flex; align-items: center; gap: 12px; }
.tw-buttons .tw-primary, .tw-buttons .tw-secondary { min-height: 50px; padding: 13px 28px; }
.tw-buttons .tw-share { width: 50px; height: 50px; }

/* A word's sheet (phones). */
.tw-sheet { width: min(520px, 100% - 24px); max-height: min(86vh, 640px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--tw-card); color: var(--ink); overflow: auto; }
.tw-sheet::backdrop { background: rgb(0 0 0 / .6); }
.tw-sheet-box { position: relative; display: grid; gap: 10px; padding: 18px 20px 22px; }
.tw-sheet-top { display: flex; align-items: center; justify-content: space-between; }
.tw-sheet-word { display: flex; align-items: center; gap: 12px; }
.tw-sheet-word h2 { margin: 0; font-size: 1.8rem; font-weight: 900; }
.tw-sheet-sub, .tw-sheet-also { margin: 0; color: var(--muted); font-size: .88rem; }
.tw-sheet-also i { font-style: normal; color: var(--tw-gold); font-weight: 800; }
.tw-sheet-meaning { margin: 0; font-size: 1.08rem; font-weight: 800; }
.tw-sheet .tw-quote { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--tw-panel); color: var(--ink); }
.tw-sheet .tw-quote span { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }

/* Phone: the same card, stacked. The text shows a few lines and opens in
   place; the list shows its first eight rows; Study and Play stay docked. */
@media (max-width: 700px) {
  main.tw-main { padding-top: 12px; gap: 12px; }
  .tw-paste-card { padding: 20px 16px 18px; }
  .tw-paste-head { flex-direction: column; gap: 10px; }
  .tw-paste-head h1, .tw-heading h2 { font-size: 1.4rem; }
  .tw-heading { align-items: flex-start; gap: 12px; }
  .tw-heading-copy p { font-size: .8rem; }
  .tw-heading-side { gap: 10px; }
  .tw-figures { gap: 20px; }
  .tw-figure b { font-size: 1.35rem; }
  .tw-tools .tw-icon { width: 34px; height: 34px; }
  .tw-workspace { display: block; height: auto; min-height: 0; }
  .tw-reader { padding: 18px 16px 12px; border-inline-end: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .tw-text { position: relative; max-height: 9.75em; overflow: hidden; font-size: 1.04rem; line-height: 1.95; }
  .tw-text::after { content: ""; position: absolute; inset: auto 0 0; height: 2.2em; background: linear-gradient(transparent, var(--tw-card)); pointer-events: none; }
  .tw-reader.is-open .tw-text { max-height: none; }
  .tw-reader.is-open .tw-text::after { display: none; }
  .tw-more-text { display: block; margin: 6px 0 0; padding: 6px 0; border: 0; background: none; box-shadow: none; color: var(--tw-gold); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
  .tw-legend { margin-top: 10px; }
  .tw-main .tw-edit-area { flex: none; min-height: 240px; }
  .tw-edit-row > * { flex: 1; }
  .tw-tabs { padding: 10px 10px; }
  .tw-tab { padding: 8px 12px; }
  .tw-list { overflow: visible; }
  .tw-row { padding: 8px 14px; }
  .tw-inspector { display: none; }
  .tw-actions p { display: none; }
  .tw-actions { position: fixed; inset: auto 0 0; z-index: 25; box-sizing: border-box; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
  .tw-buttons { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 46px; gap: 8px; width: 100%; align-items: stretch; }
  .tw-buttons .tw-primary, .tw-buttons .tw-secondary { min-width: 0; min-height: 48px; padding: 8px 8px; font-size: .92rem; line-height: 1.15; white-space: normal; text-wrap: balance; }
  .tw-buttons .tw-share { width: 46px; height: auto; min-height: 48px; }
  .tw-main .tw-primary, .tw-main .tw-secondary { padding: 12px 10px; font-size: .9rem; }
  body.tw-docked .site-footer, body.tw-docked footer { padding-bottom: 84px; }
  .tw-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0; }
}
/* "Link copied": a toast that rises at the bottom and fades. */
.tw-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / .35); font-size: .92rem; font-weight: 800; opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.tw-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.tw-toast svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { body.tw-docked .tw-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .tw-toast { transition: opacity .2s; transform: translate(-50%, 0); } }
.tw-loading { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px; color: var(--muted); }
.tw-loading::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: tw-spin .7s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-loading::before { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The quick tour's step 5 (26 Oct 2026), in the app tour's own look. */
.tw-tour { display:grid; grid-template-columns:40px minmax(0,1fr) auto auto auto; align-items:center; gap:5px 9px; margin:0 0 14px; padding:13px; border-radius:16px; background:color-mix(in srgb,var(--theme-3) 9%,var(--surface)); color:var(--ink); border:1.5px solid color-mix(in srgb,var(--theme-3) 55%,transparent); box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 14%,transparent); }
.tw-tour-train { grid-column:1; grid-row:1 / 3; display:grid; place-items:center; width:40px; height:40px; }
.tw-tour-train .voka-train-mark { width:38px; height:auto; overflow:visible; transform:scaleX(-1); }
.tw-tour-head { grid-column:2; grid-row:1; display:flex; align-items:center; gap:8px; min-width:0; }
.tw-tour-label { color:var(--vk-kicker); font-size:.65rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.tw-tour-step { padding:3px 7px; border-radius:999px; background:var(--theme-3); color:var(--theme-3-ink); font-size:.65rem; font-weight:900; white-space:nowrap; }
.tw-tour-copy { grid-column:2; grid-row:2; font-size:.84rem; line-height:1.45; }
.tw-tour-copy strong { display:block; margin-bottom:5px; font-size:1.02rem; font-weight:900; line-height:1.2; color:var(--ink); }
.tw-tour-copy > span { display:block; color:color-mix(in srgb,var(--ink) 74%,var(--surface)); }
.tw-tour-copy b { font-weight:800; color:var(--ink); }
.tw-tour button { display:grid; place-items:center; grid-row:1 / 3; align-self:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; cursor:pointer; }
.tw-tour-back { grid-column:3; background:var(--surface-2); color:var(--ink); }
.tw-tour-next { grid-column:4; background:var(--vk-accent); color:var(--vk-accent-ink); }
.tw-tour-close { grid-column:5; background:transparent; color:var(--muted); }
.tw-tour button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.tw-tour button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.tw-tour-target { outline:2px solid var(--theme-3); outline-offset:3px; border-radius:6px; box-shadow:0 0 0 6px color-mix(in srgb,var(--theme-3) 20%,transparent); animation:tw-tour-pulse 1.45s ease-in-out 4; }
@keyframes tw-tour-pulse { 50% { box-shadow:0 0 0 9px color-mix(in srgb,var(--theme-3) 8%,transparent); } }
@media (max-width:640px) {
  .tw-tour { grid-template-columns:24px minmax(0,1fr) auto auto auto; gap:7px; padding:11px; }
  .tw-tour-train { grid-row:1; width:24px; height:20px; }
  .tw-tour-train .voka-train-mark { width:24px; }
  .tw-tour-copy { grid-column:1 / -1; font-size:.81rem; }
  .tw-tour button { grid-row:1; width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) { .tw-tour-target { animation:none; } }

/* The docked buttons sit under the More sheet's backdrop (29) and sheet (30),
   and shrink to any phone width (26 Oct 2026). */
/* The page opens on words (26 Oct 2026): the title stands above, the example
   is marked as one, and the reader's own text is one labelled tap away. */
.tw-page-title { margin: 4px 0 -4px; }
.tw-edit.has-label { width: auto; gap: 7px; padding: 0 12px 0 10px; font-size: .82rem; font-weight: 800; color: var(--ink); opacity: 1; display: inline-flex; align-items: center; }
.tw-edit.has-label svg { width: 16px; height: 16px; }
.tw-sample-tag { position: absolute; z-index: 3; top: 18px; left: 26px; padding: 2px 8px; border-radius: 999px; background: var(--tw-panel); color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .tw-sample-tag { left: auto; right: 26px; letter-spacing: 0; }
.tw-reader:has(.tw-sample-tag) .tw-text { margin-top: 26px; }
@media (max-width: 700px) { .tw-sample-tag { left: 16px; top: 14px; } [dir="rtl"] .tw-sample-tag { right: 16px; } }
.tw-hit.tw-tour-target { outline:0; border-radius:5px; background:color-mix(in srgb,var(--theme-3) 22%,transparent); box-shadow:inset 0 0 0 2px var(--theme-3); animation:none; }
/* The installed app reaches the screen's rounded corners: the docked buttons
   keep clear of the curve (26 Oct 2026, seen on an iPhone). */
@media (max-width: 700px) and (display-mode: standalone) {
  .tw-actions { padding: 10px 22px calc(max(20px, env(safe-area-inset-bottom, 0px)) + 6px); }
  body.tw-docked .site-footer, body.tw-docked footer { padding-bottom: 104px; }
}