/* Imane Lifts, the app under the glass (imane/SPEC.md section 9). Every class starts with "il-", every token "--il-",
   everything is scoped to .il-root. The host declares the fonts ("Pirata One", "Saira" variable with its width axis,
   "Manrope" variable) and sets --il-w / --il-h on the mount; app.js writes the geometry table (--il-dsy, --il-tsx, ...)
   next to them, so the rects the API returns and the boxes drawn here are the same numbers.
   Dark only: her gyms at night, one neon pink. The ghost (the older version, grey, offset up-left) is the one shape.
   Motion: transform and opacity (plus stroke-dashoffset on the chart and the rings, and the dissolve mask frames). */

:where(.il-root) { position: relative; display: block; width: var(--il-w, 393px); height: var(--il-h, 852px); }
.il-root {
  --il-ground: #0B0A0D; --il-s1: #16141A; --il-s2: #201D25; --il-s3: #2B2731;
  --il-hair: rgba(255, 255, 255, .08); --il-hair2: rgba(255, 255, 255, .12);
  --il-text: #F2EEF0; --il-muted: #A39CA6; --il-faint: #5E5862;
  --il-ghost: rgba(200, 194, 204, .34); --il-ghost-2: rgba(200, 194, 204, .5);
  --il-neon: #E8559C; --il-neon-press: #D14D92; --il-neon-glow: rgba(232, 85, 156, .18);
  --il-card-sh: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 44px -28px rgba(0, 0, 0, .9);
  --il-ios: cubic-bezier(.32, .72, 0, 1); --il-out: cubic-bezier(.22, 1, .36, 1); --il-drop: cubic-bezier(.2, 1.4, .4, 1);
  --il-display: "Pirata One", "Grenze Gotisch", Georgia, serif;
  --il-num: "Saira", "Arial Narrow", "Roboto Condensed", sans-serif;
  --il-ui: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --il-hl: 1px;
  overflow: hidden; overflow: clip;
  background: var(--il-ground); color: var(--il-text);
  font: 500 17px/1.3 var(--il-ui); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y pinch-zoom; isolation: isolate;
  /* A6: a control keeps 44 px on the page whatever the phone's scale (the story writes --il-scale on the mount) */
  --il-hit: max(44px, calc(44px / max(var(--il-scale, 1), .3)));
}
@media (min-resolution: 2dppx) { .il-root { --il-hl: .5px; } }
.il-root :where(*), .il-root :where(*)::before, .il-root :where(*)::after { box-sizing: border-box; touch-action: pan-y pinch-zoom; }
.il-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.il-root :where(h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; font: inherit; list-style: none; }
.il-root :where(img, video, svg, canvas) { display: block; max-width: none; }
.il-root :where(img) { -webkit-user-drag: none; }
.il-root :where(b, strong) { font-weight: inherit; }
.il-root :where(i, em) { font-style: normal; }
.il-story { pointer-events: none; }
.il-desk.il-live :where(button) { cursor: pointer; }
.il-root :focus { outline: none; }
.il-root :focus-visible { outline: 2px solid var(--il-neon); outline-offset: 3px; border-radius: 14px; }
.il-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ type and shared parts */
.il-ttl { font: 400 30px/34px var(--il-display); letter-spacing: .005em; color: var(--il-text); white-space: nowrap; }
.il-ov { display: block; font: 600 11px/14px var(--il-num); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; color: var(--il-muted); white-space: nowrap; }
.il-sub { font: 500 15px/20px var(--il-ui); color: var(--il-muted); }
.il-n { font-family: var(--il-num); font-stretch: 75%; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.il-card { position: relative; background: var(--il-s1); border-radius: 20px; box-shadow: var(--il-card-sh); }
.il-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--il-hl) var(--il-hair); pointer-events: none; }
.il-draft { display: inline-flex; align-items: center; height: 18px; padding: 1px 5px 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--il-faint); font: 600 11px/1 var(--il-num); font-stretch: 100%; letter-spacing: .12em; color: var(--il-muted); vertical-align: middle; white-space: nowrap; flex: none; }
.il-src { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/15px var(--il-num); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; color: var(--il-muted); white-space: nowrap; }
.il-src__ic { width: 12px; height: 12px; flex: none; color: var(--il-muted); }
.il-av { position: relative; display: inline-block; flex: none; width: var(--s, 28px); height: var(--s, 28px); border-radius: 50%; overflow: hidden; background: var(--il-s3); }
.il-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.il-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* our glyphs (2 px strokes, round caps): the bolt is neon, the target bone */
.il-g { display: inline-block; flex: none; vertical-align: -.12em; overflow: visible; }
.il-g--bolt { color: var(--il-neon); }
.il-g--target { color: var(--il-text); }
.il-g--polish { color: var(--il-neon); }
/* the badge: a glyph in a small well (week rows, chips) */
.il-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--il-s2); box-shadow: inset 0 0 0 var(--il-hl) var(--il-hair); vertical-align: -5px; }
.il-badge .il-g { width: 13px; height: 13px; vertical-align: 0; }

/* the ghost number: the older version drawn as an outline (40 px and more), behind and up-left */
.il-gh { color: transparent; -webkit-text-stroke: 1px var(--il-ghost-2); paint-order: stroke; }

/* buttons: neon is the primary action; s2 secondary; s3 inert */
.il-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 18px; background: var(--il-neon); color: var(--il-ground); font: 700 17px/1 var(--il-ui); letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 14px 30px -18px rgba(232, 85, 156, .75); transition: transform .16s var(--il-out), background-color .2s linear, color .2s linear, box-shadow .2s linear; }
.il-btn svg { width: 18px; height: 18px; flex: none; }
.il-btn.is-press, .il-live .il-btn:not(.is-off):active { transform: scale(.97); background: var(--il-neon-press); }
.il-btn--s2 { background: var(--il-s2); color: var(--il-text); box-shadow: inset 0 0 0 var(--il-hl) var(--il-hair2); }
.il-btn--s2.is-press, .il-live .il-btn--s2:not(.is-off):active { background: var(--il-s3); }
.il-btn.is-off { background: var(--il-s3); color: var(--il-muted); box-shadow: none; }
.il-live .il-btn.is-off { pointer-events: none; }
.il-story .il-btn { transition: none; }
.il-btn__t { display: inline-block; }
/* A6: the hit area grows with the page's scale (invisible, vertical only: the buttons are wide) */
.il-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--il-hit)); transform: translateY(-50%); }
/* the soft neon hint on "+ 5 kg" (live, until her first touch; never under reduced motion) */
.il-btn.is-hint::before { content: ""; position: absolute; inset: -3px; border-radius: 21px; box-shadow: 0 0 0 2px var(--il-neon); opacity: 0; animation: il-hint 1.8s var(--il-out) infinite; pointer-events: none; }
@keyframes il-hint { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.06); } }
.il-osrm .il-btn.is-hint::before, .il-rm .il-btn.is-hint::before { animation: none; opacity: 0; }

/* chips: the ghost style (outlined) and the neon "AUJOURD'HUI" */
.il-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 1px 10px 0; border-radius: 13px; font: 600 11px/1 var(--il-num); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.il-chip--ghost { background: rgba(11, 10, 13, .62); color: rgba(242, 238, 240, .82); box-shadow: inset 0 0 0 1px var(--il-ghost-2); }
.il-chip--neon { background: var(--il-neon); color: var(--il-ground); }
.il-chip--soft { position: relative; height: 30px; padding: 1px 11px 0 9px; border-radius: 15px; background: var(--il-s2); color: var(--il-text); font: 700 13px/1 var(--il-ui); letter-spacing: 0; text-transform: none; box-shadow: inset 0 0 0 var(--il-hl) var(--il-hair2); }
.il-chip--soft svg { width: 15px; height: 15px; color: var(--il-text); }

/* 44 pt minimum targets on the page: the small controls extend their hit area (invisible) by the page's scale */
.il-back, .il-x, .il-link { position: relative; }
.il-back::after, .il-x::after, .il-link::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--il-hit)); height: max(100%, var(--il-hit)); transform: translate(-50%, -50%); }
/* the link under the duel's buttons grows downward only (the buttons keep the band they share) */
.il-link::after { top: 0; transform: translateX(-50%); }

/* video slots: the poster, the clip over it once it plays (never sized from the file: cover) */
.il-vs { position: relative; display: block; overflow: hidden; background: #050406; }
.il-vs__p, .il-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.il-video { opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.il-vs.is-playing .il-video { opacity: 1; }
.il-story .il-video { transition: none; }

/* ------------------------------------------------------------------ the glass, layers, chrome */
.il-glass { position: absolute; inset: 0; overflow: hidden; background: var(--il-ground); }
.il-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--il-ground); contain: layout style size; transform-origin: 50% 50%; }
.il-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.il-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(0, 0, 0, .6); }
.il-l-session, .il-l-duel { z-index: 3; }
.il-l-fail, .il-l-reel { z-index: 6; background: transparent; }
.il-l-win { z-index: 8; background: transparent; }
.il-l-splash { z-index: 9; background: transparent; }
/* T5, the double exposure: the previous screen turns grey (a filter set once, never animated) and drifts behind the new
   one, whose ground is clear while it fades in */
.il-layer.is-ghost { filter: grayscale(1) contrast(.95); }
.il-layer.is-clear { background: transparent; }
/* prewarm: two frames at opacity .001 behind the screen, so text rasters and images decode */
.il-layer.il-warm:not(.is-on):not(.is-leaving) { opacity: .001 !important; visibility: visible; z-index: 0 !important; }
/* A3, the skeleton: what will land drawn as its own ghost (1.5 px outlines, offset up-left); each outline fades as its
   element lands into its place, so a screen is never empty */
.il-skl { position: absolute; inset: 0; transform: translate(-10px, -9px); pointer-events: none; }
.il-sk { display: block; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--il-ghost); }

.il-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--il-text); }
.il-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 700 16.5px/1 var(--il-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.il-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.il-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(242, 238, 240, .9); z-index: 20; pointer-events: none; }
.il-full .il-status, .il-full .il-homeind { display: none; }
.il-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 6px; background: rgba(11, 10, 13, .94); box-shadow: inset 0 var(--il-hl) 0 var(--il-hair2); }
.il-tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; pointer-events: none; background: linear-gradient(180deg, rgba(11, 10, 13, 0), rgba(11, 10, 13, .94)); }
/* the home bar inset is inside the buttons (A6): each tab is 83 px tall */
.il-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 7px 0 34px; color: var(--il-muted); font: 600 11px/1.2 var(--il-ui); letter-spacing: 0; white-space: nowrap; }
.il-tab svg { width: 26px; height: 26px; }
.il-tab.is-on { color: var(--il-neon); }

/* the back chevron and the close cross */
.il-back { position: absolute; left: 6px; top: 58px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: var(--il-text); }
.il-back svg { width: 22px; height: 22px; }
.il-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--il-s2); color: var(--il-muted); box-shadow: inset 0 0 0 var(--il-hl) var(--il-hair2); }
.il-x svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ the app icon (the bolt and its ghost bolt) */
.il-icon { position: relative; display: block; flex: none; border-radius: 27%; background: var(--il-s1); box-shadow: inset 0 0 0 var(--il-hl) rgba(255, 255, 255, .1), 0 18px 40px -18px rgba(0, 0, 0, .9); overflow: hidden; }
.il-icon__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.il-icon__ghost { fill: none; stroke: var(--il-ghost-2); stroke-width: 1.6; stroke-linejoin: round; }
.il-icon__bolt { fill: var(--il-neon); }
.il-icon__flash { fill: #FFD6EA; opacity: 0; }

/* the wordmark: "Imane" (Pirata One) + "LIFTS" (Saira 800, wide caps) */
.il-wm { display: inline-flex; align-items: baseline; gap: .22em; white-space: nowrap; color: var(--il-text); }
.il-wm__a { font: 400 1em/1 var(--il-display); letter-spacing: .01em; }
.il-wm__b { font: 800 .36em/1 var(--il-num); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------------ splash */
.il-sp { position: absolute; inset: 0; }
.il-sp__ground { position: absolute; inset: 0; background: var(--il-ground); opacity: 0; }
.il-sp__glow { position: absolute; left: 50%; top: var(--il-spy); width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); opacity: 0; }
.il-sp__in { position: absolute; left: 0; right: 0; top: calc(var(--il-spy) - 52px); display: flex; flex-direction: column; align-items: center; }
.il-sp__ic { position: relative; width: 104px; height: 104px; opacity: 0; }
.il-sp__ic .il-icon { width: 104px; height: 104px; }
.il-sp__wm { margin-top: 30px; height: 50px; overflow: hidden; }
.il-sp__wm .il-wm { font-size: 46px; transform: translate3d(0, 100%, 0); }
.il-sp__lock { margin-top: 14px; font: 600 11px/14px var(--il-num); font-stretch: 100%; letter-spacing: .14em; color: var(--il-muted); white-space: nowrap; opacity: 0; }

/* ------------------------------------------------------------------ shared screen header (tab screens) */
.il-hd { position: absolute; left: 16px; right: 16px; top: var(--il-top); }
.il-hd .il-ov { margin-bottom: 3px; }
.il-hd__row { display: flex; align-items: center; gap: 10px; }
.il-hd__row .il-g { width: 24px; height: 24px; vertical-align: 0; }
.il-hd .il-sub { margin-top: 1px; }
/* pushed screens: the title sits right of the back chevron */
.il-hd--push { left: 52px; top: var(--il-ptop); }

/* ------------------------------------------------------------------ ghosts ("Ton niveau") */
.il-gs__brand { position: absolute; left: 16px; top: var(--il-gbrand); display: flex; align-items: center; gap: 9px; }
.il-gs__brand .il-icon { width: 26px; height: 26px; border-radius: 8px; }
.il-gs__brand .il-wm { font-size: 22px; }
.il-gs__brand .il-wm__b { font-size: 11px; letter-spacing: .12em; }
.il-gs__title { position: absolute; left: 16px; top: var(--il-gtitle); }
.il-q { position: absolute; left: 16px; right: 16px; top: var(--il-gquote); height: var(--il-gquoteh); padding: 18px 20px 0; }
.il-q__t { font: 700 21px/28px var(--il-ui); letter-spacing: -.012em; color: var(--il-text); }
.il-q__src { position: absolute; left: 20px; right: 20px; bottom: 18px; font: 500 15px/20px var(--il-ui); color: var(--il-muted); }
.il-gc__grid { position: absolute; left: 16px; right: 16px; top: var(--il-ggrid); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.il-gc { height: var(--il-gcardh); padding: 15px 16px 0; overflow: hidden; }
.il-gc__k { display: flex; align-items: center; justify-content: space-between; font: 600 15px/20px var(--il-ui); color: var(--il-text); }
.il-gc.is-on::after { box-shadow: inset 0 0 0 1.5px var(--il-neon); }
.il-gc__ok { width: 22px; height: 22px; margin: -1px -2px 0 0; color: var(--il-neon); }
.il-gc__ok svg { width: 13px; height: 13px; }
.il-gs__skq { position: absolute; left: 16px; right: 16px; top: var(--il-gquote); height: var(--il-gquoteh); }
.il-gs__skc { height: var(--il-gcardh); }
.il-gc__v { position: absolute; left: 14px; bottom: 34px; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.il-gc__v b { font-size: var(--il-gnum); line-height: 1; }
.il-gc__v span { font: 600 17px/1 var(--il-num); font-stretch: 85%; color: var(--il-muted); }
.il-gc__d { position: absolute; left: 16px; bottom: 14px; font: 500 13px/16px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-gs__cta { position: absolute; left: 16px; right: 16px; top: var(--il-gcta); }

/* ------------------------------------------------------------------ week */
.il-wk__head { position: absolute; left: 16px; right: 16px; top: var(--il-wkhead); }
.il-wk__rows { position: absolute; left: 16px; right: 16px; top: var(--il-wkrows); }
.il-wr { position: relative; display: flex; align-items: center; height: var(--il-wkrowh); padding: 0 14px; border-radius: 14px; }
.il-wr + .il-wr::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: var(--il-hl); background: var(--il-hair); }
.il-wr.is-today { background: var(--il-s1); box-shadow: inset 0 0 0 var(--il-hl) var(--il-hair2); }
.il-wr.is-today::before, .il-wr.is-today + .il-wr::before { display: none; }
.il-wr__d { width: 80px; flex: none; font: 600 11.5px/1 var(--il-num); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; color: var(--il-muted); }
.il-wr__m { flex: 1; min-width: 0; }
.il-wr__l { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; font: 600 17px/21px var(--il-ui); color: var(--il-text); white-space: nowrap; }
.il-wr__l i { color: var(--il-muted); font-weight: 600; }
.il-wr__r { margin-top: 2px; font: 500 13px/16px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-wr.is-rest .il-wr__l { color: #7D7682; font-weight: 600; }
.il-wr.is-rest .il-wr__d { color: #7D7682; }
/* the duel's day, checked once she has won it live (A2) */
.il-wr__ok { display: none; margin-left: 8px; color: var(--il-text); }
.il-wr__ok svg { width: 14px; height: 14px; }
.il-wk.is-won .il-wr__ok { display: inline-flex; }
/* the skeleton rows: one hairline bar per row */
.il-wk__skr { display: flex; align-items: center; height: var(--il-wkrowh); padding: 0 14px; }
.il-wk__skr .il-sk { height: 14px; border-radius: 7px; }
.il-wk__skc { position: absolute; left: 16px; right: 16px; top: var(--il-wkcard); height: var(--il-wkcardh); }
.il-wk__card { position: absolute; left: 16px; right: 16px; top: var(--il-wkcard); padding: 16px 16px 0; height: var(--il-wkcardh); }
.il-wk__line { display: flex; gap: 10px; font: 600 15px/21px var(--il-ui); color: var(--il-text); }
.il-wk__line + .il-wk__line { margin-top: 8px; }
.il-wk__line .il-g { width: 18px; height: 18px; margin-top: 1.5px; }
.il-wk__card .il-src { position: absolute; left: 16px; bottom: 14px; }
.il-wk__note { position: absolute; left: 16px; right: 16px; top: var(--il-wknote); display: flex; align-items: center; gap: 8px; font: 500 13px/16px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-wk__note .il-g { width: 13px; height: 13px; vertical-align: -2px; }

/* ------------------------------------------------------------------ the stage (today, duel, win) */
.il-stage { position: absolute; border-radius: 22px; overflow: hidden; background: #050406; isolation: isolate; transform-origin: 0 0; box-shadow: 0 0 0 var(--il-hl) var(--il-hair2), 0 30px 60px -30px rgba(0, 0, 0, .95); }
.il-stage__clips { position: absolute; inset: 0; z-index: 1; isolation: isolate; }
.il-stage__f, .il-stage__g, .il-stage__gv { position: absolute; inset: 0; }
.il-stage__f { opacity: 0; z-index: 1; }
.il-stage__g { z-index: 2; opacity: .45; transform-origin: 50% 50%; }
/* the double exposure: the grey ghost lies in the same frame as her colour set; screened, both read at once */
.il-stage.is-duo .il-stage__g { mix-blend-mode: screen; }
.il-stage__gv { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.il-stage .il-vs { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.il-grain { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; }
/* desaturate a colour clip with opacity only (a grey layer in saturation blend): her set becomes the next ghost */
.il-desat { position: absolute; inset: 0; z-index: 3; background: #808080; mix-blend-mode: saturation; opacity: 0; pointer-events: none; }
.il-stage__vig { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(5, 4, 6, .5) 0%, rgba(5, 4, 6, 0) 22%, rgba(5, 4, 6, 0) 74%, rgba(5, 4, 6, .4) 100%); }
/* the win's deeper vignette (A4): the bottom of the stage darkens under the PR banner */
.il-stage__vigw { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(5, 4, 6, 0) 52%, rgba(5, 4, 6, .34) 80%, rgba(5, 4, 6, .5) 100%); }
.il-stage .il-chip { left: 12px; top: 12px; z-index: 5; }
.il-stamp { position: absolute; right: 12px; top: 10px; z-index: 6; width: 74px; height: 74px; opacity: 0; transform-origin: 50% 50%; }
.il-stamp__d { position: absolute; inset: 0; border-radius: 50%; background: var(--il-neon); box-shadow: 0 0 0 4px rgba(11, 10, 13, .5), 0 12px 30px -8px rgba(232, 85, 156, .6); }
.il-stamp__r { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.il-stamp__r circle { fill: none; stroke: var(--il-ground); stroke-width: 1.6; stroke-dasharray: 3.2 3.4; opacity: .7; }
.il-stamp .il-stamp__g { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -21px 0 0 -20px; color: var(--il-ground); }

/* ------------------------------------------------------------------ today */
.il-td .il-stage { left: var(--il-tsx); top: var(--il-tsy); width: var(--il-tsw); height: var(--il-tsh); }
.il-td__echo { position: absolute; left: calc(var(--il-tsx) - 10px); top: calc(var(--il-tsy) - 9px); width: var(--il-tsw); height: var(--il-tsh); border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--il-ghost); pointer-events: none; }
.il-td__tiles { position: absolute; left: 16px; right: 16px; top: var(--il-ttiles); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.il-tt { height: 84px; padding: 12px 14px 0; overflow: hidden; }
.il-tt__k { font: 600 13px/16px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-tt__v { position: absolute; left: 14px; bottom: 12px; right: 10px; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.il-tt__v b { font-size: 42px; line-height: 1; }
.il-tt__v span { font: 600 16px/1 var(--il-num); font-stretch: 85%; color: var(--il-muted); }
.il-td__ok { position: absolute; right: 16px; top: calc(var(--il-top) + 20px); opacity: 0; }
.il-td__be { position: absolute; right: 12px; top: 12px; font: 600 11px/16px var(--il-num); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; color: var(--il-muted); white-space: nowrap; }
.il-row { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 16px; }
.il-row__ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--il-s2); color: var(--il-muted); flex: none; }
.il-row__ic svg { width: 17px; height: 17px; }
.il-row__t { font: 600 17px/1 var(--il-ui); color: var(--il-text); white-space: nowrap; }
.il-row__t span { color: var(--il-muted); font-weight: 500; font-size: 15px; }
.il-td__renfo { top: var(--il-trenfo); }
.il-td__cta { position: absolute; left: 16px; right: 16px; top: var(--il-tcta); }
/* after the win (A2): the goal is reached, "À battre" spans the row, "Commencer" is secondary (il-btn--s2) */
.il-td.is-after .il-td__goal { display: none; }
.il-td.is-after .il-td__beat { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ session (technical) */
.il-ss__clip { position: absolute; left: var(--il-ssx); top: var(--il-ssy); width: var(--il-ssw); height: var(--il-ssh); border-radius: 22px; box-shadow: 0 0 0 var(--il-hl) var(--il-hair2), 0 30px 60px -30px rgba(0, 0, 0, .95); }
.il-ss__count { position: absolute; left: 16px; right: 16px; top: var(--il-scount); height: 80px; }
.il-ss__num { position: absolute; left: 4px; top: 0; width: 84px; height: 80px; }
.il-ss__num b { position: absolute; right: 0; top: 0; font-size: 72px; line-height: 80px; white-space: nowrap; text-align: right; }
.il-ss__num .il-gh { transform: translate3d(-8px, -8px, 0); }
.il-ss__reps { position: absolute; left: 112px; top: 18px; }
.il-ss__reps .il-ov { color: var(--il-text); font-size: 12px; }
.il-ss__reps p { margin-top: 5px; font: 500 13px/17px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-ss__ring { position: absolute; right: 0; top: 4px; width: 72px; height: 72px; }
.il-ss__ring svg { width: 72px; height: 72px; overflow: visible; }
.il-ring__t { fill: none; stroke: var(--il-s3); stroke-width: 5; }
.il-ring__a { fill: none; stroke: var(--il-text); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.il-ss__ring .il-g { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.il-ss__ticks { position: absolute; left: 16px; right: 16px; top: var(--il-sticks); height: 14px; display: flex; gap: 5px; }
.il-tick { flex: 1; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--il-s3); box-shadow: inset 0 0 0 1px var(--il-ghost); }
.il-tick i { display: block; height: 100%; border-radius: 3px; background: var(--il-text); transform-origin: 0 50%; transform: scaleX(0); }
.il-ss__card { position: absolute; left: 16px; right: 16px; top: var(--il-scard); padding: 16px 18px 0; height: 100px; opacity: 0; }
.il-ss__card p { font: 700 17px/23px var(--il-ui); letter-spacing: -.01em; color: var(--il-text); }
.il-ss__card .il-src { position: absolute; left: 18px; bottom: 15px; }

/* ------------------------------------------------------------------ curve */
.il-cv__hl { position: absolute; left: 16px; right: 16px; top: var(--il-chead); }
.il-cv__hl b { display: block; font: 400 30px/34px var(--il-display); color: var(--il-text); white-space: nowrap; }
.il-cv__hl .il-src { margin-top: 4px; }
.il-cv__chart { position: absolute; left: 16px; right: 16px; top: var(--il-cchart); height: var(--il-cchartH); }
.il-cv__svg { position: absolute; left: 0; top: 0; overflow: visible; }
.il-cv__grid { stroke: var(--il-hair); stroke-width: 1; }
.il-cv__yl, .il-cv__xl { font: 600 11.5px var(--il-num); font-stretch: 100%; letter-spacing: .06em; fill: var(--il-muted); }
.il-cv__xl { font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.il-cv__line { fill: none; stroke: var(--il-neon); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.il-cv__area1 { fill: url(#il-hatch); opacity: 0; }
.il-cv__area2 { opacity: 0; }
.il-cv__pt { fill: var(--il-ground); stroke: var(--il-neon); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.il-cv__pt.is-old { stroke: var(--il-muted); }
.il-cv__pulse { fill: none; stroke: var(--il-neon); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.il-cv__pv { font: 700 13px var(--il-num); font-stretch: 85%; fill: var(--il-text); opacity: 0; }
.il-cv__pv.is-old { fill: var(--il-muted); }
.il-cv__calc { font: 600 11px var(--il-num); font-stretch: 100%; letter-spacing: .06em; fill: var(--il-muted); opacity: 0; }
.il-cv__leg { position: absolute; left: 16px; top: 14px; display: flex; gap: 14px; font: 600 11px/14px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-cv__leg span { display: inline-flex; align-items: center; gap: 6px; }
.il-cv__sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.il-cv__sw--old { background: repeating-linear-gradient(135deg, var(--il-ghost-2) 0 1.2px, transparent 1.2px 4px); box-shadow: inset 0 0 0 1px var(--il-ghost); }
.il-cv__sw--new { background: rgba(242, 238, 240, .22); box-shadow: inset 0 0 0 1px rgba(242, 238, 240, .3); }
.il-cv__stats { position: absolute; left: 16px; right: 16px; top: var(--il-cstats); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.il-st { height: var(--il-cstatsH); padding: 12px 14px 0; }
.il-st .il-ov { font-size: 11px; }
.il-st__v { margin-top: 4px; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.il-st__v b { font-size: 30px; line-height: 1; }
.il-st__v span { font: 600 14px/1 var(--il-num); font-stretch: 85%; color: var(--il-muted); }
.il-st__d { margin-top: 3px; font: 500 12px/15px var(--il-ui); color: var(--il-muted); white-space: nowrap; }

/* ------------------------------------------------------------------ the technique tab (id "imane") */
.il-im__prof { position: absolute; left: 16px; right: 16px; top: var(--il-iprof); display: flex; align-items: center; gap: 14px; }
.il-im__prof .il-av { --s: 60px; box-shadow: 0 0 0 2px var(--il-ground), 0 0 0 3.5px rgba(242, 238, 240, .82); }
.il-im__prof .il-av::after { box-shadow: none; }
.il-im__name { font: 400 32px/34px var(--il-display); color: var(--il-text); white-space: nowrap; }
.il-im__sec { position: absolute; left: 16px; right: 16px; top: var(--il-isec); display: flex; align-items: baseline; justify-content: space-between; font: 700 17px/22px var(--il-ui); color: var(--il-text); white-space: nowrap; }
.il-im__grid { position: absolute; left: 16px; right: 16px; top: var(--il-igrid); }
.il-im__r1, .il-im__r2 { display: grid; gap: 10px; }
.il-im__r1 { grid-template-columns: 1fr 1fr; }
.il-im__r2 { grid-template-columns: 1fr 1fr 1fr; margin-top: var(--il-igap); }
.il-it { position: relative; display: block; text-align: left; }
.il-it__p { position: relative; display: block; width: 100%; border-radius: 16px; overflow: hidden; background: #050406; box-shadow: 0 0 0 var(--il-hl) var(--il-hair2); }
.il-im__r1 .il-it__p { height: var(--il-ih1); }
.il-im__r2 .il-it__p { height: var(--il-ih2); }
.il-it__p .il-img { object-position: var(--op, 50% 50%); }
.il-im__skg .il-sk { border-radius: 16px; }
.il-im__skg .il-im__r1 .il-sk { height: var(--il-ih1); }
.il-im__skg .il-im__r2 { margin-top: calc(var(--il-igap) + 26px); }
.il-im__skg .il-im__r2 .il-sk { height: var(--il-ih2); }
.il-it__play { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(11, 10, 13, .66); display: flex; align-items: center; justify-content: center; color: var(--il-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.il-im__r2 .il-it__play { width: 24px; height: 24px; right: 6px; bottom: 6px; }
.il-it__play svg { width: 11px; height: 11px; margin-left: 1.5px; }
.il-it__k { display: block; height: 26px; padding: 7px 2px 0; font: 700 13.5px/1 var(--il-ui); color: var(--il-text); white-space: nowrap; }
.il-im__r2 .il-it__k { font-size: 12.5px; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ duel (the signature screen) */
.il-du .il-stage { left: 16px; top: var(--il-dsy); width: var(--il-dsw); height: var(--il-dsh); }
.il-du__ui { position: absolute; inset: 0; }
.il-du__load { position: absolute; left: 16px; right: 16px; top: var(--il-dload); height: 80px; transform-origin: 0 0; }
.il-du__kg, .il-du__x { position: absolute; top: 0; height: 80px; white-space: nowrap; }
.il-du__kg { left: 2px; }
.il-du__x { right: 0; }
.il-du__kg b, .il-du__x b { position: absolute; top: 0; display: flex; align-items: baseline; gap: 6px; height: 80px; line-height: 80px; white-space: nowrap; }
.il-du__kg b { left: 0; }
.il-du__x b { right: 0; }
.il-du__kg .il-n { font-size: 72px; }
.il-du__kg .il-u { font: 700 28px/1 var(--il-num); font-stretch: 85%; }
.il-du__x .il-n { font-size: 40px; }
/* the ghost numbers (A4): far enough up-left for the 50 and the × 3 to read; no ghost unit (it smeared over "kg") */
.il-du__kg .il-gh { transform: translate3d(-14px, -16px, 0); }
.il-du__x .il-gh { transform: translate3d(-10px, -11px, 0); }
.il-du__kg .il-gh .il-u { display: none; color: transparent; -webkit-text-stroke: 1px var(--il-ghost-2); }
.il-du.is-next .il-du__kg .il-gh .il-u { display: inline; }
.il-du__x .il-gh { -webkit-text-stroke-color: var(--il-ghost); }
.il-du__front .il-u { color: var(--il-muted); }
.il-du__goalrow { position: absolute; left: 16px; right: 16px; top: var(--il-dgoal); height: 26px; }
.il-du__goal { position: absolute; left: 2px; top: 3px; font: 500 15px/20px var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-du__goal b { color: var(--il-text); font-weight: 700; }
.il-du__btns { position: absolute; left: 16px; right: 16px; top: var(--il-dbtn); display: flex; gap: 12px; z-index: 2; }
.il-du__plus { flex: 0 0 calc(40% - 7px); }
.il-du__val { flex: 1 1 auto; }
.il-du__val .il-btn__t { transition: none; }
.il-du__link { position: absolute; z-index: 1; left: 50%; top: var(--il-dlink); height: 40px; transform: translateX(-50%); display: flex; align-items: center; padding: 0 12px; font: 600 15px/1 var(--il-ui); color: var(--il-muted); white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(163, 156, 166, .45); text-underline-offset: 4px; }
.il-du__next { position: absolute; left: 16px; right: 16px; top: var(--il-dbtn); height: 56px; display: none; align-items: center; justify-content: center; gap: 10px; border-radius: 18px; background: var(--il-s1); box-shadow: inset 0 0 0 1px var(--il-ghost); font: 600 15px/1 var(--il-ui); color: var(--il-muted); white-space: nowrap; }
.il-du.is-next .il-du__next { display: flex; }
.il-du.is-next .il-du__btns, .il-du.is-next .il-du__link, .il-du.is-next .il-du__goal { display: none; }
.il-du.is-next .il-du__front, .il-du.is-next .il-du__xf { display: none; }
.il-du.is-next .il-du__kg .il-gh, .il-du.is-next .il-du__x .il-gh { transform: none; }

/* ------------------------------------------------------------------ the win overlay */
.il-wn { position: absolute; inset: 0; pointer-events: none; }
.il-wn__veil { position: absolute; left: 0; right: 0; top: calc(var(--il-dsy) + var(--il-dsh) + 2px); bottom: 0; background: var(--il-ground); opacity: 0; }
.il-wn__card { position: absolute; left: 16px; right: 16px; top: var(--il-wcard); height: 108px; padding: 15px 18px 0; opacity: 0; }
.il-wn__w1 { font: 800 19px/24px var(--il-ui); letter-spacing: -.01em; color: var(--il-text); white-space: nowrap; }
.il-wn__w2 { margin-top: 2px; font: 500 16px/22px var(--il-ui); color: var(--il-text); white-space: nowrap; }
.il-wn__card .il-src { position: absolute; left: 18px; bottom: 14px; }
.il-wn__line { position: absolute; left: 16px; right: 16px; top: var(--il-wline); height: 38px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.il-wn__line b { font: 400 34px/38px var(--il-display); color: var(--il-text); }
.il-wn__line b i { color: transparent; }
.il-caret { display: inline-block; width: 2px; height: 26px; margin-left: 1px; vertical-align: -4px; border-radius: 1px; background: var(--il-text); opacity: 0; }
.il-wn__data { position: absolute; left: 16px; right: 16px; top: var(--il-wdata); font: 500 13px/18px var(--il-ui); color: var(--il-muted); }
.il-wn__data span { display: inline-block; white-space: pre; opacity: 0; }
.il-wn__data b { color: var(--il-text); font-weight: 700; }

/* ------------------------------------------------------------------ sheets (fail, reel) */
.il-sheet { position: absolute; inset: 0; }
.il-sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; }
.il-sheet__p { position: absolute; left: 0; right: 0; bottom: 0; background: var(--il-s1); border-radius: 28px 28px 0 0; transform: translate3d(0, 100%, 0); box-shadow: 0 -1px 0 var(--il-hair2), 0 -20px 50px -20px rgba(0, 0, 0, .9); }
.il-grab { position: absolute; left: 50%; top: 7px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.il-sheet__x { position: absolute; right: 16px; top: 18px; }
.il-fl__p { height: 356px; padding: 30px 22px 0; }
.il-fl__ov { margin-bottom: 12px; }
.il-fl__q { font: 800 21px/28px var(--il-ui); letter-spacing: -.012em; color: var(--il-text); padding-right: 36px; }
.il-fl__p .il-src { margin-top: 10px; }
.il-fl__d { margin-top: 22px; padding-top: 18px; box-shadow: inset 0 var(--il-hl) 0 var(--il-hair); font: 500 16px/22px var(--il-ui); color: var(--il-muted); }
.il-fl__d .il-draft { margin-left: 8px; vertical-align: 1px; }
.il-fl__retry { position: absolute; left: 22px; right: 22px; bottom: 44px; }
.il-rl__p { top: 0; height: auto; border-radius: 0; background: #050406; }
.il-rl__hd { position: absolute; left: 16px; right: 16px; top: 62px; display: flex; align-items: center; justify-content: space-between; }
.il-rl__hd .il-ttl { font-size: 30px; }
.il-rl__v { position: absolute; left: 16px; right: 16px; top: var(--il-rlv); height: var(--il-rlh); border-radius: 22px; box-shadow: 0 0 0 var(--il-hl) var(--il-hair2); }
.il-rl__ft { position: absolute; left: 16px; right: 16px; top: calc(var(--il-rlv) + var(--il-rlh) + 14px); display: flex; align-items: center; gap: 8px; }

/* reduced motion (passed by the host in ?rm=1): the clips never cross-fade on their own */
.il-rm .il-video { transition: none; }