/* Generated by scripts/build-screens.mjs from site/pages/screens/src/kit.css: do not edit by hand. */
/* The product screens' kit (api/screens/kit.js). Written in DESIGN pixels: scripts/build-screens.mjs turns every « Npx » into
   calc(var(--u) * N) (1px hairlines stay; « NPX » in capitals stays in real pixels, for the frames themselves).
   A fictional client, « Votre Groupe »: its product colour is a deep teal; greys, four chart tones, semantic greens/ambers/reds.
   Light by default, .dark for dark products. Arabic pages are right to left: logical properties only (inline/block). */

/* ── frames: .dev is the container; --u = one design pixel at its real width ── */
.dev { position: relative; container-type: inline-size; --u: calc(100cqw / var(--dw)); --dw: 1280; isolation: isolate; text-align: start;
  --sf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--sf); }
[lang="ar"] .dev { --sf: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.dev.ph { --dw: 390; }
.dev.pn { --dw: 560; }
.dev.dw-1440 { --dw: 1440; } .dev.dw-1200 { --dw: 1200; } .dev.dw-1100 { --dw: 1100; } .dev.dw-1000 { --dw: 1000; } .dev.dw-960 { --dw: 960; }
.dev.dw-900 { --dw: 900; } .dev.dw-800 { --dw: 800; } .dev.dw-720 { --dw: 720; } .dev.dw-640 { --dw: 640; } .dev.dw-600 { --dw: 600; }
.dev.dw-520 { --dw: 520; } .dev.dw-480 { --dw: 480; } .dev.dw-420 { --dw: 420; } .dev.dw-400 { --dw: 400; } .dev.dw-360 { --dw: 360; } .dev.dw-320 { --dw: 320; }
.dev .vp { position: relative; overflow: hidden; }
.dev .ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* a browser window (macOS-like) */
.dev.br { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 30px 80px -20px rgba(0, 0, 0, .45), 0 12px 30px -12px rgba(0, 0, 0, .3); }
.dev.br.dark { background: #16181d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px -20px rgba(0, 0, 0, .6); }
.br-bar { height: calc(var(--u) * 44); display: flex; align-items: center; gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 16); background: #f3f4f6; border-bottom: 1px solid #e3e5e8; direction: ltr; }
.dark .br-bar { background: #1d2026; border-bottom-color: #2a2e36; }
.br-dots { display: flex; gap: calc(var(--u) * 8); flex: 0 0 auto; }
.br-dots i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #ff5f57; }
.br-dots i:nth-child(2) { background: #febc2e; } .br-dots i:nth-child(3) { background: #28c840; }
.br-tabs { display: flex; gap: calc(var(--u) * 4); flex: 0 1 auto; min-width: 0; }
.br-url { flex: 0 1 calc(var(--u) * 520); margin: 0 auto; height: calc(var(--u) * 28); border-radius: calc(var(--u) * 7); background: #e6e8eb; color: #4b5260; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); font: 500 calc(var(--u) * 12.5)/1 var(--sf); white-space: nowrap; overflow: hidden; }
.dark .br-url { background: #2a2e36; color: #aab1bc; }
.br-url .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); stroke-width: 2.4; flex: 0 0 auto; }
.br-act { display: flex; gap: calc(var(--u) * 14); color: #8a919c; flex: 0 0 auto; }
.br-act .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

/* a phone (iPhone-like: Dynamic Island, status bar, home indicator); the bezel is in % of its own width */
.dev.ph { padding: 3.1%; border-radius: 15.5% / 7.4%; background: #0c0c0e; box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 4px #1a1a1c, 0 40px 80px -24px rgba(0, 0, 0, .55), 0 14px 30px -14px rgba(0, 0, 0, .4); }
.ph-in { position: relative; border-radius: calc(var(--u) * 47); overflow: hidden; background: #fff; }
.ph.dark .ph-in { background: #000; }
.ph-status { position: absolute; z-index: 5; inset-inline: 0; top: 0; height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 6) calc(var(--u) * 30) 0 calc(var(--u) * 44); color: #000; pointer-events: none; }
.ph.dark .ph-status, .ph .ph-status.on-dark { color: #fff; }
.ph-time { font: 600 calc(var(--u) * 17)/1 var(--sf); letter-spacing: calc(var(--u) * -.2); }
.ph-isl { position: absolute; left: 50%; top: calc(var(--u) * 11); width: calc(var(--u) * 124); height: calc(var(--u) * 36); margin-left: calc(var(--u) * -62); border-radius: calc(var(--u) * 20); background: #000; }
.ph-sys { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.ph-sys svg { height: calc(var(--u) * 12); width: auto; fill: currentColor; }
.ph-sys svg:last-child { height: calc(var(--u) * 13); }
.ph-sys .bt-o { fill: none; stroke: currentColor; opacity: .4; }
.ph-sys .bt-t { opacity: .4; }
.ph-home { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 134); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -67); border-radius: calc(var(--u) * 3); background: #000; }
.ph.dark .ph-home, .ph-home.on-dark { background: #fff; }

/* a floating panel */
.dev.pn { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 70px -18px rgba(0, 0, 0, .45), 0 10px 24px -10px rgba(0, 0, 0, .25); }
.dev.pn.dark { background: #15181d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -18px rgba(0, 0, 0, .7); }

/* ── the screen ── */
.scr {
  --sf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f6f7f9; --sur: #ffffff; --sur2: #f9fafb; --line: #e6e8ec; --line2: #eef0f3; --tx: #0e1116; --tx2: #4a5260; --tx3: #8a919c;
  --acc: #0f8f72; --acc2: #0b7a61; --acc-soft: #e3f4ef; --acc-tx: #0b6b55; --ink: #0e1116;
  --s1: #0f8f72; --s2: #5b5bd6; --s3: #e3a008; --s4: #e0567b; --s5: #2b9be0; --s6: #9aa3ad;
  --ok: #16a34a; --ok-soft: #e6f6ec; --warn: #d97706; --warn-soft: #fdf3e2; --bad: #dc2626; --bad-soft: #fdecec; --info: #2563eb; --info-soft: #e8effd;
  box-sizing: border-box; position: relative; width: 100%; overflow: hidden; background: var(--bg); color: var(--tx); font: 400 calc(var(--u) * 14)/1.45 var(--sf);
  -webkit-font-smoothing: antialiased; text-align: start; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.scr.dark, .dark > .vp > .scr:not(.light), .dark .ph-in > .vp > .scr:not(.light) {
  --bg: #0b0d10; --sur: #13161b; --sur2: #171a20; --line: #23272e; --line2: #1c2026; --tx: #e8ebf0; --tx2: #a4abb6; --tx3: #6b7380;
  --acc: #2bc49c; --acc2: #22a886; --acc-soft: rgba(43, 196, 156, .14); --acc-tx: #5fd9b6; --ink: #f2f4f7;
  --s1: #2bc49c; --s2: #8b8bf0; --s3: #f2b632; --s4: #f07597; --s5: #4fb3f0; --s6: #59616b;
  --ok: #34c06b; --ok-soft: rgba(52, 192, 107, .14); --warn: #f0a63a; --warn-soft: rgba(240, 166, 58, .14); --bad: #f0605d; --bad-soft: rgba(240, 96, 93, .15); --info: #6b9bf5; --info-soft: rgba(107, 155, 245, .15);
}
[lang="ar"] .scr, .scr [lang="ar"] { --sf: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr p, .scr h1, .scr h2, .scr h3, .scr h4, .scr ul, .scr ol, .scr figure { margin: 0; padding: 0; }
.scr ul, .scr ol { list-style: none; }
.scr .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.scr .ic.f { fill: currentColor; stroke: none; }
[dir="rtl"] .scr .ic.dir { transform: scaleX(-1); }
.scr .ltr { direction: ltr; unicode-bidi: isolate; }
.scr .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* type */
.scr .h1 { font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: calc(var(--u) * -.4); line-height: 1.2; }
.scr .h2 { font-size: calc(var(--u) * 18); font-weight: 650; letter-spacing: calc(var(--u) * -.2); line-height: 1.25; }
.scr .h3 { font-size: calc(var(--u) * 15); font-weight: 650; line-height: 1.3; }
.scr .h4 { font-size: calc(var(--u) * 13); font-weight: 650; line-height: 1.3; }
.scr .sm { font-size: calc(var(--u) * 12.5); } .scr .xs { font-size: calc(var(--u) * 11.5); } .scr .xxs { font-size: calc(var(--u) * 10.5); }
.scr .mut { color: var(--tx2); } .scr .mut2 { color: var(--tx3); }
.scr .b { font-weight: 650; } .scr .sb { font-weight: 600; } .scr .md { font-weight: 500; }
.scr .cap { font-size: calc(var(--u) * 11); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tx3); }
[lang="ar"] .scr .cap { letter-spacing: 0; text-transform: none; font-size: calc(var(--u) * 11.5); }
.scr .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scr .up { color: var(--ok); } .scr .dn { color: var(--bad); } .scr .acc { color: var(--acc-tx); }

/* layout helpers */
.scr .row { display: flex; align-items: center; gap: calc(var(--u) * 8); min-width: 0; }
.scr .col { display: flex; flex-direction: column; gap: calc(var(--u) * 8); min-width: 0; }
.scr .sp { flex: 1 1 auto; min-width: 0; }
.scr .g4 { gap: calc(var(--u) * 4); } .scr .g6 { gap: calc(var(--u) * 6); } .scr .g10 { gap: calc(var(--u) * 10); } .scr .g12 { gap: calc(var(--u) * 12); } .scr .g16 { gap: calc(var(--u) * 16); } .scr .g20 { gap: calc(var(--u) * 20); } .scr .g24 { gap: calc(var(--u) * 24); }
.scr .hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* an app: sidebar + main */
.scr .app { display: grid; grid-template-columns: calc(var(--u) * 232) minmax(0, 1fr); height: 100%; }
.scr .side { background: var(--sur); border-inline-end: 1px solid var(--line); padding: calc(var(--u) * 14) calc(var(--u) * 12); display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.scr .side .brand { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 16); font-weight: 700; font-size: calc(var(--u) * 14.5); letter-spacing: calc(var(--u) * -.2); }
.scr .side .grp { margin: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 6); }
.scr .nv { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 8); color: var(--tx2); font-size: calc(var(--u) * 13.5); font-weight: 500; white-space: nowrap; }
.scr .nv .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); color: var(--tx3); }
.scr .nv.on { background: var(--acc-soft); color: var(--acc-tx); font-weight: 600; }
.scr .nv.on .ic { color: var(--acc-tx); }
.scr .nv .n { margin-inline-start: auto; font-size: calc(var(--u) * 11.5); color: var(--tx3); font-weight: 600; }
.scr .nv.on .n { color: var(--acc-tx); }
.scr .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.scr .topbar { height: calc(var(--u) * 60); flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24); background: var(--sur); border-bottom: 1px solid var(--line); }
.scr .content { flex: 1 1 auto; min-height: 0; padding: calc(var(--u) * 24); overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.scr .pagehead { display: flex; align-items: flex-end; gap: calc(var(--u) * 12); }

/* the « Votre Groupe » monogram */
.scr .vg { display: inline-flex; width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: 0 0 auto; }
.scr .vg svg { width: 100%; height: 100%; }
.scr .vg rect { fill: var(--acc); }
.scr .vg path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* surfaces */
.scr .card { background: var(--sur); border: 1px solid var(--line); border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 16); min-width: 0; }
.scr .card.flat { box-shadow: none; }
.scr .card.lift { box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .04), 0 calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * -2) rgba(16, 24, 40, .06); }
.scr .card-h { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 12); }
.scr .card-h .h4 { flex: 1 1 auto; }
.scr .kpi .lbl { font-size: calc(var(--u) * 12.5); color: var(--tx2); font-weight: 500; }
.scr .kpi .val { font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: calc(var(--u) * -.6); line-height: 1.15; margin-top: calc(var(--u) * 6); }
.scr .kpi .dl { font-size: calc(var(--u) * 12); font-weight: 600; display: inline-flex; align-items: center; gap: calc(var(--u) * 3); }
.scr .kpi .dl .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 2.2; }

/* inputs and buttons */
.scr .inp { height: calc(var(--u) * 36); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); border: 1px solid var(--line); border-radius: calc(var(--u) * 9); background: var(--sur); color: var(--tx3); font-size: calc(var(--u) * 13); min-width: 0; }
.scr .inp .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.scr .inp .k { margin-inline-start: auto; font-size: calc(var(--u) * 11); padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: calc(var(--u) * 5); border: 1px solid var(--line); color: var(--tx3); }
.scr .btn { height: calc(var(--u) * 34); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 13); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--sur); color: var(--tx); }
.scr .btn .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scr .btn.pri { background: var(--acc); border-color: var(--acc); color: #fff; }
.scr .btn.ink { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.scr .btn.ghost { border-color: transparent; background: transparent; color: var(--tx2); }
.scr .btn.sm { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 12); border-radius: calc(var(--u) * 7); }
.scr .btn.lg { height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 20); font-size: calc(var(--u) * 15); border-radius: calc(var(--u) * 11); }
.scr .icb { width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 9); color: var(--tx2); border: 1px solid var(--line); background: var(--sur); position: relative; }
.scr .icb .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.scr .icb .pip { position: absolute; top: calc(var(--u) * 6); inset-inline-end: calc(var(--u) * 7); width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }

/* tabs, segmented control, chips */
.scr .tabs { display: flex; gap: calc(var(--u) * 22); border-bottom: 1px solid var(--line); }
.scr .tab { padding: calc(var(--u) * 10) 0 calc(var(--u) * 11); font-size: calc(var(--u) * 13.5); font-weight: 500; color: var(--tx2); white-space: nowrap; position: relative; }
.scr .tab.on { color: var(--tx); font-weight: 600; }
.scr .tab.on::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: calc(var(--u) * 2); background: var(--acc); border-radius: calc(var(--u) * 2); }
.scr .tab .n { font-size: calc(var(--u) * 11); color: var(--tx3); margin-inline-start: calc(var(--u) * 5); }
.scr .seg { display: inline-flex; padding: calc(var(--u) * 3); gap: calc(var(--u) * 2); border-radius: calc(var(--u) * 9); background: var(--line2); }
.scr .seg span { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 11); display: inline-flex; align-items: center; gap: calc(var(--u) * 6); border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--tx2); white-space: nowrap; }
.scr .seg .on { background: var(--sur); color: var(--tx); font-weight: 600; box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .1); }
.scr .chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 8); border: 1px solid var(--line); background: var(--sur); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--tx2); white-space: nowrap; }
.scr .chip .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }

/* badges, dots, avatars */
.scr .bd { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); font-weight: 600; white-space: nowrap; background: var(--line2); color: var(--tx2); }
.scr .bd .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 2.2; }
.scr .bd.ok { background: var(--ok-soft); color: var(--ok); } .scr .bd.warn { background: var(--warn-soft); color: var(--warn); }
.scr .bd.bad { background: var(--bad-soft); color: var(--bad); } .scr .bd.info { background: var(--info-soft); color: var(--info); }
.scr .bd.accent { background: var(--acc-soft); color: var(--acc-tx); } .scr .bd.solid { background: var(--ink); color: var(--bg); }
.scr .dot { display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: var(--tx3); flex: 0 0 auto; }
.scr .dot.ok { background: var(--ok); } .scr .dot.warn { background: var(--warn); } .scr .dot.bad { background: var(--bad); } .scr .dot.info { background: var(--info); } .scr .dot.accent { background: var(--acc); }
.scr .av { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; flex: 0 0 auto; font-size: calc(var(--u) * 11); font-weight: 700; color: #fff; letter-spacing: 0; }
.scr .av.lg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); font-size: calc(var(--u) * 14); } .scr .av.sm { width: calc(var(--u) * 22); height: calc(var(--u) * 22); font-size: calc(var(--u) * 9.5); }
.scr .av.h0 { background: #0f8f72; } .scr .av.h1 { background: #5b5bd6; } .scr .av.h2 { background: #d4692a; } .scr .av.h3 { background: #c2417a; }
.scr .av.h4 { background: #2b7fc0; } .scr .av.h5 { background: #7a5a3a; } .scr .av.h6 { background: #3f8f3a; } .scr .av.h7 { background: #6b4fa8; }
.scr .avs { display: inline-flex; }
.scr .avs .av { box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }
.scr .avs .av + .av { margin-inline-start: calc(var(--u) * -8); }

/* tables: a grid per row (the screen sets grid-template-columns on .tr) */
.scr .tbl { display: flex; flex-direction: column; min-width: 0; }
.scr .tr { display: grid; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 12); border-bottom: 1px solid var(--line2); font-size: calc(var(--u) * 13); }
.scr .tr > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .tr.th { min-height: calc(var(--u) * 36); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--tx3); background: var(--sur2); border-bottom: 1px solid var(--line); }
[lang="ar"] .scr .tr.th { font-size: calc(var(--u) * 12); }
.scr .tr.sel { background: var(--acc-soft); }
.scr .tr .end, .scr .end { text-align: end; justify-self: end; }

/* progress, toggle */
.scr .prog { display: block; height: calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: var(--line2); overflow: hidden; }
.scr .prog i { display: block; height: 100%; border-radius: calc(var(--u) * 3); background: var(--s1); }
.scr .prog i.s2 { background: var(--s2); } .scr .prog i.s3 { background: var(--s3); } .scr .prog i.s4 { background: var(--s4); } .scr .prog i.s5 { background: var(--s5); }
.scr .prog i.ok { background: var(--ok); } .scr .prog i.warn { background: var(--warn); } .scr .prog i.bad { background: var(--bad); }
.scr .tog { display: inline-block; width: calc(var(--u) * 34); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 10); background: var(--line); position: relative; flex: 0 0 auto; }
.scr .tog::after { content: ""; position: absolute; top: calc(var(--u) * 2); inset-inline-start: calc(var(--u) * 2); width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: #fff; box-shadow: 0 1px calc(var(--u) * 2) rgba(0, 0, 0, .2); }
.scr .tog.on { background: var(--acc); }
.scr .tog.on::after { inset-inline-start: calc(var(--u) * 16); }
.scr .ck { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 5); border: calc(var(--u) * 1.5) solid var(--line); background: var(--sur); flex: 0 0 auto; }
.scr .ck.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.scr .ck .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 3; }

/* charts (kit.js area / bars / donut / spark): series tones s1…s6 */
.scr .chart { display: block; width: 100%; height: 100%; overflow: visible; }
.scr .chart .gl { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scr .chart .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.scr .chart.spark .ln { stroke-width: 1.75; }
.scr .chart .ln.s1 { stroke: var(--s1); } .scr .chart .ln.s2 { stroke: var(--s2); } .scr .chart .ln.s3 { stroke: var(--s3); } .scr .chart .ln.s4 { stroke: var(--s4); } .scr .chart .ln.s5 { stroke: var(--s5); } .scr .chart .ln.s6 { stroke: var(--s6); }
.scr .chart .st0 { stop-opacity: .26; } .scr .chart .st1 { stop-opacity: 0; }
.scr .chart .s1.st0, .scr .chart .s1.st1 { stop-color: var(--s1); } .scr .chart .s2.st0, .scr .chart .s2.st1 { stop-color: var(--s2); }
.scr .chart .s3.st0, .scr .chart .s3.st1 { stop-color: var(--s3); } .scr .chart .s4.st0, .scr .chart .s4.st1 { stop-color: var(--s4); }
.scr .chart .s5.st0, .scr .chart .s5.st1 { stop-color: var(--s5); } .scr .chart .s6.st0, .scr .chart .s6.st1 { stop-color: var(--s6); }
.scr .chart rect.s1 { fill: var(--s1); } .scr .chart rect.s2 { fill: var(--s2); } .scr .chart rect.s3 { fill: var(--s3); } .scr .chart rect.s4 { fill: var(--s4); } .scr .chart rect.s5 { fill: var(--s5); } .scr .chart rect.s6 { fill: var(--s6); }
.scr .chart rect.mute { fill: var(--line); }
.scr .chart .trk { stroke: var(--line2); }
.scr .chart .seg.s1 { stroke: var(--s1); } .scr .chart .seg.s2 { stroke: var(--s2); } .scr .chart .seg.s3 { stroke: var(--s3); } .scr .chart .seg.s4 { stroke: var(--s4); } .scr .chart .seg.s5 { stroke: var(--s5); } .scr .chart .seg.s6 { stroke: var(--s6); }
.scr .lg { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: var(--tx2); white-space: nowrap; }
.scr .lg i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2); background: var(--s1); }
.scr .lg i.s2 { background: var(--s2); } .scr .lg i.s3 { background: var(--s3); } .scr .lg i.s4 { background: var(--s4); } .scr .lg i.s5 { background: var(--s5); } .scr .lg i.s6 { background: var(--s6); }
.scr .axis { display: flex; justify-content: space-between; font-size: calc(var(--u) * 11); color: var(--tx3); direction: ltr; }

/* a typing caret and a pointer */
.scr .caret { display: inline-block; width: calc(var(--u) * 2); height: 1.1em; margin-inline-start: calc(var(--u) * 2); vertical-align: text-bottom; background: var(--acc); animation: scr-blink 1s steps(1) infinite; }
.scr .ptr { position: absolute; z-index: 20; width: calc(var(--u) * 22); height: calc(var(--u) * 22); pointer-events: none; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .35)); }
.scr .ptr svg { width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
@keyframes scr-blink { 50% { opacity: 0; } }

/* ── motion: the page's script adds .in to a frame (.dev) when it comes into view, and .js to <html> from the start.
   Without the script (or with reduced motion) everything is shown as it ends. A screen animates with these classes, its own
   keyframes keyed off .in, and delays .d1…d80 (0.1 s steps). ── */
.js .dev:not(.in) .a-up, .js .dev:not(.in) .a-fade, .js .dev:not(.in) .a-pop, .js .dev:not(.in) .a-type { opacity: 0; }
.js .dev:not(.in) .a-gx { transform: scaleX(0); }
.js .dev:not(.in) .a-gy, .js .dev:not(.in) .chart.bars.a-bars rect { transform: scaleY(0); }
.js .dev:not(.in) .a-draw .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .dev:not(.in) .a-draw .ar { opacity: 0; }
.in .a-up { animation: scr-up .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.in .a-fade { animation: scr-fade .6s ease var(--d, 0s) both; }
.in .a-pop { animation: scr-pop .5s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0s) both; }
.in .a-gx { transform-origin: 0 50%; animation: scr-gx .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
[dir="rtl"] .in .a-gx { transform-origin: 100% 50%; }
.in .a-gy { transform-origin: 50% 100%; animation: scr-gy .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.in .chart.bars.a-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: scr-gy .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.in .chart.bars.a-bars rect:nth-child(2n) { animation-delay: calc(var(--d, 0s) + .06s); } .in .chart.bars.a-bars rect:nth-child(3n) { animation-delay: calc(var(--d, 0s) + .12s); }
.in .a-draw .ln { stroke-dasharray: 1; animation: scr-draw 1.6s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
.in .a-draw .ar { animation: scr-fade 1s ease calc(var(--d, 0s) + .6s) both; }
.in .a-type { animation: scr-type 1.2s steps(28) var(--d, 0s) both; }
[dir="rtl"] .in .a-type { animation-name: scr-type-rtl; }
@keyframes scr-up { from { opacity: 0; transform: translateY(calc(var(--u) * 14)); } to { opacity: 1; transform: none; } }
@keyframes scr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scr-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes scr-gx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes scr-gy { from { transform: scaleY(0); } to { transform: none; } }
@keyframes scr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scr-type { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes scr-type-rtl { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .scr *, .scr *::before, .scr *::after { animation: none !important; } .js .dev .scr * { opacity: 1 !important; transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; } }

/* ── generated helpers ── */
.pw-0{width:0%}.ph-0{height:0%}.pw-1{width:1%}.ph-1{height:1%}.pw-2{width:2%}.ph-2{height:2%}.pw-3{width:3%}.ph-3{height:3%}.pw-4{width:4%}.ph-4{height:4%}.pw-5{width:5%}.ph-5{height:5%}.pw-6{width:6%}.ph-6{height:6%}.pw-7{width:7%}.ph-7{height:7%}.pw-8{width:8%}.ph-8{height:8%}.pw-9{width:9%}.ph-9{height:9%}.pw-10{width:10%}.ph-10{height:10%}.pw-11{width:11%}.ph-11{height:11%}.pw-12{width:12%}.ph-12{height:12%}.pw-13{width:13%}.ph-13{height:13%}.pw-14{width:14%}.ph-14{height:14%}.pw-15{width:15%}.ph-15{height:15%}.pw-16{width:16%}.ph-16{height:16%}.pw-17{width:17%}.ph-17{height:17%}.pw-18{width:18%}.ph-18{height:18%}.pw-19{width:19%}.ph-19{height:19%}.pw-20{width:20%}.ph-20{height:20%}.pw-21{width:21%}.ph-21{height:21%}.pw-22{width:22%}.ph-22{height:22%}.pw-23{width:23%}.ph-23{height:23%}.pw-24{width:24%}.ph-24{height:24%}.pw-25{width:25%}.ph-25{height:25%}.pw-26{width:26%}.ph-26{height:26%}.pw-27{width:27%}.ph-27{height:27%}.pw-28{width:28%}.ph-28{height:28%}.pw-29{width:29%}.ph-29{height:29%}.pw-30{width:30%}.ph-30{height:30%}.pw-31{width:31%}.ph-31{height:31%}.pw-32{width:32%}.ph-32{height:32%}.pw-33{width:33%}.ph-33{height:33%}.pw-34{width:34%}.ph-34{height:34%}.pw-35{width:35%}.ph-35{height:35%}.pw-36{width:36%}.ph-36{height:36%}.pw-37{width:37%}.ph-37{height:37%}.pw-38{width:38%}.ph-38{height:38%}.pw-39{width:39%}.ph-39{height:39%}.pw-40{width:40%}.ph-40{height:40%}.pw-41{width:41%}.ph-41{height:41%}.pw-42{width:42%}.ph-42{height:42%}.pw-43{width:43%}.ph-43{height:43%}.pw-44{width:44%}.ph-44{height:44%}.pw-45{width:45%}.ph-45{height:45%}.pw-46{width:46%}.ph-46{height:46%}.pw-47{width:47%}.ph-47{height:47%}.pw-48{width:48%}.ph-48{height:48%}.pw-49{width:49%}.ph-49{height:49%}.pw-50{width:50%}.ph-50{height:50%}.pw-51{width:51%}.ph-51{height:51%}.pw-52{width:52%}.ph-52{height:52%}.pw-53{width:53%}.ph-53{height:53%}.pw-54{width:54%}.ph-54{height:54%}.pw-55{width:55%}.ph-55{height:55%}.pw-56{width:56%}.ph-56{height:56%}.pw-57{width:57%}.ph-57{height:57%}.pw-58{width:58%}.ph-58{height:58%}.pw-59{width:59%}.ph-59{height:59%}.pw-60{width:60%}.ph-60{height:60%}.pw-61{width:61%}.ph-61{height:61%}.pw-62{width:62%}.ph-62{height:62%}.pw-63{width:63%}.ph-63{height:63%}.pw-64{width:64%}.ph-64{height:64%}.pw-65{width:65%}.ph-65{height:65%}.pw-66{width:66%}.ph-66{height:66%}.pw-67{width:67%}.ph-67{height:67%}.pw-68{width:68%}.ph-68{height:68%}.pw-69{width:69%}.ph-69{height:69%}.pw-70{width:70%}.ph-70{height:70%}.pw-71{width:71%}.ph-71{height:71%}.pw-72{width:72%}.ph-72{height:72%}.pw-73{width:73%}.ph-73{height:73%}.pw-74{width:74%}.ph-74{height:74%}.pw-75{width:75%}.ph-75{height:75%}.pw-76{width:76%}.ph-76{height:76%}.pw-77{width:77%}.ph-77{height:77%}.pw-78{width:78%}.ph-78{height:78%}.pw-79{width:79%}.ph-79{height:79%}.pw-80{width:80%}.ph-80{height:80%}.pw-81{width:81%}.ph-81{height:81%}.pw-82{width:82%}.ph-82{height:82%}.pw-83{width:83%}.ph-83{height:83%}.pw-84{width:84%}.ph-84{height:84%}.pw-85{width:85%}.ph-85{height:85%}.pw-86{width:86%}.ph-86{height:86%}.pw-87{width:87%}.ph-87{height:87%}.pw-88{width:88%}.ph-88{height:88%}.pw-89{width:89%}.ph-89{height:89%}.pw-90{width:90%}.ph-90{height:90%}.pw-91{width:91%}.ph-91{height:91%}.pw-92{width:92%}.ph-92{height:92%}.pw-93{width:93%}.ph-93{height:93%}.pw-94{width:94%}.ph-94{height:94%}.pw-95{width:95%}.ph-95{height:95%}.pw-96{width:96%}.ph-96{height:96%}.pw-97{width:97%}.ph-97{height:97%}.pw-98{width:98%}.ph-98{height:98%}.pw-99{width:99%}.ph-99{height:99%}.pw-100{width:100%}.ph-100{height:100%}
.d1{--d:0.1s}.d2{--d:0.2s}.d3{--d:0.3s}.d4{--d:0.4s}.d5{--d:0.5s}.d6{--d:0.6s}.d7{--d:0.7s}.d8{--d:0.8s}.d9{--d:0.9s}.d10{--d:1.0s}.d11{--d:1.1s}.d12{--d:1.2s}.d13{--d:1.3s}.d14{--d:1.4s}.d15{--d:1.5s}.d16{--d:1.6s}.d17{--d:1.7s}.d18{--d:1.8s}.d19{--d:1.9s}.d20{--d:2.0s}.d21{--d:2.1s}.d22{--d:2.2s}.d23{--d:2.3s}.d24{--d:2.4s}.d25{--d:2.5s}.d26{--d:2.6s}.d27{--d:2.7s}.d28{--d:2.8s}.d29{--d:2.9s}.d30{--d:3.0s}.d31{--d:3.1s}.d32{--d:3.2s}.d33{--d:3.3s}.d34{--d:3.4s}.d35{--d:3.5s}.d36{--d:3.6s}.d37{--d:3.7s}.d38{--d:3.8s}.d39{--d:3.9s}.d40{--d:4.0s}.d41{--d:4.1s}.d42{--d:4.2s}.d43{--d:4.3s}.d44{--d:4.4s}.d45{--d:4.5s}.d46{--d:4.6s}.d47{--d:4.7s}.d48{--d:4.8s}.d49{--d:4.9s}.d50{--d:5.0s}.d51{--d:5.1s}.d52{--d:5.2s}.d53{--d:5.3s}.d54{--d:5.4s}.d55{--d:5.5s}.d56{--d:5.6s}.d57{--d:5.7s}.d58{--d:5.8s}.d59{--d:5.9s}.d60{--d:6.0s}.d61{--d:6.1s}.d62{--d:6.2s}.d63{--d:6.3s}.d64{--d:6.4s}.d65{--d:6.5s}.d66{--d:6.6s}.d67{--d:6.7s}.d68{--d:6.8s}.d69{--d:6.9s}.d70{--d:7.0s}.d71{--d:7.1s}.d72{--d:7.2s}.d73{--d:7.3s}.d74{--d:7.4s}.d75{--d:7.5s}.d76{--d:7.6s}.d77{--d:7.7s}.d78{--d:7.8s}.d79{--d:7.9s}.d80{--d:8.0s}