html, body { background: black; color: white; }
body { display: flex; flex-direction: column; min-height: 100dvh; }
.catalog { padding: 24px; }
.about-content { margin: 25px; max-width: 680px; }
.site-footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: auto; padding: 24px; }
.site-footer > a, .language-picker > button { background: #1d1d1d; border: 1px solid #aaa; border-radius: 8px; color: white; cursor: pointer; font: inherit; font-weight: 600; padding: 11px 16px; text-decoration: none; }
.site-footer > a:hover, .language-picker > button:hover { background: white; color: black; }
.site-footer > a:focus-visible, .language-picker button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.language-picker { position: relative; }
.language-menu { background: #111; border: 1px solid #aaa; border-radius: 8px; bottom: calc(100% + 8px); box-shadow: 0 12px 30px rgba(0,0,0,.45); display: grid; min-width: 100%; overflow: hidden; position: absolute; right: 0; z-index: 30; }
.language-menu[hidden] { display: none; }
.language-menu button { background: #1d1d1d; border: 0; color: white; cursor: pointer; font: inherit; padding: 10px 16px; text-align: left; white-space: nowrap; }
.language-menu button:hover, .language-menu button.is-selected { background: white; color: black; }
#site-header { align-items: center; display: flex; gap: 24px; justify-content: flex-end; min-height: 40px; position: relative; }
#site-title { display: flex; flex-wrap: nowrap; font-size: clamp(3.5rem, 7vw, 7.5rem); font-weight: 950; left: 0; letter-spacing: -.075em; line-height: .82; margin: 0; position: absolute; text-transform: lowercase; top: 50%; transform: translateY(-50%) scale(var(--title-scale-x, 1), .58); transform-origin: left center; }
.site-title-letter { background: linear-gradient(180deg, #25282d 4%, #565b63 60%, #a68c60 88%, #d0b77f 100%); background-clip: text; color: transparent; filter: drop-shadow(0 .12em .16em rgba(205, 164, 91, .09)); margin-right: -.08em; padding-right: .08em; -webkit-background-clip: text; }
.site-title-letter:nth-child(3n + 2) { background-image: linear-gradient(180deg, #22262a 4%, #50565d 60%, #827967 88%, #b6a477 100%); }
.site-title-letter:nth-child(3n) { background-image: linear-gradient(180deg, #292a2e 4%, #5d5d61 60%, #8c765e 88%, #c09c68 100%); }
.site-title-space { flex: 0 0 .32em; }
#content-type-filters, #period-filters, #genre-filters { display: flex; flex-wrap: wrap; gap: 8px; }
#content-type-filters { border-bottom: 1px solid #555; margin: 20px 0 16px; }
#period-filters, #genre-filters { margin: 0 0 12px; }
#period-filters[hidden] { display: none; }
#content-type-filters button, #period-filters button, #genre-filters button { background: #1d1d1d; border: 1px solid #777; color: white; cursor: pointer; font-size: 15px; padding: 8px 13px; }
#content-type-filters button { border-bottom-color: #555; border-radius: 8px 8px 0 0; margin-bottom: -1px; padding: 10px 20px; }
#content-type-filters button.is-selected { background: black; border-bottom-color: black; color: white; }
#period-filters button, #genre-filters button { border-radius: 999px; }
#period-filters button.is-selected, #genre-filters button.is-selected { background: white; color: black; }
#genre-filters button.is-excluded { background: #591820; border-color: #f2777f; color: white; text-decoration: line-through; }
#genre-filters button.is-excluded::before { content: "\00d7\00a0"; font-weight: 800; text-decoration: none; }
#content-type-filters button:focus-visible, #period-filters button:focus-visible, #genre-filters button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
#catalog-summary { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin: 4px 0 20px; }
#result-count { color: #bbb; margin: 0; }
#poster-size-controls { display: flex; gap: 6px; margin-left: auto; }
#poster-size-controls button { align-items: center; background: #1d1d1d; border: 1px solid #777; border-radius: 50%; color: white; cursor: pointer; display: inline-flex; font: 24px/1 sans-serif; height: 38px; justify-content: center; padding: 0; width: 38px; }
#poster-size-controls button:hover:not(:disabled) { background: white; color: black; }
#poster-size-controls button:disabled { cursor: default; opacity: .35; }
#poster-size-controls button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
#movie-grid { display: grid; gap: 18px; grid-template-columns: repeat(var(--poster-columns, 6), minmax(0, 1fr)); }
#movie-grid .movie-poster-button { aspect-ratio: 1400 / 2070; background: black; border: 0; border-radius: 8px; cursor: zoom-in; display: block; overflow: hidden; padding: 0; }
#movie-grid .movie-poster-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
#movie-grid .movie-poster-button img { border-radius: 8px; display: block; height: 100%; object-fit: contain; width: 100%; }
#bottom-sign-in { background: #1d1d1d; border: 1px solid #777; border-radius: 8px; color: white; cursor: pointer; display: block; font: inherit; margin: 32px auto 8px; padding: 12px 18px; }
#bottom-sign-in:hover { background: white; color: black; }
#bottom-sign-in:focus-visible { outline: 3px solid white; outline-offset: 3px; }
#bottom-sign-in[hidden] { display: none; }
#account-controls { align-items: center; display: flex; flex: 0 0 auto; gap: 12px; justify-content: flex-end; margin-bottom: 0; position: relative; width: max-content; z-index: 1; }
#account-controls a, #account-controls button, #movie-action-modal a, #movie-action-modal button { background: #1d1d1d; border: 1px solid #777; border-radius: 8px; color: white; cursor: pointer; font: inherit; padding: 8px 12px; text-decoration: none; }
#movie-action-modal { background: #111; border: 1px solid white; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); display: grid; gap: 6px; padding: 6px; pointer-events: auto; position: fixed; z-index: 20; }
#movie-action-modal[hidden] { display: none; }
#poster-dialog #movie-action-modal button { position: static; }
#movie-action-modal .action-icon { height: 18px; margin-right: 6px; pointer-events: none; vertical-align: middle; width: 18px; }
#movie-action-modal a:hover, #movie-action-modal button:hover { background: white; color: black; }
#movie-action-modal a:hover .action-icon, #movie-action-modal button:hover .action-icon { filter: invert(1); }
#poster-dialog { background: rgba(0, 0, 0, .96); border: 0; box-sizing: border-box; height: 100dvh; margin: 0; max-height: none; max-width: none; opacity: 1; padding: 48px 24px 64px; transition: opacity 300ms ease; width: 100vw; }
#poster-dialog[open] { display: block; }
#poster-dialog::backdrop { background: rgba(0, 0, 0, .8); transition: background 300ms ease; }
#poster-dialog button { background: rgba(0, 0, 0, .6); border: 1px solid white; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; padding: 8px 12px; position: absolute; z-index: 5; }
#poster-dialog button:disabled { cursor: default; opacity: .35; }
#poster-dialog-close:hover, #poster-dialog-previous:hover, #poster-dialog-next:hover { background: white; color: black; }
#poster-dialog-close:hover .key-icon, #poster-dialog-previous:hover .key-icon, #poster-dialog-next:hover .key-icon { filter: invert(1); }
#poster-dialog button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
#poster-dialog .key-icon { display: inline-block; height: 22px; margin-left: 6px; pointer-events: none; vertical-align: middle; width: 22px; }
#poster-dialog-close { font-size: 32px !important; line-height: 1; right: 16px; top: 12px; }
#poster-dialog-previous { bottom: 16px; left: 16px; }
#poster-dialog-next { bottom: 16px; right: 16px; }
#poster-dialog-viewport { filter: brightness(1) contrast(1) saturate(1); height: calc(100dvh - 112px); overflow: hidden; position: relative; transition: filter 420ms cubic-bezier(.2,.7,.2,1); width: 100%; z-index: 0; }
#poster-dialog-viewport::after { background: rgba(255,255,255,.42); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity 420ms cubic-bezier(.2,.7,.2,1); z-index: 4; }
#poster-dialog.is-washing #poster-dialog-viewport, #poster-dialog.is-closing #poster-dialog-viewport { filter: brightness(1.24) contrast(.52) saturate(.1); }
#poster-dialog.is-washing #poster-dialog-viewport::after, #poster-dialog.is-closing #poster-dialog-viewport::after { opacity: 1; }
#poster-dialog.is-closing { opacity: 0; }
#poster-dialog.is-closing::backdrop { background: rgba(0,0,0,0); }
#poster-dialog-track { height: 100%; position: relative; width: 100%; }
#poster-dialog .poster-panel { height: 100%; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 0; transform: translateX(-50%) scale(.86); transition: opacity 360ms ease, transform 480ms cubic-bezier(.22,.75,.25,1); width: min(54vw, calc((100dvh - 112px) * .72)); z-index: 0; }
#poster-dialog .poster-panel.is-current { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); z-index: 3; }
#poster-dialog .poster-panel.is-previous { opacity: .75; pointer-events: auto; transform: translateX(-115%) scale(.9); z-index: 2; }
#poster-dialog .poster-panel.is-next { opacity: .75; pointer-events: auto; transform: translateX(15%) scale(.9); z-index: 2; }
#poster-dialog .poster-panel.is-before { transform: translateX(-175%) scale(.82); }
#poster-dialog .poster-panel.is-after { transform: translateX(75%) scale(.82); }
#poster-dialog .poster-panel.is-being-seen { animation: poster-wipe-away 420ms ease forwards; }
@keyframes poster-wipe-away { to { clip-path: inset(0 50%); filter: blur(6px); opacity: 0; transform: translateX(-50%) scale(.92); } }
#poster-dialog .poster-link { display: block; height: 100%; width: 100%; }
#poster-dialog .poster-link img { display: block; height: 100%; object-fit: contain; width: 100%; }
#poster-dialog .poster-link:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
@media (max-width: 700px) {
    .catalog { padding: 14px; }
    #site-title { font-size: clamp(2.8rem, 12vw, 4.6rem); }
    #account-controls { flex-wrap: nowrap; }
    #movie-grid { gap: 10px; }
    #poster-dialog { padding-left: 4px; padding-right: 4px; }
    #poster-dialog .key-icon { display: none; }
    #poster-dialog .poster-panel { width: min(100%, calc((100dvh - 112px) * .72)); }
    #poster-dialog .poster-panel.is-previous { opacity: 0; pointer-events: none; transform: translateX(-150%) scale(.94); }
    #poster-dialog .poster-panel.is-next { opacity: 0; pointer-events: none; transform: translateX(50%) scale(.94); }
    #poster-dialog .poster-panel.is-before { transform: translateX(-200%) scale(.9); }
    #poster-dialog .poster-panel.is-after { transform: translateX(100%) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
    #poster-dialog, #poster-dialog::backdrop, #poster-dialog-viewport, #poster-dialog-viewport::after, #poster-dialog .poster-panel { transition-duration: 0ms; }
}