/* The Simulator chapter (B2B). Needs ../base/base.css, ../motion/motion.css and ../clips/clips.css (the pieces inside the
   clips), and ch-simulator.js. Every colour comes from the tokens of base.css, so the skin is A's: the office is mixed from
   --fondo (the page), --ink and --blu-t; the product pictures inside the clips keep the product's own colours.
   Two parts: the opening (the isometric office on a scroll track) and the three steps (a square clip beside a list of
   three, the kit's shape) with the pieces of the clips written for this chapter. */

/* =====================================================================================================================
   1. The opening: one stage pinned while the page scrolls through its stops. The camera starts behind one person, her
   call on her monitor; steps back to her and the two beside her, an arrow on each; the department; the lead's office
   lit in it; the whole company. The text is on the left on a wide screen, on top on a phone.
   ===================================================================================================================== */
.simulator-track{position:relative;width:100vw;margin-inline:calc(50% - 50vw);height:calc(100vh - var(--barra-h) + 400vh);height:calc(100svh - var(--barra-h) + 400svh)}
.simulator-stage{position:sticky;top:var(--barra-h);height:calc(100vh - var(--barra-h));height:calc(100svh - var(--barra-h));min-height:540px;overflow:hidden;isolation:isolate;
  /* the office, mixed from the page's colours: night lifts toward white, day sinks toward black */
  --o-ground-t:color-mix(in oklch,var(--fondo),white 7%);--o-ground-l:color-mix(in oklch,var(--fondo),white 1.5%);--o-ground-r:color-mix(in oklch,var(--fondo),white 4%);
  --o-floor-t:color-mix(in oklch,var(--fondo),white 13%);--o-floor-l:color-mix(in oklch,var(--fondo),white 5%);--o-floor-r:color-mix(in oklch,var(--fondo),white 9%);
  --o-lit-t:color-mix(in oklch,var(--fondo),var(--blu-t) 34%);--o-lit-edge:color-mix(in oklch,var(--blu-t),transparent 15%);
  --o-rug:color-mix(in oklch,var(--fondo),white 19%);
  --o-desk-t:color-mix(in oklch,var(--fondo),white 34%);--o-desk-l:color-mix(in oklch,var(--fondo),white 17%);--o-desk-r:color-mix(in oklch,var(--fondo),white 25%);
  --o-scr-t:color-mix(in oklch,var(--fondo),white 24%);--o-scr-l:color-mix(in oklch,var(--fondo),white 6%);--o-scr-r:color-mix(in oklch,var(--fondo),white 13%);
  --o-glass:color-mix(in oklch,var(--fondo),white 16%);
  --o-copier-t:color-mix(in oklch,var(--fondo),white 70%);--o-copier-l:color-mix(in oklch,var(--fondo),white 42%);--o-copier-r:color-mix(in oklch,var(--fondo),white 56%);
  --o-sign:color-mix(in oklch,var(--ink),transparent 52%);--o-sign-small:color-mix(in oklch,var(--ink),transparent 60%);
  --o-label:color-mix(in oklch,var(--fondo),var(--ink) 11%);--o-label-line:color-mix(in oklch,var(--ink),transparent 82%);--o-pill-edge:color-mix(in oklch,var(--ink),transparent 18%)}
.simulator-stage::before{content:"";position:absolute;inset:0 0 auto;z-index:1;height:72px;background:linear-gradient(var(--fondo),color-mix(in oklch,var(--fondo),transparent 100%));pointer-events:none}
.simulator-stage.is-wide::before{z-index:4}
.simulator-map{position:absolute;inset:0;width:100%;height:100%}
/* the camera's light: what it looks at stays lit, the rest of the office goes dark (the script moves it) */
.simulator-spot{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.simulator-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--fondo) 0,var(--fondo) calc(var(--vx,420px) - 60px),color-mix(in oklch,var(--fondo),transparent 100%) calc(var(--vx,420px) + 40px))}
.simulator-over{position:absolute;inset:0;z-index:2;pointer-events:none}
.simulator-copy{position:absolute;z-index:3;left:max(var(--gutter),calc((100% - var(--largo)) / 2));top:50%;transform:translateY(-50%);width:min(400px,31vw)}
.simulator-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:340px;transition:opacity .4s var(--e-ui)}
.simulator-tabs button{display:block;padding:0 0 6px;text-align:left;font-size:calc(15 * var(--px));font-weight:560;color:var(--ink-3);transition:color .25s var(--e-ui)}
/* each level's bar fills with the scroll (--f, set by the script): the levels done stay full, the next is empty */
.simulator-tabs button::before{content:"";display:block;height:4px;margin-bottom:10px;border-radius:4px;background:linear-gradient(90deg,var(--ink) calc(var(--f,0) * 100%),var(--riga-2) 0)}
.simulator-tabs button.done{color:var(--ink-2)}
.simulator-tabs button.on{color:var(--ink)}
.simulator-tabs button span{margin-right:.4em;opacity:.55}
@media (hover:hover){.simulator-tabs button:not(.on):hover{color:var(--ink-2)}}
.simulator-steps{display:grid;margin-top:30px}
.simulator-step{grid-area:1/1;align-self:start;opacity:0;transform:translateY(16px);transition:opacity .3s var(--e-ui),transform .6s var(--e-esce);pointer-events:none}
.simulator-step.on{opacity:1;transform:none;transition:opacity .45s var(--e-ui) .15s,transform .8s var(--e-molla) .15s}
/* stop zero is not a level: no tabs yet, and its title says what it is */
.simulator-stage.is-zero .simulator-tabs{opacity:0;pointer-events:none}
.simulator-step h3{font-family:var(--serif);font-size:var(--t-h2);font-weight:400;line-height:.96;letter-spacing:-.022em;text-wrap:balance}
.simulator-step h3 em{display:block;font-family:inherit;font-style:normal;font-weight:inherit;text-transform:none;letter-spacing:inherit;color:var(--ink-3)}
/* under the company's title, three points, scannable: an icon each; the one of the stop on screen is lit and the others wait */
.simulator-points{list-style:none;padding:0;margin-top:24px;display:grid;gap:14px;max-width:34ch}
.simulator-point{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:14px;font-size:var(--t-corpo);line-height:1.35;color:var(--ink);transition:color .35s var(--e-ui)}
.simulator-point:not(.on){color:var(--ink-3)}
.simulator-point svg{width:48px;height:48px;padding:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--riga-2);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s var(--e-ui),transform .6s var(--e-molla)}
.simulator-point:not(.on) svg{opacity:.55;transform:scale(.86)}

/* the map: an isometric office drawn in SVG by the script; people sit with their back to us, facing their screen */
.simulator-map polygon{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.simulator-ground .t{fill:var(--o-ground-t)}.simulator-ground .l{fill:var(--o-ground-l)}.simulator-ground .r{fill:var(--o-ground-r)}
.simulator-floor .t{fill:var(--o-floor-t);stroke:color-mix(in oklch,var(--ink),transparent 90%);stroke-width:1;transition:fill .6s var(--e-ui),stroke .6s var(--e-ui)}
.simulator-floor .l{fill:var(--o-floor-l)}.simulator-floor .r{fill:var(--o-floor-r)}
.simulator-floor.lit .t{fill:var(--o-lit-t);stroke:var(--o-lit-edge)}
.simulator-rug{fill:var(--o-rug)}
.simulator-desk .t{fill:var(--o-desk-t)}.simulator-desk .l{fill:var(--o-desk-l)}.simulator-desk .r{fill:var(--o-desk-r)}
.simulator-screen .t{fill:var(--o-scr-t)}.simulator-screen .l{fill:var(--o-scr-l)}.simulator-screen .r{fill:var(--o-scr-r)}
.simulator-glass{fill:color-mix(in oklch,var(--fondo),white 10%)}
.simulator-les-f{fill:color-mix(in oklch,var(--blu-t),var(--fondo) 40%)}.simulator-les-t{fill:var(--ink)}.simulator-les-r{fill:color-mix(in oklch,var(--ink),transparent 35%)}
.simulator-cru-f{fill:color-mix(in oklch,var(--fondo),white 6%)}.simulator-cru-b{fill:var(--blu-t);opacity:.8}
.simulator-new{fill:var(--blu-t);opacity:0;transition:opacity .5s var(--e-ui)}
.simulator-pane{fill:color-mix(in oklch,var(--ink),transparent 94%);stroke:color-mix(in oklch,var(--ink),transparent 68%);stroke-width:1}
.simulator-copier .t{fill:var(--o-copier-t)}.simulator-copier .l{fill:var(--o-copier-l)}.simulator-copier .r{fill:var(--o-copier-r)}
.simulator-sheet{fill:oklch(98% 0 0)}
.simulator-pot .t{fill:var(--o-desk-t)}.simulator-pot .l{fill:var(--o-desk-l)}.simulator-pot .r{fill:var(--o-desk-r)}
.simulator-leaves{fill:color-mix(in oklch,var(--fondo),var(--ink) 45%)}
.simulator-fig{transition:opacity .5s var(--e-ui)}
/* written on the floor, like the signs painted in an office */
.simulator-sign{font-family:var(--font);font-weight:720;letter-spacing:.06em;fill:var(--o-sign);transition:fill .5s var(--e-ui)}
.simulator-sign.small{font-weight:650;fill:var(--o-sign-small)}
.simulator-sign.lit{fill:var(--ink)}
.simulator-news{font-family:var(--font);font-weight:720;letter-spacing:.06em;fill:var(--ink);opacity:0;transition:opacity .4s var(--e-ui)}
.simulator-news.on{opacity:1}
/* department: how each person is doing, above their head, and flying into the lead's screen (solid dots, the tags' way) */
.simulator-status{opacity:0;stroke:var(--fondo);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:opacity .3s var(--e-ui)}
.simulator-status.ok,.simulator-dot.ok{fill:var(--ok)}.simulator-status.help,.simulator-dot.help{fill:var(--att)}.simulator-status.on,.simulator-dot.on{fill:var(--blu-t)}
.simulator-dot{transition:transform .95s cubic-bezier(.5,0,.3,1),opacity .95s ease-in}
.simulator-glow{fill:url(#simulator-glow);opacity:0;transition:opacity .6s var(--e-ui)}
.simulator-stage[data-f="3"] .simulator-glow{opacity:1}
/* company: something new, a wave across the company */
.simulator-wave{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.simulator-wave.go{animation:simulator-wave 1.6s var(--e-esce)}
@keyframes simulator-wave{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(26)}}

/* close up: her call plays on her monitor (the script lays the video on the monitor's face), and she is drawn again in front of it */
.simulator-close{position:absolute;inset:0;pointer-events:none}
.simulator-tv{position:absolute;left:0;top:0;width:312px;height:192px;object-fit:cover;transform-origin:0 0;background:#000}
.simulator-front{position:absolute;inset:0;width:100%;height:100%}
/* what the camera points at: an arrow with a line of text, and a label over each person */
.simulator-labels{position:absolute;inset:0}
.simulator-arrow,.simulator-chip{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .35s var(--e-ui)}
.simulator-arrow.on,.simulator-chip.on{opacity:1}
.simulator-chip.on.down{opacity:.28}
.simulator-arrow-in{position:absolute;left:0;bottom:0;width:max-content;display:grid;justify-items:center;transform:translateX(-50%);transition:transform .6s var(--e-molla)}
.simulator-arrow.alone .simulator-arrow-in{transform:translate(-50%,calc(-1 * var(--lift,40px)))}
.simulator-arrow-t{max-width:min(420px,calc(100vw - 28px));padding:10px 16px;border-radius:14px;background:var(--o-label);color:var(--ink);box-shadow:0 0 0 1.5px var(--o-pill-edge),0 18px 40px -14px oklch(0% 0 0/.5);font-size:calc(16.5 * var(--px));font-weight:620;line-height:1.3;letter-spacing:-.01em;text-align:center;text-wrap:balance;transform:translateX(var(--dx,0));transition:opacity .18s var(--e-ui)}
.simulator-arrow-t.swap{opacity:0}
.simulator-arrow i{position:relative;width:2px;height:38px;margin-bottom:6px;background:var(--o-pill-edge);transition:height .5s var(--e-molla),opacity .3s var(--e-ui)}
.simulator-arrow i::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.simulator-arrow.alone i{height:0;opacity:0}
.simulator-chip span{position:absolute;left:0;bottom:6px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:var(--o-label);color:var(--ink);box-shadow:0 0 0 1px var(--o-label-line);font-size:calc(12.5 * var(--px));font-weight:600;white-space:nowrap}
.simulator-chip .e,.simulator-labels[data-m="result"] .simulator-chip .c{display:none}
.simulator-labels[data-m="result"] .simulator-chip .e{display:block}
.simulator-chip.ok .e{color:var(--ok)}.simulator-chip.on .e{color:var(--blu-t)}.simulator-chip.help .e{color:var(--att);box-shadow:0 0 0 1.5px var(--att)}
.simulator-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.simulator-wire path{fill:none;stroke:var(--att);stroke-width:2;stroke-dasharray:5 6;opacity:0;transition:opacity .4s var(--e-ui)}
.simulator-labels.wired .simulator-wire path{opacity:.9;animation:simulator-wire 1s linear infinite}
@keyframes simulator-wire{to{stroke-dashoffset:-22}}
.simulator-stage:not(.is-wide) .simulator-arrow-t{padding:8px 12px;font-size:calc(14.5 * var(--px))}
.simulator-stage:not(.is-wide) .simulator-chip span{padding:4px 8px;font-size:calc(11 * var(--px))}
/* the stage comes in as a whole once it fills most of the screen, and leaves the same way (the script decides) */
.simulator-stage :is(.simulator-map,.simulator-close,.simulator-over,.simulator-copy){transition:opacity .7s var(--e-ui)}
.simulator-stage:not(.is-in) :is(.simulator-map,.simulator-close,.simulator-over,.simulator-copy){opacity:0}

/* the layout follows the script's choice (.is-wide: text beside the map; otherwise text on top), so a phone held sideways
   gets the side layout; .is-short is a short screen */
.simulator-stage:not(.is-wide) .simulator-veil{background:linear-gradient(180deg,var(--fondo) 0,var(--fondo) calc(var(--vy,200px) - 16px),color-mix(in oklch,var(--fondo),transparent 100%) calc(var(--vy,200px) + 30px))}
.simulator-stage:not(.is-wide) .simulator-copy{inset:0 0 auto;transform:none;width:auto;padding:18px var(--gutter) 0}
.simulator-stage:not(.is-wide) .simulator-tabs{max-width:none}
.simulator-stage:not(.is-wide) .simulator-steps,.simulator-stage.is-short .simulator-steps{margin-top:16px}
.simulator-stage:not(.is-wide) .simulator-points,.simulator-stage.is-short .simulator-points{margin-top:12px;gap:8px;max-width:none}
.simulator-stage:not(.is-wide) .simulator-point,.simulator-stage.is-short .simulator-point{grid-area:1/1;grid-template-columns:40px minmax(0,1fr);gap:12px;font-size:calc(15.5 * var(--px));opacity:0;transform:translateY(8px);transition:opacity .3s var(--e-ui),transform .6s var(--e-molla)}
.simulator-stage:not(.is-wide) .simulator-point.on,.simulator-stage.is-short .simulator-point.on{opacity:1;transform:none}
.simulator-stage:not(.is-wide) .simulator-point svg,.simulator-stage.is-short .simulator-point svg{width:40px;height:40px;padding:10px}
.simulator-stage:not(.is-wide) .simulator-step h3,.simulator-stage.is-short .simulator-step h3{font-size:clamp(28px,7.4vw,36px)}
.simulator-stage.is-short .simulator-copy{width:min(300px,34vw)}
@media (max-height:560px){.simulator-stage{min-height:0}}
@media (max-width:899px){
  .simulator-tabs button{font-size:calc(14 * var(--px))}
  .simulator-tabs button::before{margin-bottom:8px}
}

/* by day (the chapter is .giorno): a white office on a cool floor, the screens stay dark, what the camera leaves out fades to white */
.giorno .simulator-stage{
  --o-ground-t:color-mix(in oklch,var(--fondo),black 5%);--o-ground-l:color-mix(in oklch,var(--fondo),black 16%);--o-ground-r:color-mix(in oklch,var(--fondo),black 10%);
  --o-floor-t:var(--fondo);--o-floor-l:color-mix(in oklch,var(--fondo),black 13%);--o-floor-r:color-mix(in oklch,var(--fondo),black 8%);
  --o-lit-t:color-mix(in oklch,var(--fondo),var(--blu-t) 12%);
  --o-rug:color-mix(in oklch,var(--fondo),black 6%);
  --o-desk-t:var(--fondo);--o-desk-l:color-mix(in oklch,var(--fondo),black 17%);--o-desk-r:color-mix(in oklch,var(--fondo),black 10%);
  --o-scr-t:color-mix(in oklch,var(--fondo),black 55%);--o-scr-l:color-mix(in oklch,var(--fondo),black 74%);--o-scr-r:color-mix(in oklch,var(--fondo),black 66%);
  --o-copier-t:var(--fondo);--o-copier-l:color-mix(in oklch,var(--fondo),black 22%);--o-copier-r:color-mix(in oklch,var(--fondo),black 13%);
  --o-label:var(--ink);--o-label-line:transparent;--o-pill-edge:var(--ink)}
.giorno .simulator-stage .simulator-arrow-t,.giorno .simulator-stage .simulator-chip span{color:var(--fondo)}
.giorno .simulator-stage .simulator-arrow i::after{border-color:var(--ink)}
.giorno .simulator-glass{fill:color-mix(in oklch,var(--fondo),black 70%)}
.giorno .simulator-cru-f{fill:color-mix(in oklch,var(--fondo),black 74%)}
.giorno .simulator-floor .t{stroke:color-mix(in oklch,var(--ink),transparent 88%)}
.giorno .simulator-status{stroke:var(--fondo)}

/* =====================================================================================================================
   2. The steps: the reference site's shape (a square clip beside a title and a list of three, the sides alternate), on the kit's
   .cl-sec; the frame wears the chapter's skin and the pieces below repaint the kit's for the nine clips
   ===================================================================================================================== */
#ch-simulator .cl-sec{padding-top:clamp(72px,9vw,140px)}
#ch-simulator .cl-sec:first-child{padding-top:clamp(56px,6vw,96px)}
/* the frame is a picture of the product, so inside it the product keeps its own night and its own blue (the page's tokens
   are black, white and no blue, and the kit's pieces read --blu and --blu-t as a blue): the tokens are set again here, for
   the picture only. Day or night around it, the picture is the same. */
#ch-simulator .cl-frame{color-scheme:dark;background:oklch(16.8% .048 262);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.08);
  --fondo:oklch(14.2% .045 262);--piano:oklch(20.5% .05 262);--piano-2:oklch(23.5% .05 262);--piano-3:oklch(27% .05 262);
  --riga:oklch(96% .004 85/.1);--riga-2:oklch(96% .004 85/.18);
  --ink:oklch(98% .004 255);--ink-2:oklch(98% .004 255/.78);--ink-3:oklch(98% .004 255/.6);--spento:oklch(98% .004 255/.38);
  --blu:oklch(55% .2 262);--blu-su:oklch(60% .2 262);--blu-t:oklch(76% .12 256);--su-blu:oklch(99% .003 262);
  --ok:oklch(76% .15 155);--att:oklch(80% .13 78);color:var(--ink)}

/* The nine clips' pieces in the Simulator site's own colours, its night blue and its blue (its clips.css, lines 121-354, read
   2026-10-03), scoped to this chapter's frames: the kit's clips.css has the same rules repainted grey for the page's skin,
   and the frame is a picture of the product. Also the site's latest: no backdrop blur under the video's tag and captions.
   Generated from the site's file, so keep it a copy: change it there and copy again. */
#ch-simulator .cl-frame{--serif:"Instrument Serif",ui-serif,Georgia,serif}
/* ---------- the pieces the clips are made of ---------- */
#ch-simulator .cl-frame .cl-ab{position:absolute}
#ch-simulator .cl-frame .pn{border-radius:14px;background:oklch(20.5% .05 262);box-shadow:inset 0 1px 0 oklch(100% 0 0/.05),0 0 0 1px oklch(96% .005 262/.09),0 40px 70px -34px oklch(0% 0 0/.9)}
#ch-simulator .cl-frame .pn-2{background:oklch(23.5% .05 262)}
#ch-simulator .cl-frame .cl-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid oklch(96% .005 262/.07)}
#ch-simulator .cl-frame .cl-hd b{font-weight:600}
#ch-simulator .cl-frame .cl-hd small{margin-left:auto;font-size:13px;color:var(--ink-3)}
#ch-simulator .cl-frame .cl-face{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
#ch-simulator .cl-frame .cl-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:oklch(55% .2 262/.18);color:var(--blu-t);flex:none}
#ch-simulator .cl-frame .cl-ic svg{width:17px;height:17px}
#ch-simulator .cl-frame .cl-mut{color:var(--ink-3)}
/* pills: green is good, amber is what to work on, blue is Simulator's */
#ch-simulator .cl-frame .pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;font-size:13.5px;font-weight:580;white-space:nowrap;background:oklch(96% .005 262/.08);color:var(--ink-2)}
#ch-simulator .cl-frame .pill svg{width:14px;height:14px}
#ch-simulator .cl-frame .pill.ok{background:oklch(76% .15 155/.15);color:var(--ok)}
#ch-simulator .cl-frame .pill.att{background:oklch(80% .13 78/.15);color:var(--att)}
#ch-simulator .cl-frame .pill.blu{background:oklch(55% .2 262/.22);color:var(--blu-t)}
#ch-simulator .cl-frame .pill.red{background:oklch(63% .2 25/.18);color:oklch(76% .13 25)}
/* what is still being worked out shines, then turns into its value */
#ch-simulator .cl-frame .load{color:transparent;background:linear-gradient(90deg,oklch(98% 0 0/.22) 20%,oklch(98% 0 0/.62) 50%,oklch(98% 0 0/.22) 80%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:cl-shine 1.5s linear infinite;font-size:14px;white-space:nowrap}
#ch-simulator .cl-frame .cl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 16px;border-radius:10px;background:oklch(99% 0 0);color:oklch(18% .06 262);font-size:14.5px;font-weight:620;white-space:nowrap;transition:background-color .2s var(--e-ui),transform .12s var(--e-ui)}
#ch-simulator .cl-frame .cl-btn svg{width:16px;height:16px}
#ch-simulator .cl-frame .cl-btn.hover{background:oklch(92% .03 255)}
#ch-simulator .cl-frame .cl-btn.blu{background:var(--blu);color:#fff}
#ch-simulator .cl-frame .cl-btn.blu.hover{background:var(--blu-su)}
#ch-simulator .cl-frame .cl-btn.ok{background:oklch(76% .15 155/.18);color:var(--ok)}
#ch-simulator .cl-frame .cl-chk{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px oklch(96% .005 262/.25);flex:none;transition:background-color .2s var(--e-ui),box-shadow .2s var(--e-ui)}
#ch-simulator .cl-frame .cl-chk svg{width:12px;height:12px;stroke-width:3;color:#fff;opacity:0;transition:opacity .15s var(--e-ui)}
#ch-simulator .cl-frame .cl-chk.on{background:var(--blu);box-shadow:none}
#ch-simulator .cl-frame .cl-chk.on svg{opacity:1}
#ch-simulator .cl-frame .cl-caret{display:inline-block;width:2px;height:1.1em;margin-left:1px;vertical-align:-.2em;background:var(--blu-t);animation:mg-blink 1s steps(1) infinite}
#ch-simulator .cl-frame .cl-rec{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
#ch-simulator .cl-frame .cl-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:oklch(63% .22 25);animation:mg-pulse 1.4s infinite}
#ch-simulator .cl-frame .cl-rec.end::before{animation:none;background:var(--ink-3)}
#ch-simulator .cl-frame .cl-vid{position:relative;overflow:hidden;border-radius:12px;background:#000}
#ch-simulator .cl-frame .cl-vid video{width:100%;height:100%;object-fit:cover;display:block}
#ch-simulator .cl-frame .cl-vid .tag{position:absolute;left:12px;top:12px;padding:4px 9px;border-radius:7px;background:oklch(32% .02 262/.85);font-size:13px;font-weight:560;color:#fff}
#ch-simulator .cl-frame .cl-vid .cc{position:absolute;left:50%;bottom:14px;translate:-50% 0;width:max-content;max-width:86%;padding:8px 13px;border-radius:10px;background:oklch(12% .03 262/.88);font-size:15px;line-height:1.35;text-align:center}
#ch-simulator .cl-frame .cl-vid .cc small{display:block;font-size:11.5px;font-weight:600;color:var(--blu-t)}
#ch-simulator .cl-frame .cl-vid .cc.me small{color:var(--att)}
#ch-simulator .cl-frame .cl-vid .me-cam{position:absolute;right:12px;top:12px;width:24%;aspect-ratio:16/10;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1.5px oklch(100% 0 0/.3)}
#ch-simulator .cl-frame .cl-vid .me-cam img,#ch-simulator .cl-frame .cl-vid .me-cam video{width:100%;height:100%;object-fit:cover}
#ch-simulator .cl-frame .cl-mark{display:block}
#ch-simulator .cl-frame .cl-row{display:flex;align-items:center;gap:12px}
/* the dial: a skill against its level (the app's own, frontend/app-mock/src/ui/dial.tsx) */
#ch-simulator .cl-frame .dial{display:block;width:100%;overflow:visible}
#ch-simulator .cl-frame .dial .b1{fill:oklch(27% .05 262);stroke:oklch(27% .05 262);stroke-width:8;stroke-linejoin:round}
#ch-simulator .cl-frame .dial .b2{fill:oklch(19% .05 262);stroke:oklch(19% .05 262);stroke-width:8;stroke-linejoin:round}
#ch-simulator .cl-frame .dial .tk{stroke:oklch(62% .012 262);stroke-linecap:round;opacity:.6}
#ch-simulator .cl-frame .dial .lo,#ch-simulator .cl-frame .dial .hi{fill:none;stroke-width:6;stroke-linecap:round}
#ch-simulator .cl-frame .dial .lo{stroke:var(--att)}
#ch-simulator .cl-frame .dial .hi{stroke:var(--ok)}
#ch-simulator .cl-frame .dial .nd{transform-box:view-box;transform-origin:100px 100px}
#ch-simulator .cl-frame .dial .nd line{stroke:var(--ink);stroke-width:4.5;stroke-linecap:round}
#ch-simulator .cl-frame .dial .nd rect,#ch-simulator .cl-frame .dial .nd circle{fill:oklch(19% .05 262);stroke:var(--ink);stroke-width:3.5}
/* ---------- 1a. one platform: a rail of four, the screen beside it changes ---------- */
#ch-simulator .cl-frame .op-win{left:40px;top:84px;width:520px;height:432px;display:grid;grid-template-columns:92px minmax(0,1fr);overflow:hidden}
#ch-simulator .cl-frame .op-rail{display:grid;align-content:start;gap:6px;padding:14px 10px;border-right:1px solid oklch(96% .005 262/.07);background:oklch(18.5% .05 262)}
#ch-simulator .cl-frame .op-rail span{position:relative;display:grid;justify-items:center;gap:5px;padding:10px 0 8px;border-radius:12px;font-size:12.5px;font-weight:560;color:var(--ink-3);transition:color .3s var(--e-ui),background-color .3s var(--e-ui)}
#ch-simulator .cl-frame .op-rail svg{width:22px;height:22px}
#ch-simulator .cl-frame .op-rail span.on{color:var(--ink);background:oklch(55% .2 262/.2);box-shadow:inset 0 0 0 1px oklch(76% .12 256/.3)}
#ch-simulator .cl-frame .op-rail span.on svg{color:var(--blu-t)}
#ch-simulator .cl-frame .op-rail span.hover:not(.on){background:oklch(96% .005 262/.06);color:var(--ink-2)}
#ch-simulator .cl-frame .op-main{position:relative}
#ch-simulator .cl-frame .op-scr{position:absolute;inset:0;padding:18px}
#ch-simulator .cl-frame .op-t{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3)}
#ch-simulator .cl-frame .op-t b{font-size:16px;color:var(--ink);font-weight:600}
#ch-simulator .cl-frame .op-board{margin-top:14px;height:282px;border-radius:12px;background:oklch(96% .01 90);color:oklch(22% .04 262);padding:22px 24px;position:relative;overflow:hidden}
#ch-simulator .cl-frame .op-board h4{margin:0;font-family:var(--serif);font-size:38px;font-weight:400;line-height:1}
#ch-simulator .cl-frame .op-board p{margin:16px 0 0;display:flex;justify-content:space-between;font-size:19px;max-width:250px}
#ch-simulator .cl-frame .op-board p b{color:oklch(50% .2 262)}
#ch-simulator .cl-frame .op-board svg.u{position:absolute;left:22px;top:64px;width:230px;height:12px;stroke:oklch(55% .2 262);stroke-width:3}
#ch-simulator .cl-frame .op-teach{position:absolute;right:18px;bottom:18px;width:170px;aspect-ratio:16/10}
#ch-simulator .cl-frame .op-call{margin-top:14px;height:300px}
#ch-simulator .cl-frame .op-q{margin-top:26px;font-family:var(--serif);font-size:36px;line-height:1.05;letter-spacing:-.015em;max-width:12ch}
#ch-simulator .cl-frame .op-mic{margin-top:30px;display:flex;align-items:center;gap:16px}
#ch-simulator .cl-frame .op-mic>span:first-child{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--blu);color:#fff;box-shadow:0 0 0 8px oklch(55% .2 262/.18)}
#ch-simulator .cl-frame .op-mic svg{width:24px;height:24px}
#ch-simulator .cl-frame .op-wave{display:flex;align-items:center;gap:4px;height:44px}
#ch-simulator .cl-frame .op-wave i{width:5px;border-radius:3px;background:var(--blu-t);height:calc(var(--h)*44px);animation:cl-wave .9s ease-in-out infinite alternate}
#ch-simulator .cl-frame .op-team{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#ch-simulator .cl-frame .op-team span{position:relative;display:grid;justify-items:center;gap:6px;padding:12px 0 10px;border-radius:12px;background:oklch(23.5% .05 262);font-size:13px;font-weight:560}
#ch-simulator .cl-frame .op-team img{width:46px;height:46px;border-radius:50%;object-fit:cover}
#ch-simulator .cl-frame .op-team span::after{content:"";position:absolute;right:calc(50% - 26px);top:10px;width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px oklch(23.5% .05 262)}
#ch-simulator .cl-frame .op-team span.att::after{background:var(--att)}
#ch-simulator .cl-frame .op-big{display:flex;align-items:baseline;gap:10px;margin-top:6px}
#ch-simulator .cl-frame .op-big b{font-family:var(--serif);font-size:54px;font-weight:400;line-height:1}
#ch-simulator .cl-frame .op-big span{color:var(--ink-3)}
/* ---------- 1b. every conversation recorded: the call, then its card ---------- */
#ch-simulator .cl-frame .rc-call{left:40px;top:160px;width:520px;height:292px;transform-origin:0 50%}
#ch-simulator .cl-frame .rc-bar{position:absolute;left:0;right:0;top:-40px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
#ch-simulator .cl-frame .rc-bar b{font-weight:600}
#ch-simulator .cl-frame .rc-card{left:300px;top:148px;width:270px;padding-bottom:6px}
#ch-simulator .cl-frame .rc-card .cl-hd{padding:12px 14px}
#ch-simulator .cl-frame .rc-sum{padding:12px 14px 4px;font-size:14px;line-height:1.45;color:var(--ink-2);min-height:88px}
#ch-simulator .cl-frame .rc-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid oklch(96% .005 262/.06);font-size:13.5px;color:var(--ink-2)}
#ch-simulator .cl-frame .rc-f>span:first-child{display:flex;align-items:center;gap:8px}
#ch-simulator .cl-frame .rc-f svg{width:15px;height:15px;color:var(--ink-3)}
#ch-simulator .cl-frame .rc-f .v{color:var(--ink);font-weight:560}
/* ---------- 1c. every score with its reason: the table, the popover of why ---------- */
#ch-simulator .cl-frame .wy-tb{left:70px;top:128px;width:460px}
#ch-simulator .cl-frame .wy-r{display:flex;align-items:center;gap:12px;height:50px;padding:0 16px;border-top:1px solid oklch(96% .005 262/.06);transition:background-color .25s var(--e-ui)}
#ch-simulator .cl-frame .wy-r>span:first-child{flex:1;display:flex;align-items:center;gap:10px;color:var(--ink-2)}
#ch-simulator .cl-frame .wy-r>span:first-child svg{width:16px;height:16px;color:var(--ink-3)}
#ch-simulator .cl-frame .wy-r .v{width:110px;display:flex;justify-content:flex-start}
#ch-simulator .cl-frame .wy-r .pill{font-size:15px;height:28px;cursor:default;transition:box-shadow .2s var(--e-ui)}
#ch-simulator .cl-frame .wy-r .pill.hover{box-shadow:inset 0 0 0 1.5px var(--att)}
#ch-simulator .cl-frame .wy-r.sel{background:oklch(80% .13 78/.08)}
#ch-simulator .cl-frame .wy-pop{left:150px;top:340px;width:420px;padding:0 0 14px}
#ch-simulator .cl-frame .wy-tabs{display:flex;gap:18px;padding:12px 16px 0;border-bottom:1px solid oklch(96% .005 262/.07);font-size:13.5px;color:var(--ink-3)}
#ch-simulator .cl-frame .wy-tabs span{padding-bottom:9px}
#ch-simulator .cl-frame .wy-tabs span.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
#ch-simulator .cl-frame .wy-why{padding:14px 16px 12px;font-size:15.5px;line-height:1.45}
#ch-simulator .cl-frame .wy-mom{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
#ch-simulator .cl-frame .wy-mom span{display:grid;gap:4px;padding:10px;border-radius:10px;background:oklch(26% .05 262);font-size:12.5px;line-height:1.3;color:var(--ink-2)}
#ch-simulator .cl-frame .wy-mom small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--att);font-weight:600}
#ch-simulator .cl-frame .wy-mom small svg{width:12px;height:12px}
/* ---------- 2a. built from your material: files in, what each becomes ---------- */
#ch-simulator .cl-frame .bd-tb{left:42px;top:120px;width:516px;overflow:hidden}
#ch-simulator .cl-frame .bd-hr,#ch-simulator .cl-frame .bd-r{display:grid;grid-template-columns:28px minmax(0,1fr) 0px;align-items:center;column-gap:10px;padding:0 14px;transition:grid-template-columns .7s var(--e-esce)}
#ch-simulator .cl-frame .bd-tb.two .bd-hr,#ch-simulator .cl-frame .bd-tb.two .bd-r{grid-template-columns:28px minmax(0,1fr) 216px}
#ch-simulator .cl-frame .bd-hr{height:40px;font-size:13px;color:var(--ink-3);background:oklch(23.5% .05 262);border-radius:14px 14px 0 0}
#ch-simulator .cl-frame .bd-hr>span{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
#ch-simulator .cl-frame .bd-hr svg{width:14px;height:14px}
#ch-simulator .cl-frame .bd-r{height:48px;border-top:1px solid oklch(96% .005 262/.06);font-size:14.5px}
#ch-simulator .cl-frame .bd-r>span:nth-child(2){display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
#ch-simulator .cl-frame .bd-r img{width:26px;height:26px}
#ch-simulator .cl-frame .bd-r>span:last-child{overflow:hidden;white-space:nowrap}
#ch-simulator .cl-frame .bd-r.sel{background:oklch(55% .2 262/.1)}
#ch-simulator .cl-frame .ft{display:inline-grid;place-items:center;width:36px;height:22px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;flex:none}
#ch-simulator .cl-frame .ft.pdf{background:oklch(58% .19 25)}
#ch-simulator .cl-frame .ft.doc{background:oklch(55% .17 255)}.ft.ppt{background:oklch(64% .17 45)}.ft.mp4{background:oklch(55% .17 300)}
#ch-simulator .cl-frame .bd-done{left:0;right:0;top:470px;width:max-content;margin:0 auto;height:32px;padding:0 12px;font-size:14.5px}
/* ---------- 2b. two calls with our team: the week, then your company inside ---------- */
#ch-simulator .cl-frame .tw-cal{left:40px;top:70px;width:520px;height:250px;overflow:hidden}
#ch-simulator .cl-frame .tw-days{display:grid;grid-template-columns:44px repeat(5,1fr);height:34px;align-items:center;font-size:12.5px;color:var(--ink-3);border-bottom:1px solid oklch(96% .005 262/.07)}
#ch-simulator .cl-frame .tw-days span{text-align:center}
#ch-simulator .cl-frame .tw-grid{position:relative;height:216px;display:grid;grid-template-columns:44px repeat(5,1fr)}
#ch-simulator .cl-frame .tw-grid>i{border-left:1px solid oklch(96% .005 262/.05)}
#ch-simulator .cl-frame .tw-hr{position:absolute;left:0;width:40px;font-size:11px;color:var(--ink-3);text-align:right}
#ch-simulator .cl-frame .tw-ev{position:absolute;padding:7px 9px;border-radius:9px;background:oklch(55% .2 262/.28);box-shadow:inset 3px 0 0 var(--blu-t);font-size:12.5px;line-height:1.25}
#ch-simulator .cl-frame .tw-ev b{display:block;font-weight:600}
#ch-simulator .cl-frame .tw-ev small{color:var(--ink-2)}
#ch-simulator .cl-frame .tw-ev.done{background:oklch(76% .15 155/.16);box-shadow:inset 3px 0 0 var(--ok)}
#ch-simulator .cl-frame .tw-ev .t{position:absolute;right:7px;top:7px;width:16px;height:16px;color:var(--ok);opacity:0}
#ch-simulator .cl-frame .tw-ev.done .t{opacity:1;transition:opacity .3s var(--e-ui)}
#ch-simulator .cl-frame .tw-now{position:absolute;top:0;bottom:0;width:2px;background:oklch(63% .22 25);box-shadow:0 0 12px oklch(63% .22 25/.8)}
#ch-simulator .cl-frame .tw-now::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:oklch(63% .22 25)}
#ch-simulator .cl-frame .tw-org{left:40px;top:340px;width:520px;padding:14px 16px 16px}
#ch-simulator .cl-frame .tw-org>b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
#ch-simulator .cl-frame .tw-org>b svg{width:16px;height:16px;color:var(--blu-t)}
#ch-simulator .cl-frame .tw-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
#ch-simulator .cl-frame .tw-col{padding:10px 12px;border-radius:10px;background:oklch(24.5% .05 262);font-size:13px}
#ch-simulator .cl-frame .tw-col>b{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
#ch-simulator .cl-frame .tw-col>span{display:flex;justify-content:space-between;color:var(--ink-2);line-height:1.7}
#ch-simulator .cl-frame .tw-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#ch-simulator .cl-frame .tw-col em{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* ---------- 2c. value in days: numbers that climb, one card after the other ---------- */
#ch-simulator .cl-frame .vd-stack{left:110px;top:0;width:380px}
#ch-simulator .cl-frame .vd-c{position:absolute;left:0;width:380px;padding:18px 20px 16px}
#ch-simulator .cl-frame .vd-c>span{font-size:15px;font-weight:560;color:var(--ink-2)}
#ch-simulator .cl-frame .vd-c b{display:block;margin-top:18px;font-family:var(--serif);font-size:84px;font-weight:400;line-height:.9;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
#ch-simulator .cl-frame .vd-c small{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ok)}
#ch-simulator .cl-frame .vd-c small svg{width:14px;height:14px}
/* ---------- 3a. find who needs practice: ask, the names, into a course ---------- */
#ch-simulator .cl-frame .fd-chat{left:36px;top:56px;width:528px;height:488px;display:flex;flex-direction:column}
#ch-simulator .cl-frame .fd-chat .cl-hd{padding:12px 16px}
#ch-simulator .cl-frame .fd-body{flex:1;padding:16px;display:grid;align-content:start;gap:14px}
#ch-simulator .cl-frame .fd-me{justify-self:end;max-width:78%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:oklch(98% 0 0);color:oklch(20% .05 262);font-size:15px}
#ch-simulator .cl-frame .fd-ans b{display:block;font-size:15px;font-weight:600}
#ch-simulator .cl-frame .fd-ans p{margin-top:2px;font-size:14px;color:var(--ink-2)}
#ch-simulator .cl-frame .fd-tb{margin-top:10px;border-radius:12px;box-shadow:inset 0 0 0 1px oklch(96% .005 262/.08);overflow:hidden}
#ch-simulator .cl-frame .fd-r{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;height:44px;padding:0 12px;border-top:1px solid oklch(96% .005 262/.06);font-size:14.5px;transition:background-color .2s var(--e-ui)}
#ch-simulator .cl-frame .fd-r:first-child{border-top:0}
#ch-simulator .cl-frame .fd-r.sel{background:oklch(55% .2 262/.12)}
#ch-simulator .cl-frame .fd-r.hover:not(.sel){background:oklch(96% .005 262/.04)}
#ch-simulator .cl-frame .fd-in{margin:0 12px 12px;display:flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 14px;border-radius:12px;background:oklch(24.5% .05 262);font-size:14px;color:var(--ink-3)}
#ch-simulator .cl-frame .fd-in .cl-btn{margin-left:auto;height:30px;padding:0 12px;font-size:13.5px}
#ch-simulator .cl-frame .fd-course{left:150px;top:220px;width:300px;padding:16px}
#ch-simulator .cl-frame .fd-course>b{display:block;font-size:16px;font-weight:600}
#ch-simulator .cl-frame .fd-course>small{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}
#ch-simulator .cl-frame .fd-faces{display:flex;margin-top:14px}
#ch-simulator .cl-frame .fd-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px oklch(20.5% .05 262);margin-left:-8px}
#ch-simulator .cl-frame .fd-faces img:first-child{margin-left:0}
#ch-simulator .cl-frame .fd-ok{left:0;right:0;top:370px;width:max-content;margin:0 auto;height:32px;padding:0 12px;font-size:14.5px}
#ch-simulator .cl-frame .fd-fly{position:absolute;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 5px;border-radius:19px;background:oklch(26% .05 262);box-shadow:0 0 0 1px oklch(76% .12 256/.4),0 16px 30px -12px #000;font-size:14px;font-weight:560;z-index:5}
#ch-simulator .cl-frame .fd-fly img{width:28px;height:28px;border-radius:50%;object-fit:cover}
/* ---------- 3b. the day's priorities: one chosen, its reason, the team around ---------- */
#ch-simulator .cl-frame .pr-t{left:48px;top:150px;font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.018em;white-space:nowrap}
#ch-simulator .cl-frame .pr-list{left:48px;top:216px;width:504px;display:grid;gap:10px}
#ch-simulator .cl-frame .pr-i{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:oklch(20.5% .05 262);box-shadow:0 0 0 1px oklch(96% .005 262/.08);transition:background-color .3s var(--e-ui),box-shadow .3s var(--e-ui)}
#ch-simulator .cl-frame .pr-i b{display:block;font-size:15px;font-weight:600}
#ch-simulator .cl-frame .pr-i small{display:block;font-size:13px;color:var(--ink-3)}
#ch-simulator .cl-frame .pr-i.hover,#ch-simulator .cl-frame .pr-i.on{background:oklch(55% .2 262/.22);box-shadow:0 0 0 1px oklch(76% .12 256/.45)}
#ch-simulator .cl-frame .pr-why{left:48px;top:216px;width:504px;padding:18px 18px 16px}
#ch-simulator .cl-frame .pr-why p{margin-top:12px;font-size:15.5px;line-height:1.5}
#ch-simulator .cl-frame .pr-why p.cl-mut{margin-top:10px;font-size:14px;color:var(--ink-2)}
#ch-simulator .cl-frame .pr-why .cl-btn{margin-top:16px;float:right}
#ch-simulator .cl-frame .pr-ring{left:0;top:0;width:600px;height:600px}
#ch-simulator .cl-frame .pr-ring img{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px oklch(16.8% .048 262),0 0 0 4.5px oklch(76% .12 256/.35)}
#ch-simulator .cl-frame .pr-mid{left:0;right:0;top:250px;display:grid;justify-items:center;gap:12px;text-align:center}
#ch-simulator .cl-frame .pr-mid b{font-family:var(--serif);font-size:38px;font-weight:400;line-height:1;letter-spacing:-.015em}
#ch-simulator .cl-frame .pr-mid small{font-size:14px;color:var(--ink-3)}
/* ---------- 3c. follows everyone: the message, the rehearsal booked, the call, ready ---------- */
#ch-simulator .cl-frame .fl-m{left:50px;width:390px;padding:12px 14px}
#ch-simulator .cl-frame .fl-m small{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
#ch-simulator .cl-frame .fl-m small img{width:20px;height:20px;border-radius:50%;object-fit:cover}
#ch-simulator .cl-frame .fl-m p{margin-top:6px;font-size:15px;line-height:1.45}
#ch-simulator .cl-frame .fl-m.ai{left:auto;right:50px;background:oklch(26% .06 262)}
#ch-simulator .cl-frame .fl-m.ai small{color:var(--blu-t)}
#ch-simulator .cl-frame .fl-sim{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--blu);color:#fff}
#ch-simulator .cl-frame .fl-sim svg{width:12px;height:12px}
#ch-simulator .cl-frame .fl-cal{left:60px;top:150px;width:480px;height:300px;overflow:hidden}
#ch-simulator .cl-frame .fl-slot{position:absolute;left:62px;right:14px;height:1px;background:oklch(96% .005 262/.06)}
#ch-simulator .cl-frame .fl-hr{position:absolute;left:14px;font-size:11.5px;color:var(--ink-3)}
#ch-simulator .cl-frame .fl-ev{position:absolute;left:70px;right:22px;padding:9px 12px;border-radius:10px;background:oklch(96% .005 262/.06);font-size:13px;color:var(--ink-3)}
#ch-simulator .cl-frame .fl-ev.me{background:oklch(55% .2 262/.35);box-shadow:inset 3px 0 0 var(--blu-t);color:var(--ink)}
#ch-simulator .cl-frame .fl-ev.me b{display:block;font-size:14px;font-weight:600}
#ch-simulator .cl-frame .fl-call{left:60px;top:130px;width:480px;height:270px}
#ch-simulator .cl-frame .fl-ready{left:170px;top:420px;width:260px;padding:12px 14px;display:flex;align-items:center;gap:12px}
#ch-simulator .cl-frame .fl-ready b{display:block;font-size:15px;font-weight:600}
#ch-simulator .cl-frame .fl-ready small{display:block;font-size:13px;color:var(--ink-3)}
#ch-simulator .cl-frame .fl-ready .cl-ic{background:oklch(76% .15 155/.16);color:var(--ok)}

/* the line under the chapter: the people and numbers inside the screens are examples */
.simulator-example{margin:28px auto 0;width:min(var(--largo),100% - 2 * var(--gutter));font-size:var(--t-nota);color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .simulator-wave.go{animation:none}
  .simulator-labels.wired .simulator-wire path{animation:none}
}

/* Simulator's own type for its name and its accent (its site: the wordmark in Instrument Serif, the accent in its italic) */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
#ch-simulator .ch-title{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-weight:400;letter-spacing:-.01em}
#ch-simulator .ch-hook em{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:1.06em;line-height:1}
/* its wordmark, big (Tommi, 2026-10-03: "bigger logo type on the screen") */
#ch-simulator .ch-head{--nm:min(24vw,42vh);--nm:min(24vw,42svh)}
@media (max-width:899px){#ch-simulator .ch-head{--nm:26vw}}
/* the sections' accent in Simulator's own italic too, as the head's and as its site */
#ch-simulator .cl-h2 em{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}