@layer components{.film-cue{display:inline-flex;align-self:flex-start;justify-self:start;inline-size:fit-content;max-inline-size:100%;align-items:center;gap:.8rem;min-block-size:2.75rem;padding:.35rem 1rem .35rem .35rem;border:1px solid var(--color-line);border-radius:999px;background:var(--color-card);color:var(--color-ink);text-align:start;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.film-cue:hover{border-color:color-mix(in oklab,var(--color-ember) 45%,var(--color-line));box-shadow:0 10px 24px -18px rgba(21,20,15,.45)}.film-cue:focus-visible{outline:2px solid var(--color-ember);outline-offset:3px}.film-cue-disc{position:relative;display:grid;flex:none;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--color-ember);color:#fff}.film-cue-disc svg{inline-size:1.05rem;block-size:1.05rem;margin-inline-start:.12rem;fill:currentColor}.film-cue-disc:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid color-mix(in oklab,var(--color-ember) 45%,transparent)}.film-cue-words{display:flex;min-inline-size:0;flex-direction:column;gap:.1rem}.film-cue-open{font-size:.9375rem;font-weight:650;line-height:1.25}.film-cue-detail{font-size:.8125rem;line-height:1.3;color:var(--color-ink-muted);font-variant-numeric:tabular-nums}.film-cue[data-tone=night]{border-color:rgba(255,255,255,.22);background:rgba(10,24,18,.42);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.film-cue[data-tone=night] .film-cue-detail{color:rgba(255,255,255,.72)}.film-cue[data-tone=night]:hover{border-color:rgba(255,255,255,.45)}.film-cue[data-tone=night]:focus-visible{outline-color:var(--color-ember-on-dark)}@media (prefers-reduced-motion:no-preference){.film-cue-disc svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}.film-cue:hover .film-cue-disc svg{transform:scale(1.12)}.film-cue-disc:after{animation:film-cue-breathe 2.8s ease-in-out infinite}}@keyframes film-cue-breathe{0%,to{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.film-dialog{inline-size:min(76rem,calc(100vw - 2rem));max-inline-size:none;max-block-size:calc(100dvh - 2rem);margin:auto;padding:0;border:1px solid var(--color-forest-line);border-radius:1.25rem;background:var(--color-forest);color:var(--color-on-pine);box-shadow:0 50px 120px -40px rgba(0,0,0,.75);overflow:hidden}.film-dialog::backdrop{background:color-mix(in oklab,var(--color-pine-deep) 88%,transparent);backdrop-filter:blur(6px)}@media (prefers-reduced-motion:no-preference){.film-dialog[open]{animation:film-dialog-in .42s cubic-bezier(.22,1,.36,1) both}.film-dialog[open]::backdrop{animation:film-backdrop-in .32s ease both}}@keyframes film-dialog-in{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}@keyframes film-backdrop-in{0%{opacity:0}to{opacity:1}}.film-dialog-body{display:flex;flex-direction:column;gap:clamp(.75rem,1.6vw,1rem);padding:clamp(.75rem,2vw,1.25rem)}.film-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-inline:.25rem}.film-dialog-title{margin:0;min-inline-size:0;font-family:var(--font-display);font-size:clamp(1.125rem,2vw,1.5rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--color-on-pine);text-wrap:balance}.film-dialog-close{display:grid;flex:none;place-items:center;inline-size:2.75rem;block-size:2.75rem;border:1px solid var(--color-forest-line);border-radius:50%;background:var(--color-forest-raised);color:var(--color-on-pine);cursor:pointer}.film-dialog-close svg{inline-size:1rem;block-size:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.film-dialog-close:hover{border-color:var(--color-on-pine-soft)}.film-dialog-close:focus-visible{outline:2px solid var(--color-ember-on-dark);outline-offset:2px}.film-dialog-frame{position:relative;inline-size:min(100%,calc((100dvh - 10rem) * 16 / 9));aspect-ratio:16/9;margin-inline:auto;border-radius:.75rem;background:#000;overflow:hidden}.film-dialog-frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}.film-dialog-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;margin:0;padding-inline:.25rem;font-size:.8125rem;color:var(--color-on-pine-soft)}.film-dialog-foot a{min-block-size:2.75rem;display:inline-flex;align-items:center;margin-inline-start:auto;color:var(--color-on-pine);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:color-mix(in oklab,currentColor 40%,transparent)}.film-dialog-foot a:hover{text-decoration-color:currentColor}.film-dialog-foot a:focus-visible{outline:2px solid var(--color-ember-on-dark);outline-offset:2px;border-radius:4px}}