/* «Живой макет» Farabi Hub — слой поверх 3D: подписи, карточки статусов, подсказка, панель зоны.
   Цвета — переменные, чтобы встать и в пульт (/os/map), и в сайт. */
.twin-root {
  --tw-ink: #17142e; --tw-ink2: #55516f; --tw-glass: rgba(255,255,255,.84); --tw-glass-line: rgba(255,255,255,.95);
  --tw-shadow: 0 8px 22px rgba(23,20,46,.16); --tw-accent: #6c63ff;
  --tw-bg: radial-gradient(120% 90% at 50% 35%, #fbfaf8 0%, #f1efeb 55%, #e7e4ef 100%);
  position: relative; overflow: hidden; background: var(--tw-bg); user-select: none; -webkit-user-select: none;
  font-family: inherit; color: var(--tw-ink); transition: background .8s ease;
}
.twin-root[data-dark="1"] {
  --tw-bg: radial-gradient(120% 90% at 50% 30%, #3b3870 0%, #232046 50%, #141228 100%);
  --tw-glass: rgba(30,27,58,.82); --tw-glass-line: rgba(255,255,255,.16); --tw-ink: #f1effc; --tw-ink2: #c4c0e2;
  --tw-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.twin-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; }
.twin-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--tw-accent); }
.twin-overlay { position: absolute; inset: 0; pointer-events: none; }

.twin-label, .twin-card {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; appearance: none; font: inherit; text-align: left;
  border: 1px solid var(--tw-glass-line); background: var(--tw-glass); color: var(--tw-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--tw-shadow);
  white-space: nowrap; will-change: transform;
}
.twin-label { display: grid; gap: 0; padding: 6px 11px; border-radius: 12px; }
.twin-label b { font-size: 13px; font-weight: 700; line-height: 1.2; }
.twin-label span { font-size: 11.5px; color: var(--tw-ink2); line-height: 1.25; }
.twin-label.q, .twin-card.q { border: 1.5px dashed var(--tw-accent); }
.twin-label.q b::after { content: " ?"; color: var(--tw-accent); }
.twin-label::after, .twin-card::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 7px; margin-left: -1px; background: var(--tw-glass-line);
}

.twin-card { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: center; padding: 7px 12px 7px 10px; border-radius: 13px; }
.twin-card i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 25%, transparent), 0 0 14px var(--tone); position: relative; }
.twin-card.tone-problem i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--tone); animation: twin-ping 1.6s cubic-bezier(.2,.7,.3,1) infinite; }
.twin-card b { font-size: 13px; font-weight: 700; line-height: 1.2; }
.twin-card span { font-size: 11.5px; line-height: 1.25; color: var(--tw-ink2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.twin-card.sel, .twin-card:hover, .twin-label:hover { outline: 2px solid var(--tone, var(--tw-accent)); outline-offset: 1px; }
/* в обзоре — компактно: точка и имя зоны; подробность — при наведении и выборе (полный текст в панели) */
.twin-card span { display: none; } .twin-card i { grid-row: auto; } .twin-card:hover span, .twin-card.sel span { display: block; grid-column: 2; }
.twin-card:hover, .twin-card.sel { z-index: 2; }
@keyframes twin-ping { from { transform: scale(.6); opacity: .9 } to { transform: scale(2.2); opacity: 0 } }

.twin-tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 6px 10px; border-radius: 10px;
  background: #17142e; color: #fff; display: grid; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.twin-tip b { font-weight: 700; } .twin-tip span { color: #cfcbea; font-size: 11.5px; }
.twin-tip[hidden] { display: none; }

@media (max-width: 760px) {
  .twin-label { padding: 4px 8px; } .twin-label span { display: none; }
  .twin-card { padding: 5px 10px 5px 8px; grid-template-columns: auto auto; } .twin-card span { display: none; } .twin-card i { grid-row: auto; } .twin-card b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .twin-card.tone-problem i::after { animation: none; } .twin-root { transition: none; } }

/* ── страница макета: панель, переключатели, легенда (демо и /os/map) ── */
.tw-page { position: relative; width: 100%; height: 100%; min-height: 420px; --tw-accent: #6c63ff; --tw-night: #1c1136; font-family: inherit; }
.tw-stage { position: absolute; inset: 0; }
.tw-bar { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; z-index: 3; }
.tw-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(23,20,46,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tw-seg button, .tw-btn { appearance: none; border: 0; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; color: #55516f; background: transparent; padding: 9px 15px; border-radius: 999px; cursor: pointer; }
.tw-seg button[aria-pressed="true"] { background: var(--tw-night); color: #fff; }
.tw-btn { background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(23,20,46,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #17142e; }
.tw-btn[aria-pressed="true"] { background: var(--tw-night); color: #fff; }
.tw-seg button:focus-visible, .tw-btn:focus-visible, .tw-panel button:focus-visible, .tw-panel a:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
.tw-btn[aria-expanded="true"] { background: var(--tw-night); color: #fff; }
/* время суток, сезон, кино — выпадающая панель под кнопкой */
.tw-sky { position: absolute; top: 62px; left: 14px; z-index: 4; display: grid; gap: 10px; padding: 12px; width: min(360px, calc(100% - 28px)); box-sizing: border-box;
  border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(23,20,46,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #17142e; }
.tw-sky[hidden] { display: none; }
.tw-sky-row { display: grid; gap: 6px; }
.tw-sky-row > span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a86a6; }
.tw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-chips button { appearance: none; border: 1px solid rgba(23,20,46,.1); background: #fff; color: #17142e; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.tw-chips button[aria-pressed="true"] { background: var(--tw-night); border-color: var(--tw-night); color: #fff; }
.tw-cine { appearance: none; border: 0; border-radius: 12px; padding: 10px 12px; background: linear-gradient(135deg, #2d2a5e, #6c63ff); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; }
.tw-chips button:focus-visible, .tw-cine:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
.tw-page.walking .tw-sky { display: none; }

.tw-panel { position: absolute; top: 14px; right: 14px; bottom: 54px; width: min(360px, 34vw); z-index: 3; display: flex; flex-direction: column;
  border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 14px 36px rgba(23,20,46,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #17142e; overflow: hidden; }
.tw-panel-in { overflow: auto; padding: 18px 18px 20px; display: grid; gap: 10px; align-content: start; }
.tw-grip { display: none; }
.tw-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tw-accent); }
.tw-panel h2 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; text-transform: none; color: #17142e; font-weight: 700; }
.tw-sub { margin: 0; font-size: 14px; line-height: 1.45; color: #55516f; }
.tw-zones, .tw-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tw-zones button { width: 100%; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 10px; align-items: center; text-align: left; appearance: none; cursor: pointer;
  border: 1px solid rgba(23,20,46,.09); background: #fff; border-radius: 12px; padding: 9px 12px; font: inherit; color: inherit; }
.tw-zones button:hover { border-color: var(--c); }
.tw-zones i, .tw-cards i, .tw-pill i, .tw-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); display: inline-block; }
.tw-zones b { display: block; font-size: 14.5px; } .tw-zones em, .tw-cards em { display: block; font-style: normal; font-size: 12.5px; color: #8a86a6; }
.tw-cards li { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(23,20,46,.09); background: #fff; font-size: 14px; }
.tw-cards li i { margin-top: 5px; } .tw-cards li.empty { display: block; color: #8a86a6; }
.tw-cards a { color: inherit; text-decoration: none; } .tw-cards a:hover { text-decoration: underline; }
.tw-pill { display: inline-flex; width: fit-content; gap: 7px; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.tw-counts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.tw-counts span { display: grid; padding: 8px 6px; border-radius: 10px; background: #f4f3fb; font-size: 11px; color: #55516f; text-align: center; line-height: 1.2; }
.tw-counts b { font-size: 18px; color: #17142e; font-variant-numeric: tabular-nums; }
.tw-back { appearance: none; border: 0; background: none; padding: 0; color: var(--tw-accent); font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; justify-self: start; }
.tw-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-link { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: var(--tw-night); color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 600; }
button.tw-link { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }
.tw-ex { margin: 4px 0 0; font-size: 12px; color: #8a86a6; border-top: 1px dashed rgba(23,20,46,.15); padding-top: 8px; }
.tw-ask { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--tw-accent); font-size: 14px; }
.tw-about { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }        /* описание подписи витрины (building.json labels[].about) */
/* кампус КазНУ (волна 8, этап 5): карточка корпуса и подпись плана облёта */
.tw-kzcard { margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.tw-kzcard > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 12px; border-radius: 12px; background: rgba(23,20,46,.05); }
.tw-kzcard dt { color: #6b6788; font-size: 13px; }
.tw-kzcard dd { margin: 0; font-weight: 650; font-size: 14px; text-align: right; }
.tw-kzsrc { margin: 10px 0 0; font-size: 12px; color: #8a86a6; border-top: 1px dashed rgba(23,20,46,.15); padding-top: 8px; }
.tw-kzcap { position: absolute; left: 18px; bottom: 58px; z-index: 5; max-width: min(430px, calc(100% - 36px)); padding: 11px 16px 12px; border-radius: 16px; background: rgba(23,20,46,.74); color: #fff; pointer-events: none; animation: tw-kzcap-in .5s ease both; }
.tw-kzcap b { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
.tw-kzcap span { display: block; margin-top: 3px; font-size: 13px; color: #e7e4fb; line-height: 1.4; }
.tw-kzcap em { display: block; margin-top: 5px; font-style: normal; font-size: 11px; color: #b9b6cc; }
@keyframes tw-kzcap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tw-kzcap { animation: none; } }
@media (max-width: 760px) { .tw-kzcap { left: 12px; right: 12px; bottom: auto; top: 64px; max-width: none; } }
.tw-foot { position: absolute; left: 14px; right: calc(min(360px, 34vw) + 28px); bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; z-index: 2; font-size: 12px; color: #55516f; pointer-events: none; }
.tw-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tw-legend span { display: inline-flex; gap: 6px; align-items: center; }
.tw-page[data-lens="vitrina"] .tw-legend { display: none; }
.tw-note { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.7); }
.twin-root[data-dark="1"] ~ .tw-foot .tw-note, .twin-root[data-dark="1"] ~ .tw-foot .tw-legend { background: rgba(30,27,58,.75); color: #e9e6fb; }

@media (max-width: 760px) {
  .tw-bar { top: 10px; left: 10px; right: 10px; }
  .tw-seg button, .tw-btn { padding: 8px 12px; font-size: 13px; }
  .tw-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 34%; border-radius: 20px 20px 0 0; transition: max-height .35s cubic-bezier(.22,1,.36,1); }
  .tw-panel.open { max-height: 72%; }
  .tw-grip { display: block; appearance: none; border: 0; background: none; width: 100%; height: 18px; cursor: pointer; position: relative; flex: none; }
  .tw-grip::after { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(23,20,46,.22); }
  .tw-panel-in { padding: 4px 16px 18px; }
  .tw-foot { right: 10px; left: 10px; bottom: calc(34% + 8px); }
  .tw-legend { display: none; }
  .tw-counts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── люди: подписи своих над головой (только «Пульт»), тост «в хабе», блок и карточка в панели ── */
.twin-npc { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; appearance: none; font: inherit; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--tw-glass-line); background: var(--tw-glass); color: var(--tw-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--tw-shadow); white-space: nowrap; will-change: transform; }
.twin-npc i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--tw-accent); color: #fff; font-style: normal; font-weight: 700; font-size: 11px; }
.twin-npc b { font-size: 12px; font-weight: 700; }
.twin-npc span { display: none; font-size: 11px; color: var(--tw-ink2); }
.twin-npc:hover span, .twin-npc.fresh span { display: inline; }
.twin-npc.fresh { outline: 2px solid var(--tw-accent); outline-offset: 2px; z-index: 2; }
.twin-npc.fresh i { animation: twin-glow 1.3s ease-in-out infinite; }
.twin-npc::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 2px; height: 6px; margin-left: -1px; background: var(--tw-glass-line); }
@keyframes twin-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tw-accent) 30%, transparent); } }
.tw-toast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4; display: inline-flex; gap: 10px; align-items: center;
  padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--tw-night); color: #fff; font-size: 14px; box-shadow: 0 10px 26px rgba(23,20,46,.28); transition: opacity .3s ease, transform .3s ease; }
.tw-toast[hidden] { display: none; }
.tw-toast i { width: 26px; height: 26px; border-radius: 50%; background: var(--tw-accent); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.tw-toast.out { opacity: 0; transform: translate(-50%, -8px); }
.tw-people { display: grid; gap: 9px; padding: 12px; border-radius: 14px; background: #f4f3fb; }
.tw-ppl-head { display: flex; gap: 10px; align-items: center; }
.tw-ppl-head b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #17142e; line-height: 1; }
.tw-ppl-head span { display: grid; font-size: 14px; font-weight: 600; line-height: 1.25; color: #17142e; }
.tw-ppl-head em { font-style: normal; font-weight: 500; font-size: 12px; color: #8a86a6; }
.tw-ppl { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-ppl button { appearance: none; display: inline-flex; gap: 6px; align-items: center; border: 1px solid rgba(23,20,46,.1); background: #fff; border-radius: 999px;
  padding: 3px 11px 3px 3px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #17142e; }
.tw-ppl button:hover { border-color: var(--tw-accent); }
.tw-ppl i, .tw-who > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tw-accent); color: #fff; font-style: normal; font-weight: 700; font-size: 12px; flex: none; }
.tw-demo { appearance: none; justify-self: start; border: 1.5px dashed var(--tw-accent); background: #fff; color: var(--tw-accent); border-radius: 999px; padding: 7px 13px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.tw-who { display: flex; gap: 12px; align-items: center; }
.tw-who > i { width: 46px; height: 46px; font-size: 20px; }
.tw-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tw-facts li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(23,20,46,.09); font-size: 14px; }
.tw-facts span { color: #8a86a6; } .tw-facts b { text-align: right; }
@media (max-width: 760px) { .tw-toast { top: 58px; } .twin-npc span { display: none !important; } }
@media (max-width: 760px) { .tw-sky { top: 54px; left: 10px; width: calc(100% - 20px); } }
@media (prefers-reduced-motion: reduce) { .twin-npc.fresh i { animation: none; } .tw-toast { transition: none; } }

/* ── прогулка от первого лица: подписи макета прячем, сверху — где я, снизу — подсказка, кнопки выхода и VR ── */
.twin-walking .twin-overlay, .twin-walking .twin-tip { display: none !important; }
.twin-walking .twin-canvas { cursor: grab; } .twin-walking .twin-canvas:active { cursor: grabbing; }
.twin-hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; font-family: inherit; }
.twin-hud[hidden] { display: none; }
.twin-hud-room { position: absolute; top: 14px; left: 14px; display: grid; justify-items: start; gap: 1px; padding: 8px 18px;      /* слева сверху: по центру закрывала буквы FARABI HUB в первом кадре прогулки (19.10) */
  border-radius: 16px; background: rgba(23,20,46,.72); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left; max-width: min(420px, 62vw); }
.twin-hud-room b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .twin-hud-room span { font-size: 12.5px; color: #cfcbea; }
.twin-hud-who { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 10px; align-items: center; padding: 7px 16px 7px 7px;
  border-radius: 999px; background: #fff; color: #17142e; box-shadow: 0 10px 26px rgba(23,20,46,.28); }
.twin-hud-who[hidden] { display: none; }
.twin-hud-who i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #6c63ff; color: #fff; font-style: normal; font-weight: 700; }
.twin-hud-who span { display: grid; } .twin-hud-who b { font-size: 14px; } .twin-hud-who em { font-style: normal; font-size: 12px; color: #55516f; }
.twin-hud-help { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(23,20,46,.6);
  color: #eceaff; font-size: 12.5px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.twin-hud-btns { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; pointer-events: auto; }
.twin-hud-btns button { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; padding: 10px 15px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #17142e; box-shadow: 0 6px 18px rgba(23,20,46,.2); }
.twin-hud-btns .twin-hud-vr { background: #6c63ff; color: #fff; }
.twin-hud-btns button:focus-visible { outline: 2px solid #6c63ff; outline-offset: 2px; }
.tw-page.walking .tw-panel, .tw-page.walking .tw-foot, .tw-page.walking .tw-bar, .tw-page.walking .tw-toast { display: none !important; }
/* «Любоваться»: только здание — без панели, легенды, подписей и переключателя линз; кнопка «✕ Подписи» в баре всё возвращает */
.tw-page.clean .tw-panel, .tw-page.clean .tw-foot, .tw-page.clean .tw-toast, .tw-page.clean .tw-seg, .tw-page.clean .tw-sky { display: none !important; }
.tw-clean[aria-pressed="true"] { background: #17142e; color: #fff; }
@media (max-width: 760px) {
  .twin-hud-room { top: auto; bottom: 104px; left: 10px; padding: 6px 14px; } .twin-hud-room b { font-size: 14.5px; }      /* телефон: внизу над кнопкой выхода — сверху закрывала буквы FARABI HUB */
  .twin-hud-btns { top: auto; bottom: 54px; right: 50%; transform: translateX(50%); }
  .twin-hud-who { top: 64px; }
}

/* ── в пульте (/os/map): макет на всё окно под шапкой; top выставляет страница по высоте шапки ── */
.twin-host.tw-page, .twin-host { position: fixed; left: 0; right: 0; bottom: 0; top: 64px; width: auto; height: auto; min-height: 0; z-index: 1; }

/* ── «Авторы»: маленькая ссылка внизу панели; по ней в панели — подписи авторов (CC BY 4.0) и строка про OpenStreetMap (ODbL) ── */
.tw-panel > .tw-panel-in { flex: 1 1 auto; }                      /* ссылка «Авторы» — у нижнего края панели, а не сразу под текстом */
.tw-credits-bar { flex: none; display: flex; justify-content: flex-end; padding: 0 18px 10px; }
.tw-credits-link { appearance: none; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; color: #8a86a6; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tw-credits-link:hover, .tw-credits-link[aria-pressed="true"] { color: var(--tw-accent); }
.tw-credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tw-credits li { padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(23,20,46,.09); font-size: 13px; line-height: 1.4; color: #55516f; overflow-wrap: anywhere; }
.tw-credits a, .tw-credits-osm a { color: var(--tw-accent); }
@media (max-width: 760px) { .tw-credits-bar { padding: 0 16px 8px; } }