:root { color-scheme: dark; font-family: Manrope, Arial, sans-serif; background: #0c0d10; color: #f5f3ee; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 72% 0%, #26331e 0, transparent 30rem), #0c0d10; }
.page-shell { margin: 0 auto; max-width: 1120px; min-height: 100vh; padding: 26px 36px 72px; }
.topbar { align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; padding-bottom: 23px; }
.topbar p, .eyebrow, .hint { color: #a7a69e; font: 500 11px/1.4 "DM Mono", monospace; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.brand { color: #f5f3ee; font-size: 18px; font-weight: 800; letter-spacing: -.05em; text-decoration: none; }
.brand span { align-items: center; background: #d9ff51; border-radius: 8px; color: #11140d; display: inline-flex; font-size: 17px; height: 27px; justify-content: center; margin-right: 6px; width: 27px; }
.hero { max-width: 690px; padding: 92px 0 54px; }
h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -.075em; line-height: .97; margin: 12px 0 20px; }
.lede { color: #b9b7b0; font-size: 17px; line-height: 1.55; max-width: 550px; }
.studio { background: #151719; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; box-shadow: 0 28px 80px rgba(0,0,0,.25); overflow: hidden; padding: 24px; }
.studio-heading { align-items: start; display: flex; justify-content: space-between; padding-bottom: 20px; }
h2 { font-size: 19px; letter-spacing: -.04em; margin: 5px 0 0; }
.status { background: rgba(217,255,81,.14); border: 1px solid rgba(217,255,81,.25); border-radius: 999px; color: #d9ff51; font: 500 10px "DM Mono", monospace; padding: 7px 9px; text-transform: uppercase; }
.player-stage { aspect-ratio: 16 / 9; background: #08090a; border-radius: 14px; overflow: hidden; position: relative; }
.player-stage video { display: block; height: 100%; object-fit: cover; width: 100%; }
.empty { align-items: center; color: #b9b7b0; display: flex; flex-direction: column; gap: 9px; height: 100%; justify-content: center; text-align: center; }
.empty strong { color: #f5f3ee; font-size: 19px; }
.actions { display: flex; gap: 10px; padding-top: 18px; }
.button { border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: 700 13px Manrope, sans-serif; padding: 12px 16px; text-decoration: none; }
.primary { background: #d9ff51; color: #171a10; }
.secondary { background: transparent; border-color: rgba(255,255,255,.2); color: #f5f3ee; }
.hint { margin-top: 16px; text-transform: none; }
.toast { background: #f5f3ee; border-radius: 10px; bottom: 22px; color: #121313; font-size: 13px; left: 50%; max-width: calc(100vw - 32px); opacity: 0; padding: 12px 16px; pointer-events: none; position: fixed; transform: translate(-50%, 18px); transition: .18s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .page-shell { padding: 20px 17px 52px; } .hero { padding: 66px 0 37px; } .studio { border-radius: 16px; padding: 15px; } .actions { flex-direction: column; } .button { text-align: center; } }