:root{--rail-width:clamp(52px,10.42vw,200px);--page-background:#e0c8bb;--page-accent:#e9ff54;--ink:#090909}*{box-sizing:border-box}body{margin:0;background:var(--page-background);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.left-rail,.right-rail{position:fixed;top:0;bottom:0;width:var(--rail-width);z-index:5;overflow:hidden;pointer-events:none}.left-rail{left:0;display:flex;justify-content:center}.right-rail{right:0}.ticker-track{display:flex;flex-direction:column;align-items:center;animation:ticker-up 28s linear infinite;width:100%;height:max-content}.ticker-group{display:flex;flex-direction:column;align-items:center}.ticker-group span{margin-block:.45em;color:var(--page-accent);font:400 clamp(15px,1.32vw,25px)/1 'Andale Mono','Lucida Console',Monaco,monospace;letter-spacing:.03em;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}@keyframes ticker-up{to{transform:translateY(-50%)}}.rail-logo-anchor{position:absolute;right:0;left:0;bottom:clamp(18px,2vw,38px);height:clamp(190px,17vw,326px)}.rail-logo{position:absolute;top:50%;left:50%;width:clamp(190px,17vw,326px);height:auto;max-width:none;transform:translate(-50%,-50%) rotate(90deg)}#reel{margin:0 var(--rail-width);display:flex;flex-direction:column;gap:4px}.row{display:flex;gap:4px;height:clamp(190px,24vw,340px)}.tile{position:relative;flex:1;min-width:0;overflow:hidden;background:#000;transition:flex 520ms;isolation:isolate}.tile video{width:100%;height:100%;display:block;object-fit:cover;transition:filter 520ms}.tile .activate{position:absolute;inset:0;border:0;padding:0;background:transparent;color:transparent;z-index:1}.activate:focus-visible,.close:focus-visible{outline:3px solid var(--page-accent);outline-offset:-3px}.tile:has(.activate:focus-visible){flex:2.35}.tile.open{flex:3}.tile.open video{object-fit:contain;filter:none!important}.tile.open .activate{display:none}.close{position:absolute;top:8px;right:8px;z-index:4;border:0;width:40px;height:40px;font-size:26px;line-height:1;background:var(--page-accent);color:#090909;border-radius:50%;display:none}.open .close{display:block}.hand{position:fixed;top:0;left:0;width:42px;pointer-events:none;z-index:100;display:none}.hand.wobble{animation:wobble 480ms steps(6)}@keyframes wobble{0%,100%{rotate:0deg}16%{rotate:-12deg}32%{rotate:10.8deg}48%{rotate:-8.4deg}64%{rotate:6deg}80%{rotate:-2.4deg}}@media(hover:hover) and (pointer:fine){body,.activate,.close{cursor:none}.hand.visible{display:block}.row:not(:has(.open)):has(.tile:hover) .tile:not(:hover) video{filter:brightness(.68) saturate(.7)}.tile:not(.open):not(.still):hover{flex:2.35}}@media(max-width:720px),(pointer:coarse){#reel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.row{display:contents}.tile{aspect-ratio:4/5;transition:none}.tile.open{grid-column:1/-1;aspect-ratio:16/9}.hand{display:none!important}.tile video{filter:none!important}.rail-logo{width:190px}.rail-logo-anchor{height:190px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.tile .preview{width:100%;height:100%;display:block;object-fit:cover;transition:filter 520ms}.tile .full-film{display:none}.tile.open .preview{display:none}.tile.open .full-film{display:block;object-fit:contain}.play-icon{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;padding-left:3px;border:1px solid #fff8;border-radius:50%;background:#0005;color:white;font-size:20px;pointer-events:none}.row:has(.activate:focus-visible) .tile:not(:has(.activate:focus-visible)) .preview{filter:brightness(.68) saturate(.7)}@media(hover:hover) and (pointer:fine){.row:not(:has(.open)):has(.tile:hover) .tile:not(:hover) .preview{filter:brightness(.68) saturate(.7)}}@media(max-width:720px),(pointer:coarse){.tile .preview{filter:none!important}}

.tile.still{flex:1!important}.tile.still .preview{object-fit:contain;transform:scale(1.8);transform-origin:center;filter:none!important}
