/* v2: homepage middle (see README, v2 work). New styles for this part of the page go here: the climb and its scoreboard,
   the staircase of levels, Level one's menu and robot cook, the painted map's country card. Loaded after home.css. */

/* ================= the climb ================= */
.climb-sticky{height:calc(100svh - var(--nav-h))}
.climb .climb-track[data-next] .cl-stage{height:min(calc(100svh - var(--nav-h) - 196px),690px)}
/* the years, as faint bands behind the curve (painted in home.js); their names sit on the baseline */
.cl-era{position:absolute;bottom:2px;transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);pointer-events:none;white-space:nowrap}
.cl-eras{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--muted);text-align:center;margin-top:8px}
/* the card: the month in Georgia beside the year, the kind of milestone in its pigment under the title */
.cl-note{border-radius:14px}
.cn-mon.cn-pre{margin:0 20px 0 0}   /* "Late 2024": the word goes before the year */
.cn-kind{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.3;color:var(--k,var(--muted));margin-top:3px}
.cn-text{margin-top:8px}
.cn-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.cn-act .cn-more{margin-top:0}
.cn-film{font-size:14px}
.cn-film span{font-size:12px;margin-left:2px;font-variant-numeric:tabular-nums}

/* the scoreboard: one row per benchmark; the milestone on the card opens its row and the others step back */
/* --bh fits inside the sticky frame (its bottom padding is 40px + 4vh), so the board never slides under the nav.
   Every row has a fixed part, --rf (padding, rule, name and number, sub-line: 58px), plus its sparkline; the head, the foot and
   the board's own padding take ~100px. So six rows at rest share what is left, and one opened row takes the room of five
   compressed ones (41px each). */
.cl-bench{--bh:min(calc(100svh - var(--nav-h) - 52px - 4vh),700px);--rf:58px;--ch0:clamp(8px,calc((var(--bh) - 108px) / 6 - var(--rf)),50px);--chf:clamp(84px,calc(var(--bh) - 108px - 58px - 205px),170px);
  height:var(--bh);display:flex;flex-direction:column;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px 12px;
  box-shadow:var(--shadow-tight,0 1px 2px rgba(24,25,24,.05),0 6px 12px -8px rgba(24,25,24,.18))}
.clb-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;line-height:1.3}
.clb-head b{font-weight:700;color:var(--ink)}
.clb-head span{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--coralD);white-space:nowrap}
.clb{position:relative;display:grid;width:100%;text-align:left;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto var(--sh,17px) var(--ch,var(--ch0));
  column-gap:12px;align-items:end;padding:6px 0 4px;border-top:1px solid var(--line);cursor:pointer;
  transition:grid-template-rows .4s var(--ease),opacity .4s var(--ease)}
.clb-n{grid-area:1/1;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.25;align-self:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clb-n b{position:relative;z-index:0;font-weight:650}
.clb-n b::before,.clb-n b::after{content:"";position:absolute;left:-5px;right:-7px;top:.05em;bottom:-.08em;border-radius:.35em;background:var(--fp,var(--gold));filter:url(#wcf);z-index:-1;
  transform:scaleX(0);transform-origin:left center;opacity:.5}
.clb-n b::before{transition:transform .55s var(--ease)}
.clb.on .clb-n b::before{transform:scaleX(1)}
.clb.arrive .clb-n b::after{background:var(--gold);animation:clbArrive 1.4s var(--ease)}
@keyframes clbArrive{0%{transform:scaleX(0);opacity:.6}45%{transform:scaleX(1);opacity:.6}100%{transform:scaleX(1);opacity:0}}
.clb-none{display:none;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--muted)}
.clb-s{grid-area:2/1;font-size:12.5px;line-height:17px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;min-height:0;align-self:stretch;transition:opacity .3s}
.clb-v{display:contents}
.clb-v b{grid-area:1/2;justify-self:end;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.1vw,29px);line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.clb-v span{grid-area:2/2;justify-self:end;font-size:12px;line-height:17px;color:var(--muted);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0;align-self:stretch;transition:opacity .3s}
.clb-c{grid-area:3/1/4/3;position:relative;height:100%;overflow:hidden}
.clb-c canvas{position:absolute;left:0;bottom:0;width:100%;transition:opacity .35s var(--ease)}
.clb-c .cs{height:var(--ch0)}
.clb-c .cf{height:var(--chf);opacity:0}
.clb.on .cs{opacity:0}
.clb.on .cf{opacity:1}
/* the opened row names its reference line and its newest point */
.clb-ref,.clb-pt{position:absolute;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s var(--ease) .2s;
  text-shadow:0 0 3px var(--card),0 0 6px var(--card),0 0 10px var(--card)}
.clb-ref{left:4px;font-size:12px;font-weight:600;color:var(--mintD)}
.clb-pt{font-family:var(--serif);font-size:15px;color:var(--ink)}
.clb-ring{position:absolute;width:22px;height:22px;margin:0 0 -11px -11px;border-radius:50%;border:2.5px solid var(--fp,var(--gold));filter:url(#wcf);opacity:0;pointer-events:none}
.clb.on .clb-ref,.clb.on .clb-pt,.clb.on .clb-ring{opacity:1}
.clb-ring.pop{animation:clbPop .6s var(--ease)}
@keyframes clbPop{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}
.cl-bench.focus .clb{--sh:0px;--ch:0px;opacity:.55}
.cl-bench.focus .clb:not(.on) :is(.clb-s,.clb-v span){opacity:0}
.cl-bench.focus .clb.on{--sh:17px;--ch:var(--chf);opacity:1}
.clb.none{--sh:0px;--ch:0px}
.cl-bench.focus .clb.none{opacity:.55}
.cl-bench.focus .clb:is(:hover,:focus-visible){opacity:1}   /* a stepped-back row comes forward under the pointer, with its label */
.clb.none .clb-n{color:var(--muted2);font-weight:500}
.clb.none .clb-n b{font-weight:500}
.clb.none .clb-none{display:inline}
.clb.none .clb-v b,.clb.none .clb-v span{visibility:hidden}
/* every row opens its full chart */
.clb-open{grid-area:1/1;justify-self:end;align-self:center;font-size:12.5px;font-weight:600;color:var(--coralD);background:var(--card);padding-left:8px;opacity:0;transform:translateX(-4px);
  transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.clb:hover .clb-open,.clb:focus-visible .clb-open{opacity:1;transform:none}
.clb.none .clb-open{display:none}
.clb:focus-visible{outline-offset:2px}
.clb-foot{font-size:13px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line);padding-top:9px}
@media (min-width:1101px) and (max-height:760px){
  .cl-bench{--rf:41px}
  .clb{--sh:0px}
}
@media (max-width:1100px){
  .cl-wrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .cl-bench{--ch0:60px;height:auto;padding:8px 14px 9px;justify-content:flex-start;gap:4px}
  .clb{display:none}
  .clb.solo,.cl-bench.focus .clb.solo{display:grid;--sh:17px;--ch:var(--ch0);opacity:1;border-top:0}
  .clb.solo .cs{opacity:1}
  .clb .cf,.clb-ref,.clb-pt,.clb-ring{display:none}
  .clb.solo{grid-template-rows:auto var(--sh) var(--ch) auto}
  .clb-open{grid-area:4/1/5/3;justify-self:end;opacity:1;transform:none;font-size:12px;padding:5px 0 0;background:none}
  .clb-foot{display:none}
  .climb .climb-track[data-next] .cl-stage{height:calc(100svh - var(--nav-h) - 236px);min-height:260px}
  .climb .climb-track[data-next] .climb-sticky{padding-bottom:58px}
}
@media (max-width:620px){
  .cl-eras{font-size:13px;margin-top:2px}
  .cl-era{font-size:13px}
  .clb-v b{font-size:24px}
}
/* a short landscape screen: the climb lies flat, and the scoreboard answers clicks on the beads */
@media (max-height:519px),(min-width:1101px) and (max-height:579px){
  .climb-track{height:auto!important}
  .climb-sticky{position:relative;top:auto;height:auto;padding:0 0 24px}
  .climb .climb-track[data-next] .cl-stage{height:420px}
  .cl-bench{height:auto;--chf:150px}
}
@media (min-width:1101px) and (max-height:579px){.cl-bench{--ch0:40px}}
@media (prefers-reduced-motion:reduce){
  .clb,.clb-c canvas,.clb-s,.clb-ref,.clb-pt,.clb-open{transition:none}
  .clb-n b::before{transition:none}
  .clb.arrive .clb-n b::after,.clb-ring.pop{animation:none}
  .cl-bench{height:auto}
}

/* the full chart behind a row, in the site modal */
.mx .mx-k{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--k,var(--muted));padding-right:44px}
.mx h3{margin-top:4px}
.mx-fig{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0 12px}
.mx-fig canvas{display:block;width:100%;aspect-ratio:760/360}
@media (max-width:600px){.mx-fig canvas{aspect-ratio:1/.86}}
.modal .mx-note{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:8px}
.modal .mx-src{font-size:14.5px;font-weight:600;margin:0}

/* ================= Level one ================= */
.l1-hl{--hlc:rgba(131,186,226,.6)}
/* the run window keeps its four live runs; its bar names the dish being cooked */
#run.figure{border-radius:14px;box-shadow:var(--shadow-tight,0 1px 2px rgba(24,25,24,.05),0 6px 12px -8px rgba(24,25,24,.18))}
.run-bar{display:flex;align-items:baseline;justify-content:space-between;gap:4px 18px;flex-wrap:wrap;padding:11px 18px 10px;border-bottom:1px solid var(--line);background:var(--card)}
.run-now{font-size:14px;color:var(--muted)}
.run-now b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink);margin-left:6px}
.run-real{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink2)}
.run-more{font-family:var(--sans);font-style:normal;font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.25em}
.run-more:hover{color:var(--coralD);text-decoration-color:currentColor}
/* the four steps, each opening what it means; the robot cook acts them out beside them */
.run-steps{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.run-log{flex:1;min-width:0}
.run-log li{display:block}
.run-log button{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;padding:1px 0;border-radius:6px;color:inherit}
.run-log button span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;transition:text-decoration-color .2s}
.run-log button:hover span,.run-log button:focus-visible span{color:var(--ink);text-decoration-color:var(--line2)}
.cook{position:relative;flex:none;width:70px;height:96px;margin-bottom:-4px;cursor:help;-webkit-tap-highlight-color:transparent}
.cook-fig{position:absolute;inset:0}
.cook-fig img{position:absolute;bottom:0;left:50%;width:auto;height:96px;max-width:none;transform:translateX(-50%);opacity:0;transition:opacity .18s linear}
.cook-fig img.on{opacity:1}
.cook-fig img[data-pose="side"]{transform:translateX(-50%) scaleX(-1)}   /* turned toward the figure */
.cook.hop .cook-fig{animation:cookHop .38s var(--ease)}
@keyframes cookHop{40%{transform:translateY(-6px)}}
.cook-say{position:absolute;right:-6px;bottom:calc(100% + 6px);width:max-content;max-width:220px;font-size:13.5px;line-height:1.4;color:var(--ink);text-align:left;white-space:normal;
  background:var(--card);border:1px solid var(--line2);border-radius:12px 12px 3px 12px;padding:8px 11px;opacity:0;transform:translateY(4px);
  transition:opacity .2s,transform .25s var(--ease);pointer-events:none;z-index:2}
.cook:hover .cook-say,.cook:focus-visible .cook-say,.cook.say .cook-say{opacity:1;transform:none}
.run-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:4px 13px 5px;background:var(--card);
  transition:transform .25s var(--ease),background .25s}
.run-chip::before{content:"↳";font-weight:400;color:var(--muted)}
.run-chip:hover{transform:translateY(-2px);background:var(--goldW)}
@media (max-width:900px){.cook{width:48px;height:64px}.cook-fig img{height:64px}}
@media (prefers-reduced-motion:reduce){.cook-fig img,.cook-say,.run-chip{transition:none}.cook.hop .cook-fig{animation:none}}

/* the menu: day one, à la carte, printed on paper under the window */
.carte{margin-top:clamp(34px,4vw,54px);padding:clamp(24px,3vw,38px) clamp(18px,3.4vw,46px) clamp(14px,2vw,24px);background:var(--card);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow-tight,0 1px 2px rgba(24,25,24,.05),0 6px 12px -8px rgba(24,25,24,.18))}
.carte-head{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2;text-align:center;color:var(--ink)}
.carte-head em{font-style:italic}
.carte-head::after{content:"";display:block;width:56px;height:1px;margin:12px auto 0;background:var(--ink2);opacity:.6}
.carte-cols{columns:2;column-gap:clamp(36px,5vw,76px);margin-top:clamp(18px,2.4vw,26px)}
.course{break-inside:avoid;padding-bottom:clamp(14px,1.8vw,22px)}
.course-h{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;color:var(--ink);margin-bottom:4px}
.course-h i{color:var(--muted)}
.dishes{list-style:none}
.dish{display:flex;align-items:baseline;width:100%;text-align:left;padding:6px 0;color:var(--ink);border-radius:4px}
.dt{flex:0 1 auto;min-width:0;font-family:var(--serif);font-size:17px;line-height:1.35}
.dt-t{position:relative;z-index:0;transition:color .2s}
.dt-t::before{content:"";position:absolute;left:-.12em;right:-.12em;bottom:.02em;height:.46em;z-index:-1;border-radius:.2em;background:rgba(242,190,82,.55);filter:url(#wcf);
  transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.dish.serving .dt-t::before{transform:scaleX(1)}
.star{color:var(--goldD);font-size:13px;margin-left:3px}
.dt em{font-size:14px;color:var(--goldD);margin-left:4px;white-space:nowrap}
.dish.opt .dt em{color:var(--muted)}
.dl{flex:1 1 24px;min-width:18px;border-bottom:2px dotted var(--line2);margin:0 10px;transform:translateY(-5px);transition:border-color .2s}
.dd{flex:none;font-family:var(--mono);font-size:13px;color:var(--muted)}
.dish:hover .dt-t,.dish:focus-visible .dt-t{color:var(--coralD)}
.dish:hover .dl{border-color:var(--muted2)}
@media (max-width:999px){.carte-cols{columns:1}}
@media (max-width:560px){
  .dish{flex-wrap:wrap;padding:7px 0}
  .dt{flex:1 1 100%}
  .dl{display:none}
  .dd{font-size:12px;margin-top:1px}
}
@media (prefers-reduced-motion:reduce){.dt-t::before{transition:none}}

/* the dishes that do not cook live, in the site modal */
.modal .mx-ds{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--ink2);background:var(--blueW);border-radius:6px;padding:2px 8px;margin:0 0 12px}
.modal .mx-real{font-size:15.5px}
.modal .mx-live{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);margin-top:4px}
.mx-table{margin:4px 0 14px}
.mx-table th{text-transform:none;letter-spacing:0;font-size:12.5px}
.mx-fe{width:100%;border-collapse:collapse;margin:4px 0 14px}
.mx-fe td{padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);vertical-align:baseline}
.mx-fe td span{display:block;font-size:13px;color:var(--muted)}
.mx-fe td + td{text-align:right;font-family:var(--serif);font-size:22px;white-space:nowrap}
.mx-shot{margin:6px 0 12px}
.mx-shot figcaption{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin-top:8px}
.modal .mx-jump{font-family:var(--serif);font-size:18px}

/* ================= three levels: one painted staircase ================= */
/* each tread is a painted step (assets/levels/tread-N.webp, 1100x280; or a watercolor step painted by v2-middle.js if the
   painting fails to load). Its levels.js machine stands on the tread top, its name and line are written on the riser
   with the day and the link. Measurements from tools/art/jobs5.txt, as fractions of the painting:
   --tf the front edge of the tread top, --tr the top of the riser, --bx the step's own left/right inset */
.levels .wrap{--wrap:1340px}
.stairs{--tar:3.93;--tf:.35;--tr:.357;--bx:.075;--tw:1.12;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;column-gap:0;margin:clamp(4px,1.6vw,20px) 3% 0}
.stair{position:relative;display:flex;flex-direction:column;align-items:center;transition:transform .35s var(--ease)}
.stair[data-step="2"]{margin-bottom:48px}
.stair[data-step="3"]{margin-bottom:96px}
.stair:hover,.stair:focus-within{transform:translateY(-4px)}
/* the painting runs a little wider than its column (its sides are transparent), so the step's body fills the column;
   the machine's labels sit on the tread top, so its bottom edge meets the top's front edge */
.stair svg{position:relative;z-index:1;width:min(380px,92%);height:auto;aspect-ratio:320/150;margin-bottom:calc(var(--tf) * var(--tw) * -100% / var(--tar));overflow:visible}
.tread{position:relative;width:calc(var(--tw) * 100%);aspect-ratio:var(--tar)}
.tread-paint,.tread-art{position:absolute;inset:0;width:100%;height:100%;transition:filter .35s var(--ease)}
.stair:hover :is(.tread-paint,.tread-art),.stair:focus-within :is(.tread-paint,.tread-art){filter:saturate(1.25)}
/* on the riser: the name and its line on the left, the day and the link on the right */
.tread-top{position:absolute;left:calc(var(--bx) * 100% + 4%);top:calc(var(--tr) * 100% + 2px);bottom:8%;display:flex;flex-direction:column;justify-content:center;gap:1px}
.stair[data-step="1"] .tread-top{left:calc(var(--bx) * 100% + 8%)}   /* clear of the grass at both corners */
.stair[data-step="1"] .tread-riser{right:calc(var(--bx) * 100% + 12.5%)}
.tread-top h3{font-family:var(--serif);font-size:28px;line-height:1.05;color:var(--ink)}
.tread-line{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.2;color:var(--ink)}
.tread-riser{position:absolute;right:calc(var(--bx) * 100% + 4%);top:calc(var(--tr) * 100% + 2px);bottom:8%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px}
.tread-day{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink2)}
.tread-go{font-size:14.5px;font-weight:650;color:var(--ink);text-decoration:none;white-space:nowrap;padding:3px 0}
.tread-go:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.tread-go span{display:inline-block;transition:transform .3s var(--ease)}
.tread-go:hover span{transform:translateY(2px)}
.stairs-dots{display:none}
/* narrower screens: the riser keeps the name, the line and the day; the link steps off it, under the tread */
@media (max-width:1300px) and (min-width:761px){
  .stair{padding-bottom:30px}
  .tread-riser{top:calc(var(--tr) * 100% + 7px);bottom:0;justify-content:flex-start}
  .tread-go{position:absolute;right:0;top:calc(100% + 7px)}
  .stair[data-step="1"] .tread-riser{right:calc(var(--bx) * 100% + 4%)}
}
@media (max-width:1180px) and (min-width:761px){
  .tread-top h3{font-size:22px}.tread-line{font-size:16px}.tread-day{font-size:14.5px}.tread-go{font-size:13.5px}
  .stair[data-step="2"]{margin-bottom:32px}.stair[data-step="3"]{margin-bottom:64px}
}
@media (max-width:960px) and (min-width:761px){
  .tread-top h3{font-size:18px}.tread-line{font-size:14px}.tread-day{font-size:13px}
  .tread-top{top:calc(var(--tr) * 100% + 4px);bottom:6%}
}
/* phones: the staircase becomes a strip, one tread at a time with the next peeking in */
@media (max-width:760px){
  .levels .sec-head{margin-bottom:14px}
  .stairs{display:flex;align-items:flex-end;gap:5vw;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;
    margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 4px;scroll-padding:0 var(--gutter)}
  .stairs::-webkit-scrollbar{display:none}
  .stairs{--tw:1.12}
  .stair{flex:0 0 84vw;scroll-snap-align:center}
  .stair[data-step="2"]{margin-bottom:22px}.stair[data-step="3"]{margin-bottom:44px}
  .tread-top h3{font-size:21px}.tread-line{font-size:15.5px}.tread-day{font-size:15px}
  .tread-top{bottom:10%}
  .tread-riser{top:calc(var(--tr) * 100% + 6px);bottom:4.5%;justify-content:flex-start}
  /* the link steps off the riser, under the tread */
  .tread-go{position:absolute;right:0;top:calc(100% + 8px);font-size:14px}
  .stair{padding-bottom:30px}
  .stairs-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}
  .stairs-dots button{position:relative;width:28px;height:28px}
  .stairs-dots button::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1.5px solid var(--ink2);filter:url(#wcf);transition:background .25s,transform .25s var(--ease)}
  .stairs-dots button.on::before{background:var(--c,var(--ink2));border-color:var(--c,var(--ink2));transform:scale(1.15)}
  .stairs-dots button:nth-child(1){--c:var(--blue)}.stairs-dots button:nth-child(2){--c:var(--purple)}.stairs-dots button:nth-child(3){--c:var(--mint)}
}
@media (prefers-reduced-motion:reduce){.stair,.tread-paint,.tread-art{transition:none}.stair:hover,.stair:focus-within{transform:none}}

/* the climb's beads that the race found wear its gold ? block */
.cl-found{position:absolute;width:14px;height:14px;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--ease)}
.cl-found.got.on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.cl-found{transition:none}}