html[data-cabinet-theme] body.is-public-demo { --demo-accent: #7b61ff; overflow-anchor: none; }
html[data-cabinet-theme] body.is-public-demo .cabinet-shell { grid-template-columns: minmax(400px, 43%) minmax(0, 1fr); }
html[data-cabinet-theme] body.is-public-demo .cabinet-sidebar { width: auto; padding: 22px; }
html[data-cabinet-theme] body.is-public-demo .cabinet-topbar, html[data-cabinet-theme] body.is-public-demo .cabinet-mobile-toggle, html[data-cabinet-theme] body.is-public-demo .cabinet-sidebar-scrim,
html[data-cabinet-theme] body.is-public-demo .quick-menu-links { display: none; }
html[data-cabinet-theme] body.is-public-demo .cabinet-brand { pointer-events: none; }
html[data-cabinet-theme] body.is-public-demo .cabinet-sidebar-extra { display: block; }
html[data-cabinet-theme] body.is-public-demo .cabinet-main { padding: 24px 20px; }
.demo-preview-rail { display: grid; gap: 16px; width: 100%; }
.demo-back { color: var(--cab-muted); text-decoration: none; font-size: 13px; }
.demo-back:hover { color: #6042ce; }
.demo-preview-heading, .demo-preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.demo-preview-heading strong { font-size: 15px; }
.demo-preview-heading > span, .demo-preview-caption { color: var(--cab-muted); }
.demo-preview-caption { justify-content: flex-start; }
.demo-preview-caption > span:last-child { margin-left: auto; font-size: 10px; letter-spacing: .16em; }
.demo-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #7b61ff; }
.demo-hint { color: var(--cab-muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.demo-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.demo-header > div:first-child { flex: 1 1 260px; }
.demo-eyebrow { color: #7257e8; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.demo-header h1 { margin: 10px 0; font-size: clamp(22px, 2.1vw, 34px); letter-spacing: -.04em; }
.demo-header p { max-width: 530px; color: var(--cab-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.demo-header-actions { display: flex; gap: 8px; }
.demo-header-actions .btn { font-size: 12px; }
.demo-sports { display: flex; gap: 8px; width: 100%; }
.demo-sports a { color: var(--cab-muted); text-decoration: none; padding: 10px 20px; border: 1px solid #ffffff1c; border-radius: 8px; font-weight: 600; font-size: 14px; }
.demo-sports a[aria-current] { color: #fff; background: #7b61ff24; border-color: #7b61ff; }
.demo-preview { container-type: inline-size; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; border: 1px solid #ffffff24; position: relative; }
.demo-scene { position: absolute; inset: 0; overflow: hidden; font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 1.5cqw; color: #fff; background: #183d38; }
.demo-scene::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 12cqw #0009; pointer-events: none; }
.demo-field { position: absolute; inset: 15% 5% -24%; transform: perspective(60cqw) rotateX(28deg); border: .2cqw solid #a7d8be55; background: repeating-linear-gradient(90deg, #23684d99 0 12.5%, #1c594699 12.5% 25%); }
.demo-field::before { content: ''; position: absolute; width: 17%; aspect-ratio: 1; top: 35%; left: 42%; border: .2cqw solid #a7d8be55; border-radius: 50%; }
.demo-field::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: .2cqw; background: #a7d8be55; }
.demo-scene--hockey { background: #173045; }
.demo-scene--hockey .demo-field { border-radius: 12cqw; border-color: #96b7d7; background: linear-gradient(90deg, transparent 27%, #486aaf66 27% 28%, transparent 28% 49.5%, #ad536c99 49.5% 50.5%, transparent 50.5% 72%, #486aaf66 72% 73%, transparent 73%), #c7d9e6; }
.demo-scene--hockey .demo-field::before { border-color: #ad536c88; }
.demo-scene--hockey .demo-field::after { display: none; }
.demo-venue { position: absolute; left: 6%; top: 7%; display: flex; flex-direction: column; gap: .4cqw; letter-spacing: .18em; opacity: .45; font-size: 1cqw; }
.demo-venue b { font-size: 1.4cqw; }
.demo-watermark { position: absolute; z-index: 8; right: 3%; top: 4%; padding: .7cqw 1cqw; border: 1px solid #ffffff40; border-radius: .4cqw; color: #fffe; font-size: 1.2cqw; letter-spacing: .12em; background: #07070a80; }
.demo-preview > iframe { position:absolute; inset:0 auto auto 0; width:1920px; height:1080px; border:0; transform:scale(var(--preview-scale, .3)); transform-origin:top left; z-index:2; }
html[data-cabinet-theme] body.is-public-demo a:focus-visible, html[data-cabinet-theme] body.is-public-demo button:focus-visible { outline: 2px solid #b8a7ff; outline-offset: 3px; }
@media (max-width: 1450px) {
    html[data-cabinet-theme] body.is-public-demo .players-mode-panel[data-player-mode-panel="players"].is-hockey-mode { grid-template-columns: 1fr; }
    html[data-cabinet-theme] body.is-public-demo .players-mode-panel[data-player-mode-panel="players"].is-hockey-mode .action-panel { position: static; grid-column: 1; }
}
@media (max-width: 1100px) {
    html[data-cabinet-theme] body.is-public-demo .cabinet-shell { display: block; }
    html[data-cabinet-theme] body.is-public-demo .cabinet-sidebar { position: static; transform: none; width: 100%; height: auto; max-width: none; visibility: visible; }
    html[data-cabinet-theme] body.is-public-demo .cabinet-sidebar-extra { margin: 0; }
    html[data-cabinet-theme] body.is-public-demo .cabinet-brand { display: none; }
    .demo-preview-rail { max-width: 820px; margin: auto; }
    .demo-preview-rail .focus-section-heading, .demo-preview-rail .focus-graphics-list, .demo-preview-rail #hide-all-graphics-button { display: none; }
    .demo-hint { margin-bottom: 0; }
}
@media (max-width: 600px) {
    html[data-cabinet-theme] body.is-public-demo .cabinet-sidebar, html[data-cabinet-theme] body.is-public-demo .cabinet-main { padding: 14px 12px; }
    .demo-header h1 { font-size: 25px; }
    .demo-header-actions { width: 100%; }
    .demo-header-actions .btn { flex: 1; }
    .demo-sports a { flex: 1; text-align: center; padding: 10px; }
    .demo-hint { font-size: 12px; }
}
html[data-cabinet-theme] body.is-public-demo .cabinet-main { container-type: inline-size; background: var(--cab-bg); }
html[data-cabinet-theme] body.is-public-demo .demo-header p { color: var(--cab-muted); }
html[data-cabinet-theme] body.is-public-demo .demo-sports a[aria-current] { color: #6042ce; }
html[data-cabinet-theme] body.is-public-demo .shortcut-toggle:has([data-shortcut-block]) { display: none; }
@container (max-width: 950px) {
    html[data-cabinet-theme] body.is-public-demo .players-mode-panel[data-player-mode-panel="players"] { grid-template-columns: minmax(0, 1fr); }
    html[data-cabinet-theme] body.is-public-demo .players-mode-panel[data-player-mode-panel="players"] .action-panel { position: static; grid-column: 1; }
    html[data-cabinet-theme] body.is-public-demo .football-operator-centre { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    html[data-cabinet-theme] body.is-public-demo .football-team-command--home { grid-column: 1; grid-row: 1; min-height: 0; }
    html[data-cabinet-theme] body.is-public-demo .football-team-command--away { grid-column: 2; grid-row: 1; min-height: 0; }
    html[data-cabinet-theme] body.is-public-demo .football-time-command { grid-column: 1 / -1; grid-row: 2; min-height: 0; border-inline: 0; border-top: 1px solid var(--cab-line); }
    html[data-cabinet-theme] body.is-public-demo .football-team-command__name { white-space: normal; }
}

html[data-cabinet-theme] body.is-public-demo .demo-preview::after { display: none; }