.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:10px 16px;border-radius:12px;background:#101214;color:#f5f4ef;font-size:14px;line-height:1.4}
.demo-banner a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:opacity var(--hr-motion-duration-release,180ms) ease}
/* «Начать работу» отвечает на нажатие сразу (§1): ссылка приглушается под пальцем и возвращается на отпускании. */
.demo-banner a:active{opacity:var(--hr-press-opacity,.7);transition-duration:0s}
[data-theme="sapphire"] .demo-banner{background:var(--hr-color-lime,#c4ff00);color:#062840}
/* Пояснение демо — та же всплывашка, что в кабинете (workspace-motion.css): поднимается на малую дистанцию и
   уходит тем же путём на зеркальной кривой (§7). Путь из токенов: при «меньше движения» сдвиг 0 — остаётся
   короткое растворение. На телефоне стоит над кнопкой помощника. */
#demo-note{position:fixed;inset-inline:16px;bottom:24px;z-index:var(--hr-layer-toast,60);max-width:560px;margin-inline:auto;padding:14px 18px;border-radius:14px;background:#101214;color:#f5f4ef;font-size:14px;line-height:1.5;opacity:0;translate:0 var(--hr-motion-distance-small,8px);pointer-events:none;transition:opacity calc(var(--hr-workspace-dialog,180ms) * .8) var(--hr-workspace-ease-exit,ease),translate calc(var(--hr-workspace-dialog,180ms) * .8) var(--hr-workspace-ease-exit,ease)}
#demo-note.visible{opacity:1;translate:none;transition-duration:var(--hr-workspace-dialog,180ms);transition-timing-function:var(--hr-workspace-ease,ease)}
/* В верхнем слое заметка — popover (entry.js); стили popover по умолчанию сняты, место и вид прежние.
   Из display:none она проявляется тем же путём (@starting-style). */
#demo-note[popover]{inset-block-start:auto;margin-block:0;border:0;width:auto;height:auto;overflow:visible}
@starting-style{#demo-note.visible{opacity:0;translate:0 var(--hr-motion-distance-small,8px)}}
@media(max-width:800px){#demo-note{bottom:80px}}
@media(max-width:620px){.demo-banner{flex-direction:column;align-items:flex-start;gap:6px}}