/* =====================================================================
   EIGHT TECH · laptop.css
   The 3-D laptop in "How we work". Every face of the machine is an HTML
   element placed in 3-D with CSS: lid, bezel, glass, deck, keyboard,
   trackpad, side walls and ports. laptop.js fills the screen and draws
   each moment of the scroll story. Brand palette: sage + slate.
   ===================================================================== */

/* ============================== MACHINE TOKENS ============================== */
.e8lt{
  --e8-size:62;                 /* laptop width, as a % of this box            */
  --e8-y:73%;                   /* where the base sits inside the box          */
  --e8-ratio:100/72;            /* box shape                                   */
  --u:calc(1cqw * var(--e8-size) / 62);   /* one model unit                     */
  --lw:calc(var(--u)*62);       /* width                                       */
  --lh:calc(var(--u)*40.6);     /* lid height                                  */
  --bd:calc(var(--u)*42);       /* base depth                                  */
  --bt:calc(var(--u)*1.35);     /* base thickness                              */
  --lt:calc(var(--u)*.55);      /* lid thickness                               */
  --e8-sh:34,43,40;             /* shadow tint: deep slate, never pure black   */
  --e8-lit:176,206,186;         /* the screen's light: soft sage-mint          */

  /* sage aluminium (default) */
  --e8-shell-1:#e2e8e3; --e8-shell-2:#b2bfb7; --e8-shell-hi:rgba(255,255,255,.75);
  --e8-rim-1:#d6ded8;   --e8-rim-2:#a7b4ac;
  --e8-deck-1:#c2ccc5;  --e8-deck-2:#dfe5e0;
  --e8-well:#a6b2aa;
  --e8-key:#1c2421;     --e8-key-hi:rgba(255,255,255,.1); --e8-key-ink:#c9d3cd;
  --e8-pad-1:#cbd4ce;   --e8-pad-2:#dbe2dd;   --e8-pad-ring:rgba(40,52,48,.17);
  --e8-front-1:#e8ede9; --e8-front-2:#9daba3;
  --e8-side-1:#d0d8d2;  --e8-side-2:#a1aea6;
  --e8-edge-1:#e3e9e4;  --e8-edge-2:#aebab3;
  --e8-chamfer:rgba(255,255,255,.92);
  --e8-grille:rgba(40,52,48,.34);
  --e8-mark:url(#e8lt-mark-light);
  --e8-shadow:.62;

  position:relative;display:block;width:100%;
  aspect-ratio:var(--e8-ratio);
  container-type:inline-size;
  direction:ltr;text-align:left;
  font:400 16px/1.4 var(--font-lat,"Sora",system-ui,sans-serif);
  color:#eef2f0;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
/* slate aluminium: the dark twin (data-finish="slate") */
.e8lt[data-finish="slate"]{
  --e8-shell-1:#63716b; --e8-shell-2:#343e3a; --e8-shell-hi:rgba(255,255,255,.2);
  --e8-rim-1:#6f7d77;   --e8-rim-2:#3e4945;
  --e8-deck-1:#303a36;  --e8-deck-2:#44504b;
  --e8-well:#1b221f;
  --e8-key:#111614;     --e8-key-hi:rgba(255,255,255,.08); --e8-key-ink:#aab7b0;
  --e8-pad-1:#39443f;   --e8-pad-2:#46524d;   --e8-pad-ring:rgba(0,0,0,.36);
  --e8-front-1:#65736d; --e8-front-2:#262e2b;
  --e8-side-1:#48544f;  --e8-side-2:#29322e;
  --e8-edge-1:#6a7872;  --e8-edge-2:#343e3a;
  --e8-chamfer:rgba(255,255,255,.26);
  --e8-grille:rgba(0,0,0,.58);
  --e8-mark:url(#e8lt-mark-dark);
  --e8-shadow:.78;
}
@supports not (width:1cqw){ .e8lt{ --u:calc(.42vw * var(--e8-size) / 62) } }

.e8lt *,.e8lt *::before,.e8lt *::after{box-sizing:border-box}
.e8lt svg{display:block;max-width:none}
.e8lt .e8lt-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ============================== STAGE & RIG ============================== */
.e8lt .e8lt-stage{position:absolute;inset:0;perspective:calc(var(--u)*300);perspective-origin:50% 38%;
  transform:translateY(var(--e8-shift,0px))}
.e8lt .e8lt-float{position:absolute;left:calc(50% + var(--e8-x,0%));top:var(--e8-y);width:0;height:0;transform-style:preserve-3d;
  animation:e8lt-sway 12s ease-in-out infinite}
.e8lt .e8lt-rig{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform-origin:0 0 calc(var(--bd) / 2);transform:rotateX(-19deg) rotateY(26deg);will-change:transform}
.e8lt .e8lt-base,.e8lt .e8lt-lid{transform-style:preserve-3d}

/* the table: contact shadow + light thrown by the screen */
.e8lt .e8lt-floor{position:absolute;left:calc(var(--lw) * -.7);top:calc(var(--bt) + var(--u)*.1);
  width:calc(var(--lw) * 1.4);height:calc(var(--bd) * 1.8);
  transform-origin:50% 0;transform:translateZ(calc(var(--bd) * -.35)) rotateX(90deg);
  opacity:var(--e8-shadow);
  background:
    radial-gradient(39% 30% at 50% 47%,rgba(var(--e8-sh),.9),rgba(var(--e8-sh),.46) 62%,rgba(var(--e8-sh),0) 100%),
    radial-gradient(48% 40% at 50% 49%,rgba(var(--e8-sh),.3),rgba(var(--e8-sh),0) 100%)}
.e8lt .e8lt-spill{position:absolute;left:calc(var(--lw) * -.55);top:calc(var(--bt) + var(--u)*.05);
  width:calc(var(--lw) * 1.1);height:calc(var(--bd) * .8);
  transform-origin:50% 0;transform:translateZ(calc(var(--bd) * .55)) rotateX(90deg);
  background:radial-gradient(50% 52% at 50% 40%,rgba(var(--e8-lit),.6),rgba(var(--e8-lit),0) 100%);
  opacity:0}

/* ============================== BASE ============================== */
.e8lt .e8lt-base{position:absolute;left:calc(var(--lw) / -2);top:0;width:var(--lw);height:0}
.e8lt .e8lt-deck{position:absolute;left:0;top:0;width:var(--lw);height:var(--bd);overflow:hidden;
  transform-origin:50% 0;transform:rotateX(90deg);
  border-radius:0 0 calc(var(--u)*1.4) calc(var(--u)*1.4);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--e8-deck-1),var(--e8-deck-2));
  box-shadow:inset 0 calc(var(--u)*-.22) 0 var(--e8-chamfer),
             inset calc(var(--u)*.12) 0 0 rgba(255,255,255,.08),inset calc(var(--u)*-.12) 0 0 rgba(255,255,255,.08)}
.e8lt .e8lt-hinge{position:absolute;left:13%;right:13%;top:0;height:calc(var(--u)*1.3);
  border-radius:0 0 calc(var(--u)*.6) calc(var(--u)*.6);
  background:linear-gradient(180deg,#070a09,#1a211e 75%,rgba(26,33,30,0))}
.e8lt .e8lt-grille{position:absolute;top:calc(var(--u)*3.3);width:calc(var(--u)*2.5);height:calc(var(--u)*19);
  border-radius:calc(var(--u)*.4);opacity:.9;
  background-image:radial-gradient(circle,var(--e8-grille) 36%,transparent 44%);
  background-size:calc(var(--u)*.5) calc(var(--u)*.5)}
.e8lt .e8lt-grille--l{left:calc(var(--u)*2.1)}
.e8lt .e8lt-grille--r{right:calc(var(--u)*2.1)}

.e8lt .e8lt-kbd{position:absolute;left:50%;top:calc(var(--u)*3);width:calc(var(--u)*50);
  transform:translateX(-50%);display:flex;flex-direction:column;gap:calc(var(--u)*.34);
  padding:calc(var(--u)*.45);border-radius:calc(var(--u)*.9);background:var(--e8-well);
  box-shadow:inset 0 calc(var(--u)*.18) calc(var(--u)*.35) rgba(var(--e8-sh),.45),0 calc(var(--u)*.08) 0 rgba(255,255,255,.14)}
.e8lt .e8lt-row{display:flex;gap:calc(var(--u)*.34);height:calc(var(--u)*3.05)}
.e8lt .e8lt-row--fn{height:calc(var(--u)*1.7)}
.e8lt .e8lt-k{flex:var(--w,1) 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--u)*.42);color:var(--e8-key-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 65%),var(--e8-key);
  font:500 calc(var(--u)*.95)/1 var(--font-lat,"Sora",system-ui,sans-serif);
  box-shadow:inset 0 calc(var(--u)*.1) 0 var(--e8-key-hi),0 calc(var(--u)*.14) 0 rgba(var(--e8-sh),.55);
  transition:background-color .5s ease,box-shadow .5s ease,color .5s ease}
.e8lt .e8lt-k--mod{justify-content:flex-start;align-items:flex-end;padding:0 calc(var(--u)*.45) calc(var(--u)*.4);
  font-size:calc(var(--u)*.68)}
.e8lt .e8lt-k--end{justify-content:flex-end}
.e8lt .e8lt-k--arrow{font-size:calc(var(--u)*.7)}
.e8lt .e8lt-k--pwr{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08) 0 30%,transparent 32%),var(--e8-key)}
.e8lt .e8lt-arrows{flex:var(--w) 1 0;min-width:0;display:flex;gap:calc(var(--u)*.34)}
.e8lt .e8lt-arrows>.e8lt-k{flex:1 1 0;height:48%;align-self:flex-end}
.e8lt .e8lt-updown{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(var(--u)*.14)}
.e8lt .e8lt-updown>.e8lt-k{flex:1 1 0}
/* a key being typed lights up in the screen's colour, then fades back */
.e8lt .e8lt-k.is-down{transition:none;color:#fff;
  background:color-mix(in srgb,rgb(var(--e8-lit)) 52%,var(--e8-key));
  box-shadow:inset 0 calc(var(--u)*.1) 0 rgba(255,255,255,.4),0 0 calc(var(--u)*1.1) rgba(var(--e8-lit),.95)}

.e8lt .e8lt-pad{position:absolute;left:50%;top:calc(var(--u)*24.4);width:calc(var(--u)*26);height:calc(var(--u)*14.6);
  transform:translateX(-50%);border-radius:calc(var(--u)*1.1);
  background:linear-gradient(200deg,rgba(255,255,255,.22),transparent 38%),linear-gradient(180deg,var(--e8-pad-1),var(--e8-pad-2));
  box-shadow:inset 0 0 0 calc(var(--u)*.12) var(--e8-pad-ring),0 calc(var(--u)*.1) 0 rgba(255,255,255,.12)}
.e8lt .e8lt-deck-light{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(var(--e8-lit),.2),rgba(var(--e8-lit),0) 46%)}
.e8lt .e8lt-sheen{position:absolute;top:0;bottom:0;left:-60%;width:220%;pointer-events:none;
  background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.34) 43%,rgba(255,255,255,.1) 51%,transparent 58%)}
.e8lt[data-finish="slate"] .e8lt-sheen{
  background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.07) 43%,rgba(255,255,255,.02) 51%,transparent 58%)}

.e8lt .e8lt-side{position:absolute;top:0;height:var(--bt)}
.e8lt .e8lt-side--front{left:calc(var(--u)*1.2);right:calc(var(--u)*1.2);transform:translateZ(var(--bd));
  border-radius:0 0 calc(var(--u)*.9) calc(var(--u)*.9);
  background:linear-gradient(180deg,var(--e8-front-1),var(--e8-front-2));
  box-shadow:inset 0 calc(var(--u)*.12) 0 var(--e8-chamfer)}
.e8lt .e8lt-lip{position:absolute;left:50%;top:0;width:calc(var(--u)*11);height:calc(var(--u)*.5);
  transform:translateX(-50%);border-radius:0 0 calc(var(--u)*.6) calc(var(--u)*.6);
  background:linear-gradient(180deg,rgba(var(--e8-sh),.42),rgba(var(--e8-sh),.08))}
.e8lt .e8lt-side--left,.e8lt .e8lt-side--right{width:calc(var(--bd) - var(--u)*1.2);
  transform-origin:0 0;transform:rotateY(-90deg);
  background:linear-gradient(180deg,var(--e8-side-1),var(--e8-side-2))}
.e8lt .e8lt-side--left{left:0}
.e8lt .e8lt-side--right{left:100%}
/* ports: two USB-C and a headphone jack on the left, one USB-C on the right */
.e8lt .e8lt-side--left::before,.e8lt .e8lt-side--left::after,.e8lt .e8lt-side--right::before{content:"";position:absolute;
  top:30%;height:40%;width:calc(var(--u)*1.1);border-radius:calc(var(--u)*.3);background:#0a0d0c;
  box-shadow:inset 0 0 0 calc(var(--u)*.05) rgba(255,255,255,.12)}
.e8lt .e8lt-side--left::before{left:calc(var(--u)*5.5)}
.e8lt .e8lt-side--left::after{left:calc(var(--u)*7.4)}
.e8lt .e8lt-side--right::before{left:calc(var(--u)*6);width:calc(var(--u)*.55);border-radius:50%}

/* ============================== LID ============================== */
.e8lt .e8lt-lid{position:absolute;left:calc(var(--lw) / -2);top:calc(var(--lh) * -1 - var(--u)*.12);
  width:var(--lw);height:var(--lh);transform-origin:50% 100%;transform:rotateX(16deg)}
.e8lt .e8lt-lid-front,.e8lt .e8lt-lid-back{position:absolute;inset:0;
  border-radius:calc(var(--u)*1.9) calc(var(--u)*1.9) calc(var(--u)*.8) calc(var(--u)*.8);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.e8lt .e8lt-lid-front{padding:calc(var(--u)*.28);background:linear-gradient(180deg,var(--e8-rim-1),var(--e8-rim-2))}
.e8lt .e8lt-lid-back{transform:translateZ(calc(var(--lt) * -1)) rotateY(180deg);
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 28% 8%,var(--e8-shell-hi),transparent 60%),
    linear-gradient(165deg,var(--e8-shell-1),var(--e8-shell-2))}
/* the mark reads upright while the machine is closed, like a real logo */
.e8lt .e8lt-lid-back .e8lt-mark{width:calc(var(--u)*6.4);height:auto;aspect-ratio:152.4/278.6;transform:rotate(180deg);
  fill:var(--e8-mark);filter:drop-shadow(0 calc(var(--u)*.08) 0 rgba(var(--e8-sh),.25))}
.e8lt .e8lt-edge{position:absolute;background:linear-gradient(90deg,var(--e8-edge-1),var(--e8-edge-2))}
.e8lt .e8lt-edge--top{left:calc(var(--u)*1.6);right:calc(var(--u)*1.6);top:0;height:var(--lt);
  transform-origin:50% 0;transform:rotateX(-90deg)}
.e8lt .e8lt-edge--left{left:0;top:calc(var(--u)*1.6);bottom:calc(var(--u)*.7);width:var(--lt);
  transform-origin:0 50%;transform:rotateY(90deg)}
.e8lt .e8lt-edge--right{right:0;top:calc(var(--u)*1.6);bottom:calc(var(--u)*.7);width:var(--lt);
  transform-origin:100% 50%;transform:rotateY(-90deg)}

.e8lt .e8lt-bezel{position:relative;width:100%;height:100%;
  border-radius:calc(var(--u)*1.65) calc(var(--u)*1.65) calc(var(--u)*.55) calc(var(--u)*.55);
  background:linear-gradient(165deg,#1b2220,#070a09 40%,#0c100f);
  box-shadow:inset 0 0 0 calc(var(--u)*.06) rgba(255,255,255,.08);
  transition:box-shadow .6s ease}
.e8lt.is-cleared .e8lt-bezel{box-shadow:inset 0 0 0 calc(var(--u)*.06) rgba(255,255,255,.08),inset 0 0 0 calc(var(--u)*.2) rgba(156,207,173,.2)}
.e8lt .e8lt-cam{position:absolute;left:50%;top:calc(var(--u)*.44);width:calc(var(--u)*.42);height:calc(var(--u)*.42);
  margin-left:calc(var(--u)*-.21);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#4a5a53,#090d0c 62%);
  box-shadow:0 0 0 calc(var(--u)*.09) #151b19}
.e8lt .e8lt-cam::after{content:"";position:absolute;left:calc(var(--u)*.85);top:calc(var(--u)*.13);
  width:calc(var(--u)*.16);height:calc(var(--u)*.16);border-radius:50%;background:rgba(156,207,173,.3)}
.e8lt .e8lt-display{position:absolute;left:calc(var(--u)*1.02);right:calc(var(--u)*1.02);top:calc(var(--u)*1.25);
  aspect-ratio:16/10;overflow:hidden;container-type:inline-size;
  border-radius:calc(var(--u)*.55) calc(var(--u)*.55) calc(var(--u)*.2) calc(var(--u)*.2);
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.05) 44%,transparent 58%),linear-gradient(160deg,#1b2220,#0b0f0e 72%)}
.e8lt .e8lt-glare{position:absolute;inset:-30% -45%;pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.08) 46%,rgba(255,255,255,.02) 54%,transparent 60%)}

/* ============================== SCREEN ============================== */
.e8lt .e8lt-boot,.e8lt .e8lt-os{position:absolute;inset:0;opacity:0}
.e8lt .e8lt-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5em;
  font-size:1.85cqw;background:#0a0e0d}
.e8lt .e8lt-boot .e8lt-mark{width:3.6em;height:auto;aspect-ratio:152.4/278.6;fill:url(#e8lt-mark-screen)}
.e8lt .e8lt-boot-bar{width:8em;height:.3em;border-radius:1em;overflow:hidden;background:rgba(255,255,255,.12)}
.e8lt .e8lt-boot-bar>span{display:block;width:100%;height:100%;border-radius:inherit;background:#dfe7e3;
  transform-origin:0 50%;transform:scaleX(0)}

/* everything on the desktop is sized in em from the screen width */
.e8lt .e8lt-os{font-size:2cqw;line-height:1.45;color:#dfe7e3;
  background:
    radial-gradient(60% 75% at 88% 6%,rgba(162,175,166,.42),transparent 70%),
    radial-gradient(55% 65% at 6% 100%,rgba(106,121,116,.5),transparent 70%),
    linear-gradient(160deg,#1f2825,#0e1311)}
@supports not (width:1cqw){ .e8lt .e8lt-boot,.e8lt .e8lt-os{font-size:8px} }

.e8lt .e8lt-win{position:absolute;display:flex;flex-direction:column;overflow:hidden;border-radius:.7em;
  box-shadow:0 1.4em 3.2em rgba(0,0,0,.5),0 0 0 .07em rgba(255,255,255,.09)}
.e8lt .e8lt-tbar{flex:none;height:2.1em;display:flex;align-items:center;gap:.9em;padding:0 .85em;
  background:#0d1311;border-bottom:.07em solid rgba(162,175,166,.1)}
.e8lt .e8lt-dots{display:flex;gap:.42em}
.e8lt .e8lt-dots>span{display:block;width:.64em;height:.64em;border-radius:50%;background:#c48a7f}
.e8lt .e8lt-dots>span:nth-child(2){background:#c9b984}
.e8lt .e8lt-dots>span:nth-child(3){background:#8fae94}

/* editor */
.e8lt .e8lt-editor{left:2.6%;top:4.5%;width:94.8%;height:89%;background:var(--code-bg,#131a18)}
.e8lt .e8lt-editor::after{content:"";position:absolute;inset:0;background:#070a09;opacity:var(--e8-dim,0);pointer-events:none}
.e8lt .e8lt-tab{font:400 .72em/1 var(--mono);letter-spacing:.02em;color:#dfe7e3;padding:.5em .9em;border-radius:.45em .45em 0 0;
  background:var(--code-bg,#131a18);border:.07em solid rgba(162,175,166,.12);border-bottom:0;align-self:flex-end}
.e8lt .e8lt-tab--off{color:#6d7b74;background:transparent;border-color:transparent}
.e8lt .e8lt-badge{margin-left:auto;font:400 .6em/1 var(--mono);letter-spacing:.1em;color:#7d8b85;white-space:nowrap;
  padding:.45em .8em;border-radius:2em;border:.1em solid rgba(162,175,166,.16);transition:color .5s ease,border-color .5s ease}
.e8lt.is-cleared .e8lt-badge{color:#bfe4cb;border-color:rgba(156,207,173,.45)}
.e8lt .e8lt-ebody{position:relative;flex:1;min-height:0;display:flex}
.e8lt .e8lt-rail{flex:none;width:2.6em;display:flex;flex-direction:column;align-items:center;gap:1.05em;padding-top:.9em;
  background:#0f1513;border-right:.07em solid rgba(162,175,166,.08);color:#5b6963}
.e8lt .e8lt-rail svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.e8lt .e8lt-rail .is-on{color:#cfd9d3}
.e8lt.is-cleared .e8lt-rail .e8lt-shield{color:#9ccfad}
.e8lt .e8lt-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.e8lt .e8lt-code{position:relative;flex:1;min-height:0;overflow:hidden;font:400 .8em/1.62 var(--mono);color:#cfd9d3}
.e8lt .e8lt-code-in{padding:.75em 0 1em;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.e8lt .e8lt-ln{display:flex;align-items:flex-start;min-height:1.62em;white-space:pre}
.e8lt .e8lt-ln::before{content:attr(data-n);flex:none;width:3.3em;padding-right:1.25em;text-align:right;color:#3a4642}
.e8lt .e8lt-ln.is-cur{background:rgba(162,175,166,.06)}
.e8lt .e8lt-ln.is-cur::before{color:#8a978f}
.e8lt .e8lt-clip{display:inline-block;overflow:hidden;white-space:pre;vertical-align:top;width:0}
.e8lt .tk-k{color:var(--code-key,#a2afa6);font-weight:600}
.e8lt .tk-s{color:var(--code-str,#d3dcd5)}
.e8lt .tk-f{color:var(--code-fn,#eef2f0);font-weight:600}
.e8lt .tk-n{color:var(--code-num,#bccabf)}
.e8lt .tk-c{color:var(--code-com,#5b6963);font-style:italic}
.e8lt .e8lt-caret{flex:none;display:inline-block;width:.14em;height:1.25em;margin-top:.2em;border-radius:.05em;
  background:var(--code-ok,#9ccfad);animation:e8lt-blink 1.05s steps(1) infinite}
.e8lt.is-typing .e8lt-caret{animation:none}
.e8lt .e8lt-caret[hidden]{display:none}
.e8lt .e8lt-status{flex:none;height:1.75em;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:0 1.1em;
  font:400 .58em/1 var(--mono);letter-spacing:.06em;color:#6d7b74;background:#0d1311;border-top:.1em solid rgba(162,175,166,.1)}
.e8lt .e8lt-branch::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.55em;border-radius:50%;
  background:#8fae94;vertical-align:-.05em}

/* terminal: slides up over the code */
.e8lt .e8lt-term{position:absolute;left:0;right:0;bottom:0;height:52%;display:flex;flex-direction:column;
  background:rgba(9,13,12,.97);border-top:.07em solid rgba(162,175,166,.2);box-shadow:0 -1em 2.4em rgba(0,0,0,.45);
  transform:translateY(105%)}
.e8lt .e8lt-term-head{flex:none;display:flex;gap:1.6em;padding:.55em 1.1em .35em;font:600 .56em/1 var(--font-lat,"Sora",sans-serif);
  letter-spacing:.08em;color:#5b6963}
.e8lt .e8lt-term-head .is-on{color:#cfd9d3;box-shadow:0 .25em 0 -.1em #9ccfad}
.e8lt .e8lt-term-body{flex:1;min-height:0;padding:.35em 1.1em;font:400 .74em/1.78 var(--mono);color:#b9c6bf}
.e8lt .e8lt-tl{display:block;white-space:pre;opacity:0;transform:translateY(.45em);transition:opacity .25s ease,transform .25s ease}
.e8lt .e8lt-tl.is-on{opacity:1;transform:none}
.e8lt .e8lt-tl--cmd{display:flex;align-items:flex-start;opacity:1;transform:none;color:#eef2f0}
.e8lt .e8lt-tl--cmd::before{content:"\276F\00a0";color:#9ccfad}
.e8lt .e8lt-term .e8lt-caret{width:.55em;height:1.2em;margin-top:.25em;margin-left:.1em;border-radius:0}
.e8lt .tl-dim{color:#7d8b85}
.e8lt .tl-ok{color:#9ccfad}
.e8lt .tl-final{color:#dff0e2;font-weight:600;margin-top:.2em}
.e8lt .tl-live{color:#a2afa6}
.e8lt .e8lt-num{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}

/* step 03, the shipped product: this very site. Its hero is drawn at the real
   page's proportions: --vp is one pixel of the 1440px-wide page, scaled onto this
   screen, so every size below is copied from the live page. */
.e8lt .e8lt-browser{left:8%;top:4.5%;width:87.5%;height:90%;background:#141917;opacity:0}
.e8lt .e8lt-tbar--light{background:#e9eeea;border-bottom-color:#d9e0db}
.e8lt .e8lt-addr{flex:1;max-width:56%;margin:0 auto;height:1.5em;display:flex;align-items:center;justify-content:center;gap:.5em;
  border-radius:1em;background:#fff;box-shadow:0 0 0 .07em #d6ddd8;font:400 .7em/1 var(--font-lat,"Sora",sans-serif);color:#52605b}
.e8lt .e8lt-lock{position:relative;width:.66em;height:.52em;margin-top:.28em;border-radius:.12em;background:#6c7a74}
.e8lt .e8lt-lock::before{content:"";position:absolute;left:.12em;right:.12em;top:-.34em;height:.42em;
  border:.1em solid #6c7a74;border-bottom:0;border-radius:.3em .3em 0 0}

.e8lt .e8lt-site{--vp:calc(87.5cqw / 1440);position:relative;flex:1;min-height:0;overflow:hidden;
  font-family:var(--font-ar,"Tajawal",sans-serif);color:#fff;text-align:center;background:#141917}
.e8lt .e8lt-sbg,.e8lt .e8lt-sbg::before,.e8lt .e8lt-sbg::after{position:absolute;inset:0;pointer-events:none}
.e8lt .e8lt-sbg{background:
    radial-gradient(34% 58% at 94% 4%,rgba(162,175,166,.24),transparent 72%),
    radial-gradient(30% 52% at 5% 104%,rgba(106,121,116,.3),transparent 72%)}
.e8lt .e8lt-site[dir="rtl"] .e8lt-sbg{transform:scaleX(-1)}
.e8lt .e8lt-sbg::before{content:"";opacity:.22;          /* 1px lines are relatively heavier at this scale */
  
  background-image:linear-gradient(rgba(162,175,166,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(162,175,166,.07) 1px,transparent 1px);
  background-size:calc(var(--vp)*44) calc(var(--vp)*44);
  -webkit-mask:radial-gradient(75% 65% at 50% 42%,#000 30%,transparent 78%);mask:radial-gradient(75% 65% at 50% 42%,#000 30%,transparent 78%)}
.e8lt .e8lt-sbg::after{content:"";background:
    radial-gradient(76% 60% at 50% 50%,rgba(15,19,18,.46),transparent 72%),
    linear-gradient(to top,rgba(15,19,18,.84) 0%,rgba(15,19,18,.22) 38%,rgba(15,19,18,.06) 60%,rgba(15,19,18,.36) 100%)}

/* nav pill */
.e8lt .e8lt-snav{position:absolute;z-index:2;left:calc(var(--vp)*60);right:calc(var(--vp)*60);top:calc(var(--vp)*18);height:calc(var(--vp)*94);
  display:flex;align-items:center;gap:calc(var(--vp)*9);padding-inline:calc(var(--vp)*20) calc(var(--vp)*11);border-radius:calc(var(--vp)*999);
  background:linear-gradient(180deg,rgba(66,78,73,.93),rgba(38,47,44,.92));border:calc(var(--vp)*1) solid rgba(255,255,255,.14);
  box-shadow:0 calc(var(--vp)*1) 0 rgba(255,255,255,.14) inset,0 calc(var(--vp)*10) calc(var(--vp)*30) rgba(0,0,0,.22),0 calc(var(--vp)*2) calc(var(--vp)*8) rgba(0,0,0,.18)}
.e8lt .e8lt-sbrand{flex:none;display:flex;align-items:center;gap:calc(var(--vp)*9.6)}
.e8lt .e8lt-sbrand img{display:block;height:calc(var(--vp)*42);width:auto;max-width:none}
.e8lt .e8lt-stag{font:700 calc(var(--vp)*10.56)/1 var(--font-lat,"Sora",sans-serif);letter-spacing:.3em;color:#dfe7e3;
  padding:calc(var(--vp)*5.4) calc(var(--vp)*9.9) calc(var(--vp)*4.8) calc(var(--vp)*11.5);border-radius:calc(var(--vp)*999);background:rgba(255,255,255,.1);border:calc(var(--vp)*1) solid rgba(255,255,255,.22)}
.e8lt .e8lt-slinks{display:flex;margin-inline-start:auto;font-size:calc(var(--vp)*14.4);font-weight:500;color:#dfe6e2;white-space:nowrap}
.e8lt .e8lt-slinks>span{padding:.55em .78em}
.e8lt .e8lt-schip{flex:none;display:inline-flex;align-items:center;gap:calc(var(--vp)*6.4);padding:calc(var(--vp)*8) calc(var(--vp)*10.9);border-radius:calc(var(--vp)*999);white-space:nowrap;
  font:600 calc(var(--vp)*13.12)/1 var(--font-ar,"Tajawal",sans-serif);color:#e3eae6;background:rgba(255,255,255,.08);border:calc(var(--vp)*1) solid rgba(255,255,255,.16)}
.e8lt .e8lt-schip--lang{font-family:var(--font-lat,"Sora",sans-serif)}
.e8lt .e8lt-schip svg{width:calc(var(--vp)*14);height:calc(var(--vp)*14);fill:none;stroke:currentColor;stroke-width:1.6;opacity:.85}

/* buttons: the accent pill and the ghost pill */
.e8lt .e8lt-sbtn{flex:none;display:inline-flex;align-items:center;gap:.65em;white-space:nowrap;
  font-size:calc(var(--vp)*17.28);font-weight:700;line-height:1;color:#f4f7f5;padding:1.1em 1.9em;border-radius:calc(var(--vp)*999);
  background:linear-gradient(180deg,#62716b,#4d5a55 55%,#3c4844);border:calc(var(--vp)*1) solid rgba(255,255,255,.12);
  box-shadow:0 calc(var(--vp)*1) 0 rgba(255,255,255,.25) inset,0 calc(var(--vp)*-2) calc(var(--vp)*6) rgba(0,0,0,.25) inset,0 calc(var(--vp)*4) calc(var(--vp)*10) rgba(60,72,68,.22),0 calc(var(--vp)*14) calc(var(--vp)*26) rgba(60,72,68,.26)}
.e8lt .e8lt-sbtn--nav{font-size:calc(var(--vp)*16);padding:.95em .7em .95em 1.5em;margin-inline-start:calc(var(--vp)*4)}
.e8lt .e8lt-site[dir="rtl"] .e8lt-sbtn--nav{padding:.95em 1.5em .95em .7em}
.e8lt .e8lt-sbtn i{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;background:rgba(255,255,255,.18)}
.e8lt .e8lt-sbtn svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.e8lt .e8lt-site[dir="rtl"] .e8lt-sbtn svg{transform:scaleX(-1)}
.e8lt .e8lt-sbtn--ghost{color:#eef2f0;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);box-shadow:0 calc(var(--vp)*1) 0 rgba(255,255,255,.12) inset}

/* the hero itself */
.e8lt .e8lt-shero{position:absolute;z-index:1;left:0;right:0;top:calc(var(--vp)*200);display:flex;flex-direction:column;align-items:center}
.e8lt .e8lt-seyebrow{display:inline-flex;align-items:center;gap:.76em;
  font:600 calc(var(--vp)*11.52)/1.85 var(--font-lat,"Sora",sans-serif);letter-spacing:.26em;text-transform:uppercase;color:#dfe7e3;
  padding:.43em 1.39em;border-radius:calc(var(--vp)*999);background:rgba(255,255,255,.08);border:calc(var(--vp)*1) solid rgba(255,255,255,.16);
  box-shadow:0 calc(var(--vp)*1) 0 rgba(255,255,255,.18) inset,0 calc(var(--vp)*6) calc(var(--vp)*16) rgba(0,0,0,.18)}
.e8lt .e8lt-seyebrow i{width:calc(var(--vp)*5);height:calc(var(--vp)*5);border-radius:50%;background:#a2afa6;box-shadow:0 0 0 calc(var(--vp)*3) rgba(162,175,166,.22)}
.e8lt .e8lt-stitle{margin-top:calc(var(--vp)*30.4);font-size:calc(var(--vp)*69.6);font-weight:900;line-height:1.22;letter-spacing:-.015em;
  text-shadow:0 calc(var(--vp)*12) calc(var(--vp)*30) rgba(0,0,0,.28)}
.e8lt .e8lt-saccent{display:inline-block;margin-top:.35em;color:#eaf0ec;
  background:linear-gradient(180deg,#ffffff,#cdd8d2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.e8lt .e8lt-site[dir="rtl"] .e8lt-stitle{line-height:1.5;padding-top:.12em;letter-spacing:0}
.e8lt .e8lt-site[dir="rtl"] .e8lt-saccent{margin-top:.2em;padding-top:.08em}
.e8lt .e8lt-slead{margin-top:calc(var(--vp)*28.8);width:calc(var(--vp)*616);max-width:90%;font-size:calc(var(--vp)*20.8);line-height:1.9;color:#d9e2dd}
.e8lt .e8lt-sctas{display:flex;gap:calc(var(--vp)*16);margin-top:calc(var(--vp)*35.2)}
.e8lt .e8lt-sband{height:calc(var(--vp)*30);opacity:.75}

/* ============================== AMBIENT MOTION ============================== */
@keyframes e8lt-sway{0%,100%{transform:rotateY(-1.6deg) translateY(0)}50%{transform:rotateY(1.6deg) translateY(calc(var(--u) * -.5))}}
@keyframes e8lt-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.e8lt.is-paused *,.e8lt.is-paused *::before,.e8lt.is-paused *::after{animation-play-state:paused !important}
.e8lt.is-static .e8lt-float{animation:none}
.e8lt.is-static *,.e8lt.is-static *::before,.e8lt.is-static *::after{transition:none !important}

/* phones: drop the costly extras, keep the silhouette */
@media (max-width:680px){
  .e8lt .e8lt-k{color:transparent;box-shadow:inset 0 calc(var(--u)*.1) 0 var(--e8-key-hi)}
  .e8lt .e8lt-deck{background:linear-gradient(180deg,var(--e8-deck-1),var(--e8-deck-2))}
}
@media (prefers-reduced-motion:reduce){
  .e8lt .e8lt-float{animation:none}
}