.kc-stage {
position: relative; aspect-ratio: 16 / 9; width: 100%;
max-width: 1200px; margin-inline: auto;
background: var(--kc-bg-void); border-radius: var(--kc-r-md); overflow: hidden;
}
@media (min-width: 1280px) { .kc-stage { border-radius: 0; } }
@media (max-width: 640px)  { .kc-stage { border-radius: 0; } }
.kc-stage video { width: 100%; height: 100%; object-fit: contain; background: var(--kc-bg-void); }
.kc-embed__start {
position: absolute; inset: 0; width: 100%; height: 100%;
display: block; padding: 0; border: 0; cursor: pointer;
background: var(--kc-bg-void);
}
.kc-embed__start img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-embed__play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 68px; height: 48px; display: block;
transition: transform var(--kc-fast) var(--kc-ease-out);
}
.kc-embed__play svg { width: 100%; height: 100%; display: block; }
.kc-embed__play-bg { fill: #212121; fill-opacity: .8; }
.kc-embed__start:hover path.kc-embed__play-bg,
.kc-embed__start:focus-visible path.kc-embed__play-bg { fill: #f00; fill-opacity: 1; }
.kc-embed__start:hover span.kc-embed__play { transform: translate(-50%, -50%) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.kc-embed__play,
.kc-embed__start:hover span.kc-embed__play { transition: none; }
.kc-embed__start:hover span.kc-embed__play { transform: translate(-50%, -50%); }
}
.kc-stage__title { display: none; }
@media (max-width: 640px) {
.kc-stage--video { position: sticky; top: 56px; z-index: 3;
transition: height .18s ease; }
.kc-stage--video[data-mini="1"] {
aspect-ratio: auto; height: 96px; display: flex; align-items: center;
gap: var(--kc-3); padding-right: var(--kc-4);
box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.kc-stage--video[data-mini="1"] > .kc-embed {
flex: none; width: 170.67px; height: 96px; aspect-ratio: auto;
}
.kc-stage--video[data-mini="1"] > .kc-stage__title {
display: block; flex: 1; min-width: 0; margin: 0; color: var(--kc-on-void);
font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.kc-stage--video { transition: none; }
}
.kc-plate { position: absolute; inset: 0; display: grid; place-items: center;
padding: var(--kc-6); text-align: center; color: var(--kc-on-void);
--kc-ink:              var(--kc-on-void);
--kc-ink-2:            var(--kc-on-void-2);
--kc-ink-3:            var(--kc-on-void-3);
--kc-border-strong:    var(--kc-on-void-line);
--kc-accent-ink:       var(--kc-on-void-link);
--kc-accent-ink-hover: var(--kc-on-void-link);
--kc-pro:              var(--kc-on-void-pro);
--kc-bg-muted:         var(--kc-on-void-soft);
box-shadow: inset 0 0 0 1px rgba(19,195,227,.2); }
.kc-plate__poster { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: .08; }
.kc-plate__body { position: relative; max-width: 460px; display: grid; gap: var(--kc-4);
justify-items: center; }
.kc-plate__mark { width: 64px; height: 64px; border-radius: 50%; display: grid;
place-items: center; box-shadow: inset 0 0 0 2px var(--kc-accent);
color: var(--kc-accent); }
.kc-plate__mark.kc-plate__mark--pro { background: var(--kc-gold-1); color: var(--kc-gold-ink);
box-shadow: inset 0 0 0 2px var(--kc-gold-edge); }
.kc-topbar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: var(--kc-4);
height: 64px;
background: var(--kc-bg); border-bottom: 1px solid var(--kc-border);
}
.kc-topbar,
.kc-sitefoot__inner,
.kc-sitefoot__bar { padding-inline: max(var(--kc-5), calc((100% - var(--kc-shell)) / 2 + var(--kc-5))); }
@media (min-width: 768px) {
.kc-topbar,
.kc-sitefoot__inner,
.kc-sitefoot__bar { padding-inline: max(var(--kc-7), calc((100% - var(--kc-shell)) / 2 + var(--kc-7))); }
}
.kc-studio header.kc-topbar, .kc-studio-light header.kc-topbar { height: 56px; background: var(--kc-surface); }
@media (max-width: 560px) {
.kc-topbar { gap: var(--kc-3); padding-inline: var(--kc-4); }
.kc-brand { flex: none; white-space: nowrap; }
.kc-topbar__who { display: none; }
}
.kc-brand { display: inline-flex; align-items: center; gap: var(--kc-2);
font-weight: 700; color: var(--kc-ink); text-decoration: none; }
.kc-brand:hover { text-decoration: none; color: var(--kc-ink); }
.kc-brand__mark { width: 24px; height: 24px; border-radius: 7px; flex: none;
background: var(--kc-accent); display: grid; place-items: center;
color: var(--kc-on-accent); font-size: 13px; font-weight: 700; }
img.kc-brand__mark { background: none; border-radius: 0; display: block;
object-fit: contain; }
.kc-learn { display: grid; grid-template-columns: 1fr 380px; min-height: calc(100dvh - 56px); }
@media (max-width: 1279px) { .kc-learn { grid-template-columns: 1fr 340px; } }
@media (max-width: 1023px) { .kc-learn { grid-template-columns: 1fr; } }
.kc-nolist div.kc-learn { grid-template-columns: minmax(0, 1fr); }
.kc-nolist dialog.kc-learn__side { display: none; }
@media (min-width: 1024px) {
.kc-nolist div.kc-col { max-width: 1080px; margin-inline: auto; width: 100%; }
}
.kc-learn__restore { display: none; margin-bottom: var(--kc-4); }
.kc-learn__fold { display: none; }
@media (min-width: 1024px) {
.kc-learn__fold { display: inline-flex; }
.kc-nolist button.kc-learn__restore { display: inline-flex; }
}
.kc-learn__side { background: var(--kc-surface); border-left: 1px solid var(--kc-border); }
@media (min-width: 1024px) {
.kc-learn__side-inner {
position: sticky; top: 56px; max-height: calc(100dvh - 56px);
overflow-y: auto; overscroll-behavior: contain;
}
}
@media (max-width: 1023px) { .kc-learn__side { border-left: 0;
border-top: 1px solid var(--kc-border); } }
.kc-sheet[open] { position: static; display: block; margin: 0; padding: 0;
border-top: 0; border-right: 0; border-bottom: 0;
width: auto; height: auto;
max-width: none;
color: inherit; }
.kc-sheet::backdrop { background: rgba(8, 20, 26, .55); }
.kc-sheet__x { display: none; }
.kc-sheetbar { display: none; }
@media (max-width: 1023px) {
.kc-sheet[open] { display: none; }
.kc-sheet[open]:modal {
display: block; position: fixed;
inset: auto 0 0 0; margin: 0;
width: 100%; max-width: none;
height: 85dvh; max-height: 85dvh;
border: 0; border-radius: var(--kc-r-lg) var(--kc-r-lg) 0 0;
background: var(--kc-surface); color: var(--kc-ink);
overflow-y: auto; overscroll-behavior: contain;
padding-bottom: var(--kc-8);
}
.kc-sheet__x {
position: sticky; top: 0; float: right; z-index: 2;
display: grid; background: var(--kc-surface); color: var(--kc-ink-3);
}
.kc-sheet__x svg { width: 18px; height: 18px; }
.kc-sheetbar {
position: fixed; inset: auto 0 0 0; z-index: 30;
display: flex; align-items: center; gap: var(--kc-3);
width: 100%; height: 56px; padding: 0 var(--kc-5);
padding-bottom: env(safe-area-inset-bottom, 0);
border: 0; border-top: 1px solid var(--kc-border);
background: var(--kc-surface); color: var(--kc-ink);
font-size: 15px; font-weight: 700; cursor: pointer;
}
.kc-sheetbar__ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; }
.kc-sheetbar__ico svg { width: 20px; height: 20px; }
.kc-sheetbar__n { margin-left: auto; font-weight: 600; color: var(--kc-ink-3); }
.kc-learn { padding-bottom: 72px; }
}