/* В2. Шапка как маркиза отеля. Ночь по умолчанию, день по переключателю.
   Панель выезжает из-под строки, коралловый край едет вместе с ней. Цвета только токенами, заголовочный шрифт через --f-display. */
@font-face { font-family: "Science"; font-weight: 800; font-stretch: 50% 200%; src: url(../fonts/ScienceGothic-wdth-800.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sofia"; font-weight: 800; src: url(../fonts/SofiaSansExtraCondensed-800.woff2) format("woff2"); font-display: swap; }
/* У Dela большой верхний вынос, заглавные сидели бы ниже середины кнопки */
@font-face { font-family: "Dela"; font-weight: 800; src: url(../fonts/DelaGothicOne-Regular.woff2) format("woff2"); font-display: swap; ascent-override: 106%; descent-override: 34%; }
@font-face { font-family: "Fixel"; font-weight: 500; src: url(../fonts/Fixel-Medium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Fixel"; font-weight: 700; src: url(../fonts/Fixel-Bold.woff2) format("woff2"); font-display: swap; }

/* Зарегистрированные цвета перетекают одним переходом на корне, вместе с градиентами на них */
@property --bar { syntax: "<color>"; inherits: true; initial-value: #071F26; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: #05181E; }
@property --raise { syntax: "<color>"; inherits: true; initial-value: #0C2B33; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #FFF3E0; }
@property --mute { syntax: "<color>"; inherits: true; initial-value: #B9C8C3; }
@property --teal { syntax: "<color>"; inherits: true; initial-value: #2FE6D6; }
@property --teal-ink { syntax: "<color>"; inherits: true; initial-value: #2FE6D6; }
@property --gold { syntax: "<color>"; inherits: true; initial-value: #FFC871; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #FFF3E024; }
@property --teal-tint { syntax: "<color>"; inherits: true; initial-value: #2FE6D621; }

:root {
  --bar-n: #071F26; --bar-d: #FFF8EC; --panel-n: #05181E; --panel-d: #FFFFFF; --ink-n: #FFF3E0; --ink-d: #06323A;
  /* Ночь: палитра с картинки отеля */
  --page: #04141A; --bar: var(--bar-n); --panel: var(--panel-n); --raise: #0C2B33;
  --ink: var(--ink-n); --mute: #B9C8C3; --bar-mute: var(--mute);
  --coral: #FF5A3C; --on-coral: #05161B; --on-teal: #05161B; --coral-press: #E8472B;
  --teal: #2FE6D6; --teal-ink: #2FE6D6; --coral-ink: #FF9C85; --gold: #FFC871; --hem-lit: #FFB48C;
  --line: #FFF3E024; --teal-tint: #2FE6D621; --teal-soft: #2FE6D63D; --coral-tint: #FF5A3C30; --focus: #2FE6D6; --drop: #00000099;
  --count: var(--teal-ink); --count-glow: 0 0 14px #2FE6D659; --palm: .4; --pill-line: #05161B26;
  --hem-fx: drop-shadow(0 0 3px #FF5A3CD9) drop-shadow(0 7px 15px #FF8A5475);
  --hem-off: drop-shadow(0 0 0 #FF5A3C00) drop-shadow(0 0 0 #FF8A5400);
  --plaque-glow: 0 0 22px -5px #FF5A3CB3; --glint-a: #FFFFFF2E; --glint-b: #FFFFFFE6; --sun-fx: drop-shadow(0 0 7px #FFC87173);
  --bar-shade: linear-gradient(var(--drop), transparent 12px);
  --lit: #FF7A4A14; --steel-fx: drop-shadow(0 0 16px #2FE6D638); --sheet-drop: #000000A6;
  --back: #020B0F73; --back-fx: brightness(.5) saturate(1.15);
  /* Кромка заката и сумерки, идут только во время смены темы */
  --dusk-a: #FFC48A; --dusk-b: #F0654E; --dusk-c: #3C4192; --dusk-d: #161C4E; --dusk-bar: #E58C6E; --dusk-panel: #EE9E80; --dusk-deep: #20265A;

  --gh-h: 72px; --gh-h-small: 60px; --gh-pad: 32px; --gh-sheet-x: 0px; --gh-sheet-y: 0px; --gh-top: 104px;
  --card-w: clamp(340px, 34vw, 640px); --sheet-gap: 40px; --tag-w: 186px; --lg: 46px; --nav-s: 15.5px; --nav-x: 10px; --nav-from: 1436px;
  --ease: cubic-bezier(.22, 1, .36, 1); --fall: cubic-bezier(.5, 0, .75, 0); --dusk: cubic-bezier(.45, .05, .55, .95);
  --bg-n: url(../img/hotel-night.webp); --bg-d: url(../img/day.webp);
  --hem: radial-gradient(15px 7.5px at 15px 3px, var(--coral) 98%, transparent) 0 0 / 30px 11px repeat-x, radial-gradient(15px 8.5px at 15px 3px, var(--hem-lit) 98%, transparent) 0 0 / 30px 12px repeat-x, linear-gradient(var(--coral) 0 3px, transparent 3px);
  --veil: linear-gradient(color-mix(in srgb, var(--bar) 84%, transparent) 0 0);
  /* Заголовочный шрифт. --f-k приводит размер: 16 px у Science равны 23 у Sofia и 13,5 у Dela */
  --f-display: "Science", "Fixel", sans-serif; --f-k: 1; --f-ls: .06em; --f-wdth: 94%; --f-num: 76%; --f-slot: .7em;
  /* Бар, панель и текст идут по кадрам неба в effect.js: через закат, а не через серый */
  transition: --raise 1.05s var(--dusk) .15s; transition-property: --raise, --mute, --teal, --teal-ink, --gold, --line, --teal-tint;
}
html[data-font="sofia"] { --f-display: "Sofia", "Fixel", sans-serif; --f-k: 1.44; --f-num: 100%; --f-slot: .47em; }
html[data-font="dela"] { --f-display: "Dela", "Fixel", sans-serif; --f-k: .84; --f-ls: .02em; --f-ws: .22em; --f-lh: 1.25; --f-num: 100%; --f-slot: .85em; }
/* День: полдень из первой версии */
html[data-theme="day"] {
  --page: #0B4FA8; --bar: var(--bar-d); --panel: var(--panel-d); --raise: #FFF8EC;
  --ink: var(--ink-d); --mute: #3E6166; --bar-mute: #2F5157; --on-coral: #042B32; --on-teal: #042B32;
  --teal: #12BDB4; --teal-ink: #0A6F6A; --coral-ink: #B5301A; --gold: #7A4A00; --hem-lit: #FF5A3C;
  --line: #06323A21; --teal-tint: #12BDB426; --teal-soft: #12BDB447; --coral-tint: #FF5A3C24; --focus: #06323A; --drop: #06323A14;
  --count: var(--ink); --count-glow: 0 0 0 transparent; --palm: .22;
  --hem-fx: drop-shadow(0 2px 2px #06323A4D) drop-shadow(0 12px 9px #06323A33);
  --plaque-glow: 0 0 0 0 transparent; --sun-fx: drop-shadow(0 2px 2px #06323A40);
  --back: #042B321A; --back-fx: brightness(.68) saturate(1.3);
  --lit: transparent; --steel-fx: drop-shadow(0 4px 4px #06323A38); --sheet-drop: #042B3273;
}
@media (max-aspect-ratio: 4/5) { :root { --bg-n: url(../img/hotel-night-m.webp); --bg-d: url(../img/day-m.webp); } }

html { background: var(--page); color-scheme: dark; }
html[data-theme="day"] { color-scheme: light; }
body { color: var(--ink); font: 500 16px/1.4 "Fixel", system-ui, sans-serif; }
.fill { height: 2400px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Заголовочный шрифт */
.gh-link, .gh-chip, .gh-group-t, .gh-sheet-t, .gh-card-k, .gh-c-d, .gh-c-t, .gh-news-d, .gh-av { font-family: var(--f-display); font-weight: 800; font-stretch: var(--f-wdth); line-height: 1; }
.gh-link, .gh-chip, .gh-group-t, .gh-sheet-t, .gh-card-k { letter-spacing: var(--f-ls); word-spacing: var(--f-ws, 0); text-transform: uppercase; }
.gh-c-d, .gh-c-t, .gh-news-d { font-stretch: var(--f-num); }

/* Хромовые значки */
[data-id="map"], [data-i="map"], [data-type="place"] { --steel: url(../img/icons/steel-map.webp); }
[data-id="guides"], [data-type="guide"], [data-type="term"] { --steel: url(../img/icons/steel-guides.webp); }
[data-id="news"] { --steel: url(../img/icons/steel-news.webp); }
[data-id="forum"], [data-i="forum"], [data-type="forum"] { --steel: url(../img/icons/steel-forum.webp); }
[data-id="rating"], [data-i="rating"] { --steel: url(../img/icons/steel-rating.webp); }
[data-id="tools"], [data-i="tools"], [data-type="tool"] { --steel: url(../img/icons/steel-tools.webp); }
[data-i="down"] { --steel: url(../img/icons/steel-down.webp); }
[data-i="clock"] { --steel: url(../img/icons/steel-clock.webp); }
[data-i="check"] { --steel: url(../img/icons/steel-check.webp); }
[data-i="cal"] { --steel: url(../img/icons/steel-cal.webp); }
.gh-sheet-i, .gh-tile-i, .gh-menu-i, .gh-res-i, .gh-theme-i, .gh-chip::before { background: var(--steel) center / contain no-repeat; }

/* Небо: два закреплённых слоя одного кадра, между ними кромка заката, сверху проход неона */
.sky { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: -1; overflow: hidden; isolation: isolate; background: var(--page); pointer-events: none; }
.sky i { position: absolute; inset: 0; }
.sky-p { background: center top / cover no-repeat; }
.sky-d { --src: var(--bg-d); }
.sky-n, .sky-neon { --src: var(--bg-n); }
html[data-theme="day"] .sky-d, html[data-theme="night"] .sky-n, html[data-both] .sky-p { background-image: var(--src); }
html[data-theme="day"] .sky-n, .sky-neon { opacity: 0; }
.sky-neon { mix-blend-mode: screen; filter: contrast(2.2) saturate(1.2) brightness(.86); }
.sky .sky-dusk { top: 100%; bottom: auto; height: 260%; mix-blend-mode: multiply; background: linear-gradient(transparent, var(--dusk-a) 7%, var(--dusk-b) 15%, var(--dusk-c) 29%, var(--dusk-d) 44%); }
html[data-shift] .sky i { will-change: opacity, filter, transform; }

/* Строка */
.gh-bar { background: var(--bar); }
.c-shade { --from: calc(var(--gh-pad) + var(--lg) * 4.73 - 40px); position: absolute; inset: 0; overflow: hidden; pointer-events: none; mask: linear-gradient(90deg, transparent var(--from), var(--ink) calc(var(--from) + 170px)); }
/* Настоящие тени веток со стен кадров: полоса 1600 px зациклена. Справа запас под сдвиг при прокрутке */
.c-shade i { position: absolute; inset: -12px -240px -12px -40px; background: url(palm.webp) 0 50% / 1600px auto repeat-x; opacity: var(--palm); transition: opacity 1.05s var(--dusk) .15s; animation: c-sway 9s ease-in-out infinite alternate; }
@keyframes c-sway {
  from { transform: translateX(calc(var(--sx, 0px) - 10px)) skewX(-1.2deg); }
  to { transform: translateX(calc(var(--sx, 0px) + 12px)) skewX(1.2deg); }
}

/* Логотип один на обе темы: 946×200 */
.gh-brand { position: relative; z-index: 1; width: calc(var(--lg) * 4.73); height: var(--lg); border-radius: 6px; background: url(../img/logo-steel-92.webp) left center / contain no-repeat; transition: width .25s, height .25s; }
.gh-brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gh-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 44%, var(--glint-a) 47%, var(--glint-b) 50%, var(--glint-a) 53%, transparent 56%) 130% 0 / 260% 100% no-repeat; mask: url(../img/logo-steel-92.webp) left center / contain no-repeat; animation: c-glint 1.2s ease-out .5s 1 backwards; }
@keyframes c-glint { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes c-glint2 { from { background-position: 130% 0; } to { background-position: -30% 0; } }
html[data-shift] .gh-brand::after { animation: c-glint2 .9s ease-out .55s 1 backwards; }
.gh[data-scrolled="1"] { --lg: var(--lg-s, 40px); }

.gh-nav { position: relative; z-index: 1; }
.gh-nav ul { gap: 2px; }
.gh-link { position: relative; z-index: 1; padding: 0 var(--nav-x); border-radius: 10px; color: var(--ink); font-size: calc(var(--f-k) * var(--nav-s)); transition: color .15s; }
.gh-label { display: block; transition: transform .08s; }
.gh-link[data-on="1"], .gh-link:focus-visible { color: var(--on-coral); }
/* Плашка тянется к цели передним краем, задний догоняет */
.c-plaque { position: absolute; top: 50%; left: 0; right: 100%; height: 44px; margin-top: -22px; border-radius: 10px; background: var(--coral); box-shadow: inset 0 -2px 0 var(--pill-line), var(--plaque-glow); opacity: 0; transform: scale(.94); transition: left var(--l, .28s) var(--ease), right var(--r, .28s) var(--ease), opacity .14s, transform .18s var(--ease); }
.c-plaque[data-dir="r"] { --l: .34s; --r: .2s; }
.c-plaque[data-dir="l"] { --l: .2s; --r: .34s; }
.c-plaque[data-on="1"] { opacity: 1; transform: none; }

.gh-right { position: relative; z-index: 1; gap: 6px; }
.gh-count { display: grid; grid-template-columns: auto auto auto; column-gap: 8px; align-items: center; margin-right: 8px; line-height: 1.12; }
.gh-count-v { display: contents; }
.gh-c-d { grid-row: 1 / span 2; min-width: 1.4em; text-align: right; color: var(--count); font-size: calc(var(--f-k) * 32px); text-shadow: var(--count-glow); transition: font-size .25s; }
.gh-c-w { grid-row: 1; grid-column: 2; margin-right: -4px; font-size: 13px; font-weight: 700; }
.gh-count-l { grid-row: 1; grid-column: 3; color: var(--bar-mute); font-size: 13px; }
.gh-c-t { grid-row: 2; grid-column: 2 / span 2; color: var(--gold); font-size: calc(var(--f-k) * 15px); letter-spacing: .01em; }
/* Ячейки равной ширины: цифры не толкают соседей, даже единица */
.gh-c-d i, .gh-c-t i { display: inline-block; width: var(--f-slot); font-style: normal; text-align: center; }
.gh[data-scrolled="1"] .gh-c-d { font-size: calc(var(--f-k) * 27px); }
.gh-count[data-live] { display: flex; }
.gh-count[data-live] .gh-count-v { display: inline; font-size: 15px; font-weight: 700; }
.gh-count[data-live] .gh-count-l { display: none; }

/* Кнопки строки: одна логика в обеих темах */
.gh-search-btn, .gh-theme, .gh-lang button, .gh-me, .gh-x { border-radius: 10px; color: var(--ink); transition: background-color .15s, color .15s, transform .08s; }
.gh-search-btn { font-size: 15px; font-weight: 700; }
.gh-search-btn[aria-expanded="true"], .gh-me[aria-expanded="true"] { background: var(--teal-tint); }
.gh-search-btn .gh-i { width: 22px; height: 22px; }
.gh-kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--bar-mute); font: 500 12px/1.4 "Fixel", sans-serif; }

/* Солнце и луна: уходят с поворотом, на смене вспышка */
.gh-theme { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.gh-theme-i { grid-area: 1 / 1; width: 34px; height: 34px; filter: var(--sun-fx); transition: transform .7s var(--ease), opacity .3s; }
.gh-theme-i[data-to="day"] { --steel: url(../img/icons/steel-sun.webp); }
.gh-theme-i[data-to="night"] { --steel: url(../img/icons/steel-moon.webp); }
html[data-theme="night"] .gh-theme-i[data-to="night"], html[data-theme="day"] .gh-theme-i[data-to="day"] { opacity: 0; transform: rotate(-150deg) scale(.3); }
.gh-theme::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(closest-side, var(--gold), transparent); opacity: 0; pointer-events: none; }
html[data-shift] .gh-theme::after { animation: c-flash .7s ease-out; }
@keyframes c-flash { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(1.8); } }

.gh-lang button { position: relative; min-width: 36px; color: var(--bar-mute); font-size: 14px; font-weight: 700; }
.gh-lang button[aria-pressed="true"] { color: var(--ink); }
.gh-lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 2px; background: var(--teal); }

.gh-login { padding: 0 20px; border-radius: 10px; background: var(--coral); color: var(--on-coral); font-size: 16px; font-weight: 700; box-shadow: inset 0 -2px 0 var(--pill-line), var(--plaque-glow); transition: background-color .15s, color .15s, transform .08s, box-shadow .08s; }
.gh-login-v { display: none; font-weight: 500; }

/* Аватар: ровный круг с буквой, ничего лишнего */
.gh-me { padding: 0 10px 0 6px; }
.gh-av { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: var(--on-teal); font-size: calc(var(--f-k) * 15px); transition: box-shadow .15s; }
.gh-me-n { font-size: 14px; font-weight: 700; }
.gh-me-l { color: var(--bar-mute); font-size: 12.5px; }

/* Меню профиля: маленькая маркиза со своей шапкой */
.gh-menu { top: calc(100% + 14px); width: 280px; padding: 0 0 8px; background: var(--panel); box-shadow: 0 18px 34px -14px var(--sheet-drop); clip-path: inset(0 -40px 100% -40px); transition: clip-path .22s var(--ease), opacity .1s, visibility 0s .22s; }
.gh[data-scrolled="1"] .gh-menu { top: calc(100% + 8px); }
.gh-menu[data-open="1"] { clip-path: inset(0 -40px -60px -40px); transition: clip-path .26s var(--ease), opacity .1s; }
.gh-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: var(--hem); filter: var(--hem-fx); }
.gh-menu-h { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 2px solid var(--teal); }
.gh-menu-h .gh-me-t { display: grid; }
.gh-menu-h .gh-av { width: 48px; height: 48px; font-size: calc(var(--f-k) * 20px); }
.gh-menu-h .gh-me-n { font-size: 17px; }
.gh-menu-h .gh-me-l { font-size: 14px; }
.gh-menu-a { position: relative; gap: 12px; min-height: 48px; padding: 0 16px; font-size: 16px; transition: background-color .15s; }
.gh-menu-a > span:last-child { transition: transform .16s var(--ease); }
.gh-menu-i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; transition: transform .2s var(--ease); }
.gh-menu-a[data-logout] { margin-top: 6px; border-top: 1px solid var(--line); color: var(--coral-ink); }

/* Появление. Страница уходит в тень маркизы: темнеет, но краски остаются */
.gh-back { background: var(--back); transition: opacity .22s, visibility 0s .22s; }
@supports (backdrop-filter: brightness(1)) or (-webkit-backdrop-filter: brightness(1)) {
  .gh-back { -webkit-backdrop-filter: var(--back-fx); backdrop-filter: var(--back-fx); }
}
.gh[data-open] .gh-back, .gh[data-search] .gh-back { transition: opacity .22s; }
.gh-sheet[data-open="1"] :is(.gh-sheet-t, .gh-group-t, .gh-list > li, .gh-sheet-foot > *, .c-tag, .gh-card-t, .gh-card-a) { animation: c-in .2s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes c-in { from { opacity: 0; transform: translateY(-8px); } }
.gh-sheet[data-open="1"] .gh-sheet-i { animation: c-steel .34s var(--ease) both; }
@keyframes c-steel { from { opacity: 0; transform: scale(.6) rotate(-14deg); filter: brightness(2.2); } 60% { filter: brightness(1.5); } }
.gh-sheet[data-open="1"] .c-pic { animation: c-pic .34s var(--ease) backwards; }
@keyframes c-pic { from { opacity: .55; transform: scale(1.05); } }

/* Содержимое панелей */
.gh-sheet-h { align-items: center; gap: 16px; }
.gh-sheet-i { width: 72px; height: 72px; flex: none; filter: var(--steel-fx); }
.gh-sheet-t { margin: 0; color: var(--ink); font-size: calc(var(--f-k) * 30px); }
.gh-x { display: none; }
.gh-group-t { display: flex; align-items: center; min-height: 18px; padding-bottom: 11px; border-bottom: 2px solid var(--teal); color: var(--teal-ink); font-size: calc(var(--f-k) * 12.5px); }

.gh-row { position: relative; flex-wrap: nowrap; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gh-list > li:last-child .gh-row, .gh-list > li:last-child .gh-news { border-bottom: 0; }
.gh-row > *, .gh-news > * { transition: transform .16s var(--ease); }
.gh-row-l { min-width: 0; font-size: 16px; font-weight: 500; }
.gh-row-n { flex: none; margin-left: auto; color: var(--mute); font-size: 14px; text-align: right; white-space: nowrap; }
.gh-row.is-soon .gh-row-l { color: var(--mute); }
.gh-soon { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--teal-tint); color: var(--teal-ink); font-size: 13px; font-weight: 700; }
.gh-group[data-cols="2"] .gh-list { gap: 0 32px; }
/* Крупные строки: форум, рейтинг, мапа. Рейтинг весь из «скоро», поэтому текст яркий, иначе панель выглядит выключенной */
.c-big .gh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 2px 14px; }
.c-big .gh-row-l, .c-big .is-soon .gh-row-l { color: var(--ink); font-size: 18px; font-weight: 700; }
.c-big .gh-row-n:not(:last-child), .c-big[data-cols="2"] .gh-row-n { grid-area: 2 / 1; margin: 0; text-align: left; white-space: normal; }
.c-big .gh-soon { grid-area: 1 / 2 / span 2; margin: 0; }
.c-big .gh-row-n:last-child:not(:first-child) { grid-area: 1 / 2 / span 2; margin: 0; }
.c-big[data-cols="2"] .gh-row-n:last-child { grid-area: 2 / 1; }

.gh-row::before, .gh-news::before, .gh-res-a::before, .gh-menu-a::before { content: ""; position: absolute; left: -14px; top: 50%; width: 4px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--coral); transform: scaleY(0); transition: transform .16s var(--ease); }
.gh-menu-a::before, .gh-res-a::before { left: 2px; }
.gh-row:focus-visible::before, .gh-news:focus-visible::before, .gh-menu-a:focus-visible::before, .gh-res-a:focus-visible::before { transform: none; }

.gh-news { position: relative; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.gh-news-d { color: var(--gold); font-size: calc(var(--f-k) * 21px); }
.gh-news-t { font-size: 18px; line-height: 1.3; }
.gh-st { padding: 2px 8px; border-radius: 6px; background: var(--teal-tint); color: var(--teal-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.gh-st[data-st="reported"] { background: var(--coral-tint); color: var(--coral-ink); }
.gh-st[data-st="unknown"] { background: var(--line); color: var(--mute); }

.gh-tile { position: relative; grid-template-columns: 72px minmax(0, 1fr); gap: 3px 18px; padding: 14px; transition: background-color .15s; }
.gh-tile-i { width: 72px; height: 72px; filter: var(--steel-fx); transition: transform .22s var(--ease), filter .22s; }
.gh-tile-i .gh-i { display: none; }
.gh-tile-l { align-self: end; font-size: 17px; font-weight: 700; line-height: 1.25; }
.gh-tile-n { align-self: start; color: var(--mute); font-size: 14px; line-height: 1.3; }

/* Пара картинок одного кадра, смена темы идёт вместе с небом */
.c-pic { position: relative; display: block; overflow: hidden; background: var(--raise); }
.c-pic i { position: absolute; inset: 0; background: center / cover no-repeat; transition: opacity 1.05s var(--dusk) .15s, transform .5s var(--ease); }
html[data-theme="night"] .c-pic [data-t="d"], html[data-theme="day"] .c-pic [data-t="n"] { opacity: 0; }
/* Вывеска карточки: растёт из кораллового края маркизы и заходит на картинку */
.c-tag { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--coral); color: var(--on-coral); }
.gh-card-k { font-size: calc(var(--f-k) * 12.5px); line-height: var(--f-lh, 1.05); }
/* У Sofia и Dela нет ₴, поэтому цена и все значения карточки набраны Fixel */
.gh-card-v { font: 700 34px/1.1 "Fixel", sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.gh-card-t { color: var(--mute); font-size: 14.5px; line-height: 1.35; text-wrap: balance; }
.gh-card-a, .gh-all { color: var(--ink); font-size: 15px; font-weight: 700; }
.gh-card-a .gh-i, .gh-all .gh-i { width: 18px; height: 18px; transition: transform .16s var(--ease); }
.gh-card-a span, .gh-all span { padding-bottom: 2px; background: linear-gradient(var(--coral), var(--coral)) 0 100% / 0 2px no-repeat; transition: background-size .2s var(--ease); }
.gh-esc { color: var(--mute); font-size: 13px; }

/* Поиск выезжает той же маркизой: строка во всю ширину, результаты в две колонки */
.gh-search { z-index: 2; padding: 10px var(--gh-pad) 18px; background: var(--bar-shade), linear-gradient(transparent 40%, var(--lit)), var(--panel); transform: translateY(-100%); transition: transform .2s var(--fall), opacity .1s .1s, visibility 0s .2s; }
.gh-search[data-open="1"] { transform: none; transition: transform .28s var(--ease); }
.gh-search::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; background: var(--hem); filter: var(--hem-fx); }
.gh-search-in { padding: 0 2px; border-bottom: 2px solid var(--teal); color: var(--teal-ink); transition: border-color .15s; }
.gh-search-in:focus-within { border-bottom-color: var(--coral); }
.gh-search-in .gh-i { width: 26px; height: 26px; }
.gh-search-in .gh-kbd { display: inline; }
.gh-search-input { min-height: 64px; color: var(--ink); font-size: 24px; font-weight: 500; }
.gh-search-input:focus-visible { outline: 0; }
.gh-search-input::placeholder { color: var(--mute); opacity: 1; }
.gh-sug { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.gh-search[data-q="1"] .gh-sug { display: none; }
.gh-sug button { min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--teal-tint); color: var(--ink); font-size: 15px; font-weight: 700; transition: background-color .15s, transform .08s; }
.gh-res { padding-top: 8px; column-gap: 32px; }
/* От четырёх находок две равные колонки, порядок сверху вниз сохраняется */
.gh-res:has(li:nth-child(4)) { columns: 2; }
.gh-res li { break-inside: avoid; }
.gh-res-a { position: relative; min-height: 56px; padding-left: 14px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; transition: background-color .15s; }
.gh-res-a[data-on="1"] { background: var(--raise); }
.gh-res-a[data-on="1"]::before { transform: none; }
.gh-res li:last-child .gh-res-a { border-bottom: 0; }
.gh-res-i { display: block; width: 32px; height: 32px; flex: none; }
.gh-res-y { order: 1; flex: none; margin-left: auto; color: var(--teal-ink); font-size: 13px; }
.gh-res mark { background: var(--coral-tint); box-shadow: inset 0 -2px 0 var(--coral); }
.gh-res-none { padding: 14px 0; color: var(--mute); }

.gh-toast { border-radius: 10px; background: var(--ink); color: var(--bar); font-size: 15px; font-weight: 700; transition: opacity .18s, transform .22s var(--ease), visibility 0s .22s; }
.gh-toast[data-on="1"] { transition: opacity .18s, transform .22s var(--ease); }

@media (hover: hover) {
  .gh-link:hover { color: var(--on-coral); }
  .gh-search-btn:hover, .gh-theme:hover, .gh-lang button:hover, .gh-me:hover, .gh-x:hover { background: var(--teal-tint); }
  .gh-lang button:hover { color: var(--ink); }
  .gh-theme:hover .gh-theme-i { transform: rotate(18deg) scale(1.08); }
  .gh-login:hover { background: var(--teal); color: var(--on-teal); }
  .gh-me:hover .gh-av { box-shadow: 0 0 0 2px var(--coral); }
  .gh-brand:hover::after { background-position: -30% 0; transition: background-position .9s ease-out; }
  .gh-row:hover > .gh-row-l, .c-big .gh-row:hover > .gh-row-n:not(:last-child), .c-big[data-cols="2"] .gh-row:hover > .gh-row-n, .gh-news:hover > :not(.gh-st), .gh-menu-a:hover > span:last-child { transform: translateX(8px); }
  .gh-row:hover::before, .gh-news:hover::before, .gh-menu-a:hover::before, .gh-res-a:hover::before { transform: none; }
  .gh-menu-a:hover, .gh-res-a:hover, .gh-tile:hover { background: var(--raise); }
  .gh-menu-a:hover .gh-menu-i { transform: rotate(-6deg) scale(1.1); }
  .gh-tile:hover .gh-tile-i { transform: translateY(-3px) rotate(-5deg) scale(1.06); filter: brightness(1.2); }
  .gh-sug button:hover, .gh-chip:hover { background: var(--teal-soft); }
  .gh-chip[data-on="1"]:hover { background: var(--coral); }
  .gh-card:hover .gh-card-a .gh-i, .gh-all:hover .gh-i { transform: translateX(4px); }
  .gh-card:hover .gh-card-a span, .gh-all:hover span { background-size: 100% 2px; }
  .gh-card:hover .c-pic i { transform: scale(1.035); }
}

/* Нажатие сильнее наведения, поэтому стоит после него. Плашка под разделом темнеет вместе с подписью */
.gh-link:active .gh-label { transform: translateY(1px); }
.gh-nav:has(.gh-link:active) .c-plaque { background: var(--coral-press); box-shadow: none; }
.gh-search-btn:active, .gh-theme:active, .gh-lang button:active, .gh-x:active, .gh-sug button:active, .gh-me:active { transform: translateY(1px); background: var(--teal-soft); }
.gh-login:active { transform: translateY(1px); background: var(--coral-press); color: var(--on-coral); box-shadow: none; }
.gh-me:active .gh-av { box-shadow: 0 0 0 2px var(--coral-press); }
.gh-tile:active, .gh-res-a:active, .gh-menu-a:active { background: var(--teal-tint); }
.gh-tile:active .gh-tile-i { transform: scale(.97); }
.gh-row:active::before, .gh-news:active::before, .gh-res-a:active::before, .gh-menu-a:active::before { transform: none; }
.gh-card-a:active .gh-i, .gh-all:active .gh-i { transform: translateX(6px); }
.gh-brand:active { transform: translateY(1px); }

/* Компьютер: маркиза. Полотно одной высоты для всех разделов, сцена не прыгает */
@media (min-width: 981px) {
  .gh-sheets { height: var(--sheet-h, 460px); background: var(--bar-shade), linear-gradient(transparent 60%, var(--lit)), var(--panel); transform: translateY(-100%); transition: transform .2s var(--fall); }
  .gh[data-open] .gh-sheets { transform: none; box-shadow: 0 -40px 0 var(--panel); transition: transform .32s cubic-bezier(.2, 1.2, .4, 1); }
  .gh[data-fit] .gh-card { align-self: start; }
  .gh-sheets::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; background: var(--hem); filter: var(--hem-fx); transform-origin: top; }
  /* Край маркизы вздрагивает, когда полотно садится */
  .gh[data-open] .gh-sheets::after { animation: c-hem .34s var(--ease); }
  .gh-sheet { top: 0; left: 0; right: 0; min-height: var(--sheet-h, 0px); transition: opacity .05s, visibility 0s .05s; }
  .gh-sheet[data-open="1"] { transition: none; }
  .gh:not([data-open]) .gh-sheet { transition: opacity .16s, visibility 0s .2s; }
  .gh-sheet-in { grid-template-columns: minmax(0, 1fr) var(--card-w); grid-template-rows: auto 1fr; gap: 0 var(--sheet-gap); min-height: inherit; }
  .gh-sheet-h { display: flex; grid-area: 1 / 1; padding: 14px 0 12px var(--gh-pad); }
  .gh-groups { grid-area: 2 / 1; gap: 32px; padding: 0 0 22px var(--gh-pad); }
  .gh-group { display: flex; flex-direction: column; min-width: 0; }
  /* Строки делят всю высоту полотна поровну: пустоты снизу нет */
  .gh-list { flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); align-items: stretch; }
  .gh-list > li { display: grid; min-width: 0; }
  /* Гайды: одна решётка из пяти рядов на три колонки, все линии совпадают.
     Первая колонка заканчивается ссылкой, у двух пунктов «скоро» в третьей по два ряда */
  .gh-sheet[data-id="guides"] .gh-list { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .gh-sheet[data-id="guides"] .gh-group:last-child li:nth-child(-n + 2) { grid-row: span 2; }
  .gh-list > .c-all { display: flex; align-items: center; }
  /* Шесть мест в две колонки рядом с тремя слоями: все три ряда на одной высоте */
  .gh-sheet[data-id="map"] .gh-groups { grid-auto-flow: row; grid-template-columns: 2fr 1fr; }
  .gh-sheet[data-id="map"] .gh-group:first-child .gh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .gh-sheet[data-id="map"] .gh-group:first-child li:nth-last-child(2) .gh-row { border-bottom: 0; }
  .c-big[data-cols="2"] li:nth-last-child(2) .gh-row { border-bottom: 0; }
  .gh-sheet[data-id="forum"] .gh-row, .gh-sheet[data-id="rating"] .gh-row, .gh-sheet[data-id="map"] .gh-row { min-height: 72px; }
  /* Рейтинг читается как таблица: название, что считаем, срок */
  .gh-sheet[data-id="rating"] .gh-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
  .gh-sheet[data-id="rating"] .gh-row-l { font-size: 20px; }
  .gh-sheet[data-id="rating"] .gh-row-n:not(:last-child) { grid-area: 1 / 2; font-size: 15px; }
  .gh-sheet[data-id="rating"] .gh-soon { grid-area: 1 / 3; }

  /* Новини: дата вывеской, заголовок крупно */
  .gh-news { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 20px; padding: 0; }
  .gh-news-t { font-size: 20px; font-weight: 700; line-height: 1.25; }

  /* Інструменти: две на две, линии крестом */
  .gh-group[data-kind="tiles"] .gh-list { gap: 0; grid-auto-rows: minmax(0, 1fr); }
  .gh-group[data-kind="tiles"] li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .gh-group[data-kind="tiles"] li:nth-child(odd) { border-right: 1px solid var(--line); }
  .gh-tile { align-content: center; }
  .gh-tile-i { align-self: center; }

  .gh-sheet-foot { position: absolute; top: 28px; right: calc(var(--card-w) + var(--sheet-gap)); min-height: 44px; gap: 24px; }
  .gh-card { position: relative; grid-area: 1 / 2 / -1 / 3; display: grid; grid-template-columns: var(--tag-w) minmax(0, 1fr); grid-template-rows: var(--pic-h, calc(var(--card-w) * .5625)) auto 1fr; column-gap: 20px; overflow: hidden; }
  .c-pic { grid-column: 1 / -1; grid-row: 1; }
  .c-tag { grid-column: 1; grid-row: 2 / -1; margin-top: -30px; padding: 14px 16px 16px; }
  .gh-card-t { grid-column: 2; grid-row: 2; padding: 15px var(--gh-pad) 2px 0; }
  .gh-card-a { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; margin-bottom: 6px; }
  .gh-card-a::after { content: ""; position: absolute; inset: 0; }
}
@keyframes c-hem { 0% { transform: scaleY(.5); } 60% { transform: scaleY(1.4); } }
/* Неон на маркизе вздрагивает вместе с неоном на фасаде. Рассвет просто гасит свечение */
.gh::after, .gh-sheets::after { transition: filter 1.05s var(--dusk) .15s; }
html[data-shift="night"] :is(.gh-sheets, .gh)::after { animation: c-neon 1.2s linear; }
@keyframes c-neon { 0%, 52% { filter: var(--hem-off); } 60% { filter: var(--hem-fx); } 67% { filter: var(--hem-off); } 78%, 100% { filter: var(--hem-fx); } }
/* Панель не помещается в окно: скролл внутри полотна */
.gh[data-tall][data-open] .gh-sheets { height: calc(100vh - var(--gh-h)); overflow-y: auto; }
.gh[data-tall][data-open] .gh-sheets::after { display: none; }

/* Ширины. Подписи разделов целиком. Пороги строки по замерам: на нижней границе каждой ступени до отсчёта остаётся не меньше 12 px, а запас выше неё делят между собой разделы (--nav-from), чтобы перед отсчётом не было дыры */
.gh-nav ul { gap: clamp(2px, calc((100vw - var(--nav-from) + var(--f-slack, 0px)) / 6), 18px); }
/* Sofia, Dela и английские подписи уже: запас начинается раньше */
html[data-font="sofia"], html[data-font="dela"], html[lang="en"] { --f-slack: 90px; }
/* У Dela нет оси ширины: на узкой строке она не сжимается вслед за Science */
@media (max-width: 1170px) { html[data-font="dela"] { --f-slack: 0px; } }
@media (max-width: 1549px) { .gh-search-btn { padding: 0; } .gh-bar .gh-search-t, .gh-bar .gh-kbd { display: none; } }
@media (min-width: 1550px) { :root { --nav-from: 1550px; } }
@media (min-width: 1690px) { :root { --nav-from: 1690px; } .gh-login-v { display: inline; } .gh-login .gh-i { display: block; } }
@media (min-width: 1700px) {
  :root { --card-w: 600px; --sheet-gap: 56px; --tag-w: 244px; }
  .gh-groups { gap: 44px; }
  .gh-row-l { font-size: 17px; }
  .gh-row-n { font-size: 15px; }
  .gh-tile { grid-template-columns: 96px minmax(0, 1fr); padding: 14px 20px; }
  .gh-tile-i { width: 96px; height: 96px; }
  .gh-tile-l { font-size: 19px; }
  .gh-tile-n { font-size: 15px; }
}
@media (min-width: 1840px) {
  :root { --nav-from: 1840px; --gh-pad: 40px; --nav-s: 16.5px; --nav-x: 14px; --f-wdth: 100%; }
  .gh-bar { gap: 36px; }
}
@media (max-width: 1589px) { .gh-me .gh-me-t { display: none; } .gh-me { padding: 0 5px; border-radius: 50%; } }
@media (max-width: 1435px) {
  :root { --nav-from: 1346px; --gh-pad: 24px; --sheet-gap: 32px; --lg: 42px; --nav-s: 15px; --f-wdth: 92%; }
  .gh-bar { gap: 18px; }
  .gh-right { gap: 2px; }
  .gh-count { margin-right: 4px; }
}
@media (max-width: 1345px) {
  :root { --nav-from: 1226px; --lg: 38px; --lg-s: 36px; --nav-s: 14px; --nav-x: 8px; --f-wdth: 86%; }
  .gh-count-l { display: none; }
  .gh-bar { gap: 12px; }
}
@media (max-width: 1300px) {
  :root { --card-w: 30vw; }
  .gh-groups { gap: 24px; }
  .gh-card-v { font-size: 30px; }
}
@media (min-width: 981px) and (max-width: 1300px) {
  /* Узкая карточка: вывеска на картинке, текст под ней */
  .gh-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--pic-h, calc(var(--card-w) * .5625)) auto auto 1fr; }
  .c-tag { grid-row: 2; justify-self: start; margin-top: -34px; padding: 10px 18px 12px 16px; }
  .gh-card-t { grid-column: 1; grid-row: 3; padding: 10px 16px 0; }
  .gh-card-a { grid-column: 1; grid-row: 4; margin: 0 0 2px 16px; }
  .gh-groups[data-n="3"] .gh-row { flex-wrap: wrap; row-gap: 0; align-content: center; }
  .gh-groups[data-n="3"] .gh-row-n { margin-left: 0; flex-basis: 100%; text-align: left; }
  .gh-groups[data-n="3"] .gh-soon { margin-left: 0; }
}
@media (max-width: 1225px) {
  :root { --nav-from: 1171px; }
  .gh-count { column-gap: 5px; margin-right: 0; }
  .gh-c-d, .gh[data-scrolled="1"] .gh-c-d { font-size: calc(var(--f-k) * 24px); }
  .gh-c-t { display: none; }
  .gh-c-w { grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 1170px) {
  :root { --nav-from: 1017px; --gh-pad: 16px; --card-w: 300px; --sheet-gap: 24px; --lg: 33px; --lg-s: 33px; --nav-s: 13px; --nav-x: 6px; --f-wdth: 80%; }
  .gh-bar { gap: 8px; }
  .gh-lang button { min-width: 32px; }
  .gh-login { padding: 0 12px; font-size: 15px; }
}
@media (min-width: 981px) and (max-width: 1170px) { .gh-card-v { font-size: 28px; } }
@media (min-width: 981px) and (max-width: 1016px) {
  :root { --nav-from: 981px; --lg: 30px; --lg-s: 30px; --nav-s: 12.5px; --nav-x: 5px; --f-wdth: 74%; }
  .gh-bar { gap: 6px; }
}

/* Телефон и планшет */
@media (max-width: 980px) {
  :root { --gh-pad: 16px; --lg: 32px; --lg-s: 32px; }
  /* Ссылка 44 px в высоту, логотип внутри 32 */
  .gh-brand { height: 44px; background-size: auto var(--lg); }
  .gh-brand::after { mask-size: auto var(--lg); }
  .gh::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; background: var(--hem); filter: var(--hem-fx); }
  /* Тень одна на бар и чипы, поэтому неподвижная. Выровнена по высоте бара 52 px */
  .c-shade { display: none; }
  .gh-bar { z-index: 4; gap: 8px; background: var(--veil), url(palm.webp) -300px 0 / auto 112px repeat-x, var(--bar); }
  .gh-chips { gap: 6px; padding-right: 0; background: var(--veil), url(palm.webp) -300px -52px / auto 112px repeat-x, var(--bar); }
  .gh-right { gap: 0; }
  .gh-right .gh-theme { display: none; }
  .gh-count { margin-right: 2px; }
  .gh-c-d, .gh[data-scrolled="1"] .gh-c-d { min-width: 0; font-size: calc(var(--f-k) * 21px); }
  .gh-c-w { font-size: 14px; }
  .gh-count[data-live] .gh-count-v { max-width: 80px; font-size: 14px; line-height: 1.1; white-space: normal; }
  .gh-search-btn .gh-i { width: 24px; height: 24px; }
  .gh-login { padding: 0 14px; }

  .gh-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 8px; border-radius: 10px; background: var(--teal-tint); color: var(--ink); font-size: max(14px, calc(var(--f-k) * 14px)); transition: background-color .14s, color .14s, transform .08s; }
  .gh-chip::before { content: ""; width: 26px; height: 26px; flex: none; }
  .gh-chip[data-on="1"] { background: var(--coral); color: var(--on-coral); box-shadow: inset 0 -2px 0 var(--pill-line); }
  .gh-chip:active { transform: translateY(1px); background: var(--teal); color: var(--on-teal); }
  /* Конец ленты закреплён: тема и язык всегда на виду, чипы уходят под него. Язык здесь одной кнопкой: подпись это тот, на который переключит */
  .c-end { position: sticky; right: 0; z-index: 1; display: inline-flex; align-items: center; flex: none; margin-left: auto; padding: 0 8px 0 18px; align-self: stretch; background: linear-gradient(90deg, transparent, var(--bar) 14px); }
  .gh-chips .gh-lang { display: inline-flex; flex: none; }
  .gh-chips .gh-lang button { min-width: 44px; color: var(--ink); }
  .gh-chips .gh-lang [aria-pressed="true"] { display: none; }

  .gh-sheet { background: var(--panel); transform: translateY(-100%); transition: transform .2s var(--fall), visibility 0s .2s, opacity 0s .2s; }
  .gh-sheet[data-open="1"] { transform: none; transition: transform .3s var(--ease); }
  .gh-sheet-in { gap: 0; }
  /* Заголовок раздела с кнопкой закрытия едет вместе с прокруткой панели */
  .gh-sheet-h { position: sticky; top: 0; z-index: 3; display: flex; gap: 10px; order: -1; padding: 16px 8px 8px 16px; background: var(--panel); }
  .gh-sheet-i { width: 44px; height: 44px; }
  .gh-sheet-t { flex: 1; min-width: 0; font-size: calc(var(--f-k) * 22px); }
  .gh-x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--teal-tint); }
  .gh-x .gh-i { width: 22px; height: 22px; }
  /* Картинка карточки встаёт под заголовок, вывеска на ней, текст карточки идёт после пунктов */
  .gh-card { display: contents; }
  .c-pic { order: 0; height: min(clamp(170px, 46vw, 280px), 40vh); }
  .c-tag { order: 1; justify-self: start; margin-top: -46px; padding: 12px 20px 13px 16px; }
  .gh-card-k { font-size: max(14px, calc(var(--f-k) * 13px)); }
  .gh-card-v { font-size: 30px; }
  .gh-groups { order: 2; padding: 22px 16px 8px; gap: 22px; }
  .gh-card-t { order: 3; padding: 14px 16px 2px; font-size: 15px; }
  .gh-card-a { order: 4; margin: 0 16px 4px; }
  .gh-sheet-foot { padding: 0 16px 28px; }
  .gh-group-t { font-size: max(14px, calc(var(--f-k) * 13.5px)); }
  .gh-row { min-height: 48px; padding: 8px 0; }
  .gh-soon, .gh-st { font-size: 14px; }
  .gh-news { grid-template-columns: 62px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; }
  .gh-news-t { font-size: 16px; }
  .gh-news-d { font-size: calc(var(--f-k) * 17px); }
  .gh-group[data-kind="tiles"] .gh-list { gap: 0; }
  .gh-group[data-kind="tiles"] li + li { border-top: 1px solid var(--line); }
  .gh-tile { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 14px; margin: 0 -16px; padding: 12px 16px; }
  .gh-tile-i { width: 56px; height: 56px; }
  .gh-tile-n { font-size: 14px; }

  .gh-search { padding: 4px 16px 12px; }
  .gh-sug button { min-height: 44px; }
  .gh-search-in .gh-kbd { display: none; }
  .gh-search-input { min-height: 52px; font-size: 18px; }
  .gh-res { display: block; }
  .gh-res-a { font-size: 16px; }
  .gh-res-y { font-size: 14px; }
  .gh-menu, .gh[data-scrolled="1"] .gh-menu { top: calc(100% + 4px); }
  html.gh-sheet-open { overflow: hidden; }
}
@media (min-width: 640px) and (max-width: 980px) {
  .gh-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .gh-groups[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .gh-group[data-cols="2"] .gh-list, .gh-group[data-kind="tiles"] .gh-list, .gh-groups[data-n="3"] .gh-group:last-child .gh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; display: grid; }
  .gh-groups[data-n="3"] .gh-group:last-child { grid-column: 1 / -1; }
}
@media (max-width: 379px) {
  :root { --lg: 28px; --lg-s: 28px; }
  .gh-login { padding: 0 10px; font-size: 15px; }
}
@media (max-width: 340px) { .gh-c-w { display: none; } }