/* The product in use, drawn in code by motion.js (Tommi, 2026-09-30: "che le persone si vedano a usare una cosa del
   genere"). The shape is lexroom.ai's hero video, read frame by frame the same day: one element at a time, centred; a
   card that lies down into the floor and the next one that rises from it; a glossy 3D cursor that clicks, types and
   drags a document in. Two places on the home until 2026-10-01 (their markup is markup.html): under the hero, three tabs (Impara, Insegna, Gestisci); after it, three
   things it does, in a vertical list. Every size on a stage sits on one knob, --k. */

/* ---------- under the hero: three tabs, a line, the stage ---------- */
.uso{position:relative;padding-top:clamp(4px,1vh,12px)}
.uso-tabs{display:flex;gap:4px;width:max-content;max-width:calc(100% - 2 * var(--gutter));margin:0 auto;padding:5px;border-radius:18px;background:oklch(19% 0 262);box-shadow:0 0 0 1px var(--riga),0 20px 40px -20px #000}
.uso-tabs button{position:relative;display:flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 16px;border-radius:13px;overflow:hidden;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink-3);white-space:nowrap;transition:background-color .3s var(--e-ui),color .3s var(--e-ui),box-shadow .3s var(--e-ui)}
.uso-tabs svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uso-tabs button.on{color:var(--ink);background:oklch(100% 0 0/0.12);box-shadow:inset 0 0 0 1px oklch(100% 0 0/0.21)}
.uso-tabs button.on svg{color:var(--blu-t)}
@media (hover:hover){.uso-tabs button:not(.on):hover{color:var(--ink-2);background:oklch(96% 0 262/.05)}}
/* the time left on the one playing: it moves on to the next by itself */
.uso-tabs button i{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--blu-t);opacity:0;transform:scaleX(0);transform-origin:0 50%}
.uso-tabs button.run i{opacity:.8;animation:mg-fill var(--dur,15s) linear forwards}
@keyframes mg-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.uso-say{min-height:1.4em;margin:14px auto 0;padding:0 var(--gutter);font-size:clamp(16.5px,.35vw + 13.5px,19px);line-height:1.4;color:var(--ink-2);text-align:center;text-wrap:balance}
.uso .mg{margin:clamp(2px,.6vh,8px) auto clamp(40px,6vh,72px)}
/* the cards hang from the top of the stage, so the first screen shows as much of them as it can */
.uso .mg-stage{align-items:start;padding-top:calc(10px*var(--k))}

/* ---------- three things it does: a vertical list, the one playing lit, its stage beside it ---------- */
.tre-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.tre-lista ol{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.tre-lista button{position:relative;display:grid;width:100%;padding:16px 0 16px 26px;text-align:left}
.tre-lista button::before,.tre-lista button i{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px}
.tre-lista button::before{background:var(--riga-2)}
.tre-lista button i{background:var(--blu-t);opacity:0;transform:scaleY(0);transform-origin:50% 0}
.tre-lista button.run i{opacity:1;animation:mg-fill-y var(--dur,15s) linear forwards}
@keyframes mg-fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tre-lista b{font-size:clamp(24px,1.3vw + 10px,34px);font-weight:650;line-height:1.08;letter-spacing:-.032em;font-stretch:104%;color:var(--ink-3);text-wrap:balance;transition:color .3s var(--e-ui)}
.tre-lista button.on b{color:var(--ink)}
@media (hover:hover){.tre-lista button:not(.on):hover b{color:var(--ink-2)}}
.tre-d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--e-esce),opacity .3s var(--e-ui)}
.tre-d>span{overflow:hidden;padding-top:10px;font-size:clamp(16.5px,.3vw + 13.5px,19px);line-height:1.4;color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.tre-lista button.on .tre-d{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s var(--e-esce),opacity .45s var(--e-ui) .12s}
.tre .mg{--k:.86;width:100%;margin:0}
.tre .mg-stage{height:calc(560px*var(--k))}
@media (min-width:1000px){.tre .mg{--k:.92}}
@media (min-width:1360px){.tre .mg{--k:1}}
@media (max-width:899px){
  .tre-in{grid-template-columns:minmax(0,1fr);gap:8px}
  .tre-lista button{padding:12px 0 12px 20px}
  .tre-lista button::before,.tre-lista button i{top:14px;bottom:14px}
  .tre-lista b{font-size:clamp(21px,5.4vw,26px)}
}

/* ---------- the stage: every card sits in the same cell, centred; the perspective makes the floor ---------- */
.mg{--k:1;position:relative;width:min(calc(1100px*var(--k)),100% - 2 * var(--gutter))}
@media (min-width:1000px){.mg{--k:1.16}}
@media (min-width:1360px){.mg{--k:1.26}}
@media (min-width:1000px) and (max-height:960px){.uso .mg{--k:1.06}}
.mg-glow{position:absolute;inset:10% 6% -2%;background:radial-gradient(50% 50% at 50% 58%,oklch(100% 0 0/0.16),oklch(100% 0 0/0));filter:blur(calc(28px*var(--k)));pointer-events:none}
.mg-stage{position:relative;display:grid;place-items:center;height:calc(530px*var(--k));perspective:calc(1500px*var(--k));perspective-origin:50% 15%;-webkit-user-select:none;user-select:none}
.mg-stage>*{grid-area:1/1}
.mg-stage .h{opacity:0}
.mg-stage .z{display:none}

.mg-card{position:relative;width:min(var(--w,calc(620px*var(--k))),100%);padding:calc(12px*var(--k));border-radius:calc(26px*var(--k));background:linear-gradient(oklch(24.5% 0 262),oklch(19.5% 0 262));box-shadow:inset 0 calc(1px*var(--k)) 0 oklch(100% 0 0/.08),0 0 0 calc(1px*var(--k)) oklch(96% 0 262/.09),0 calc(60px*var(--k)) calc(100px*var(--k)) calc(-50px*var(--k)) oklch(0% 0 0/.95);transform-origin:50% 100%;will-change:transform,opacity}
.mg-in{border-radius:calc(18px*var(--k));background:oklch(28% 0 262);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(96% 0 262/.07)}
.mg-card svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mg-card button{cursor:default}
.press{transform:scale(.96);transition:transform .12s var(--e-ui)}
/* hover: what the cursor passes over answers, as under a real mouse (the cursor sets .hover) */
.mg-send.hover{background:var(--blu-su);box-shadow:0 calc(10px*var(--k)) calc(26px*var(--k)) calc(-8px*var(--k)) oklch(100% 0 0/0.6)}
.mg-clip.hover{color:var(--ink)}
.mg-row.hover,.mg-row:has(.hover){background:oklch(31.5% 0 262)}
.mg-step.hover{background:oklch(100% 0 0/0.18);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(100% 0 0/0.45)}
.mg-cta.hover:not(.ok),.mg-go.hover,.mg-micb.hover{background:var(--blu-su)}
.mg-added.hover{background:oklch(76% .15 155/.2);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(76% .15 155/.7)}
.mg-tile.hover{background:oklch(32% 0 262)}
.mg-send,.mg-clip,.mg-step,.mg-go,.mg-added,.mg-tile,.mg-micb{transition:background-color .2s var(--e-ui),box-shadow .2s var(--e-ui),color .2s var(--e-ui),transform .12s var(--e-ui)}

/* the box where a course is asked for */
.mg-compose{--w:calc(680px*var(--k))}
.mg-field{position:relative;min-height:calc(136px*var(--k));padding:calc(20px*var(--k)) calc(22px*var(--k)) calc(62px*var(--k));font-size:calc(19px*var(--k));line-height:1.45;letter-spacing:-.012em}
.mg-caret{display:inline-block;width:calc(2px*var(--k));height:1.1em;margin-left:calc(1px*var(--k));vertical-align:-.2em;background:var(--blu-t);animation:mg-blink 1s steps(1) infinite}
@keyframes mg-blink{50%{opacity:0}}
.mg-clip{position:absolute;right:calc(68px*var(--k));bottom:calc(23px*var(--k));width:calc(20px*var(--k));height:calc(20px*var(--k));color:var(--ink-3)}
.mg-send{position:absolute;right:calc(14px*var(--k));bottom:calc(14px*var(--k));width:calc(42px*var(--k));height:calc(42px*var(--k));display:grid;place-items:center;border-radius:calc(13px*var(--k));background:var(--blu);color:var(--su-blu);box-shadow:0 calc(8px*var(--k)) calc(20px*var(--k)) calc(-8px*var(--k)) oklch(100% 0 0/0.54)}
.mg-send svg{width:calc(20px*var(--k));height:calc(20px*var(--k))}
.mg-field>*:not(.mg-drop){transition:opacity .25s var(--e-ui)}
.mg-drop{position:absolute;inset:calc(6px*var(--k));display:grid;place-content:center;justify-items:center;gap:calc(6px*var(--k));border-radius:calc(14px*var(--k));border:calc(2px*var(--k)) dashed oklch(100% 0 0/0.33);background:oklch(25.5% 0 258);text-align:center;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .25s var(--e-ui),transform .5s var(--e-molla),background-color .25s var(--e-ui),border-color .25s var(--e-ui)}
.mg-drop-ic{width:calc(46px*var(--k));height:calc(46px*var(--k));display:grid;place-items:center;border-radius:50%;background:oklch(100% 0 0/0.11);color:var(--blu-t);transition:transform .5s var(--e-molla)}
.mg-drop-ic svg{width:calc(22px*var(--k));height:calc(22px*var(--k))}
.mg-drop b{font-size:calc(17px*var(--k));font-weight:620;letter-spacing:-.01em}
.mg-drop small{font-size:calc(13.5px*var(--k));color:var(--ink-3)}
.mg-drop .t-over{display:none}
.mg-compose.dragging{box-shadow:inset 0 calc(1px*var(--k)) 0 oklch(100% 0 0/.08),0 0 0 calc(1.5px*var(--k)) oklch(100% 0 0/0.3),0 calc(60px*var(--k)) calc(100px*var(--k)) calc(-50px*var(--k)) oklch(0% 0 0/.95)}
.mg-compose.dragging .mg-field>*:not(.mg-drop){opacity:0}
.mg-compose.dragging .mg-drop{opacity:1;transform:none}
.mg-compose.dropped .mg-drop{opacity:0;transition-duration:.18s}
.mg-compose.dropped .mg-field>*:not(.mg-drop){opacity:1;transition-delay:.16s}
.mg-compose.dragging .mg-field:is(.hover,:has(.hover)) .mg-drop{background:oklch(29% 0 258);border-style:solid;border-color:var(--blu-t);transform:scale(1.015)}
.mg-compose.dragging .mg-field:is(.hover,:has(.hover)) .mg-drop-ic{transform:translateY(calc(-3px*var(--k))) scale(1.1)}
.mg-compose.dragging .mg-field:is(.hover,:has(.hover)) .t-drag{display:none}
.mg-compose.dragging .mg-field:is(.hover,:has(.hover)) .t-over{display:inline}
.mg-files{padding:0 calc(4px*var(--k))}
.mg-file{display:inline-flex;align-items:center;gap:calc(10px*var(--k));height:calc(42px*var(--k));margin-top:calc(10px*var(--k));padding:0 calc(16px*var(--k)) 0 calc(7px*var(--k));border-radius:calc(13px*var(--k));background:oklch(100% 0 0/0.09);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(100% 0 0/0.27);font-size:calc(15.5px*var(--k));font-weight:580}
.mg-file img{width:calc(32px*var(--k));height:calc(32px*var(--k))}
.mg-file small{font-size:calc(14px*var(--k));font-weight:500;color:var(--ink-3)}
.mg-foot{display:flex;justify-content:space-between;align-items:center;gap:calc(12px*var(--k));padding:calc(13px*var(--k)) calc(10px*var(--k)) calc(3px*var(--k));font-size:calc(14.5px*var(--k));color:var(--ink-2)}
.mg-foot span{display:inline-flex;align-items:center;gap:calc(7px*var(--k));white-space:nowrap}
.mg-foot svg{width:calc(16px*var(--k));height:calc(16px*var(--k))}
.mg-foot b{color:var(--ink);font-weight:600}

/* heads, people, rows */
.mg-head{display:flex;align-items:center;gap:calc(12px*var(--k));padding:calc(8px*var(--k)) calc(10px*var(--k)) calc(14px*var(--k))}
.mg-head>img{width:calc(40px*var(--k));height:calc(40px*var(--k));flex:none}
.mg-head>img.face{width:calc(52px*var(--k));height:calc(52px*var(--k));border-radius:50%;object-fit:cover}
.mg-who{display:grid;min-width:0}
.mg-who b{font-size:calc(17px*var(--k));font-weight:640;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-who small{font-size:calc(14px*var(--k));color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-count{margin-left:auto;font-size:calc(15px*var(--k));color:var(--ink-2);white-space:nowrap}
.mg-count b{color:var(--ok);font-weight:650;font-variant-numeric:tabular-nums}
.mg-of{font-size:calc(12.5px*var(--k));color:var(--ink-3)}

.mg-list{--w:calc(660px*var(--k))}
.mg-row{display:flex;align-items:center;gap:calc(14px*var(--k));padding:calc(11px*var(--k)) calc(12px*var(--k));border-radius:calc(16px*var(--k));background:oklch(28% 0 262);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(96% 0 262/.06);transition:box-shadow .3s var(--e-ui),background-color .2s var(--e-ui)}
.mg-row+.mg-row{margin-top:calc(8px*var(--k))}
.mg-row>img{width:calc(46px*var(--k));height:calc(46px*var(--k));flex:none;border-radius:50%;object-fit:cover}
.mg-step{margin-left:auto;display:inline-flex;align-items:center;gap:calc(8px*var(--k));padding:calc(9px*var(--k)) calc(13px*var(--k));border-radius:calc(12px*var(--k));background:oklch(100% 0 0/0.09);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(100% 0 0/0.18);font-size:calc(14.5px*var(--k));font-weight:580;white-space:nowrap}
.mg-step svg{width:calc(17px*var(--k));height:calc(17px*var(--k));flex:none;color:var(--blu-t)}
.mg-step em{font-style:normal;font-weight:500;color:var(--ink-3)}
.mg-more{padding:calc(12px*var(--k)) calc(12px*var(--k)) calc(2px*var(--k));font-size:calc(14.5px*var(--k));color:var(--ink-3)}

/* the call, the same window as the home's map; what is said comes as live captions, word by word, and who speaks lights */
.mg-call{--w:calc(660px*var(--k));padding:0;overflow:hidden;border-radius:calc(22px*var(--k))}
.mg-bar{display:flex;align-items:center;justify-content:space-between;height:calc(44px*var(--k));padding:0 calc(16px*var(--k));font-size:calc(15px*var(--k))}
.mg-bar b{font-weight:620}
.mg-rec{display:flex;align-items:center;gap:calc(7px*var(--k));font-size:calc(14px*var(--k));color:var(--ink-2);font-variant-numeric:tabular-nums}
.mg-rec::before{content:"";width:calc(8px*var(--k));height:calc(8px*var(--k));border-radius:50%;background:oklch(63% .22 25);animation:mg-pulse 1.4s infinite}
.mg-rec.end::before{animation:none;background:var(--ink-3)}
@keyframes mg-pulse{50%{opacity:.3}}
.mg-video{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
.mg-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--e-ui)}
.mg-call.over video{opacity:.4}
.mg-tag{position:absolute;left:calc(14px*var(--k));top:calc(14px*var(--k));display:flex;align-items:center;gap:calc(7px*var(--k));padding:calc(5px*var(--k)) calc(10px*var(--k));border-radius:calc(8px*var(--k));background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(calc(8px*var(--k)));backdrop-filter:blur(calc(8px*var(--k)));font-size:calc(13.5px*var(--k))}
/* three small bars that move while the other one speaks */
.mg-eq{display:flex;align-items:center;gap:calc(2px*var(--k));height:calc(12px*var(--k))}
.mg-eq i{width:calc(2.5px*var(--k));height:100%;border-radius:calc(2px*var(--k));background:var(--ink-3);transform:scaleY(.3);transition:background-color .2s var(--e-ui)}
.mg-call.them .mg-eq i{background:var(--ok);animation:mg-eq .5s ease-in-out infinite alternate}
.mg-call.them .mg-eq i:nth-child(2){animation-delay:-.2s}
.mg-call.them .mg-eq i:nth-child(3){animation-delay:-.35s}
@keyframes mg-eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.mg-memo{position:absolute;right:calc(14px*var(--k));top:calc(14px*var(--k));padding:calc(9px*var(--k)) calc(12px*var(--k));border-radius:calc(12px*var(--k));background:oklch(22% 0 262/.88);-webkit-backdrop-filter:blur(calc(10px*var(--k)));backdrop-filter:blur(calc(10px*var(--k)));box-shadow:0 0 0 calc(1.5px*var(--k)) oklch(100% 0 0/0.48);font-size:calc(14.5px*var(--k));font-weight:620;line-height:1.3;transition:box-shadow .4s var(--e-ui)}
.mg-memo small{display:block;font-size:calc(11.5px*var(--k));font-weight:600;color:var(--blu-t);transition:color .4s var(--e-ui)}
.mg-memo.ok{box-shadow:0 0 0 calc(1.5px*var(--k)) var(--ok)}
.mg-memo.ok small{color:var(--ok)}
.mg-memo span{display:flex;align-items:center;gap:calc(6px*var(--k))}
.mg-memo svg{width:calc(16px*var(--k));height:calc(16px*var(--k));color:var(--ok)}
.mg-me{position:absolute;right:calc(14px*var(--k));bottom:calc(14px*var(--k));width:calc(96px*var(--k));height:calc(96px*var(--k));border-radius:calc(14px*var(--k));overflow:hidden;box-shadow:0 0 0 calc(1px*var(--k)) rgba(255,255,255,.25),0 calc(10px*var(--k)) calc(24px*var(--k)) calc(-8px*var(--k)) rgba(0,0,0,.8);transition:box-shadow .25s var(--e-ui)}
.mg-me img{width:100%;height:100%;object-fit:cover}
.mg-call.me .mg-me{box-shadow:0 0 0 calc(2.5px*var(--k)) var(--ok),0 calc(10px*var(--k)) calc(24px*var(--k)) calc(-8px*var(--k)) rgba(0,0,0,.8)}
.mg-cc{position:absolute;left:calc(14px*var(--k));right:calc(124px*var(--k));bottom:calc(16px*var(--k));display:flex;justify-content:center}
.mg-cc>span{max-width:100%;padding:calc(8px*var(--k)) calc(14px*var(--k)) calc(9px*var(--k));border-radius:calc(12px*var(--k));background:oklch(14% 0 262/.8);-webkit-backdrop-filter:blur(calc(10px*var(--k)));backdrop-filter:blur(calc(10px*var(--k)));font-size:calc(17px*var(--k));font-weight:520;line-height:1.35;letter-spacing:-.01em;text-align:center;text-wrap:balance}
.mg-cc small{display:block;font-size:calc(12px*var(--k));font-weight:620;color:var(--ink-3)}
.mg-cc.me small{color:var(--ok)}

/* the call as the reference site draws it ("Time to value", read frame by frame on 2026-09-30): two faces stacked and centred,
   who speaks is big (16:9, 74% of the width), the other at two thirds under it, a gap of 6% of a face; when the other one
   talks they trade sizes in about half a second, the top one staying where it starts */
.mg-meet{--w:calc(600px*var(--k));padding:calc(16px*var(--k)) calc(16px*var(--k)) calc(12px*var(--k));background:oklch(13.5% 0 262)}
.mg-tiles{position:relative;aspect-ratio:1/.7193}
.mg-cam{position:absolute;left:50%;top:0;width:74%;aspect-ratio:16/9;border-radius:calc(12px*var(--k));overflow:hidden;background:#000;transform-origin:50% 0;transform:translateX(-50%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.mg-cam video{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--e-ui)}
.mg-cam b{position:absolute;left:calc(14px*var(--k));top:calc(14px*var(--k));padding:calc(5px*var(--k)) calc(10px*var(--k));border-radius:calc(7px*var(--k));background:oklch(45% 0 0/.72);font-size:calc(13.5px*var(--k));font-weight:560;color:#fff;white-space:nowrap}
.mg-cam.b{transform:translateX(-50%) translateY(106%) scale(.668)}
.mg-meet.swap .mg-cam.a{transform:translateX(-50%) scale(.668)}
.mg-meet.swap .mg-cam.b{transform:translateX(-50%) translateY(72.8%)}
.mg-meet.over video{opacity:.35}
.mg-ctl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(10px*var(--k));margin-top:calc(10px*var(--k))}
.mg-cl{display:grid;gap:calc(2px*var(--k));min-width:0;padding-left:calc(4px*var(--k))}
.mg-cl b{font-size:calc(14.5px*var(--k));font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-cl .mg-rec{font-size:calc(13px*var(--k))}
.mg-keys{display:flex;gap:calc(8px*var(--k))}
.mg-rb{width:calc(42px*var(--k));height:calc(42px*var(--k));display:grid;place-items:center;border-radius:50%;background:oklch(26% 0 262);color:var(--ink-2);transition:background-color .2s var(--e-ui),transform .12s var(--e-ui)}
.mg-rb svg{width:calc(19px*var(--k));height:calc(19px*var(--k))}
.mg-rb.end{width:calc(58px*var(--k));border-radius:calc(21px*var(--k));background:oklch(58% .21 25);color:#fff}
.mg-rb.end.hover{background:oklch(64% .22 25)}
.mg-note{justify-self:end;padding:calc(6px*var(--k)) calc(10px*var(--k));border-radius:calc(10px*var(--k));box-shadow:inset 0 0 0 calc(1.5px*var(--k)) oklch(100% 0 0/0.48);font-size:calc(13.5px*var(--k));font-weight:620;line-height:1.25;text-align:right}
.mg-note small{display:block;font-size:calc(11px*var(--k));font-weight:600;color:var(--blu-t)}

/* the coach, after the call */
.mg-coach{--w:calc(620px*var(--k))}
.mg-coach .mg-head>img{width:calc(48px*var(--k));height:calc(48px*var(--k))}
.mg-say{min-height:2.6em;padding:calc(2px*var(--k)) calc(12px*var(--k)) calc(14px*var(--k));font-size:clamp(calc(20px*var(--k)),1.1vw + calc(10px*var(--k)),calc(24px*var(--k)));font-weight:620;line-height:1.25;letter-spacing:-.022em}
.mg-dims{display:grid;gap:calc(11px*var(--k));padding:calc(14px*var(--k)) calc(16px*var(--k));border-radius:calc(16px*var(--k));background:oklch(28% 0 262)}
.mg-dim{display:grid;grid-template-columns:minmax(0,10.5em) 1fr 2.4em;align-items:center;gap:calc(12px*var(--k));font-size:calc(14.5px*var(--k));color:var(--ink-2)}
.mg-dim i{position:relative;height:calc(8px*var(--k));border-radius:calc(99px*var(--k));background:var(--piano-3)}
.mg-dim u{position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--ok);transform-origin:0 50%}
.mg-dim s{position:absolute;left:var(--t);top:calc(-4px*var(--k));bottom:calc(-4px*var(--k));width:calc(2px*var(--k));border-radius:calc(2px*var(--k));background:var(--ink-2)}
.mg-dim.low u{background:var(--att)}
.mg-dim b{text-align:right;color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.mg-dim.low b{color:var(--att)}
.mg-added{display:flex;align-items:center;gap:calc(10px*var(--k));margin-top:calc(12px*var(--k));padding:calc(13px*var(--k)) calc(15px*var(--k));border-radius:calc(14px*var(--k));background:oklch(76% .15 155/.12);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(76% .15 155/.45);font-size:calc(15.5px*var(--k));color:var(--ink-2)}
.mg-added svg{width:calc(20px*var(--k));height:calc(20px*var(--k));flex:none;color:var(--ok)}
.mg-added b{color:var(--ink);font-weight:620}

/* a person's path */
.mg-path{--w:calc(600px*var(--k))}
.mg-prow{display:flex;align-items:center;gap:calc(12px*var(--k));padding:calc(11px*var(--k)) calc(12px*var(--k));border-radius:calc(14px*var(--k));background:oklch(28% 0 262)}
.mg-prow+.mg-prow,.mg-slot+.mg-prow,.mg-prow+.mg-slot{margin-top:calc(8px*var(--k))}
.mg-slot{height:0}
.mg-slot .mg-prow{margin:0}
.mg-ic{width:calc(38px*var(--k));height:calc(38px*var(--k));flex:none;display:grid;place-items:center;border-radius:calc(11px*var(--k));background:oklch(100% 0 0/0.1);color:var(--blu-t)}
.mg-ic svg{width:calc(19px*var(--k));height:calc(19px*var(--k))}
.mg-prow.done .mg-ic{background:oklch(76% .15 155/.16);color:var(--ok)}
.mg-prow.done .mg-who b{color:var(--ink-2)}
.mg-when{margin-left:auto;font-size:calc(13.5px*var(--k));color:var(--ink-3);white-space:nowrap}
.mg-prow.new{background:oklch(100% 0 0/0.08);box-shadow:inset 0 0 0 calc(1.5px*var(--k)) oklch(100% 0 0/0.48)}
.mg-prow .mg-who em{font-style:normal;font-weight:600;color:var(--blu-t)}
.mg-go{margin-left:auto;height:calc(36px*var(--k));padding:0 calc(16px*var(--k));border-radius:calc(999px*var(--k));background:var(--blu);color:var(--su-blu);font-size:calc(14.5px*var(--k));font-weight:600;white-space:nowrap}

/* one course, two people: the same three parts, the level told by the weight of the bars, nothing to read */
.mg-course{--w:calc(560px*var(--k))}
.mg-course .mg-head{padding-bottom:calc(8px*var(--k))}
.mg-cta{margin-left:auto;display:inline-flex;align-items:center;gap:calc(7px*var(--k));height:calc(40px*var(--k));padding:0 calc(18px*var(--k));border-radius:calc(999px*var(--k));background:var(--blu);color:var(--su-blu);font-size:calc(15px*var(--k));font-weight:600;white-space:nowrap;transition:background-color .3s var(--e-ui)}
.mg-cta svg{width:calc(17px*var(--k));height:calc(17px*var(--k))}
.mg-cta.ok{background:oklch(76% .15 155/.18);color:var(--ok);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(76% .15 155/.5)}
.mg-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(16px*var(--k));width:min(calc(760px*var(--k)),100%);align-items:start}
.mg-duo-t{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:calc(9px*var(--k));padding:calc(7px*var(--k)) calc(14px*var(--k)) calc(7px*var(--k)) calc(8px*var(--k));border-radius:calc(12px*var(--k));background:oklch(22% 0 262);box-shadow:0 0 0 calc(1px*var(--k)) var(--riga);font-size:calc(15px*var(--k));font-weight:600;color:var(--ink-2)}
.mg-duo-t img{width:calc(28px*var(--k));height:calc(28px*var(--k))}
.mg-duo .mg-card{width:auto}
.mg-lvl{margin-left:auto;padding:calc(5px*var(--k)) calc(11px*var(--k));border-radius:calc(9px*var(--k));background:var(--piano-3);font-size:calc(13.5px*var(--k));font-weight:650;color:var(--ink-2);white-space:nowrap}
.mg-lvl.hi{background:var(--blu);color:var(--su-blu)}
.mg-crow{display:flex;align-items:center;gap:calc(12px*var(--k));padding:calc(10px*var(--k)) calc(12px*var(--k));border-radius:calc(14px*var(--k));background:oklch(28% 0 262);font-size:calc(16px*var(--k));font-weight:600}
.mg-crow+.mg-crow{margin-top:calc(8px*var(--k))}
.mg-crow .mg-ic{width:calc(36px*var(--k));height:calc(36px*var(--k))}
.mg-meter{margin-left:auto;display:flex;align-items:flex-end;gap:calc(3px*var(--k));height:calc(28px*var(--k))}
.mg-meter i{width:calc(9px*var(--k));border-radius:calc(2px*var(--k));background:oklch(96% 0 262/.1);transition:background-color .25s var(--e-ui),box-shadow .25s var(--e-ui)}
.mg-meter i:nth-child(1){height:30%}.mg-meter i:nth-child(2){height:47%}.mg-meter i:nth-child(3){height:64%}.mg-meter i:nth-child(4){height:82%}.mg-meter i:nth-child(5){height:100%}
.mg-meter i.on{background:var(--blu-t);box-shadow:0 0 calc(10px*var(--k)) oklch(100% 0 0/0.27)}

/* an oral test: the question, the answer by voice, the result and what it moves */
.mg-exam,.mg-score{--w:calc(600px*var(--k))}
.mg-mic{display:flex;align-items:center;gap:calc(14px*var(--k));padding:calc(12px*var(--k));border-radius:calc(16px*var(--k));background:oklch(28% 0 262)}
.mg-micb{width:calc(48px*var(--k));height:calc(48px*var(--k));flex:none;display:grid;place-items:center;border-radius:50%;background:var(--blu);color:var(--su-blu)}
.mg-micb svg{width:calc(22px*var(--k));height:calc(22px*var(--k))}
.mg-mic.on .mg-micb{background:oklch(63% .22 25)}
.mg-wave{flex:1;display:flex;align-items:center;gap:calc(3px*var(--k));height:calc(34px*var(--k));min-width:0;overflow:hidden}
.mg-wave i{flex:1;min-width:calc(2px*var(--k));height:100%;border-radius:calc(2px*var(--k));background:var(--piano-3);transform:scaleY(.12);transition:background-color .3s var(--e-ui),transform .3s var(--e-ui)}
.mg-mic.on .mg-wave i{background:var(--blu-t);animation:mg-wave .45s ease-in-out infinite alternate}
@keyframes mg-wave{from{transform:scaleY(.14)}to{transform:scaleY(var(--h,.8))}}
.mg-mic small{font-size:calc(14px*var(--k));color:var(--ink-3);white-space:nowrap}
.mg-big{display:flex;align-items:center;gap:calc(16px*var(--k));padding:calc(4px*var(--k)) calc(12px*var(--k)) calc(14px*var(--k))}
.mg-big>b{font-size:calc(58px*var(--k));font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ok);font-variant-numeric:tabular-nums}
.mg-big span{display:grid;font-size:calc(14.5px*var(--k));line-height:1.3;color:var(--ink-3)}
.mg-big strong{font-size:calc(20px*var(--k));font-weight:650;color:var(--ok)}

/* the manager's team */
.mg-team{--w:calc(740px*var(--k))}
.mg-news{display:flex;align-items:center;gap:calc(12px*var(--k));margin:0 calc(2px*var(--k)) calc(10px*var(--k));padding:calc(10px*var(--k)) calc(14px*var(--k));border-radius:calc(14px*var(--k));background:oklch(100% 0 0/0.08);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(100% 0 0/0.27)}
.mg-news img{width:calc(36px*var(--k));height:calc(36px*var(--k))}
.mg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8px*var(--k))}
.mg-tile{position:relative;display:grid;justify-items:center;gap:calc(5px*var(--k));padding:calc(14px*var(--k)) calc(6px*var(--k)) calc(12px*var(--k));border-radius:calc(16px*var(--k));background:oklch(28% 0 262)}
.mg-tile img{width:calc(54px*var(--k));height:calc(54px*var(--k));border-radius:50%;object-fit:cover;box-shadow:0 0 0 calc(2.5px*var(--k)) oklch(96% 0 262/.08);transition:box-shadow .45s var(--e-ui)}
.mg-tile b{font-size:calc(14.5px*var(--k));font-weight:600}
.mg-tile em{max-width:100%;padding:calc(3px*var(--k)) calc(8px*var(--k));border-radius:calc(8px*var(--k));background:oklch(100% 0 0/0.1);color:var(--blu-t);font-size:calc(12.5px*var(--k));font-style:normal;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-tile.ok img{box-shadow:0 0 0 calc(2.5px*var(--k)) var(--ok)}
.mg-tile.help img{box-shadow:0 0 0 calc(2.5px*var(--k)) var(--att)}
.mg-tile.help em{background:oklch(80% .13 78/.14);color:var(--att)}
.mg-person{--w:calc(600px*var(--k))}
.mg-flag{margin-left:auto;padding:calc(5px*var(--k)) calc(10px*var(--k));border-radius:calc(8px*var(--k));background:oklch(80% .13 78/.14);color:var(--att);font-size:calc(13px*var(--k));font-weight:650;white-space:nowrap}
.mg-prop{display:flex;align-items:center;gap:calc(12px*var(--k));margin-top:calc(10px*var(--k));padding:calc(12px*var(--k));border-radius:calc(14px*var(--k));background:oklch(100% 0 0/0.07);box-shadow:inset 0 0 0 calc(1px*var(--k)) oklch(100% 0 0/0.27)}

/* the cursor: glossy and blue, tip on the element's corner */
.mg-cursor{position:absolute;left:0;top:0;z-index:30;width:calc(38px*var(--k));height:calc(38px*var(--k));pointer-events:none;transform-origin:0 0;filter:drop-shadow(0 0 1.2px oklch(100% 0 0)) drop-shadow(0 calc(9px*var(--k)) calc(10px*var(--k)) oklch(0% 0 0/.5));will-change:translate,scale,opacity}
.mg-cursor svg{display:block;width:calc(38px*var(--k));height:calc(38px*var(--k));margin:calc(-3px*var(--k)) 0 0 calc(-3px*var(--k));overflow:visible;transform-origin:calc(3px*var(--k)) calc(3px*var(--k))}
.mg-ring{position:absolute;left:calc(-22px*var(--k));top:calc(-22px*var(--k));z-index:29;width:calc(44px*var(--k));height:calc(44px*var(--k));border-radius:50%;border:calc(2px*var(--k)) solid oklch(100% 0 0/0.7);box-shadow:0 0 0 1px oklch(0% 0 0/.3),inset 0 0 0 1px oklch(0% 0 0/.3);pointer-events:none}
.mg-held{position:absolute;left:0;top:0;z-index:28;width:calc(104px*var(--k));height:calc(104px*var(--k));pointer-events:none;filter:drop-shadow(0 calc(16px*var(--k)) calc(18px*var(--k)) oklch(0% 0 0/.5))}

@media (max-width:640px){
  .uso-tabs button{gap:7px;height:42px;padding:0 14px 0 12px;font-size:15.5px}
  .uso-tabs svg{width:17px;height:17px}
  .uso-say{margin-top:12px}
  .mg-stage,.tre .mg-stage{height:540px;perspective:1100px}
  .mg-card{padding:10px;border-radius:22px}
  .mg-field{min-height:120px;padding:16px 16px 58px;font-size:16.5px}
  .mg-foot{font-size:13px;padding:11px 6px 2px}
  .mg-foot .mg-hide-s{display:none}
  .mg-head{padding:6px 6px 12px;gap:10px}
  .mg-who b{font-size:15.5px}
  .mg-who small{font-size:13px}
  .mg-row{flex-wrap:wrap;gap:4px 12px;padding:10px}
  .mg-row>img{width:40px;height:40px}
  .mg-step{margin-left:52px;padding:7px 10px;font-size:13px}
  .mg-count{font-size:13px}
  .mg-bar{height:38px;font-size:13.5px;padding:0 12px}
  .mg-tag,.mg-memo{top:9px;font-size:12px}
  .mg-tag{left:9px;padding:4px 8px}.mg-memo{right:9px;padding:6px 9px}
  .mg-memo small{font-size:10px}
  .mg-me{width:58px;height:58px;right:9px;bottom:9px}
  .mg-cc{left:9px;right:76px;bottom:10px}
  .mg-cc>span{padding:6px 10px 7px;font-size:13.5px}
  .mg-cc small{font-size:10.5px}
  .mg-dim{grid-template-columns:minmax(0,8.5em) 1fr 2.2em;font-size:13px;gap:10px}
  .mg-meet{padding:10px 10px 8px}
  .mg-cam{width:80%;border-radius:9px}
  .mg-tiles{aspect-ratio:1/.778}
  .mg-cam b{left:9px;top:9px;font-size:12px;padding:3px 7px}
  .mg-rb{width:36px;height:36px}
  .mg-rb.end{width:48px}
  .mg-rb svg{width:16px;height:16px}
  .mg-cl b{font-size:12.5px}
  .mg-note{font-size:11.5px;padding:5px 7px}
  .mg-note small{font-size:9.5px}
  .mg-say{font-size:19px}
  .mg-added{font-size:14px;padding:11px 12px}
  .mg-prow{gap:10px;padding:10px}
  .mg-prow .mg-ic{width:34px;height:34px}
  .mg-when{font-size:12px}
  .mg-go{height:32px;padding:0 12px;font-size:13px}
  .mg-duo{gap:8px}
  .mg-duo .mg-card{padding:8px}
  .mg-duo .mg-head{flex-wrap:wrap;padding:4px 4px 10px;gap:8px}
  .mg-duo .mg-head>img.face{width:40px;height:40px}
  .mg-lvl{margin-left:0;font-size:12px;padding:4px 8px}
  .mg-crow{gap:8px;padding:8px;font-size:13.5px}
  .mg-crow .mg-ic{width:28px;height:28px}
  .mg-crow .mg-ic svg{width:15px;height:15px}
  .mg-meter{gap:2px;height:20px}
  .mg-meter i{width:6px}
  .mg-mic{gap:10px;padding:10px}
  .mg-micb{width:42px;height:42px}
  .mg-mic small{display:none}
  .mg-big>b{font-size:46px}
  .mg-grid{gap:6px}
  .mg-tile{padding:10px 4px 9px}
  .mg-tile img{width:40px;height:40px}
  .mg-tile b{font-size:12.5px}
  .mg-tile em{font-size:10.5px;padding:2px 5px}
  .mg-news{padding:8px 10px}
  .mg-news img{width:30px;height:30px}
  .mg-flag{font-size:11.5px}
  .mg-cursor,.mg-cursor svg{width:32px;height:32px}
  .mg-held{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){.mg-caret{animation:none}.uso-tabs button i,.tre-lista button i{display:none}}