/* ── Ключи иероглифов ──────────────────────────────────────────────── */

.rad-hint { margin-top: var(--sp-4); color: var(--text-muted); max-width: 70ch; }

.rad-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
    justify-content: space-between;
}
.rad-search {
    flex: 1 1 260px; max-width: 360px; height: var(--control-h);
    padding: 0 var(--sp-4); font: inherit;
    border: var(--border-w) solid var(--border-default);
    border-radius: var(--r-control); background: var(--surface-card);
}
.rad-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rad-jump__label { color: var(--text-muted); font-size: 14px; margin-right: 2px; }
.rad-jump a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 6px;
    border: var(--border-w) solid var(--border-default); border-radius: var(--r-control);
    font-size: 14px; text-decoration: none; color: var(--text-body);
}
.rad-jump a:hover { border-color: var(--red-500); color: var(--red-600); }
.rad-empty { margin-top: var(--sp-4); color: var(--text-muted); }

.rad-group__title { display: flex; align-items: baseline; gap: var(--sp-3); }
.rad-group__count { color: var(--text-muted); font-size: 15px; font-weight: 400; }
.rad-group.is-hidden, .rad-cell.is-hidden { display: none; }

.rad-grid {
    margin-top: var(--sp-5); display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
}
.rad-cell {
    display: grid; gap: 0 var(--sp-3); align-items: center;
    grid-template-columns: auto 1fr;
    grid-template-areas: "glyph num" "glyph py" "glyph ru";
    padding: var(--sp-3) var(--sp-4);
    border: var(--border-w) solid var(--border-default);
    border-radius: var(--r-control);
    background: var(--surface-card);
    text-decoration: none; color: var(--text-body);
}
.rad-cell--card { cursor: pointer; }
.rad-cell--card:hover { border-color: var(--red-500); box-shadow: var(--sh-sm); }
/* Разбор есть не у всех, и разница должна быть видна до нажатия —
   иначе половина ячеек молча не отзывается. */
.rad-cell--card::after {
    content: ""; grid-area: glyph; align-self: start; justify-self: end;
    width: 6px; height: 6px; border-radius: 50%; background: var(--red-500);
    transform: translate(6px, -2px);
}
/* Засечное начертание — исключение, оговорённое владельцем: ключ
   показывают ради того, как он написан, а у гротеска все черты одной
   толщины. Больше нигде на сайте этого шрифта нет. */
.rad-cell__glyph {
    grid-area: glyph; font-size: 34px; line-height: 1.1; color: var(--ink-900);
    font-family: "Noto Serif SC", var(--font-hanzi), serif; font-weight: 600;
}
.rad-cell__num { grid-area: num; color: var(--text-muted); font-size: 12px; }
.rad-cell__var { display: none; }
.rad-cell__py { grid-area: py; color: var(--red-600); font-size: 14px; }
.rad-cell__ru { grid-area: ru; color: var(--text-muted); font-size: 13px; line-height: 1.3; }

/* ── Карточка разбора ──────────────────────────────────────────────── */

.rad-card { display: flex; flex-direction: column; gap: var(--sp-5); }
.rad-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.rad-card__art { flex: 0 0 auto; }
.rad-card__id { flex: 1 1 200px; }
.rad-card__glyph {
    font-size: 88px; line-height: 1; color: var(--ink-900);
    font-family: "Noto Serif SC", var(--font-hanzi), serif; font-weight: 700;
}
.rad-card__variants {
    margin-top: var(--sp-2); font-size: 24px; color: var(--ink-700);
}
.rad-card__variants span { font-size: 13px; color: var(--text-muted); vertical-align: middle; }
.rad-card__read { margin-top: var(--sp-3); font-size: 18px; font-weight: 600; }
.rad-card__facts { display: flex; gap: var(--sp-5); margin: var(--sp-3) 0 0; }
.rad-card__facts div { display: flex; gap: 6px; align-items: baseline; }
.rad-card__facts dt { color: var(--text-muted); font-size: 13px; }
.rad-card__facts dd { margin: 0; font-weight: 600; }

.rad-card__text p { margin: 0 0 var(--sp-4); line-height: 1.65; }
.rad-card__text p:last-child { margin-bottom: 0; }
.rad-card__block h3 { margin: 0 0 var(--sp-2); font-size: 15px; }
.rad-card__block p { margin: 0; line-height: 1.6; }
.rad-card__examples {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: var(--sp-2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.rad-card__examples li {
    display: flex; align-items: baseline; gap: 8px; list-style: none;
    padding: 6px var(--sp-3); background: var(--jade-50); border-radius: var(--r-md);
}
.rad-ex__hanzi { font-size: 24px; font-family: "Noto Serif SC", var(--font-hanzi), serif; }
.rad-ex__py { color: var(--red-600); font-size: 14px; }
.rad-ex__ru { color: var(--text-muted); font-size: 13px; }
.rad-card__note {
    margin: 0; padding: var(--sp-4); background: var(--paper-200);
    border-radius: var(--r-md); color: var(--ink-700); font-size: 14px; line-height: 1.55;
}
.rad-loading { color: var(--text-muted); }
.rad-page { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ── Рисунок ключа ─────────────────────────────────────────────────── */

/* Рисунки мультяшные, по образцу маскота школы: персонаж в круге,
   тёплая кожа, фирменная красная толстовка. Цвета заданы классами, а
   не в самих SVG: рисунков будет 214, и перекрасить их разом можно
   только отсюда. */
.rad-draw { width: 168px; height: 168px; display: block; }
.rad-draw__field { fill: var(--paper-100); }
.rad-draw__ring { fill: none; stroke: var(--border-default); stroke-width: 1.5; }
.rad-draw__wash { fill: var(--jade-500); opacity: .16; }
.rad-draw__ink { fill: var(--ink-900); }
.rad-draw__shadow { fill: var(--ink-900); opacity: .07; }
.rad-draw__trace { fill: var(--ink-900); opacity: .08; }

/* Персонаж */
.rad-draw__skin { fill: #F2C6A0; }
.rad-draw__skin-dark { fill: #DFAE86; }
.rad-draw__hair { fill: #2B2119; }
.rad-draw__hoodie { fill: var(--red-500); }
.rad-draw__hood { fill: var(--red-600); }
.rad-draw__trousers { fill: #4C5A6B; }
.rad-draw__shoe { fill: #2B2119; }
.rad-draw__pack { fill: #8A5A3B; }
.rad-draw__packline { fill: none; stroke: #6E452C; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__eye { fill: #2B2119; }
.rad-draw__eye-light { fill: var(--paper-100); }
.rad-draw__blush { fill: var(--red-500); opacity: .22; }
.rad-draw__smile { fill: none; stroke: #2B2119; stroke-width: 2.4; stroke-linecap: round; }
.rad-draw__smile-light { fill: none; stroke: var(--paper-100); stroke-width: 2.4; stroke-linecap: round; }
.rad-draw__smile-big { fill: none; stroke: #8A4A12; stroke-width: 3.5; stroke-linecap: round; }
.rad-draw__mouth { fill: #9B3A3A; }
.rad-draw__tooth { fill: #FFFFFF; }
.rad-draw__tongue { fill: #E07A7A; }

/* Природа */
.rad-draw__sun { fill: var(--gold-400); }
.rad-draw__sunring { fill: none; stroke: #E39A3E; stroke-width: 3; }
.rad-draw__ray { fill: none; stroke: var(--gold-400); stroke-width: 6; stroke-linecap: round; }
.rad-draw__cloud { fill: #FFFFFF; opacity: .85; }
.rad-draw__trunk { fill: #8A5A3B; }
.rad-draw__crown { fill: var(--jade-500); }
.rad-draw__fruit { fill: var(--red-500); }
.rad-draw__water { fill: #5EA8C9; }
.rad-draw__waveline { fill: none; stroke: #FFFFFF; stroke-width: 3; opacity: .6; stroke-linecap: round; }
.rad-draw__foam { fill: #FFFFFF; opacity: .8; }
.rad-draw__fish { fill: var(--gold-400); }
.rad-draw__droplet { fill: #3E6E86; }
.rad-draw__shine { fill: #FFFFFF; opacity: .5; }
.rad-draw__sparkfill { fill: var(--gold-400); }

/* Птицы, еда, постройки — палитра растёт вместе с числом рисунков. */
.rad-draw__goose { fill: #F2EFE7; stroke: #CBC2B2; stroke-width: 2; }
.rad-draw__beak { fill: var(--gold-400); }
.rad-draw__wing { fill: #E2DBCC; }
.rad-draw__metal { fill: #9AA3A8; }
.rad-draw__vein { fill: none; stroke: #1B4A40; stroke-width: 1.5; opacity: .45; stroke-linecap: round; }
.rad-draw__roof { fill: var(--red-600); }
.rad-draw__roof-dark { fill: #8E1F1C; }
.rad-draw__wall { fill: #E8D3B0; }
.rad-draw__wallline { fill: none; stroke: #C3A87C; stroke-width: 2; stroke-linecap: round; }
.rad-draw__door { fill: #8A5A3B; }
.rad-draw__doorway { fill: #3A3129; }
.rad-draw__bun { fill: #F6EFE2; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__bunfill { fill: #E4C58F; }
.rad-draw__bunmeat { fill: #B9754A; }
.rad-draw__bunline { fill: none; stroke: #D8CBB4; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__steam { fill: none; stroke: #B9C0C6; stroke-width: 3; stroke-linecap: round; }

/* Предметы: посуда, дерево, камень, ткань. */
.rad-draw__jar { fill: #C98A5A; }
.rad-draw__cloth { fill: #DCD3C4; stroke: #C4B9A6; stroke-width: 2; }
.rad-draw__clothline { fill: none; stroke: #D6CCBC; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__ice { fill: #BFE0EE; }
.rad-draw__ice-light { fill: #DCF0F8; }
.rad-draw__frost { fill: none; stroke: #7FC0DA; stroke-width: 3; stroke-linecap: round; }
.rad-draw__teapot { fill: #7E6A57; }
.rad-draw__handle { fill: none; stroke: #7E6A57; stroke-width: 6; stroke-linecap: round; }
.rad-draw__handle2 { fill: #7E6A57; }
.rad-draw__cup { fill: #E8D3B0; }
.rad-draw__bowl { fill: #F1E7D6; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__soup { fill: #E8A44C; }
.rad-draw__wood2 { fill: #B98A5C; }
.rad-draw__boxin { fill: #7E5A3C; }
.rad-draw__weave { fill: none; stroke: #9A7048; stroke-width: 2; stroke-linecap: round; opacity: .6; }
.rad-draw__scroll { fill: #F1E7D6; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__scroll2 { fill: #E8D3B0; stroke: #C3A87C; stroke-width: 2; }
.rad-draw__metal-light { fill: #CBD2D7; }
.rad-draw__edge { fill: #E4E9EC; }
.rad-draw__skinline { fill: none; stroke: #C99A72; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__crown-dark { fill: var(--jade-700); }
.rad-draw__cord { fill: none; stroke: #F1E7D6; stroke-width: 4; stroke-linecap: round; }
.rad-draw__gold-lock { fill: var(--gold-400); }
.rad-draw__stone { fill: #A7ADB2; }
.rad-draw__stone-dark { fill: #8B9299; }
.rad-draw__stone-warm { fill: #C9C2B6; }
.rad-draw__shell { fill: #D8CBB4; }
.rad-draw__shell-in { fill: #C3B49A; }
.rad-draw__crack { fill: none; stroke: #4A4034; stroke-width: 3; stroke-linecap: round; }
.rad-draw__fire { fill: #E8A44C; }
.rad-draw__fire-in { fill: var(--red-500); }
.rad-draw__paper { fill: #FFFFFF; stroke: #E0DACF; stroke-width: 2; }
.rad-draw__seal-mark { fill: var(--red-500); opacity: .85; }
.rad-draw__seal-body { fill: var(--red-600); }

/* Земля, сумерки, одежда — палитра третьей партии рисунков. */
.rad-draw__soil { fill: #C79A6B; }
.rad-draw__soil-dark { fill: #A87A4E; }
.rad-draw__robe { fill: var(--jade-500); }
.rad-draw__robe-dark { fill: var(--jade-700); }
.rad-draw__hat { fill: #E4C58F; }
.rad-draw__tired { fill: none; stroke: #2B2119; stroke-width: 2.4; stroke-linecap: round; }
.rad-draw__print { fill: #A87A4E; }
.rad-draw__print-far { fill: #A87A4E; opacity: .4; }
.rad-draw__dusk { fill: #3E4A63; }
.rad-draw__moon { fill: #F6EBC8; }
.rad-draw__star { fill: #F6EBC8; opacity: .85; }
.rad-draw__hill { fill: #2F3B52; }
.rad-draw__hill-dark { fill: #232C3E; }
.rad-draw__pin { fill: none; stroke: var(--gold-400); stroke-width: 3.5; stroke-linecap: round; }
.rad-draw__swaddle { fill: #EFD9C6; }
.rad-draw__window { fill: var(--gold-400); }

.rad-draw__pulse { fill: none; stroke: var(--red-500); stroke-width: 2.5; stroke-dasharray: 4 4; }
.rad-draw__measure { fill: none; stroke: var(--red-500); stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__bird-body { fill: #C98A5A; }
.rad-draw__legs { fill: none; stroke: #8A5A3B; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__mat { fill: #E4C58F; }
.rad-draw__matline { fill: none; stroke: #C3A87C; stroke-width: 2; stroke-linecap: round; }
.rad-draw__husk { fill: #C3A87C; }
.rad-draw__root { fill: none; stroke: #A87A4E; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__mount { fill: #8B9299; }
.rad-draw__mount-front { fill: #6E767E; }
.rad-draw__snow { fill: #F1F4F6; }
.rad-draw__mist { fill: none; stroke: #FFFFFF; stroke-width: 5; opacity: .55; stroke-linecap: round; }
.rad-draw__stream { fill: none; stroke: #FFFFFF; stroke-width: 4; opacity: .65; stroke-linecap: round; }
.rad-draw__nose { fill: #DFAE86; }
.rad-draw__towel { fill: #E9F2EF; stroke: #BBD3CB; stroke-width: 2; }
.rad-draw__towel-fold { fill: none; stroke: #BBD3CB; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__towel-line { fill: none; stroke: var(--jade-500); stroke-width: 3; opacity: .45; stroke-linecap: round; }

.rad-draw__shield { fill: #8A5A3B; }
.rad-draw__shield-in { fill: #A87A4E; }
.rad-draw__silk { fill: #F1E7D6; }
.rad-draw__silk-dark { fill: #DCCDB4; }
.rad-draw__silk-line { fill: none; stroke: #C3A87C; stroke-width: 2; stroke-linecap: round; }
.rad-draw__thread { fill: none; stroke: #C3A87C; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__road { fill: #B9C0C6; }
.rad-draw__roadline { fill: #F7F4EF; }
.rad-draw__fletch { fill: var(--red-500); }
.rad-draw__bow { fill: #8A5A3B; }
.rad-draw__bowstring { fill: none; stroke: #4A4034; stroke-width: 3; }
.rad-draw__broom { fill: #E4C58F; }
.rad-draw__broomline { fill: none; stroke: #C3A87C; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__snowfall { fill: #FFFFFF; }
.rad-draw__comb { fill: #7E6A57; }
.rad-draw__combtooth { fill: none; stroke: #7E6A57; stroke-width: 4; stroke-linecap: round; }

/* Четвёртая партия: небо, звери, письменные принадлежности. */
.rad-draw__crater { fill: #E4D6B0; }
.rad-draw__rabbit { fill: #FFFFFF; }
.rad-draw__pestle { fill: none; stroke: #8A5A3B; stroke-width: 7; stroke-linecap: round; }
.rad-draw__mortar { fill: #8A5A3B; }
.rad-draw__constline { fill: none; stroke: #F6EBC8; stroke-width: 1.5; opacity: .55; }
.rad-draw__grain { fill: #E4C58F; }
.rad-draw__grain-face { fill: #E4C58F; }
.rad-draw__bamboo { fill: #D8CBB4; stroke: #BBAF98; stroke-width: 1.5; }
.rad-draw__cord-dark { fill: none; stroke: #8A5A3B; stroke-width: 3; stroke-linecap: round; }
.rad-draw__tooth-line { fill: none; stroke: #D8CBB4; stroke-width: 3; stroke-linecap: round; }
.rad-draw__pattern { fill: none; stroke: var(--red-500); stroke-width: 3; opacity: .5; }
.rad-draw__glyphline { fill: none; stroke: #4A4034; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.rad-draw__glyphline-light { fill: none; stroke: #F1E7D6; stroke-width: 4; stroke-linecap: round; opacity: .75; }
.rad-draw__bone { fill: #EFE7D6; stroke: #CFC3AC; stroke-width: 2; }
.rad-draw__dry { fill: #A87A4E; opacity: .6; }
.rad-draw__stop-ring { fill: var(--red-500); opacity: .18; }
.rad-draw__stop-bar { fill: none; stroke: var(--red-500); stroke-width: 9; stroke-linecap: round; }
.rad-draw__wool { fill: #F1E7D6; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__wool-line { fill: none; stroke: #D8CBB4; stroke-width: 3; stroke-linecap: round; }
.rad-draw__feather { fill: #E9F2EF; stroke: #BBD3CB; stroke-width: 2; }
.rad-draw__vapour { fill: none; stroke: #B9C0C6; stroke-width: 4; stroke-linecap: round; }
.rad-draw__fur { fill: #C79A6B; }
.rad-draw__belly { fill: #E8D3B0; }
.rad-draw__ear { fill: #A87A4E; }
.rad-draw__pad { fill: #E4A0A0; }
.rad-draw__claw { fill: none; stroke: #4A4034; stroke-width: 4; stroke-linecap: round; }
.rad-draw__muzzle { fill: #EFDCC4; }
.rad-draw__horn { fill: #E8D3B0; }
.rad-draw__ox { fill: #8A5A3B; }
.rad-draw__tooth-big { fill: #FFFFFF; stroke: #DCD3C4; stroke-width: 2; }
.rad-draw__jade-handle { fill: var(--jade-500); }
.rad-draw__bristle { fill: none; stroke: #B9C0C6; stroke-width: 3; stroke-linecap: round; }

/* Пятая партия: посуда, поле, ткань, обряд. */
.rad-draw__dark-silk { fill: #3E3140; }
.rad-draw__dark-line { fill: none; stroke: #5C4A5F; stroke-width: 3; stroke-linecap: round; }
.rad-draw__jade { fill: var(--jade-500); }
.rad-draw__jade-shine { fill: none; stroke: #FFFFFF; stroke-width: 3; opacity: .45; stroke-linecap: round; }
.rad-draw__melon { fill: var(--jade-500); }
.rad-draw__melon-stripe { fill: none; stroke: var(--jade-700); stroke-width: 5; stroke-linecap: round; }
.rad-draw__stem { fill: none; stroke: #8A5A3B; stroke-width: 6; stroke-linecap: round; }
.rad-draw__tendril { fill: none; stroke: var(--jade-700); stroke-width: 3; stroke-linecap: round; }
.rad-draw__tile { fill: #B9754A; }
.rad-draw__tile-dark { fill: #8E5433; }
.rad-draw__cane { fill: #A8B86A; }
.rad-draw__cane-dark { fill: #8CA054; }
.rad-draw__cane-node { fill: none; stroke: #6F8040; stroke-width: 3; }
.rad-draw__syrup { fill: #C98A2A; }
.rad-draw__chick { fill: var(--gold-400); }
.rad-draw__shell-edge { fill: none; stroke: #CFC3AC; stroke-width: 3; stroke-linejoin: round; }
.rad-draw__bucket-handle { fill: none; stroke: #7E6A57; stroke-width: 6; }
.rad-draw__crop { fill: #8CA054; }
.rad-draw__crop-2 { fill: #A8B86A; }
.rad-draw__furrow { fill: none; stroke: #6F8040; stroke-width: 2; opacity: .7; }
.rad-draw__cloth-roll { fill: #E9F2EF; stroke: #BBD3CB; stroke-width: 2; }
.rad-draw__cloth-end { fill: #CFE0D9; }
.rad-draw__blanket { fill: #7FA8C9; }
.rad-draw__thermo { fill: #E4E9EC; stroke: #B9C0C6; stroke-width: 1.5; }
.rad-draw__stone-edge { fill: none; stroke: #6E767E; stroke-width: 3; }
.rad-draw__glow { fill: #F6EBC8; opacity: .18; }
.rad-draw__white-lamp { fill: #FBF7EC; }
.rad-draw__lamp-rib { fill: none; stroke: #E0D6BE; stroke-width: 2.5; }
.rad-draw__hide { fill: #C79A6B; }
.rad-draw__hide-line { fill: none; stroke: #A87A4E; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__sclera { fill: #FBF7EC; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__iris { fill: #7E6A57; }
.rad-draw__lid { fill: none; stroke: #4A4034; stroke-width: 4; stroke-linecap: round; }
.rad-draw__lash { fill: none; stroke: #4A4034; stroke-width: 3; stroke-linecap: round; }
.rad-draw__target { fill: var(--red-500); }
.rad-draw__incense { fill: none; stroke: #C3A87C; stroke-width: 3; stroke-linecap: round; }
.rad-draw__stalk { fill: none; stroke: #A8B86A; stroke-width: 6; stroke-linecap: round; }
.rad-draw__leaf-line { fill: none; stroke: #8CA054; stroke-width: 5; stroke-linecap: round; }
.rad-draw__wood2-line { fill: none; stroke: #B98A5C; stroke-width: 4; }

/* Шестая партия: бамбук, шёлк, звери, лодка, одежда. */
.rad-draw__bamboo-green { fill: #8CA054; }
.rad-draw__bamboo-dark { fill: #6F8040; }
.rad-draw__rice { fill: #FBF7EC; stroke: #DCD3C4; stroke-width: 2; }
.rad-draw__silk-red { fill: #D96A6A; }
.rad-draw__silk-red-line { fill: none; stroke: #B94F4F; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__thread-red { fill: none; stroke: #D96A6A; stroke-width: 3; stroke-linecap: round; }
.rad-draw__cocoon { fill: #F6EBC8; stroke: #DCC9A0; stroke-width: 2; }
.rad-draw__clay { fill: #B9754A; }
.rad-draw__clay-dark { fill: #8E5433; }
.rad-draw__clay-line { fill: none; stroke: #8E5433; stroke-width: 3; stroke-linecap: round; }
.rad-draw__net-frame { fill: #EFE7D6; stroke: #C3A87C; stroke-width: 3; }
.rad-draw__net { fill: none; stroke: #B9AE97; stroke-width: 2.5; }
.rad-draw__quill { fill: none; stroke: #7E6A57; stroke-width: 3; stroke-linecap: round; }
.rad-draw__barb { fill: none; stroke: #BBD3CB; stroke-width: 2; stroke-linecap: round; }
.rad-draw__feather-2 { fill: #F1E7D6; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__grey-hair { fill: #D8D3CB; }
.rad-draw__hair-line { fill: none; stroke: #BEB8AE; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__stick-top { fill: none; stroke: #7E6A57; stroke-width: 8; stroke-linecap: round; }
.rad-draw__ear-line { fill: none; stroke: #C99A72; stroke-width: 4; stroke-linecap: round; }
.rad-draw__inkstone { fill: #4A4034; }
.rad-draw__stand { fill: #7E6A57; }
.rad-draw__meat { fill: #D98080; }
.rad-draw__meat-line { fill: none; stroke: #FBF7EC; stroke-width: 4; stroke-linecap: round; opacity: .75; }
.rad-draw__fat { fill: #FBF7EC; }
.rad-draw__tablet { fill: #F1E7D6; stroke: #C3A87C; stroke-width: 2; }
.rad-draw__nose-line { fill: none; stroke: #C99A72; stroke-width: 5; stroke-linecap: round; }
.rad-draw__nostril { fill: #C99A72; }
.rad-draw__tongue-line { fill: none; stroke: #C25E5E; stroke-width: 3; stroke-linecap: round; }
.rad-draw__ribbon { fill: none; stroke: var(--red-500); stroke-width: 7; stroke-linecap: round; }
.rad-draw__sail { fill: #F1E7D6; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__sail-dark { fill: #DCD3C4; }
.rad-draw__boat { fill: #8A5A3B; }
.rad-draw__boat-line { fill: none; stroke: #6E452C; stroke-width: 3; stroke-linecap: round; }
.rad-draw__palette { fill: #E4C58F; stroke: #C3A87C; stroke-width: 2; }
.rad-draw__tiger { fill: #E8A44C; }
.rad-draw__stripe { fill: none; stroke: #4A4034; stroke-width: 5; stroke-linecap: round; }
.rad-draw__nose-dark { fill: #4A4034; }
.rad-draw__fang { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; }
.rad-draw__bug { fill: #8CA054; }
.rad-draw__bug-head { fill: #6F8040; }
.rad-draw__antenna { fill: none; stroke: #6F8040; stroke-width: 3; stroke-linecap: round; }
.rad-draw__blood { fill: #B33A3A; }
.rad-draw__rail { fill: none; stroke: #7E6A57; stroke-width: 6; stroke-linecap: round; }
.rad-draw__hanger { fill: none; stroke: #7E6A57; stroke-width: 4; }
.rad-draw__robe-collar { fill: #F1E7D6; }
.rad-draw__robe-fold { fill: none; stroke: var(--jade-700); stroke-width: 3; }
.rad-draw__sash { fill: none; stroke: var(--gold-400); stroke-width: 8; stroke-linecap: round; }
.rad-draw__lid-cover { fill: #B9C0C6; }
.rad-draw__lid-rim { fill: #9AA3A8; }

/* Седьмая партия: последние ключи таблицы. */
.rad-draw__horn-line { fill: none; stroke: #C3A87C; stroke-width: 3; stroke-linecap: round; }
.rad-draw__speech { fill: #FBF7EC; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__speech-line { fill: none; stroke: #C3A87C; stroke-width: 4; stroke-linecap: round; }
.rad-draw__bean { fill: #A8B86A; }
.rad-draw__pig { fill: #EDB6B6; }
.rad-draw__pig-nose { fill: #D98080; }
.rad-draw__beast { fill: #C79A6B; }
.rad-draw__tail { fill: none; stroke: #C79A6B; stroke-width: 9; stroke-linecap: round; }
.rad-draw__leg { fill: none; stroke: #A87A4E; stroke-width: 7; stroke-linecap: round; }
.rad-draw__spot { fill: #8E5433; }
.rad-draw__shell-white { fill: #FBF7EC; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__shell-slit { fill: #D8CBB4; }
.rad-draw__shell-teeth { fill: none; stroke: #C3A87C; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__shell-rib { fill: none; stroke: #D8CBB4; stroke-width: 2.5; }
.rad-draw__coin { fill: var(--gold-400); stroke: #C98A2A; stroke-width: 2; }
.rad-draw__red-figure { fill: var(--red-600); }
.rad-draw__speed { fill: none; stroke: #B9C0C6; stroke-width: 4; stroke-linecap: round; }
.rad-draw__ball { fill: #FBF7EC; stroke: #CFC3AC; stroke-width: 2; }
.rad-draw__ball-dark { fill: #4A4034; }
.rad-draw__robe-light { fill: #4E9A85; }
.rad-draw__shaft { fill: none; stroke: #7E6A57; stroke-width: 8; stroke-linecap: round; }
.rad-draw__wheel { fill: #7E6A57; }
.rad-draw__spoke { fill: none; stroke: #E8D3B0; stroke-width: 3; }
.rad-draw__chili { fill: var(--red-500); }
.rad-draw__chili-dark { fill: var(--red-600); }
.rad-draw__heat { fill: none; stroke: var(--gold-400); stroke-width: 4; stroke-linecap: round; }
.rad-draw__roadedge { fill: none; stroke: #F7F4EF; stroke-width: 3; }
.rad-draw__side-mark { fill: none; stroke: var(--red-500); stroke-width: 8; stroke-linecap: round; }
.rad-draw__side-label { fill: var(--red-600); font-size: 15px; font-family: inherit; }
.rad-draw__wine { fill: #B33A3A; }
.rad-draw__wine-stream { fill: none; stroke: #B33A3A; stroke-width: 6; stroke-linecap: round; }
.rad-draw__lens { fill: #DCF0F8; opacity: .5; }
.rad-draw__lens-ring { fill: none; stroke: #7E6A57; stroke-width: 6; }
.rad-draw__gold { fill: var(--gold-400); }
.rad-draw__gold-top { fill: #FBD9A0; }
.rad-draw__gold-shade { fill: #E39A3E; }
.rad-draw__hair-shine { fill: none; stroke: #4A4034; stroke-width: 3; opacity: .5; }
.rad-draw__sparrow { fill: #B98A5C; }
.rad-draw__wing-dark { fill: #8E5433; }
.rad-draw__raincloud { fill: #B9C0C6; }
.rad-draw__raindrop { fill: #5EA8C9; }
.rad-draw__rainline { fill: none; stroke: #5EA8C9; stroke-width: 4; stroke-linecap: round; }
.rad-draw__porcelain { fill: #FBF7EC; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__porcelain-shade { fill: #DCD3C4; }
.rad-draw__qing { fill: #4A7FA8; }
.rad-draw__qing-line { fill: none; stroke: #4A7FA8; stroke-width: 4; stroke-linecap: round; }
.rad-draw__wing-left { fill: #B9C0C6; }
.rad-draw__wing-right { fill: #9AA3A8; }
.rad-draw__frame { fill: #8A5A3B; }
.rad-draw__leather { fill: #8E5433; }
.rad-draw__leather-line { fill: none; stroke: #6E452C; stroke-width: 3; stroke-linecap: round; }
.rad-draw__leather-cord { fill: none; stroke: #8A5A3B; stroke-width: 5; stroke-linecap: round; }
.rad-draw__stitch { fill: none; stroke: #E8D3B0; stroke-width: 3; stroke-dasharray: 6 5; }
.rad-draw__leek { fill: #6F8040; }
.rad-draw__leek-white { fill: #F1E7D6; }
.rad-draw__bell { fill: #A8916A; }
.rad-draw__bell-dark { fill: #7E6A57; }
.rad-draw__bell-line { fill: none; stroke: #7E6A57; stroke-width: 3; stroke-linecap: round; }
.rad-draw__note { fill: var(--ink-900); stroke: var(--ink-900); stroke-width: 4; stroke-linecap: round; }
.rad-draw__gust { fill: none; stroke: #B9C0C6; stroke-width: 5; stroke-linecap: round; }
.rad-draw__steamer { fill: #C3A87C; }
.rad-draw__steamer-rim { fill: #A8916A; }
.rad-draw__dumpling { fill: #FBF7EC; stroke: #DCD3C4; stroke-width: 2; }
.rad-draw__dumpling-fold { fill: none; stroke: #DCD3C4; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__horse { fill: #A87A4E; }
.rad-draw__mane { fill: #6E452C; }
.rad-draw__bone-line { fill: none; stroke: #DCD3C4; stroke-width: 3; }
.rad-draw__braid { fill: none; stroke: #4A4034; stroke-width: 9; stroke-linecap: round; opacity: .6; }
.rad-draw__ghost { fill: #E4E9EC; stroke: #C4CBD1; stroke-width: 2; }
.rad-draw__ghost-horn { fill: none; stroke: #C4CBD1; stroke-width: 6; stroke-linecap: round; }
.rad-draw__wisp { fill: none; stroke: #C4CBD1; stroke-width: 4; stroke-linecap: round; }
.rad-draw__bronze { fill: #7E8B6A; }
.rad-draw__bronze-dark { fill: #5F6B4E; }
.rad-draw__bronze-line { fill: none; stroke: #5F6B4E; stroke-width: 3; }
.rad-draw__taotie { fill: none; stroke: #E8D3B0; stroke-width: 3; opacity: .7; }
.rad-draw__fire-small { fill: var(--gold-400); }
.rad-draw__carp { fill: #E8A44C; }
.rad-draw__carp-fin { fill: #D9832A; }
.rad-draw__scale { fill: none; stroke: #D9832A; stroke-width: 3; }
.rad-draw__bubble { fill: #DCF0F8; }
.rad-draw__bird-blue { fill: #5EA8C9; }
.rad-draw__wing-blue { fill: #3E7EA0; }
.rad-draw__saltflat { fill: #EFE7D6; }
.rad-draw__saltcrack { fill: none; stroke: #D8CBB4; stroke-width: 3; }
.rad-draw__saltpile { fill: #FBF7EC; stroke: #DCD3C4; stroke-width: 2; }
.rad-draw__saltcrystal { fill: #FFFFFF; stroke: #C4CBD1; stroke-width: 2; }
.rad-draw__antler { fill: none; stroke: #8A5A3B; stroke-width: 6; stroke-linecap: round; }
.rad-draw__deer { fill: #C79A6B; }
.rad-draw__deer-spot { fill: #F1E7D6; }
.rad-draw__wheat { fill: var(--gold-400); }
.rad-draw__awn { fill: none; stroke: #E39A3E; stroke-width: 2.5; stroke-linecap: round; }
.rad-draw__fibre { fill: none; stroke: #A8B86A; stroke-width: 6; stroke-linecap: round; }
.rad-draw__yellow { fill: var(--gold-400); stroke: #E39A3E; stroke-width: 2; }
.rad-draw__yellow-dark { fill: #E39A3E; }
.rad-draw__tassel { fill: none; stroke: var(--red-500); stroke-width: 5; stroke-linecap: round; }
.rad-draw__panicle { fill: #A8B86A; }
.rad-draw__millet { fill: var(--gold-400); }
.rad-draw__ink-top { fill: #33383D; }
.rad-draw__ink-mark { fill: none; stroke: #C3A87C; stroke-width: 3; stroke-linecap: round; }
.rad-draw__soot { fill: none; stroke: #6E767E; stroke-width: 5; stroke-linecap: round; opacity: .7; }
.rad-draw__hoop { fill: #B98A5C; }
.rad-draw__embroidery { fill: var(--red-500); opacity: .8; }
.rad-draw__stitch-line { fill: none; stroke: var(--jade-500); stroke-width: 4; stroke-dasharray: 7 6; stroke-linecap: round; }
.rad-draw__frog { fill: #6F8040; }
.rad-draw__frog-belly { fill: #A8B86A; }
.rad-draw__frog-leg { fill: none; stroke: #6F8040; stroke-width: 8; stroke-linecap: round; }
.rad-draw__drum { fill: #B33A3A; }
.rad-draw__drum-head { fill: #F1E7D6; stroke: #D8CBB4; stroke-width: 2; }
.rad-draw__drum-band { fill: none; stroke: var(--gold-400); stroke-width: 6; }
.rad-draw__stud { fill: var(--gold-400); }
.rad-draw__drum-leg { fill: none; stroke: #7E6A57; stroke-width: 8; stroke-linecap: round; }
.rad-draw__mouse { fill: #B9C0C6; }
.rad-draw__mouse-nose { fill: #E4A0A0; }
.rad-draw__whisker { fill: none; stroke: #7E6A57; stroke-width: 2; stroke-linecap: round; }
.rad-draw__turtle-skin { fill: #8CA054; }
.rad-draw__shell-plate { fill: none; stroke: #6E452C; stroke-width: 3; }
.rad-draw__dragon { fill: var(--jade-500); }
.rad-draw__dragon-nose { fill: var(--jade-700); }
.rad-draw__dragon-horn { fill: #C3A87C; }
.rad-draw__dragon-mane { fill: var(--red-500); }
.rad-draw__whisker-long { fill: none; stroke: var(--jade-700); stroke-width: 4; stroke-linecap: round; }
.rad-draw__hole { fill: #4A4034; }

/* Письмо */
.rad-draw__cell { fill: none; stroke: var(--border-default); stroke-width: 2; }
.rad-draw__cellcross {
    fill: none; stroke: var(--red-500); stroke-width: 1; opacity: .35; stroke-dasharray: 5 5;
}
.rad-draw__wood { fill: #E8D3B0; stroke: #C3A87C; stroke-width: 1.5; }
.rad-draw__ferrule { fill: var(--gold-400); }
.rad-draw__ground { fill: none; stroke: var(--border-default); stroke-width: 2; stroke-linecap: round; }
.rad-draw__hint {
    fill: none; stroke: var(--red-500); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 599px) {
    .rad-card__glyph { font-size: 60px; }
    .rad-draw { width: 132px; height: 132px; }
    .rad-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
}