:root {
  --ki-player-bg: #071015;
  --ki-player-panel: #0d171e;
  --ki-player-panel-2: #14242d;
  --ki-player-text: #f4fbfc;
  --ki-player-muted: #afc3c8;
  --ki-player-brand: #70bfcb;
  --ki-player-brand-2: #2f9dcf;
  --ki-player-line: rgba(112, 191, 203, .25);
  --ki-player-shadow: 0 28px 80px rgba(0,0,0,.42);
  --ki-player-radius: 26px;
  --ki-player-font: Calibri, Arial, sans-serif;
}
.ki-demo-player, .ki-demo-player * { box-sizing: border-box; }
.ki-demo-player {
  width: min(100%, 1240px);
  height: min(900px, calc(100dvh - 18px));
  min-height: min(560px, calc(100dvh - 18px));
  margin-inline: auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  color: var(--ki-player-text);
  font-family: var(--ki-player-font);
  border: 1px solid var(--ki-player-line);
  border-radius: var(--ki-player-radius);
  background:
    radial-gradient(circle at 18% 4%, rgba(112,191,203,.13), transparent 28%),
    linear-gradient(145deg, var(--ki-player-bg), #0a1319 55%, #071015);
  box-shadow: var(--ki-player-shadow);
  isolation: isolate;
  scroll-margin-top: 16px;
}
.ki-demo-player__header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px 6px;
}
.ki-demo-player__heading { min-width: 0; }
.ki-demo-player__eyebrow { display:block; color:var(--ki-player-brand); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.ki-demo-player__heading h2 { margin: 3px 0 0; font-size: clamp(20px, 2.1vw, 32px); line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ki-demo-player__hint { margin:0; max-width: 340px; color:var(--ki-player-muted); font-size:clamp(11px,.95vw,14px); text-align:right; line-height:1.25; }
.ki-demo-player__toolbar {
  display:grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto auto;
  align-items:center;
  gap:8px;
  padding: 6px 14px 9px;
}
.ki-demo-player__toolbar button,
.ki-demo-player__toolbar select,
.ki-demo-player__pilot-link {
  min-height: 42px;
  border:1px solid var(--ki-player-line);
  border-radius:12px;
  font:inherit;
}
.ki-demo-player__toolbar button {
  padding: 8px 13px;
  background: var(--ki-player-panel-2);
  color:var(--ki-player-text);
  cursor:pointer;
  white-space:nowrap;
}
.ki-demo-player__toolbar button:hover,
.ki-demo-player__toolbar button:focus-visible,
.ki-demo-player__toolbar select:focus-visible,
.ki-demo-player__pilot-link:focus-visible { outline:3px solid rgba(112,191,203,.45); outline-offset:2px; border-color:var(--ki-player-brand); }
.ki-demo-player__toolbar button[data-action="play"] { min-width: 56px; font-size: 18px; background:var(--ki-player-brand); color:#061014; font-weight:800; border-color:var(--ki-player-brand); }
.ki-demo-player__toolbar button[data-action="restart"] { min-width: 56px; font-size: 18px; }
.ki-demo-player__toolbar select { width:100%; min-width:0; padding:8px 36px 8px 12px; background:#101d25; color:var(--ki-player-text); cursor:pointer; }
.ki-demo-player__screen {
  position:relative;
  min-height:0;
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(112,191,203,.32);
  border-radius:22px;
  background:#020507;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.018), 0 18px 55px rgba(0,0,0,.38);
}
.ki-demo-player__screen::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  border-radius:inherit; box-shadow:inset 0 0 55px rgba(0,0,0,.22);
}
.ki-demo-player__viewport { position:absolute; inset:6px; overflow:hidden; display:grid; place-items:center; }
.ki-demo-player__scale-shell {
  position:absolute; left:50%; top:50%; transform-origin:center center;
  background:#05080c; overflow:hidden; will-change:transform;
}
.ki-demo-player__frame { display:block; width:100%; height:100%; border:0; overflow:hidden; background:#05080c; }
.ki-demo-player__cover {
  position:absolute; inset:6px; z-index:10; display:grid; place-items:center;
  padding:24px; text-align:center;
  background: radial-gradient(circle at center, rgba(19,39,49,.55), rgba(3,8,11,.92));
  transition:opacity .2s ease, visibility .2s ease;
}
.ki-demo-player__cover[hidden] { display:none; }
.ki-demo-player__cover-card { max-width:620px; }
.ki-demo-player__cover-card h3 { margin:0 0 10px; font-size:clamp(24px,3.2vw,45px); line-height:1.08; }
.ki-demo-player__cover-card p { margin:0 0 22px; color:var(--ki-player-muted); font-size:clamp(14px,1.4vw,19px); line-height:1.45; }
.ki-demo-player__cover-card button { min-height:48px; padding:12px 22px; border:0; border-radius:12px; background:#176F9F; color:#fff; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 12px 28px rgba(23,111,159,.22); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.ki-demo-player__cover-card button:hover { background:#1F8FC8; transform:translateY(-1px); box-shadow:0 0 0 1px rgba(198,216,121,.18), 0 16px 34px rgba(143,174,77,.22); }
.ki-demo-player__footer {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding: 9px 18px 12px;
}
.ki-demo-player__meta { min-width:0; }
.ki-demo-player__meta strong { display:block; font-size:clamp(14px,1.3vw,18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ki-demo-player__meta span { display:block; margin-top:2px; color:var(--ki-player-muted); font-size:clamp(11px,.95vw,14px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ki-demo-player__pilot-link { display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; color:var(--ki-player-brand); text-decoration:none; white-space:nowrap; background:rgba(112,191,203,.06); }
.ki-demo-player__status { position:absolute; right:12px; top:10px; z-index:12; padding:5px 9px; border-radius:999px; background:rgba(4,10,14,.78); color:var(--ki-player-muted); font-size:11px; border:1px solid rgba(255,255,255,.1); pointer-events:none; }
@media (max-width: 760px) {
  .ki-demo-player { height:calc(100dvh - 8px); min-height:0; border-radius:18px; }
  .ki-demo-player__header { padding:10px 12px 4px; }
  .ki-demo-player__heading h2 { font-size:20px; }
  .ki-demo-player__hint { display:none; }
  .ki-demo-player__toolbar { grid-template-columns: 36px minmax(0,1fr) 36px 86px 44px; gap:6px; padding:6px 8px 8px; }
  .ki-demo-player__toolbar button, .ki-demo-player__toolbar select { min-height:38px; }
  .ki-demo-player__toolbar button { padding:6px 8px; }
  .ki-demo-player__screen { margin:0 8px; border-radius:16px; }
  .ki-demo-player__viewport, .ki-demo-player__cover { inset:4px; }
  .ki-demo-player__footer { padding:7px 10px 10px; gap:8px; }
  .ki-demo-player__meta span { display:none; }
  .ki-demo-player__pilot-link { min-height:36px; padding:6px 9px; font-size:12px; }
  .ki-demo-player__cover-card h3 { font-size:clamp(21px,7vw,34px); }
  .ki-demo-player__cover-card p { font-size:13px; }
}
@media (max-height: 650px) {
  .ki-demo-player__header { padding-top:7px; }
  .ki-demo-player__eyebrow, .ki-demo-player__meta span { display:none; }
  .ki-demo-player__hint { font-size:11px; }
  .ki-demo-player__toolbar { padding-top:4px; padding-bottom:6px; }
  .ki-demo-player__footer { padding-top:6px; padding-bottom:7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ki-demo-player__cover { transition:none; }
}

/* V16 focus player compaction */
.ki-demo-player--focus {
  width: min(100%, 1320px);
  height: calc(100dvh - 82px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  scroll-margin-top: 78px;
}
.ki-demo-player--focus .ki-demo-player__header,
.ki-demo-player--focus .ki-demo-player__footer {
  display: none;
}
.ki-demo-player--focus .ki-demo-player__toolbar {
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(112px, 150px) auto;
  padding: 8px 12px;
}
.ki-demo-player--focus .ki-demo-player__toolbar button[data-action="restart"] {
  display: none;
}
.ki-demo-player--focus .ki-demo-player__screen {
  margin: 0 10px 10px;
}
.ki-demo-player--focus .ki-demo-player__viewport {
  inset: 4px;
}
@media (max-width: 760px) {
  .ki-demo-player--focus {
    height: calc(100dvh - 74px);
    border-radius: 14px;
  }
  .ki-demo-player--focus .ki-demo-player__toolbar {
    grid-template-columns: 34px minmax(0, 1fr) 34px 92px 42px;
    padding: 6px;
  }
  .ki-demo-player--focus .ki-demo-player__screen {
    margin: 0 6px 6px;
  }
}