.lb{
  --lb-page:var(--bg);
  --lb-stage-1:var(--bg);
  --lb-stage-2:var(--bg);
  --lb-stage-3:var(--bg);
  --lb-ink:var(--text);
  --lb-ink-soft:var(--text-dim);
  --lb-hair:var(--border);

  --lb-accent:var(--switch-glow);
  --lb-chip:var(--surface);

  --lb-shadow:var(--bg);
  --lb-sans:var(--font-en);
  --lb-mono:var(--mono);

  --lb-track-h:820svh;

  position:relative;
  background:var(--lb-page);
  color:var(--lb-ink);
  font-family:var(--lb-sans);
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] .lb{ --lb-sans:var(--font-ar); }

.lb *{box-sizing:border-box}

.lb__track{position:relative; height:var(--lb-track-h)}
.lb__stage{
  position:sticky; top:0; height:100svh; width:100%; overflow:hidden;
  background:radial-gradient(100% 74% at 50% 44%,
    var(--lb-stage-1) 0%, var(--lb-stage-2) 55%, var(--lb-stage-3) 100%);
  transition:background .45s ease;
}

.lb__canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0}

.lb__loader{
  position:absolute; inset:0; z-index:6; display:grid; place-content:center; gap:18px;
  background:var(--lb-page); transition:opacity .7s ease, visibility .7s;
}
.lb__loader.is-done{opacity:0; visibility:hidden}
.lb__loadlabel{font-family:var(--lb-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lb-ink-soft); text-align:center}
.lb__loadbar{width:min(240px,60vw); height:2px; background:var(--lb-hair);
  border-radius:2px; overflow:hidden}
.lb__loadfill{height:100%; width:0%; background:var(--lb-ink); transition:width .25s ease}

.lb__panel{
  position:absolute; overflow:hidden; z-index:1;

  pointer-events:none;
  opacity:0;

  -webkit-mask-image:-webkit-radial-gradient(white, black);
  isolation:isolate;
  background:var(--lb-page);
}

.lb__panel iframe{
  position:absolute; top:0; left:0;
  width:1440px; height:936px;
  border:0; transform-origin:0 0;
  pointer-events:none;
}

.lb__intro{position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding:6vw; pointer-events:none}
.lb__introin{opacity:0; transform:translateY(18px) scale(.94);
  transition:opacity .9s ease, transform .9s ease; will-change:opacity, transform}
.lb__introin.is-settled{transition:none}
.lb__intro h1{margin:0; font-size:clamp(30px,6.4vw,78px); line-height:1.02;
  letter-spacing:-.036em; font-weight:600; color:var(--lb-ink)}
.lb__rule{width:56px; height:1px; background:var(--lb-accent); margin:clamp(18px,3vh,30px) auto}

.lb__mouse{display:block; margin:0 auto; color:var(--lb-ink-soft)}
.lb__scrollword{display:block; margin-top:12px; font-family:var(--lb-mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lb-ink-soft)}

.lb__labels{position:absolute; inset:0; pointer-events:none}

.lb__label{position:absolute; display:flex; align-items:center; gap:9px;
  white-space:nowrap; opacity:0; will-change:opacity; direction:ltr}
.lb__label[data-side="left"]{flex-direction:row-reverse}

.lb__dot{width:6px; height:6px; border-radius:50%; background:var(--lb-accent);
  flex:0 0 auto; will-change:transform; animation:lb-pulse 1.8s ease-out infinite}

.lb__lead{height:1px; flex:0 0 auto; background:var(--lb-accent); opacity:.55}
.lb__label[data-side="right"] .lb__dot{margin-left:var(--lb-clear,0)}
.lb__label[data-side="left"]  .lb__dot{margin-right:var(--lb-clear,0)}
.lb__label.is-notext .lb__txt{display:none}
.lb__txt{font-family:var(--lb-mono); font-size:clamp(10px,.84vw,12px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--lb-ink);
  text-shadow:0 1px 2px var(--lb-shadow), 0 2px 12px var(--lb-shadow)}

.lb__info{position:absolute; inset:0; pointer-events:none}

.lb__card{position:absolute; top:50%; transform:translateY(-50%); width:var(--lb-col, min(390px,27vw))}
.lb__card[data-side="left"]{left:var(--lb-edge, clamp(24px,4.5vw,76px))}
.lb__card[data-side="right"]{right:var(--lb-edge, clamp(24px,4.5vw,76px)); text-align:left}
.lb__ci{opacity:0; will-change:opacity, transform; transform-origin:left center}
.lb__num{font-family:var(--lb-mono); font-size:12px; letter-spacing:.2em;
  color:var(--lb-accent); display:block; margin-bottom:14px}
.lb__card h2{margin:0 0 14px; font-size:clamp(26px,3.05vw,42px);
  letter-spacing:-.025em; line-height:1.06; font-weight:600; color:var(--lb-ink)}
.lb__card p{margin:0; font-size:clamp(15px,1.28vw,19px); line-height:1.58; color:var(--lb-ink-soft)}

.lb__status{position:absolute; display:flex; align-items:center; gap:9px;
  padding:9px 16px; border:1px solid var(--lb-hair); border-radius:999px;
  background:var(--lb-chip); opacity:0; pointer-events:none;
  font-family:var(--lb-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lb-ink); white-space:nowrap}
.lb__status i{width:6px; height:6px; border-radius:50%; background:var(--lb-accent);
  flex:0 0 auto; animation:lb-pulse 1.8s ease-out infinite}
.lb__caret{width:7px; height:12px; background:var(--lb-accent); flex:0 0 auto;
  animation:lb-caret 1s steps(1) infinite}
@keyframes lb-caret{0%,50%{opacity:1} 50.01%,100%{opacity:0}}
@keyframes lb-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--lb-accent) 70%, transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes lb-dotpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--lb-accent) 60%, transparent)}
  70%{box-shadow:0 0 0 15px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.lb__os{position:absolute; inset:0; pointer-events:none}
.lb__os figure{position:absolute; margin:0; text-align:center;
  opacity:0; will-change:opacity, transform}
.lb__os img{display:block; width:100%; height:auto}

.lb__os figure.is-missing{display:none}

.lb__meter{position:absolute; left:0; bottom:0; height:2px; width:100%; transition:opacity .2s linear}
.lb__meter span{display:block; height:100%; width:0%; background:var(--lb-accent)}

.lb.is-stacked{--lb-track-h:740svh}

.lb.is-stacked .lb__lead, .lb.is-stacked .lb__txt{display:none}
.lb.is-stacked .lb__dot{width:16px; height:16px; border:2px solid var(--lb-page);
  animation:lb-dotpulse 1.9s ease-out infinite}

.lb.is-stacked .lb__card{left:20px; right:20px; width:auto; top:auto;
  bottom:clamp(20px,3svh,34px); transform:none; text-align:center}
.lb.is-stacked .lb__card[data-side="left"],.lb.is-stacked .lb__card[data-side="right"]{left:20px; right:20px; text-align:center}
.lb.is-stacked .lb__ci{transform-origin:center bottom !important}
.lb.is-stacked .lb__card h2{font-size:clamp(24px,7vw,32px)}

.lb.is-stacked .lb__card p{font-size:clamp(14px,4vw,17px); max-width:min(100%, clamp(34ch, 52vw, 60ch)); margin:0 auto}

html[dir="rtl"] .lb__card{ text-align:right; }

html[dir="rtl"] .lb__txt,
html[dir="rtl"] .lb__scrollword,
html[dir="rtl"] .lb__num,
html[dir="rtl"] .lb__status{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; }
html[dir="rtl"] .lb__txt{ direction:rtl; font-size:clamp(12px,.95vw,14px); }
html[dir="rtl"] .lb__ci{ transform-origin:right center; }
html[dir="rtl"] .lb.is-stacked .lb__card{ text-align:center; }
html[dir="rtl"] .lb.is-stacked .lb__ci{ transform-origin:center bottom; }