/* Дизайн-система «duolingo» (open-design: plugins/_official/design-systems/duolingo).
   Граматика: біле поле, великий упевнений округлий шрифт 800+, «пухкі» кнопки
   з нижньою тінню 4px, що «натискаються» вниз, рамки 2px замість ліній,
   радіуси 16px, смуги прогресу-пігулки.
   Відхилення від оригіналу: зелений Duo — чужий бренд, тому кольори взято
   з логотипа ZEST (img/logo_zest.png): червоно-помаранчеве коло й жовтий обідок. Feather Bold недоступний → Nunito (округлий, кирилиця, змінна товщина). */
html[data-ds="duolingo"]{
  --base-bg:#FFFFFF; --base-fg:#3C3C3C; --base-surface:#F7F7F7; --base-muted:#777777;
  --hero-bg:#FFFFFF; --hero-fg:#3C3C3C; --hero-surface:#F7F7F7; --hero-muted:#777777;
  --accent:#D9432A; --accent-fg:#FFFFFF; --accent-press:#A8321E;
  --line:#E5E5E5; --miss:#FF4B4B;
  --radius:16px; --btn-radius:16px;
  --display:Nunito, "Helvetica Neue", sans-serif; --text:Nunito, "Helvetica Neue", sans-serif;
  --display-weight:900; --display-track:-.01em;
  --vf-wmin:500; --vf-wmax:1000;
  --wheel-a:#D9432A; --wheel-b:#F8D830; --wheel-ink:#3C3C3C; --wheel-ink-a:#FFFFFF; --wheel-line:#FFFFFF;
  --card-bg:#FFFFFF; --card-fg:#3C3C3C; --card-surface:#E5E5E5; --card-band:#D9432A; --card-band-fg:#FFFFFF;
}

/* Кнопки: рамка 2px, нижня «підошва» 4px; при натисканні кнопка сідає на неї. */
[data-ds="duolingo"] .btn{
  font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;
  text-align:center;background:#FFFFFF;color:var(--fg);
  border:2px solid var(--line);box-shadow:0 4px 0 var(--line);margin-bottom:4px;
}
[data-ds="duolingo"] .btn--primary{background:var(--accent);color:#FFFFFF;border-color:var(--accent);box-shadow:0 4px 0 var(--accent-press)}
[data-ds="duolingo"] .btn:active{transform:translateY(4px);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  [data-ds="duolingo"] .btn:hover{transform:none;filter:brightness(1.05)}
  [data-ds="duolingo"] .cand:hover{background:#FFFFFF;border-color:#AFAFAF}
}

/* Варіанти пісні — «плитки уроків»: рамка 2px + підошва. */
[data-ds="duolingo"] .cands{gap:12px}
[data-ds="duolingo"] .cand{margin:0;width:100%;padding:14px 16px;background:#FFFFFF;
  border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
[data-ds="duolingo"] .cand:active{transform:translateY(4px);box-shadow:none}
[data-ds="duolingo"] .cand:first-child{border-color:var(--accent);box-shadow:0 4px 0 var(--accent-press)}
[data-ds="duolingo"] .cand b::after{content:none}

[data-ds="duolingo"] .situation,
[data-ds="duolingo"] .stage{background:#FFFFFF;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
[data-ds="duolingo"] .countdown{background:#FFFFFF}
[data-ds="duolingo"] .statrow>div{background:#FFFFFF;border:2px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center}
/* Цифри — чорнилом: червоний на екрані лише в головній кнопці. */
[data-ds="duolingo"] .courage__bar{height:16px;background:var(--line)}
/* Смуга прогресу з «відблиском» — фірмова деталь Duolingo, тут лише смужка тону. */
[data-ds="duolingo"] .courage__bar i{box-shadow:inset 0 -5px 0 rgba(0,0,0,.08)}

[data-ds="duolingo"] .field input,
[data-ds="duolingo"] .singback__style{background:#F7F7F7;border:2px solid var(--line);border-radius:12px}
[data-ds="duolingo"] .field input:focus{outline:0;border-color:#1CB0F6;box-shadow:0 0 0 3px rgba(28,176,246,.2)}

[data-ds="duolingo"] .code{background:#FFFFFF;color:var(--fg);border:2px dashed var(--accent);text-align:center}
[data-ds="duolingo"] .prize{text-align:center}
[data-ds="duolingo"] #screen-prize .eyebrow,
[data-ds="duolingo"] #prize-expires{text-align:center;margin-left:auto;margin-right:auto}
[data-ds="duolingo"] .vf__trail path{stroke:#F8D830;stroke-opacity:1;stroke-width:6}
[data-ds="duolingo"] .demo-flag{background:#F7F7F7;color:#777777;border-top:2px solid var(--line)}