@font-face{font-family:Montserrat;src:url('assets/montserrat-light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Lato;src:url('assets/lato-light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
:root{color-scheme:dark;--white:#fff;--track:rgba(255,255,255,.34)}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--white);font-family:Montserrat,Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
button,input,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a,input{touch-action:manipulation}
[hidden]{display:none!important}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#4b4b49;min-height:800px;min-height:max(800px,calc(100svh - 75px))}
.backdrop{position:absolute;inset:-36px -18px -10px -100px;z-index:-2;filter:brightness(1.01) saturate(0);background:#4b4b49}
.backdrop video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}
.composition{position:relative;max-width:1170px;width:calc(100% - 64px);min-height:inherit;margin:auto}
.music{position:absolute;left:calc(50% + 15.5px);top:23px;transform:translateX(-50%);width:280px;z-index:2}
.player{height:29px;width:100%;border:1px solid #fff;border-radius:30px;display:flex;align-items:center;padding:0 15px 0 14px;gap:12px;background:rgba(255,255,255,.06)}
.icon-button{border:0;color:#fff;display:grid;place-items:center;background:transparent;padding:0;flex:none;width:26px;height:27px;cursor:pointer;border-radius:50%}
.icon-button svg{width:13px;height:13px;fill:currentColor}
#elapsed{font:12px Arial,sans-serif;font-variant-numeric:tabular-nums;min-width:29px;text-align:center}
.slider{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:20px;background:transparent;cursor:pointer;margin:0;border:0;padding:0;border-radius:10px;--fill:0%}
.slider::-webkit-slider-runnable-track{height:7px;background:linear-gradient(to right,#fff 0 var(--fill),var(--track) var(--fill) 100%);border-radius:10px}
.slider::-moz-range-track{height:7px;background:var(--track);border-radius:10px}
.slider::-moz-range-progress{height:7px;background:#fff;border-radius:10px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:7px;border-radius:100%;background:#fff;border:0;opacity:0}
.slider::-moz-range-thumb{width:7px;height:7px;border-radius:100%;background:#fff;border:0;opacity:0}
.slider:hover::-webkit-slider-thumb,.slider:focus-visible::-webkit-slider-thumb{opacity:1}
.slider:hover::-moz-range-thumb,.slider:focus-visible::-moz-range-thumb{opacity:1}
.progress{flex:1}
.volume{width:60px;--fill:100%}
.slider:disabled{cursor:default}
.audio-status{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:310px;margin:8px 0 0;text-align:center;font:12px/1.5 Arial,sans-serif;text-shadow:0 1px 5px #222}
.audio-status:empty{display:none}
.signature{position:absolute;top:87px;left:-20px;margin:0;width:430px;height:242px;font-size:0}
.signature img{width:100%;height:auto;display:block}
.portrait{position:absolute;top:251px;left:-40px;width:496px;height:279px}
.portrait img{width:100%;height:auto;display:block}
.motto{position:absolute;top:554px;left:68px;width:259px;margin:0;text-align:center;font-size:23px;line-height:23px;letter-spacing:-2.3px}
.links{position:absolute;left:59.6%;top:302px;display:flex;flex-direction:column;align-items:center;gap:20px;width:280px}
.links a{display:flex;align-items:center;justify-content:center;text-align:center;width:280px;min-height:44px;padding:13px 12px;border:1px solid rgba(255,255,255,.94);color:#fff;text-decoration:none;font-size:14px;line-height:16px;letter-spacing:-1.3px;transition:background .2s ease,color .2s ease}
.links a:nth-child(2){width:277px}
.links a:nth-child(3){width:274px;margin-top:-1px}
.links a:hover{color:#292b29;background:rgba(255,255,255,.92)}
:focus-visible{outline:2px solid #fff;outline-offset:5px}
.video-toggle{position:absolute;bottom:18px;right:0;opacity:0;background:rgba(0,0,0,.5);color:#fff;border:1px solid #fff;padding:9px 12px;border-radius:2px;font:11px Arial,sans-serif;cursor:pointer;transition:opacity .2s}
.video-toggle:focus-visible,.video-toggle:hover,.video-toggle[data-paused="true"]{opacity:1}
footer{min-height:75px;background:#fff;color:#000;text-align:center;padding:25px 24px;font-family:Lato,Arial,sans-serif;font-size:14px;line-height:25px;font-weight:300;color-scheme:light}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.composition{max-width:1280px}.hero{min-height:max(800px,calc(100svh - 75px))}.signature,.portrait,.motto,.links{margin-top:clamp(0px,calc((100svh - 875px)*.36),120px)}}
@media(min-width:768px) and (max-width:1050px){.composition{width:calc(100% - 48px)}.signature{width:380px;left:-32px;top:102px}.portrait{width:440px;left:-63px;top:260px}.motto{left:24px;width:260px;top:545px}.links{left:auto;right:8px;width:250px}.links a,.links a:nth-child(2),.links a:nth-child(3){width:250px}}
@media(max-width:767px){
  .hero{min-height:0;background:#3d3f3c}
  .backdrop{position:absolute;inset:0;filter:brightness(.72) saturate(0)}
  .backdrop video{object-position:52% center}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,23,21,.08),rgba(20,23,21,0) 32%,rgba(20,23,21,.20) 100%);pointer-events:none}
  .composition{width:100%;max-width:480px;min-height:calc(100svh - 80px);padding:24px 24px 40px;display:flex;align-items:center;flex-direction:column}
  .music{position:relative;top:auto;left:auto;transform:none;flex:none;width:280px;max-width:100%;margin:0 auto 25px}
  .player{height:42px;padding:0 12px;gap:10px;background:rgba(255,255,255,.03)}
  .icon-button{width:34px;height:40px}
  .icon-button svg{width:14px;height:14px}
  .slider{height:40px}
  .signature{position:relative;left:auto;top:auto;width:320px;max-width:100%;height:78px;overflow:hidden;flex:none}
  .signature img{position:relative;top:-43px}
  .portrait{position:relative;left:auto;top:auto;width:208px;height:208px;margin:19px 0 0;overflow:hidden;flex:none}
  .portrait img{position:absolute;width:410px;max-width:none;height:auto;top:-11.5px;left:50%;transform:translateX(-50%)}
  .motto{position:relative;left:auto;top:auto;width:auto;margin:25px 0 31px;font-size:21px;line-height:23px;letter-spacing:-1.6px}
  .links{position:relative;left:auto;right:auto;top:auto;width:100%;max-width:310px;gap:13px;margin:0 auto}
  .links a,.links a:nth-child(2),.links a:nth-child(3){width:100%;min-height:49px;margin:0;font-size:13px;line-height:19px;letter-spacing:-.7px;background:rgba(255,255,255,.025)}
  .links a:hover{background:rgba(255,255,255,.92)}
  .video-toggle{right:14px;bottom:6px;padding:7px;font-size:10px}
  footer{min-height:80px;font-size:11px;line-height:18px;padding:21px max(26px,env(safe-area-inset-left)) calc(21px + env(safe-area-inset-bottom))}
  .audio-status{font-size:11px;width:290px;max-width:calc(100vw - 32px);margin-top:3px}
}
@media(max-width:350px){.composition{padding:22px 20px 35px}.music{width:265px;margin-bottom:20px}.signature{height:70px}.signature img{top:-36px}.portrait{width:190px;height:190px;margin-top:15px}.portrait img{width:375px;top:-10px}.motto{margin:22px 0 28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}