:root { color-scheme: light; font: 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202833; background: #f4f6f8; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 920px; margin: 0 auto; padding: 48px 24px 32px; }
header { margin-bottom: 28px; }
.eyebrow { color: #6c7784; font-size: 12px; letter-spacing: .12em; margin: 0 0 8px; }
h1 { margin: 0; font-size: clamp(26px, 5vw, 36px); font-weight: 650; letter-spacing: -.03em; }
.intro, .hint, footer { color: #687482; }
.intro { max-width: 650px; margin: 8px 0 0; }
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; padding: 18px; background: #fff; border: 1px solid #e0e5ea; border-radius: 8px; }
label { display: grid; gap: 6px; color: #44505d; font-size: 13px; }
input, select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd3db; border-radius: 5px; background: white; color: inherit; font: inherit; }
button { justify-self: start; min-height: 38px; padding: 7px 15px; color: #fff; background: #315f89; border: 1px solid #315f89; border-radius: 5px; font: inherit; cursor: pointer; }
button.secondary { color: #33495c; background: #fff; border-color: #cbd3db; }
#status { grid-column: 1 / -1; min-height: 22px; margin: 0; color: #596877; font-size: 13px; }
section { margin-top: 28px; }
h2 { margin: 0 0 8px; font-size: 18px; font-weight: 620; }
.hint { margin: 0 0 10px; font-size: 13px; }
.preview { aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 6px; }
.preview .vodee-react-player { width: 100%; height: 100%; }
pre { overflow: auto; padding: 14px; background: #202833; color: #e8eef4; border-radius: 6px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
footer { margin-top: 30px; font-size: 12px; }
@media (max-width: 620px) { .page { padding: 28px 16px; } .builder { grid-template-columns: 1fr; } #status { grid-column: auto; } }