@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/LibreBaskerville-Regular.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/LibreBaskerville-Italic.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/LibreBaskerville-Bold.woff2") format("woff2")}
:root{
  --bg:#F4F4F2; --surface:#FFFFFF; --ink:#1D1D1F; --ink-2:#55555A; --ink-3:#8A8A8F; --line:#E3E3E0;
  --accent:#2F6FEB; --accent-field:color-mix(in srgb,var(--accent) 45%,#FFFFFF);
  --dark:#1E1E20; --dark-ink:#F2F2F0; --dark-ink-2:#A3A3A8;
  --panel-bg:#DCDBD9; --panel-edge:#BDBCB9; --panel-sep:#C8C7C4; --panel-ink:#363638; --panel-ink-2:#77777C; --kbd:#C5C4C1;
  --serif:"Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
  --display:var(--serif);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
p,h1,h2,h3{margin:0;text-wrap:pretty}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Mot de la page, Expression cherchée */
.hero{padding:120px 0 40px;display:grid;justify-items:center;text-align:center}
h1{margin:0;font-weight:400;display:flex;flex-direction:column;align-items:center}
h1 .word{font-family:var(--display);color:var(--accent);font-size:clamp(3.4rem,13vw,9.5rem);line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
h1 .query{display:block;margin-top:20px;font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--ink-2)}
.hero .panel{margin-top:44px;text-align:left}
/* La zone des Réponses garde, sur toute page, quel que soit l'onglet et sur téléphone, la
   hauteur mesurée sur la page What-the-word pilote (cinq Candidats, 174 px, #87) ; une Réponse
   plus longue défile à l'intérieur ; en-tête, champ et onglets restent en place. */
.hero .results{height:174px;overflow-y:auto}
.tagline{margin-top:88px;font-family:var(--display);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.015em;max-width:15em;text-wrap:balance}
.tagline em{display:block;font-style:italic;color:var(--ink-2)}
.buy{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.win{font:inherit;font-size:14px;color:var(--ink-3);background:none;border:0;padding:4px 2px;cursor:pointer;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.win:hover{color:var(--ink);border-color:var(--accent)}
.cta .win{color:var(--dark-ink-2)}.cta .win:hover{color:var(--dark-ink)}
a.win{display:inline-block;text-decoration:none}
.badge{display:inline-block;line-height:0;transition:transform .15s,opacity .15s}
.badge:hover{transform:translateY(-1px);opacity:.9}
.badge img{height:48px;width:auto}

/* Le panneau de l'app, reconstruit en HTML */
.panel{width:min(560px,100%);background:var(--panel-bg);border:1px solid var(--panel-edge);border-radius:14px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.07);color:var(--panel-ink);font-family:var(--sans);overflow:hidden}
.p-head{display:flex;align-items:center;gap:8px;padding:12px 14px 9px;font-size:15px;font-weight:600}
.p-glyph{font-family:var(--serif);font-weight:700;font-size:17px;width:14px;text-align:center;color:#4A4A4D}
.p-icons{margin-left:auto;display:flex;gap:6px}
.p-icon{width:26px;height:24px;border-radius:6px;display:grid;place-items:center;color:#5A5A5E}
.p-icon.on{background:#C9C8C5}
.p-icon svg{width:15px;height:15px}
.nom-du-mode{margin:10px 14px 6px;font-size:13px;font-weight:600;color:var(--panel-ink-2)}
.js .nom-du-mode{display:none}
.js .mode:not(.ouvert){display:none}
.mode+.mode{border-top:1px solid var(--panel-sep)}
.js .mode+.mode{border-top:0}
.field{margin:0 14px;background:#FFFFFF;border:2px solid var(--accent-field);border-radius:9px;padding:8px 12px;font-size:17px;color:#111111;min-height:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-3px;margin-left:1px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.results{padding:10px 14px 14px;font-size:16px;line-height:1.5}
.rubrique+.rubrique{margin-top:9px}
.ligne{padding:3px 0}
.intitule{font-size:13px;font-weight:400;color:var(--panel-ink-2)}
.indication,.brut{color:var(--panel-ink-2)}
.candidat{white-space:nowrap}
/* L'espace qui suit le séparateur, et où la Ligne peut se replier, complète la marge droite. */
.sep{color:var(--panel-ink-2);padding-left:.45em;margin-right:.2em}
/* L'onglet What the word d'une page Synonyme : ce que fait le Mode, et un lien (#87) */
.invite{color:var(--panel-ink-2)}
.invite+.invite{margin-top:4px}
.invite a{color:var(--panel-ink);text-underline-offset:2px}
.js .mode.ouvert .ligne{animation:fin .28s ease-out both}
@keyframes fin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.p-foot{display:flex;align-items:center;gap:2px;padding:7px 8px;border-top:1px solid var(--panel-sep)}
.tabs{display:flex;gap:2px}
html:not(.js) .tabs{display:none}
.tab{font:inherit;font-size:15px;white-space:nowrap;padding:6px 12px;border:0;border-radius:8px;background:none;color:#6E6E73;cursor:pointer;transition:background .15s,color .15s}
.tab:hover{color:#2A2A2C}
.tab[aria-selected="true"],.tab.choisi{background:#FFFFFF;color:#1F1F21;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.keys{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:14px;color:#6E6E73;padding-right:6px}
.kbd{background:var(--kbd);border-radius:6px;padding:1px 7px;font-size:13px;color:#4A4A4D}

/* Le Film (#79). Par défaut, l'affichage fixe : le panneau déplié sur What the word, sa Réponse
   entière — sans JavaScript et sous prefers-reduced-motion. En mouvement sous la classe « anime », que
   film.js pose, et seulement hors prefers-reduced-motion (plus bas). Le bureau est dessiné à
   1200 × 750 et mis à l'échelle de sa boîte en CSS seul (`tan(atan2())` rend le rapport des
   deux longueurs en nombre) ; un navigateur qui ne connaît pas ces fonctions garde l'échelle
   fixe déclarée juste avant. `svh` après `vh` : la hauteur d'écran sans la barre d'un navigateur
   de téléphone, là où elle est connue. Le bureau est un décor : il ne prend pas le pointeur. */
.film{position:relative}
.stage{display:grid;place-items:center;padding:200px 24px 32px}
.screen{position:relative;width:min(1200px,100%,calc((100vh - 236px) * 1.6));width:min(1200px,100%,calc((100svh - 236px) * 1.6))}
.overlay{position:absolute;left:3%;top:0;transform:translateY(-26px);z-index:3;pointer-events:none;width:94%;height:0}
.ov{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(10px)}
.ov.on{opacity:1;transform:none}
.ov .lab{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ov .lab::before{content:"";width:28px;height:1px;background:currentColor}
.ov .big{display:block;margin-top:10px;font-family:var(--display);font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.025em;color:var(--ink)}
.ov .big em{display:block;padding-left:1.4em;font-style:italic;color:var(--ink-2)}
/* Une phrase longue peut passer à la ligne : l'anglaise, à la taille de la maquette, ne tenait pas sur une ligne à 1280 px. */
.ov .big.long{font-size:clamp(1.9rem,3.3vw,3.4rem)}
.desk{position:relative;width:100%;aspect-ratio:1200/750;border-radius:16px;overflow:hidden;container-type:inline-size;
  box-shadow:0 50px 100px -45px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.07)}
.desk-in{position:absolute;left:0;top:0;width:1200px;height:750px;transform-origin:0 0;pointer-events:none;transform:scale(.885);transform:scale(tan(atan2(100cqw,1200px)));
  font-family:var(--sans);background:radial-gradient(110% 80% at 25% 0%,#E9EAEC 0%,#D3D5D9 50%,#C2C5CA 100%)}
.menubar{height:28px;background:rgba(246,246,247,.72);display:flex;align-items:center;gap:20px;padding:0 16px;font-size:13px;color:#262628;border-bottom:1px solid rgba(0,0,0,.06)}
.menubar b{font-weight:700}
.mb-right{margin-left:auto;display:flex;gap:16px;align-items:center;color:#3A3A3C}
.mb-glyph{font-family:var(--serif);font-weight:700;font-size:14px}
.doc{position:absolute;left:56px;top:62px;width:640px;height:640px;background:#FFFFFF;border-radius:12px;box-shadow:0 22px 60px -22px rgba(0,0,0,.38),0 0 0 .5px rgba(0,0,0,.18);overflow:hidden}
.doc-bar{position:relative;height:38px;display:flex;align-items:center;padding:0 14px;background:#F6F6F6;font-size:13px;color:#4A4A4D;font-weight:600}
.lights{display:flex;gap:8px}
/* Fenêtre au premier plan ou non : un seul accent de couleur sur le Site, les pastilles restent grises. */
.lights i{width:12px;height:12px;border-radius:50%;display:block;background:#D2D2D2}
.doc.active .lights i{background:#A4A4A9}
.doc-title{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.fmt{height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#F6F6F6;border-bottom:1px solid #E2E2E2;font-size:12px;color:#4A4A4D}
.fmt span{background:#FFFFFF;border:1px solid #D9D9D9;border-radius:5px;padding:2px 8px}
.fmt .b{font-weight:700}.fmt .i{font-style:italic;font-family:var(--serif)}
.doc-body{padding:52px 72px;font-family:var(--serif);font-size:17px;line-height:1.8;color:#2A2A2C}
.doc-body .doc-h{font-size:19px;font-weight:700;margin-bottom:20px}
.doc-body p+p{margin-top:16px}
.doc-body .doc-h+p{margin-top:0}
.gap{display:inline-block;min-width:5.4em;border-bottom:1.5px solid #A0A0A6;color:#1D1D1F}
.dcaret{display:inline-block;width:1.5px;height:1.05em;background:#1D1D1F;vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
.doc:not(.active) .dcaret{display:none}
.demi-disque{position:absolute;right:0;top:300px;width:46px;height:92px;border-radius:46px 0 0 46px;background:var(--panel-bg);
  border:1px solid var(--panel-edge);border-right:0;display:grid;place-items:center;padding-left:6px;z-index:2;box-shadow:-4px 0 14px -6px rgba(0,0,0,.25)}
.demi-disque .p-glyph{font-size:22px;width:auto}
.halo{position:absolute;right:-50px;top:256px;width:180px;height:180px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent) 0%,color-mix(in srgb,var(--accent) 10%,transparent) 38%,transparent 68%)}
.halo i{position:absolute;inset:0;border-radius:50%;background:inherit}
.demi-disque.cache,.halo.cache{opacity:0}
/* Le panneau déplié, placé comme dans la maquette (mesuré : 22 px du bord droit, 60 px du haut,
   540 px de large, sur un bureau de 1200 × 750) : en haut à droite, sur la fenêtre de texte. Sa
   hauteur suit la Réponse de l'étape, bornée par la zone des Réponses du panneau de la page
   (174 px, #87), sur ordre du pilote ; ce qui passe reste dessous. Écart à l'app, qui fait l'un ou
   l'autre : Hauteur automatique, le panneau suit la Réponse jusqu'à la moitié de l'écran ; à
   hauteur fixe, la Réponse défile dedans. Ni défilement ici, ni demi-écran. */
.desk .f-panel{position:absolute;right:22px;top:60px;width:540px;z-index:2}
.desk .f-reponse{max-height:174px;overflow:hidden;font-size:15px;line-height:1.48}
.f-reponse:not(.affiche){display:none}
.kbd.appui{background:color-mix(in srgb,var(--accent) 45%,#FFFFFF);color:#1F1F21}
html:not(.js) .film .tabs{display:flex}
.pointer{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;z-index:4;display:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.pointer svg{display:block;width:22px;height:22px}
.pointer path{fill:#111111;stroke:#FFFFFF;stroke-width:1.3;stroke-linejoin:round}
.pointer .ring{position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--ink-2);pointer-events:none;z-index:3;
  background:rgba(255,255,255,.7);padding:8px 14px 10px;border-radius:12px}
.hint::after{content:"";width:1px;height:22px;background:linear-gradient(var(--ink-2),transparent)}
.hint.cache{opacity:0}

/* Les trois phrases */
.principles{padding:130px 0 110px}
.principles h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.12;text-align:center;letter-spacing:-.01em}
.principles h2 em{font-style:italic;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.cols p{font-size:17px;color:var(--ink-2)}
.cols b{color:var(--ink);font-weight:600}

/* Le bloc sombre */
.cta{background:var(--dark);color:var(--dark-ink);padding:110px 0;text-align:center}
.cta h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.cta .sub{margin-top:14px;color:var(--dark-ink-2);font-size:17px}
.cta .badge{margin-top:36px}
.fine{margin-top:14px;font-size:13px;color:var(--dark-ink-2)}

/* Le badge en texte, quand la Langue n'a pas le badge officiel (#80) */
.badge.badge-texte{line-height:1.2;padding:12px 20px;border:1px solid currentColor;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none}

/* Autres recherches (maquette) */
.related{padding:46px 0 10px}
.related summary{font-family:var(--serif);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;list-style:none}
.related summary::-webkit-details-marker{display:none}
.related ul,.categorie ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 26px}
.related a,.categorie a{font-size:15px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.related a:hover,.categorie a:hover{color:var(--ink);border-color:var(--accent)}

/* L'index des Pages-réponses, l'accueil anglais qui y mène (#80) */
.index{padding:90px 0 20px}
.index>h1,.index>h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.01em}
.type{margin-top:44px}
.type>h2,.type>h3{font-family:var(--serif);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.categorie{margin-top:22px}
.categorie>h3,.categorie>h4{font-size:17px;font-weight:600}
.categorie ul{margin-top:8px}
.vers-index{margin-top:40px;text-align:center;font-family:var(--display);font-size:1.4rem}
.vers-index a{text-underline-offset:4px;text-decoration-color:var(--accent)}

/* La fenêtre Windows (#82), ouverte au clic par /assets/liste-windows.js : la maquette, à un
   écart près — la marge intérieure passe de la fenêtre à son contenu, pour qu'un clic dans
   la fenêtre ne soit jamais pris pour un clic à côté. Sa page sans JavaScript, et les pages
   du Worker (confirmation, désinscription), reprennent le formulaire et ses styles. */
dialog.pop{border:0;border-radius:18px;padding:0;width:min(420px,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.45)}
dialog.pop::backdrop{background:rgba(29,29,31,.32);backdrop-filter:blur(4px)}
.pop-corps{position:relative;padding:30px 30px 24px}
.pop h2,.liste-windows h1{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.15}
.pop p,.liste-windows p{margin-top:8px;font-size:15px;color:var(--ink-2)}
.liste-windows h1{display:block}
.pop form,.liste-windows form{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.pop form[hidden]{display:none}
.pop input,.liste-windows input{flex:1 1 200px;font:inherit;font-size:16px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.pop input:focus,.liste-windows input:focus{outline:none;border-color:var(--accent)}
.pop button[type=submit],.liste-windows button[type=submit]{font:inherit;font-size:15px;font-weight:600;padding:11px 18px;border-radius:12px;border:0;background:var(--ink);color:var(--surface);cursor:pointer}
.pop button[type=submit]:disabled{opacity:.6;cursor:default}
.pop .x{position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:50%;border:0;background:none;font-size:20px;color:var(--ink-3);cursor:pointer}
.pop .x:hover{background:var(--bg);color:var(--ink)}
.pop .etat{color:var(--ink)}
.pop small,.liste-windows small{display:block;margin-top:14px;font-size:12px;color:var(--ink-3)}
.liste-windows{max-width:420px;margin:0 auto;padding:120px 0 80px}

/* L'accueil qui est aussi l'index (ticket 107) : la maquette du 2026-11-04 (`livrables/site/maquette-accueil.html`) */
.top{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand img{width:26px;height:26px}
.top-link{font-size:14px;color:var(--ink-2);text-decoration:none}
.top-link:hover{color:var(--ink)}
.hero-home{padding:96px 0 40px}
.home-title{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.04;letter-spacing:-.025em;max-width:13em;text-wrap:balance}
.home-title em{display:block;font-style:italic;color:var(--accent)}
.home-sub{margin-top:26px;max-width:34em;font-size:18px;color:var(--ink-2);text-wrap:balance}
.home-sub .try{display:block;margin-top:6px;font-size:14px;color:var(--ink-3)}
.hero-home .panel{margin-top:40px}
.buy small{font-size:13px;color:var(--ink-3)}
.liste-accueil .index{padding:110px 0 30px}
.liste-accueil .index>h2 em{font-style:italic;color:var(--ink-2)}
.index-sub{margin-top:12px;color:var(--ink-2)}
.liste-accueil .type{margin-top:56px}
.liste-accueil .type>h3{font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.liste-accueil .type>h3::before{content:"";width:28px;height:1px;background:currentColor}
.liste-accueil .categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 40px;margin-top:22px}
.liste-accueil .categorie{margin-top:0}
.liste-accueil .categorie>h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.liste-accueil .categorie ul{display:block;margin:0}
.liste-accueil .categorie li{padding:2px 0}
@media (max-width:760px){.hero-home{padding:64px 0 32px}.liste-accueil .index{padding:80px 0 20px}}

/* Pied de page */
footer{padding:40px 0 56px;font-size:13px;color:var(--ink-3);display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:760px){
  .hero{padding:72px 0 32px}
  .tagline{margin-top:56px}
  .cols{grid-template-columns:1fr;gap:26px;margin-top:40px}
  .principles{padding:90px 0}
  .keys{display:none}
  /* Le Film sur téléphone : le panneau et la Languette seuls, sur un bureau de 400 × 600. */
  .stage{padding:190px 16px 24px}
  .screen{width:min(100%,calc((100vh - 214px) * 400 / 600));width:min(100%,calc((100svh - 214px) * 400 / 600))}
  .overlay{left:0;width:100%;transform:translateY(-36px)}
  .ov .big{font-size:1.9rem}
  .ov .big.long{font-size:1.6rem}
  .desk{aspect-ratio:400/600}
  .desk-in{width:400px;height:600px;transform:scale(.8575);transform:scale(tan(atan2(100cqw,400px)))}
  .menubar>span:nth-child(n+4):not(.mb-right),.mb-right span:last-child{display:none}
  .doc{display:none}
  /* La maquette sur son bureau de 620 px (58 px du bord, 70 px du haut, 500 px de large), au bureau de 400 px. */
  .desk .f-panel{right:37px;top:45px;width:323px}
  .desk .f-reponse{font-size:16px}
  .demi-disque{top:254px}.halo{top:210px}
}
@media (prefers-reduced-motion:reduce){
  .caret,.dcaret{animation:none}
  .js .mode.ouvert .ligne{animation:none}
}
/* Le Film en mouvement : jamais sous prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .film.anime{height:620vh}
  .film.anime .stage{position:sticky;top:0;height:100vh;height:100svh}
  .film.anime .ov{transition:opacity .45s ease,transform .45s ease}
  .film.anime .demi-disque{transition:opacity .25s}
  .film.anime .halo{transition:opacity .25s}
  .film.anime .halo i{animation:breathe 3.2s ease-in-out infinite}
  .film.anime .pointer{display:block}
  .film.anime .pointer.clic .ring{animation:ring .45s ease-out}
  .film.anime .hint{display:flex;transition:opacity .3s}
  .film.anime .hint::after{animation:drip 1.6s ease-in-out infinite}
  .film.anime .f-reponse .rubrique>.intitule:not(.vu),.film.anime .f-reponse .ligne:not(.vu){display:none}
  .film.anime .f-reponse .vu{animation:fin .28s ease-out both}
  .film.anime .lights i{transition:background .3s}
}
@keyframes breathe{0%,100%{transform:scale(.82);opacity:.5}50%{transform:scale(1.1);opacity:1}}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}