html,body,#root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0;padding:0}.band{--band-height: 16dvh;--bands-transition-time: 2s;position:absolute;left:0;width:100%;height:var(--band-height);background-color:#000;will-change:transform;transition:transform var(--bands-transition-time) linear}.band.upper{top:0;transform:translateY(calc(var(--band-height) * -1))}.band.lower{bottom:0;transform:translateY(var(--band-height))}.band.upper.cinematic,.band.lower.cinematic{transform:translateY(0)}.cinematic-btn{--border-thickness: 1px;--corner-size: .15em;--color: #fff;--border-color: #bb012d;position:absolute;top:1rem;right:1rem;font-family:system-ui,sans-serif;font-weight:700;font-size:1.25rem;cursor:pointer;border:none;display:grid;place-items:center;padding:calc(.5em + var(--corner-size));color:var(--color);--inner-border-size: var(--corner-size);background:conic-gradient(from 90deg at var(--border-thickness) var(--border-thickness),#0000 90deg,var(--color) 0) var(--inner-border-size) var(--inner-border-size) / calc(100% - var(--border-thickness) - 2 * var(--inner-border-size)) calc(100% - var(--border-thickness) - 2 * var(--inner-border-size));transition:.3s linear;outline:var(--border-thickness) solid #0000;outline-offset:.3em}.cinematic-btn:hover,.cinematic-btn:focus-visible{--inner-border-size: 0px;outline-color:var(--color);outline-offset:.1em}.cinematic-btn.cinematic:not(:disabled){opacity:.6}.cinematic-btn:disabled{pointer-events:none;opacity:.3}.cinematic-btn>svg{width:20px}