:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0b0e14; color: #f2f4f8; }
* { box-sizing: border-box; }
body { margin: 0; }
#backdrop { position: fixed; inset: 0; background-size: cover; background-position: center; opacity: .28; filter: blur(16px); }
main { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 20px; }
section { min-width: 0; }
header { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 40px; font-size: 14px; }
header span:last-child { color: #a8b1c2; font-size: 12px; }
.screen { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid #2a3245; border-radius: 10px; overflow: hidden; }
.enhanced .screen { border-color: #ff2d74; box-shadow: 0 0 32px #ff2d7424; }
.enhanced header > span:first-child { color: #ff5c8a; }
@media (max-width: 700px) { main { grid-template-columns: 1fr; gap: 20px; padding: 16px 12px; } }

#after > .art-video-player { isolation: isolate; z-index: 0; }
.demo-cover { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; gap: 5%; padding: 6%; background-size: cover; background-position: center; }
.demo-cover__poster { width: 28%; max-height: 90%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 30px #0008; }
.demo-cover__body { min-width: 0; }
.demo-cover__badge { color: #ff8eb4; font-size: 11px; letter-spacing: .08em; }
.demo-cover h2 { font-size: clamp(18px, 2vw, 28px); margin: 10px 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.demo-cover p { font-size: 12px; color: #c4cbd6; line-height: 1.6; margin: 0 0 16px; }
.demo-cover button { cursor: pointer; min-height: 44px; border: 0; border-radius: 7px; padding: 0 18px; background: #d61f69; color: #fff; font: inherit; font-size: 13px; }
.demo-cover button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) { .demo-cover { padding: 5%; gap: 5%; } .demo-cover h2 { font-size: 18px; margin: 6px 0; } .demo-cover p { display: none; } .demo-cover button { padding: 0 10px; margin-top: 8px; } }