/* F4IOZ — « Apprivoise ton VNA »: the welcome's levels, a level's frame (its head, the scene, the desk), Gamma, the
   VNA drawn, the bench, the charts, the choices, the end and the diploma. Only .vn-… classes here; the page's frame is
   jeux.css's (.dx-app, .jeu-panneau…), the hub card's picture too (.vn-il-…). */

.vn-page { --vn-or: #FFC94D; --vn-rose: #FF6FAE; --vn-ciel: #4FC3FF; --vn-vert: #4FE08A; --vn-violet: #A98BFF; --vn-orange: #FF9A4D;
  --vn-ecran: #0A1326; --vn-grille: rgba(150, 185, 235, .16); --vn-chaud: rgba(255, 140, 80, .10); --vn-froid: rgba(70, 160, 255, .11);
  --vn-boitier-1: #2C3F5A; --vn-boitier-2: #18253A; --vn-boitier-bord: #4A6386; }
:root[data-theme="light"] .vn-page { --vn-or: #C98A00; --vn-rose: #D6337A; --vn-ciel: #0A82C8; --vn-vert: #149A4E; --vn-violet: #6B4FD8; --vn-orange: #D9620B;
  --vn-ecran: #F7FAFF; --vn-grille: rgba(30, 60, 110, .14); --vn-chaud: rgba(255, 120, 40, .09); --vn-froid: rgba(40, 120, 230, .09);
  --vn-boitier-1: #DCE6F2; --vn-boitier-2: #B9C9DC; --vn-boitier-bord: #8DA2BC; }

/* ------------------------------------------------------------ the welcome */
.vn-arene { background-image: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--vn-violet) 16%, transparent), transparent 55%),
  radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--vn-rose) 12%, transparent), transparent 55%); }
.vn-accueil { text-align: center; padding: 4px 0; }
.vn-gamma-accueil { display: inline-block; width: 54px; height: 54px; vertical-align: middle; margin-right: 6px; }
.vn-gamma-accueil .vn-gamma-svg { width: 54px; height: 54px; animation: vn-coucou 2.6s ease-in-out infinite; }
@keyframes vn-coucou { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-10deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(0); } }
.vn-accueil h2 { display: inline-block; vertical-align: middle; margin: 2px 0 4px; font-size: 24px; background: linear-gradient(90deg, var(--vn-ciel), var(--vn-violet), var(--vn-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vn-accueil > p { color: var(--text-dim); max-width: 620px; margin: 0 auto 10px; }
.vn-illus { width: min(100%, 460px); height: auto; display: block; margin: 0 auto; overflow: visible; }
.vn-niveaux { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: left; }
.vn-niv { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 10px 54px; border-radius: 16px; cursor: pointer; color: var(--text);
  border: 1px solid var(--border-strong); font: inherit; text-align: left; background: linear-gradient(135deg, color-mix(in srgb, var(--vn-c) 24%, var(--panel-2)), color-mix(in srgb, var(--vn-c) 6%, var(--panel-2)));
  transition: transform var(--anim), box-shadow var(--anim), border-color var(--anim); }
.vn-niveaux li:nth-child(1) .vn-niv { --vn-c: var(--vn-ciel); } .vn-niveaux li:nth-child(2) .vn-niv { --vn-c: var(--vn-or); }
.vn-niveaux li:nth-child(3) .vn-niv { --vn-c: var(--vn-vert); } .vn-niveaux li:nth-child(4) .vn-niv { --vn-c: var(--vn-rose); }
.vn-niveaux li:nth-child(5) .vn-niv { --vn-c: var(--vn-orange); } .vn-niveaux li:nth-child(6) .vn-niv { --vn-c: var(--vn-violet); }
.vn-niv:hover, .vn-niv:focus-visible { transform: translateY(-3px); border-color: var(--vn-c); box-shadow: 0 10px 28px color-mix(in srgb, var(--vn-c) 30%, transparent); outline: none; }
.vn-niv-n { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 16px var(--font-sans);
  color: #0B1220; background: var(--vn-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vn-c) 30%, transparent); }
.vn-niv b { font-size: 15px; }
.vn-niv small { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.vn-niv.verrouille { filter: grayscale(.6) brightness(.9); opacity: .7; cursor: not-allowed; }
.vn-niv.verrouille:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
.vn-niv.verrouille .vn-niv-n::after { content: '🔒'; position: absolute; font-size: 13px; right: -6px; bottom: -6px; }
.vn-etoiles { color: var(--text-muted); letter-spacing: 2px; font-style: normal; font-size: 15px; margin-top: auto; }
.vn-etoiles.vn-ont { color: var(--vn-or); text-shadow: 0 0 8px color-mix(in srgb, var(--vn-or) 50%, transparent); }
.jeu-option .vn-etoiles { font-size: 12px; margin-left: 4px; }
.jeu-option.verrouille { opacity: .55; }
.vn-simule { font-size: 12.5px; margin: 8px 0 0; }
.vn-il-pulse { animation: vn-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.vn-illus .vn-il-cable { fill: none; stroke: var(--vn-ciel); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 4; animation: vn-flux 1.4s linear infinite; }
@keyframes vn-flux { to { stroke-dashoffset: -20; } }
@keyframes vn-pulse { 50% { transform: scale(1.5); opacity: .6; } }

/* ------------------------------------------------------------ playing: the arena takes the panel's room */
@media (min-width: 860px) { .vn-app.vn-joue { grid-template-columns: minmax(0, 1fr); } .vn-app.vn-joue > .vn-panneau { display: none; } }
.vn-jeu { position: relative; }
.vn-niveau { position: relative; display: flex; flex-direction: column; gap: 10px; }
.vn-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vn-titre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vn-titre > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.vn-titre b { font-size: 18px; background: linear-gradient(90deg, var(--vn-or), var(--vn-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vn-titre small { font-size: 12px; color: var(--text-dim); }
.vn-num { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--font-sans); color: #0B1220;
  background: conic-gradient(var(--vn-ciel), var(--vn-violet), var(--vn-rose), var(--vn-or), var(--vn-vert), var(--vn-ciel)); box-shadow: 0 0 14px color-mix(in srgb, var(--vn-violet) 45%, transparent); }
.vn-points { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex: 1 1 120px; justify-content: center; }
.vn-points li { width: 12px; height: 12px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--border-strong); transition: background .3s, transform .3s; }
.vn-points li.ici { border-color: var(--vn-or); background: color-mix(in srgb, var(--vn-or) 35%, var(--panel-2)); transform: scale(1.25); animation: vn-respire 1.6s ease-in-out infinite; }
.vn-points li.fait { background: var(--vn-vert); border-color: var(--vn-vert); }
.vn-points li.rate { background: var(--red); border-color: var(--red); }
@keyframes vn-respire { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--vn-or) 25%, transparent); } }
.vn-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vn-fautes { font: 600 12.5px var(--font-mono); color: var(--red); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--red) 12%, transparent); }
.vn-fautes.vn-zero { color: var(--vn-vert); background: color-mix(in srgb, var(--vn-vert) 12%, transparent); }
.vn-icone { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); cursor: pointer; }
.vn-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vn-icone[aria-pressed="true"] { border-color: var(--vn-vert); color: var(--vn-vert); }
.vn-icone[aria-pressed="false"] { color: var(--text-muted); }
.vn-icone .vn-barre { display: none; } .vn-icone[aria-pressed="false"] .vn-barre { display: inline; } .vn-icone[aria-pressed="false"] .vn-ondes { display: none; }

.vn-corps { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 14px; align-items: stretch; }
.vn-scene { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.vn-pupitre { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }

/* One screen on a desktop: the level fills the arena, the desk scrolls inside itself if it must. */
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran .vn-app.vn-joue .vn-arene { display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px; }
  body.ecran .vn-app.vn-joue .vn-jeu { flex: 1; min-height: 0; display: flex; }
  body.ecran .vn-app.vn-joue .vn-niveau { flex: 1; min-height: 0; }
  body.ecran .vn-app.vn-joue .vn-corps { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.ecran .vn-app.vn-joue .vn-pupitre { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
  body.ecran .vn-app.vn-joue .vn-scene { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  body.ecran .vn-accueil .vn-illus { width: min(100%, 380px); }
}

/* ------------------------------------------------------------ Gamma and its bubble */
.vn-gamma { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; }
.vn-gamma-svg { width: 64px; height: 64px; overflow: visible; animation: vn-flotte 3.2s ease-in-out infinite; }
.vn-gamma[data-humeur="content"] .vn-gamma-svg { animation: vn-saute .6s ease-out 2, vn-flotte 3.2s ease-in-out .9s infinite; }
.vn-gamma[data-humeur="oups"] .vn-gamma-svg { animation: vn-penche .5s ease-out; }
.g-corps { fill: var(--vn-ciel); stroke: color-mix(in srgb, var(--vn-ciel) 60%, #000); stroke-width: 1.5; }
.g-visage { fill: #0B1730; }
.g-oeil { fill: #fff; } .g-reflet { fill: #0B1730; }
.g-bouche { fill: none; stroke: var(--vn-or); stroke-width: 2.4; stroke-linecap: round; }
.g-joue { fill: var(--vn-rose); opacity: .7; }
.g-ant { stroke: color-mix(in srgb, var(--vn-ciel) 60%, #000); stroke-width: 2.5; stroke-linecap: round; }
.g-boule { fill: var(--vn-rose); animation: vn-clignote 1.6s ease-in-out infinite; }
.g-lettre { font: 900 12px var(--font-sans); fill: #0B1730; }
.g-bras { fill: none; stroke: var(--vn-ciel); stroke-width: 3; stroke-linecap: round; }
.vn-gamma[data-humeur="oups"] .g-visage { fill: #3A0F22; }
.vn-bulle { position: relative; padding: 10px 13px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border-strong); font-size: 14px; line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.vn-bulle::before { content: ''; position: absolute; left: -8px; top: 20px; width: 14px; height: 14px; background: var(--panel-2); border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); transform: rotate(45deg); }
.vn-gamma.parle .vn-bulle { animation: vn-bulle .35s ease-out; }
.vn-niveau.sans-mascotte .vn-gamma { grid-template-columns: minmax(0, 1fr); }
.vn-niveau.sans-mascotte .vn-gamma-svg, .vn-niveau.sans-mascotte .vn-bulle::before { display: none; }
@keyframes vn-flotte { 50% { transform: translateY(-4px); } }
@keyframes vn-saute { 40% { transform: translateY(-10px) scale(1.06); } }
@keyframes vn-penche { 30% { transform: rotate(-12deg); } 70% { transform: rotate(8deg); } }
@keyframes vn-clignote { 50% { opacity: .35; } }
@keyframes vn-bulle { from { transform: translateY(6px) scale(.97); opacity: .3; } }

/* ------------------------------------------------------------ the desk: controls, feedback, buttons */
.vn-controles { display: flex; flex-direction: column; gap: 10px; }
.vn-retour:empty { display: none; }
.vn-retour { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; border-left: 4px solid var(--info); background: color-mix(in srgb, var(--info) 10%, var(--panel-2)); animation: vn-bulle .3s ease-out; }
.vn-retour.ok { border-left-color: var(--vn-vert); background: color-mix(in srgb, var(--vn-vert) 13%, var(--panel-2)); }
.vn-retour.ko { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--panel-2)); }
.vn-retour.ok b { color: var(--vn-vert); } .vn-retour.ko b { color: var(--red); }
.vn-pied { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-pied:empty { display: none; }
.vn-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 650 14px var(--font-sans); cursor: pointer;
  transition: transform var(--anim), border-color var(--anim), box-shadow var(--anim); }
.vn-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); }
.vn-btn:disabled { opacity: .45; cursor: not-allowed; }
.vn-valider, .vn-suivant { border-color: transparent; color: #0B1220; background: linear-gradient(135deg, var(--vn-vert), var(--vn-ciel)); box-shadow: 0 6px 18px color-mix(in srgb, var(--vn-ciel) 30%, transparent); }
.vn-suivant { background: linear-gradient(135deg, var(--vn-or), var(--vn-rose)); box-shadow: 0 6px 18px color-mix(in srgb, var(--vn-rose) 32%, transparent); animation: vn-appel 1.4s ease-in-out infinite; }
.vn-gros { min-height: 50px; font-size: 17px; padding: 0 26px; }
.vn-quitter { min-height: 38px; }
@keyframes vn-appel { 50% { transform: scale(1.04); } }
.vn-but { margin: 0; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; background: color-mix(in srgb, var(--vn-or) 12%, var(--panel-2)); border: 1px dashed color-mix(in srgb, var(--vn-or) 60%, transparent); }
.vn-reste { margin: 0; font: 600 13px var(--font-mono); color: var(--vn-or); }
.vn-astuce { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.vn-curseur { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.vn-curseur > span { display: flex; justify-content: space-between; gap: 8px; }
.vn-curseur b { color: var(--vn-or); }
.vn-curseur input[type="range"] { width: 100%; accent-color: var(--vn-rose); height: 28px; }
.vn-lambda { margin: 0; font-size: 13px; color: var(--vn-violet); }
.vn-secoue { animation: vn-secoue .4s ease-in-out; }
@keyframes vn-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.vn-pop { animation: vn-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes vn-pop { from { transform: scale(.9); opacity: .4; } }
.vn-etincelles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* ------------------------------------------------------------ choices */
.vn-qcm { display: flex; flex-direction: column; gap: 8px; }
.vn-question { margin: 0; font-weight: 650; font-size: 14.5px; }
.vn-choix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.vn-qcm.grand .vn-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vn-qcm.grand .vn-question { font-size: 19px; line-height: 1.35; }
.vn-rep { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 12px; cursor: pointer; color: var(--text); font: 550 14px/1.35 var(--font-sans);
  border: 1px solid var(--border-strong); background: var(--panel-2); border-left: 5px solid var(--rc); transition: transform var(--anim), background var(--anim), box-shadow var(--anim); }
.vn-qcm.grand .vn-rep { min-height: 64px; font-size: 15.5px; }
.vn-rep.c0 { --rc: var(--vn-ciel); } .vn-rep.c1 { --rc: var(--vn-or); } .vn-rep.c2 { --rc: var(--vn-rose); } .vn-rep.c3 { --rc: var(--vn-violet); }
.vn-rep:hover:not(:disabled) { transform: translateX(3px); background: color-mix(in srgb, var(--rc) 14%, var(--panel-2)); }
.vn-rep:disabled { cursor: default; opacity: .55; }
.vn-rep.juste { opacity: 1; border-color: var(--vn-vert); border-left-color: var(--vn-vert); background: color-mix(in srgb, var(--vn-vert) 20%, var(--panel-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vn-vert) 30%, transparent); }
.vn-rep.faux { opacity: 1; border-color: var(--red); border-left-color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--panel-2)); }
.vn-lettre { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 13px var(--font-sans); color: #0B1220; background: var(--rc); }
.vn-rep.juste .vn-lettre { background: var(--vn-vert); } .vn-rep.faux .vn-lettre { background: var(--red); color: #fff; }

/* ------------------------------------------------------------ the VNA drawn */
.vn-vna-hote { flex: 1; min-height: 0; display: grid; place-items: center; }
.vn-vna { width: 100%; max-width: 640px; max-height: 100%; height: auto; overflow: visible; }
.vn-b1 { stop-color: var(--vn-boitier-1); } .vn-b2 { stop-color: var(--vn-boitier-2); }
.vn-boitier { stroke: var(--vn-boitier-bord); stroke-width: 2; }
.vn-ombre { fill: #000; opacity: .25; }
.vn-ecrou { fill: #C7CED8; stroke: #7C8796; stroke-width: 1.2; }
.vn-ame { fill: #4A3A10; }
.vn-marche { fill: #39465A; stroke: #7C8796; } .vn-marche-bt { fill: var(--vn-vert); }
.vn-usb { fill: #1A2230; stroke: #7C8796; }
.vn-etiq { font: 800 13px var(--font-mono); fill: var(--vn-or); letter-spacing: .5px; }
.vn-cadre-ecran { fill: #070C16; stroke: #3B4C66; stroke-width: 2; }
.vn-molette { fill: #26364E; stroke: #7C8796; stroke-width: 2; } .vn-molette-c { fill: #3A4D6A; stroke: #8FA0B8; }
.vn-cran { stroke: #8FA0B8; stroke-width: 2; stroke-linecap: round; }
.vn-marque { font: 900 17px var(--font-sans); fill: color-mix(in srgb, var(--vn-ciel) 80%, #fff); letter-spacing: 3px; }
.vn-plage { font: 600 9.5px var(--font-mono); fill: #9FB2CC; }
:root[data-theme="light"] .vn-marque { fill: #1B3B66; } :root[data-theme="light"] .vn-plage { fill: #3C5272; }
.vn-e-fond { fill: #050A14; } .vn-e-grille path { stroke: rgba(120, 160, 220, .22); stroke-width: 1; }
.vn-e-trace { fill: none; stroke: #FFD34D; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 3px #FFB020); }
.vn-e-marq { fill: #4FE08A; } .vn-e-txt { font: 600 10px var(--font-mono); fill: #9FD8FF; } .vn-e-txt.ch { fill: #FFD34D; }
.vn-e-smith { fill: #0B1630; stroke: #9FB8DA; stroke-width: 1.5; } .vn-e-smith-r { fill: none; stroke: rgba(160, 190, 230, .35); }
.vn-e-brut { fill: none; stroke: #FF6FAE; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vn-e-point { fill: #4FE08A; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 4px #4FE08A); }
.vn-e-menu rect { fill: #142238; stroke: #3B5478; } .vn-e-menu text { font: 700 11px var(--font-mono); fill: #9FB8DA; }
.vn-e-menu.ici rect { fill: #FFC94D; stroke: #FFE29A; } .vn-e-menu.ici text { fill: #1A1200; }
.vn-e-menu.fait rect { fill: #11402A; stroke: #4FE08A; } .vn-e-menu.fait text { fill: #4FE08A; }
.vn-chaud { cursor: pointer; outline: none; }
.vn-chaud-zone { fill: transparent; stroke: transparent; stroke-width: 2.5; transition: fill .2s, stroke .2s; }
.vn-chaud:hover .vn-chaud-zone, .vn-chaud:focus-visible .vn-chaud-zone { fill: color-mix(in srgb, var(--vn-or) 16%, transparent); stroke: var(--vn-or); }
.vn-chaud.actif .vn-chaud-zone { fill: color-mix(in srgb, var(--vn-rose) 18%, transparent); stroke: var(--vn-rose); }
.vn-chaud.indice .vn-chaud-zone { fill: color-mix(in srgb, var(--vn-vert) 25%, transparent); stroke: var(--vn-vert); }
.vn-chaud-pulse { fill: var(--vn-or); opacity: .9; animation: vn-pulse 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.vn-chaud.vu .vn-chaud-pulse { fill: var(--vn-vert); animation: none; opacity: .85; }
.sans-pulse .vn-chaud-pulse { display: none; }
.vn-fiche { padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--vn-rose) 16%, var(--panel-2)), color-mix(in srgb, var(--vn-violet) 12%, var(--panel-2)));
  border: 1px solid color-mix(in srgb, var(--vn-rose) 50%, transparent); display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.vn-fiche b { font-size: 16px; color: var(--vn-rose); }
.vn-parties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-size: 13.5px; }
.vn-parties li { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.vn-coche { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); }
.vn-parties li.vu { border-color: var(--vn-vert); } .vn-parties li.vu .vn-coche { background: var(--vn-vert); border-color: var(--vn-vert); box-shadow: inset 0 0 0 3px var(--panel-2); }

/* ------------------------------------------------------------ matching */
.vn-associe { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 12px; align-content: start; }
.vn-termes, .vn-defs { display: flex; flex-direction: column; gap: 8px; }
.vn-terme, .vn-def { text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; color: var(--text); font: 600 14px/1.35 var(--font-sans); border: 2px solid var(--border-strong);
  background: var(--panel-2); transition: transform var(--anim), box-shadow var(--anim), background var(--anim); }
.vn-def { font-weight: 450; font-size: 13.5px; }
.vn-terme { --tc: var(--vn-ciel); border-color: color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 14%, var(--panel-2)); min-height: 52px; }
.vn-app .c0 { --tc: var(--vn-ciel); } .vn-app .c1 { --tc: var(--vn-or); } .vn-app .c2 { --tc: var(--vn-rose); } .vn-app .c3 { --tc: var(--vn-violet); } .vn-app .c4 { --tc: var(--vn-vert); } .vn-app .c5 { --tc: var(--vn-orange); }
.vn-terme:hover, .vn-def:hover { transform: translateY(-1px); }
.vn-terme.choisi { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 45%, transparent); transform: scale(1.03); }
.vn-terme.lie { opacity: .45; cursor: default; transform: none; }
.vn-def.lie { cursor: default; border-color: var(--tc); background: color-mix(in srgb, var(--tc) 18%, var(--panel-2)); animation: vn-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.vn-def.lie b { color: var(--tc); margin-right: 4px; }

/* ------------------------------------------------------------ |Γ|: the waves and the gauges */
.vn-ondes-hote { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.vn-ondes-toile { width: 100%; flex: 1; min-height: 180px; border-radius: 14px; }
.vn-jauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vn-jauge { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--jc) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--jc) 45%, transparent); }
.vn-jauge.j1 { --jc: var(--vn-or); } .vn-jauge.j2 { --jc: var(--vn-ciel); } .vn-jauge.j3 { --jc: var(--vn-rose); }
.vn-jauge span { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.vn-jauge b { font-size: 24px; color: var(--jc); }
.vn-barre-p { display: block; height: 7px; border-radius: 4px; background: var(--well); overflow: hidden; }
.vn-barre-p i { display: block; height: 100%; background: linear-gradient(90deg, var(--vn-vert), var(--vn-or), var(--vn-rose)); transition: width .15s; }

/* ------------------------------------------------------------ the bench */
.vn-banc-hote { flex: 1; min-height: 0; display: grid; place-items: center; }
.vn-banc { width: 100%; max-width: 680px; max-height: 100%; height: auto; overflow: visible; }
.vn-cable { fill: none; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.vn-cable.a { stroke: var(--vn-ciel); } .vn-cable.b { stroke: var(--vn-rose); }
.vn-bout-sma { fill: #C7CED8; stroke: #7C8796; }
.vn-etiq-cable { font: 700 13px var(--font-sans); fill: var(--text-dim); }
.vn-etiq-etalon { font: 800 13px var(--font-mono); fill: var(--vn-or); }
.vn-thru { fill: none; stroke: var(--vn-or); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vn-or) 60%, transparent)); }
.vn-cible { fill: transparent; stroke: transparent; stroke-width: 3; stroke-dasharray: 6 5; cursor: pointer; }
.vise .vn-cible, .vn-cible.survol { stroke: var(--vn-or); fill: color-mix(in srgb, var(--vn-or) 12%, transparent); animation: vn-tourne 4s linear infinite; transform-box: fill-box; transform-origin: center; }
.vn-cible.survol { fill: color-mix(in srgb, var(--vn-vert) 25%, transparent); stroke: var(--vn-vert); }
@keyframes vn-tourne { to { transform: rotate(360deg); } }
.vn-etalon, .vn-etiq-etalon, .vn-thru, .vn-etiq-cable { pointer-events: none; }
.vn-etalon .pi-corps { stroke-width: .9; }
.vn-plateau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vn-piece { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 12px; cursor: grab; color: var(--text); font: 600 13px/1.25 var(--font-sans); text-align: left;
  border: 2px solid var(--border-strong); background: var(--panel-2); touch-action: none; user-select: none; -webkit-user-select: none; transition: transform var(--anim), box-shadow var(--anim), opacity var(--anim); }
.vn-piece svg { width: 30px; height: 30px; flex: none; }
.vn-piece.cable { border-color: color-mix(in srgb, var(--vn-ciel) 60%, transparent); }
.vn-piece.etalon { border-color: color-mix(in srgb, var(--vn-or) 55%, transparent); }
.vn-piece.thru { border-color: color-mix(in srgb, var(--vn-rose) 55%, transparent); }
.vn-piece:hover:not(:disabled) { transform: translateY(-2px); }
.vn-piece.choisie { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vn-or) 50%, transparent); transform: scale(1.03); }
.vn-piece:disabled { opacity: .3; cursor: default; }
.vn-fantome { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg) scale(1.08); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); opacity: .95; }
.pi-cable { fill: none; stroke-width: 3; stroke-linecap: round; } .pi-cable.a { stroke: var(--vn-ciel); } .pi-cable.b { stroke: var(--vn-rose); }
.pi-sma { fill: #E3C064; stroke: #8A6A1E; }
.pi-corps { stroke: #8A6A1E; stroke-width: 1.2; } .pi-corps.o { fill: var(--vn-ciel); } .pi-corps.s { fill: var(--vn-rose); } .pi-corps.l { fill: var(--vn-vert); }
.pi-trait { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pi-thru { fill: none; stroke: var(--vn-or); stroke-width: 3; }
.vn-menu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-radius: 14px; background: #070C16; border: 2px solid #3B4C66; }
.vn-menu-titre { font: 800 12px var(--font-mono); color: #FFD34D; padding: 0 4px; }
.vn-menu-bt { min-height: 38px; padding: 0 11px; border-radius: 8px; border: 1px solid #3B5478; background: #142238; color: #9FB8DA; font: 700 12.5px var(--font-mono); cursor: pointer; }
.vn-menu-bt.ici { background: #FFC94D; color: #1A1200; border-color: #FFE29A; animation: vn-appel 1.4s ease-in-out infinite; }
.vn-menu-bt.fait { background: #11402A; color: #4FE08A; border-color: #4FE08A; }
.vn-menu-bt.fait::after { content: ' ✓'; }

/* ------------------------------------------------------------ charts */
.vn-smith-hote { position: relative; flex: 1; min-height: 0; display: flex; }
.vn-smith { width: 100%; height: 100%; min-height: 300px; display: block; touch-action: manipulation; cursor: crosshair; }
.vn-lecture { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-dim); }
.vn-smith-hote .vn-lecture { position: absolute; left: 6px; bottom: 4px; padding: 5px 9px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: blur(3px); }
.vn-lecture b { color: var(--vn-or); font-weight: 700; }
.vn-piege { flex: 1; min-height: 0; display: flex; }
.vn-piege-toile { width: 100%; height: 100%; min-height: 300px; cursor: pointer; }
.vn-ant-dessin { flex: none; }
.vn-ant-svg { width: 100%; height: auto; max-height: 120px; display: block; overflow: visible; }
.vn-mat { stroke: var(--text-dim); stroke-width: 5; stroke-linecap: round; }
.vn-hauban { stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 3 3; }
.vn-fil { stroke: var(--vn-or); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--vn-or) 60%, transparent)); transition: d .35s; }
.vn-fil.coupe { animation: vn-coupe .5s ease-out; } .vn-fil.rallonge { animation: vn-rallonge .5s ease-out; }
@keyframes vn-coupe { 30% { stroke: var(--vn-rose); } } @keyframes vn-rallonge { 30% { stroke: var(--vn-vert); } }
.vn-bout-fil { fill: var(--vn-rose); }
.vn-balun { fill: var(--panel-2); stroke: var(--text-dim); }
.vn-coax { fill: none; stroke: var(--text-muted); stroke-width: 4; stroke-linecap: round; }
.vn-sol { stroke: var(--vn-vert); stroke-width: 3; opacity: .6; } .vn-radian { stroke: var(--text-muted); stroke-width: 2; }
.vn-ant-txt { font: 700 14px var(--font-sans); fill: var(--text); } .vn-ant-txt.dim { fill: var(--text-dim); font-weight: 600; font-size: 13px; }
.vn-ant-mesures { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(170px, 1fr); gap: 10px; align-items: center; }
.vn-graphe { width: 100%; height: 100%; min-height: 240px; display: block; border-radius: 10px; cursor: crosshair; }
.vn-smith.petit { min-height: 170px; cursor: default; }
.vn-ant-ctl { display: flex; flex-direction: column; gap: 8px; }
.vn-ciseaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vn-reglage { min-height: 46px; }
.vn-reglage.couper { border-color: color-mix(in srgb, var(--vn-rose) 60%, transparent); background: color-mix(in srgb, var(--vn-rose) 10%, var(--panel-2)); }
.vn-reglage.rallonger { border-color: color-mix(in srgb, var(--vn-vert) 60%, transparent); background: color-mix(in srgb, var(--vn-vert) 10%, var(--panel-2)); }
.vn-comp-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vn-comp-svg { width: 220px; height: 70px; flex: none; }
.vn-c-fil { stroke: var(--text-dim); stroke-width: 3; fill: none; }
.vn-c-self { fill: none; stroke: var(--vn-orange); stroke-width: 4; stroke-linecap: round; }
.vn-c-plaque { stroke: var(--vn-ciel); stroke-width: 6; stroke-linecap: round; }
.vn-c-sma { fill: #E3C064; stroke: #8A6A1E; }
.vn-c-boite { fill: color-mix(in srgb, var(--vn-violet) 28%, var(--panel-2)); stroke: var(--vn-violet); stroke-width: 2; }
.vn-c-q { font: 900 32px var(--font-sans); fill: var(--vn-or); animation: vn-respire-q 1.6s ease-in-out infinite; }
.vn-c-port { font: 700 10px var(--font-mono); fill: var(--vn-or); }
@keyframes vn-respire-q { 50% { opacity: .5; } }
.vn-legende-r { color: var(--vn-vert); font-weight: 800; } .vn-legende-x { color: var(--vn-orange); font-weight: 800; }

/* ------------------------------------------------------------ the quiz, the end, the diploma */
.vn-quiz-carte { --tc: var(--vn-ciel); padding: 18px 20px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--tc) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 16%, var(--panel-2)), var(--panel-2) 70%); animation: vn-pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.vn-quiz-num { margin: 0 0 6px; font: 700 12.5px var(--font-mono); color: var(--tc); text-transform: uppercase; letter-spacing: .8px; }
.vn-bilan { text-align: center; padding: 18px; border-radius: 20px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--vn-or) 22%, transparent), transparent 70%), var(--panel-2);
  border: 2px solid color-mix(in srgb, var(--vn-or) 55%, transparent); animation: vn-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.vn-bilan.rate { border-color: color-mix(in srgb, var(--red) 50%, transparent); background: var(--panel-2); }
.vn-bilan-titre { margin: 0; font: 800 24px var(--font-sans); }
.vn-bilan-etoiles { margin: 6px 0; font-size: 54px; line-height: 1; letter-spacing: 6px; }
.vn-bilan-etoiles span { color: var(--border-strong); display: inline-block; }
.vn-bilan-etoiles span.pleine { color: var(--vn-or); text-shadow: 0 0 18px color-mix(in srgb, var(--vn-or) 70%, transparent); animation: vn-etoile .6s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes vn-etoile { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
.vn-bilan-score { margin: 4px 0; display: flex; flex-direction: column; align-items: center; } .vn-bilan-score small { color: var(--text-dim); } .vn-bilan-score b { font-size: 32px; color: var(--vn-ciel); }
.vn-bilan-mot { margin: 4px 0 0; font-weight: 700; color: var(--vn-vert); } .vn-bilan-mot.record { color: var(--vn-rose); } .vn-bilan-mot.ouvre { color: var(--vn-violet); }
.vn-diplome { margin-top: 12px; padding: 8px; border-radius: 18px; background: conic-gradient(from 30deg, var(--vn-ciel), var(--vn-violet), var(--vn-rose), var(--vn-or), var(--vn-vert), var(--vn-ciel)); }
.vn-dip-cadre { position: relative; overflow: hidden; padding: 22px 26px; border-radius: 12px; background: #FFFDF6; color: #1B1B2F; text-align: center; }
.vn-dip-smith { position: absolute; right: -70px; bottom: -70px; width: 240px; height: 240px; fill: none; stroke: #E4D9F7; stroke-width: .02; opacity: .7; }
.vn-dip-titre { position: relative; margin: 0; font: 900 26px/1.15 Georgia, 'Times New Roman', serif; color: #3B1E7A; letter-spacing: .5px; }
.vn-dip-a { position: relative; margin: 8px 0 0; font-style: italic; color: #5A4A7A; }
.vn-dip-nom { position: relative; margin: 6px 0; font: 600 17px Georgia, serif; }
.vn-dip-pour { position: relative; margin: 6px auto; max-width: 520px; font-size: 14px; color: #33304A; }
.vn-dip-niveaux { position: relative; list-style: none; margin: 10px auto; padding: 0; max-width: 420px; text-align: left; font-size: 13px; display: grid; gap: 2px; }
.vn-dip-niveaux li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted #C8BEDF; padding: 2px 0; }
.vn-dip-niveaux b { color: #C98A00; letter-spacing: 2px; } .vn-dip-niveaux i { color: #D9D2E6; font-style: normal; }
.vn-dip-pied { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12.5px; color: #4A4560; }
.vn-dip-signe { display: inline-flex; align-items: center; gap: 6px; font-style: italic; }
.vn-dip-signe .vn-gamma-svg { width: 36px; height: 36px; animation: none; }
.vn-dip-signe .g-corps { fill: #4FC3FF; } .vn-dip-signe .g-boule { fill: #FF6FAE; animation: none; } .vn-dip-signe .g-bouche { stroke: #E0A800; }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1099px) { .vn-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px) {
  /* Stacked: Gamma's words first, then the scene, the answer said, « Next », the controls. */
  .vn-corps { display: flex; flex-direction: column; }
  .vn-pupitre { display: contents; }
  .vn-gamma { order: -1; } .vn-retour { order: 1; } .vn-pied { order: 2; } .vn-controles { order: 3; }
  .vn-smith { aspect-ratio: 1; height: auto; min-height: 0; }
  .vn-piege-toile { aspect-ratio: 1; height: auto; min-height: 0; }
  .vn-graphe { height: 240px; }
  .vn-ondes-toile { height: 200px; flex: none; }
}
@media (max-width: 560px) {
  .vn-niveaux { grid-template-columns: minmax(0, 1fr); }
  .vn-tete { gap: 8px; } .vn-titre b { font-size: 16px; }
  .vn-points { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .vn-ant-mesures { grid-template-columns: minmax(0, 1fr); }
  .vn-smith.petit { aspect-ratio: auto; height: 220px; }
  .vn-qcm.grand .vn-choix { grid-template-columns: minmax(0, 1fr); }
  .vn-qcm.grand .vn-question { font-size: 17px; }
  .vn-associe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
  .vn-terme, .vn-def { padding: 8px 9px; font-size: 13px; }
  .vn-jauge b { font-size: 19px; }
  .vn-gamma { grid-template-columns: 48px minmax(0, 1fr); } .vn-gamma-svg { width: 48px; height: 48px; }
  .vn-bilan-etoiles { font-size: 44px; }
  .vn-dip-cadre { padding: 16px 14px; } .vn-dip-titre { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .vn-gamma-svg, .vn-gamma[data-humeur] .vn-gamma-svg, .g-boule, .vn-chaud-pulse, .vn-il-pulse, .vn-illus .vn-il-cable, .vn-suivant, .vn-menu-bt.ici, .vn-points li.ici,
  .vise .vn-cible, .vn-c-q, .vn-bilan-etoiles span.pleine, .vn-pop, .vn-secoue, .vn-bilan, .vn-quiz-carte, .vn-def.lie, .vn-gamma.parle .vn-bulle { animation: none; }
}

/* ------------------------------------------------------------ printing the diploma: only it */
@media print {
  body.vn-page * { visibility: hidden; }
  body.vn-page .vn-diplome, body.vn-page .vn-diplome * { visibility: visible; }
  body.vn-page .vn-diplome { position: fixed; left: 0; top: 0; width: 100%; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.vn-page .vn-dip-cadre { padding: 40px; }
}

/* ------------------------------------------------------------ the quiz's Smith chart, for the eye */
.vn-quiz-deco { flex: 1; min-height: 120px; display: grid; place-items: center; opacity: .9; }
.vn-quiz-deco svg { width: min(100%, 300px); max-height: 100%; height: auto; overflow: visible; }
.vn-quiz-deco .d-disque { fill: var(--vn-ecran); stroke: var(--text); stroke-width: .018; }
.vn-quiz-deco .d-r { fill: none; stroke-width: .012; opacity: .6; }
.vn-quiz-deco .d0 { stroke: var(--vn-violet); } .vn-quiz-deco .d1 { stroke: var(--vn-ciel); } .vn-quiz-deco .d2 { stroke: var(--vn-vert); stroke-width: .02; } .vn-quiz-deco .d3 { stroke: var(--vn-or); } .vn-quiz-deco .d4 { stroke: var(--vn-rose); }
.vn-quiz-deco .d-x { fill: none; stroke: var(--vn-orange); stroke-width: .012; opacity: .5; }
.vn-quiz-deco .d-axe { stroke: var(--text-dim); stroke-width: .01; }
.vn-quiz-deco .d-ros { fill: none; stroke: var(--vn-or); stroke-width: .014; stroke-dasharray: .05 .05; }
.vn-quiz-deco .d-tourne { animation: vn-tourne 6s linear infinite; }
.vn-quiz-deco .d-point { fill: var(--vn-rose); stroke: #fff; stroke-width: .015; filter: drop-shadow(0 0 .04px var(--vn-rose)); }
.vn-quiz-deco .d-centre { fill: var(--vn-vert); }
@media (prefers-reduced-motion: reduce) { .vn-quiz-deco .d-tourne { animation: none; } }
@media (max-width: 859px) { .vn-quiz-deco { display: none; } }
@media (prefers-reduced-motion: reduce) { .vn-gamma-accueil .vn-gamma-svg { animation: none; } }

/* ------------------------------------------------------------ Gamma's humour: its button, its quips, its moods */
.vn-gamma-bt { position: relative; grid-row: span 2; align-self: start; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.vn-gamma-bt:focus-visible { outline: 2px solid var(--vn-or); outline-offset: 3px; }
.vn-quip { grid-column: 2; margin: 2px 0 0; padding: 6px 11px; border-radius: 12px; font-size: 13.5px; font-style: italic; line-height: 1.4;
  color: var(--text); background: color-mix(in srgb, var(--vn-violet) 16%, var(--panel-2)); border: 1px dashed color-mix(in srgb, var(--vn-violet) 55%, transparent); }
.vn-quip::before { content: '💬 '; font-style: normal; }
.vn-niveau.sans-mascotte .vn-gamma-bt, .vn-niveau.sans-mascotte .vn-quip { display: none; }
.g-oeil, .g-reflet { transform-box: fill-box; transform-origin: center; transition: transform .15s; }
.vn-gamma.clin .g-oeil:nth-of-type(2), .vn-gamma.clin .g-reflet:nth-of-type(3) { animation: vn-clin .7s ease-in-out; }
@keyframes vn-clin { 30%, 60% { transform: scaleY(.12); } }
.vn-gamma.rougit .g-joue { fill: #FF3B6B; opacity: 1; r: 4; transition: r .3s, fill .3s; }
.vn-gamma.rougit .vn-gamma-svg { animation: vn-saute .6s ease-out 2; }
.vn-gamma.coucou .vn-gamma-svg { animation: vn-coucou 1.2s ease-in-out; }
.vn-gamma.regarde .vn-gamma-svg { transform: rotate(-9deg) translateX(-2px); transition: transform .5s; }
.vn-gamma.regarde .g-oeil, .vn-gamma.regarde .g-reflet { transform: translateX(-1.5px); }
.vn-gamma.dort .g-oeil, .vn-gamma.dort .g-reflet { transform: scaleY(.12); }
.vn-gamma.dort .vn-gamma-svg { animation: vn-respire-dodo 3s ease-in-out infinite; }
.vn-gamma.dort .vn-gamma-bt::after { content: 'z Z z'; position: absolute; right: -10px; top: -8px; font: 800 12px var(--font-mono); color: var(--vn-ciel); animation: vn-zzz 2.4s ease-in-out infinite; }
@keyframes vn-respire-dodo { 50% { transform: scale(1.04) rotate(4deg); } }
@keyframes vn-zzz { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@media (max-width: 560px) { .vn-gamma-bt { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .vn-gamma.clin .g-oeil, .vn-gamma.clin .g-reflet, .vn-gamma.rougit .vn-gamma-svg, .vn-gamma.coucou .vn-gamma-svg, .vn-gamma.dort .vn-gamma-svg, .vn-gamma.dort .vn-gamma-bt::after { animation: none; }
}