:root { color-scheme:dark; font-family: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif; background:#0b0d10; color:#f5f0e7; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; padding:22px 16px 18px; }
main { width:min(100%,440px); margin:0 auto; }
header { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:16px; }
.brand { color:#d3b279; font-family:Georgia,serif; font-size:1.25rem; letter-spacing:.075em; margin:0; }
h1 { font-size:1rem; font-weight:500; line-height:1.5; margin:0; }
.player { width:min(100%,calc((100svh - 145px) * .5625)); margin:0 auto; }
video { display:block; width:100%; aspect-ratio:9/16; background:#06080a; border:1px solid #323028; border-radius:8px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px auto 0; max-width:400px; font-size: .875rem; line-height:1.6; }
a { color:#dfc598; text-underline-offset:.25em; padding:6px 0; }
a:focus-visible { outline:2px solid #dfc598; outline-offset:5px; }
footer span { color:#aaa59c; }
@media (max-width:340px) { header { flex-direction:column; gap:5px; } .player { width:min(100%,calc((100svh - 168px) * .5625)); } }