/* Раскладка страницы вокруг дизайна из макета (design.css — выгрузка, руками не правится): макет рисует
   телефон фиксированного размера, страница занимает экран. Здесь только то, чего в макете нет. */
html, body { margin: 0; height: 100%; background: var(--cream); }
.scr { --w: 100vw; --h: 100vh; width: 100vw; height: 100vh; border-radius: 0; }
@supports (height: 100dvh) { .scr { --h: 100dvh; height: 100dvh; } }
.scr button { cursor: pointer; }
.scr button:disabled { cursor: default; }
/* шапка без названия курса и уровня: в §3 их нет (D5) — день стоит справа, как на узком экране макета */
.hd .pill { margin-left: auto; }
/* настоящие поля и кнопки вместо картинок макета */
.input input { width: 100%; border: 0; background: transparent; padding: 0; font: 800 var(--t4) Rubik, sans-serif; color: var(--ink); outline: none; }
.input input::placeholder { color: rgba(51, 6, 35, .62); font-weight: 700; }
.input input:disabled { opacity: 1; }
.sp button { all: unset; cursor: pointer; }
.built .tl { margin: 2px 4px 2px 0; padding: 5px 10px; font-size: var(--t3); box-shadow: 0 2px 0 var(--ink); }
.tl:disabled.used { cursor: default; }
.tl { color: var(--ink); }
.tl.used { color: transparent; }
.thumbs button { all: unset; cursor: pointer; }
.rec { border: 0; cursor: pointer; }
.again { cursor: pointer; }
.stalebar { flex: none; background: var(--red); color: var(--cream); padding: 8px 14px; font: 800 var(--t2) Rubik, sans-serif; }