@font-face{font-family:Bricolage;src:url(bricolage-grotesque.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Lato;src:url(lato-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(lato-700.ttf) format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--paper:#101412;--ink:#f5f5ed;--olive:#dcff70;--muted:#c6cdba;--line:#45513e}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Lato,Arial,sans-serif;-webkit-text-size-adjust:100%}
main{max-width:1064px;margin:auto;padding:30px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left))}
.brand{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;letter-spacing:.04em;padding-bottom:24px;border-bottom:1px solid var(--line)}
.brand span:last-child{font-weight:400}
.intro{position:relative;padding:34px 0 28px}
.eyebrow{margin:0 0 14px;font-size:14px;letter-spacing:.03em;line-height:1.5;color:var(--olive)}
h1{margin:0;font-family:Bricolage,Lato,sans-serif;font-size:clamp(42px,6.3vw,70px);font-weight:600;letter-spacing:-.05em;line-height:1.04}
h1 em{font-style:normal;color:var(--olive)}
.description{position:absolute;right:0;bottom:28px;max-width:280px;margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.player{line-height:0;overflow:hidden;border-radius:5px}
video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#182016;color:#fff}
video a{color:#fff}
video::cue{font-family:sans-serif;font-size:90%;background:rgba(0,0,0,.78);color:#fff}
.below-player{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.details{font-size:14px;color:var(--muted);margin:0;line-height:1.5}.details span{padding:0 6px}
.actions{display:flex;gap:10px;align-items:center}
button,.download{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:4px;padding:12px 15px;font:inherit;font-size:14px;line-height:1.4;text-decoration:none;cursor:pointer}
button{background:var(--olive);color:#101412}.download{color:var(--ink);background:#283125}.download span{font-size:14px;color:var(--muted)}
button:hover{background:#cbea70}.download:hover{background:#34412c}button:focus-visible,a:focus-visible{outline:3px solid var(--olive);outline-offset:4px}
.hint,.status{font-size:14px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.status{color:#ffb3a0}
footer{display:flex;justify-content:space-between;gap:12px;margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
[hidden]{display:none!important}
@media(max-width:650px){main{padding-top:22px}.brand{padding-bottom:19px}.intro{padding:27px 0 22px}.description{position:static;max-width:310px;margin-top:17px;font-size:16px;line-height:1.45}.below-player{align-items:flex-start;flex-direction:column;gap:12px}.actions{width:100%;flex-wrap:wrap}.actions>*{flex:1;white-space:nowrap;padding:12px 10px}footer{margin-top:28px;flex-wrap:wrap}}
@media(max-height:520px) and (orientation:landscape){main{padding-top:12px}.brand{padding-bottom:12px}.intro{padding:16px 0}.eyebrow,.description{display:none}h1{font-size:30px}h1 br{display:none}h1 em{margin-left:.18em}.player{max-width:900px;margin:auto}}
