.matita.matita .film{background:var(--paper);padding-bottom:var(--section-y)}.matita.matita .film__title{text-wrap:balance;margin-top:14px}.matita.matita .film__frame{margin:clamp(28px,7vw,44px) 0 0}.matita.matita .film__stage{position:relative}.matita.matita .film__wash{border-radius:var(--r-xl);background:var(--sage-wash);position:absolute;inset:0;transform:translate(10px,10px)}.matita.matita .film__screen{aspect-ratio:4/5;border:1.5px solid var(--field);border-radius:var(--r-xl);background:var(--mist);position:relative;overflow:hidden}.matita.matita .film__video{object-fit:cover;width:100%;height:100%;display:block}.matita.matita .film__placeholder{text-align:center;place-content:center;justify-items:center;gap:10px;height:100%;padding:24px;display:grid}.matita.matita .film__placeholder svg{width:72px;height:72px;color:var(--pencil)}.matita.matita .film__placeholder-title{font-family:var(--serif);color:var(--ink);margin:6px 0 0;font-size:clamp(22px,6vw,30px)}.matita.matita .film__placeholder-hint{max-width:34ch;color:var(--muted);margin:0;font-size:14px}.matita.matita .film__controls{gap:10px;display:flex;position:absolute;bottom:14px;right:14px}.matita.matita .film__btn{border:1.5px solid var(--field);width:44px;height:44px;color:var(--ink);box-shadow:var(--lift);cursor:pointer;background:#fbfaf5eb;border-radius:50%;place-items:center;padding:0;display:grid}.matita.matita .film__btn:focus-visible{outline:2px solid var(--olive);outline-offset:3px}@media (hover:hover){.matita.matita .film__btn:hover{background:var(--butter)}}.matita.matita .film__icon{width:20px;height:20px;overflow:visible}.matita.matita .fi{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.matita.matita .film__placeholder .fi{stroke-width:1.4px}.matita.matita .film__icon--play{display:none}.matita.matita .film[data-paused] .film__icon--play{display:block}.matita.matita .film[data-paused] .film__icon--pause,.matita.matita .film__waves{display:none}.matita.matita .film[data-sound] .film__waves{display:block}.matita.matita .film[data-sound] .film__muted{display:none}.matita.matita .film__loading{pointer-events:none;opacity:0;visibility:hidden;place-items:center;transition:opacity .25s,visibility 0s linear .25s;display:grid;position:absolute;inset:0}.matita.matita .film[data-loading] .film__loading{opacity:1;visibility:visible;transition:opacity .25s .3s,visibility 0s linear .3s}.matita.matita .film__spinner{border:1.5px solid var(--field);width:64px;height:64px;color:var(--ink);box-shadow:var(--lift);background:#fbfaf5eb;border-radius:50%;place-items:center;display:grid}.matita.matita .film__spin{width:40px;height:40px;animation:1.1s linear infinite mt-film-spin;overflow:visible}.matita.matita .film__spin-ring{fill:none;stroke:var(--pencil);stroke-width:1.2px;opacity:.3}.matita.matita .film__spin-pass{fill:none;stroke:currentColor;stroke-width:1px;stroke-linecap:round;opacity:.4}.matita.matita .film__olive{fill:#a3bb74;stroke:currentColor;stroke-width:1.2px}.matita.matita .film__olive-hl{fill:#fff;opacity:.7}@keyframes mt-film-spin{to{transform:rotate(360deg)}}@keyframes mt-film-breathe{0%{opacity:.45}to{opacity:1}}@media (prefers-reduced-motion:reduce){.matita.matita .film__spin{animation:1.2s ease-in-out infinite alternate mt-film-breathe}}.matita.matita .film__caption{flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:22px;display:flex}.matita.matita .film__caption .note{font-size:clamp(20px,5.6vw,26px);transform:rotate(-2deg)}.matita.matita .film__caption-text{color:var(--muted);font-size:14.5px}@media (min-width:700px){.matita.matita .film__screen{aspect-ratio:16/9}.matita.matita .film__controls{bottom:20px;right:20px}}.matita.matita .film--tall .film__frame{width:min(100%,calc(78vh*var(--film-w)/var(--film-h)));width:min(100%,calc(78svh*var(--film-w)/var(--film-h)));margin-inline:auto}.matita.matita .film--tall .film__screen{aspect-ratio:var(--film-w)/var(--film-h)}@media (min-width:900px){.matita.matita .film--tall .film__inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(48px,7vw,110px);display:grid}.matita.matita .film--tall .film__frame{width:min(420px,calc(80vh*var(--film-w)/var(--film-h)));width:min(420px,calc(80svh*var(--film-w)/var(--film-h)));margin:0}}
