@layer reset,theme,base,layout,components;@layer theme{:root{color-scheme:light dark;--bg-color: light-dark(oklch(100% 0 0), oklch(.1681 .0088 307.88));--text-main: light-dark(oklch(25% 0 0), oklch(95% 0 0));--text-muted: light-dark(oklch(.464 0 0), oklch(70% 0 0));--border-color: light-dark(oklch(92% 0 0), oklch(28% 0 0));--bar-fill: light-dark(oklch(.856 0 0), oklch(.3721 .0088 307.88));--bg-hover: light-dark(oklch(95% 0 0), oklch(25% 0 0));--tag-drama: light-dark(oklch(.37 .09 260), oklch(.72 .09 260));--tag-crime: light-dark(oklch(.37 .09 280), oklch(.72 .09 280));--tag-mystery: light-dark(oklch(.37 .09 295), oklch(.72 .09 295));--tag-fantasy: light-dark(oklch(.37 .1 305), oklch(.72 .1 305));--tag-science: light-dark(oklch(.37 .08 220), oklch(.72 .08 220));--tag-comedy: light-dark(oklch(.39 .08 95), oklch(.72 .08 95));--tag-adventure: light-dark(oklch(.37 .09 145), oklch(.72 .09 145));--tag-documentary: light-dark( oklch(.37 .07 180), oklch(.72 .07 180) );--tag-history: light-dark(oklch(.39 .07 115), oklch(.72 .07 115));--tag-animation: light-dark(oklch(.37 .08 195), oklch(.72 .08 195));--tag-thriller: light-dark(oklch(.37 .09 15), oklch(.72 .09 15));--tag-horror: light-dark(oklch(.37 .09 5), oklch(.72 .09 5));--tag-romance: light-dark(oklch(.37 .09 350), oklch(.72 .09 350));--tag-music: light-dark(oklch(.37 .1 330), oklch(.72 .1 330));--tag-action: light-dark(oklch(.37 .09 35), oklch(.72 .09 35));--tag-biography: light-dark(oklch(.39 .07 65), oklch(.72 .07 65));--tag-western: light-dark(oklch(.39 .07 45), oklch(.72 .07 45));--tag-war: light-dark(oklch(.37 .06 235), oklch(.72 .06 235));--font-family: ui-sans-serif, system-ui, sans-serif}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer base{body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:2rem;font-weight:600;text-align:center;margin-bottom:24px;text-wrap:balance}}@layer layout{header,main,footer{width:750px;max-width:100%;margin:0 auto;padding:0 14px}main{margin-top:20px;margin-bottom:20px}footer{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:40px;margin-bottom:24px;padding-top:20px;text-align:center;font-size:.8rem;color:var(--text-muted);& a{color:inherit;text-decoration:underline;&:hover{color:var(--text-main)}}}header h1{padding-top:20px;margin-top:0;font-family:serif}.tabs{display:flex;justify-content:center;gap:32px;position:relative;margin-bottom:32px;&:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--border-color);z-index:-1}.tab{color:var(--text-muted);text-decoration:none;font-size:.8rem;font-weight:400;padding-bottom:8px;border-bottom:2px solid transparent;text-transform:uppercase;transition:border-color .2s ease,color .2s ease;&:hover{color:var(--text-main);border-bottom-color:var(--text-main)}&.active{color:var(--text-main);border-bottom-color:var(--text-main)}}}.skip-link{position:absolute;top:-40px;left:0;background:var(--text-main);color:var(--bg-color);padding:8px;text-decoration:none;z-index:100;&:focus{top:0}}.movies-list{display:flex;flex-direction:column;gap:18px;margin-top:18px;container-type:inline-size}}@layer components{movie-card{display:block}.movie-card{display:flex;flex-direction:column;padding-bottom:18px;border-bottom:1px solid var(--border-color);&.hidden{display:none}}.movie-card__link{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px;&:focus-visible{outline:2px solid var(--text-main);outline-offset:4px;border-radius:2px}}.movie-card--focused .movie-card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.movie-card__tags{display:flex;gap:12px;font-size:.7rem;font-weight:400;text-transform:uppercase;letter-spacing:.05em;line-height:1;margin-bottom:9px}.movie-card__tag{color:var(--tag-color, var(--text-muted))}.movie-card__tag[data-genre=action]{--tag-color: var(--tag-action)}.movie-card__tag[data-genre=adventure]{--tag-color: var(--tag-adventure)}.movie-card__tag[data-genre=animation]{--tag-color: var(--tag-animation)}.movie-card__tag[data-genre=biography]{--tag-color: var(--tag-biography)}.movie-card__tag[data-genre=comedy]{--tag-color: var(--tag-comedy)}.movie-card__tag[data-genre=crime]{--tag-color: var(--tag-crime)}.movie-card__tag[data-genre=documentary]{--tag-color: var(--tag-documentary)}.movie-card__tag[data-genre=drama]{--tag-color: var(--tag-drama)}.movie-card__tag[data-genre=fantasy]{--tag-color: var(--tag-fantasy)}.movie-card__tag[data-genre=history]{--tag-color: var(--tag-history)}.movie-card__tag[data-genre=horror]{--tag-color: var(--tag-horror)}.movie-card__tag[data-genre=music]{--tag-color: var(--tag-music)}.movie-card__tag[data-genre=mystery]{--tag-color: var(--tag-mystery)}.movie-card__tag[data-genre=romance]{--tag-color: var(--tag-romance)}.movie-card__tag[data-genre=science]{--tag-color: var(--tag-science)}.movie-card__tag[data-genre=thriller]{--tag-color: var(--tag-thriller)}.movie-card__tag[data-genre=war]{--tag-color: var(--tag-war)}.movie-card__tag[data-genre=western]{--tag-color: var(--tag-western)}.movie-card__title-row{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}.movie-card__title-group{display:flex;align-items:baseline;gap:4px 10px;min-width:0;flex-wrap:wrap}.movie-card__title{font-size:1.35rem;font-weight:400;line-height:1;margin:0;font-family:serif}.movie-card__original-title{font-size:.9rem;color:var(--text-muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-family:serif}.movie-card__description{font-size:.95rem;font-weight:300;font-style:italic;margin:4px 0 0;line-height:1.4}.movie-card__meta{display:flex;flex-direction:column;gap:10px;font-size:.85rem;color:var(--text-muted);margin-top:10px;line-height:1}.movie-card__meta-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}.movie-card__meta-item{display:flex;align-items:center;gap:6px}.movie-card__icon{width:14px;height:14px;fill:var(--text-muted);flex-shrink:0}.movie-card__watch-links{display:flex;gap:0 8px;flex-wrap:wrap}.movie-card__watch-link{color:var(--text-muted);text-decoration:none;position:relative;z-index:2;transition:color .2s ease;&:hover{color:var(--text-main)}&:not(:last-child):after{content:","}}@container (max-width: 400px){.movie-card__title-row{gap:4px}.movie-card__title,.movie-card__description{white-space:normal;text-overflow:clip}}@view-transition{navigation: auto;}::view-transition-group(root){animation-duration:.15s}::view-transition-old(root),::view-transition-new(root){animation:fade .15s ease}@keyframes fade{0%{opacity:1}to{opacity:1}}.filters-bar{display:flex;align-items:flex-end;gap:clamp(16px,3vw,26px);width:100%;margin-bottom:32px}.filters-bar__year-range{display:flex;align-items:flex-end;gap:8px;flex-shrink:0;width:160px}.filters-bar__divider{color:var(--text-muted);padding-bottom:8px;font-size:.85rem}.filters-bar__input-group,.filters-bar__select-group,.filters-bar__search-group{flex:1;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border-color);padding:0 0 8px;transition:border-color .2s ease;position:relative;&:hover{border-bottom-color:var(--text-main)}}.filters-bar__input-group:focus-within,.filters-bar__search-group:focus-within{border-bottom-color:var(--text-main)}.filters-bar__search-group{flex:2}.filters-bar__label{font-size:.75rem;color:var(--text-muted);line-height:1.2;text-transform:uppercase}.filters-bar__input,.filters-bar__select{width:100%;background:transparent;border:none;font-family:inherit;font-size:.85rem;color:var(--text-main);outline:none;height:calc(1.02rem + 8px);margin-bottom:-8px;padding-bottom:8px}.filters-bar__select{appearance:none;cursor:pointer;padding-right:20px;padding-left:0}.filters-bar__input--number{appearance:textfield;-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{appearance:none;margin:0}}.filters-bar__select-wrapper,.filters-bar__search-wrapper{position:relative;display:flex;align-items:center}.filters-bar__select-icon{position:absolute;right:0;bottom:0;width:14px;height:14px;fill:var(--text-muted);pointer-events:none}.filters-bar__input--search{padding-right:50px;&::-webkit-search-cancel-button{appearance:none}&::placeholder{color:var(--text-muted)}}.filters-bar__hint{position:absolute;right:0;display:flex;gap:3px;font-size:.65rem;color:var(--text-muted);pointer-events:none;opacity:.6;transition:opacity .2s ease;&[hidden]{display:none}}.filters-bar__input--search:focus+.filters-bar__hint--shortcut{opacity:.15}.filters-bar__input--search:not(:placeholder-shown)~.filters-bar__hint--shortcut{display:none}.filters-bar__input--search:not(:placeholder-shown)~.filters-bar__hint--clear{display:flex}.filters-bar__kbd{font-family:inherit;border:1px solid var(--border-color);border-radius:4px;padding:1px 4px;background:transparent}@media (max-width: 600px){.filters-bar{flex-direction:column;align-items:stretch;gap:20px}.filters-bar__year-range,.filters-bar__select-group,.filters-bar__search-group{flex:none;width:100%}.filters-bar__hint{display:none}}.stats{margin-top:8px}.stats__overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:32px}.stats__card{display:flex;flex-direction:column-reverse;gap:4px;border:1px solid var(--border-color);padding:16px;text-align:center}.stats__value{font-size:1.6rem;font-weight:500;line-height:1.2;margin:0}.stats__label{font-size:.78rem;color:var(--text-muted);margin:0}.stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;@media (max-width: 500px){grid-template-columns:1fr}}.stats__section{margin-bottom:32px}.stats__heading{font-size:.7rem;font-weight:400;text-transform:uppercase;letter-spacing:.06em;margin-bottom:0;padding-bottom:10px;border-bottom:1px solid var(--border-color);text-align:left}.stats__item{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:.88rem;border-bottom:1px solid var(--border-color);&:last-child{border-bottom:none}}.stats__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font-size:.85rem}.stats__item-count{font-size:.85rem;font-weight:600;flex-shrink:0;font-variant-numeric:tabular-nums}}