:root{
  --bg:#f4f3f0;
  --bg-2:#ece9e4;
  --paper:#fbfaf7;
  --ink:#222426;
  --muted:#747b82;
  --soft:#aeb3b7;
  --line:rgba(30,32,34,.12);
  --dark:#111315;
  --dark-2:#1d2023;
  --white:#ffffff;
  --accent:#8e969e;
  --shadow:0 30px 90px rgba(18,19,20,.12);
  --shadow-2:0 25px 90px rgba(0,0,0,.28);
  --radius:28px;
  --radius-sm:18px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.92),transparent 32%),
    radial-gradient(circle at 80% 14%,rgba(210,214,216,.34),transparent 34%),
    linear-gradient(180deg,var(--bg),#efede8 55%,#f7f6f3);
  color:var(--ink);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;z-index:10
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 40px));z-index:100;border:1px solid rgba(255,255,255,.45);background:rgba(246,245,241,.72);backdrop-filter:blur(22px);border-radius:22px;box-shadow:0 20px 60px rgba(26,28,30,.10)}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.brand{display:flex;align-items:center;gap:14px;min-width:150px}
.brand-mark{width:58px;height:34px;border:1px solid rgba(110,116,122,.55);border-radius:50%;display:grid;place-items:center;color:#697078;font-size:11px;letter-spacing:2px;font-weight:500}
.brand-name{font-size:15px;letter-spacing:5px;color:#50575e}
.menu{display:flex;gap:6px;align-items:center}
.menu a{padding:11px 14px;border-radius:999px;color:#60676d;font-size:13px;letter-spacing:.04em;transition:.3s ease}
.menu a:hover,.menu a.active{background:rgba(255,255,255,.75);color:#1f2225}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn{border:1px solid rgba(35,37,39,.18);background:#1f2225;color:#fff;padding:14px 18px;border-radius:999px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,0,0,.18)}
.btn.light{background:rgba(255,255,255,.76);color:#1f2225}
.btn.ghost{background:transparent;color:#1f2225}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.55);align-items:center;justify-content:center;cursor:pointer}
.burger span{width:18px;height:1px;background:#34373a;position:relative;display:block}
.burger span::before,.burger span::after{content:"";position:absolute;width:18px;height:1px;background:#34373a;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}

.hero{padding:150px 0 80px;min-height:100vh;display:flex;align-items:center;position:relative}
.orbit{position:absolute;width:760px;height:430px;border:1px solid rgba(102,108,114,.18);border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-6deg);pointer-events:none;animation:spinSlow 30s linear infinite}
.orbit::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:9%;top:18%;background:#9ba1a6;box-shadow:0 0 32px rgba(255,255,255,.8)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:#777e85;margin-bottom:22px}
h1{font-size:clamp(54px,8vw,112px);letter-spacing:-.075em;line-height:.9;margin:0 0 28px;font-weight:560}
h1 .thin{font-weight:300;color:#6e757b}
.lead{font-size:clamp(18px,2vw,24px);line-height:1.45;color:#5d646a;max-width:680px;margin:0 0 34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:46px;max-width:650px}
.stat{padding:22px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.42);backdrop-filter:blur(10px)}
.stat b{font-size:28px;font-weight:540;display:block;letter-spacing:-.03em}
.stat span{font-size:12px;color:#72787e;line-height:1.4;text-transform:uppercase;letter-spacing:.12em}
.hero-card{position:relative;padding:14px;border-radius:34px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);transform:rotate(1deg);overflow:hidden}
.hero-card img{border-radius:24px;width:100%;aspect-ratio:4/3;object-fit:cover}
.float-panel{position:absolute;left:-22px;bottom:28px;padding:18px 20px;border-radius:20px;background:rgba(30,32,34,.84);color:#fff;backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 70px rgba(0,0,0,.25)}
.float-panel strong{font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.float-panel p{margin:8px 0 0;color:#c4c8cc;font-size:13px;line-height:1.4;max-width:220px}
.hero-badge{position:absolute;right:20px;top:20px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.76);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#596068}
.hero-core{position:absolute;right:-34px;bottom:-34px;width:180px;height:180px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(150,156,163,.20) 45%, rgba(17,19,21,.92) 78%);box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,.18);animation:float 6s ease-in-out infinite}
.hero-core::before,.hero-core::after{content:"";position:absolute;border-radius:50%;inset:14px;border:1px solid rgba(255,255,255,.18)}
.hero-core::after{inset:32px;border-style:dashed;animation:spinSlow 18s linear infinite reverse}
.hero-core span{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#fff}

.section{padding:92px 0}
.section.dark{background:linear-gradient(135deg,#131517,#24282b);color:#f5f4f1;border-radius:44px;margin:40px auto;width:min(1240px,calc(100% - 28px));position:relative;overflow:hidden}
.section.dark::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle at 20% 90%,rgba(170,178,184,.18),transparent 34%)}
.section.dark .container{position:relative}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#868d93;margin-bottom:12px}
h2{font-size:clamp(36px,5vw,72px);letter-spacing:-.055em;line-height:.94;margin:0;font-weight:520;max-width:820px}
.section-head p{max-width:430px;margin:0;color:#6d747a;line-height:1.6}
.dark .section-head p,.dark .kicker{color:#c2c5c7}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid var(--line);background:rgba(255,255,255,.45);border-radius:var(--radius);padding:28px;min-height:250px;position:relative;overflow:hidden;transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(255,255,255,.9),transparent 38%);opacity:.45;pointer-events:none}
.card:hover{transform:translateY(-8px);background:rgba(255,255,255,.7);box-shadow:0 28px 70px rgba(20,22,24,.1)}
.card-num{font-size:12px;letter-spacing:.22em;color:#91979d;margin-bottom:48px}
.card h3{font-size:24px;line-height:1.05;letter-spacing:-.03em;margin:0 0 18px;font-weight:530}
.card p{margin:0;color:#697078;line-height:1.58;position:relative}
.dark-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);color:#fff}
.dark-card p{color:#c4c8cc}
.dark-card:hover{background:rgba(255,255,255,.09)}

.divisions{display:grid;grid-template-columns:1fr;gap:12px}
.division{display:grid;grid-template-columns:230px 1fr 260px;gap:28px;align-items:center;padding:24px;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:rgba(255,255,255,.05);transition:.35s ease}
.division:hover{transform:translateX(8px);background:rgba(255,255,255,.09)}
.division .name{font-size:24px;letter-spacing:-.03em}.division .desc{color:#c6c9cc;line-height:1.55}
.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#d7dadd}

.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;color:#777e85;background:rgba(255,255,255,.24)}
.marquee-track{display:flex;gap:34px;white-space:nowrap;animation:marquee 24s linear infinite}.marquee span{font-size:12px;letter-spacing:.3em;text-transform:uppercase}

.motion-showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}
.media-feature,.media-stack .media-card,.showcase-note{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#111315;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.media-feature{min-height:620px;background:linear-gradient(180deg,rgba(11,12,14,.85),rgba(26,29,31,.96))}
.media-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:18px}
.media-card{min-height:194px}
.media-inner{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.media-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.05) brightness(.75);opacity:.6;transform:scale(1.02)}
.media-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,9,.04),rgba(7,8,9,.72))}
.media-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.slot-badge{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#f0f1f2;border:1px solid rgba(255,255,255,.14)}
.play-dot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:14px;backdrop-filter:blur(10px)}
.media-copy h3{font-size:clamp(28px,3vw,46px);letter-spacing:-.05em;line-height:.94;margin:0 0 10px;color:#fff;max-width:620px}
.media-copy p{margin:0;color:#c5c9cd;line-height:1.55;max-width:520px}
.media-copy.compact h3{font-size:26px;max-width:250px}
.media-copy.compact p{font-size:14px;max-width:270px}
.media-hint{position:absolute;left:24px;bottom:22px;z-index:2;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.09);backdrop-filter:blur(10px);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f6f6f6;border:1px solid rgba(255,255,255,.14)}
.showcase-note{margin-top:18px;padding:22px;background:rgba(255,255,255,.04)}
.showcase-note p{margin:0;color:#d2d5d8;line-height:1.65}
.showcase-note b{display:block;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:10px}

.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.step{padding:24px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.38);min-height:190px}.step small{display:block;color:#858b90;letter-spacing:.18em;text-transform:uppercase;margin-bottom:42px}.step b{display:block;font-size:20px;letter-spacing:-.03em;margin-bottom:12px}.step p{margin:0;color:#6a7177;line-height:1.5;font-size:14px}

.page-hero{padding:170px 0 68px}.page-hero h1{font-size:clamp(52px,7vw,96px)}.page-hero p{max-width:760px}
.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.text-block{font-size:18px;line-height:1.72;color:#596068}.text-block p{margin:0 0 20px}

.services-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.service{padding:28px;border-radius:26px;border:1px solid var(--line);background:rgba(255,255,255,.46);display:grid;grid-template-columns:54px 1fr;gap:18px;transition:.3s ease}.service:hover{transform:translateY(-6px);background:rgba(255,255,255,.72)}.icon{width:54px;height:54px;border-radius:50%;border:1px solid rgba(105,112,120,.25);display:grid;place-items:center;color:#6b737a;font-size:18px;background:rgba(255,255,255,.45)}.service h3{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}.service p{margin:0;color:#687078;line-height:1.55}

.contact-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:start}.contact-card,.form-card{padding:34px;border-radius:32px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}.contact-card h2,.form-card h2{font-size:44px;margin-bottom:18px}.contact-links{display:grid;gap:12px;margin-top:28px}.contact-link{padding:18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.45);display:flex;justify-content:space-between;gap:18px;color:#555d64}
form{display:grid;gap:14px}.field{display:grid;gap:8px}label{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#747b82}input,select,textarea{width:100%;border:1px solid rgba(30,32,34,.14);border-radius:18px;background:rgba(255,255,255,.62);padding:16px;color:#222;font:inherit;outline:none;transition:.25s ease}textarea{min-height:140px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:#747b82;box-shadow:0 0 0 4px rgba(116,123,130,.1)}

.footer{padding:46px 0 60px;color:#6f767d}.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--line);padding-top:28px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}
.cursor-glow{position:fixed;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.32),transparent 62%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);opacity:.65}
main,.nav,.footer{position:relative;z-index:2}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spinSlow{from{transform:translate(-50%,-50%) rotate(-6deg)}to{transform:translate(-50%,-50%) rotate(354deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

@media(max-width:1100px){
  .motion-showcase{grid-template-columns:1fr}
  .media-feature{min-height:500px}
  .media-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .media-stack .media-card:last-child{grid-column:1/-1}
}
@media(max-width:980px){
  .menu{position:fixed;top:92px;left:0;right:0;margin:auto;width:min(92vw,500px);display:none;flex-direction:column;background:rgba(246,245,241,.94);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:14px;box-shadow:var(--shadow)}
  .menu.open{display:flex}.menu a{width:100%;text-align:center}.burger{display:flex}.nav-actions .btn{display:none}
  .hero-grid,.two-col,.contact-wrap{grid-template-columns:1fr}.grid-4,.grid-3,.process{grid-template-columns:repeat(2,1fr)}.division{grid-template-columns:1fr}.hero{padding-top:130px}
  .hero-card{max-width:760px}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,1180px)}.nav{width:min(100% - 20px,1180px);top:10px}.brand-name{display:none}.grid-4,.grid-3,.process,.services-list,.stats{grid-template-columns:1fr}h1{font-size:54px}.section{padding:64px 0}.section.dark{border-radius:30px;width:calc(100% - 12px)}.section-head{display:block}.section-head p{margin-top:18px}.float-panel{position:relative;left:auto;bottom:auto;margin-top:12px}.hero-card{transform:none}.footer-inner{display:block}
  .orbit{display:none}.hero-core{width:138px;height:138px;right:-10px;bottom:-10px}.media-feature{min-height:430px}.media-stack{grid-template-columns:1fr}
  .media-copy h3{font-size:30px}
}
































/* ===== SMPL v18: exact reference logo image + smoother one-pass arc transition ===== */

:root{
  --page-bg:#f4f3f0;
  --page-ink:#222426;
  --theme-speed:1s;
  --theme-ease:cubic-bezier(.25,.9,.3,1);
  --pull-x:0px;
  --pull-y:0px;
  --pull-rot:0deg;
}

html,body{
  background:var(--page-bg) !important;
}
body{
  color:var(--page-ink);
  transition:
    color var(--theme-speed) var(--theme-ease),
    background-color var(--theme-speed) var(--theme-ease);
}
body.dark-theme{
  --page-bg:#07080a;
  --page-ink:#f4f1ec;
}

/* Reliable theme base */
.ambient-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.ambient-light,
.ambient-dark{
  position:absolute;
  inset:0;
  transition:opacity var(--theme-speed) var(--theme-ease);
  will-change:opacity;
}
.ambient-light{
  opacity:1;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.92),transparent 32%),
    radial-gradient(circle at 80% 14%,rgba(210,214,216,.34),transparent 34%),
    linear-gradient(180deg,#f4f3f0,#efede8 55%,#f7f6f3);
}
.ambient-dark{
  opacity:0;
  background:
    radial-gradient(circle at 17% 7%,rgba(255,255,255,.065),transparent 30%),
    radial-gradient(circle at 82% 14%,rgba(155,162,170,.105),transparent 35%),
    radial-gradient(circle at 52% 105%,rgba(255,255,255,.045),transparent 32%),
    linear-gradient(180deg,#07080a 0%,#101214 46%,#060708 100%);
}
body.dark-theme .ambient-light{opacity:0}
body.dark-theme .ambient-dark{opacity:1}

/* Single-pass arc sunset sweep */
.theme-sunset-wheel{
  position:fixed;
  width:236vmax;
  height:236vmax;
  left:-162vmax;
  bottom:-174vmax;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transform:translateX(0) translateY(0) rotate(-20deg);
  will-change:transform, opacity, filter;
  background:
    conic-gradient(from 224deg,
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,0) 30deg,
      rgba(255,255,255,.05) 42deg,
      rgba(246,247,248,.28) 58deg,
      rgba(186,192,197,.22) 74deg,
      rgba(98,104,112,.22) 92deg,
      rgba(22,24,27,.44) 116deg,
      rgba(5,6,7,.78) 150deg,
      rgba(255,255,255,0) 212deg,
      rgba(255,255,255,0) 360deg);
  filter:blur(18px);
}
.theme-sunset-wheel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 69% 27%,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.05) 11%,
      rgba(255,255,255,0) 22%);
}
body.theme-switching .theme-sunset-wheel{
  animation:arcSunsetSweep 1s var(--theme-ease) both;
}
@keyframes arcSunsetSweep{
  0%{
    opacity:0;
    transform:translateX(0) translateY(16vmax) rotate(-21deg);
    filter:blur(26px) brightness(1.07);
  }
  18%{
    opacity:.56;
  }
  52%{
    opacity:.76;
    transform:translateX(80vmax) translateY(0vmax) rotate(5deg);
    filter:blur(18px) brightness(1.01);
  }
  100%{
    opacity:0;
    transform:translateX(158vmax) translateY(17vmax) rotate(25deg);
    filter:blur(26px) brightness(.88);
  }
}

/* No second overlay animation */
.theme-flare{
  display:none !important;
}

/* Pull cord kept as-is */
.pull-cord{
  position:fixed;
  top:0;
  right:18px;
  width:104px;
  height:330px;
  z-index:170;
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  opacity:.94;
}
.cord-anchor{
  position:absolute;
  top:0;
  left:50%;
  width:12px;
  height:15px;
  transform:translateX(-50%);
  border-radius:0 0 50% 50%;
  background:rgba(80,86,92,.40);
  box-shadow:0 4px 18px rgba(0,0,0,.12);
}
.cord-svg{
  position:absolute;
  top:8px;
  left:0;
  width:104px;
  height:282px;
  overflow:visible;
}
.cord-line{
  fill:none;
  stroke:rgba(89,96,103,.54);
  stroke-width:1.55;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.14));
}
.cord-handle{
  position:absolute;
  left:50%;
  top:222px;
  width:40px;
  height:40px;
  transform:translate(calc(-50% + var(--pull-x)), var(--pull-y)) rotate(var(--pull-rot));
  border-radius:50%;
  border:1px solid rgba(83,90,97,.32);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 38px rgba(0,0,0,.15);
  cursor:grab;
  display:grid;
  place-items:center;
  transition:
    background var(--theme-speed) var(--theme-ease),
    border-color var(--theme-speed) var(--theme-ease),
    box-shadow var(--theme-speed) var(--theme-ease);
}
.cord-handle:active{cursor:grabbing}
.cord-handle span{
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid rgba(89,96,103,.42);
  display:block;
}
.cord-hint{
  position:absolute;
  top:274px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(92,98,105,.52);
  opacity:.82;
}
.pull-cord:not(.pulling) .cord-handle{
  animation:cordIdle 3.2s ease-in-out infinite;
}
@keyframes cordIdle{
  0%,100%{transform:translate(calc(-50% + var(--pull-x)), var(--pull-y)) rotate(var(--pull-rot))}
  50%{transform:translate(calc(-50% + var(--pull-x) + 1px), calc(var(--pull-y) + 3px)) rotate(1.8deg)}
}
.pull-cord.pulling .cord-handle{
  box-shadow:0 22px 54px rgba(0,0,0,.22), 0 0 0 10px rgba(255,255,255,.18);
  animation:none;
}
.pull-cord.ready .cord-handle{
  box-shadow:0 24px 64px rgba(0,0,0,.24), 0 0 48px rgba(255,255,255,.54);
}
.pull-cord.ready .cord-line{
  stroke:rgba(130,137,144,.82);
}
body.dark-theme .cord-anchor{ background:rgba(255,255,255,.18); }
body.dark-theme .cord-line{
  stroke:rgba(220,224,228,.40);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.38));
}
body.dark-theme .cord-handle{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 16px 42px rgba(0,0,0,.40);
}
body.dark-theme .cord-handle span{ border-color:rgba(255,255,255,.36); }
body.dark-theme .cord-hint{ color:rgba(220,224,228,.42); }

/* unified transitions */
.nav,.hero-card,.section,.card,.step,.service,.contact-card,.form-card,.stat,.division,.marquee,
input,select,textarea,.btn,.brand-mark,.brand-name,.menu a,.hero-card img,.float-panel,.hero-badge,
.sun-orbit,.smpl-logo-layer,.smpl-logo-image,.orbit-glow,.orbit-sheen{
  transition:
    background-color var(--theme-speed) var(--theme-ease),
    background var(--theme-speed) var(--theme-ease),
    color var(--theme-speed) var(--theme-ease),
    border-color var(--theme-speed) var(--theme-ease),
    box-shadow var(--theme-speed) var(--theme-ease),
    filter var(--theme-speed) var(--theme-ease),
    opacity var(--theme-speed) var(--theme-ease),
    transform var(--theme-speed) var(--theme-ease);
}

/* dark palette */
body.dark-theme::before{ opacity:.14; mix-blend-mode:screen; }
body.dark-theme .nav{
  background:rgba(10,11,12,.70);
  border-color:rgba(255,255,255,.105);
  box-shadow:0 20px 90px rgba(0,0,0,.48);
}
body.dark-theme .brand-mark{color:#d8dadd;border-color:rgba(255,255,255,.25)}
body.dark-theme .brand-name,
body.dark-theme .menu a{color:#c3c8cc}
body.dark-theme .menu a:hover,
body.dark-theme .menu a.active{background:rgba(255,255,255,.09);color:#fff}
body.dark-theme .mode-toggle{
  background:rgba(255,255,255,.075);
  color:#e8eaec;
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .btn.light{
  background:rgba(255,255,255,.095);
  color:#fff;
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .btn.ghost{color:#f1f2f3}
body.dark-theme .btn{background:#f2f0ec;color:#111315}
body.dark-theme .eyebrow,
body.dark-theme .kicker{color:#aeb4ba}
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme .card h3,
body.dark-theme .step b,
body.dark-theme .service h3,
body.dark-theme .value h3{color:#f4f1ec}
body.dark-theme h1 .thin,
body.dark-theme .lead,
body.dark-theme .section-head p,
body.dark-theme .text-block,
body.dark-theme .card p,
body.dark-theme .step p,
body.dark-theme .service p,
body.dark-theme .contact-link,
body.dark-theme .footer{color:#c1c7cc}
body.dark-theme .stat,
body.dark-theme .card,
body.dark-theme .step,
body.dark-theme .service,
body.dark-theme .contact-card,
body.dark-theme .form-card,
body.dark-theme .value{
  background:rgba(255,255,255,.052);
  border-color:rgba(255,255,255,.105);
  box-shadow:0 28px 86px rgba(0,0,0,.20);
}
body.dark-theme .stat span,
body.dark-theme .card-num,
body.dark-theme label{color:#9ca3aa}
body.dark-theme .hero-card{
  background:rgba(255,255,255,.052);
  border-color:rgba(255,255,255,.105);
  box-shadow:0 34px 100px rgba(0,0,0,.42);
}
body.dark-theme .hero-card img{ filter:brightness(.66) contrast(1.06) saturate(.88); }
body.dark-theme .float-panel{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .hero-badge{
  background:rgba(0,0,0,.40);
  color:#d8dcdf;
  border-color:rgba(255,255,255,.12);
}
body.dark-theme .section.dark{
  background:
    radial-gradient(circle at 78% 6%,rgba(255,255,255,.10),transparent 30%),
    linear-gradient(135deg,#050607,#141719);
  border:1px solid rgba(255,255,255,.07);
}
body.dark-theme .marquee{
  background:rgba(255,255,255,.038);
  border-color:rgba(255,255,255,.10);
  color:#aeb4ba;
}
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea{
  background:rgba(255,255,255,.07);
  color:#f4f1ec;
  border-color:rgba(255,255,255,.14);
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder{color:#8e969d}
body.dark-theme .contact-link{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
body.dark-theme .footer-inner{border-color:rgba(255,255,255,.12)}
body.dark-theme .cursor-glow{
  background:radial-gradient(circle,rgba(190,198,205,.13),transparent 62%);
}

/* Controls */
.mode-toggle{
  height:44px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(80,87,94,.16);
  background:rgba(255,255,255,.62);
  color:#40464c;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:
    transform .28s ease,
    background var(--theme-speed) var(--theme-ease),
    color var(--theme-speed) var(--theme-ease),
    border-color var(--theme-speed) var(--theme-ease),
    box-shadow var(--theme-speed) var(--theme-ease);
}
.mode-toggle:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.mode-icon,.flash-icon{
  width:18px;height:18px;border-radius:50%;
  display:inline-block;position:relative;border:1px solid currentColor;
}
.mode-icon::before{
  content:"";
  position:absolute;inset:3px;border-radius:50%;background:currentColor;opacity:.34;
}
.flash-icon{border-radius:6px 6px 10px 10px;transform:rotate(-12deg)}
.flash-icon::before{
  content:"";
  position:absolute;width:6px;height:7px;left:5px;top:-6px;
  border:1px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0;
}

/* Exact-logo background treatment */
.sun-orbit{
  width:570px !important;
  height:570px !important;
  top:48%;
  left:52%;
  transform:translate(-50%,-50%);
  border:none !important;
  box-shadow:none !important;
  opacity:.40;
  pointer-events:none;
  display:grid;
  place-items:center;
}
.smpl-logo-layer{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.smpl-logo-image{
  width:78%;
  height:auto;
  opacity:.88;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.10));
}
.orbit-glow{
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 28%,
      rgba(255,255,255,0) 64%);
  opacity:.52;
}
.orbit-sheen{
  position:absolute;
  inset:9%;
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle at 72% 27%,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.36) 4.5%,
      rgba(255,255,255,.08) 8%,
      rgba(255,255,255,0) 13%);
  filter:blur(2px);
}
body.theme-switching .sun-orbit{
  animation:logoOrbitTurn 1s var(--theme-ease) both;
}
body.theme-switching .smpl-logo-image{
  animation:logoImagePulse 1s var(--theme-ease) both;
}
body.theme-switching .orbit-glow{
  animation:orbitGlowPulse 1s var(--theme-ease) both;
}
body.theme-switching .orbit-sheen{
  animation:orbitSheenMove 1s var(--theme-ease) both;
}
@keyframes logoOrbitTurn{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.014)}
  100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
}
@keyframes logoImagePulse{
  0%{filter:drop-shadow(0 0 18px rgba(255,255,255,.10))}
  50%{filter:drop-shadow(0 0 30px rgba(255,255,255,.26))}
  100%{filter:drop-shadow(0 0 18px rgba(255,255,255,.10))}
}
@keyframes orbitGlowPulse{
  0%{opacity:.46; filter:blur(0)}
  50%{opacity:.92; filter:blur(3px)}
  100%{opacity:.44; filter:blur(0)}
}
@keyframes orbitSheenMove{
  0%{
    opacity:0;
    transform:rotate(-18deg) scale(1);
  }
  16%{opacity:1}
  58%{
    opacity:.95;
    transform:rotate(6deg) scale(1.02);
  }
  100%{
    opacity:0;
    transform:rotate(24deg) scale(1);
  }
}

body.dark-theme .sun-orbit{opacity:.30}
body.dark-theme .smpl-logo-image{
  opacity:.94;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.09));
}
body.dark-theme .orbit-glow{opacity:.28}

/* Flashlight */
.flashlight-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  opacity:0;
  transition:opacity .55s ease;
  background:
    radial-gradient(circle 86px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.22) 26%,
      rgba(255,255,255,.075) 46%,
      rgba(0,0,0,.72) 68%,
      rgba(0,0,0,.985) 100%),
    radial-gradient(circle 310px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 38%,
      rgba(0,0,0,.78) 72%,
      rgba(0,0,0,1) 100%);
  mix-blend-mode:normal;
  backdrop-filter:brightness(.66) contrast(1.16);
}
body.flashlight-mode{
  background:#020303 !important;
  color:#f4f1ec;
}
body.flashlight-mode .flashlight-layer{opacity:1}
body.flashlight-mode .nav,
body.flashlight-mode .footer{z-index:120}
body.flashlight-mode main{
  filter:brightness(.40) contrast(1.24) saturate(.82);
}
body.flashlight-mode .cursor-glow{display:none}
body.flashlight-mode .mode-toggle[data-flashlight-toggle]{
  background:#f2f0ec;
  color:#111315;
  box-shadow:0 0 38px rgba(255,255,255,.18);
}

@media (prefers-reduced-motion: reduce){
  .ambient-light,.ambient-dark,.theme-sunset-wheel,.nav,.hero-card,.section,.card,.step,.service,.contact-card,.form-card,.stat,.division,.marquee,
  input,select,textarea,.btn,.brand-mark,.brand-name,.menu a,.hero-card img,.float-panel,.hero-badge,.sun-orbit,.smpl-logo-layer,.smpl-logo-image,.orbit-glow,.orbit-sheen{
    transition:none !important;
    animation:none !important;
  }
}

@media(max-width:980px){
  .pull-cord{right:4px;transform:scale(.88);transform-origin:top right}
  .mode-toggle{height:40px;padding:0 11px}
  .mode-toggle .mode-text{display:none}
  .nav-actions{gap:7px}
  .sun-orbit{width:390px !important;height:390px !important;left:52%;top:39%;opacity:.28}
  .smpl-logo-image{width:80%}
}
@media(max-width:640px){
  .pull-cord{right:-10px;transform:scale(.76);transform-origin:top right}
  .sun-orbit{width:290px !important;height:290px !important;left:50%;top:34%;opacity:.24}
  .mode-toggle{width:40px;padding:0;justify-content:center}
}


/* ===== SMPL v19: restructured homepage, static logo, cleaner premium layout ===== */

/* Logo should not rotate anymore. Only glow/sheen pulse during theme switch. */
body.theme-switching .sun-orbit{
  animation:none !important;
  transform:translate(-50%,-50%) !important;
}
body.theme-switching .smpl-logo-image{
  animation:logoImagePulse 1s var(--theme-ease) both;
}
body.theme-switching .orbit-glow{
  animation:orbitGlowPulse 1s var(--theme-ease) both;
}
body.theme-switching .orbit-sheen{
  animation:orbitSheenMove 1s var(--theme-ease) both;
}

.v19-hero{
  padding-top:160px;
  min-height:100vh;
}
.v19-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:54px;
  align-items:center;
}
.v19-hero-copy{
  position:relative;
  z-index:3;
}
.v19-hero h1{
  max-width:820px;
}
.v19-hero-panel{
  position:relative;
  z-index:3;
  min-height:520px;
  border-radius:38px;
  padding:34px;
  border:1px solid rgba(255,255,255,.68);
  background:
    linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.22)),
    radial-gradient(circle at 82% 12%,rgba(255,255,255,.80),transparent 34%);
  box-shadow:0 36px 100px rgba(20,22,24,.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.v19-hero-panel::before{
  content:"";
  position:absolute;
  inset:auto -28% -36% auto;
  width:360px;
  height:360px;
  border-radius:50%;
  border:1px solid rgba(90,98,106,.18);
}
.v19-panel-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#707780;
  font-size:12px;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.v19-panel-top b{
  color:#3f464d;
  font-weight:450;
}
.v19-panel-line{
  height:1px;
  background:linear-gradient(90deg,rgba(50,55,60,.22),transparent);
  margin:22px 0;
}
.v19-panel-big{
  font-size:clamp(52px,6vw,86px);
  line-height:.88;
  letter-spacing:-.07em;
  font-weight:520;
  color:#2c3034;
}
.v19-hero-panel p{
  max-width:430px;
  color:#687078;
  line-height:1.65;
  margin:34px 0 0;
}

.v19-strip{
  position:relative;
  z-index:2;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.24);
  backdrop-filter:blur(14px);
}
.v19-strip-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.v19-strip span{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#707780;
}

.v19-intro{
  padding-top:110px;
}

.v19-ecosystem-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.v19-eco-card{
  min-height:330px;
  padding:26px;
  border-radius:28px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.v19-eco-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}
.v19-eco-card span{
  color:#b9bec3;
  font-size:12px;
  letter-spacing:.24em;
}
.v19-eco-card h3{
  margin:70px 0 16px;
  font-size:24px;
  line-height:1;
  letter-spacing:-.04em;
}
.v19-eco-card p{
  margin:0;
  color:#c5c9cc;
  line-height:1.55;
  font-size:14px;
}

.v19-service-layout{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:18px;
}
.v19-service-main{
  min-height:520px;
  border-radius:36px;
  padding:34px;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.v19-service-main h3{
  font-size:clamp(40px,5vw,72px);
  line-height:.92;
  letter-spacing:-.06em;
  margin:0;
}
.v19-service-main p{
  color:#687078;
  line-height:1.65;
  max-width:520px;
  margin:26px 0;
}
.v19-service-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.v19-mini{
  min-height:160px;
  padding:24px;
  border-radius:26px;
  background:rgba(255,255,255,.44);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .3s ease, background .3s ease;
}
.v19-mini:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.68);
}
.v19-mini b{
  color:#8a9198;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:450;
}
.v19-mini span{
  font-size:22px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.v19-motion .motion-showcase{
  margin-top:10px;
}

.v19-cta{
  border-radius:38px;
  padding:46px;
  background:
    radial-gradient(circle at 90% 0%,rgba(255,255,255,.80),transparent 34%),
    rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end;
}
.v19-cta h2{
  max-width:780px;
}
.v19-cta p{
  max-width:640px;
  color:#687078;
  line-height:1.65;
}

/* dark adjustments */
body.dark-theme .v19-hero-panel,
body.dark-theme .v19-service-main,
body.dark-theme .v19-mini,
body.dark-theme .v19-cta{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.105);
  box-shadow:0 30px 90px rgba(0,0,0,.22);
}
body.dark-theme .v19-panel-big,
body.dark-theme .v19-panel-top b,
body.dark-theme .v19-service-main h3,
body.dark-theme .v19-mini span,
body.dark-theme .v19-cta h2{
  color:#f4f1ec;
}
body.dark-theme .v19-hero-panel p,
body.dark-theme .v19-service-main p,
body.dark-theme .v19-cta p{
  color:#c1c7cc;
}
body.dark-theme .v19-strip{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
body.dark-theme .v19-strip span,
body.dark-theme .v19-panel-top,
body.dark-theme .v19-mini b{
  color:#aeb4ba;
}

@media(max-width:1100px){
  .v19-ecosystem-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .v19-eco-card:last-child{
    grid-column:1/-1;
    min-height:220px;
  }
}
@media(max-width:980px){
  .v19-hero-grid,
  .v19-service-layout{
    grid-template-columns:1fr;
  }
  .v19-hero-panel{
    min-height:420px;
  }
  .v19-service-main{
    min-height:380px;
  }
}
@media(max-width:640px){
  .v19-hero{
    padding-top:130px;
  }
  .v19-hero-panel,
  .v19-service-main,
  .v19-cta{
    border-radius:28px;
    padding:26px;
  }
  .v19-service-list,
  .v19-ecosystem-grid{
    grid-template-columns:1fr;
  }
  .v19-eco-card,
  .v19-eco-card:last-child{
    min-height:240px;
  }
  .v19-cta{
    display:block;
  }
  .v19-cta .btn{
    margin-top:24px;
  }
}


/* ===== SMPL v20: cleaner line-based design, static hero ring, simpler brand ===== */

/* Brand in header/footer: no fake oval capsule, just clean wordmark */
.brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.brand-mark{
  border:none !important;
  background:none !important;
  padding:0 !important;
  min-width:auto !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#6b737c !important;
  font-size:18px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:400;
}
.brand-name{
  color:#454c53 !important;
  letter-spacing:.38em !important;
  font-size:15px !important;
  font-weight:400 !important;
}
body.dark-theme .brand-mark{ color:#c8ccd1 !important; }
body.dark-theme .brand-name{ color:#eceff2 !important; }

/* Make navigation lighter and thinner */
.nav{
  background:rgba(255,255,255,.36) !important;
  border-color:rgba(78,84,90,.08) !important;
  box-shadow:0 12px 38px rgba(23,26,29,.06) !important;
}
body.dark-theme .nav{
  background:rgba(10,11,12,.42) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 16px 44px rgba(0,0,0,.18) !important;
}

/* Hero background mark: only a subtle ring, no wordmark, no rotation ever */
.sun-orbit{
  width:620px !important;
  height:620px !important;
  top:49%;
  left:46%;
  transform:translate(-50%,-50%) !important;
  opacity:.18 !important;
  pointer-events:none;
}
.hero-ring-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.hero-ring-path,
.hero-ring-glint{
  fill:none;
  stroke-linecap:round;
}
.hero-ring-path{
  stroke:#a9afb6;
  stroke-width:1.8;
  opacity:.72;
}
.hero-ring-glint{
  stroke:#ffffff;
  stroke-width:3.2;
  stroke-dasharray:120 820;
  stroke-dashoffset:280;
  opacity:0;
  filter:blur(.65px);
}
.hero-ring-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b8bcc1;
  left:43%;
  top:85%;
  opacity:.7;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(255,255,255,.05);
}
body.theme-switching .sun-orbit{
  animation:none !important;
}
body.theme-switching .hero-ring-glint{
  animation:v20Glint 1s var(--theme-ease) both;
}
body.theme-switching .hero-ring-dot{
  animation:v20DotDrift 1s var(--theme-ease) both;
}
@keyframes v20Glint{
  0%{opacity:0; stroke-dashoffset:260}
  18%{opacity:.88}
  64%{opacity:.88}
  100%{opacity:0; stroke-dashoffset:-260}
}
@keyframes v20DotDrift{
  0%{transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 6px rgba(255,255,255,.04)}
  50%{transform:translate(-50%,-47%) scale(1.14); box-shadow:0 0 18px 10px rgba(255,255,255,.12)}
  100%{transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 6px rgba(255,255,255,.04)}
}
body.dark-theme .sun-orbit{ opacity:.13 !important; }
body.dark-theme .hero-ring-path{ stroke:#868d95; opacity:.62; }
body.dark-theme .hero-ring-dot{ background:#9fa6ae; box-shadow:0 0 0 6px rgba(255,255,255,.03); }

/* Lighter structure overall: less AI, more premium lines */
.v19-hero{
  padding-top:150px;
}
.v19-hero-grid{
  grid-template-columns:1.12fr .88fr;
  gap:48px;
}
.v19-hero-copy{
  max-width:820px;
}
.v19-hero .eyebrow{
  letter-spacing:.24em;
}
.v19-hero h1{
  font-weight:560;
}
.v19-hero .lead{
  max-width:720px;
}

.v19-hero-panel{
  min-height:480px;
  border-radius:20px !important;
  padding:28px !important;
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(90,98,106,.12) !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px);
}
.v19-hero-panel::before{
  content:none !important;
}
.v19-panel-top{
  color:#7b838b;
}
.v19-panel-big{
  font-weight:550;
  letter-spacing:-.06em;
}
.v19-hero-panel p{
  color:#707780;
}
body.dark-theme .v19-hero-panel{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.dark-theme .v19-hero-panel p{ color:#bec5cb; }

/* Thin strip */
.v19-strip{
  background:transparent !important;
  border-top:1px solid rgba(90,98,106,.10) !important;
  border-bottom:1px solid rgba(90,98,106,.10) !important;
  backdrop-filter:none !important;
}
.v19-strip span{
  letter-spacing:.26em;
}

/* Ecosystem cards simpler */
.v19-ecosystem-grid{
  gap:12px;
}
.v19-eco-card{
  min-height:280px;
  border-radius:18px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
.v19-eco-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.16) !important;
}
.v19-eco-card h3{
  margin:48px 0 14px;
}

/* Services and CTA less chunky */
.v19-service-main,
.v19-mini,
.v19-cta{
  border-radius:18px !important;
  box-shadow:none !important;
  border-width:1px !important;
}
.v19-service-main{
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(90,98,106,.12) !important;
  min-height:430px;
}
.v19-mini{
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(90,98,106,.10) !important;
  min-height:140px;
}
.v19-mini span{
  font-size:20px;
}
.v19-cta{
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(90,98,106,.12) !important;
}
body.dark-theme .v19-service-main,
body.dark-theme .v19-mini,
body.dark-theme .v19-cta{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Make media slots lighter too */
.media-feature,
.media-card{
  border-radius:18px !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.media-feature::after,
.media-card::after{
  display:none !important;
}

/* General cards and steps less rounded/heavy */
.card,
.step,
.service,
.contact-card,
.form-card,
.stat,
.value{
  border-radius:18px !important;
  box-shadow:none !important;
}
.section.dark{
  border-radius:28px !important;
}

@media(max-width:1200px){
  .sun-orbit{
    width:520px !important;
    height:520px !important;
    left:48%;
  }
}
@media(max-width:980px){
  .sun-orbit{
    width:360px !important;
    height:360px !important;
    left:50%;
    top:34%;
    opacity:.14 !important;
  }
  .v19-hero-panel{
    min-height:360px;
  }
}
@media(max-width:640px){
  .brand-mark{
    font-size:16px;
    letter-spacing:.14em;
  }
  .brand-name{
    font-size:13px !important;
    letter-spacing:.26em !important;
  }
  .sun-orbit{
    width:260px !important;
    height:260px !important;
    top:28%;
  }
  .v19-hero-panel,
  .v19-service-main,
  .v19-mini,
  .v19-cta,
  .v19-eco-card,
  .media-feature,
  .media-card{
    border-radius:16px !important;
  }
}


/* ===== SMPL v21: more light blocks + richer motion slots ===== */

/* Hero and service panels even lighter */
.v19-hero-panel{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(90,98,106,.10) !important;
  border-radius:22px 22px 72px 22px !important;
}
.v19-panel-big{
  font-size:clamp(48px,5.5vw,78px);
}
.v19-service-main{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(90,98,106,.10) !important;
  border-radius:22px 22px 86px 22px !important;
}
.v19-service-list{
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.v19-mini{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(90,98,106,.08) !important;
  border-radius:18px 18px 42px 18px !important;
}
.v19-mini:hover{
  background:rgba(255,255,255,.18) !important;
}

/* Thin-strip feeling throughout */
.v19-strip,
.v21-motion .section-head + .v21-motion-grid{
  position:relative;
}
.v19-strip::before,
.v19-strip::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,98,106,.08), transparent);
}
.v19-strip::before{ top:0; }
.v19-strip::after{ bottom:0; }

/* New motion system */
.v21-motion{
  padding-top:110px;
}
.v21-motion-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  margin-top:30px;
}
.v21-media{
  position:relative;
  overflow:hidden;
  min-height:220px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  box-shadow:none;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.v21-media:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.06);
}
.v21-media-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.16;
  filter:saturate(.8) contrast(1.02);
}
.v21-media-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 14%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(180deg, rgba(8,9,10,.04), rgba(8,9,10,.14));
}
.v21-media-content{
  position:relative;
  z-index:2;
  height:100%;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.v21-media-content.row{
  flex-direction:row;
  align-items:flex-end;
  gap:22px;
}
.v21-media-content.compact{
  justify-content:flex-end;
}
.v21-media-content.center{
  align-items:center;
  text-align:center;
  justify-content:center;
}
.v21-media-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#b5bbc1;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.v21-media h3{
  margin:24px 0 10px;
  color:#fff;
  font-size:clamp(26px,3vw,44px);
  line-height:.96;
  letter-spacing:-.05em;
}
.v21-media p{
  margin:0;
  color:#c5c9cc;
  max-width:500px;
  line-height:1.6;
}
.v21-media-hint{
  position:absolute;
  right:18px;
  bottom:14px;
  font-size:11px;
  color:#9ea5ac;
  letter-spacing:.12em;
}
.v21-pill-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.v21-pill-list span{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  color:#d2d6da;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hero-slot{
  grid-column:1 / span 7;
  min-height:420px;
  border-radius:26px 26px 110px 26px;
}
.vertical-slot{
  grid-column:8 / span 5;
  min-height:420px;
  border-radius:140px 140px 26px 26px;
}
.wide-slot{
  grid-column:1 / span 8;
  min-height:250px;
  border-radius:26px 110px 26px 26px;
}
.circle-slot{
  grid-column:9 / span 4;
  min-height:250px;
  aspect-ratio:1;
  border-radius:50%;
}
.circle-slot .v21-media-content{
  align-items:center;
  justify-content:center;
}
.circle-slot h3{
  margin:12px 0 0;
  font-size:28px;
}
.slim-slot{
  grid-column:1 / span 12;
  min-height:128px;
  border-radius:999px;
}
.slim-slot .v21-media-content{
  padding:20px 24px;
}
.slim-slot h3{
  margin:10px 0 0;
  font-size:22px;
  max-width:860px;
}

/* More line-based cards below as well */
.v19-eco-card{
  border-radius:18px 18px 44px 18px !important;
}
.v19-cta{
  border-radius:20px 20px 68px 20px !important;
}

/* Dark harmonization */
body.dark-theme .v19-hero-panel,
body.dark-theme .v19-service-main,
body.dark-theme .v19-mini{
  background:rgba(255,255,255,.030) !important;
  border-color:rgba(255,255,255,.09) !important;
}
body.dark-theme .v21-media{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.10);
}
body.dark-theme .v21-media:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18);
}

/* Responsive */
@media(max-width:1100px){
  .v21-motion-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .hero-slot,
  .vertical-slot,
  .wide-slot,
  .circle-slot,
  .slim-slot{
    grid-column:auto;
    min-height:260px;
    aspect-ratio:auto;
  }
  .circle-slot{
    border-radius:26px 80px 26px 26px;
  }
  .slim-slot{
    min-height:180px;
    border-radius:26px;
  }
  .slim-slot .v21-media-content{
    flex-direction:column;
    align-items:flex-start;
  }
  .v21-pill-list{
    justify-content:flex-start;
  }
}
@media(max-width:640px){
  .v19-service-list{
    grid-template-columns:1fr;
  }
  .v21-motion-grid{
    grid-template-columns:1fr;
  }
  .hero-slot,
  .vertical-slot,
  .wide-slot,
  .circle-slot,
  .slim-slot{
    border-radius:20px 20px 42px 20px;
    min-height:220px;
  }
  .v21-media-content{
    padding:18px;
  }
  .v21-media h3{
    font-size:26px;
  }
  .slim-slot{
    border-radius:24px;
  }
}


/* ===== SMPL v22: editorial premium layout, more motion, less heavy AI blocks ===== */

/* kill heavy older homepage shapes */
.v19-hero-panel,.v19-service-main,.v19-mini,.v19-eco-card,.v19-cta,
.v21-media,.media-feature,.media-card{
  box-shadow:none !important;
}

/* Header/brand remains light */
.brand-mark{
  border:none !important;
  background:none !important;
  min-width:auto !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  color:#687078 !important;
  letter-spacing:.18em;
  font-size:18px;
}
.brand-name{
  letter-spacing:.38em !important;
  color:#444b52 !important;
}
body.dark-theme .brand-mark{color:#d4d8dc !important}
body.dark-theme .brand-name{color:#eef1f4 !important}

/* Hero editorial */
.v22-hero{
  padding-top:158px;
  min-height:100vh;
}
.v22-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.v22-hero-copy{
  position:relative;
  z-index:4;
}
.v22-hero h1{
  max-width:900px;
  font-size:clamp(62px,8.8vw,142px);
  line-height:.88;
  letter-spacing:-.075em;
}
.v22-hero h1 span{
  font-weight:300;
  color:#6d747b;
}
.v22-hero .lead{
  max-width:720px;
}

/* right board: thin editorial system, not heavy card */
.v22-signal-board{
  position:relative;
  z-index:3;
  min-height:540px;
  padding:30px;
  border:1px solid rgba(92,100,108,.12);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
  border-radius:0 0 120px 0;
  overflow:hidden;
}
.v22-signal-board::before,
.v22-signal-board::after{
  content:"";
  position:absolute;
  border:1px solid rgba(92,100,108,.10);
  border-radius:50%;
  pointer-events:none;
}
.v22-signal-board::before{
  width:420px;height:420px;right:-180px;bottom:-180px;
}
.v22-signal-board::after{
  width:180px;height:180px;left:34px;top:120px;
}
.v22-board-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#747c84;
}
.v22-board-head b{
  font-weight:450;
  color:#33383d;
}
.v22-board-line{
  height:1px;
  background:linear-gradient(90deg,rgba(70,76,82,.20),transparent);
  margin:28px 0 40px;
}
.v22-signal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  max-width:380px;
}
.v22-signal-grid span{
  min-height:74px;
  display:flex;
  align-items:flex-end;
  padding:14px 0;
  border-bottom:1px solid rgba(92,100,108,.14);
  color:#2d3338;
  font-size:22px;
  letter-spacing:-.035em;
}
.v22-board-orbit{
  position:absolute;
  right:38px;
  bottom:70px;
  width:190px;
  height:190px;
  border:1px solid rgba(92,100,108,.13);
  border-radius:50%;
}
.v22-board-orbit i{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:#8f969d;
}
.v22-board-orbit i:nth-child(1){right:28px;top:44px}
.v22-board-orbit i:nth-child(2){left:36px;bottom:42px;opacity:.6}
.v22-board-orbit i:nth-child(3){right:70px;bottom:18px;opacity:.35}
.v22-signal-board p{
  position:absolute;
  left:30px;
  bottom:30px;
  max-width:370px;
  color:#707780;
  line-height:1.65;
}

.v22-rail{
  border-top:1px solid rgba(92,100,108,.11);
  border-bottom:1px solid rgba(92,100,108,.11);
  background:rgba(255,255,255,.08);
}
.v22-rail-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.v22-rail span{
  color:#727a82;
  font-size:12px;
  letter-spacing:.30em;
  text-transform:uppercase;
}

/* Text sections */
.v22-two{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}
.v22-copy{
  border-left:1px solid rgba(92,100,108,.12);
  padding-left:34px;
}
.v22-copy p{
  color:#697179;
  line-height:1.75;
  margin:0 0 18px;
  max-width:720px;
}

/* Ecosystem line cards */
.v22-eco-lines{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid rgba(255,255,255,.11);
}
.v22-line-card{
  display:grid;
  grid-template-columns:110px .8fr 1fr;
  gap:28px;
  align-items:center;
  min-height:128px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.11);
  transition:background .3s ease, padding-left .3s ease;
}
.v22-line-card:hover{
  background:rgba(255,255,255,.035);
  padding-left:18px;
}
.v22-line-card b{
  color:#aeb5bb;
  font-size:12px;
  letter-spacing:.24em;
  font-weight:400;
}
.v22-line-card h3{
  font-size:clamp(28px,3.5vw,54px);
  margin:0;
  line-height:.95;
  letter-spacing:-.055em;
}
.v22-line-card p{
  color:#c4c9cd;
  margin:0;
  line-height:1.55;
  max-width:520px;
}

/* Services composition */
.v22-service-composition{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:54px;
  align-items:start;
}
.v22-service-title{
  position:sticky;
  top:130px;
}
.v22-service-list{
  border-top:1px solid rgba(92,100,108,.12);
}
.v22-service-list div{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:20px;
  align-items:center;
  min-height:96px;
  border-bottom:1px solid rgba(92,100,108,.12);
}
.v22-service-list span{
  color:#879099;
  font-size:12px;
  letter-spacing:.24em;
}
.v22-service-list b{
  font-size:clamp(22px,2.2vw,34px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:450;
}

/* Motion editorial */
.v22-motion-map{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(120px,auto);
  gap:16px;
}
.v22-video{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.035);
  min-height:220px;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.v22-video:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.052);
}
.v22-video-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.18;
  filter:saturate(.75) contrast(1.05);
}
.v22-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 12%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.28));
}
.v22-video-content{
  position:relative;
  z-index:2;
  height:100%;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.v22-video-content.row{
  flex-direction:row;
  align-items:flex-end;
  gap:30px;
}
.v22-video-content.center{
  align-items:center;
  text-align:center;
  justify-content:center;
}
.v22-video span,
.v22-motion-note b{
  color:#b6bdc3;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.v22-video h3{
  color:#fff;
  font-size:clamp(26px,3.2vw,52px);
  line-height:.94;
  letter-spacing:-.055em;
  margin:20px 0 0;
  max-width:700px;
}
.v22-video-main{
  grid-column:1 / span 7;
  min-height:460px;
  border-radius:0 0 150px 0;
}
.v22-video-arch{
  grid-column:8 / span 5;
  min-height:460px;
  border-radius:180px 180px 0 0;
}
.v22-video-thin{
  grid-column:1 / span 9;
  min-height:160px;
  border-radius:999px;
}
.v22-video-circle{
  grid-column:10 / span 3;
  min-height:260px;
  aspect-ratio:1;
  border-radius:50%;
}
.v22-video-split{
  grid-column:1 / span 5;
  min-height:280px;
  border-radius:0 90px 0 0;
}
.v22-motion-note{
  grid-column:6 / span 7;
  min-height:280px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.v22-motion-note p{
  color:#c4c9cd;
  max-width:560px;
  line-height:1.65;
  margin:16px 0 0;
}

/* Flow */
.v22-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(92,100,108,.12);
}
.v22-flow div{
  min-height:230px;
  padding:28px;
  border-right:1px solid rgba(92,100,108,.12);
  border-bottom:1px solid rgba(92,100,108,.12);
}
.v22-flow div:last-child{
  border-right:0;
}
.v22-flow span{
  color:#879099;
  font-size:12px;
  letter-spacing:.24em;
}
.v22-flow b{
  display:block;
  margin:52px 0 14px;
  font-size:26px;
  letter-spacing:-.04em;
}
.v22-flow p{
  color:#697179;
  line-height:1.6;
  margin:0;
}

.v22-cta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  padding:48px 0;
  border-top:1px solid rgba(92,100,108,.13);
  border-bottom:1px solid rgba(92,100,108,.13);
}

/* Dark */
body.dark-theme .v22-signal-board,
body.dark-theme .v22-video{
  background:rgba(255,255,255,.032);
  border-color:rgba(255,255,255,.10);
}
body.dark-theme .v22-signal-grid span,
body.dark-theme .v22-board-head b,
body.dark-theme .v22-service-list b,
body.dark-theme .v22-flow b{
  color:#f4f1ec;
}
body.dark-theme .v22-signal-board p,
body.dark-theme .v22-copy p,
body.dark-theme .v22-flow p{
  color:#c1c7cc;
}
body.dark-theme .v22-rail{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.09);
}
body.dark-theme .v22-service-list,
body.dark-theme .v22-service-list div,
body.dark-theme .v22-flow,
body.dark-theme .v22-flow div,
body.dark-theme .v22-cta{
  border-color:rgba(255,255,255,.10);
}

/* Responsive */
@media(max-width:1100px){
  .v22-hero-grid,
  .v22-two,
  .v22-service-composition{
    grid-template-columns:1fr;
  }
  .v22-service-title{
    position:relative;
    top:auto;
  }
  .v22-motion-map{
    grid-template-columns:repeat(2,1fr);
  }
  .v22-video-main,
  .v22-video-arch,
  .v22-video-thin,
  .v22-video-circle,
  .v22-video-split,
  .v22-motion-note{
    grid-column:auto;
    min-height:260px;
    aspect-ratio:auto;
  }
  .v22-video-thin{
    border-radius:32px;
  }
  .v22-video-circle{
    border-radius:0 80px 0 0;
  }
  .v22-flow{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:700px){
  .v22-hero{
    padding-top:132px;
  }
  .v22-hero h1{
    font-size:clamp(54px,18vw,86px);
  }
  .v22-signal-board{
    min-height:420px;
    border-radius:0 0 70px 0;
  }
  .v22-line-card{
    grid-template-columns:1fr;
    gap:14px;
    padding:24px 0;
  }
  .v22-service-list div{
    grid-template-columns:1fr;
    gap:10px;
    min-height:108px;
  }
  .v22-motion-map,
  .v22-flow{
    grid-template-columns:1fr;
  }
  .v22-video-main,
  .v22-video-arch,
  .v22-video-thin,
  .v22-video-circle,
  .v22-video-split{
    border-radius:0 52px 0 0;
    min-height:220px;
  }
  .v22-video-content.row{
    flex-direction:column;
    align-items:flex-start;
  }
  .v22-cta{
    display:block;
  }
  .v22-cta .btn{
    margin-top:24px;
  }
}


/* ===== SMPL v23: more of the circle language, still subtle and premium ===== */

/* More circle language in small UI pieces */
.kicker{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.55;
  flex:none;
}

/* Hero ring a touch more visible and with a soft outer orbit */
.sun-orbit{
  opacity:.22 !important;
}
.sun-orbit::before{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1px solid rgba(160,167,174,.18);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 26%);
}
body.dark-theme .sun-orbit{
  opacity:.16 !important;
}
body.dark-theme .sun-orbit::before{
  border-color:rgba(190,196,202,.10);
}

/* About section orbital cluster */
.v22-about .container{
  position:relative;
}
.v23-orbit-cluster{
  position:absolute;
  right:2%;
  top:16px;
  width:230px;
  height:230px;
  pointer-events:none;
  opacity:.65;
}
.v23-orbit-cluster span,
.v23-orbit-cluster i{
  position:absolute;
  inset:auto;
  border-radius:50%;
}
.v23-orbit-cluster span:nth-child(1){
  width:230px;height:230px;right:0;top:0;
  border:1px solid rgba(116,124,132,.12);
  clip-path:polygon(0 0,100% 0,100% 100%,14% 100%,0 72%);
}
.v23-orbit-cluster span:nth-child(2){
  width:150px;height:150px;right:26px;top:38px;
  border:1px solid rgba(116,124,132,.10);
}
.v23-orbit-cluster span:nth-child(3){
  width:70px;height:70px;right:68px;top:78px;
  border:1px solid rgba(116,124,132,.10);
}
.v23-orbit-cluster i{
  width:8px;height:8px;right:86px;top:176px;
  background:#b8bec5;
  box-shadow:0 0 0 8px rgba(255,255,255,.08);
}
body.dark-theme .v23-orbit-cluster span{
  border-color:rgba(190,196,202,.10);
}
body.dark-theme .v23-orbit-cluster i{
  background:#a7afb7;
  box-shadow:0 0 0 8px rgba(255,255,255,.03);
}

/* Rail with tiny orbit markers */
.v22-rail span{
  position:relative;
  padding-left:18px;
}
.v22-rail span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  border:1px solid currentColor;
  transform:translateY(-50%);
  opacity:.35;
}

/* Ecosystem line cards: subtle ring accent on the right */
.v22-line-card{
  position:relative;
  padding-right:130px;
}
.v22-line-card::before{
  content:"";
  position:absolute;
  right:30px;
  top:50%;
  width:72px;
  height:72px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
  transform:translateY(-50%);
  clip-path:polygon(0 0,100% 0,100% 100%,16% 100%,0 68%);
  transition:transform .35s ease, border-color .35s ease;
}
.v22-line-card::after{
  content:"";
  position:absolute;
  right:59px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b8bec5;
  transform:translateY(14px);
  opacity:.75;
  transition:transform .35s ease, opacity .35s ease;
}
.v22-line-card:hover::before{
  transform:translateY(-50%) rotate(9deg);
  border-color:rgba(255,255,255,.22);
}
.v22-line-card:hover::after{
  transform:translateY(6px);
  opacity:1;
}

/* Service list with circle markers rather than plain rows */
.v22-service-list div{
  position:relative;
  padding-right:88px;
}
.v22-service-list div::before{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(92,100,108,.12);
  transform:translateY(-50%);
}
.v22-service-list div::after{
  content:"";
  position:absolute;
  right:40px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a9b0b7;
  transform:translateY(-50%);
}
body.dark-theme .v22-service-list div::before{
  border-color:rgba(255,255,255,.11);
}
body.dark-theme .v22-service-list div::after{
  background:#b2b9c1;
}

/* Motion section gets more orbit language but stays clean */
.v22-motion-section .container{
  position:relative;
}
.v22-motion-map{
  position:relative;
}
.v22-motion-map::before{
  content:"";
  position:absolute;
  right:-40px;
  top:-34px;
  width:220px;
  height:220px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 38%);
  pointer-events:none;
}
.v22-video{
  background:rgba(255,255,255,.028);
}
.v22-video-main::before,
.v22-video-arch::before,
.v22-video-split::before,
.v22-video-circle::before{
  content:"";
  position:absolute;
  z-index:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.v22-video-main::before{
  width:180px;height:180px;right:-48px;bottom:-52px;
}
.v22-video-arch::before{
  width:120px;height:120px;left:18px;bottom:18px;
}
.v22-video-split::before{
  width:120px;height:120px;right:-18px;top:-18px;
}
.v22-video-circle::before{
  width:76%;height:76%;left:12%;top:12%;
  border-color:rgba(255,255,255,.18);
}
.v22-video-thin{
  position:relative;
}
.v22-video-thin .v22-video-content::after{
  content:"";
  position:absolute;
  right:24px;
  top:50%;
  width:74px;
  height:74px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  transform:translateY(-50%);
}
.v22-motion-note{
  position:relative;
}
.v22-motion-note::before{
  content:"";
  position:absolute;
  right:0;
  bottom:18px;
  width:92px;
  height:92px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
  clip-path:polygon(0 0,100% 0,100% 100%,24% 100%,0 74%);
}

/* CTA: one clean orbit accent */
.v22-cta{
  position:relative;
  padding-right:120px;
}
.v22-cta::after{
  content:"";
  position:absolute;
  right:6px;
  top:50%;
  width:84px;
  height:84px;
  border-radius:50%;
  border:1px solid rgba(92,100,108,.12);
  transform:translateY(-50%);
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 36%);
}
body.dark-theme .v22-cta::after{
  border-color:rgba(255,255,255,.11);
}

/* keep it subtle on smaller screens */
@media(max-width:1100px){
  .v23-orbit-cluster{
    width:170px;height:170px;right:0;top:-10px;opacity:.45;
  }
  .v22-line-card{
    padding-right:92px;
  }
  .v22-line-card::before{
    width:54px;height:54px;right:18px;
  }
  .v22-line-card::after{
    right:41px;
  }
}
@media(max-width:700px){
  .v23-orbit-cluster{
    display:none;
  }
  .v22-line-card,
  .v22-service-list div,
  .v22-cta{
    padding-right:0;
  }
  .v22-line-card::before,
  .v22-line-card::after,
  .v22-service-list div::before,
  .v22-service-list div::after,
  .v22-motion-map::before,
  .v22-video-main::before,
  .v22-video-arch::before,
  .v22-video-split::before,
  .v22-video-circle::before,
  .v22-video-thin .v22-video-content::after,
  .v22-motion-note::before,
  .v22-cta::after{
    display:none;
  }
}


/* ===== SMPL v24: airy editorial ecosystem, less sweetness/heavy blocks ===== */

/* Remove the old dark panel feeling around ecosystem if any older styles affect it */
.v24-ecosystem-light{
  position:relative;
  padding-top:120px;
  padding-bottom:120px;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
.v24-ecosystem-light::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,98,106,.12), transparent);
}
.v24-ecosystem-light::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,98,106,.10), transparent);
}
.v24-eco-head{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:56px;
  align-items:end;
  margin-bottom:48px;
}
.v24-eco-head h2{
  margin:0;
  max-width:760px;
}
.v24-eco-head p{
  color:#697179;
  line-height:1.7;
  margin:0;
  max-width:560px;
}

/* Airy grid instead of heavy dark rectangle */
.v24-eco-layout{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  border-top:1px solid rgba(90,98,106,.12);
}
.v24-eco-item{
  position:relative;
  min-height:220px;
  color:inherit;
  padding:28px 28px 32px 0;
  border-bottom:1px solid rgba(90,98,106,.12);
  display:grid;
  grid-template-rows:auto 1fr auto;
  transition:padding-left .32s ease, background .32s ease, color .32s ease;
}
.v24-eco-item:nth-child(1){grid-column:1 / span 5;}
.v24-eco-item:nth-child(2){grid-column:6 / span 4;}
.v24-eco-item:nth-child(3){grid-column:10 / span 3;}
.v24-eco-item:nth-child(4){grid-column:1 / span 6; border-right:1px solid rgba(90,98,106,.10);}
.v24-eco-item:nth-child(5){grid-column:7 / span 6; padding-left:28px;}
.v24-eco-item:hover{
  padding-left:18px;
  background:linear-gradient(90deg, rgba(255,255,255,.22), transparent);
}
.v24-eco-item span{
  color:#8a929a;
  font-size:12px;
  letter-spacing:.26em;
  font-weight:400;
}
.v24-eco-item h3{
  align-self:center;
  font-size:clamp(34px,4.8vw,76px);
  line-height:.86;
  letter-spacing:-.07em;
  margin:34px 0;
  font-weight:540;
}
.v24-eco-item p{
  color:#687079;
  line-height:1.55;
  max-width:420px;
  margin:0;
}
.v24-eco-item i{
  position:absolute;
  right:28px;
  top:28px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(90,98,106,.12);
}
.v24-eco-item i::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  right:12px;
  bottom:10px;
  border-radius:50%;
  background:#aab1b8;
}

/* Large empty orbit as design element, not a card */
.v24-eco-orbit{
  grid-column:9 / span 4;
  grid-row:2;
  position:absolute;
  right:0;
  bottom:40px;
  width:280px;
  height:280px;
  pointer-events:none;
  opacity:.58;
}
.v24-eco-orbit span,
.v24-eco-orbit b{
  position:absolute;
  border-radius:50%;
}
.v24-eco-orbit span:nth-child(1){
  inset:0;
  border:1px solid rgba(90,98,106,.12);
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 32%);
}
.v24-eco-orbit span:nth-child(2){
  inset:42px;
  border:1px solid rgba(90,98,106,.09);
}
.v24-eco-orbit span:nth-child(3){
  inset:102px;
  border:1px solid rgba(90,98,106,.08);
}
.v24-eco-orbit b{
  right:92px;
  bottom:52px;
  width:8px;
  height:8px;
  background:#b3bac1;
  box-shadow:0 0 0 8px rgba(255,255,255,.06);
}

/* Small motion strip: light blocks, not cards */
.v24-micro-motion{
  padding:38px 0;
  border-top:1px solid rgba(90,98,106,.10);
  border-bottom:1px solid rgba(90,98,106,.10);
}
.v24-micro-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  gap:0;
}
.v24-micro-title,
.v24-micro-slot{
  min-height:116px;
  padding:22px 26px;
  border-right:1px solid rgba(90,98,106,.10);
  position:relative;
}
.v24-micro-title{
  padding-left:0;
}
.v24-micro-title span{
  display:block;
  color:#889099;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.v24-micro-title b{
  display:block;
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.04em;
  max-width:420px;
}
.v24-micro-slot em{
  display:block;
  color:#8a929a;
  font-style:normal;
  font-size:11px;
  letter-spacing:.24em;
  margin-bottom:24px;
}
.v24-micro-slot p{
  color:#687079;
  line-height:1.45;
  margin:0;
  max-width:240px;
}
.v24-micro-slot i{
  position:absolute;
  right:18px;
  top:22px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(90,98,106,.12);
}
.v24-micro-slot i::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  right:9px;
  bottom:9px;
  border-radius:50%;
  background:#aab1b8;
}

/* Tone down the darker motion block slightly so ecosystem doesn't feel followed by another heavy thing */
.v22-motion-section{
  border-radius:0 !important;
  margin-top:0 !important;
}
.v22-video{
  background:rgba(255,255,255,.026) !important;
  border-color:rgba(255,255,255,.09) !important;
}
.v22-video:hover{
  background:rgba(255,255,255,.04) !important;
}

/* Dark theme for new airy blocks */
body.dark-theme .v24-ecosystem-light::before,
body.dark-theme .v24-ecosystem-light::after,
body.dark-theme .v24-eco-layout,
body.dark-theme .v24-eco-item,
body.dark-theme .v24-micro-motion,
body.dark-theme .v24-micro-title,
body.dark-theme .v24-micro-slot{
  border-color:rgba(255,255,255,.10);
}
body.dark-theme .v24-eco-head p,
body.dark-theme .v24-eco-item p,
body.dark-theme .v24-micro-slot p{
  color:#c1c7cc;
}
body.dark-theme .v24-eco-item:hover{
  background:linear-gradient(90deg, rgba(255,255,255,.035), transparent);
}
body.dark-theme .v24-eco-item i,
body.dark-theme .v24-eco-orbit span,
body.dark-theme .v24-micro-slot i{
  border-color:rgba(255,255,255,.11);
}
body.dark-theme .v24-eco-item i::after,
body.dark-theme .v24-eco-orbit b,
body.dark-theme .v24-micro-slot i::after{
  background:#b4bbc2;
}
body.dark-theme .v24-micro-title b{
  color:#f4f1ec;
}

/* Responsive */
@media(max-width:1100px){
  .v24-eco-head{
    grid-template-columns:1fr;
    gap:20px;
  }
  .v24-eco-layout{
    grid-template-columns:1fr;
  }
  .v24-eco-item,
  .v24-eco-item:nth-child(1),
  .v24-eco-item:nth-child(2),
  .v24-eco-item:nth-child(3),
  .v24-eco-item:nth-child(4),
  .v24-eco-item:nth-child(5){
    grid-column:1;
    min-height:170px;
    border-right:0;
    padding-left:0;
  }
  .v24-eco-item:nth-child(5){
    padding-left:0;
  }
  .v24-eco-orbit{
    display:none;
  }
  .v24-micro-grid{
    grid-template-columns:1fr 1fr;
  }
  .v24-micro-title{
    grid-column:1 / -1;
    border-bottom:1px solid rgba(90,98,106,.10);
  }
}
@media(max-width:640px){
  .v24-ecosystem-light{
    padding-top:80px;
    padding-bottom:80px;
  }
  .v24-eco-item{
    padding-right:72px;
  }
  .v24-eco-item h3{
    font-size:44px;
  }
  .v24-eco-item i{
    right:0;
    width:44px;
    height:44px;
  }
  .v24-micro-grid{
    grid-template-columns:1fr;
  }
  .v24-micro-title,
  .v24-micro-slot{
    border-right:0;
    border-bottom:1px solid rgba(90,98,106,.10);
    padding-left:0;
  }
}


/* ===== SMPL v25: dark sections reframed — still standout, but not heavy blocks ===== */

/* All dark sections: no more chunky isolated rectangle feel */
.section.dark{
  position:relative;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.section.dark > .container{
  position:relative;
  z-index:2;
}
.section.dark::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 84% 10%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.04), transparent 22%),
    linear-gradient(180deg, #0b0f13 0%, #10151a 48%, #0b1014 100%);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.section.dark::after{
  content:"";
  position:absolute;
  right:-80px;
  top:60px;
  width:320px;
  height:320px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 38%);
  pointer-events:none;
  opacity:.65;
}

/* Headings inside dark sections feel more editorial, less “card on card” */
.section.dark .section-head{
  position:relative;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:56px;
  align-items:end;
  padding-left:28px;
  margin-bottom:38px;
}
.section.dark .section-head::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 0 0 10px rgba(255,255,255,.02);
}
.section.dark .section-head p{
  color:#c6cbd0 !important;
}
.section.dark .kicker{
  color:#b8bec4 !important;
}
.section.dark h2{
  color:#f4f1ec !important;
}

/* Motion section specifically: stage / rail feeling instead of heavy block */
.v22-motion-section{
  padding-top:120px;
  padding-bottom:120px;
}
.v22-motion-section::before{
  background:
    linear-gradient(180deg, #0b0f13 0%, #10141a 42%, #0b1014 100%),
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.06), transparent 22%);
}
.v22-motion-section .container::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-24px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity:.7;
}
.v22-motion-section .container::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-24px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity:.6;
}

/* Videos: more like framed windows on a dark stage, less chunky cards */
.v22-video{
  background:rgba(255,255,255,.018) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.v22-video:hover{
  background:rgba(255,255,255,.028) !important;
  border-color:rgba(255,255,255,.16) !important;
}
.v22-video::after{
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.06), transparent 20%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.24)) !important;
}
.v22-video-content{
  padding:26px;
}
.v22-video-content span{
  color:#bcc2c8;
}
.v22-video h3{
  color:#f4f1ec;
}
.v22-video-main{
  border-radius:0 0 120px 0 !important;
}
.v22-video-arch{
  border-radius:140px 140px 0 0 !important;
}
.v22-video-thin{
  border-radius:999px !important;
}
.v22-video-circle{
  border-radius:50% !important;
}
.v22-video-split{
  border-radius:0 70px 0 0 !important;
}
.v22-motion-note{
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.v22-motion-note p{
  color:#c6cbd0 !important;
}

/* Generic dark blocks if they appear elsewhere */
.section.dark .card,
.section.dark .step,
.section.dark .service,
.section.dark .contact-card,
.section.dark .form-card,
.section.dark .stat,
.section.dark .value{
  background:rgba(255,255,255,.028) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}

/* Footer also a touch lighter to match the new dark-language */
.footer{
  border-top:1px solid rgba(92,100,108,.10);
}
body.dark-theme .footer{
  border-top-color:rgba(255,255,255,.10);
}

/* Responsive */
@media(max-width:1100px){
  .section.dark .section-head{
    grid-template-columns:1fr;
    gap:18px;
  }
}
@media(max-width:700px){
  .section.dark::after{
    width:190px;
    height:190px;
    right:-60px;
    top:34px;
  }
  .section.dark .section-head{
    padding-left:20px;
  }
  .section.dark .section-head::before{
    width:10px;
    height:10px;
  }
  .v22-motion-section{
    padding-top:90px;
    padding-bottom:90px;
  }
}


/* ===== SMPL v26: no heavy dark blocks — contrast through lines, type and negative space ===== */

/*
  Вместо больших тёмных прямоугольников:
  - светлая editorial-сцена;
  - тонкие линии;
  - крупная типографика;
  - маленькие тёмные акценты;
  - motion-окна как рамки, а не тяжёлые карточки.
*/

/* Global: dark sections no longer become giant dark boxes */
.section.dark{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:inherit !important;
  overflow:visible !important;
  position:relative;
}
.section.dark::before{
  display:none !important;
}
.section.dark::after{
  display:none !important;
}
.section.dark h2,
.section.dark h3{
  color:#1f2327 !important;
}
.section.dark .section-head p,
.section.dark p{
  color:#687079 !important;
}
.section.dark .kicker{
  color:#7c858d !important;
}
.section.dark > .container{
  position:relative;
}
.section.dark > .container::before,
.section.dark > .container::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,98,106,.16), transparent);
  pointer-events:none;
}
.section.dark > .container::before{ top:-42px; }
.section.dark > .container::after{ bottom:-42px; }

/* Dark section headers as editorial split, not panel */
.section.dark .section-head{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:56px;
  align-items:end;
  padding:0 0 34px !important;
  margin-bottom:34px !important;
  border-bottom:1px solid rgba(90,98,106,.12);
}
.section.dark .section-head::before{
  display:none !important;
}
.section.dark .section-head h2{
  max-width:780px;
}
.section.dark .section-head .kicker::before{
  background:#1f2327;
  border-color:#1f2327;
}

/* Use small black labels instead of dark boxes */
.v22-motion-section .kicker,
.v24-ecosystem-light .kicker,
.v22-process .kicker{
  color:#1f2327 !important;
}
.v22-motion-section .kicker::before,
.v24-ecosystem-light .kicker::before,
.v22-process .kicker::before{
  background:#1f2327;
  border-color:#1f2327;
}

/* Motion section: transparent editorial gallery */
.v22-motion-section{
  padding-top:120px !important;
  padding-bottom:120px !important;
}
.v22-motion-section .container::before,
.v22-motion-section .container::after{
  opacity:.9;
}

/* Motion windows: no heavy black fill, mostly line frames */
.v22-video{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(90,98,106,.13) !important;
  box-shadow:none !important;
  color:#1f2327 !important;
  backdrop-filter:none !important;
}
.v22-video:hover{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(90,98,106,.24) !important;
}
.v22-video-bg{
  opacity:.10 !important;
  filter:grayscale(.2) saturate(.75) contrast(1.05) !important;
}
.v22-video::after{
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.28), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) !important;
}
.v22-video-content span,
.v22-motion-note b{
  color:#7f8890 !important;
}
.v22-video h3{
  color:#1f2327 !important;
}
.v22-video-content{
  padding:26px !important;
}

/* Make shapes more editorial / varied */
.v22-video-main{
  border-radius:0 0 120px 0 !important;
  min-height:430px;
}
.v22-video-arch{
  border-radius:160px 160px 0 0 !important;
  min-height:430px;
}
.v22-video-thin{
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  min-height:148px;
}
.v22-video-circle{
  border-radius:50% !important;
  background:transparent !important;
}
.v22-video-split{
  border-radius:0 82px 0 0 !important;
}

/* Add dark micro accents inside motion instead of dark block */
.v22-video-main::before{
  content:"";
  position:absolute;
  left:26px;
  bottom:26px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#1f2327;
  z-index:2;
}
.v22-video-arch::before{
  content:"";
  position:absolute;
  right:28px;
  top:34px;
  width:72px;
  height:72px;
  border-radius:50%;
  border:1px solid rgba(31,35,39,.16);
  z-index:2;
}
.v22-video-thin::before{
  content:"";
  position:absolute;
  left:26px;
  top:50%;
  width:110px;
  height:1px;
  background:rgba(31,35,39,.28);
  z-index:2;
}
.v22-video-circle::before{
  content:"";
  position:absolute;
  inset:13%;
  border-radius:50%;
  border:1px solid rgba(31,35,39,.14);
  z-index:2;
}
.v22-video-split::before{
  content:"";
  position:absolute;
  right:26px;
  bottom:26px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1f2327;
  z-index:2;
}

/* Motion note: no block, just text on lines */
.v22-motion-note{
  border-top:1px solid rgba(90,98,106,.13) !important;
  border-bottom:1px solid rgba(90,98,106,.13) !important;
  background:transparent !important;
}
.v22-motion-note p{
  color:#687079 !important;
}
.v22-motion-note::before{
  border-color:rgba(90,98,106,.12) !important;
}

/* Existing small motion strip: make it even more like thin interface */
.v24-micro-motion{
  background:transparent !important;
}
.v24-micro-slot,
.v24-micro-title{
  background:transparent !important;
}
.v24-micro-slot:hover{
  background:rgba(255,255,255,.16) !important;
}

/* Ecosystem airy section: remove dark/sweet feeling completely */
.v24-ecosystem-light{
  background:transparent !important;
}
.v24-eco-item:hover{
  background:linear-gradient(90deg, rgba(31,35,39,.035), transparent) !important;
}
.v24-eco-item h3{
  font-weight:520;
}
.v24-eco-item i{
  border-color:rgba(31,35,39,.12) !important;
}
.v24-eco-item i::after{
  background:#1f2327 !important;
  opacity:.65;
}

/* Flow/process also not as card-like */
.v22-flow{
  border-top:1px solid rgba(90,98,106,.13) !important;
}
.v22-flow div{
  border-color:rgba(90,98,106,.11) !important;
  background:transparent !important;
}
.v22-flow div:hover{
  background:rgba(255,255,255,.14) !important;
}

/* CTA stays line-based */
.v22-cta{
  background:transparent !important;
  border-top:1px solid rgba(90,98,106,.14) !important;
  border-bottom:1px solid rgba(90,98,106,.14) !important;
}

/* Dark theme: still works, but dark sections don't become blocky */
body.dark-theme .section.dark h2,
body.dark-theme .section.dark h3,
body.dark-theme .v22-video h3,
body.dark-theme .v22-service-list b,
body.dark-theme .v22-flow b{
  color:#f4f1ec !important;
}
body.dark-theme .section.dark p,
body.dark-theme .section.dark .section-head p,
body.dark-theme .v22-motion-note p{
  color:#c1c7cc !important;
}
body.dark-theme .section.dark .kicker,
body.dark-theme .v22-motion-section .kicker{
  color:#b8bec4 !important;
}
body.dark-theme .section.dark > .container::before,
body.dark-theme .section.dark > .container::after,
body.dark-theme .section.dark .section-head,
body.dark-theme .v22-video,
body.dark-theme .v22-motion-note,
body.dark-theme .v22-flow,
body.dark-theme .v22-flow div,
body.dark-theme .v22-cta{
  border-color:rgba(255,255,255,.10) !important;
}
body.dark-theme .v22-video{
  background:rgba(255,255,255,.018) !important;
}
body.dark-theme .v22-video:hover{
  background:rgba(255,255,255,.036) !important;
}
body.dark-theme .v22-video::after{
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.16)) !important;
}
body.dark-theme .v22-video-content span,
body.dark-theme .v22-motion-note b{
  color:#b6bdc3 !important;
}
body.dark-theme .v22-video-main::before,
body.dark-theme .v22-video-split::before,
body.dark-theme .section.dark .kicker::before,
body.dark-theme .v22-motion-section .kicker::before{
  background:#f4f1ec !important;
  border-color:#f4f1ec !important;
}
body.dark-theme .v22-video-arch::before,
body.dark-theme .v22-video-circle::before,
body.dark-theme .v24-eco-item i{
  border-color:rgba(255,255,255,.13) !important;
}
body.dark-theme .v22-video-thin::before{
  background:rgba(255,255,255,.22);
}

/* Responsive */
@media(max-width:1100px){
  .section.dark .section-head{
    grid-template-columns:1fr;
    gap:18px;
  }
}
@media(max-width:700px){
  .v22-video-main,
  .v22-video-arch,
  .v22-video-thin,
  .v22-video-circle,
  .v22-video-split{
    border-radius:0 46px 0 0 !important;
    min-height:220px;
  }
  .v22-video-thin{
    border-left:1px solid rgba(90,98,106,.13) !important;
    border-right:1px solid rgba(90,98,106,.13) !important;
  }
  .v22-video-circle{
    border-radius:50% !important;
    min-height:260px;
  }
}


/* ===== SMPL v27: single logo-like rings + accordion services ===== */

/* No circle-in-circle. Only single open rings with one dot. */
.sun-orbit::before{display:none !important;}
.v22-board-orbit{
  width:170px !important;
  height:170px !important;
  border:1px solid rgba(92,100,108,.13) !important;
  border-radius:50%;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 36%);
}
.v22-board-orbit i:nth-child(2),
.v22-board-orbit i:nth-child(3){display:none !important;}
.v22-board-orbit i:nth-child(1){
  right:28px !important;
  top:auto !important;
  bottom:22px !important;
}

.v23-orbit-cluster span:nth-child(2),
.v23-orbit-cluster span:nth-child(3){display:none !important;}
.v23-orbit-cluster{
  width:190px !important;
  height:190px !important;
}
.v23-orbit-cluster span:nth-child(1){
  width:190px !important;
  height:190px !important;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 34%) !important;
}
.v23-orbit-cluster i{
  right:74px !important;
  top:auto !important;
  bottom:26px !important;
}

.v24-eco-orbit span:nth-child(2),
.v24-eco-orbit span:nth-child(3){display:none !important;}
.v24-eco-orbit{
  width:220px !important;
  height:220px !important;
  opacity:.48 !important;
}
.v24-eco-orbit span:nth-child(1){
  inset:0 !important;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 34%) !important;
}
.v24-eco-orbit b{
  right:64px !important;
  bottom:28px !important;
}

.v22-video-circle::before{display:none !important;}
.v22-motion-map::before{display:none !important;}
.v22-motion-note::before{
  width:74px !important;
  height:74px !important;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 34%) !important;
}
.v22-cta::after{
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 34%) !important;
}
.v22-line-card::before,
.v22-service-list div::before,
.v24-micro-slot i{
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 34%);
}

/* Home services accordion */
.v27-service-intro{
  margin:18px 0 0;
  color:#697179;
  line-height:1.7;
  max-width:360px;
}
.v27-accordion,
.v27-page-accordion{
  border-top:1px solid rgba(90,98,106,.12);
}
.v27-acc-item{
  border-bottom:1px solid rgba(90,98,106,.12);
}
.v27-acc-trigger{
  width:100%;
  border:0;
  background:none;
  text-align:left;
  padding:0;
  display:grid;
  grid-template-columns:78px 1fr 70px;
  gap:22px;
  align-items:center;
  min-height:98px;
  cursor:pointer;
  color:inherit;
}
.v27-acc-num{
  color:#8a929a;
  font-size:12px;
  letter-spacing:.26em;
}
.v27-acc-title{
  font-size:clamp(22px,2.4vw,34px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:450;
}
.v27-acc-ring{
  justify-self:end;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid rgba(92,100,108,.14);
  position:relative;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 34%);
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.v27-acc-ring::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  right:11px;
  bottom:10px;
  background:#aab1b8;
  transition:transform .3s ease, opacity .3s ease;
}
.v27-acc-item.is-open .v27-acc-ring{
  transform:rotate(18deg);
  border-color:rgba(92,100,108,.24);
}
.v27-acc-item.is-open .v27-acc-ring::after{
  transform:translate(-3px,-6px);
}

.v27-acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s ease;
}
.v27-acc-item.is-open .v27-acc-panel{
  grid-template-rows:1fr;
}
.v27-acc-inner{
  overflow:hidden;
  padding:0 0 0 100px;
}
.v27-acc-item.is-open .v27-acc-inner{
  padding-bottom:24px;
}
.v27-acc-inner p{
  margin:0 0 12px;
  max-width:680px;
  color:#697179;
  line-height:1.7;
}
.v27-acc-inner ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 22px;
  max-width:760px;
}
.v27-acc-inner li{
  position:relative;
  padding-left:18px;
  color:#5f6770;
  line-height:1.5;
}
.v27-acc-inner li::before{
  content:"";
  position:absolute;
  left:0;
  top:.56em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1f2327;
  opacity:.58;
}

.v27-page-accordion{
  max-width:1100px;
}

/* Keep services area light and premium */
.v22-services{
  padding-top:120px;
}
.v22-service-composition{
  align-items:start !important;
}

/* Services page accordion inherits same style with a little more spacing */
.page-hero + .section .v27-page-accordion .v27-acc-trigger{
  min-height:108px;
}
.page-hero + .section .v27-page-accordion .v27-acc-title{
  font-size:clamp(24px,2.5vw,36px);
}

/* Dark theme support */
body.dark-theme .v27-service-intro,
body.dark-theme .v27-acc-inner p,
body.dark-theme .v27-acc-inner li{
  color:#c1c7cc;
}
body.dark-theme .v27-accordion,
body.dark-theme .v27-page-accordion,
body.dark-theme .v27-acc-item{
  border-color:rgba(255,255,255,.10);
}
body.dark-theme .v27-acc-num{color:#b1b8bf;}
body.dark-theme .v27-acc-title{color:#f4f1ec;}
body.dark-theme .v27-acc-ring{
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .v27-acc-item.is-open .v27-acc-ring{
  border-color:rgba(255,255,255,.26);
}
body.dark-theme .v27-acc-ring::after,
body.dark-theme .v27-acc-inner li::before{
  background:#f4f1ec;
  opacity:.65;
}

/* Responsive */
@media(max-width:900px){
  .v27-acc-trigger{
    grid-template-columns:56px 1fr 56px;
    gap:16px;
    min-height:86px;
  }
  .v27-acc-inner{
    padding-left:72px;
  }
}
@media(max-width:640px){
  .v27-acc-trigger{
    grid-template-columns:1fr 44px;
    gap:14px;
    min-height:78px;
  }
  .v27-acc-num{
    grid-column:1;
    display:block;
    margin-bottom:4px;
  }
  .v27-acc-title{
    grid-column:1;
    font-size:24px;
  }
  .v27-acc-ring{
    grid-column:2;
    grid-row:1 / span 2;
    width:42px;
    height:42px;
  }
  .v27-acc-inner{
    padding-left:0;
  }
  .v27-acc-inner ul{
    grid-template-columns:1fr;
  }
}



/* ===== SMPL v28: freer pull-cord + premium custom cursor ===== */

/* Pull cord: freer, softer, more physical */
:root{
  --cord-scale: 1;
  --pull-x: 0px;
  --pull-y: 0px;
  --pull-rot: 0deg;
}

.pull-cord{
  top: -4px;
  right: 10px;
  width: 124px;
  height: 410px;
  opacity: 1;
  z-index: 180;
}
.cord-anchor{
  width: 14px;
  height: 18px;
  background: rgba(92,98,104,.42);
  box-shadow:
    0 6px 20px rgba(0,0,0,.12),
    inset 0 -2px 4px rgba(255,255,255,.12);
}
.cord-svg{
  top: 8px;
  left: 4px;
  width: 116px;
  height: 344px;
  overflow: visible;
}
.cord-line{
  stroke: rgba(92,98,104,.58);
  stroke-width: 1.65;
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,.14))
    drop-shadow(0 0 6px rgba(255,255,255,.08));
}
.cord-handle{
  top: 270px;
  width: 44px;
  height: 44px;
  transform: translate(calc(-50% + var(--pull-x)), var(--pull-y)) rotate(var(--pull-rot)) scale(var(--cord-scale));
  border: 1px solid rgba(83,90,97,.34);
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.92), rgba(255,255,255,.68) 55%, rgba(226,229,232,.72) 100%);
  backdrop-filter: blur(14px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition:
    background var(--theme-speed) var(--theme-ease),
    border-color var(--theme-speed) var(--theme-ease),
    box-shadow var(--theme-speed) var(--theme-ease),
    transform .14s ease;
}
.cord-handle::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  opacity:0;
  transform:scale(.82);
  transition:opacity .18s ease, transform .22s ease;
}
.cord-handle::after{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 66%);
  opacity:0;
  transform:scale(.72);
  transition:opacity .22s ease, transform .3s ease;
  pointer-events:none;
}
.cord-handle span{
  width: 12px;
  height: 12px;
  border: 1px solid rgba(89,96,103,.46);
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}
.cord-hint{
  top: 324px;
  letter-spacing: .28em;
  font-size: 9px;
  color: rgba(92,98,105,.5);
}
.pull-cord:not(.pulling) .cord-handle{
  animation: cordIdleFree 3.8s ease-in-out infinite;
}
@keyframes cordIdleFree{
  0%,100%{
    transform: translate(calc(-50% + var(--pull-x)), var(--pull-y)) rotate(var(--pull-rot)) scale(var(--cord-scale));
  }
  25%{
    transform: translate(calc(-50% + var(--pull-x) - 1px), calc(var(--pull-y) + 2px)) rotate(calc(var(--pull-rot) - 1.4deg)) scale(var(--cord-scale));
  }
  50%{
    transform: translate(calc(-50% + var(--pull-x) + 1px), calc(var(--pull-y) + 6px)) rotate(calc(var(--pull-rot) + 2.4deg)) scale(var(--cord-scale));
  }
  75%{
    transform: translate(calc(-50% + var(--pull-x) + 2px), calc(var(--pull-y) + 2px)) rotate(calc(var(--pull-rot) + .8deg)) scale(var(--cord-scale));
  }
}
.pull-cord.pulling .cord-handle{
  animation:none;
  box-shadow:
    0 26px 58px rgba(0,0,0,.24),
    0 0 0 12px rgba(255,255,255,.18);
}
.pull-cord.pulling .cord-handle::before{
  opacity:.9;
  transform:scale(1);
}
.pull-cord.ready .cord-line{
  stroke: rgba(136,143,150,.94);
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 30px 64px rgba(0,0,0,.26),
    0 0 0 14px rgba(255,255,255,.16),
    0 0 34px rgba(255,255,255,.34);
}
.pull-cord.ready .cord-handle::after{
  opacity:1;
  transform:scale(1.05);
}
.pull-cord.clicked .cord-handle{
  --cord-scale: .9;
}
.pull-cord.clicked .cord-handle::before{
  opacity:1;
  transform:scale(1.14);
}
.pull-cord.clicked .cord-handle::after{
  opacity:1;
  transform:scale(1.26);
}
body.dark-theme .cord-anchor{
  background: rgba(255,255,255,.18);
}
body.dark-theme .cord-line{
  stroke: rgba(224,228,232,.44);
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,.42))
    drop-shadow(0 0 6px rgba(255,255,255,.04));
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.18), rgba(255,255,255,.1) 55%, rgba(255,255,255,.08) 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 16px 42px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.15);
}
body.dark-theme .cord-handle span{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
body.dark-theme .cord-hint{
  color: rgba(224,228,232,.42);
}
body.dark-theme .pull-cord.ready .cord-handle{
  box-shadow:
    0 30px 64px rgba(0,0,0,.5),
    0 0 0 14px rgba(255,255,255,.07),
    0 0 30px rgba(255,255,255,.12);
}

/* Premium custom cursor */
.cursor-core,
.cursor-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:220;
  opacity:0;
  transition:
    opacity .18s ease,
    transform .18s ease,
    width .2s ease,
    height .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
  mix-blend-mode:normal;
}
.cursor-core{
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:#1f2327;
  box-shadow:0 0 0 4px rgba(255,255,255,.18);
}
.cursor-ring{
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1px solid rgba(92,100,108,.34);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
}
.cursor-ring::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:conic-gradient(from 218deg,
    transparent 0deg 34deg,
    rgba(92,100,108,.5) 34deg 320deg,
    transparent 320deg 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 62%, #000 64%);
  mask: radial-gradient(circle at center, transparent 62%, #000 64%);
  opacity:.86;
}
.cursor-ring::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  right:5px;
  bottom:6px;
  border-radius:50%;
  background:rgba(92,100,108,.86);
}
body.cursor-ready,
body.cursor-ready a,
body.cursor-ready button,
body.cursor-ready .btn,
body.cursor-ready input,
body.cursor-ready textarea,
body.cursor-ready select,
body.cursor-ready [role="button"],
body.cursor-ready .v27-acc-trigger{
  cursor:none !important;
}
body.cursor-ready .cursor-core,
body.cursor-ready .cursor-ring{
  opacity:1;
}
body.cursor-hover .cursor-ring{
  width:52px;
  height:52px;
  margin:-26px 0 0 -26px;
  border-color:rgba(92,100,108,.52);
  transform:translateZ(0) rotate(22deg);
}
body.cursor-hover .cursor-core{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
}
body.cursor-press .cursor-ring{
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
}
body.cursor-press .cursor-core{
  transform:scale(.8);
}
body.dark-theme .cursor-core{
  background:#f4f1ec;
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
body.dark-theme .cursor-ring{
  border-color:rgba(214,220,226,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
body.dark-theme .cursor-ring::before{
  background:conic-gradient(from 218deg,
    transparent 0deg 34deg,
    rgba(214,220,226,.42) 34deg 320deg,
    transparent 320deg 360deg);
}
body.dark-theme .cursor-ring::after{
  background:rgba(224,228,232,.84);
}
@media (pointer:coarse){
  .cursor-core,.cursor-ring{display:none !important;}
}
@media (max-width:980px){
  .pull-cord{
    right:0;
    transform:scale(.92);
    transform-origin:top right;
  }
}
@media (max-width:640px){
  .pull-cord{
    right:-6px;
    transform:scale(.8);
    transform-origin:top right;
  }
}



/* ===== SMPL v29: faster cursor + freer hanging cord ===== */

/* Faster, snappier cursor */
.cursor-core,
.cursor-ring{
  transition:
    opacity .12s ease,
    width .12s ease,
    height .12s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease !important;
}
.cursor-core{
  width:9px;
  height:9px;
  margin:-4.5px 0 0 -4.5px;
}
.cursor-ring{
  width:30px;
  height:30px;
  margin:-15px 0 0 -15px;
  border-color:rgba(92,100,108,.42);
}
.cursor-ring::after{
  width:4px;
  height:4px;
  right:5px;
  bottom:5px;
}
body.cursor-hover .cursor-ring{
  width:42px;
  height:42px;
  margin:-21px 0 0 -21px;
  transform:translateZ(0) rotate(14deg);
}
body.cursor-hover .cursor-core{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
}
body.cursor-press .cursor-ring{
  width:24px;
  height:24px;
  margin:-12px 0 0 -12px;
}
body.cursor-press .cursor-core{
  transform:scale(.86);
}

/* Cord styling: less glassy/rubbery, more like a real free hanging pull-cord */
.pull-cord{
  top:-2px;
  right:12px;
  width:116px;
  height:430px;
}
.cord-svg{
  top:8px;
  width:108px;
  height:360px;
}
.cord-line{
  stroke-width:1.5;
  stroke:rgba(96,102,108,.62);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.12));
}
.cord-handle{
  top:287px;
  width:40px;
  height:40px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(244,246,248,.78) 54%, rgba(228,231,234,.84) 100%);
  box-shadow:
    0 14px 26px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.48);
}
.cord-handle::before{
  inset:-10px;
}
.cord-handle::after{
  inset:-22px;
}
.cord-handle span{
  width:10px;
  height:10px;
}
.cord-hint{
  top:340px;
  opacity:.72;
}
.pull-cord.pulling .cord-handle{
  box-shadow:
    0 18px 34px rgba(0,0,0,.18),
    0 0 0 8px rgba(255,255,255,.14);
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 18px 34px rgba(0,0,0,.18),
    0 0 0 9px rgba(255,255,255,.12),
    0 0 18px rgba(255,255,255,.2);
}
.pull-cord.clicked .cord-handle{
  --cord-scale:.94;
}
body.dark-theme .cord-line{
  stroke:rgba(224,228,232,.46);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.34));
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.1) 54%, rgba(255,255,255,.08) 100%);
  box-shadow:
    0 14px 26px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.16);
}
body.dark-theme .pull-cord.ready .cord-handle{
  box-shadow:
    0 18px 34px rgba(0,0,0,.42),
    0 0 0 9px rgba(255,255,255,.06),
    0 0 18px rgba(255,255,255,.08);
}



/* ===== SMPL v30: softer premium cursor + straighter natural cord ===== */

/* Cursor: keep speed, but soften the feel visually */
.cursor-core{
  width:8px !important;
  height:8px !important;
  margin:-4px 0 0 -4px !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.08) !important;
  background:#2a2f34 !important;
  transition:
    opacity .12s ease,
    width .12s ease,
    height .12s ease,
    background .14s ease,
    box-shadow .14s ease !important;
}
.cursor-ring{
  width:32px !important;
  height:32px !important;
  margin:-16px 0 0 -16px !important;
  border-color:rgba(92,100,108,.28) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 4px 14px rgba(0,0,0,.04) !important;
}
.cursor-ring::before{
  opacity:.55 !important;
}
.cursor-ring::after{
  width:4px !important;
  height:4px !important;
  right:6px !important;
  bottom:6px !important;
  opacity:.7;
}
body.cursor-hover .cursor-ring{
  width:44px !important;
  height:44px !important;
  margin:-22px 0 0 -22px !important;
  border-color:rgba(92,100,108,.36) !important;
}
body.cursor-hover .cursor-core{
  width:9px !important;
  height:9px !important;
  margin:-4.5px 0 0 -4.5px !important;
}
body.cursor-press .cursor-ring{
  width:26px !important;
  height:26px !important;
  margin:-13px 0 0 -13px !important;
}
body.dark-theme .cursor-core{
  background:#f4f1ec !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.04) !important;
}
body.dark-theme .cursor-ring{
  border-color:rgba(214,220,226,.24) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 4px 14px rgba(0,0,0,.12) !important;
}
body.dark-theme .cursor-ring::before{
  opacity:.48 !important;
}

/* Cord: closer to the reference — straighter, cleaner, no idle wobble */
.pull-cord{
  right: 10px !important;
  top: -2px !important;
  width: 112px !important;
  height: 430px !important;
}
.cord-anchor{
  width: 12px !important;
  height: 16px !important;
  border-radius: 0 0 8px 8px !important;
}
.cord-svg{
  left: 6px !important;
  top: 6px !important;
  width: 100px !important;
  height: 366px !important;
}
.cord-line{
  stroke-width: 1.35 !important;
  stroke: rgba(98,104,110,.68) !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.08)) !important;
}
.cord-handle{
  top: 292px !important;
  width: 42px !important;
  height: 42px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(244,246,248,.86) 58%, rgba(232,235,238,.92) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.cord-handle::before{
  inset:-8px !important;
}
.cord-handle::after{
  inset:-18px !important;
}
.cord-handle span{
  width:10px !important;
  height:10px !important;
  border-color: rgba(120,126,132,.46) !important;
  box-shadow:none !important;
}
.cord-hint{
  top: 346px !important;
  letter-spacing: .36em !important;
  font-size: 9px !important;
  opacity:.56 !important;
}
.pull-cord:not(.pulling) .cord-handle{
  animation:none !important;
}
.pull-cord.pulling .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.12),
    0 0 0 5px rgba(255,255,255,.10) !important;
}
.pull-cord.ready .cord-line{
  stroke: rgba(118,124,130,.82) !important;
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.13),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 14px rgba(255,255,255,.12) !important;
}
.pull-cord.clicked .cord-handle{
  --cord-scale:.96 !important;
}
body.dark-theme .cord-line{
  stroke: rgba(224,228,232,.52) !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.18)) !important;
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.12) 58%, rgba(255,255,255,.09) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.28),
    0 0 0 6px rgba(255,255,255,.04),
    0 0 12px rgba(255,255,255,.06) !important;
}



/* ===== SMPL v31: natural tension pull-cord ===== */

/* Refined cord only: straighter, softer, more hanging-cord behavior */
.pull-cord{
  right: 10px !important;
  top: -2px !important;
  width: 112px !important;
  height: 432px !important;
}
.cord-svg{
  left: 6px !important;
  top: 6px !important;
  width: 100px !important;
  height: 368px !important;
  overflow: visible !important;
}
.cord-line{
  stroke-width: 1.3 !important;
  stroke: rgba(98,104,110,.70) !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.08)) !important;
}
.cord-handle{
  top: 292px !important;
  width: 42px !important;
  height: 42px !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.pull-cord.pulling .cord-handle{
  box-shadow:
    0 12px 20px rgba(0,0,0,.12),
    0 0 0 5px rgba(255,255,255,.08) !important;
}
.pull-cord.ready .cord-line{
  stroke: rgba(118,124,130,.84) !important;
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 20px rgba(0,0,0,.13),
    0 0 0 6px rgba(255,255,255,.07),
    0 0 12px rgba(255,255,255,.10) !important;
}
.pull-cord.clicked .cord-handle{
  --cord-scale: .965 !important;
}
body.dark-theme .cord-line{
  stroke: rgba(224,228,232,.56) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)) !important;
}
body.dark-theme .pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 20px rgba(0,0,0,.28),
    0 0 0 6px rgba(255,255,255,.04),
    0 0 10px rgba(255,255,255,.05) !important;
}



/* ===== SMPL v32: centered catenary-style pull cord ===== */

/*
  Cord geometry is now locked:
  - SVG viewBox: 0 0 100 368
  - cord starts at x=50 top center
  - handle center sits exactly at x=50, y=307
  - line endpoint always matches the handle center
*/

.pull-cord{
  right: 10px !important;
  top: -2px !important;
  width: 112px !important;
  height: 430px !important;
  opacity: 1 !important;
}
.cord-anchor{
  left: 50% !important;
  width: 12px !important;
  height: 16px !important;
  transform: translateX(-50%) !important;
  border-radius: 0 0 8px 8px !important;
}
.cord-svg{
  left: 6px !important;
  top: 6px !important;
  width: 100px !important;
  height: 368px !important;
  overflow: visible !important;
}
.cord-line{
  stroke-width: 1.25 !important;
  stroke: rgba(98,104,110,.72) !important;
  stroke-linecap: round !important;
  fill: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.08)) !important;
}
.cord-handle{
  left: 50% !important;
  top: 292px !important; /* center = 292 + 21 = 313; svg top 6 => 307 */
  width: 42px !important;
  height: 42px !important;
  transform: translate(calc(-50% + var(--pull-x)), var(--pull-y)) rotate(var(--pull-rot)) scale(var(--cord-scale)) !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(244,246,248,.87) 58%, rgba(232,235,238,.92) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.cord-handle span{
  width: 10px !important;
  height: 10px !important;
  border-color: rgba(120,126,132,.46) !important;
  box-shadow: none !important;
}
.cord-hint{
  top: 346px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  letter-spacing: .36em !important;
  font-size: 9px !important;
  opacity: .52 !important;
}
.pull-cord:not(.pulling) .cord-handle{
  animation: none !important;
}

/* tension states */
.pull-cord.slack .cord-line{
  stroke: rgba(98,104,110,.56) !important;
}
.pull-cord.tension .cord-line{
  stroke: rgba(96,102,108,.86) !important;
}
.pull-cord.tension .cord-handle{
  box-shadow:
    0 12px 20px rgba(0,0,0,.12),
    0 0 0 4px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.pull-cord.ready .cord-line{
  stroke: rgba(84,90,96,.96) !important;
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.13),
    0 0 0 6px rgba(255,255,255,.09),
    0 0 12px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.pull-cord.clicked .cord-handle{
  --cord-scale: .965 !important;
}
.pull-cord.clicked .cord-handle::before{
  opacity: .78 !important;
  transform: scale(1.08) !important;
}
.pull-cord.clicked .cord-handle::after{
  opacity: .55 !important;
  transform: scale(1.12) !important;
}

body.dark-theme .cord-line{
  stroke: rgba(224,228,232,.54) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)) !important;
}
body.dark-theme .pull-cord.slack .cord-line{
  stroke: rgba(224,228,232,.40) !important;
}
body.dark-theme .pull-cord.tension .cord-line{
  stroke: rgba(224,228,232,.62) !important;
}
body.dark-theme .pull-cord.ready .cord-line{
  stroke: rgba(245,247,248,.74) !important;
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.12) 58%, rgba(255,255,255,.09) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .pull-cord.tension .cord-handle{
  box-shadow:
    0 12px 20px rgba(0,0,0,.30),
    0 0 0 4px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.34),
    0 0 0 6px rgba(255,255,255,.04),
    0 0 10px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}



/* ===== SMPL v33: truly free pull-cord, knob attached to cord end ===== */

/*
  Geometry:
  - SVG top center anchor = x 50, y 0
  - cord endpoint attaches to the TOP of the round knob, not hidden inside it
  - knob center is exactly below that endpoint by knob radius
  - no clamp / hitbox restriction in JS; pointer can drag freely
*/

.pull-cord{
  right:10px !important;
  top:-2px !important;
  width:112px !important;
  height:520px !important;
  overflow:visible !important;
  pointer-events:none !important;
}
.cord-anchor,
.cord-svg,
.cord-handle,
.cord-hint{
  pointer-events:auto !important;
}
.cord-anchor{
  left:50% !important;
  width:12px !important;
  height:16px !important;
  transform:translateX(-50%) !important;
  border-radius:0 0 8px 8px !important;
}
.cord-svg{
  left:6px !important;
  top:6px !important;
  width:100px !important;
  height:420px !important;
  overflow:visible !important;
}
.cord-line{
  fill:none !important;
  stroke-width:1.28 !important;
  stroke:rgba(96,102,108,.72) !important;
  stroke-linecap:round !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.08)) !important;
}

/* knob: its TOP center is attached to cord endpoint */
.cord-handle{
  left:50% !important;
  top:292px !important; /* rest top = svg top 6 + REST_TOP 286 */
  width:42px !important;
  height:42px !important;
  transform:translate(calc(-50% + var(--pull-x)), var(--pull-y)) rotate(var(--pull-rot)) scale(var(--cord-scale)) !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(244,246,248,.87) 58%, rgba(232,235,238,.92) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

/* tiny connector so visually cord is attached to the ball */
.cord-handle::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  width:6px !important;
  height:8px !important;
  transform:translateX(-50%) !important;
  border-radius:999px !important;
  background:rgba(110,116,122,.40) !important;
  border:0 !important;
  opacity:.9 !important;
}
.cord-handle::after{
  content:"" !important;
  position:absolute !important;
  inset:-16px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 66%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .16s ease, transform .16s ease !important;
}
.cord-handle span{
  width:10px !important;
  height:10px !important;
  border-color:rgba(120,126,132,.46) !important;
  box-shadow:none !important;
}
.cord-hint{
  top:346px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  letter-spacing:.36em !important;
  font-size:9px !important;
  opacity:.52 !important;
}
.pull-cord:not(.pulling) .cord-handle{
  animation:none !important;
}
.pull-cord.pulling .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.13),
    0 0 0 5px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.pull-cord.taut .cord-line{
  stroke:rgba(82,88,94,.88) !important;
}
.pull-cord.slack .cord-line{
  stroke:rgba(96,102,108,.58) !important;
}
.pull-cord.ready .cord-line{
  stroke:rgba(62,68,74,.96) !important;
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.14),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 12px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.pull-cord.clicked .cord-handle{
  --cord-scale:.965 !important;
}
.pull-cord.clicked .cord-handle::after{
  opacity:.85 !important;
  transform:scale(1.12) !important;
}

body.dark-theme .cord-line{
  stroke:rgba(224,228,232,.54) !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.18)) !important;
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.12) 58%, rgba(255,255,255,.09) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .cord-handle::before{
  background:rgba(224,228,232,.36) !important;
}
body.dark-theme .pull-cord.taut .cord-line{
  stroke:rgba(245,247,248,.68) !important;
}
body.dark-theme .pull-cord.slack .cord-line{
  stroke:rgba(224,228,232,.40) !important;
}
body.dark-theme .pull-cord.ready .cord-line{
  stroke:rgba(245,247,248,.78) !important;
}
body.dark-theme .pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.34),
    0 0 0 6px rgba(255,255,255,.04),
    0 0 10px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}



/* ===== SMPL v34: fullscreen rope coordinate system, knob truly attached ===== */

/*
  This fixes the previous mismatch:
  - the cord is now drawn in viewport pixel coordinates;
  - the knob is also positioned in viewport pixel coordinates;
  - the rope endpoint is attached to the TOP of the knob;
  - no local 112px box math, so no diagonal line detached from the knob.
*/

:root{
  --knob-x: calc(100vw - 34px);
  --knob-y: 312px;
  --cord-scale: 1;
  --pull-rot: 0deg;
}

.pull-cord{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  z-index:180 !important;
  opacity:1 !important;
  pointer-events:none !important;
  user-select:none !important;
  touch-action:none !important;
}

.cord-anchor{
  position:fixed !important;
  left:calc(100vw - 34px) !important;
  top:0 !important;
  width:12px !important;
  height:16px !important;
  transform:translateX(-50%) !important;
  border-radius:0 0 8px 8px !important;
  pointer-events:none !important;
}

.cord-svg{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.cord-line{
  fill:none !important;
  stroke-width:1.25 !important;
  stroke:rgba(96,102,108,.72) !important;
  stroke-linecap:round !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.08)) !important;
}

.cord-handle{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:42px !important;
  height:42px !important;
  transform:
    translate(calc(var(--knob-x) - 21px), calc(var(--knob-y) - 21px))
    rotate(var(--pull-rot))
    scale(var(--cord-scale)) !important;
  border-radius:50% !important;
  pointer-events:auto !important;
  cursor:none !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(244,246,248,.87) 58%, rgba(232,235,238,.92) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

/* visible tiny connector at rope endpoint/top of knob */
.cord-handle::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  width:6px !important;
  height:8px !important;
  transform:translateX(-50%) !important;
  border-radius:999px !important;
  background:rgba(110,116,122,.42) !important;
  border:0 !important;
  opacity:.95 !important;
}

.cord-handle::after{
  content:"" !important;
  position:absolute !important;
  inset:-16px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 66%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .14s ease, transform .14s ease !important;
}

.cord-handle span{
  width:10px !important;
  height:10px !important;
  border-color:rgba(120,126,132,.46) !important;
  box-shadow:none !important;
}

.cord-hint{
  position:fixed !important;
  left:var(--knob-x) !important;
  top:calc(var(--knob-y) + 28px) !important;
  transform:translateX(-50%) !important;
  letter-spacing:.36em !important;
  font-size:9px !important;
  opacity:.52 !important;
  pointer-events:none !important;
}

.pull-cord.pulling .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.13),
    0 0 0 5px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

.pull-cord.taut .cord-line{
  stroke:rgba(82,88,94,.88) !important;
}
.pull-cord.slack .cord-line{
  stroke:rgba(96,102,108,.58) !important;
}
.pull-cord.ready .cord-line{
  stroke:rgba(62,68,74,.96) !important;
}
.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.14),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 12px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.pull-cord.clicked .cord-handle{
  --cord-scale:.965 !important;
}
.pull-cord.clicked .cord-handle::after{
  opacity:.85 !important;
  transform:scale(1.12) !important;
}

body.dark-theme .cord-line{
  stroke:rgba(224,228,232,.54) !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.18)) !important;
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.12) 58%, rgba(255,255,255,.09) 100%) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .cord-handle::before{
  background:rgba(224,228,232,.36) !important;
}
body.dark-theme .pull-cord.taut .cord-line{
  stroke:rgba(245,247,248,.68) !important;
}
body.dark-theme .pull-cord.slack .cord-line{
  stroke:rgba(224,228,232,.40) !important;
}
body.dark-theme .pull-cord.ready .cord-line{
  stroke:rgba(245,247,248,.78) !important;
}



/* ===== SMPL v35: real rope style pull-cord, attached knob, no fake rubber ===== */

:root{
  --knob-transform: translate3d(calc(100vw - 55px), 292px, 0);
  --hint-x: calc(100vw - 34px);
  --hint-y: 341px;
  --cord-scale: 1;
  --cord-rot: 0deg;
}

.pull-cord{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  z-index:180 !important;
  pointer-events:none !important;
  opacity:1 !important;
  user-select:none !important;
  touch-action:none !important;
}

.cord-anchor{
  position:fixed !important;
  left:calc(100vw - 34px) !important;
  top:0 !important;
  width:12px !important;
  height:16px !important;
  transform:translateX(-50%) !important;
  border-radius:0 0 8px 8px !important;
  pointer-events:none !important;
}

.cord-svg{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.cord-line{
  fill:none !important;
  stroke:rgba(84,90,96,.76) !important;
  stroke-width:1.35 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)) !important;
}

.cord-handle{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  transform:var(--knob-transform) rotate(var(--cord-rot)) scale(var(--cord-scale)) !important;
  pointer-events:auto !important;
  cursor:none !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(244,246,248,.88) 58%, rgba(232,235,238,.92) 100%) !important;
  border:1px solid rgba(83,90,97,.28) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}

.cord-handle::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-8px !important;
  width:7px !important;
  height:9px !important;
  transform:translateX(-50%) !important;
  border-radius:999px !important;
  background:rgba(104,110,116,.44) !important;
  border:0 !important;
  opacity:1 !important;
}

.cord-handle::after{
  content:"" !important;
  position:absolute !important;
  inset:-16px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 66%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .12s ease, transform .12s ease !important;
}

.cord-handle span{
  width:10px !important;
  height:10px !important;
  border-color:rgba(120,126,132,.46) !important;
  box-shadow:none !important;
}

.cord-hint{
  position:fixed !important;
  left:var(--hint-x) !important;
  top:var(--hint-y) !important;
  transform:translateX(-50%) !important;
  letter-spacing:.36em !important;
  font-size:9px !important;
  opacity:.46 !important;
  pointer-events:none !important;
}

.pull-cord.dragging .cord-line{ stroke:rgba(64,70,76,.84) !important; }
.pull-cord.taut .cord-line{ stroke:rgba(58,64,70,.92) !important; }
.pull-cord.slack .cord-line{ stroke:rgba(96,102,108,.62) !important; }
.pull-cord.ready .cord-line{ stroke:rgba(42,48,54,.98) !important; }

.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.14),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 12px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}

.pull-cord.clicked .cord-handle{ --cord-scale:.965 !important; }
.pull-cord.clicked .cord-handle::after{ opacity:.9 !important; transform:scale(1.12) !important; }

body.dark-theme .cord-line{
  stroke:rgba(224,228,232,.54) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)) !important;
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.12) 58%, rgba(255,255,255,.09) 100%) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .cord-handle::before{ background:rgba(224,228,232,.36) !important; }
body.dark-theme .pull-cord.dragging .cord-line{ stroke:rgba(235,238,241,.60) !important; }
body.dark-theme .pull-cord.taut .cord-line{ stroke:rgba(245,247,248,.70) !important; }
body.dark-theme .pull-cord.slack .cord-line{ stroke:rgba(224,228,232,.40) !important; }
body.dark-theme .pull-cord.ready .cord-line{ stroke:rgba(245,247,248,.80) !important; }



/* ===== SMPL v36: fixed attached cord — line always goes into knob center ===== */

/*
  Главное исправление:
  верёвка теперь заканчивается В ЦЕНТРЕ кругляшка, а сам кругляшок лежит поверх линии.
  Поэтому визуально она больше не может отрываться от шарика.
*/

:root{
  --knob-transform: translate3d(calc(100vw - 55px), 292px, 0);
  --hint-x: calc(100vw - 34px);
  --hint-y: 341px;
  --cord-scale: 1;
  --cord-rot: 0deg;
}

.pull-cord{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  z-index:180 !important;
  pointer-events:none !important;
  opacity:1 !important;
  user-select:none !important;
  touch-action:none !important;
}

.cord-anchor{
  position:fixed !important;
  left:calc(100vw - 34px) !important;
  top:0 !important;
  width:12px !important;
  height:16px !important;
  transform:translateX(-50%) !important;
  border-radius:0 0 8px 8px !important;
  pointer-events:none !important;
}

.cord-svg{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.cord-line{
  fill:none !important;
  stroke:rgba(65,72,79,.78) !important;
  stroke-width:1.28 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)) !important;
}

.cord-handle{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  transform:var(--knob-transform) rotate(var(--cord-rot)) scale(var(--cord-scale)) !important;
  pointer-events:auto !important;
  cursor:none !important;
  z-index:181 !important;
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.99), rgba(244,246,248,.88) 58%, rgba(232,235,238,.94) 100%) !important;
  border:1px solid rgba(83,90,97,.26) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

/* убираем верхнюю втулку, из-за неё казалось, что верёвка оторвана */
.cord-handle::before{
  display:none !important;
}

.cord-handle::after{
  content:"" !important;
  position:absolute !important;
  inset:-16px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 66%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .12s ease, transform .12s ease !important;
}

/* центральное отверстие: верёвка визуально входит прямо сюда */
.cord-handle span{
  width:10px !important;
  height:10px !important;
  border-color:rgba(120,126,132,.48) !important;
  background:rgba(255,255,255,.32) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.28),
    inset 0 1px 2px rgba(0,0,0,.06) !important;
}

.cord-hint{
  position:fixed !important;
  left:var(--hint-x) !important;
  top:var(--hint-y) !important;
  transform:translateX(-50%) !important;
  letter-spacing:.36em !important;
  font-size:9px !important;
  opacity:.46 !important;
  pointer-events:none !important;
}

.pull-cord.dragging .cord-line{ stroke:rgba(38,45,52,.88) !important; }
.pull-cord.taut .cord-line{ stroke:rgba(30,36,42,.94) !important; }
.pull-cord.slack .cord-line{ stroke:rgba(84,92,100,.62) !important; }
.pull-cord.ready .cord-line{ stroke:rgba(18,24,30,.98) !important; }

.pull-cord.ready .cord-handle{
  box-shadow:
    0 12px 22px rgba(0,0,0,.14),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 12px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

.pull-cord.clicked .cord-handle{ --cord-scale:.965 !important; }
.pull-cord.clicked .cord-handle::after{ opacity:.9 !important; transform:scale(1.12) !important; }

body.dark-theme .cord-line{
  stroke:rgba(224,228,232,.56) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)) !important;
}
body.dark-theme .cord-handle{
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.18), rgba(255,255,255,.12) 58%, rgba(255,255,255,.09) 100%) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dark-theme .cord-handle span{
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.34) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12) !important;
}
body.dark-theme .pull-cord.dragging .cord-line{ stroke:rgba(235,238,241,.62) !important; }
body.dark-theme .pull-cord.taut .cord-line{ stroke:rgba(245,247,248,.74) !important; }
body.dark-theme .pull-cord.slack .cord-line{ stroke:rgba(224,228,232,.42) !important; }
body.dark-theme .pull-cord.ready .cord-line{ stroke:rgba(245,247,248,.82) !important; }



/* ===== SMPL v37: SVG knob physically attached to rope ===== */

/*
  Теперь видимый кругляшок рисуется ВНУТРИ ТОГО ЖЕ SVG, что и верёвка.
  HTML .cord-handle остаётся только невидимой зоной захвата.
  Поэтому визуально шарик не может оторваться от верёвки вообще.
*/

:root{
  --knob-hit-transform: translate3d(calc(100vw - 55px), 292px, 0);
  --hint-x: calc(100vw - 34px);
  --hint-y: 341px;
}

.pull-cord{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  z-index:180 !important;
  pointer-events:none !important;
  opacity:1 !important;
  user-select:none !important;
  touch-action:none !important;
}

.cord-anchor{
  position:fixed !important;
  left:calc(100vw - 34px) !important;
  top:0 !important;
  width:12px !important;
  height:16px !important;
  transform:translateX(-50%) !important;
  border-radius:0 0 8px 8px !important;
  pointer-events:none !important;
  background:rgba(92,98,104,.40) !important;
}

.cord-svg{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.cord-line{
  fill:none !important;
  stroke:rgba(65,72,79,.76) !important;
  stroke-width:1.35 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)) !important;
}

/* SVG knob */
.cord-knob-shell{
  fill:rgba(244,246,248,.92);
  stroke:rgba(83,90,97,.26);
  stroke-width:1;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.10));
}
.cord-knob-highlight{
  fill:url(#cordKnobGradient);
}
.cord-knob-hole{
  fill:rgba(255,255,255,.36);
  stroke:rgba(120,126,132,.48);
  stroke-width:1;
}
.cord-knob-hit-glow{
  fill:rgba(255,255,255,.0);
  opacity:0;
  transition:opacity .12s ease;
}
.pull-cord.dragging .cord-knob-hit-glow,
.pull-cord.ready .cord-knob-hit-glow{
  opacity:.75;
}

/* Invisible drag target that follows SVG knob */
.cord-handle{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:74px !important;
  height:74px !important;
  border-radius:50% !important;
  transform:var(--knob-hit-transform) !important;
  pointer-events:auto !important;
  cursor:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
}
.cord-handle::before,
.cord-handle::after,
.cord-handle span{
  display:none !important;
}

.cord-hint{
  position:fixed !important;
  left:var(--hint-x) !important;
  top:var(--hint-y) !important;
  transform:translateX(-50%) !important;
  letter-spacing:.36em !important;
  font-size:9px !important;
  opacity:.46 !important;
  pointer-events:none !important;
}

.pull-cord.dragging .cord-line{ stroke:rgba(38,45,52,.86) !important; }
.pull-cord.taut .cord-line{ stroke:rgba(30,36,42,.92) !important; }
.pull-cord.slack .cord-line{ stroke:rgba(84,92,100,.62) !important; }
.pull-cord.ready .cord-line{ stroke:rgba(18,24,30,.98) !important; }
.pull-cord.clicked .cord-knob-shell{
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.14));
}

body.dark-theme .cord-anchor{
  background:rgba(255,255,255,.18) !important;
}
body.dark-theme .cord-line{
  stroke:rgba(224,228,232,.56) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)) !important;
}
body.dark-theme .cord-knob-shell{
  fill:rgba(255,255,255,.10);
  stroke:rgba(255,255,255,.20);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
body.dark-theme .cord-knob-hole{
  fill:rgba(255,255,255,.04);
  stroke:rgba(255,255,255,.34);
}
body.dark-theme .pull-cord.dragging .cord-line{ stroke:rgba(235,238,241,.62) !important; }
body.dark-theme .pull-cord.taut .cord-line{ stroke:rgba(245,247,248,.74) !important; }
body.dark-theme .pull-cord.slack .cord-line{ stroke:rgba(224,228,232,.42) !important; }
body.dark-theme .pull-cord.ready .cord-line{ stroke:rgba(245,247,248,.82) !important; }



/* ===== SMPL v38: clean knob + limited natural drag ===== */

/* убираем лишнюю фигню поверх шарика */
.cord-knob-hit-glow,
.cord-knob-highlight{
  display:none !important;
}

/* шарик чище, без дополнительного блика поверх */
.cord-knob-shell{
  fill:rgba(244,246,248,.94) !important;
  stroke:rgba(83,90,97,.28) !important;
  stroke-width:1 !important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.10)) !important;
}

.cord-knob-hole{
  fill:rgba(255,255,255,.34) !important;
  stroke:rgba(116,122,128,.48) !important;
  stroke-width:1 !important;
}

/* во время тяги просто лёгкий акцент, без круга поверх */
.pull-cord.dragging .cord-knob-shell,
.pull-cord.ready .cord-knob-shell{
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.13)) !important;
}

body.dark-theme .cord-knob-shell{
  fill:rgba(255,255,255,.105) !important;
  stroke:rgba(255,255,255,.22) !important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28)) !important;
}

body.dark-theme .cord-knob-hole{
  fill:rgba(255,255,255,.04) !important;
  stroke:rgba(255,255,255,.35) !important;
}



/* ===== SMPL v39: remove ghost/transparent knob overlay ===== */

/* Невидимая зона захвата не должна рисоваться вообще */
.cord-handle{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cord-handle::before,
.cord-handle::after,
.cord-handle span{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Внутри SVG оставляем только настоящий шарик и центральное отверстие */
.cord-knob-hit-glow,
.cord-knob-highlight{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.cord-knob-shell{
  opacity: 1 !important;
  fill: rgba(244,246,248,.96) !important;
  stroke: rgba(83,90,97,.28) !important;
  stroke-width: 1 !important;
}

.cord-knob-hole{
  opacity: 1 !important;
  fill: rgba(255,255,255,.30) !important;
  stroke: rgba(116,122,128,.48) !important;
  stroke-width: 1 !important;
}

/* Никаких дополнительных кругов при drag / ready / click */
.pull-cord.dragging .cord-knob-hit-glow,
.pull-cord.ready .cord-knob-hit-glow,
.pull-cord.clicked .cord-knob-hit-glow,
.pull-cord.dragging .cord-handle::after,
.pull-cord.ready .cord-handle::after,
.pull-cord.clicked .cord-handle::after{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}



/* ===== SMPL v40: fully hide ghost handle overlay ===== */

/*
  Реальный шарик остаётся только SVG-шариком.
  HTML .cord-handle существует только как невидимая hit-area.
  Полностью убираем любую возможность его отрисовки.
*/

.cord-handle{
  opacity: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

.cord-handle,
.cord-handle::before,
.cord-handle::after,
.cord-handle span{
  visibility: hidden !important;
}

.cord-handle{
  pointer-events: auto !important; /* invisible but draggable */
}

/* Убеждаемся, что в SVG только один видимый шарик */
.cord-knob-svg{
  opacity: 1 !important;
  visibility: visible !important;
}

.cord-knob-shell,
.cord-knob-hole{
  opacity: 1 !important;
  visibility: visible !important;
}

.cord-knob-hit-glow,
.cord-knob-highlight{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}



/* ===== SMPL v41: invisible but working hit area ===== */

/*
  Fix: visibility:hidden отключал drag-зону.
  Теперь зона полностью прозрачная, но кликабельная.
*/

.cord-handle{
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cord-handle::before,
.cord-handle::after,
.cord-handle span{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* видимый шарик только SVG */
.cord-knob-svg,
.cord-knob-shell,
.cord-knob-hole{
  visibility: visible !important;
  opacity: 1 !important;
}

.cord-knob-hit-glow,
.cord-knob-highlight{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}



/* ===== SMPL v47: shorter cord, moved near top CTA ===== */

:root{
  --knob-hit-transform: translate3d(calc(100vw - 222px), 143px, 0) !important;
  --hint-x: calc(100vw - 185px) !important;
  --hint-y: 208px !important;
}

.cord-anchor{
  left: calc(100vw - 185px) !important;
}

@media (max-width: 900px){
  :root{
    --knob-hit-transform: translate3d(calc(100vw - 145px), 143px, 0) !important;
    --hint-x: calc(100vw - 108px) !important;
  }
  .cord-anchor{
    left: calc(100vw - 108px) !important;
  }
}

@media (max-width: 560px){
  :root{
    --knob-hit-transform: translate3d(calc(100vw - 108px), 143px, 0) !important;
    --hint-x: calc(100vw - 71px) !important;
  }
  .cord-anchor{
    left: calc(100vw - 71px) !important;
  }
}



/* ===== SMPL v48: cord originates from theme button + smoother theme switch ===== */

/* theme button is now only a visual anchor, not clickable */
[data-theme-toggle]{
  pointer-events:none !important;
  user-select:none !important;
  cursor:default !important;
}

/* Make the cord visually originate from the theme button area */
.cord-anchor{
  top:0 !important; /* actual top/left are set by JS from the theme button */
  z-index:181 !important;
}

/* Smooth theme transition: no more janky overlay theatrics */
body.theme-switching .theme-sunset-wheel,
body.theme-switching .theme-flare{
  animation:none !important;
  opacity:0 !important;
  filter:none !important;
}

/* Soft crossfade if View Transitions are available */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.58s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}

::view-transition-group(root){
  animation-duration:.58s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}

/* Stronger universal smoothness for theme-related changes */
body,
header,
main,
footer,
section,
div,
article,
aside,
nav,
a,
button,
input,
textarea,
select,
svg,
path,
span,
h1,h2,h3,h4,h5,h6,
p{
  transition:
    background-color .52s cubic-bezier(.22,1,.36,1),
    color .52s cubic-bezier(.22,1,.36,1),
    border-color .52s cubic-bezier(.22,1,.36,1),
    box-shadow .52s cubic-bezier(.22,1,.36,1),
    opacity .42s cubic-bezier(.22,1,.36,1),
    fill .52s cubic-bezier(.22,1,.36,1),
    stroke .52s cubic-bezier(.22,1,.36,1),
    filter .52s cubic-bezier(.22,1,.36,1);
}

/* keep cord response snappy, not slowed by global transitions */
.pull-cord,
.pull-cord *{
  transition:
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease,
    fill .16s ease,
    stroke .16s ease,
    filter .16s ease !important;
}


/* ===== SMPL v49: theme button moved to the far right after CTA ===== */

.nav-actions [data-theme-toggle]{
  order: 30;
}

.nav-actions .btn.light{
  order: 20;
}

.nav-actions .burger{
  order: 40;
}



/* ===== SMPL v50: brighter center-ring glow + larger flashlight beam + flashlight cursor ===== */

/* 1) Theme switch: bright glow sweep through the central SMPL ring */
body.theme-switching .sun-orbit{
  opacity:.30 !important;
}
body.theme-switching .hero-ring-glint{
  stroke:#ffffff !important;
  stroke-width:4.8 !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.95))
    drop-shadow(0 0 18px rgba(255,255,255,.78))
    drop-shadow(0 0 34px rgba(255,248,232,.55)) !important;
  animation:smplRingGlowSweep .82s cubic-bezier(.22,1,.36,1) both !important;
}
body.theme-switching .hero-ring-dot{
  background:#ffffff !important;
  animation:smplRingDotFlash .82s cubic-bezier(.22,1,.36,1) both !important;
  box-shadow:
    0 0 0 8px rgba(255,255,255,.10),
    0 0 22px 10px rgba(255,255,255,.36),
    0 0 48px 18px rgba(255,248,232,.24) !important;
}
@keyframes smplRingGlowSweep{
  0%{
    opacity:0;
    stroke-dashoffset:260;
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,0))
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  18%{
    opacity:1;
  }
  56%{
    opacity:1;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.98))
      drop-shadow(0 0 26px rgba(255,255,255,.80))
      drop-shadow(0 0 40px rgba(255,248,232,.52));
  }
  100%{
    opacity:0;
    stroke-dashoffset:-260;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.12))
      drop-shadow(0 0 8px rgba(255,255,255,.08));
  }
}
@keyframes smplRingDotFlash{
  0%{
    transform:translate(-50%,-50%) scale(1);
    box-shadow:
      0 0 0 6px rgba(255,255,255,.04),
      0 0 0 rgba(255,255,255,0);
  }
  36%{
    transform:translate(-50%,-48%) scale(1.26);
    box-shadow:
      0 0 0 12px rgba(255,255,255,.12),
      0 0 26px 12px rgba(255,255,255,.46),
      0 0 54px 22px rgba(255,248,232,.26);
  }
  100%{
    transform:translate(-50%,-50%) scale(1);
    box-shadow:
      0 0 0 6px rgba(255,255,255,.04),
      0 0 10px 4px rgba(255,255,255,.06);
  }
}

/* 2) Flashlight overlay: larger, more realistic halo */
.flashlight-layer{
  transition:opacity .45s ease;
}
body.flashlight-mode .flashlight-layer{
  opacity:1;
  background:
    radial-gradient(circle 132px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.82) 0%,
      rgba(255,249,228,.54) 20%,
      rgba(255,255,255,.24) 38%,
      rgba(0,0,0,.12) 56%,
      rgba(0,0,0,.86) 78%,
      rgba(0,0,0,.98) 100%),
    radial-gradient(circle 420px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.22) 0%,
      rgba(255,255,255,.08) 26%,
      rgba(0,0,0,.38) 60%,
      rgba(0,0,0,.84) 82%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 720px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.07) 0%,
      rgba(0,0,0,.22) 46%,
      rgba(0,0,0,.72) 74%,
      rgba(0,0,0,1) 100%);
  backdrop-filter:brightness(.78) contrast(1.12) saturate(.94);
}
body.flashlight-mode main{
  filter:brightness(.48) contrast(1.18) saturate(.86);
}

/* 3) In flashlight mode, cursor becomes a small stylish flashlight that floats */
body.flashlight-mode .cursor-ring{
  width:42px !important;
  height:16px !important;
  margin:-8px 0 0 -21px !important;
  border:none !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg, rgba(76,83,90,.94), rgba(32,36,41,.96)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 8px 18px rgba(0,0,0,.22) !important;
  overflow:visible !important;
}
body.flashlight-mode .cursor-ring::before{
  content:"" !important;
  position:absolute !important;
  right:-10px !important;
  top:1px !important;
  width:16px !important;
  height:14px !important;
  border-radius:5px 9px 9px 5px !important;
  background:
    linear-gradient(180deg, rgba(168,174,181,.95), rgba(95,101,108,.94)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 10px rgba(255,255,255,.08) !important;
  opacity:1 !important;
}
body.flashlight-mode .cursor-ring::after{
  content:"" !important;
  position:absolute !important;
  left:-4px !important;
  top:4px !important;
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:rgba(24,26,30,.95) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 2px rgba(0,0,0,.35) !important;
  opacity:1 !important;
}
body.flashlight-mode .cursor-core{
  width:18px !important;
  height:18px !important;
  margin:-9px 0 0 -9px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,247,214,.82) 34%, rgba(255,255,255,0) 72%) !important;
  box-shadow:
    0 0 18px rgba(255,247,214,.55),
    0 0 34px rgba(255,255,255,.26) !important;
}
body.flashlight-mode.cursor-hover .cursor-ring{
  width:46px !important;
  height:18px !important;
  margin:-9px 0 0 -23px !important;
}
body.flashlight-mode.cursor-press .cursor-ring{
  width:38px !important;
  height:14px !important;
  margin:-7px 0 0 -19px !important;
}



/* ===== SMPL v51: smoother flashlight movement + better flashlight icon ===== */

/* Slightly softer, more premium flashlight beam */
body.flashlight-mode .flashlight-layer{
  background:
    radial-gradient(circle 138px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.84) 0%,
      rgba(255,249,228,.58) 18%,
      rgba(255,255,255,.28) 34%,
      rgba(0,0,0,.10) 54%,
      rgba(0,0,0,.84) 78%,
      rgba(0,0,0,.98) 100%),
    radial-gradient(circle 460px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.20) 0%,
      rgba(255,255,255,.09) 23%,
      rgba(0,0,0,.34) 58%,
      rgba(0,0,0,.82) 82%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 760px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.20) 46%,
      rgba(0,0,0,.70) 74%,
      rgba(0,0,0,1) 100%) !important;
  backdrop-filter:brightness(.80) contrast(1.10) saturate(.95) !important;
}

/* Replace the "spray" feel with a clean small torch / flashlight */
body.flashlight-mode .cursor-ring{
  width:48px !important;
  height:18px !important;
  margin:-9px 0 0 -24px !important;
  border:none !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg, rgba(78,86,94,.98), rgba(33,38,44,.98)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.24) inset,
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 8px 20px rgba(0,0,0,.24) !important;
  overflow:visible !important;
}

/* front head / lens housing */
body.flashlight-mode .cursor-ring::before{
  content:"" !important;
  position:absolute !important;
  right:-8px !important;
  top:-1px !important;
  width:18px !important;
  height:20px !important;
  border-radius:7px 11px 11px 7px !important;
  background:
    linear-gradient(180deg, rgba(182,188,195,.98), rgba(104,111,118,.98)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 12px rgba(255,255,255,.08) !important;
  opacity:1 !important;
}

/* rear cap / button */
body.flashlight-mode .cursor-ring::after{
  content:"" !important;
  position:absolute !important;
  left:-7px !important;
  top:4px !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg, rgba(26,29,33,.96), rgba(12,14,17,.98)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 2px rgba(0,0,0,.36) !important;
  opacity:1 !important;
}

/* use the core as the bright lens/glow spot in front of the flashlight */
body.flashlight-mode .cursor-core{
  width:16px !important;
  height:16px !important;
  margin:-8px 0 0 -8px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,247,214,.88) 34%, rgba(255,255,255,0) 72%) !important;
  box-shadow:
    0 0 18px rgba(255,247,214,.58),
    0 0 34px rgba(255,255,255,.28) !important;
}

body.flashlight-mode.cursor-hover .cursor-ring{
  width:52px !important;
  height:20px !important;
  margin:-10px 0 0 -26px !important;
}
body.flashlight-mode.cursor-press .cursor-ring{
  width:44px !important;
  height:16px !important;
  margin:-8px 0 0 -22px !important;
}



/* ===== SMPL v52: ultra-smooth flashlight + new icon + bigger halo ===== */

/* Bigger, more cinematic flashlight halo */
body.flashlight-mode .flashlight-layer{
  background:
    radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.92) 0%,
      rgba(255,249,228,.68) 16%,
      rgba(255,255,255,.34) 32%,
      rgba(0,0,0,.08) 52%,
      rgba(0,0,0,.82) 78%,
      rgba(0,0,0,.98) 100%),
    radial-gradient(circle 560px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.24) 0%,
      rgba(255,255,255,.11) 20%,
      rgba(0,0,0,.28) 56%,
      rgba(0,0,0,.80) 80%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 920px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.08) 0%,
      rgba(255,247,214,.05) 18%,
      rgba(0,0,0,.18) 44%,
      rgba(0,0,0,.66) 72%,
      rgba(0,0,0,1) 100%) !important;
  backdrop-filter:brightness(.83) contrast(1.12) saturate(.96) !important;
}

/* New flashlight cursor icon: compact premium torch, not spray-like */
body.flashlight-mode .cursor-ring{
  width:40px !important;
  height:16px !important;
  margin:-8px 0 0 -20px !important;
  border:none !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg, rgba(78,86,94,1), rgba(31,36,41,1)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.24) inset,
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 10px 24px rgba(0,0,0,.24) !important;
  overflow:visible !important;
}

/* Round flashlight head */
body.flashlight-mode .cursor-ring::before{
  content:"" !important;
  position:absolute !important;
  right:-6px !important;
  top:-3px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(201,207,214,.98), rgba(128,135,142,.98) 58%, rgba(92,99,106,.98) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 14px rgba(255,255,255,.08) !important;
  opacity:1 !important;
}

/* Rear cap */
body.flashlight-mode .cursor-ring::after{
  content:"" !important;
  position:absolute !important;
  left:-6px !important;
  top:4px !important;
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg, rgba(24,27,31,.98), rgba(10,12,15,1)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 2px rgba(0,0,0,.36) !important;
  opacity:1 !important;
}

/* Front lens glow */
body.flashlight-mode .cursor-core{
  width:18px !important;
  height:18px !important;
  margin:-9px 0 0 -9px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,247,214,.92) 32%, rgba(255,255,255,0) 74%) !important;
  box-shadow:
    0 0 22px rgba(255,247,214,.68),
    0 0 42px rgba(255,255,255,.30) !important;
}

/* subtle beam spill from the icon itself */
body.flashlight-mode .cursor-ring .flashlight-beam{
  display:none;
}

body.flashlight-mode.cursor-hover .cursor-ring{
  width:44px !important;
  height:18px !important;
  margin:-9px 0 0 -22px !important;
}
body.flashlight-mode.cursor-press .cursor-ring{
  width:36px !important;
  height:14px !important;
  margin:-7px 0 0 -18px !important;
}



/* ===== SMPL v53: bigger/brighter flashlight + 3D logo + blink return-home ===== */

:root{
  --logo-rx: -8deg;
  --logo-ry: 10deg;
  --logo-shift-x: 0px;
  --logo-shift-y: 0px;
}

/* Much bigger and brighter flashlight beam */
body.flashlight-mode .flashlight-layer{
  background:
    radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.98) 0%,
      rgba(255,248,222,.82) 14%,
      rgba(255,255,255,.42) 30%,
      rgba(255,255,255,.16) 42%,
      rgba(0,0,0,.06) 55%,
      rgba(0,0,0,.76) 78%,
      rgba(0,0,0,.98) 100%),
    radial-gradient(circle 720px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.32) 0%,
      rgba(255,255,255,.14) 18%,
      rgba(255,255,255,.06) 32%,
      rgba(0,0,0,.18) 54%,
      rgba(0,0,0,.72) 78%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 1200px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.10) 0%,
      rgba(255,247,214,.08) 16%,
      rgba(255,255,255,.04) 26%,
      rgba(0,0,0,.16) 42%,
      rgba(0,0,0,.58) 68%,
      rgba(0,0,0,1) 100%) !important;
  backdrop-filter:brightness(.92) contrast(1.16) saturate(.98) !important;
}
body.flashlight-mode main{
  filter:brightness(.54) contrast(1.18) saturate(.88) !important;
}

/* Big beautiful 3D logo background that reacts to the flashlight */
.flashlight-logo-3d{
  position:fixed;
  left:50%;
  top:53%;
  width:min(70vw, 820px);
  height:min(70vw, 820px);
  transform:
    translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0)
    rotateX(var(--logo-rx))
    rotateY(var(--logo-ry));
  transform-style:preserve-3d;
  perspective:1600px;
  pointer-events:none;
  z-index:26;
  opacity:0;
  transition:
    opacity .45s ease,
    transform .18s linear,
    filter .35s ease;
  filter:
    drop-shadow(0 36px 90px rgba(0,0,0,.28))
    drop-shadow(0 0 36px rgba(255,255,255,.04));
}
body.flashlight-mode .flashlight-logo-3d{
  opacity:.78;
}
.flashlight-logo-3d .logo-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 48% 42%, rgba(255,255,255,.14), rgba(255,255,255,0) 48%),
    linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.02) 24%, rgba(16,20,28,.28) 72%, rgba(255,255,255,.10));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -12px 26px rgba(0,0,0,.18),
    0 26px 70px rgba(0,0,0,.22),
    0 0 0 18px rgba(255,255,255,.015);
  overflow:hidden;
}
.flashlight-logo-3d .logo-ring::before{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.10), rgba(255,255,255,0) 54%);
  opacity:.9;
}
.flashlight-logo-3d .logo-ring::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), rgba(255,255,255,0) 26%);
  mix-blend-mode:screen;
  opacity:.85;
}
.flashlight-logo-3d .logo-cut{
  position:absolute;
  left:30%;
  right:15%;
  top:22%;
  bottom:21%;
  border-radius:50%;
  background:rgba(0,0,0,.0);
  box-shadow:
    0 0 0 999px rgba(0,0,0,0) inset;
}
.flashlight-logo-3d .logo-cut::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:26px solid transparent;
  border-left-color:transparent;
  border-right-color:transparent;
}
/* Open-ring mask using a wedge */
.flashlight-logo-3d .logo-wedge{
  position:absolute;
  left:12%;
  top:54%;
  width:34%;
  height:22%;
  background:transparent;
  transform:rotate(-31deg);
  box-shadow:
    0 0 0 120px rgba(0,0,0,0);
}
.flashlight-logo-3d .logo-wedge::before{
  content:"";
  position:absolute;
  inset:-100%;
  background:transparent;
}
/* Use blend layers to fake the SMPL open ring */
.flashlight-logo-3d .logo-mask{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(from 222deg,
      transparent 0 23deg,
      rgba(12,15,22,1) 23deg 72deg,
      transparent 72deg 360deg);
  mix-blend-mode:multiply;
  opacity:.88;
}
.flashlight-logo-3d .logo-type{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(88px, 14vw, 172px);
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(248,250,252,.92);
  text-shadow:
    0 1px 0 rgba(255,255,255,.32),
    0 8px 22px rgba(0,0,0,.18),
    0 0 26px rgba(255,255,255,.06);
  transform:translateZ(36px);
}
.flashlight-logo-3d .logo-depth{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(88px, 14vw, 172px);
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(32,38,46,.46);
  transform:translate3d(8px, 12px, -18px);
  filter:blur(1px);
}

/* Flashlight return-home effect */
.flashlight-return-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:230;
  opacity:0;
  background:
    radial-gradient(circle 260px at var(--mx,50%) var(--my,50%), rgba(255,255,255,1), rgba(255,255,255,.42) 18%, rgba(255,255,255,0) 45%),
    rgba(0,0,0,0);
  transition:opacity .18s ease;
}
body.flashlight-returning .flashlight-return-layer{
  opacity:1;
  animation:flashlightBlinkReturn 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes flashlightBlinkReturn{
  0%{ opacity:0; background-color:rgba(0,0,0,0);}
  10%{ opacity:1; background-color:rgba(0,0,0,0);}
  18%{ opacity:.15; }
  28%{ opacity:1; }
  38%{ opacity:.18; }
  52%{ opacity:1; }
  76%{ opacity:.86; background-color:rgba(255,255,255,.08);}
  100%{ opacity:1; background-color:rgba(255,255,255,.18);}
}
body.flashlight-returning .flashlight-layer{
  opacity:1 !important;
}
body.flashlight-returning .flashlight-logo-3d{
  opacity:.95 !important;
  filter:
    drop-shadow(0 40px 100px rgba(0,0,0,.26))
    drop-shadow(0 0 58px rgba(255,255,255,.24));
}



/* ===== SMPL v54: flashlight mode hides page, leaves only 3D logo ===== */

body.flashlight-mode header,
body.flashlight-mode main,
body.flashlight-mode footer,
body.flashlight-mode .pull-cord{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    visibility .42s step-end !important;
}

body.flashlight-mode{
  background:
    radial-gradient(circle at 50% 50%, rgba(20,24,32,.18), rgba(7,10,16,.94) 58%, rgba(4,6,10,1) 100%) !important;
}

body.flashlight-mode .flashlight-logo-3d{
  opacity:.96 !important;
  width:min(78vw, 980px) !important;
  height:min(78vw, 980px) !important;
  filter:
    drop-shadow(0 44px 120px rgba(0,0,0,.32))
    drop-shadow(0 0 62px rgba(255,255,255,.10)) !important;
}

body.flashlight-mode .flashlight-layer{
  opacity:1 !important;
}

body.flashlight-returning .flashlight-logo-3d{
  opacity:1 !important;
  filter:
    drop-shadow(0 48px 132px rgba(0,0,0,.32))
    drop-shadow(0 0 88px rgba(255,255,255,.22)) !important;
}

body.flashlight-returning .flashlight-layer{
  opacity:1 !important;
}

/* when flashlight mode is off, restore everything cleanly */
header, main, footer, .pull-cord{
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    visibility .42s step-start !important;
}



/* ===== SMPL v55: empty-space flashlight exit + return to white + subtle sitewide motion ===== */

/* Subtle ambient motion across the site */
@keyframes smplFloatSoft {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-8px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes smplFloatTiny {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-4px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes smplGlowBreath {
  0%   { opacity:.55; filter: blur(0px); }
  50%  { opacity:1; filter: blur(.2px); }
  100% { opacity:.55; filter: blur(0px); }
}

@keyframes smplLineShift {
  0%   { transform: translate3d(0,0,0) scaleX(1); opacity:.58; }
  50%  { transform: translate3d(0,-3px,0) scaleX(1.02); opacity:1; }
  100% { transform: translate3d(0,0,0) scaleX(1); opacity:.58; }
}

@keyframes smplOrbitDrift {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes smplDotPulse {
  0%   { transform: translate(-50%, -50%) scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.0), 0 0 0 rgba(255,255,255,0); }
  50%  { transform: translate(-50%, -50%) scale(1.12); box-shadow:0 0 0 8px rgba(255,255,255,.06), 0 0 18px rgba(255,255,255,.18); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.0), 0 0 0 rgba(255,255,255,0); }
}

@keyframes smplFadeRise {
  from { opacity:0; transform:translate3d(0,16px,0); }
  to   { opacity:1; transform:translate3d(0,0,0); }
}

/* Reveal sections/elements on load */
.hero__content,
.hero__visual,
.page-hero__content,
.page-hero__visual,
.ecosystem__grid,
.motion-grid,
.services-accordion,
.contact-panel,
.footer-inner,
.about-grid,
.consulting-grid,
.ai-grid,
.academy-grid,
.page-stack > * {
  animation: smplFadeRise .8s cubic-bezier(.22,1,.36,1) both;
}

.hero__visual { animation-delay:.06s; }
.ecosystem__grid { animation-delay:.10s; }
.motion-grid { animation-delay:.14s; }
.services-accordion { animation-delay:.18s; }
.contact-panel { animation-delay:.22s; }

/* Gentle motion on lighter elements so the site feels alive */
.hero-ring-svg,
.hero-orbit,
.page-hero .hero-orbit {
  animation: smplOrbitDrift 26s linear infinite;
  transform-origin: 50% 50%;
}

.hero-ring-dot,
.page-hero .hero-ring-dot {
  animation: smplDotPulse 4.2s ease-in-out infinite;
}

.hero-ring-glint,
.page-hero .hero-ring-glint {
  animation: smplGlowBreath 4.6s ease-in-out infinite;
}

.ecosystem-card,
.motion-slot,
.service-accordion__item,
.contact-card,
.stat-card,
.about-card,
.consulting-card,
.ai-card,
.academy-card {
  animation: smplFloatTiny 6.4s ease-in-out infinite;
  will-change: transform;
}

.ecosystem-card:nth-child(2n),
.motion-slot:nth-child(2n),
.service-accordion__item:nth-child(2n),
.about-card:nth-child(2n),
.ai-card:nth-child(2n) {
  animation-duration: 7.4s;
  animation-delay: .35s;
}

.ecosystem-card:hover,
.motion-slot:hover,
.service-accordion__item:hover,
.contact-card:hover,
.stat-card:hover,
.about-card:hover,
.consulting-card:hover,
.ai-card:hover,
.academy-card:hover {
  animation-play-state: paused;
}

.section-line,
.page-hero__line,
.hero__eyebrow::after,
.section-head__line,
.contact-head__line {
  animation: smplLineShift 5.6s ease-in-out infinite;
}

/* Flashlight exit should clearly come back to white theme */
body.flashlight-exiting header,
body.flashlight-exiting main,
body.flashlight-exiting footer{
  opacity:0 !important;
}



/* ===== SMPL v56: real logo-based 3D + broken flashlight blink ===== */

/* kill the full-screen white flash */
.flashlight-return-layer,
body.flashlight-returning .flashlight-return-layer{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Use the real SMPL logo asset, layered into a 3D stack */
.flashlight-logo-3d{
  top:52% !important;
  width:min(76vw, 980px) !important;
  height:min(76vw, 980px) !important;
  opacity:0 !important;
  transform:
    translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0)
    rotateX(var(--logo-rx))
    rotateY(var(--logo-ry))
    perspective(1800px) !important;
  filter:
    drop-shadow(0 36px 96px rgba(0,0,0,.32))
    drop-shadow(0 0 44px rgba(255,255,255,.06)) !important;
}
body.flashlight-mode .flashlight-logo-3d{
  opacity:.98 !important;
}

.flashlight-logo-3d .logo-stack{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.flashlight-logo-3d .logo-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  transform-origin:50% 50%;
}

/* deep layers = extrusion */
.flashlight-logo-3d .logo-layer.depth-5{
  transform:translate3d(16px, 24px, -80px);
  filter:brightness(0) saturate(0) opacity(.28) blur(1.2px);
}
.flashlight-logo-3d .logo-layer.depth-4{
  transform:translate3d(12px, 18px, -62px);
  filter:brightness(0) saturate(0) opacity(.34) blur(1px);
}
.flashlight-logo-3d .logo-layer.depth-3{
  transform:translate3d(9px, 13px, -46px);
  filter:brightness(0) saturate(0) opacity(.40) blur(.8px);
}
.flashlight-logo-3d .logo-layer.depth-2{
  transform:translate3d(6px, 9px, -30px);
  filter:brightness(.18) saturate(.55) hue-rotate(180deg) opacity(.46);
}
.flashlight-logo-3d .logo-layer.depth-1{
  transform:translate3d(3px, 5px, -14px);
  filter:brightness(.35) saturate(.70) hue-rotate(180deg) opacity(.54);
}

/* front face with spotlight reaction */
.flashlight-logo-3d .logo-layer.face{
  transform:translate3d(0, 0, 26px);
  filter:
    brightness(1.02)
    contrast(1.08)
    drop-shadow(0 0 28px rgba(255,255,255,.10));
}
.flashlight-logo-3d .logo-specular{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.16) 12%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 36%);
  mix-blend-mode:screen;
  opacity:.95;
  transform:translateZ(36px);
  -webkit-mask-image:url('../assets/smpl-logo-exact.png');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url('../assets/smpl-logo-exact.png');
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.flashlight-logo-3d .logo-rim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 34%, rgba(255,255,255,.08) 68%, rgba(255,255,255,.18));
  opacity:.42;
  transform:translateZ(22px);
  -webkit-mask-image:url('../assets/smpl-logo-exact.png');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url('../assets/smpl-logo-exact.png');
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* broken flashlight blink: only the flashlight / cursor / logo light flicker */
@keyframes smplBrokenFlashBeam{
  0%   { opacity:1; }
  8%   { opacity:.18; }
  12%  { opacity:1; }
  19%  { opacity:.08; }
  25%  { opacity:.86; }
  31%  { opacity:.18; }
  38%  { opacity:1; }
  45%  { opacity:.04; }
  54%  { opacity:.72; }
  62%  { opacity:.10; }
  74%  { opacity:1; }
  86%  { opacity:.24; }
  100% { opacity:0; }
}

@keyframes smplBrokenFlashCursor{
  0%   { opacity:1; filter:none; }
  8%   { opacity:.22; filter:blur(.2px); }
  12%  { opacity:1; }
  19%  { opacity:.06; filter:blur(.6px); }
  25%  { opacity:.92; }
  31%  { opacity:.18; }
  38%  { opacity:1; }
  45%  { opacity:.02; }
  54%  { opacity:.76; }
  62%  { opacity:.12; }
  74%  { opacity:1; }
  86%  { opacity:.22; }
  100% { opacity:0; }
}

@keyframes smplBrokenFlashLogo{
  0%   { opacity:.98; filter:drop-shadow(0 36px 96px rgba(0,0,0,.32)) drop-shadow(0 0 50px rgba(255,255,255,.14)); }
  18%  { opacity:.58; filter:drop-shadow(0 24px 72px rgba(0,0,0,.24)) drop-shadow(0 0 14px rgba(255,255,255,.05)); }
  38%  { opacity:.96; filter:drop-shadow(0 36px 96px rgba(0,0,0,.32)) drop-shadow(0 0 58px rgba(255,255,255,.16)); }
  56%  { opacity:.52; }
  74%  { opacity:1; filter:drop-shadow(0 40px 108px rgba(0,0,0,.34)) drop-shadow(0 0 68px rgba(255,255,255,.22)); }
  100% { opacity:.08; }
}

body.flashlight-returning .flashlight-layer{
  animation:smplBrokenFlashBeam .88s linear forwards !important;
}
body.flashlight-returning .cursor-ring,
body.flashlight-returning .cursor-core{
  animation:smplBrokenFlashCursor .88s linear forwards !important;
}
body.flashlight-returning .flashlight-logo-3d{
  animation:smplBrokenFlashLogo .88s linear forwards !important;
}

/* when flashlight mode is on, hide page completely and only show logo/beam */
body.flashlight-mode header,
body.flashlight-mode main,
body.flashlight-mode footer,
body.flashlight-mode .pull-cord{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}



/* ===== SMPL v57: Hidden SMPL System instead of logo/image ===== */

/* hide previous 3D logo object completely */
.flashlight-logo-3d{
  display:none !important;
}

/* dark empty stage */
body.flashlight-mode{
  background:
    radial-gradient(circle at 50% 50%, rgba(15,18,24,.24), rgba(4,6,10,.98) 64%, #020305 100%) !important;
}

/* Hidden system scene — code only, no picture */
.smpl-hidden-system{
  position:fixed;
  left:50%;
  top:52%;
  width:min(88vw, 1120px);
  height:min(72vh, 760px);
  transform:
    translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0)
    rotateX(var(--logo-rx))
    rotateY(var(--logo-ry));
  transform-style:preserve-3d;
  perspective:1800px;
  pointer-events:none;
  z-index:28;
  opacity:0;
  transition:opacity .42s cubic-bezier(.22,1,.36,1), transform .16s linear, filter .28s ease;
  filter:
    drop-shadow(0 44px 120px rgba(0,0,0,.34))
    drop-shadow(0 0 52px rgba(255,255,255,.06));
  -webkit-mask-image: radial-gradient(circle 520px at var(--mx,50%) var(--my,50%), #000 0 42%, rgba(0,0,0,.70) 58%, transparent 78%);
  mask-image: radial-gradient(circle 520px at var(--mx,50%) var(--my,50%), #000 0 42%, rgba(0,0,0,.70) 58%, transparent 78%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
body.flashlight-mode .smpl-hidden-system{
  opacity:1;
}

/* faint full-scene depth behind the visible flashlight mask */
.smpl-hidden-system::before{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:44px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 46%, rgba(255,255,255,.035));
  transform:translateZ(-80px);
  opacity:.6;
}

.smpl-system-grid{
  position:absolute;
  inset:0;
  transform:translateZ(-60px);
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.42;
  animation:smplGridBreathe 5.8s ease-in-out infinite;
}

.smpl-system-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:translateZ(12px);
}
.smpl-system-svg .system-line{
  fill:none;
  stroke:rgba(238,244,248,.22);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:9 16;
  animation:smplDataFlow 7.2s linear infinite;
}
.smpl-system-svg .system-line.strong{
  stroke:rgba(255,255,255,.38);
  stroke-width:1.25;
  stroke-dasharray:16 18;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.12));
}
.smpl-system-svg .system-node{
  fill:rgba(255,255,255,.86);
  filter:drop-shadow(0 0 12px rgba(255,255,255,.32));
  animation:smplNodePulse 3.4s ease-in-out infinite;
}
.smpl-system-svg .system-node.dim{
  fill:rgba(180,190,200,.48);
  animation-delay:.8s;
}

/* central open ring / portal, brand-like but not a logo image */
.smpl-system-core{
  position:absolute;
  left:50%;
  top:50%;
  width:min(38vw, 420px);
  height:min(38vw, 420px);
  transform:translate3d(-50%,-50%,60px);
  border-radius:50%;
}
.smpl-system-core::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(from 230deg,
      transparent 0deg 38deg,
      rgba(255,255,255,.92) 38deg 332deg,
      transparent 332deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 57%, #000 59%, #000 70%, transparent 72%);
  mask:radial-gradient(circle, transparent 57%, #000 59%, #000 70%, transparent 72%);
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.26))
    drop-shadow(0 0 44px rgba(180,210,255,.12));
  animation:smplCoreSlowTurn 12s linear infinite;
}
.smpl-system-core::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.035),
    0 0 36px rgba(255,255,255,.065);
  animation:smplCoreBreath 4.8s ease-in-out infinite;
}
.smpl-system-core .core-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  right:19%;
  bottom:23%;
  background:#fff;
  box-shadow:0 0 20px rgba(255,255,255,.56), 0 0 46px rgba(255,255,255,.24);
  animation:smplNodePulse 2.4s ease-in-out infinite;
}

/* labels */
.smpl-system-label{
  position:absolute;
  min-width:120px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(8px);
  color:rgba(244,247,250,.78);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  transform:translateZ(84px);
  text-align:center;
  box-shadow:0 0 22px rgba(255,255,255,.035);
  animation:smplLabelFloat 6s ease-in-out infinite;
}
.smpl-system-label:nth-child(odd){ animation-delay:.65s; }
.smpl-system-label.strategy{ left:6%; top:18%; }
.smpl-system-label.traffic{ right:8%; top:20%; }
.smpl-system-label.ai{ left:14%; bottom:21%; }
.smpl-system-label.scale{ right:12%; bottom:18%; }
.smpl-system-label.content{ left:50%; top:8%; transform:translate3d(-50%,0,84px); }
.smpl-system-label.funnels{ left:50%; bottom:7%; transform:translate3d(-50%,0,84px); }

.smpl-system-noise{
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 76%, rgba(255,255,255,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.12) 0 1px, transparent 2px);
  background-size:130px 120px, 180px 170px, 160px 130px, 210px 190px;
  animation:smplParticlesDrift 13s linear infinite;
  transform:translateZ(100px);
}

/* stronger flashlight beam for this scene */
body.flashlight-mode .flashlight-layer{
  background:
    radial-gradient(circle 250px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.99) 0%,
      rgba(255,248,222,.80) 14%,
      rgba(255,255,255,.36) 31%,
      rgba(255,255,255,.13) 44%,
      rgba(0,0,0,.04) 55%,
      rgba(0,0,0,.78) 80%,
      rgba(0,0,0,.99) 100%),
    radial-gradient(circle 850px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.28) 0%,
      rgba(255,255,255,.12) 20%,
      rgba(0,0,0,.24) 55%,
      rgba(0,0,0,.82) 84%,
      rgba(0,0,0,1) 100%) !important;
  backdrop-filter:brightness(.96) contrast(1.17) saturate(.98) !important;
}

/* broken flashlight: only beam + cursor + hidden system flicker */
body.flashlight-returning .smpl-hidden-system{
  animation:smplBrokenSystem .9s linear forwards !important;
}
body.flashlight-returning .flashlight-layer{
  animation:smplBrokenFlashBeam .9s linear forwards !important;
}
body.flashlight-returning .cursor-ring,
body.flashlight-returning .cursor-core{
  animation:smplBrokenFlashCursor .9s linear forwards !important;
}

@keyframes smplGridBreathe{
  0%,100%{opacity:.30}
  50%{opacity:.50}
}
@keyframes smplDataFlow{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-110}
}
@keyframes smplNodePulse{
  0%,100%{opacity:.45; transform:scale(1)}
  50%{opacity:1; transform:scale(1.22)}
}
@keyframes smplCoreSlowTurn{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes smplCoreBreath{
  0%,100%{opacity:.45; transform:scale(.98)}
  50%{opacity:.95; transform:scale(1.04)}
}
@keyframes smplLabelFloat{
  0%,100%{filter:brightness(.9); opacity:.64}
  50%{filter:brightness(1.18); opacity:.98}
}
@keyframes smplParticlesDrift{
  from{transform:translate3d(0,0,100px)}
  to{transform:translate3d(24px,-18px,100px)}
}
@keyframes smplBrokenSystem{
  0%{opacity:1; filter:drop-shadow(0 44px 120px rgba(0,0,0,.34)) drop-shadow(0 0 52px rgba(255,255,255,.08))}
  8%{opacity:.16}
  13%{opacity:1}
  20%{opacity:.08}
  27%{opacity:.78}
  34%{opacity:.18}
  43%{opacity:1}
  50%{opacity:.04}
  58%{opacity:.64}
  66%{opacity:.12}
  78%{opacity:.9}
  88%{opacity:.18}
  100%{opacity:0}
}
@media(max-width:720px){
  .smpl-hidden-system{
    width:118vw;
    height:74vh;
  }
  .smpl-system-label{
    font-size:9px;
    min-width:88px;
    padding:7px 9px;
  }
}



/* ===== SMPL v58: fix empty flashlight mode — make Hidden System visible ===== */

/* The scene must be ABOVE the dark flashlight overlay, otherwise it looks empty */
body.flashlight-mode .smpl-hidden-system{
  display:block !important;
  z-index:145 !important;
  opacity:1 !important;
  visibility:visible !important;
  width:min(92vw, 1180px) !important;
  height:min(78vh, 820px) !important;
  filter:
    drop-shadow(0 46px 120px rgba(0,0,0,.46))
    drop-shadow(0 0 72px rgba(255,255,255,.14)) !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* keep the flashlight darkness below the actual system */
body.flashlight-mode .flashlight-layer{
  z-index:92 !important;
  background:
    radial-gradient(circle 270px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.42) 0%,
      rgba(255,248,222,.24) 22%,
      rgba(255,255,255,.07) 42%,
      rgba(0,0,0,.08) 56%,
      rgba(0,0,0,.62) 80%,
      rgba(0,0,0,.92) 100%),
    radial-gradient(circle 920px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.12) 0%,
      rgba(255,255,255,.05) 24%,
      rgba(0,0,0,.20) 56%,
      rgba(0,0,0,.72) 86%,
      rgba(0,0,0,1) 100%) !important;
  backdrop-filter:brightness(.88) contrast(1.08) saturate(.95) !important;
}

/* make the coded system readable, not barely visible */
body.flashlight-mode .smpl-system-grid{
  opacity:.72 !important;
  background-size:58px 58px !important;
  background:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px) !important;
}

body.flashlight-mode .smpl-system-svg .system-line{
  stroke:rgba(238,244,248,.48) !important;
  stroke-width:1.2 !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.10)) !important;
}
body.flashlight-mode .smpl-system-svg .system-line.strong{
  stroke:rgba(255,255,255,.82) !important;
  stroke-width:1.7 !important;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.30))
    drop-shadow(0 0 26px rgba(255,255,255,.12)) !important;
}
body.flashlight-mode .smpl-system-svg .system-node{
  fill:rgba(255,255,255,.98) !important;
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,.65))
    drop-shadow(0 0 34px rgba(255,255,255,.26)) !important;
}
body.flashlight-mode .smpl-system-svg .system-node.dim{
  fill:rgba(210,220,230,.82) !important;
}

/* center portal must be obvious */
body.flashlight-mode .smpl-system-core{
  width:min(42vw, 500px) !important;
  height:min(42vw, 500px) !important;
}
body.flashlight-mode .smpl-system-core::before{
  filter:
    drop-shadow(0 0 24px rgba(255,255,255,.62))
    drop-shadow(0 0 66px rgba(180,210,255,.26)) !important;
}
body.flashlight-mode .smpl-system-core::after{
  border-color:rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 0 54px rgba(255,255,255,.09),
    0 0 66px rgba(255,255,255,.14) !important;
}
body.flashlight-mode .smpl-system-core .core-dot{
  width:14px !important;
  height:14px !important;
  box-shadow:
    0 0 24px rgba(255,255,255,.88),
    0 0 58px rgba(255,255,255,.38) !important;
}

/* labels visible */
body.flashlight-mode .smpl-system-label{
  color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:
    0 0 28px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.flashlight-mode .smpl-system-noise{
  opacity:.44 !important;
}

/* give the system an actual local flashlight hotspot, so it feels revealed */
.smpl-hidden-system::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  z-index:5;
  background:
    radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.12) 28%,
      rgba(255,255,255,.035) 52%,
      transparent 76%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .2s ease;
}
body.flashlight-mode .smpl-hidden-system::after{
  opacity:1;
}

/* broken exit still only flickers beam/system/cursor */
body.flashlight-returning .smpl-hidden-system{
  animation:smplBrokenSystem .9s linear forwards !important;
}

@media(max-width:720px){
  body.flashlight-mode .smpl-hidden-system{
    width:128vw !important;
    height:82vh !important;
  }
  body.flashlight-mode .smpl-system-core{
    width:62vw !important;
    height:62vw !important;
  }
}



/* ===== SMPL v59: logo inside hidden system + dimmer flashlight + close animation + cursor-reactive buttons ===== */

/* Hidden system should be visible, but not fully exposed at once */
body.flashlight-mode .smpl-hidden-system{
  opacity:.96 !important;
  -webkit-mask-image: radial-gradient(circle 255px at var(--mx,50%) var(--my,50%), #000 0 28%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.64) 58%, transparent 78%) !important;
  mask-image: radial-gradient(circle 255px at var(--mx,50%) var(--my,50%), #000 0 28%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.64) 58%, transparent 78%) !important;
}
body.flashlight-mode .flashlight-layer{
  background:
    radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.22) 0%,
      rgba(255,248,222,.12) 18%,
      rgba(255,255,255,.05) 34%,
      rgba(0,0,0,.12) 52%,
      rgba(0,0,0,.74) 80%,
      rgba(0,0,0,.96) 100%),
    radial-gradient(circle 760px at var(--mx,50%) var(--my,50%),
      rgba(255,247,214,.08) 0%,
      rgba(255,255,255,.03) 20%,
      rgba(0,0,0,.24) 52%,
      rgba(0,0,0,.82) 86%,
      rgba(0,0,0,1) 100%) !important;
  backdrop-filter:brightness(.76) contrast(1.12) saturate(.94) !important;
}
body.flashlight-mode .smpl-system-grid{
  opacity:.52 !important;
}
body.flashlight-mode .smpl-system-svg .system-line{
  stroke:rgba(238,244,248,.32) !important;
}
body.flashlight-mode .smpl-system-svg .system-line.strong{
  stroke:rgba(255,255,255,.58) !important;
}
body.flashlight-mode .smpl-system-label{
  opacity:.82;
}
body.flashlight-mode .smpl-hidden-system::after{
  background:
    radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.09) 26%,
      rgba(255,255,255,.025) 48%,
      transparent 72%) !important;
}

/* Put real SMPL logo inside the core and animate it */
.smpl-system-core{
  overflow:visible;
}
.smpl-system-logo-wrap{
  position:absolute;
  inset:25%;
  display:grid;
  place-items:center;
  transform:translateZ(72px);
  animation:smplLogoInnerFloat 5.4s ease-in-out infinite;
}
.smpl-system-logo{
  width:100%;
  max-width:184px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,.16))
    drop-shadow(0 0 34px rgba(255,255,255,.10));
  opacity:.88;
  transform:scale(.96);
  animation:smplLogoPulse 4.2s ease-in-out infinite;
}
body.flashlight-mode .smpl-system-logo{
  opacity:.96;
}

@keyframes smplLogoInnerFloat{
  0%,100%{ transform:translate3d(0,0,72px) rotate(-2deg); }
  50%{ transform:translate3d(0,-8px,82px) rotate(2deg); }
}
@keyframes smplLogoPulse{
  0%,100%{ transform:scale(.96); filter:drop-shadow(0 0 12px rgba(255,255,255,.12)) drop-shadow(0 0 24px rgba(255,255,255,.08));}
  50%{ transform:scale(1.02); filter:drop-shadow(0 0 18px rgba(255,255,255,.22)) drop-shadow(0 0 42px rgba(255,255,255,.14));}
}

/* Closing animation on click: system folds/closes while the broken flashlight flickers */
body.flashlight-returning .smpl-hidden-system{
  animation:smplHiddenSystemClose .92s cubic-bezier(.22,1,.36,1) forwards !important;
}
body.flashlight-returning .smpl-system-core{
  animation:smplCoreClose .92s cubic-bezier(.22,1,.36,1) forwards !important;
}
body.flashlight-returning .smpl-system-logo-wrap,
body.flashlight-returning .smpl-system-logo{
  animation:smplLogoClose .92s cubic-bezier(.22,1,.36,1) forwards !important;
}
body.flashlight-returning .smpl-system-label{
  animation:smplLabelClose .56s ease forwards !important;
}

@keyframes smplHiddenSystemClose{
  0%{
    opacity:1;
    transform:translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0) rotateX(var(--logo-rx)) rotateY(var(--logo-ry)) scale(1);
    filter:drop-shadow(0 46px 120px rgba(0,0,0,.46)) drop-shadow(0 0 72px rgba(255,255,255,.14));
  }
  32%{
    opacity:.94;
    transform:translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0) rotateX(calc(var(--logo-rx) * 1.15)) rotateY(calc(var(--logo-ry) * 1.15)) scale(.98);
  }
  72%{
    opacity:.52;
    transform:translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0) rotateX(calc(var(--logo-rx) * 1.35)) rotateY(calc(var(--logo-ry) * 1.35)) scale(.88);
    filter:drop-shadow(0 30px 72px rgba(0,0,0,.28)) drop-shadow(0 0 30px rgba(255,255,255,.08));
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y) + 10px), 0) rotateX(calc(var(--logo-rx) * 1.6)) rotateY(calc(var(--logo-ry) * 1.6)) scale(.72);
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.14));
  }
}
@keyframes smplCoreClose{
  0%{ transform:translate3d(-50%,-50%,60px) scale(1); opacity:1; filter:none; }
  56%{ transform:translate3d(-50%,-50%,40px) scale(.92); opacity:.88; }
  100%{ transform:translate3d(-50%,-50%,8px) scale(.64); opacity:0; filter:blur(1.4px); }
}
@keyframes smplLogoClose{
  0%{ opacity:.96; transform:scale(1); filter:drop-shadow(0 0 18px rgba(255,255,255,.18)) drop-shadow(0 0 36px rgba(255,255,255,.12)); }
  48%{ opacity:.86; transform:scale(.92); }
  100%{ opacity:0; transform:scale(.58); filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
@keyframes smplLabelClose{
  to{ opacity:0; transform:translateY(8px) translateZ(84px) scale(.94); }
}

/* Cursor-reactive buttons / controls */
.btn,
.mode-toggle,
.menu a,
.burger,
.v27-acc-trigger,
[role="button"]{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  --proximity: 0;
  --glow-x: 50%;
  --glow-y: 50%;
}
.btn::after,
.mode-toggle::after,
.menu a::after,
.burger::after,
.v27-acc-trigger::after,
[role="button"]::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:calc(var(--proximity) * .95);
  background:
    radial-gradient(circle 110px at var(--glow-x) var(--glow-y),
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.14) 18%,
      rgba(255,255,255,.06) 36%,
      rgba(255,255,255,0) 68%);
  transition:opacity .14s linear, transform .16s ease;
  transform:scale(calc(1 + var(--proximity) * .015));
  z-index:0;
}
.btn > *,
.mode-toggle > *,
.menu a > *,
.burger > *,
.v27-acc-trigger > *,
[role="button"] > *{
  position:relative;
  z-index:1;
}



/* ===== SMPL v63: fixed flashlight + beautiful tearable curtain over directions grid ===== */

/* Flashlight fix: the light layer and hidden system must always use viewport cursor coords */
body.flashlight-mode .flashlight-layer{
  z-index:5100 !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle 230px at var(--mx,50vw) var(--my,50vh),
      rgba(255,255,255,.22) 0%,
      rgba(255,248,222,.12) 18%,
      rgba(255,255,255,.05) 34%,
      rgba(0,0,0,.12) 52%,
      rgba(0,0,0,.74) 80%,
      rgba(0,0,0,.96) 100%),
    radial-gradient(circle 780px at var(--mx,50vw) var(--my,50vh),
      rgba(255,247,214,.08) 0%,
      rgba(255,255,255,.03) 20%,
      rgba(0,0,0,.24) 52%,
      rgba(0,0,0,.82) 86%,
      rgba(0,0,0,1) 100%) !important;
}
body.flashlight-mode .smpl-hidden-system{
  z-index:5150 !important;
}
body.flashlight-mode .cursor-core,
body.flashlight-mode .cursor-ring{
  z-index:5300 !important;
}
body.flashlight-mode .v63-eco-curtain{
  display:none !important;
}

/* opening effect, custom SMPL style */
.smpl-opening{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.11), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, #050608 0%, #101419 45%, #050608 100%);
  overflow:hidden;
  pointer-events:none;
  animation:smplOpeningFade 3.55s cubic-bezier(.22,1,.36,1) forwards;
}
.smpl-opening::before,
.smpl-opening::after{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.04) 12%,
      rgba(255,255,255,.34) 16%,
      rgba(255,255,255,.055) 20%,
      transparent 28%,
      transparent 100%);
  transform:translateX(-120%) skewX(-16deg);
  animation:smplOpeningLightSweep 2.35s cubic-bezier(.22,1,.36,1) forwards;
}
.smpl-opening::after{
  animation-delay:.38s;
  opacity:.72;
  filter:blur(8px);
}
.smpl-opening-core{
  position:relative;
  width:min(42vw, 420px);
  height:min(42vw, 420px);
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  animation:smplOpeningCore 3.35s cubic-bezier(.22,1,.36,1) forwards;
}
.smpl-opening-logo{
  width:64%;
  max-width:260px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.22))
    drop-shadow(0 32px 66px rgba(0,0,0,.34));
  transform:translateZ(44px);
  opacity:0;
  animation:smplOpeningLogo 2.85s cubic-bezier(.22,1,.36,1) forwards;
}
.smpl-opening-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.035),
    0 0 80px rgba(255,255,255,.05);
  animation:smplOpeningRing 3.1s cubic-bezier(.22,1,.36,1) forwards;
}
.smpl-opening-ring:nth-child(2){ inset:16%; animation-delay:.08s; }
.smpl-opening-ring:nth-child(3){ inset:31%; animation-delay:.16s; }
.smpl-opening-lines{
  position:absolute;
  inset:-12%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 34px,
      rgba(255,255,255,.045) 34px 35px,
      transparent 35px 72px);
  opacity:0;
  transform:perspective(900px) rotateX(62deg) translateY(40px);
  animation:smplOpeningLines 2.8s ease forwards;
}
.smpl-opening-title{
  position:absolute;
  bottom:-58px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(244,247,250,.84);
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  animation:smplOpeningText 2.5s ease forwards .55s;
}
body.smpl-opening-lock{ overflow:hidden; }

@keyframes smplOpeningFade{
  0%,78%{opacity:1; visibility:visible;}
  100%{opacity:0; visibility:hidden;}
}
@keyframes smplOpeningLightSweep{
  0%{transform:translateX(-130%) skewX(-16deg);}
  58%{transform:translateX(18%) skewX(-16deg);}
  100%{transform:translateX(130%) skewX(-16deg);}
}
@keyframes smplOpeningCore{
  0%{transform:scale(.78) rotateX(18deg) rotateY(-18deg);}
  42%{transform:scale(1) rotateX(0) rotateY(0);}
  78%{transform:scale(1.03) rotateX(0) rotateY(0);}
  100%{transform:scale(1.24) rotateX(0) rotateY(0);}
}
@keyframes smplOpeningLogo{
  0%{opacity:0; transform:translateZ(44px) scale(.74); filter:blur(7px) drop-shadow(0 0 0 rgba(255,255,255,0));}
  42%{opacity:1; transform:translateZ(52px) scale(1); filter:blur(0) drop-shadow(0 0 28px rgba(255,255,255,.22));}
  78%{opacity:1; transform:translateZ(58px) scale(1.02);}
  100%{opacity:0; transform:translateZ(80px) scale(1.7); filter:blur(8px) drop-shadow(0 0 58px rgba(255,255,255,.32));}
}
@keyframes smplOpeningRing{
  0%{opacity:0; transform:scale(.56); border-color:rgba(255,255,255,.04);}
  42%{opacity:1; transform:scale(1); border-color:rgba(255,255,255,.16);}
  78%{opacity:.78; transform:scale(1.06);}
  100%{opacity:0; transform:scale(1.9);}
}
@keyframes smplOpeningLines{
  0%{opacity:0; transform:perspective(900px) rotateX(62deg) translateY(90px);}
  45%{opacity:.48; transform:perspective(900px) rotateX(62deg) translateY(10px);}
  100%{opacity:0; transform:perspective(900px) rotateX(62deg) translateY(-90px);}
}
@keyframes smplOpeningText{
  0%{opacity:0; letter-spacing:.62em; transform:translateX(-50%) translateY(8px);}
  35%,75%{opacity:.86; letter-spacing:.42em; transform:translateX(-50%) translateY(0);}
  100%{opacity:0; transform:translateX(-50%) translateY(-8px);}
}

/* curtain sits exactly on the 5-directions grid, not half the page */
.v24-eco-layout{
  overflow:hidden !important;
  min-height:500px;
}
.v24-eco-item,
.v24-eco-orbit{
  position:relative;
  z-index:2;
}
.v63-eco-curtain{
  --curtain-x:0px;
  --curtain-y:0px;
  --curtain-rot:0deg;
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:auto;
  transform:
    translate3d(var(--curtain-x), var(--curtain-y), 0)
    rotate(var(--curtain-rot));
  transform-origin:50% 8%;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .45s ease, filter .45s ease;
  filter:
    drop-shadow(0 38px 58px rgba(24,30,36,.20))
    drop-shadow(0 12px 22px rgba(24,30,36,.10));
}
.v63-eco-curtain.is-dragging{
  transition:none;
  cursor:grabbing;
}
.v63-curtain-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
  touch-action:none;
  z-index:1;
}
.v63-curtain-canvas:active{ cursor:grabbing; }
.v63-curtain-rail{
  position:absolute;
  left:4%;
  right:4%;
  top:12px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(190,200,210,.98));
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 12px 28px rgba(30,40,50,.12);
  z-index:4;
  pointer-events:none;
}
.v63-curtain-handle{
  position:absolute;
  left:50%;
  top:40px;
  transform:translateX(-50%);
  z-index:5;
  padding:9px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(112,124,136,.18);
  backdrop-filter:blur(12px);
  color:#535e68;
  font-size:10px;
  letter-spacing:.30em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 16px 34px rgba(30,38,46,.10);
}

/* after tear: canvas fades, two fabric chunks slide away, not instant disappear */
.v63-curtain-piece,
.v63-curtain-shard{
  position:absolute;
  top:28px;
  bottom:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(180deg, #f8fafc 0%, #e8eef4 28%, #d4dee8 66%, #bcc8d4 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.72) 0 18px,
      rgba(214,224,232,.92) 18px 36px,
      rgba(255,255,255,.26) 36px 50px,
      rgba(188,202,214,.82) 50px 74px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 -28px 40px rgba(120,135,150,.10) inset;
}
.v63-piece-left{
  left:3%;
  width:51%;
  clip-path:polygon(0 0, 100% 0, 92% 17%, 98% 32%, 88% 49%, 96% 67%, 86% 82%, 92% 100%, 0 100%);
}
.v63-piece-right{
  right:3%;
  width:51%;
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 6% 100%, 13% 82%, 4% 66%, 15% 48%, 6% 30%, 16% 14%);
}
.v63-curtain-shard{
  width:12%;
  height:34%;
  top:38%;
  left:44%;
  bottom:auto;
  border-radius:12px;
  clip-path:polygon(16% 0, 100% 10%, 78% 100%, 0 76%);
}
.v63-curtain-shard.s2{
  width:9%;
  height:24%;
  top:58%;
  left:52%;
  clip-path:polygon(0 12%, 88% 0, 100% 88%, 20% 100%);
}
.v63-eco-curtain.is-torn .v63-curtain-canvas,
.v63-eco-curtain.is-torn .v63-curtain-rail,
.v63-eco-curtain.is-torn .v63-curtain-handle{
  opacity:0;
  transition:opacity .24s ease;
}
.v63-eco-curtain.is-torn .v63-curtain-piece,
.v63-eco-curtain.is-torn .v63-curtain-shard{
  opacity:1;
}
.v63-eco-curtain.is-torn.to-right .v63-piece-left{
  animation:v63PieceLeftTearRight 1.35s cubic-bezier(.22,1,.36,1) forwards;
}
.v63-eco-curtain.is-torn.to-right .v63-piece-right{
  animation:v63PieceRightTearRight 1.35s cubic-bezier(.22,1,.36,1) forwards;
}
.v63-eco-curtain.is-torn.to-left .v63-piece-left{
  animation:v63PieceLeftTearLeft 1.35s cubic-bezier(.22,1,.36,1) forwards;
}
.v63-eco-curtain.is-torn.to-left .v63-piece-right{
  animation:v63PieceRightTearLeft 1.35s cubic-bezier(.22,1,.36,1) forwards;
}
.v63-eco-curtain.is-torn .v63-curtain-shard.s1{
  animation:v63ShardFall1 1.25s cubic-bezier(.22,1,.36,1) forwards;
}
.v63-eco-curtain.is-torn .v63-curtain-shard.s2{
  animation:v63ShardFall2 1.25s cubic-bezier(.22,1,.36,1) forwards;
}
.v24-eco-layout.curtain-removed .v24-eco-item{
  animation:v63DirectionReveal .72s cubic-bezier(.22,1,.36,1) both;
}

@keyframes v63PieceLeftTearRight{
  0%{transform:translate3d(0,0,0) rotate(0); opacity:1;}
  100%{transform:translate3d(-44vw,28px,0) rotate(-11deg); opacity:.18;}
}
@keyframes v63PieceRightTearRight{
  0%{transform:translate3d(0,0,0) rotate(0); opacity:1;}
  100%{transform:translate3d(96vw,34px,0) rotate(16deg); opacity:0;}
}
@keyframes v63PieceLeftTearLeft{
  0%{transform:translate3d(0,0,0) rotate(0); opacity:1;}
  100%{transform:translate3d(-96vw,34px,0) rotate(-16deg); opacity:0;}
}
@keyframes v63PieceRightTearLeft{
  0%{transform:translate3d(0,0,0) rotate(0); opacity:1;}
  100%{transform:translate3d(44vw,28px,0) rotate(11deg); opacity:.18;}
}
@keyframes v63ShardFall1{
  0%{transform:translate3d(0,0,0) rotate(0); opacity:1;}
  100%{transform:translate3d(-90px,240px,0) rotate(-34deg); opacity:0;}
}
@keyframes v63ShardFall2{
  0%{transform:translate3d(0,0,0) rotate(0); opacity:1;}
  100%{transform:translate3d(120px,220px,0) rotate(39deg); opacity:0;}
}
@keyframes v63DirectionReveal{
  from{opacity:.32; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

/* dark theme curtain */
body.dark-theme .v63-curtain-rail{
  background:linear-gradient(180deg, rgba(148,162,176,.98), rgba(48,60,72,.96));
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 12px 28px rgba(0,0,0,.30);
}
body.dark-theme .v63-curtain-handle{
  background:rgba(13,17,22,.78);
  color:#d9e0e7;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
body.dark-theme .v63-curtain-piece,
body.dark-theme .v63-curtain-shard{
  background:
    linear-gradient(180deg, #354655 0%, #263440 28%, #1b2731 66%, #10191f 100%),
    repeating-linear-gradient(90deg,
      rgba(128,149,168,.18) 0 18px,
      rgba(44,58,69,.92) 18px 36px,
      rgba(156,176,191,.10) 36px 50px,
      rgba(34,45,54,.94) 50px 74px);
}
@media(max-width:720px){
  .v24-eco-layout{min-height:580px;}
  .v63-curtain-handle{letter-spacing:.20em;}
}



/* ===== SMPL v64: remove curtain and fix flashlight reveal layer ===== */

/* kill all curtain versions completely */
.v60-eco-curtain,
.v61-cloth-curtain,
.v62-section-curtain,
.v63-eco-curtain{
  display:none !important;
  pointer-events:none !important;
  visibility:hidden !important;
}

/* restore directions grid without curtain constraints */
.v24-eco-layout{
  overflow:visible !important;
  min-height:initial !important;
}

/* IMPORTANT:
   Hidden system must sit UNDER the flashlight darkness.
   In previous version it was above the flashlight layer, so it stayed visible in the center
   while the flashlight cursor was elsewhere. */
body.flashlight-mode .smpl-hidden-system{
  z-index:96 !important;
  opacity:1 !important;
  pointer-events:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* flashlight overlay above hidden system: black outside cursor, transparent/soft light at cursor */
body.flashlight-mode .flashlight-layer{
  z-index:140 !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle 150px at var(--mx,50vw) var(--my,50vh),
      rgba(255,255,255,.10) 0%,
      rgba(255,248,222,.055) 20%,
      rgba(255,255,255,.018) 38%,
      rgba(0,0,0,.18) 54%,
      rgba(0,0,0,.86) 78%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 430px at var(--mx,50vw) var(--my,50vh),
      rgba(255,247,214,.055) 0%,
      rgba(255,255,255,.018) 22%,
      rgba(0,0,0,.42) 58%,
      rgba(0,0,0,.92) 88%,
      rgba(0,0,0,1) 100%) !important;
  mix-blend-mode:normal !important;
  backdrop-filter:none !important;
}

/* keep the small flashlight cursor above the light layer */
body.flashlight-mode .cursor-core,
body.flashlight-mode .cursor-ring{
  z-index:180 !important;
}

/* make the hidden system itself darker, so only the beam gives it meaning */
body.flashlight-mode .smpl-system-grid{
  opacity:.48 !important;
}
body.flashlight-mode .smpl-system-svg .system-line{
  stroke:rgba(238,244,248,.34) !important;
}
body.flashlight-mode .smpl-system-svg .system-line.strong{
  stroke:rgba(255,255,255,.58) !important;
}
body.flashlight-mode .smpl-system-label{
  opacity:.78 !important;
}
body.flashlight-mode .smpl-system-logo{
  opacity:.82 !important;
}

/* this old local hotspot made the object glow independently of the flashlight; disable it */
body.flashlight-mode .smpl-hidden-system::after{
  display:none !important;
  opacity:0 !important;
}

/* while exiting, keep logic clean */
body.flashlight-returning .smpl-hidden-system{
  z-index:96 !important;
}
body.flashlight-returning .flashlight-layer{
  z-index:140 !important;
}



/* ===== SMPL v70: click-anywhere flashlight cycle ===== */

/* nav/button remains visible and clickable on entering */
body.flashlight-mode .nav{
  z-index:5600 !important;
}
body.flashlight-mode [data-flashlight-toggle]{
  position:relative !important;
  z-index:5700 !important;
  pointer-events:auto !important;
}

/* base layer */
body.flashlight-mode .flashlight-layer{
  z-index:140 !important;
  opacity:1 !important;
  pointer-events:none !important;
}
body.flashlight-mode .smpl-hidden-system{
  z-index:96 !important;
  pointer-events:none !important;
}
body.flashlight-mode .cursor-core,
body.flashlight-mode .cursor-ring{
  z-index:5800 !important;
}

/* Stage 1: light immediately visible */
body.flashlight-mode.flashlight-level-1 .flashlight-layer{
  background:
    radial-gradient(circle 150px at var(--mx,50vw) var(--my,50vh),
      rgba(255,255,255,.10) 0%,
      rgba(255,248,222,.055) 20%,
      rgba(255,255,255,.018) 38%,
      rgba(0,0,0,.18) 54%,
      rgba(0,0,0,.86) 78%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 430px at var(--mx,50vw) var(--my,50vh),
      rgba(255,247,214,.055) 0%,
      rgba(255,255,255,.018) 22%,
      rgba(0,0,0,.42) 58%,
      rgba(0,0,0,.92) 88%,
      rgba(0,0,0,1) 100%) !important;
}

/* Stage 2: bigger halo */
body.flashlight-mode.flashlight-level-2 .flashlight-layer{
  background:
    radial-gradient(circle 235px at var(--mx,50vw) var(--my,50vh),
      rgba(255,255,255,.16) 0%,
      rgba(255,248,222,.09) 18%,
      rgba(255,255,255,.03) 38%,
      rgba(0,0,0,.14) 56%,
      rgba(0,0,0,.80) 80%,
      rgba(0,0,0,1) 100%),
    radial-gradient(circle 620px at var(--mx,50vw) var(--my,50vh),
      rgba(255,247,214,.08) 0%,
      rgba(255,255,255,.028) 24%,
      rgba(0,0,0,.34) 58%,
      rgba(0,0,0,.88) 88%,
      rgba(0,0,0,1) 100%) !important;
}

/* Stage 3: even bigger halo */
body.flashlight-mode.flashlight-level-3 .flashlight-layer{
  background:
    radial-gradient(circle 340px at var(--mx,50vw) var(--my,50vh),
      rgba(255,255,255,.22) 0%,
      rgba(255,248,222,.13) 20%,
      rgba(255,255,255,.042) 40%,
      rgba(0,0,0,.11) 58%,
      rgba(0,0,0,.72) 82%,
      rgba(0,0,0,.98) 100%),
    radial-gradient(circle 860px at var(--mx,50vw) var(--my,50vh),
      rgba(255,247,214,.11) 0%,
      rgba(255,255,255,.035) 24%,
      rgba(0,0,0,.26) 58%,
      rgba(0,0,0,.82) 88%,
      rgba(0,0,0,.98) 100%) !important;
}

/* staged scene readability */
body.flashlight-mode.flashlight-level-1 .smpl-system-grid{ opacity:.46 !important; }
body.flashlight-mode.flashlight-level-2 .smpl-system-grid{ opacity:.60 !important; }
body.flashlight-mode.flashlight-level-3 .smpl-system-grid{ opacity:.76 !important; }

body.flashlight-mode.flashlight-level-1 .smpl-system-svg .system-line{ stroke:rgba(238,244,248,.34) !important; }
body.flashlight-mode.flashlight-level-2 .smpl-system-svg .system-line{ stroke:rgba(238,244,248,.46) !important; }
body.flashlight-mode.flashlight-level-3 .smpl-system-svg .system-line{ stroke:rgba(238,244,248,.58) !important; }

body.flashlight-mode.flashlight-level-1 .smpl-system-svg .system-line.strong{ stroke:rgba(255,255,255,.58) !important; }
body.flashlight-mode.flashlight-level-2 .smpl-system-svg .system-line.strong{ stroke:rgba(255,255,255,.74) !important; }
body.flashlight-mode.flashlight-level-3 .smpl-system-svg .system-line.strong{ stroke:rgba(255,255,255,.90) !important; }

/* cursor dot is slightly alive */
body.flashlight-mode .cursor-core{
  animation:smplFlashDotPulse 1.8s ease-in-out infinite;
}
@keyframes smplFlashDotPulse{
  0%,100%{
    box-shadow:
      0 0 10px rgba(255,247,214,.40),
      0 0 22px rgba(255,255,255,.14);
  }
  50%{
    box-shadow:
      0 0 18px rgba(255,247,214,.66),
      0 0 34px rgba(255,255,255,.22);
  }
}



/* ===== SMPL v72: fix ecosystem block + tic-tac-toe mini game ===== */

/* Fix the "Пять направлений" header so it doesn't fall apart */
.v24-eco-head{
  grid-template-columns:minmax(0, 1.05fr) minmax(320px, .72fr) !important;
  align-items:start !important;
  gap:clamp(28px, 5vw, 72px) !important;
  margin-bottom:54px !important;
}
.v24-eco-head > div:first-child{
  min-width:0;
}
.v24-eco-head h2{
  max-width:820px !important;
  word-break:normal !important;
}
.v72-eco-side{
  display:grid;
  gap:24px;
  align-self:start;
}
.v72-eco-side > p{
  color:#697179;
  line-height:1.7;
  margin:0;
  max-width:560px;
}

/* Stabilize directions grid after previous experiments */
.v24-eco-layout{
  overflow:visible !important;
  min-height:auto !important;
  align-items:stretch !important;
}
.v24-eco-item{
  min-width:0;
  z-index:2;
}
.v24-eco-item h3{
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.v24-eco-orbit{
  z-index:1 !important;
}

/* Tic-tac-toe */
.v72-tic{
  position:relative;
  width:min(100%, 360px);
  margin-left:auto;
  padding:18px;
  border:1px solid rgba(90,98,106,.14);
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.18));
  box-shadow:
    0 26px 70px rgba(30,36,42,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  overflow:hidden;
  isolation:isolate;
}
.v72-tic::before{
  content:"";
  position:absolute;
  inset:-34%;
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.44), transparent 28%),
    conic-gradient(from 120deg, transparent 0 26%, rgba(120,132,145,.08) 34%, transparent 48% 100%);
  opacity:.86;
  animation:v72TicAmbient 9s ease-in-out infinite;
  z-index:-1;
}
.v72-tic-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.v72-tic-head span{
  color:#858d96;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.v72-tic-head b{
  color:#4f5963;
  font-size:12px;
  letter-spacing:.16em;
  font-weight:560;
}
.v72-tic-board{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.v72-tic-cell{
  aspect-ratio:1 / 1;
  border:1px solid rgba(90,98,106,.12);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.24));
  color:#1f2429;
  font-size:clamp(30px, 4vw, 46px);
  font-weight:520;
  letter-spacing:-.08em;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}
.v72-tic-cell:hover{
  transform:translateY(-2px);
  border-color:rgba(90,98,106,.28);
  box-shadow:0 14px 28px rgba(30,36,42,.08);
}
.v72-tic-cell:active{
  transform:translateY(0) scale(.98);
}
.v72-tic-cell.is-x{
  color:#11161b;
  text-shadow:0 10px 24px rgba(20,24,30,.10);
}
.v72-tic-cell.is-o{
  color:#7d8791;
}
.v72-tic-cell.is-win{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(230,236,242,.42));
  border-color:rgba(40,50,60,.30);
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 18px 38px rgba(30,36,42,.10);
}
.v72-tic-score{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.v72-tic-score span{
  min-height:48px;
  border:1px solid rgba(90,98,106,.10);
  border-radius:16px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:2px;
  background:rgba(255,255,255,.26);
}
.v72-tic-score em{
  color:#8a929a;
  font-style:normal;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.v72-tic-score strong{
  color:#1f2429;
  font-size:18px;
  font-weight:560;
}

@keyframes v72TicAmbient{
  0%,100%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(18deg) scale(1.04);}
}

/* Dark theme */
body.dark-theme .v72-eco-side > p{
  color:#c1c7cc;
}
body.dark-theme .v72-tic{
  border-color:rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow:
    0 28px 76px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark-theme .v72-tic-head b,
body.dark-theme .v72-tic-score strong,
body.dark-theme .v72-tic-cell.is-x{
  color:#f3f6f8;
}
body.dark-theme .v72-tic-head span,
body.dark-theme .v72-tic-score em,
body.dark-theme .v72-tic-cell.is-o{
  color:#a9b2bb;
}
body.dark-theme .v72-tic-cell{
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  color:#f3f6f8;
}
body.dark-theme .v72-tic-cell:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
body.dark-theme .v72-tic-cell.is-win{
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
}
body.dark-theme .v72-tic-score span{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
}

@media(max-width:980px){
  .v24-eco-head{
    grid-template-columns:1fr !important;
  }
  .v72-tic{
    width:min(100%, 420px);
    margin-left:0;
  }
}
@media(max-width:720px){
  .v24-eco-head{
    gap:24px !important;
  }
  .v72-tic{
    padding:14px;
    border-radius:22px;
  }
  .v72-tic-cell{
    border-radius:14px;
  }
}



/* ===== SMPL v73: ecosystem align + minimal tic tac toe ===== */

/* Header cleaner and aligned */
.v24-eco-head{
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  align-items:end !important;
  gap:clamp(28px, 4.6vw, 72px) !important;
  margin-bottom:42px !important;
}
.v24-eco-head h2{
  max-width:760px !important;
  margin:0 !important;
}
.v72-eco-side{
  display:block !important;
  align-self:end !important;
}
.v72-eco-side > p{
  max-width:520px !important;
  margin:0 !important;
}

/* Rebuild the 5 directions grid with cleaner alignment */
.v24-eco-layout{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  border-top:1px solid rgba(90,98,106,.12);
  align-items:stretch;
}
.v24-eco-item{
  min-width:0;
  min-height:228px;
  padding:24px 26px 28px 0 !important;
  display:grid;
  align-content:start;
  grid-template-rows:auto auto 1fr;
}
.v24-eco-item:nth-child(1){ grid-column:1 / span 4 !important; }
.v24-eco-item:nth-child(2){ grid-column:5 / span 4 !important; }
.v24-eco-item:nth-child(3){ grid-column:9 / span 4 !important; }
.v24-eco-item:nth-child(4){ grid-column:1 / span 5 !important; border-right:1px solid rgba(90,98,106,.10); }
.v24-eco-item:nth-child(5){ grid-column:6 / span 4 !important; padding-left:24px !important; }

.v24-eco-item h3{
  font-size:clamp(34px, 4.25vw, 68px) !important;
  line-height:.90 !important;
  margin:26px 0 22px !important;
}
.v24-eco-item p{
  max-width:340px !important;
}
.v24-eco-item i{
  width:46px !important;
  height:46px !important;
  right:20px !important;
  top:24px !important;
}
.v24-eco-item i::after{
  width:5px !important;
  height:5px !important;
  right:11px !important;
  bottom:10px !important;
}

/* Orbit moved to the far right bottom and softened */
.v24-eco-orbit{
  grid-column:10 / span 3 !important;
  grid-row:2 !important;
  right:16px !important;
  bottom:26px !important;
  width:220px !important;
  height:220px !important;
  opacity:.34 !important;
}
.v24-eco-orbit span:nth-child(2){ inset:34px !important; }
.v24-eco-orbit span:nth-child(3){ inset:82px !important; }
.v24-eco-orbit b{
  right:56px !important;
  bottom:22px !important;
}

/* Minimal inline tic tac toe as part of the grid */
.v72-tic.v72-tic-inline{
  grid-column:10 / span 3 !important;
  grid-row:2 !important;
  position:relative;
  z-index:3;
  width:auto !important;
  min-height:228px;
  margin:0 !important;
  padding:24px 0 20px 24px !important;
  border-left:1px solid rgba(90,98,106,.10);
  border-bottom:1px solid rgba(90,98,106,.12);
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:auto !important;
}
.v72-tic.v72-tic-inline::before{
  display:none !important;
}
.v72-tic-inline .v72-tic-head{
  margin:0 0 14px !important;
  padding-right:14px;
}
.v72-tic-inline .v72-tic-head span{
  font-size:10px !important;
  letter-spacing:.24em !important;
}
.v72-tic-inline .v72-tic-head b{
  font-size:11px !important;
  letter-spacing:.16em !important;
  font-weight:520 !important;
}
.v72-tic-inline .v72-tic-board{
  width:100%;
  max-width:174px;
  gap:6px !important;
}
.v72-tic-inline .v72-tic-cell{
  border-radius:12px !important;
  border:1px solid rgba(90,98,106,.10) !important;
  background:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
  font-size:clamp(22px, 2vw, 30px) !important;
}
.v72-tic-inline .v72-tic-cell:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(90,98,106,.24) !important;
}
.v72-tic-inline .v72-tic-cell.is-win{
  border-color:rgba(40,50,60,.26) !important;
  background:rgba(255,255,255,.38) !important;
  box-shadow:none !important;
}
.v72-tic-inline .v72-tic-score{
  max-width:174px;
  margin-top:10px !important;
  gap:6px !important;
}
.v72-tic-inline .v72-tic-score span{
  min-height:42px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(90,98,106,.08) !important;
}
.v72-tic-inline .v72-tic-score em{
  font-size:9px !important;
  letter-spacing:.16em !important;
}
.v72-tic-inline .v72-tic-score strong{
  font-size:15px !important;
  font-weight:540 !important;
}

/* Dark theme */
body.dark-theme .v72-tic.v72-tic-inline{
  border-left-color:rgba(255,255,255,.08) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
}
body.dark-theme .v72-tic-inline .v72-tic-cell{
  border-color:rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.035) !important;
}
body.dark-theme .v72-tic-inline .v72-tic-cell:hover{
  border-color:rgba(255,255,255,.18) !important;
}
body.dark-theme .v72-tic-inline .v72-tic-score span{
  background:rgba(255,255,255,.03) !important;
  border-color:rgba(255,255,255,.07) !important;
}
body.dark-theme .v72-tic-inline .v72-tic-cell.is-win{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* Responsive */
@media (max-width: 1100px){
  .v24-eco-item:nth-child(1){ grid-column:1 / span 6 !important; }
  .v24-eco-item:nth-child(2){ grid-column:7 / span 6 !important; }
  .v24-eco-item:nth-child(3){ grid-column:1 / span 6 !important; grid-row:2; }
  .v24-eco-item:nth-child(4){ grid-column:7 / span 6 !important; grid-row:2; border-right:none !important; }
  .v24-eco-item:nth-child(5){ grid-column:1 / span 7 !important; grid-row:3; padding-left:0 !important; }
  .v72-tic.v72-tic-inline{
    grid-column:8 / span 5 !important;
    grid-row:3 !important;
    padding-left:22px !important;
  }
  .v24-eco-orbit{
    grid-column:9 / span 4 !important;
    grid-row:3 !important;
    right:10px !important;
    bottom:12px !important;
    width:180px !important;
    height:180px !important;
  }
}
@media (max-width: 760px){
  .v24-eco-head{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .v24-eco-item:nth-child(1),
  .v24-eco-item:nth-child(2),
  .v24-eco-item:nth-child(3),
  .v24-eco-item:nth-child(4),
  .v24-eco-item:nth-child(5),
  .v72-tic.v72-tic-inline{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    border-right:none !important;
    padding-left:0 !important;
  }
  .v72-tic.v72-tic-inline{
    padding:20px 0 20px 0 !important;
    border-left:none !important;
  }
  .v72-tic-inline .v72-tic-board,
  .v72-tic-inline .v72-tic-score{
    max-width:220px !important;
  }
  .v24-eco-orbit{
    width:160px !important;
    height:160px !important;
    right:0 !important;
    bottom:10px !important;
  }
}



/* ===== SMPL v74: compact about-section curtain ===== */

.v22-copy{
  position:relative;
}
.v74-curtain-panel{
  position:relative;
  margin-top:4px;
  min-height:308px;
  border:1px solid rgba(92,100,108,.12);
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 8%, rgba(255,255,255,.42), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  isolation:isolate;
}
.v74-curtain-text{
  position:relative;
  z-index:1;
  min-height:308px;
  padding:22px 24px 18px;
}
.v74-curtain-text p{
  max-width:620px !important;
  margin:0 0 18px !important;
}
.v74-curtain-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  touch-action:none;
  cursor:grab;
}
.v74-curtain-canvas:active{
  cursor:grabbing;
}
.v74-curtain-hint{
  position:absolute;
  left:24px;
  bottom:18px;
  z-index:4;
  color:#8b9299;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.v74-curtain-helper{
  position:absolute;
  right:24px;
  top:24px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(92,100,108,.14);
  z-index:4;
  pointer-events:none;
  opacity:.92;
  transition:opacity .28s ease, transform .28s ease;
}
.v74-curtain-helper::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.54);
  transform:scale(.84);
}
.v74-curtain-helper span{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  right:10px;
  bottom:9px;
  background:#8f98a1;
}
.v74-curtain-panel.is-touched .v74-curtain-hint,
.v74-curtain-panel.is-touched .v74-curtain-helper{
  opacity:.42;
  transform:translateY(2px);
}

body.dark-theme .v74-curtain-panel{
  border-color:rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 86% 8%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
body.dark-theme .v74-curtain-helper{
  border-color:rgba(255,255,255,.10);
}
body.dark-theme .v74-curtain-helper::before{
  border-color:rgba(255,255,255,.32);
}
body.dark-theme .v74-curtain-helper span{
  background:#c6ced6;
}
body.dark-theme .v74-curtain-hint{
  color:#a2adb7;
}

@media (max-width: 920px){
  .v74-curtain-panel{
    min-height:280px;
  }
  .v74-curtain-text{
    min-height:280px;
    padding:20px 20px 16px;
  }
}
@media (max-width: 680px){
  .v74-curtain-panel{
    min-height:250px;
  }
  .v74-curtain-text{
    min-height:250px;
  }
  .v74-curtain-helper{
    right:16px;
    top:16px;
    width:34px;
    height:34px;
  }
  .v74-curtain-hint{
    left:18px;
    bottom:14px;
    font-size:9px;
  }
}



/* ===== SMPL v75: one-time opening, soft transitions, smoother game, reactive icons ===== */

/* Soft page enter/leave after the first opening */
body.smpl-soft-enter main,
body.smpl-soft-enter header,
body.smpl-soft-enter footer{
  opacity:0;
  transform:translate3d(0, 16px, 0);
  filter:blur(8px);
}
body.smpl-soft-enter.smpl-soft-enter-ready main,
body.smpl-soft-enter.smpl-soft-enter-ready header,
body.smpl-soft-enter.smpl-soft-enter-ready footer{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
  transition:
    opacity .68s cubic-bezier(.22,1,.36,1),
    transform .68s cubic-bezier(.22,1,.36,1),
    filter .68s cubic-bezier(.22,1,.36,1);
}
body.smpl-page-leave main,
body.smpl-page-leave header,
body.smpl-page-leave footer{
  opacity:0 !important;
  transform:translate3d(0, -10px, 0) scale(.992) !important;
  filter:blur(7px) !important;
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1),
    filter .42s cubic-bezier(.22,1,.36,1) !important;
}

/* Smoother tic-tac-toe */
.v72-tic-cell{
  will-change:transform, opacity, border-color, background;
}
.v72-tic-cell.just-played{
  animation:v75TicPlace .42s cubic-bezier(.18,1.35,.32,1) both;
}
.v72-tic.is-thinking .v72-tic-cell:not(.is-x):not(.is-o){
  opacity:.62;
}
.v72-tic.is-resolving .v72-tic-cell{
  transition:
    transform .38s cubic-bezier(.22,1,.36,1),
    opacity .38s ease,
    border-color .38s ease;
}
.v72-tic-cell.is-win{
  animation:v75TicWin .68s cubic-bezier(.22,1,.36,1) both;
}
@keyframes v75TicPlace{
  0%{transform:scale(.68); opacity:.36;}
  58%{transform:scale(1.08); opacity:1;}
  100%{transform:scale(1); opacity:1;}
}
@keyframes v75TicWin{
  0%{transform:translateY(0) scale(1);}
  45%{transform:translateY(-2px) scale(1.045);}
  100%{transform:translateY(0) scale(1);}
}

/* Cursor-reactive icons/elements */
.brand-mark,
.mode-toggle,
.burger,
.flash-icon,
.mode-icon,
.v22-board-orbit i,
.v23-orbit-cluster i,
.v24-eco-item i,
.v24-eco-orbit b,
.v27-acc-ring,
.v72-tic-cell,
.v74-curtain-helper,
.hero-ring-dot{
  --icon-mx:0px;
  --icon-my:0px;
  --icon-power:0;
  transform:translate3d(var(--icon-mx), var(--icon-my), 0);
  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease,
    opacity .34s ease;
}
.cord-knob-svg{
  --icon-mx:0px;
  --icon-my:0px;
  --icon-power:0;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(calc(var(--icon-mx) * .18) calc(var(--icon-my) * .18) calc(3px + 8px * var(--icon-power)) rgba(40,48,56,.16));
  transition:filter .34s ease;
}
.icon-reacting.brand-mark,
.icon-reacting.mode-toggle,
.icon-reacting.burger,
.icon-reacting.v24-eco-item i,
.icon-reacting.v27-acc-ring,
.icon-reacting.v74-curtain-helper{
  border-color:rgba(45,52,60,.22) !important;
  box-shadow:
    0 10px 24px rgba(30,36,42, calc(.04 + .10 * var(--icon-power))),
    0 0 0 1px rgba(255,255,255,.36) inset;
}
.icon-reacting.v24-eco-orbit b,
.icon-reacting.v23-orbit-cluster i,
.icon-reacting.v22-board-orbit i,
.icon-reacting.hero-ring-dot{
  box-shadow:
    0 0 0 calc(8px + 8px * var(--icon-power)) rgba(255,255,255,.08),
    0 0 calc(18px + 26px * var(--icon-power)) rgba(100,110,120,.16);
}
body.dark-theme .icon-reacting.brand-mark,
body.dark-theme .icon-reacting.mode-toggle,
body.dark-theme .icon-reacting.burger,
body.dark-theme .icon-reacting.v24-eco-item i,
body.dark-theme .icon-reacting.v27-acc-ring,
body.dark-theme .icon-reacting.v74-curtain-helper{
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0, calc(.12 + .18 * var(--icon-power))),
    0 0 0 1px rgba(255,255,255,.08) inset;
}



/* ===== SMPL v76: restore theme pull-cord ===== */

/* The pull cord must stay independent from page transitions and cursor magnet effects */
.pull-cord{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:6200 !important;
}

/* Opening/soft page transitions must not hide or move the cord */
body.smpl-soft-enter .pull-cord,
body.smpl-soft-enter.smpl-soft-enter-ready .pull-cord,
body.smpl-page-leave .pull-cord{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}

/* Keep invisible hit area alive. If opacity/visibility is changed, dragging breaks. */
.cord-handle{
  display:block !important;
  visibility:visible !important;
  opacity:0 !important;
  pointer-events:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.cord-handle::before,
.cord-handle::after,
.cord-handle span{
  display:none !important;
}

/* Theme button remains only a visual anchor; the cord is the real switch */
[data-theme-toggle]{
  pointer-events:none !important;
}



/* ===== SMPL v77: stable nav on transitions + active page + refined curtain ===== */

/* Header/nav must not blink, move or disappear during page transitions */
body.smpl-soft-enter header,
body.smpl-soft-enter.smpl-soft-enter-ready header,
body.smpl-page-leave header,
body.smpl-page-leave .nav,
body.smpl-soft-enter .nav,
body.smpl-soft-enter.smpl-soft-enter-ready .nav{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateX(-50%) !important;
  filter:none !important;
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

/* Only content changes when moving between pages */
body.smpl-soft-enter main,
body.smpl-soft-enter footer{
  opacity:0;
  transform:translate3d(0, 14px, 0);
  filter:blur(6px);
}
body.smpl-soft-enter.smpl-soft-enter-ready main,
body.smpl-soft-enter.smpl-soft-enter-ready footer{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    transform .58s cubic-bezier(.22,1,.36,1),
    filter .58s cubic-bezier(.22,1,.36,1);
}
body.smpl-page-leave main,
body.smpl-page-leave footer{
  opacity:0 !important;
  transform:translate3d(0, -8px, 0) scale(.995) !important;
  filter:blur(5px) !important;
  transition:
    opacity .34s cubic-bezier(.22,1,.36,1),
    transform .34s cubic-bezier(.22,1,.36,1),
    filter .34s cubic-bezier(.22,1,.36,1) !important;
}

/* Active page highlight */
.menu a.active,
.menu a[aria-current="page"]{
  background:rgba(255,255,255,.82) !important;
  color:#1f2225 !important;
  box-shadow:
    0 10px 26px rgba(24,28,32,.06),
    inset 0 0 0 1px rgba(255,255,255,.72);
}
.menu a.active::after,
.menu a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.38;
  transform:translateX(-50%);
}
.menu a{
  position:relative;
}
body.dark-theme .menu a.active,
body.dark-theme .menu a[aria-current="page"]{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Curtain: cleaner, smaller, lives inside its own text block */
.v74-curtain-panel{
  min-height:268px !important;
  border-radius:0 !important;
  border-color:rgba(92,100,108,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
  box-shadow:none !important;
}
.v74-curtain-text{
  min-height:268px !important;
  padding:24px 26px 20px !important;
}
.v74-curtain-canvas{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  contain:strict;
}
.v74-curtain-hint{
  left:26px !important;
  bottom:18px !important;
  opacity:.72;
}
.v74-curtain-helper{
  right:26px !important;
  top:26px !important;
  width:38px !important;
  height:38px !important;
}
.v74-curtain-panel.is-revealing .v74-curtain-hint,
.v74-curtain-panel.is-revealed .v74-curtain-hint,
.v74-curtain-panel.is-revealing .v74-curtain-helper,
.v74-curtain-panel.is-revealed .v74-curtain-helper{
  opacity:0 !important;
  transform:translateY(3px) scale(.96) !important;
}
body.dark-theme .v74-curtain-panel{
  border-color:rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
}



/* ===== SMPL v78: pull-cord real fix ===== */

/* Do NOT transform the theme toggle; the cord uses it as a fixed anchor. */
[data-theme-toggle],
[data-theme-toggle].icon-reacting,
[data-theme-toggle] .mode-icon,
[data-theme-toggle] .mode-icon.icon-reacting{
  transform:none !important;
}

/* Do NOT set CSS transform on the SVG knob.
   Its actual position is controlled by the SVG transform attribute from app.js. */
.cord-knob-svg{
  transition:filter .24s ease !important;
}

/* Keep cord visible, independent and clickable above everything */
.pull-cord{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:6200 !important;
}
.cord-svg{
  pointer-events:none !important;
}
.cord-handle{
  visibility:visible !important;
  opacity:0 !important;
  pointer-events:auto !important;
  cursor:grab !important;
}
.cord-handle:active{
  cursor:grabbing !important;
}

/* During page transitions only content moves, never the cord */
body.smpl-soft-enter .pull-cord,
body.smpl-soft-enter.smpl-soft-enter-ready .pull-cord,
body.smpl-page-leave .pull-cord{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}



/* ===== SMPL v79: restore normal site clicks ===== */

/* Flashlight controller no longer captures the whole document.
   Keep the button clickable when flashlight is active, but all other site clicks work normally. */
body.flashlight-mode .nav{
  z-index:5600 !important;
}
body.flashlight-mode [data-flashlight-toggle]{
  position:relative !important;
  z-index:5700 !important;
  pointer-events:auto !important;
}

/* Safety: decorative flashlight layers never catch clicks */
.flashlight-layer,
.flashlight-return-layer,
.smpl-hidden-system{
  pointer-events:none !important;
}



/* ===== SMPL v80: cord reacts only from the round knob ===== */

/* Big cord wrapper is visual only and must not catch page clicks */
.pull-cord{
  pointer-events:none !important;
}

/* SVG/rope/hint also do not catch clicks */
.cord-svg,
.cord-anchor,
.cord-hint{
  pointer-events:none !important;
}

/* Only the invisible round hit area over the knob is draggable */
.cord-handle{
  pointer-events:auto !important;
  visibility:visible !important;
  opacity:0 !important;
  cursor:grab !important;
}
.cord-handle:active{
  cursor:grabbing !important;
}



/* ===== SMPL v81: fixed flashlight + beautiful light curtain ===== */

/* Flashlight stays clickable from button; in active mode, scene clicks can advance again */
[data-flashlight-toggle]{
  pointer-events:auto !important;
  position:relative !important;
  z-index:5800 !important;
}
body.flashlight-mode .nav{
  z-index:5600 !important;
}
body.flashlight-mode .flashlight-layer,
body.flashlight-mode .smpl-hidden-system,
body.flashlight-mode .flashlight-return-layer{
  pointer-events:none !important;
}

/* Cleaner curtain block */
.v74-curtain-panel{
  min-height:286px !important;
  border-radius:24px !important;
  border:1px solid rgba(92,100,108,.115) !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.34), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)) !important;
  box-shadow:
    0 22px 58px rgba(32,38,44,.055),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  overflow:hidden !important;
}
.v74-curtain-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
  z-index:5;
}
.v74-curtain-text{
  min-height:286px !important;
  padding:26px 28px 22px !important;
  display:grid;
  align-content:center;
}
.v74-curtain-canvas{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  cursor:grab;
}
.v74-curtain-canvas:active{
  cursor:grabbing;
}
.v74-curtain-hint{
  left:28px !important;
  bottom:20px !important;
  color:#8a929a !important;
  opacity:.76 !important;
}
.v74-curtain-helper{
  right:26px !important;
  top:24px !important;
  width:40px !important;
  height:40px !important;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 30px rgba(28,34,40,.055);
}
.v74-curtain-panel.is-touched .v74-curtain-hint,
.v74-curtain-panel.is-touched .v74-curtain-helper,
.v74-curtain-panel.is-revealed .v74-curtain-hint,
.v74-curtain-panel.is-revealed .v74-curtain-helper{
  opacity:0 !important;
  transform:translateY(4px) scale(.96) !important;
}

body.dark-theme .v74-curtain-panel{
  border-color:rgba(255,255,255,.085) !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018)) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}
body.dark-theme .v74-curtain-helper{
  background:rgba(255,255,255,.035);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}



/* ===== SMPL v82: file-1 style cloth curtain with SMPL texture ===== */

.v74-curtain-panel{
  min-height:286px !important;
  border-radius:20px !important;
  border:1px solid rgba(92,100,108,.12) !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.30), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  box-shadow:
    0 20px 50px rgba(28,34,40,.055),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}
.v74-curtain-text{
  min-height:286px !important;
  padding:26px 28px 22px !important;
}
.v74-curtain-canvas{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  cursor:grab !important;
}
.v74-curtain-canvas:active{
  cursor:grabbing !important;
}
.v74-curtain-hint{
  left:28px !important;
  bottom:20px !important;
  opacity:.78 !important;
}
.v74-curtain-helper{
  right:24px !important;
  top:22px !important;
  width:38px !important;
  height:38px !important;
  background:rgba(255,255,255,.20) !important;
  box-shadow:0 12px 28px rgba(28,34,40,.05) !important;
}
.v74-curtain-panel.is-touched .v74-curtain-hint,
.v74-curtain-panel.is-touched .v74-curtain-helper{
  opacity:.2 !important;
}
body.dark-theme .v74-curtain-panel{
  border-color:rgba(255,255,255,.09) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.016)) !important;
  box-shadow:
    0 24px 62px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-theme .v74-curtain-helper{
  background:rgba(255,255,255,.04) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
}



/* ===== SMPL v83: curtain removed, clean premium text block ===== */

.v22-about .v22-copy{
  border-left:1px solid rgba(92,100,108,.12) !important;
  padding-left:34px !important;
  display:block !important;
}
.v22-about .v22-copy p{
  color:#697179 !important;
  line-height:1.75 !important;
  margin:0 0 18px !important;
  max-width:720px !important;
}
.v74-curtain-panel,
.v74-curtain-canvas,
.v74-curtain-helper,
.v74-curtain-hint{
  display:none !important;
}
body.dark-theme .v22-about .v22-copy{
  border-left-color:rgba(255,255,255,.10) !important;
}
body.dark-theme .v22-about .v22-copy p{
  color:#b8c0c8 !important;
}



/* ===== SMPL v84: cute cursor-following eyes from circle/dot language ===== */

.smpl-eyes-field{
  position:fixed;
  inset:0;
  z-index:135;
  pointer-events:none;
  overflow:hidden;
}
.smpl-eye-pair{
  position:absolute;
  left:var(--eyes-x);
  top:var(--eyes-y);
  width:74px;
  height:38px;
  transform:translate(-50%, -50%) scale(var(--eyes-scale, 1));
  pointer-events:auto;
  cursor:pointer;
  opacity:.72;
  transition:
    opacity .34s ease,
    transform .42s cubic-bezier(.22,1,.36,1),
    filter .34s ease;
  filter:drop-shadow(0 12px 26px rgba(30,36,42,.055));
}
.smpl-eye-pair:hover{
  opacity:.96;
  transform:translate(-50%, -50%) scale(calc(var(--eyes-scale, 1) * 1.04));
}
.smpl-eye{
  position:absolute;
  top:50%;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(84,92,101,.18);
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.82), rgba(255,255,255,.30) 42%, rgba(255,255,255,.10) 100%);
  transform:translateY(-50%);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 8px 20px rgba(30,36,42,.045);
  transition:
    height .20s cubic-bezier(.22,1,.36,1),
    border-radius .20s cubic-bezier(.22,1,.36,1),
    background .24s ease,
    border-color .24s ease;
}
.smpl-eye.left{ left:4px; }
.smpl-eye.right{ right:4px; }

.smpl-eye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#747d86;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--look-x, 0) * 1px), calc(var(--look-y, 0) * 1px));
  transition:
    transform .10s linear,
    width .20s ease,
    height .20s ease,
    opacity .20s ease;
  box-shadow:
    0 0 0 4px rgba(116,125,134,.055),
    0 0 18px rgba(116,125,134,.16);
}
.smpl-eye::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border-top:0 solid rgba(255,255,255,0);
  background:linear-gradient(180deg, rgba(246,248,250,0) 0%, rgba(246,248,250,0) 44%, rgba(246,248,250,.12) 100%);
  pointer-events:none;
}

/* cute squint on hover */
.smpl-eye-pair:hover .smpl-eye{
  height:16px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.14));
}
.smpl-eye-pair:hover .smpl-eye::before{
  height:4px;
  width:8px;
  opacity:.82;
}

/* close before disappearing */
.smpl-eye-pair.is-closing .smpl-eye,
.smpl-eye-pair.is-sleeping .smpl-eye{
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.smpl-eye-pair.is-closing .smpl-eye::before,
.smpl-eye-pair.is-sleeping .smpl-eye::before{
  opacity:0;
  transform:translate(-50%, -50%) scale(.4);
}
.smpl-eye-pair.is-hidden{
  opacity:0;
  transform:translate(-50%, -50%) scale(.76);
  pointer-events:none;
}

/* small smile/dot accent */
.smpl-eye-pair .smpl-eye-mouth{
  position:absolute;
  left:50%;
  top:31px;
  width:12px;
  height:6px;
  border-bottom:1px solid rgba(84,92,101,.18);
  border-radius:0 0 999px 999px;
  transform:translateX(-50%);
  opacity:.48;
  transition:opacity .2s ease, transform .2s ease;
}
.smpl-eye-pair:hover .smpl-eye-mouth{
  opacity:.72;
  transform:translateX(-50%) translateY(-1px) scaleX(.82);
}
.smpl-eye-pair.is-closing .smpl-eye-mouth,
.smpl-eye-pair.is-sleeping .smpl-eye-mouth{
  opacity:0;
}

/* let eyes feel native to existing orbit/dot design */
.smpl-eye-pair::before{
  content:"";
  position:absolute;
  inset:2px 0 0;
  border-radius:50%;
  border:1px solid rgba(84,92,101,.055);
  transform:scale(1.18);
  opacity:.6;
  pointer-events:none;
}
.smpl-eye-pair::after{
  content:"";
  position:absolute;
  right:0;
  bottom:2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(116,125,134,.34);
  box-shadow:0 0 0 7px rgba(255,255,255,.06);
  pointer-events:none;
}

body.dark-theme .smpl-eye-pair{
  opacity:.64;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.22));
}
body.dark-theme .smpl-eye{
  border-color:rgba(255,255,255,.105);
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.20), rgba(255,255,255,.075) 42%, rgba(255,255,255,.025) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.12);
}
body.dark-theme .smpl-eye::before{
  background:#c5ced7;
  box-shadow:
    0 0 0 4px rgba(197,206,215,.055),
    0 0 18px rgba(197,206,215,.22);
}
body.dark-theme .smpl-eye-pair:hover .smpl-eye{
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.025));
}
body.dark-theme .smpl-eye-pair::before{
  border-color:rgba(255,255,255,.045);
}
body.dark-theme .smpl-eye-pair::after{
  background:rgba(197,206,215,.26);
  box-shadow:0 0 0 7px rgba(255,255,255,.025);
}
body.dark-theme .smpl-eye-pair .smpl-eye-mouth{
  border-bottom-color:rgba(255,255,255,.13);
}

@media (max-width: 760px){
  .smpl-eye-pair{
    width:62px;
    height:32px;
  }
  .smpl-eye{
    width:25px;
    height:25px;
  }
  .smpl-eye-pair:nth-child(n+3){
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .smpl-eyes-field{
    display:none !important;
  }
}



/* ===== SMPL v85: attached playful eyes, one pair only ===== */

/* Hide old scattered v84 eyes completely */
.smpl-eyes-field{
  display:none !important;
}

/* New attached eyes layer */
.smpl-attached-eyes-layer{
  position:absolute;
  inset:0;
  z-index:24;
  pointer-events:none;
  overflow:visible;
}
.smpl-eye-anchor{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:1px;
  pointer-events:none;
  z-index:24;
}
.smpl-attached-eyes{
  position:absolute;
  left:0;
  top:0;
  width:98px;
  height:60px;
  transform:
    translate3d(
      calc(var(--eye-x, 0px) - 49px),
      calc(var(--eye-y, 0px) - 30px),
      0
    )
    scale(var(--eye-scale, 1));
  transform-origin:center;
  pointer-events:auto;
  cursor:grab;
  opacity:.92;
  filter:drop-shadow(0 18px 34px rgba(28,34,40,.08));
  transition:
    opacity .22s ease,
    filter .22s ease;
}
.smpl-attached-eyes:active{
  cursor:grabbing;
}
.smpl-attached-eyes.is-running{
  animation:smplEyesRun .42s steps(2,end) infinite;
}
.smpl-attached-eyes.is-hovering .smpl-attached-eye{
  height:19px;
  border-radius:999px;
}
.smpl-attached-eyes.is-pressed .smpl-attached-eye{
  height:13px;
  transform:translateY(-50%) scaleX(.94);
}
.smpl-attached-eyes.is-sleeping .smpl-attached-eye,
.smpl-attached-eyes.is-hiding .smpl-attached-eye{
  height:5px;
  border-radius:999px;
}
.smpl-attached-eyes.is-hiding{
  opacity:0;
  pointer-events:none;
}
.smpl-attached-eyes.is-dragging{
  transition:none;
  filter:drop-shadow(0 28px 46px rgba(28,34,40,.14));
}
.smpl-eye-arm{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--arm-len, 42px);
  height:1px;
  transform-origin:0 50%;
  transform:
    translate3d(var(--arm-x, -8px), var(--arm-y, 0px), 0)
    rotate(var(--arm-rot, 0deg));
  border-top:1px solid rgba(84,92,101,.18);
  opacity:var(--arm-opacity, .44);
  pointer-events:none;
}
.smpl-eye-arm::before,
.smpl-eye-arm::after{
  content:"";
  position:absolute;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(116,125,134,.28);
}
.smpl-eye-arm::before{ left:-2px; }
.smpl-eye-arm::after{ right:-2px; }
.smpl-eye-arm.left{
  --arm-y:-6px;
}
.smpl-eye-arm.right{
  --arm-y:7px;
}

.smpl-attached-eye{
  position:absolute;
  top:48%;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(84,92,101,.22);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.92), rgba(255,255,255,.36) 42%, rgba(255,255,255,.12) 100%);
  overflow:hidden;
  transform:translateY(-50%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 24px rgba(28,34,40,.06);
  transition:
    height .18s cubic-bezier(.22,1,.36,1),
    transform .18s cubic-bezier(.22,1,.36,1),
    border-color .22s ease,
    background .22s ease;
}
.smpl-attached-eye.left{ left:8px; }
.smpl-attached-eye.right{ right:8px; }

.smpl-attached-eye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#68727c;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--look-x, 0) * 1px), calc(var(--look-y, 0) * 1px));
  transition:
    transform .08s linear,
    opacity .16s ease,
    width .16s ease,
    height .16s ease;
  box-shadow:
    0 0 0 5px rgba(104,114,124,.055),
    0 0 20px rgba(104,114,124,.18);
}
.smpl-attached-eyes.is-sleeping .smpl-attached-eye::before,
.smpl-attached-eyes.is-hiding .smpl-attached-eye::before,
.smpl-attached-eyes.is-pressed .smpl-attached-eye::before{
  opacity:0;
}

.smpl-eye-mouth{
  position:absolute;
  left:50%;
  top:45px;
  width:18px;
  height:8px;
  border-bottom:1px solid rgba(84,92,101,.22);
  border-radius:0 0 999px 999px;
  transform:translateX(-50%);
  opacity:.62;
  transition:opacity .18s ease, transform .18s ease, width .18s ease;
}
.smpl-attached-eyes.is-hovering .smpl-eye-mouth{
  width:14px;
  transform:translateX(-50%) translateY(-2px);
}
.smpl-attached-eyes.is-pressed .smpl-eye-mouth,
.smpl-attached-eyes.is-sleeping .smpl-eye-mouth,
.smpl-attached-eyes.is-hiding .smpl-eye-mouth{
  opacity:0;
}
.smpl-eye-leg{
  position:absolute;
  bottom:2px;
  width:12px;
  height:8px;
  border-bottom:1px solid rgba(84,92,101,.28);
  border-radius:0 0 999px 999px;
  opacity:0;
  transform-origin:50% 0;
}
.smpl-eye-leg.left{ left:31px; }
.smpl-eye-leg.right{ right:31px; }
.smpl-attached-eyes.is-running .smpl-eye-leg{
  opacity:.7;
  animation:smplEyeLegs .24s steps(2,end) infinite;
}
.smpl-attached-eyes.is-running .smpl-eye-leg.right{
  animation-delay:.12s;
}

.smpl-eye-hide-slip{
  position:absolute;
  left:50%;
  bottom:-6px;
  width:64px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(84,92,101,.08);
  transform:translateX(-50%) scaleX(.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.smpl-attached-eyes.is-hiding .smpl-eye-hide-slip{
  opacity:.72;
  transform:translateX(-50%) scaleX(1);
}

/* block attachment shadow */
.smpl-eye-anchor-dot{
  position:absolute;
  left:var(--eye-anchor-x, 0px);
  top:var(--eye-anchor-y, 0px);
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(116,125,134,.38);
  box-shadow:0 0 0 7px rgba(255,255,255,.07);
  opacity:.52;
  pointer-events:none;
  transform:translate(-50%, -50%);
}

@keyframes smplEyesRun{
  0%{ transform:translate3d(calc(var(--eye-x, 0px) - 49px), calc(var(--eye-y, 0px) - 31px), 0) scale(var(--eye-scale, 1)) rotate(-1.2deg); }
  100%{ transform:translate3d(calc(var(--eye-x, 0px) - 49px), calc(var(--eye-y, 0px) - 29px), 0) scale(var(--eye-scale, 1)) rotate(1.2deg); }
}
@keyframes smplEyeLegs{
  0%{ transform:rotate(22deg) translateY(0); }
  100%{ transform:rotate(-22deg) translateY(2px); }
}

body.dark-theme .smpl-attached-eyes{
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.28));
}
body.dark-theme .smpl-attached-eye{
  border-color:rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.22), rgba(255,255,255,.08) 42%, rgba(255,255,255,.028) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 30px rgba(0,0,0,.16);
}
body.dark-theme .smpl-attached-eye::before{
  background:#cbd4de;
  box-shadow:
    0 0 0 5px rgba(203,212,222,.055),
    0 0 20px rgba(203,212,222,.24);
}
body.dark-theme .smpl-eye-mouth,
body.dark-theme .smpl-eye-leg{
  border-color:rgba(255,255,255,.18);
}
body.dark-theme .smpl-eye-arm{
  border-top-color:rgba(255,255,255,.16);
}
body.dark-theme .smpl-eye-arm::before,
body.dark-theme .smpl-eye-arm::after,
body.dark-theme .smpl-eye-anchor-dot{
  background:rgba(203,212,222,.25);
}
body.dark-theme .smpl-eye-hide-slip{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}

@media (max-width: 760px){
  .smpl-attached-eyes{
    width:84px;
    height:52px;
  }
  .smpl-attached-eye{
    width:32px;
    height:32px;
  }
}



/* ===== SMPL v86: cleaner edge-attached running eyes ===== */

/* Remove the visual "frame" feeling */
.smpl-attached-eyes,
.smpl-attached-eyes:focus,
.smpl-attached-eyes:focus-visible{
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.smpl-attached-eyes{
  width:104px !important;
  height:66px !important;
  opacity:.98 !important;
  filter:drop-shadow(0 16px 32px rgba(28,34,40,.10)) !important;
}
.smpl-attached-eye{
  width:40px !important;
  height:40px !important;
  border:1px solid rgba(84,92,101,.18) !important;
}
.smpl-attached-eye.left{ left:6px !important; }
.smpl-attached-eye.right{ right:6px !important; }

/* Normal cute hands */
.smpl-eye-arm{
  width:var(--arm-len, 44px) !important;
  border-top:1.5px solid rgba(84,92,101,.24) !important;
  opacity:var(--arm-opacity, .52) !important;
}
.smpl-eye-arm::before{
  width:7px !important;
  height:7px !important;
  background:rgba(116,125,134,.36) !important;
  box-shadow:0 0 0 5px rgba(255,255,255,.08);
}
.smpl-eye-arm::after{
  width:9px !important;
  height:9px !important;
  right:-4px !important;
  top:-5px !important;
  background:rgba(255,255,255,.54) !important;
  border:1px solid rgba(84,92,101,.16);
  box-shadow:0 8px 18px rgba(28,34,40,.06);
}
.smpl-eye-arm.left{
  --arm-y:-11px !important;
}
.smpl-eye-arm.right{
  --arm-y:10px !important;
}

/* better legs */
.smpl-eye-leg{
  bottom:1px !important;
  width:14px !important;
  height:12px !important;
  border-bottom:2px solid rgba(84,92,101,.28) !important;
  opacity:0;
}
.smpl-eye-leg.left{ left:32px !important; }
.smpl-eye-leg.right{ right:32px !important; }
.smpl-attached-eyes.is-running .smpl-eye-leg{
  opacity:.88 !important;
  animation:smplV86Legs .18s steps(2,end) infinite !important;
}
.smpl-attached-eyes.is-running .smpl-eye-leg.right{
  animation-delay:.09s !important;
}
.smpl-attached-eyes.is-running .smpl-eye-mouth{
  transform:translateX(-50%) translateY(-1px) scaleX(.72);
}
.smpl-attached-eyes.is-grabbing .smpl-eye-mouth{
  width:11px;
  opacity:.55;
}
.smpl-attached-eyes.is-grabbing .smpl-attached-eye{
  height:24px !important;
}
.smpl-attached-eyes.is-peeking .smpl-attached-eye{
  height:15px !important;
  border-radius:999px !important;
}
.smpl-attached-eyes.is-peeking .smpl-eye-mouth{
  opacity:.2;
}

/* anchor dot sits directly on block line/edge */
.smpl-eye-anchor-dot{
  width:6px !important;
  height:6px !important;
  opacity:.72 !important;
  background:rgba(116,125,134,.42) !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.07),
    0 0 20px rgba(116,125,134,.14);
}

/* hide slip: looks like they crawl behind the block edge */
.smpl-eye-hide-slip{
  bottom:-4px !important;
  height:10px !important;
  width:74px !important;
  border-radius:999px !important;
  opacity:0;
}
.smpl-attached-eyes.is-hiding .smpl-eye-hide-slip,
.smpl-attached-eyes.is-peeking .smpl-eye-hide-slip{
  opacity:.82 !important;
}

@keyframes smplV86Legs{
  0%{ transform:rotate(27deg) translateY(0) translateX(-1px); }
  100%{ transform:rotate(-27deg) translateY(3px) translateX(1px); }
}

body.dark-theme .smpl-attached-eyes{
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.30)) !important;
}
body.dark-theme .smpl-eye-arm{
  border-top-color:rgba(255,255,255,.18) !important;
}
body.dark-theme .smpl-eye-arm::after{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.13);
}
body.dark-theme .smpl-eye-anchor-dot{
  background:rgba(203,212,222,.32) !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.025),
    0 0 20px rgba(203,212,222,.18);
}



/* ===== SMPL v87: real tiny hands + visible running ===== */

.smpl-attached-eyes,
.smpl-attached-eyes:focus,
.smpl-attached-eyes:focus-visible{
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.smpl-attached-eyes{
  width:104px !important;
  height:70px !important;
  transform:
    translate3d(
      calc(var(--eye-x, 0px) - 52px),
      calc(var(--eye-y, 0px) - 35px + var(--eye-bob, 0px)),
      0
    )
    scale(var(--eye-scale, 1)) rotate(var(--eye-tilt, 0deg)) !important;
  opacity:.98 !important;
  filter:drop-shadow(0 18px 34px rgba(28,34,40,.08)) !important;
  background:transparent !important;
}

.smpl-attached-eye{
  width:40px !important;
  height:40px !important;
  border:1px solid rgba(84,92,101,.18) !important;
}
.smpl-attached-eye.left{ left:7px !important; }
.smpl-attached-eye.right{ right:7px !important; }

/* actual little hands */
.smpl-eye-arm{
  position:absolute !important;
  top:28px !important;
  width:var(--hand-len, 18px) !important;
  height:6px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(84,92,101,.20), rgba(130,138,146,.34)) !important;
  border:0 !important;
  opacity:var(--arm-opacity, .7) !important;
  transform-origin:2px 50% !important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset !important;
}
.smpl-eye-arm.left{
  left:14px !important;
  transform:
    translateY(-50%)
    rotate(var(--left-arm-rot, -20deg))
    scaleX(var(--left-arm-scale, 1)) !important;
}
.smpl-eye-arm.right{
  right:14px !important;
  left:auto !important;
  transform:
    translateY(-50%)
    rotate(var(--right-arm-rot, 20deg))
    scaleX(var(--right-arm-scale, 1)) !important;
}
.smpl-eye-arm::before{
  content:"";
  position:absolute;
  left:-2px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.60);
  border:1px solid rgba(84,92,101,.14);
  box-shadow:0 6px 14px rgba(28,34,40,.04);
}
.smpl-eye-arm::after{
  content:"";
  position:absolute;
  right:-4px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.76);
  border:1px solid rgba(84,92,101,.18);
  box-shadow:
    0 6px 14px rgba(28,34,40,.06),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.smpl-attached-eyes.is-running .smpl-eye-arm{
  opacity:.18 !important;
}
.smpl-attached-eyes.is-grabbing .smpl-eye-arm{
  opacity:.92 !important;
}

/* legs actually visible */
.smpl-eye-leg{
  position:absolute !important;
  bottom:2px !important;
  width:14px !important;
  height:14px !important;
  opacity:0;
  transform-origin:50% 0;
  border:0 !important;
}
.smpl-eye-leg.left{ left:31px !important; }
.smpl-eye-leg.right{ right:31px !important; }
.smpl-eye-leg::before,
.smpl-eye-leg::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
}
.smpl-eye-leg::before{
  width:2px;
  height:11px;
  border-radius:999px;
  background:rgba(84,92,101,.30);
}
.smpl-eye-leg::after{
  width:8px;
  height:2px;
  top:11px;
  border-radius:999px;
  background:rgba(84,92,101,.30);
}
.smpl-attached-eyes.is-running .smpl-eye-leg{
  opacity:.96 !important;
  animation:smplV87Legs .14s linear infinite !important;
}
.smpl-attached-eyes.is-running .smpl-eye-leg.right{
  animation-delay:.07s !important;
}
@keyframes smplV87Legs{
  0%{ transform:rotate(20deg) translateY(0); }
  50%{ transform:rotate(-18deg) translateY(2px); }
  100%{ transform:rotate(20deg) translateY(0); }
}

.smpl-attached-eyes.is-hovering .smpl-attached-eye{
  height:19px !important;
  border-radius:999px !important;
}
.smpl-attached-eyes.is-pressed .smpl-attached-eye{
  height:15px !important;
}
.smpl-attached-eyes.is-peeking .smpl-attached-eye,
.smpl-attached-eyes.is-sleeping .smpl-attached-eye,
.smpl-attached-eyes.is-hiding .smpl-attached-eye{
  height:6px !important;
  border-radius:999px !important;
}
.smpl-attached-eyes.is-hiding{
  opacity:0 !important;
  pointer-events:none !important;
}

.smpl-eye-mouth{
  top:47px !important;
  width:18px !important;
  opacity:.66 !important;
}
.smpl-attached-eyes.is-running .smpl-eye-mouth{
  transform:translateX(-50%) translateY(-1px) scaleX(.76) !important;
}

.smpl-eye-anchor-dot{
  width:6px !important;
  height:6px !important;
  opacity:.72 !important;
  background:rgba(116,125,134,.42) !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.07),
    0 0 18px rgba(116,125,134,.15) !important;
}

body.dark-theme .smpl-attached-eyes{
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.28)) !important;
}
body.dark-theme .smpl-eye-arm{
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.22)) !important;
}
body.dark-theme .smpl-eye-arm::before,
body.dark-theme .smpl-eye-arm::after{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.dark-theme .smpl-eye-leg::before,
body.dark-theme .smpl-eye-leg::after{
  background:rgba(255,255,255,.24) !important;
}
body.dark-theme .smpl-eye-anchor-dot{
  background:rgba(203,212,222,.32) !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.025),
    0 0 18px rgba(203,212,222,.18) !important;
}



/* ===== SMPL v88: edge-running creature, outside blocks only ===== */

.smpl-creature-layer{
  position:absolute;
  inset:0;
  z-index:23;
  pointer-events:none;
  overflow:visible;
}
.smpl-creature-anchor{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(115,123,131,.34);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.07),
    0 0 16px rgba(115,123,131,.12);
  pointer-events:none;
}

.smpl-creature{
  position:absolute;
  width:72px;
  height:44px;
  transform:
    translate3d(calc(var(--cx, 0px) - 36px), calc(var(--cy, 0px) - 22px + var(--cbob, 0px)), 0)
    rotate(var(--ctilt, 0deg));
  transform-origin:center;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  filter:drop-shadow(0 10px 20px rgba(28,34,40,.08));
  pointer-events:auto;
  cursor:grab;
  opacity:.98;
}
.smpl-creature:active{ cursor:grabbing; }
.smpl-creature:focus,
.smpl-creature:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

.smpl-creature-body{
  position:absolute;
  left:0;
  top:0;
  width:72px;
  height:44px;
}

.smpl-creature-eye{
  position:absolute;
  top:2px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(88,97,106,.17);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), rgba(255,255,255,.52) 48%, rgba(255,255,255,.10) 100%);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 6px 14px rgba(28,34,40,.05);
  transition:height .16s cubic-bezier(.22,1,.36,1), border-radius .16s ease, transform .16s ease;
}
.smpl-creature-eye.left{ left:7px; }
.smpl-creature-eye.right{ right:7px; }
.smpl-creature-eye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6a737c;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--lookx, 0px)), calc(var(--looky, 0px)));
  box-shadow:
    0 0 0 3px rgba(106,115,124,.045),
    0 0 12px rgba(106,115,124,.14);
  transition:transform .08s linear, opacity .15s ease;
}

.smpl-creature-mouth{
  position:absolute;
  left:50%;
  top:31px;
  width:12px;
  height:6px;
  transform:translateX(-50%);
  border-bottom:1px solid rgba(88,97,106,.18);
  border-radius:0 0 999px 999px;
  opacity:.62;
  transition:opacity .16s ease, transform .16s ease, width .16s ease;
}

/* small real hands */
.smpl-creature-arm{
  position:absolute;
  top:18px;
  width:var(--armLen, 16px);
  height:6px;
  transform-origin:2px 50%;
  pointer-events:none;
}
.smpl-creature-arm.left{
  left:5px;
  transform:rotate(var(--larm, -18deg));
}
.smpl-creature-arm.right{
  right:5px;
  transform-origin:calc(100% - 2px) 50%;
  transform:rotate(var(--rarm, 18deg)) scaleX(-1);
}
.smpl-creature-arm .seg{
  position:absolute;
  left:0;
  top:1px;
  width:100%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(108,116,124,.16), rgba(128,136,144,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.smpl-creature-arm .paw{
  position:absolute;
  right:-1px;
  top:-1px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(88,97,106,.16);
  box-shadow:0 4px 10px rgba(28,34,40,.05), inset 0 1px 0 rgba(255,255,255,.75);
}
.smpl-creature-arm .shoulder{
  position:absolute;
  left:-1px;
  top:-1px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(88,97,106,.12);
}

/* real tiny legs */
.smpl-creature-legs{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.smpl-creature-leg{
  position:absolute;
  bottom:0;
  width:11px;
  height:15px;
  transform-origin:50% 0;
  opacity:0;
}
.smpl-creature-leg.left{ left:24px; }
.smpl-creature-leg.right{ right:24px; }
.smpl-creature-leg .thigh,
.smpl-creature-leg .shin{
  position:absolute;
  left:50%;
  width:2px;
  border-radius:999px;
  background:rgba(98,107,115,.36);
  transform-origin:50% 0;
}
.smpl-creature-leg .thigh{
  top:0;
  height:7px;
  transform:translateX(-50%) rotate(var(--thighRot, 0deg));
}
.smpl-creature-leg .shin{
  top:6px;
  height:6px;
  transform:translateX(-50%) rotate(var(--shinRot, 0deg));
}
.smpl-creature-leg .foot{
  position:absolute;
  left:50%;
  top:12px;
  width:8px;
  height:2px;
  border-radius:999px;
  background:rgba(98,107,115,.36);
  transform:translateX(-50%);
}

.smpl-creature.is-hover .smpl-creature-eye{
  height:14px;
  border-radius:999px;
}
.smpl-creature.is-hover .smpl-creature-mouth{
  width:10px;
  transform:translateX(-50%) translateY(-1px);
}
.smpl-creature.is-pressed .smpl-creature-eye{
  height:10px;
}
.smpl-creature.is-pressed .smpl-creature-eye::before,
.smpl-creature.is-hide .smpl-creature-eye::before{
  opacity:0;
}
.smpl-creature.is-peek .smpl-creature-eye,
.smpl-creature.is-hide .smpl-creature-eye{
  height:5px;
  border-radius:999px;
}
.smpl-creature.is-peek .smpl-creature-mouth,
.smpl-creature.is-hide .smpl-creature-mouth{
  opacity:0;
}
.smpl-creature.is-running .smpl-creature-leg{
  opacity:.96;
}
.smpl-creature.is-running .smpl-creature-leg.left{
  animation:smplCreatureLegLeft .16s linear infinite;
}
.smpl-creature.is-running .smpl-creature-leg.right{
  animation:smplCreatureLegRight .16s linear infinite;
}
.smpl-creature.is-running .smpl-creature-arm{
  opacity:.28;
}
.smpl-creature.is-grab .smpl-creature-arm{
  opacity:.96;
}
.smpl-creature.is-hide{
  opacity:0;
  pointer-events:none;
}

@keyframes smplCreatureLegLeft{
  0%{
    transform:rotate(18deg);
  }
  50%{
    transform:rotate(-14deg) translateY(1px);
  }
  100%{
    transform:rotate(18deg);
  }
}
@keyframes smplCreatureLegRight{
  0%{
    transform:rotate(-14deg) translateY(1px);
  }
  50%{
    transform:rotate(18deg);
  }
  100%{
    transform:rotate(-14deg) translateY(1px);
  }
}

body.dark-theme .smpl-creature{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.22));
}
body.dark-theme .smpl-creature-eye{
  border-color:rgba(255,255,255,.13);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.23), rgba(255,255,255,.08) 48%, rgba(255,255,255,.02) 100%);
}
body.dark-theme .smpl-creature-eye::before{
  background:#c6d0d8;
  box-shadow:
    0 0 0 3px rgba(198,208,216,.045),
    0 0 12px rgba(198,208,216,.16);
}
body.dark-theme .smpl-creature-mouth{
  border-bottom-color:rgba(255,255,255,.16);
}
body.dark-theme .smpl-creature-arm .seg,
body.dark-theme .smpl-creature-leg .thigh,
body.dark-theme .smpl-creature-leg .shin,
body.dark-theme .smpl-creature-leg .foot{
  background:rgba(255,255,255,.22);
}
body.dark-theme .smpl-creature-arm .paw,
body.dark-theme .smpl-creature-arm .shoulder{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .smpl-creature-anchor{
  background:rgba(203,212,222,.30);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.025),
    0 0 16px rgba(203,212,222,.14);
}



/* ===== SMPL v89: tiny edge runner, no flying across screen ===== */

.smpl-runner-layer{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  z-index:23;
}

.smpl-runner{
  position:absolute;
  width:56px;
  height:34px;
  pointer-events:auto;
  cursor:grab;
  transform:
    translate3d(calc(var(--rx, 0px) - 28px), calc(var(--ry, 0px) - 17px + var(--rbob, 0px)), 0)
    rotate(var(--rrot, 0deg))
    scale(var(--rscale, 1));
  transform-origin:center;
  background:transparent;
  border:0;
  outline:none;
  box-shadow:none;
  filter:drop-shadow(0 8px 14px rgba(34,40,46,.08));
  opacity:.98;
}
.smpl-runner:active{ cursor:grabbing; }
.smpl-runner:focus,
.smpl-runner:focus-visible{
  outline:none;
  box-shadow:none;
}

.smpl-runner-body{
  position:absolute;
  inset:0;
}

/* eyes */
.smpl-runner-eye{
  position:absolute;
  top:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(90,98,106,.16);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.96), rgba(255,255,255,.56) 50%, rgba(255,255,255,.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 4px 10px rgba(34,40,46,.05);
  overflow:hidden;
  transition:height .15s cubic-bezier(.22,1,.36,1), border-radius .15s ease;
}
.smpl-runner-eye.left{ left:6px; }
.smpl-runner-eye.right{ right:6px; }
.smpl-runner-eye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#68727b;
  transform:
    translate(-50%, -50%)
    translate(var(--look-x, 0px), var(--look-y, 0px));
  box-shadow:
    0 0 0 3px rgba(104,114,123,.045),
    0 0 10px rgba(104,114,123,.12);
  transition:transform .08s linear, opacity .14s ease;
}

.smpl-runner-mouth{
  position:absolute;
  left:50%;
  top:24px;
  width:10px;
  height:5px;
  transform:translateX(-50%);
  border-bottom:1px solid rgba(90,98,106,.16);
  border-radius:0 0 999px 999px;
  opacity:.60;
  transition:opacity .15s ease, transform .15s ease;
}

/* tiny real hands */
.smpl-runner-arm{
  position:absolute;
  top:15px;
  width:10px;
  height:10px;
  pointer-events:none;
}
.smpl-runner-arm.left{ left:-1px; }
.smpl-runner-arm.right{ right:-1px; }

.smpl-runner-arm .upper{
  position:absolute;
  left:2px;
  top:3px;
  width:7px;
  height:2px;
  border-radius:999px;
  background:rgba(108,116,124,.28);
  transform-origin:0 50%;
}
.smpl-runner-arm.left .upper{
  transform:rotate(var(--left-arm, -25deg));
}
.smpl-runner-arm.right .upper{
  transform:rotate(var(--right-arm, 25deg)) scaleX(-1);
  transform-origin:100% 50%;
}
.smpl-runner-arm .paw{
  position:absolute;
  right:-1px;
  top:0px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(90,98,106,.14);
  box-shadow:0 2px 6px rgba(34,40,46,.05), inset 0 1px 0 rgba(255,255,255,.72);
}
.smpl-runner-arm.right .paw{
  right:auto;
  left:-1px;
}

/* tiny real feet */
.smpl-runner-leg{
  position:absolute;
  bottom:0;
  width:10px;
  height:12px;
  opacity:.85;
}
.smpl-runner-leg.left{ left:18px; }
.smpl-runner-leg.right{ right:18px; }

.smpl-runner-leg .thigh,
.smpl-runner-leg .shin,
.smpl-runner-leg .foot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(104,112,120,.34);
}
.smpl-runner-leg .thigh{
  top:0;
  width:2px;
  height:5px;
  transform-origin:50% 0;
}
.smpl-runner-leg .shin{
  top:4px;
  width:2px;
  height:5px;
  transform-origin:50% 0;
}
.smpl-runner-leg .foot{
  top:9px;
  width:7px;
  height:2px;
}

/* running states */
.smpl-runner.is-running .smpl-runner-leg.left{
  animation:smplRunnerLegLeft .18s linear infinite;
}
.smpl-runner.is-running .smpl-runner-leg.right{
  animation:smplRunnerLegRight .18s linear infinite;
}
.smpl-runner.is-running .smpl-runner-arm.left .upper{
  animation:smplRunnerArmLeft .18s linear infinite;
}
.smpl-runner.is-running .smpl-runner-arm.right .upper{
  animation:smplRunnerArmRight .18s linear infinite;
}
.smpl-runner.is-running{
  filter:drop-shadow(0 8px 14px rgba(34,40,46,.10));
}
.smpl-runner.is-hover .smpl-runner-eye{
  height:10px;
  border-radius:999px;
}
.smpl-runner.is-pressed .smpl-runner-eye{
  height:8px;
}
.smpl-runner.is-pressed .smpl-runner-eye::before,
.smpl-runner.is-hide .smpl-runner-eye::before{
  opacity:0;
}
.smpl-runner.is-peek .smpl-runner-eye,
.smpl-runner.is-hide .smpl-runner-eye{
  height:4px;
  border-radius:999px;
}
.smpl-runner.is-peek .smpl-runner-mouth,
.smpl-runner.is-hide .smpl-runner-mouth{
  opacity:0;
}
.smpl-runner.is-hide{
  opacity:0;
  pointer-events:none;
}
.smpl-runner.is-drag{
  filter:drop-shadow(0 10px 18px rgba(34,40,46,.12));
}

/* subtle foothold dot on the edge */
.smpl-runner-footmark{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(115,123,131,.32);
  transform:translate(-50%, -50%);
  pointer-events:none;
  box-shadow:0 0 0 5px rgba(255,255,255,.05);
}

@keyframes smplRunnerLegLeft{
  0%{ transform:rotate(20deg) translateY(0); }
  50%{ transform:rotate(-14deg) translateY(1px); }
  100%{ transform:rotate(20deg) translateY(0); }
}
@keyframes smplRunnerLegRight{
  0%{ transform:rotate(-14deg) translateY(1px); }
  50%{ transform:rotate(20deg) translateY(0); }
  100%{ transform:rotate(-14deg) translateY(1px); }
}
@keyframes smplRunnerArmLeft{
  0%{ transform:rotate(-26deg); }
  50%{ transform:rotate(18deg); }
  100%{ transform:rotate(-26deg); }
}
@keyframes smplRunnerArmRight{
  0%{ transform:rotate(26deg) scaleX(-1); }
  50%{ transform:rotate(-18deg) scaleX(-1); }
  100%{ transform:rotate(26deg) scaleX(-1); }
}

body.dark-theme .smpl-runner{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.24));
}
body.dark-theme .smpl-runner-eye{
  border-color:rgba(255,255,255,.13);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), rgba(255,255,255,.09) 50%, rgba(255,255,255,.02) 100%);
}
body.dark-theme .smpl-runner-eye::before{
  background:#c8d2da;
  box-shadow:
    0 0 0 3px rgba(200,210,218,.05),
    0 0 10px rgba(200,210,218,.14);
}
body.dark-theme .smpl-runner-mouth{
  border-bottom-color:rgba(255,255,255,.16);
}
body.dark-theme .smpl-runner-arm .upper,
body.dark-theme .smpl-runner-leg .thigh,
body.dark-theme .smpl-runner-leg .shin,
body.dark-theme .smpl-runner-leg .foot{
  background:rgba(255,255,255,.22);
}
body.dark-theme .smpl-runner-arm .paw{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .smpl-runner-footmark{
  background:rgba(203,212,222,.28);
  box-shadow:0 0 0 5px rgba(255,255,255,.025);
}



/* ===== SMPL v90: mascot runs only on block edges ===== */

.smpl-mascot-layer{
  position:absolute;
  inset:0;
  z-index:23;
  pointer-events:none;
  overflow:visible;
}

.smpl-mascot-grip{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(114,122,130,.26);
  box-shadow:0 0 0 6px rgba(255,255,255,.05);
  pointer-events:none;
}

.smpl-mascot{
  position:absolute;
  width:58px;
  height:38px;
  transform:
    translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 19px + var(--mbob, 0px)), 0)
    rotate(var(--mrot, 0deg));
  transform-origin:center;
  background:transparent;
  border:0;
  outline:none;
  box-shadow:none;
  filter:drop-shadow(0 8px 18px rgba(26,34,42,.08));
  pointer-events:auto;
  cursor:grab;
}
.smpl-mascot:focus,
.smpl-mascot:focus-visible{
  outline:none;
  box-shadow:none;
}
.smpl-mascot:active{ cursor:grabbing; }

.smpl-mascot-body{
  position:absolute;
  inset:0;
}

.smpl-mascot-eye{
  position:absolute;
  top:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(84,92,101,.16);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(255,255,255,.62) 52%, rgba(255,255,255,.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 4px 9px rgba(28,34,40,.05);
  overflow:hidden;
  transition:height .16s cubic-bezier(.22,1,.36,1), border-radius .16s ease, transform .16s ease;
}
.smpl-mascot-eye.left{ left:8px; }
.smpl-mascot-eye.right{ right:8px; }
.smpl-mascot-eye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#68727b;
  transform:translate(-50%,-50%) translate(var(--lookx, 0px), var(--looky, 0px));
  box-shadow:
    0 0 0 3px rgba(104,114,123,.04),
    0 0 10px rgba(104,114,123,.12);
  transition:transform .08s linear, opacity .14s ease;
}
.smpl-mascot-mouth{
  position:absolute;
  left:50%;
  top:25px;
  width:10px;
  height:5px;
  transform:translateX(-50%);
  border-bottom:1px solid rgba(84,92,101,.17);
  border-radius:0 0 999px 999px;
  opacity:.62;
  transition:opacity .16s ease, width .16s ease, transform .16s ease;
}

/* little hands */
.smpl-mascot-arm{
  position:absolute;
  top:15px;
  width:var(--armw, 16px);
  height:10px;
  pointer-events:none;
  opacity:.92;
}
.smpl-mascot-arm.left{
  left:6px;
  transform-origin:2px 50%;
  transform:rotate(var(--larm, -18deg));
}
.smpl-mascot-arm.right{
  right:6px;
  transform-origin:calc(100% - 2px) 50%;
  transform:rotate(var(--rarm, 18deg)) scaleX(-1);
}
.smpl-mascot-arm .arm-seg{
  position:absolute;
  left:1px;
  top:3px;
  width:calc(100% - 4px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(120,128,136,.18), rgba(120,128,136,.30));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.smpl-mascot-arm .paw{
  position:absolute;
  right:-1px;
  top:1px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(84,92,101,.14);
  box-shadow:0 2px 6px rgba(28,34,40,.05), inset 0 1px 0 rgba(255,255,255,.65);
}
.smpl-mascot-arm .paw::before,
.smpl-mascot-arm .paw::after{
  content:"";
  position:absolute;
  bottom:-1px;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(84,92,101,.11);
}
.smpl-mascot-arm .paw::before{ left:1px; }
.smpl-mascot-arm .paw::after{ right:1px; }

/* little feet */
.smpl-mascot-leg{
  position:absolute;
  bottom:0;
  width:10px;
  height:12px;
}
.smpl-mascot-leg.left{ left:18px; }
.smpl-mascot-leg.right{ right:18px; }
.smpl-mascot-leg .thigh,
.smpl-mascot-leg .shin,
.smpl-mascot-leg .foot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:rgba(98,107,115,.34);
  border-radius:999px;
}
.smpl-mascot-leg .thigh{
  top:0;
  width:2px;
  height:5px;
  transform-origin:50% 0;
}
.smpl-mascot-leg .shin{
  top:4px;
  width:2px;
  height:5px;
  transform-origin:50% 0;
}
.smpl-mascot-leg .foot{
  top:9px;
  width:7px;
  height:2px;
}

.smpl-mascot.is-running .smpl-mascot-leg.left{ animation:smplMascotLegL .22s linear infinite; }
.smpl-mascot.is-running .smpl-mascot-leg.right{ animation:smplMascotLegR .22s linear infinite; }
.smpl-mascot.is-running .smpl-mascot-arm.left{ animation:smplMascotArmL .22s linear infinite; }
.smpl-mascot.is-running .smpl-mascot-arm.right{ animation:smplMascotArmR .22s linear infinite; }

.smpl-mascot.is-hover .smpl-mascot-eye{
  height:11px;
  border-radius:999px;
}
.smpl-mascot.is-pressed .smpl-mascot-eye{
  height:9px;
}
.smpl-mascot.is-annoyed .smpl-mascot-eye{
  height:8px;
  border-radius:999px;
  transform:skewX(-8deg);
}
.smpl-mascot.is-annoyed .smpl-mascot-mouth{
  width:12px;
  border-bottom:none;
  border-top:1px solid rgba(84,92,101,.22);
  border-radius:999px 999px 0 0;
  transform:translateX(-50%) translateY(1px);
}
.smpl-mascot.is-peek .smpl-mascot-eye,
.smpl-mascot.is-hide .smpl-mascot-eye{
  height:4px;
  border-radius:999px;
}
.smpl-mascot.is-peek .smpl-mascot-eye::before,
.smpl-mascot.is-hide .smpl-mascot-eye::before{
  opacity:0;
}
.smpl-mascot.is-peek .smpl-mascot-mouth,
.smpl-mascot.is-hide .smpl-mascot-mouth{
  opacity:0;
}
.smpl-mascot.is-hide{
  opacity:0;
  pointer-events:none;
}

@keyframes smplMascotLegL{
  0%{ transform:rotate(18deg); }
  50%{ transform:rotate(-14deg) translateY(1px); }
  100%{ transform:rotate(18deg); }
}
@keyframes smplMascotLegR{
  0%{ transform:rotate(-14deg) translateY(1px); }
  50%{ transform:rotate(18deg); }
  100%{ transform:rotate(-14deg) translateY(1px); }
}
@keyframes smplMascotArmL{
  0%{ transform:rotate(-22deg); }
  50%{ transform:rotate(16deg); }
  100%{ transform:rotate(-22deg); }
}
@keyframes smplMascotArmR{
  0%{ transform:rotate(22deg) scaleX(-1); }
  50%{ transform:rotate(-16deg) scaleX(-1); }
  100%{ transform:rotate(22deg) scaleX(-1); }
}

body.dark-theme .smpl-mascot{
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.24));
}
body.dark-theme .smpl-mascot-eye{
  border-color:rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), rgba(255,255,255,.09) 52%, rgba(255,255,255,.02) 100%);
}
body.dark-theme .smpl-mascot-eye::before{
  background:#c6d0d8;
}
body.dark-theme .smpl-mascot-mouth{
  border-bottom-color:rgba(255,255,255,.16);
}
body.dark-theme .smpl-mascot.is-annoyed .smpl-mascot-mouth{
  border-top-color:rgba(255,255,255,.20);
}
body.dark-theme .smpl-mascot-arm .arm-seg,
body.dark-theme .smpl-mascot-leg .thigh,
body.dark-theme .smpl-mascot-leg .shin,
body.dark-theme .smpl-mascot-leg .foot{
  background:rgba(255,255,255,.22);
}
body.dark-theme .smpl-mascot-arm .paw{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.14);
}
body.dark-theme .smpl-mascot-grip{
  background:rgba(203,212,222,.28);
  box-shadow:0 0 0 6px rgba(255,255,255,.025);
}


/* ===== SMPL v91: line runner + hatch transitions ===== */
.smpl-mascot.is-sinking{
  transition: opacity .28s ease, transform .28s ease;
  opacity: .0;
}
.smpl-mascot.is-sinking{ transform:
    translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 19px + 12px), 0)
    rotate(var(--mrot, 0deg)) scale(.84);
}
.smpl-mascot.is-rising{
  opacity: .0;
}
.smpl-mascot.is-rising.ready{
  transition: opacity .24s ease;
  opacity: 1;
}



/* ===== SMPL v92: runner only on safe line ends, never over text ===== */

.smpl-mascot-layer{
  z-index:18 !important;
}
.smpl-mascot{
  z-index:18 !important;
}
.smpl-mascot.is-running{
  filter:drop-shadow(0 7px 13px rgba(26,34,42,.075)) !important;
}



/* ===== SMPL v93: real line-only runner, no visible teleport ===== */

.smpl-mascot-layer{
  z-index:18 !important;
  pointer-events:none !important;
}
.smpl-mascot{
  z-index:18 !important;
  transition:opacity .22s ease, transform .18s ease !important;
}
.smpl-mascot.is-hide{
  opacity:0 !important;
  pointer-events:none !important;
}
.smpl-mascot.is-hatch-in{
  opacity:0 !important;
  transform:
    translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 19px + 10px), 0)
    rotate(var(--mrot, 0deg))
    scale(.82) !important;
}
.smpl-mascot.is-hatch-out{
  opacity:1 !important;
}
.smpl-mascot-hatch{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:10px;
  border-radius:999px;
  transform:translate(-50%, -50%) scaleX(.2);
  opacity:0;
  pointer-events:none;
  border:1px solid rgba(84,92,101,.12);
  background:rgba(255,255,255,.32);
  box-shadow:0 8px 18px rgba(28,34,40,.045), inset 0 1px 0 rgba(255,255,255,.55);
  transition:opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.smpl-mascot-hatch.is-open{
  opacity:.78;
  transform:translate(-50%, -50%) scaleX(1);
}
.smpl-mascot.is-running .smpl-mascot-leg.left{ animation:smplMascotLegL .20s linear infinite !important; }
.smpl-mascot.is-running .smpl-mascot-leg.right{ animation:smplMascotLegR .20s linear infinite !important; }
.smpl-mascot.is-running .smpl-mascot-arm.left{ animation:smplMascotArmL .20s linear infinite !important; }
.smpl-mascot.is-running .smpl-mascot-arm.right{ animation:smplMascotArmR .20s linear infinite !important; }
body.dark-theme .smpl-mascot-hatch{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
}


/* ===== SMPL v94: line clinger with hands only ===== */
.smpl-mascot-layer{
  position:absolute;
  inset:0;
  z-index:18 !important;
  pointer-events:none !important;
  overflow:visible;
}
.smpl-mascot-grip{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(110,118,126,.22);
  box-shadow:0 0 0 6px rgba(255,255,255,.05);
  pointer-events:none;
}
.smpl-mascot-hatch{
  position:absolute;
  left:0; top:0;
  width:32px; height:10px;
  border-radius:999px;
  transform:translate(-50%, -50%) scaleX(.2);
  opacity:0; pointer-events:none;
  border:1px solid rgba(84,92,101,.12);
  background:rgba(255,255,255,.34);
  box-shadow:0 8px 18px rgba(28,34,40,.045), inset 0 1px 0 rgba(255,255,255,.55);
  transition:opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
.smpl-mascot-hatch.is-open{ opacity:.82; transform:translate(-50%, -50%) scaleX(1); }
.smpl-mascot{
  position:absolute;
  width:58px; height:30px;
  border:0; outline:none; background:transparent; box-shadow:none;
  filter:drop-shadow(0 7px 14px rgba(26,34,42,.08));
  transform:translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 15px + var(--mbob, 0px)), 0) rotate(var(--mrot, 0deg));
  transform-origin:center;
  pointer-events:auto !important;
  cursor:grab;
  transition:opacity .22s ease, transform .22s ease;
}
.smpl-mascot:focus,.smpl-mascot:focus-visible{ outline:none; box-shadow:none; }
.smpl-mascot:active{ cursor:grabbing; }
.smpl-mascot-body{ position:absolute; inset:0; }
.smpl-mascot-leg{ display:none !important; }
.smpl-mascot-eye{
  position:absolute; top:4px; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(84,92,101,.16);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(255,255,255,.62) 52%, rgba(255,255,255,.12) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76), 0 4px 9px rgba(28,34,40,.05);
  overflow:hidden;
  transition:height .16s cubic-bezier(.22,1,.36,1), border-radius .16s ease, transform .16s ease;
}
.smpl-mascot-eye.left{ left:8px; }
.smpl-mascot-eye.right{ right:8px; }
.smpl-mascot-eye::before{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:#68727b; transform:translate(-50%,-50%) translate(var(--lookx, 0px), var(--looky, 0px));
  box-shadow:0 0 0 3px rgba(104,114,123,.04), 0 0 10px rgba(104,114,123,.12);
  transition:transform .08s linear, opacity .14s ease;
}
.smpl-mascot-mouth{
  position:absolute; left:50%; top:23px; width:10px; height:5px; transform:translateX(-50%);
  border-bottom:1px solid rgba(84,92,101,.17); border-radius:0 0 999px 999px; opacity:.62;
  transition:opacity .16s ease, width .16s ease, transform .16s ease;
}
.smpl-mascot-arm{ position:absolute; top:14px; width:var(--armw, 16px); height:10px; pointer-events:none; opacity:.96; }
.smpl-mascot-arm.left{ left:5px; transform-origin:2px 50%; transform:rotate(var(--larm, -18deg)); }
.smpl-mascot-arm.right{ right:5px; transform-origin:calc(100% - 2px) 50%; transform:rotate(var(--rarm, 18deg)) scaleX(-1); }
.smpl-mascot-arm .arm-seg{ position:absolute; left:1px; top:3px; width:calc(100% - 4px); height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(120,128,136,.18), rgba(120,128,136,.30)); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.smpl-mascot-arm .paw{ position:absolute; right:-1px; top:1px; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.88); border:1px solid rgba(84,92,101,.14); box-shadow:0 2px 6px rgba(28,34,40,.05), inset 0 1px 0 rgba(255,255,255,.65); }
.smpl-mascot-arm .paw::before,.smpl-mascot-arm .paw::after{ content:""; position:absolute; bottom:-1px; width:2px; height:2px; border-radius:50%; background:rgba(84,92,101,.11); }
.smpl-mascot-arm .paw::before{ left:1px; }
.smpl-mascot-arm .paw::after{ right:1px; }
.smpl-mascot.is-hover .smpl-mascot-eye{ height:11px; border-radius:999px; }
.smpl-mascot.is-pressed .smpl-mascot-eye{ height:9px; }
.smpl-mascot.is-annoyed .smpl-mascot-eye{ height:8px; border-radius:999px; transform:skewX(-8deg); }
.smpl-mascot.is-annoyed .smpl-mascot-mouth{ width:12px; border-bottom:none; border-top:1px solid rgba(84,92,101,.22); border-radius:999px 999px 0 0; transform:translateX(-50%) translateY(1px); }
.smpl-mascot.is-burrow{
  opacity:0 !important;
  transform:translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 15px + 12px), 0) rotate(var(--mrot, 0deg)) scale(.82) !important;
}
.smpl-mascot.is-emerge{ opacity:0 !important; }
.smpl-mascot.is-emerge.ready{ opacity:1 !important; }
.smpl-mascot.is-idle-float .smpl-mascot-arm.left{ animation:smplHandSwayL 1.8s ease-in-out infinite; }
.smpl-mascot.is-idle-float .smpl-mascot-arm.right{ animation:smplHandSwayR 1.8s ease-in-out infinite; }
@keyframes smplHandSwayL{ 0%,100%{ transform:rotate(var(--larm, -18deg)); } 50%{ transform:rotate(calc(var(--larm, -18deg) + 5deg)); } }
@keyframes smplHandSwayR{ 0%,100%{ transform:rotate(var(--rarm, 18deg)) scaleX(-1); } 50%{ transform:rotate(calc(var(--rarm, 18deg) - 5deg)) scaleX(-1); } }
body.dark-theme .smpl-mascot{ filter:drop-shadow(0 8px 18px rgba(0,0,0,.24)); }
body.dark-theme .smpl-mascot-eye{ border-color:rgba(255,255,255,.13); background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), rgba(255,255,255,.09) 52%, rgba(255,255,255,.02) 100%); }
body.dark-theme .smpl-mascot-eye::before{ background:#c6d0d8; }
body.dark-theme .smpl-mascot-mouth{ border-bottom-color:rgba(255,255,255,.16); }
body.dark-theme .smpl-mascot.is-annoyed .smpl-mascot-mouth{ border-top-color:rgba(255,255,255,.20); }
body.dark-theme .smpl-mascot-arm .arm-seg{ background:rgba(255,255,255,.22); }
body.dark-theme .smpl-mascot-arm .paw{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14); }
body.dark-theme .smpl-mascot-grip{ background:rgba(203,212,222,.28); box-shadow:0 0 0 6px rgba(255,255,255,.025); }
body.dark-theme .smpl-mascot-hatch{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09); box-shadow:0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08); }


/* ===== SMPL v95: strict line clinger only ===== */
.smpl-mascot-layer{ position:absolute; inset:0; z-index:18 !important; pointer-events:none !important; overflow:visible; }
.smpl-mascot{ transition: opacity .28s ease, transform .28s ease !important; }
.smpl-mascot.is-hidden-soft{ opacity:0 !important; transform:translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 15px + 12px), 0) rotate(var(--mrot,0deg)) scale(.84) !important; }
.smpl-mascot-hatch{ transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1) !important; }
.smpl-mascot-grip{ opacity:.55; }


/* ===== SMPL v97: visible fixed line-clinger ===== */
.smpl-mascot-layer.v97{
  position:absolute;
  inset:0;
  z-index:1200 !important;
  pointer-events:none !important;
  overflow:visible;
}
.v97-line-clinger{
  position:absolute;
  width:58px;
  height:30px;
  border:0;
  outline:none;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 7px 14px rgba(26,34,42,.10));
  transform:translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 30px + var(--mbob, 0px)), 0);
  transform-origin:center bottom;
  pointer-events:auto !important;
  cursor:grab;
  opacity:1;
  transition:opacity .24s ease, transform .24s ease;
}
.v97-line-clinger:focus,
.v97-line-clinger:focus-visible{
  outline:none;
  box-shadow:none;
}
.v97-line-clinger-body{
  position:absolute;
  inset:0;
}
.v97-line-clinger-eye{
  position:absolute;
  top:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(84,92,101,.16);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(255,255,255,.62) 52%, rgba(255,255,255,.12) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76), 0 4px 9px rgba(28,34,40,.05);
  overflow:hidden;
  transition:height .16s cubic-bezier(.22,1,.36,1), border-radius .16s ease, transform .16s ease;
}
.v97-line-clinger-eye.left{ left:8px; }
.v97-line-clinger-eye.right{ right:8px; }
.v97-line-clinger-eye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#68727b;
  transform:translate(-50%, -50%) translate(var(--lookx, 0px), var(--looky, 0px));
  box-shadow:0 0 0 3px rgba(104,114,123,.04), 0 0 10px rgba(104,114,123,.12);
}
.v97-line-clinger-mouth{
  position:absolute;
  left:50%;
  top:22px;
  width:10px;
  height:5px;
  transform:translateX(-50%);
  border-bottom:1px solid rgba(84,92,101,.17);
  border-radius:0 0 999px 999px;
  opacity:.62;
}
.v97-line-clinger-arm{
  position:absolute;
  top:18px;
  width:var(--armw, 16px);
  height:10px;
  pointer-events:none;
}
.v97-line-clinger-arm.left{
  left:7px;
  transform-origin:2px 50%;
  transform:rotate(var(--larm, -50deg));
}
.v97-line-clinger-arm.right{
  right:7px;
  transform-origin:calc(100% - 2px) 50%;
  transform:rotate(var(--rarm, 50deg)) scaleX(-1);
}
.v97-line-clinger-arm .seg{
  position:absolute;
  left:1px;
  top:3px;
  width:calc(100% - 4px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(120,128,136,.18), rgba(120,128,136,.32));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.v97-line-clinger-arm .paw{
  position:absolute;
  right:-1px;
  top:1px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(84,92,101,.14);
  box-shadow:0 2px 6px rgba(28,34,40,.05), inset 0 1px 0 rgba(255,255,255,.65);
}
.v97-line-clinger:hover .v97-line-clinger-eye{
  height:11px;
  border-radius:999px;
}
.v97-line-clinger.is-pressed .v97-line-clinger-eye{
  height:9px;
}
.v97-line-clinger.is-annoyed .v97-line-clinger-eye{
  height:8px;
  border-radius:999px;
  transform:skewX(-8deg);
}
.v97-line-clinger.is-annoyed .v97-line-clinger-mouth{
  width:12px;
  border-bottom:none;
  border-top:1px solid rgba(84,92,101,.22);
  border-radius:999px 999px 0 0;
  transform:translateX(-50%) translateY(1px);
}
.v97-line-clinger.is-hidden-soft{
  opacity:0 !important;
  transform:translate3d(calc(var(--mxp, 0px) - 29px), calc(var(--myp, 0px) - 18px), 0) scale(.74) !important;
}
.v97-hatch{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:10px;
  border-radius:999px;
  transform:translate(-50%, -50%) scaleX(.2);
  opacity:0;
  pointer-events:none;
  border:1px solid rgba(84,92,101,.12);
  background:rgba(255,255,255,.34);
  box-shadow:0 8px 18px rgba(28,34,40,.045), inset 0 1px 0 rgba(255,255,255,.55);
  transition:opacity .22s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
.v97-hatch.is-open{
  opacity:.82;
  transform:translate(-50%, -50%) scaleX(1);
}
.v97-grip{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:rgba(108,117,126,.24);
  box-shadow:0 0 0 6px rgba(255,255,255,.05);
  pointer-events:none;
}
body.dark-theme .v97-line-clinger-eye{
  border-color:rgba(255,255,255,.13);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), rgba(255,255,255,.09) 52%, rgba(255,255,255,.02) 100%);
}
body.dark-theme .v97-line-clinger-eye::before{
  background:#c6d0d8;
}
body.dark-theme .v97-line-clinger-arm .seg{
  background:rgba(255,255,255,.22);
}
body.dark-theme .v97-line-clinger-arm .paw{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.14);
}


/* ===== SMPL v98: rope hands + real hatch disappear ===== */
.smpl-mascot-layer.v98{position:absolute;inset:0;z-index:1200!important;pointer-events:none!important;overflow:visible;}
.v98-line-clinger{position:absolute;width:58px;height:28px;border:0;outline:none;background:transparent;box-shadow:none;filter:drop-shadow(0 7px 14px rgba(26,34,42,.10));transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(var(--tilt,0deg));transform-origin:center top;pointer-events:auto!important;cursor:grab;opacity:1;transition:opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);} 
.v98-line-clinger:focus,.v98-line-clinger:focus-visible{outline:none;box-shadow:none;}
.v98-line-clinger:active{cursor:grabbing;}
.v98-line-clinger-body{position:absolute;inset:0;}
.v98-eye{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(84,92,101,.16);background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(255,255,255,.62) 52%, rgba(255,255,255,.12) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 4px 9px rgba(28,34,40,.05);overflow:hidden;transition:height .18s cubic-bezier(.22,1,.36,1), border-radius .18s ease, transform .18s ease, width .18s ease;}
.v98-eye.left{left:8px;}
.v98-eye.right{right:8px;}
.v98-eye::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#68727b;transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px));box-shadow:0 0 0 3px rgba(104,114,123,.04),0 0 10px rgba(104,114,123,.12);transition:transform .08s linear, opacity .14s ease;}
.v98-line-clinger.is-hover .v98-eye{height:12px;border-radius:999px;}
.v98-line-clinger.is-curious .v98-eye{width:22px;height:22px;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 6px 14px rgba(28,34,40,.07);}
.v98-line-clinger.is-curious .v98-eye.left{left:7px;}
.v98-line-clinger.is-curious .v98-eye.right{right:7px;}
.v98-line-clinger.is-wink-left .v98-eye.left,.v98-line-clinger.is-wink-right .v98-eye.right{height:5px;border-radius:999px;transform:translateY(6px);}
.v98-line-clinger.is-wink-left .v98-eye.right,.v98-line-clinger.is-wink-right .v98-eye.left{transform:translateY(-1px) scale(1.04);}
.v98-line-clinger.is-annoyed .v98-eye{height:8px;width:21px;border-radius:999px;transform:skewX(-8deg) translateY(1px);} 
.v98-line-clinger.is-blink .v98-eye{height:6px;border-radius:999px;} 
.v98-line-clinger.is-pressed .v98-eye{height:9px;border-radius:999px;} 
.v98-line-clinger.is-diving{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 7px),0) scale(.82);} 
.v98-line-clinger.is-emerge{animation:v98Emerge .34s cubic-bezier(.22,1,.36,1);} 
.v98-line-clinger.is-hidden-soft{opacity:0!important;transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) + 2px),0) scale(.62)!important;} 
@keyframes v98Emerge{0%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) + 10px),0) scale(.68);opacity:0;}70%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 18px),0) scale(1.04);opacity:1;}100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) scale(1);opacity:1;}}
.v98-rope-svg{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:0;}
.v98-rope{fill:none;stroke:rgba(120,128,136,.44);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 1px 0 rgba(255,255,255,.28));}
.v98-rope-hand{fill:rgba(255,255,255,.92);stroke:rgba(84,92,101,.14);stroke-width:1.2;filter:drop-shadow(0 2px 4px rgba(28,34,40,.05));}
.v98-rope-hand-finger{fill:rgba(84,92,101,.12);}
.v98-hatch{position:absolute;left:0;top:0;width:42px;height:14px;border-radius:999px;transform:translate(-50%,-50%) scaleX(.2);opacity:0;pointer-events:none;border:1px solid rgba(84,92,101,.12);background:linear-gradient(180deg, rgba(255,255,255,.50), rgba(232,236,240,.34));box-shadow:0 8px 18px rgba(28,34,40,.05), inset 0 1px 0 rgba(255,255,255,.65);transition:opacity .24s ease, transform .26s cubic-bezier(.22,1,.36,1);}
.v98-hatch::before{content:"";position:absolute;inset:2px 8px;border-radius:999px;border-top:1px solid rgba(84,92,101,.08);}
.v98-hatch.is-open{opacity:.9;transform:translate(-50%,-50%) scaleX(1);} 
.v98-grip{display:none!important;}
body.dark-theme .v98-eye{border-color:rgba(255,255,255,.13);background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), rgba(255,255,255,.09) 52%, rgba(255,255,255,.02) 100%);} 
body.dark-theme .v98-eye::before{background:#c6d0d8;box-shadow:0 0 0 3px rgba(198,208,216,.05),0 0 10px rgba(198,208,216,.12);} 
body.dark-theme .v98-rope{stroke:rgba(255,255,255,.34);} body.dark-theme .v98-rope-hand{fill:rgba(255,255,255,.15);stroke:rgba(255,255,255,.14);} body.dark-theme .v98-rope-hand-finger{fill:rgba(255,255,255,.20);} body.dark-theme .v98-hatch{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));border-color:rgba(255,255,255,.10);box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);} body.dark-theme .v98-grip{display:none!important;} 

.v98-line-clinger.is-panic .v98-eye{width:23px;height:23px;transform:translateY(-1px) scale(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 7px 14px rgba(28,34,40,.09);}
.v98-line-clinger.is-panic .v98-eye::before{transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) scale(.78);}
.v98-line-clinger.is-panic{animation:v101PanicShake .18s linear infinite;}
.v98-line-clinger.is-annoyed .v98-eye{height:7px;width:22px;border-radius:999px;transform:skewX(-12deg) translateY(2px);}
@keyframes v101PanicShake{0%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + 0deg));}25%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px) - .6px),0) rotate(calc(var(--tilt,0deg) - 1deg));}50%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px) + .3px),0) rotate(calc(var(--tilt,0deg) + 1deg));}75%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px) - .4px),0) rotate(calc(var(--tilt,0deg) - .8deg));}100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + 0deg));}}

.v98-line-clinger{transition:opacity .26s ease, transform .20s cubic-bezier(.22,1,.36,1)!important; will-change:transform;}
.v98-line-clinger.is-panic{animation:v102PanicPulse .22s ease-in-out infinite;}
.v98-line-clinger.is-panic .v98-eye{width:24px;height:24px;transform:translateY(-1px) scale(1.02);}
.v98-line-clinger.is-annoyed .v98-eye{height:8px!important;width:22px!important;border-radius:999px!important;transform:skewX(-14deg) translateY(2px)!important;}
.v98-line-clinger.is-dizzy .v98-eye{width:22px;height:22px;transform:translateY(-1px);}
.v98-line-clinger.is-dizzy .v98-eye::before{width:5px;height:5px;animation:v102DizzyOrbit .48s linear infinite;box-shadow:none;}
.v98-line-clinger.is-dizzy .v98-eye.left::after,.v98-line-clinger.is-dizzy .v98-eye.right::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border:1px solid rgba(104,114,123,.18);border-radius:50%;transform:translate(-50%,-50%);}
.v98-line-clinger.is-dizzy .v98-eye.left::before{animation-delay:0s;}
.v98-line-clinger.is-dizzy .v98-eye.right::before{animation-delay:-.24s;}
.v98-rope-hand{fill:rgba(255,255,255,.97);stroke:rgba(84,92,101,.10);stroke-width:1;filter:drop-shadow(0 1px 2px rgba(28,34,40,.04));}
.v98-rope-hand-finger{fill:rgba(84,92,101,.10);}
body.dark-theme .v98-rope-hand{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.10);} 
body.dark-theme .v98-rope-hand-finger{fill:rgba(255,255,255,.18);} 
@keyframes v102PanicPulse{0%,100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + 0deg));}50%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px) - .5px),0) rotate(calc(var(--tilt,0deg) - 1.2deg));}}
@keyframes v102DizzyOrbit{0%{transform:translate(-50%,-50%) translate(0px,-3px);}25%{transform:translate(-50%,-50%) translate(3px,0px);}50%{transform:translate(-50%,-50%) translate(0px,3px);}75%{transform:translate(-50%,-50%) translate(-3px,0px);}100%{transform:translate(-50%,-50%) translate(0px,-3px);}}

/* v111: shorter, softer mascot pull */
.v98-rope{stroke:rgba(120,128,136,.28)!important;stroke-width:1.85!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18));}
body.dark-theme .v98-rope{stroke:rgba(255,255,255,.24)!important;}

/* v112: more visible ropes + stronger tension feedback */
.v98-rope{stroke:rgba(120,128,136,.36)!important;stroke-width:2.05!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18));}
body.dark-theme .v98-rope{stroke:rgba(255,255,255,.30)!important;}
.v98-line-clinger.is-panic .v98-rope{stroke-width:2.25!important;}


/* v113: no first-load fly + calmer movement */
.v98-line-clinger{
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.22,1,.36,1) !important;
}
.v98-rope{
  stroke-width:1.95px !important;
}
body:not(.v113-clinger-ready) .v98-line-clinger{
  transition:none !important;
}


/* v114: soft disappear / reappear instead of running across page */
.v98-line-clinger.is-soft-exit{
  transition:opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.v98-line-clinger.is-soft-enter{
  transition:opacity .22s ease, transform .26s cubic-bezier(.22,1,.36,1) !important;
}
.v98-line-clinger.is-hidden-soft{
  opacity:0 !important;
  transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) + 2px),0) scale(.82) !important;
}
.v98-line-clinger.is-emerge{
  animation:none !important;
}


/* v117: no floating during scroll, line-only placement */
.v98-line-clinger.is-scroll-hidden{
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .08s linear, transform .08s linear !important;
}
.v98-line-clinger.is-scroll-hidden ~ *,
.v98-line-clinger.is-hidden-soft{
  pointer-events:none !important;
}


/* v118: fully hide mascot while scrolling; no edge/corner placement, only outer block lines */
.v98-line-clinger.is-scroll-hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:none !important;
}


/* v119: do not vanish instantly on scroll.
   He disappears only after being scrolled past, then reappears as if opening eyes. */
.v98-line-clinger.is-scroll-hidden{
  visibility:visible !important;
}

.v98-line-clinger.is-scroll-passed{
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .22s ease !important;
}
.v98-line-clinger.is-scroll-passed .v98-eye{
  height:4px !important;
  transform:translateY(8px) !important;
}
.v98-line-clinger.is-scroll-passed .v98-eye::before{
  opacity:0 !important;
}

.v98-line-clinger.is-eye-open{
  animation:v119EyeWake .54s cubic-bezier(.22,1,.36,1);
}
.v98-line-clinger.is-eye-open .v98-eye{
  animation:v119EyeOpen .54s cubic-bezier(.22,1,.36,1);
}
@keyframes v119EyeWake{
  0%{opacity:0; transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 8px + var(--mbob,0px)),0) scale(.94) rotate(var(--tilt,0deg));}
  100%{opacity:1; transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) scale(1) rotate(var(--tilt,0deg));}
}
@keyframes v119EyeOpen{
  0%{height:4px; transform:translateY(8px);}
  45%{height:4px; transform:translateY(8px);}
  100%{height:17px; transform:translateY(0);}
}


/* v121: force eyes visible, keep them on all pages */
.smpl-mascot-layer.v98{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.v98-line-clinger{
  display:block !important;
  visibility:visible !important;
  opacity:1;
  z-index:1205 !important;
}
.v98-rope-svg{
  visibility:visible;
}
.v98-line-clinger.is-scroll-passed{
  opacity:0 !important;
}
.v98-line-clinger.is-hidden-soft{
  opacity:0 !important;
}
.v98-line-clinger.is-pop{
  transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 16px + var(--mbob,0px)),0) scale(1.04) rotate(var(--tilt,0deg)) !important;
}
.v98-line-clinger.is-shy .v98-eye{
  height:9px;
  transform:translateY(4px) scale(.96);
}
.v98-line-clinger.is-hover .v98-eye::before{
  transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) scale(.86);
}


/* v122: no visible glide between anchor points — eyes only appear/disappear */
.v98-line-clinger{
  transition:opacity .24s ease !important;
}
.v98-line-clinger.is-no-motion{
  transition:none !important;
}
.v98-line-clinger.is-eye-open{
  animation:v122EyeWake .56s cubic-bezier(.22,1,.36,1) !important;
}
.v98-line-clinger.is-eye-open .v98-eye{
  animation:v122EyeOpen .56s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes v122EyeWake{
  0%{opacity:0; filter:blur(2px) drop-shadow(0 4px 10px rgba(26,34,42,.05));}
  100%{opacity:1; filter:blur(0) drop-shadow(0 7px 14px rgba(26,34,42,.10));}
}
@keyframes v122EyeOpen{
  0%,42%{height:4px; transform:translateY(8px);}
  100%{height:17px; transform:translateY(0);}
}

/* v122 extra emotions/interactions */
.v98-line-clinger.is-squint .v98-eye{
  height:9px !important;
  border-radius:999px !important;
  transform:translateY(4px);
}
.v98-line-clinger.is-startled .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-2px) scale(1.04);
}
.v98-line-clinger.is-startled .v98-eye::before{
  transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) scale(.72);
}
.v98-line-clinger.is-pop{
  animation:v122Pop .28s cubic-bezier(.22,1,.36,1);
}
@keyframes v122Pop{
  0%{filter:drop-shadow(0 7px 14px rgba(26,34,42,.10));}
  45%{filter:drop-shadow(0 10px 18px rgba(26,34,42,.14));}
  100%{filter:drop-shadow(0 7px 14px rgba(26,34,42,.10));}
}
.v98-line-clinger.is-shy .v98-eye{
  height:8px !important;
  transform:translateY(5px) scale(.94);
}
.v98-line-clinger.is-sleepy .v98-eye{
  height:5px !important;
  border-radius:999px !important;
  transform:translateY(7px);
}


/* v124: obvious actions - throw away + cursor punch */
.v124-smack{
  position:absolute;
  left:0;top:0;
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  pointer-events:none;
  z-index:1300;
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(70,78,88,.72);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.v124-smack::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:36px;height:22px;
  border:1.5px solid rgba(70,78,88,.22);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-14deg);
}
.v124-smack.is-on{animation:v124Smack .48s cubic-bezier(.22,1,.36,1);}
@keyframes v124Smack{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-10deg);}
  24%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(8deg);}
}

.v98-line-clinger.is-bouncey{animation:v124Bounce .52s cubic-bezier(.22,1,.36,1);}
@keyframes v124Bounce{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(var(--tilt,0deg));}
  45%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 23px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) - 3deg));}
}

.v98-line-clinger.is-ready-throw .v98-eye{
  width:24px!important;
  height:24px!important;
  transform:translateY(-2px) scale(1.06);
}
.v98-line-clinger.is-ready-throw{
  animation:v124ReadyThrow .18s linear infinite;
}
@keyframes v124ReadyThrow{
  0%,100%{filter:drop-shadow(0 7px 14px rgba(26,34,42,.10));}
  50%{filter:drop-shadow(0 10px 18px rgba(26,34,42,.18));}
}

.v98-line-clinger.is-thrown{
  pointer-events:none!important;
  animation:v124Thrown .68s cubic-bezier(.16,.84,.44,1) forwards!important;
}
.v98-line-clinger.is-thrown .v98-eye{
  width:24px!important;
  height:24px!important;
  transform:translateY(-2px) scale(1.06);
}
@keyframes v124Thrown{
  0%{
    opacity:1;
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) rotate(var(--tilt,0deg)) scale(1);
  }
  55%{
    opacity:1;
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--throw-x,0px)), calc(var(--myp,0px) - 14px + var(--throw-y,0px)),0) rotate(150deg) scale(.98);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--throw-x,0px)), calc(var(--myp,0px) - 14px + var(--throw-y,0px) + 70px),0) rotate(260deg) scale(.82);
  }
}

.v98-line-clinger.is-punch{
  animation:v124Punch .28s cubic-bezier(.22,1,.36,1);
}
@keyframes v124Punch{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(var(--tilt,0deg));
  }
  42%{
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--punch-x,0px)), calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--punch-y,0px)),0) rotate(calc(var(--tilt,0deg) + 11deg)) scale(1.04);
  }
}


/* v125: cursor knockback + carried detached mascot */
body.cursor-bonk .cursor-ring{filter:drop-shadow(0 10px 18px rgba(18,24,31,.12));}
.v98-line-clinger.is-carried{
  transition:none !important;
  cursor:grabbing;
  filter:drop-shadow(0 14px 24px rgba(26,34,42,.14));
}
.v98-line-clinger.is-carried .v98-eye{
  width:22px !important;
  height:22px !important;
  transform:translateY(-1px) scale(1.03);
}
.v98-line-clinger.is-carried::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px dashed rgba(114,124,134,.16);
  animation:v125CarryOrbit 1.4s linear infinite;
}
@keyframes v125CarryOrbit{from{transform:rotate(0deg) scale(.96);opacity:.55;}to{transform:rotate(360deg) scale(1.02);opacity:.14;}}


/* v126: detached hold first, throw only on cursor release */
.v98-line-clinger.is-carried{
  transition:none !important;
  cursor:grabbing;
  filter:drop-shadow(0 16px 28px rgba(26,34,42,.16));
}
.v98-line-clinger.is-carried .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-2px) scale(1.06);
}
.v98-line-clinger.is-carried::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px dashed rgba(114,124,134,.22);
  animation:v126CarryOrbit 1.05s linear infinite;
}
@keyframes v126CarryOrbit{
  from{transform:rotate(0deg) scale(.95);opacity:.65;}
  to{transform:rotate(360deg) scale(1.04);opacity:.10;}
}

.v98-line-clinger.is-throw-release{
  pointer-events:none!important;
  animation:v126ThrowRelease .70s cubic-bezier(.16,.84,.44,1) forwards!important;
}
.v98-line-clinger.is-throw-release .v98-eye{
  width:24px!important;
  height:24px!important;
  transform:translateY(-2px) scale(1.06);
}
@keyframes v126ThrowRelease{
  0%{
    opacity:1;
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) rotate(var(--tilt,0deg)) scale(1);
  }
  56%{
    opacity:1;
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--throw-x,0px)), calc(var(--myp,0px) - 14px + var(--throw-y,0px)),0) rotate(155deg) scale(.96);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--throw-x,0px)), calc(var(--myp,0px) - 14px + var(--throw-y,0px) + 82px),0) rotate(270deg) scale(.80);
  }
}

/* stronger visual cursor knock */
body.cursor-bonk .cursor-core{
  transform:scale(1.65) !important;
  filter:drop-shadow(0 0 14px rgba(60,70,82,.22));
}
body.cursor-bonk .cursor-ring{
  filter:drop-shadow(0 14px 24px rgba(18,24,31,.22));
}


/* v127: stronger cursor knockback and more physical throw */
body.cursor-bonk .cursor-core{
  transform:scale(2.05) !important;
  filter:drop-shadow(0 0 18px rgba(50,62,78,.30));
}
body.cursor-bonk .cursor-ring{
  filter:drop-shadow(0 16px 30px rgba(18,24,31,.30));
}

.v98-line-clinger.is-throw-panic .v98-eye{
  width:25px !important;
  height:25px !important;
  transform:translateY(-3px) scale(1.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 9px 18px rgba(28,34,40,.14) !important;
}
.v98-line-clinger.is-throw-panic .v98-eye::before{
  width:4px !important;
  height:4px !important;
  transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) scale(.68) !important;
}
.v98-line-clinger.is-carried{
  animation:v127CarryShake .16s linear infinite;
}
@keyframes v127CarryShake{
  0%,100%{filter:drop-shadow(0 16px 28px rgba(26,34,42,.16));}
  50%{filter:drop-shadow(0 18px 34px rgba(26,34,42,.24));}
}

.v98-line-clinger.is-throw-release{
  pointer-events:none!important;
  animation:v127ThrowRelease 1.05s cubic-bezier(.12,.86,.18,1) forwards!important;
}
@keyframes v127ThrowRelease{
  0%{
    opacity:1;
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) rotate(var(--tilt,0deg)) scale(1);
  }
  34%{
    opacity:1;
    transform:translate3d(calc(var(--mxp,0px) - 29px + calc(var(--throw-x,0px) * .55)), calc(var(--myp,0px) - 14px + calc(var(--throw-y,0px) * .40) - 48px),0) rotate(calc(var(--throw-spin,180deg) * .45)) scale(.98);
  }
  72%{
    opacity:.88;
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--throw-x,0px)), calc(var(--myp,0px) - 14px + var(--throw-y,0px) + 36px),0) rotate(var(--throw-spin,260deg)) scale(.86);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--throw-x,0px)), calc(var(--myp,0px) - 14px + var(--throw-y,0px) + 170px),0) rotate(calc(var(--throw-spin,260deg) + 140deg)) scale(.70);
  }
}


/* v128: stone-like throw, visible tearing, no text hit marker */
.v98-line-clinger{
  transform:
    translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0)
    rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg))) !important;
}

.v98-line-clinger.is-tearing{
  animation:v128Tearing .12s linear infinite !important;
}
.v98-line-clinger.is-tearing .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-2px) scale(1.08);
}
@keyframes v128Tearing{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(26,34,42,.12));}
  50%{filter:drop-shadow(0 13px 24px rgba(26,34,42,.22));}
}

.v98-line-clinger.is-detach-pop{
  animation:v128DetachPop .42s cubic-bezier(.2,1.4,.34,1) !important;
}
@keyframes v128DetachPop{
  0%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) scale(1) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));}
  42%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 20px),0) scale(1.16) rotate(calc(var(--tilt,0deg) + 12deg));}
  100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) scale(1) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));}
}

.v98-line-clinger.is-carried{
  animation:v128CarryPanic .14s linear infinite !important;
}
@keyframes v128CarryPanic{
  0%,100%{filter:drop-shadow(0 16px 28px rgba(26,34,42,.18));}
  50%{filter:drop-shadow(0 19px 36px rgba(26,34,42,.30));}
}

.v98-line-clinger.is-throw-stone{
  pointer-events:none !important;
  transition:none !important;
  animation:none !important;
  opacity:1;
}
.v98-line-clinger.is-throw-stone .v98-eye{
  width:25px !important;
  height:25px !important;
  transform:translateY(-3px) scale(1.12) !important;
}
.v98-line-clinger.is-throw-stone .v98-eye::before{
  width:4px !important;
  height:4px !important;
  transform:translate(-50%,-50%) translate(var(--lookx,0px),var(--looky,0px)) scale(.65) !important;
}

.v124-smack{
  width:42px !important;
  height:42px !important;
  font-size:0 !important;
}
.v124-smack::before{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  border:2px solid rgba(70,78,88,.34) !important;
  box-shadow:0 0 0 8px rgba(70,78,88,.055);
}
.v124-smack::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:48px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(70,78,88,.55), transparent);
  transform:translate(-50%,-50%) rotate(-24deg);
  box-shadow:
    0 -9px 0 -0.3px rgba(70,78,88,.22),
    0 9px 0 -0.3px rgba(70,78,88,.18);
}
.v124-smack.is-on{
  animation:v128Impact .42s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes v128Impact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-16deg);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(-16deg);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(10deg);}
}

.v98-line-clinger.is-angry-hit .v98-eye{
  height:8px !important;
  width:23px !important;
  border-radius:999px !important;
  transform:skewX(-15deg) translateY(3px) !important;
}


/* v129: clearer hit impact + more random eye moods */

/* New hit visual: slash + shockwave instead of BONK/text */
.v124-smack{
  width:54px !important;
  height:54px !important;
  font-size:0 !important;
  opacity:0;
  filter:drop-shadow(0 8px 14px rgba(24,30,38,.10));
}
.v124-smack::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:50px !important;
  height:50px !important;
  border-radius:50% !important;
  border:2px solid rgba(58,68,80,.28) !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.88) 0 12%, rgba(255,255,255,0) 13%),
    conic-gradient(from 20deg, transparent 0 10deg, rgba(58,68,80,.46) 10deg 18deg, transparent 18deg 58deg, rgba(58,68,80,.30) 58deg 66deg, transparent 66deg 100%);
  box-shadow:
    0 0 0 8px rgba(58,68,80,.045),
    0 0 0 15px rgba(58,68,80,.025) !important;
  transform:translate(-50%,-50%) rotate(-20deg) !important;
}
.v124-smack::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:64px !important;
  height:4px !important;
  border-radius:999px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(58,68,80,.10) 15%, rgba(58,68,80,.64) 48%, rgba(58,68,80,.28) 70%, transparent 100%) !important;
  transform:translate(-50%,-50%) rotate(-30deg) !important;
  box-shadow:
    0 -12px 0 -1px rgba(58,68,80,.18),
    0 12px 0 -1px rgba(58,68,80,.14) !important;
}
.v124-smack.is-on{
  animation:v129StrikeImpact .48s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v129StrikeImpact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(-18deg);}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(-18deg);}
  62%{opacity:.85;transform:translate(-50%,-50%) scale(1.20) rotate(4deg);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(14deg);}
}

.v98-line-clinger.is-hit-swing{
  animation:v129HitSwing .34s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v129HitSwing{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  38%{
    transform:translate3d(calc(var(--mxp,0px) - 29px + var(--punch-x,0px)), calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--punch-y,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 19deg)) scale(1.08);
  }
}

/* Suspicion: narrowed eyes, side glance */
.v98-line-clinger.is-suspicious .v98-eye{
  height:8px !important;
  width:22px !important;
  border-radius:999px !important;
  transform:translateY(4px) skewX(-10deg) !important;
}
.v98-line-clinger.is-suspicious .v98-eye::before{
  width:5px !important;
  height:5px !important;
}

/* Random sleep: slow closing and tiny nod */
.v98-line-clinger.is-random-sleep{
  animation:v129SleepNod 1.25s ease-in-out !important;
}
.v98-line-clinger.is-random-sleep .v98-eye{
  animation:v129SleepEyes 1.25s ease-in-out !important;
}
@keyframes v129SleepNod{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  46%,68%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 10px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 4deg));
  }
}
@keyframes v129SleepEyes{
  0%,18%,100%{height:20px;transform:translateY(0);}
  42%,70%{height:4px;border-radius:999px;transform:translateY(8px);}
}

/* Wink while looking straight */
.v98-line-clinger.is-front-wink .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,0px) !important;
}
.v98-line-clinger.is-front-wink .v98-eye.left{
  height:5px !important;
  border-radius:999px !important;
  transform:translateY(7px) !important;
}
.v98-line-clinger.is-front-wink .v98-eye.right{
  width:22px !important;
  height:22px !important;
  transform:translateY(-1px) scale(1.04) !important;
}

/* Looking around: pupils scan left-right */
.v98-line-clinger.is-looking-around .v98-eye::before{
  animation:v129LookAround 1.1s ease-in-out !important;
}
.v98-line-clinger.is-looking-around .v98-eye{
  width:22px !important;
  height:22px !important;
  transform:translateY(-1px);
}
@keyframes v129LookAround{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px);}
  22%{transform:translate(-50%,-50%) translate(-4px,1px);}
  50%{transform:translate(-50%,-50%) translate(4px,-1px);}
  76%{transform:translate(-50%,-50%) translate(-2px,0px);}
}

/* Tiny angry micro mood reused after hit */
.v98-line-clinger.is-micro-angry .v98-eye,
.v98-line-clinger.is-angry-hit .v98-eye{
  height:7px !important;
  width:23px !important;
  border-radius:999px !important;
  transform:skewX(-16deg) translateY(4px) !important;
}


/* v130: clearer strike + more eye moods */

/* Replace impact with a clearer comic strike */
.v124-smack{
  width:66px !important;
  height:66px !important;
  font-size:0 !important;
  opacity:0;
  filter:drop-shadow(0 10px 18px rgba(24,30,38,.12));
}
.v124-smack::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:58px !important;
  height:58px !important;
  transform:translate(-50%,-50%) rotate(-14deg) !important;
  clip-path:polygon(50% 0%, 61% 25%, 88% 12%, 74% 39%, 100% 50%, 74% 61%, 88% 88%, 61% 75%, 50% 100%, 39% 75%, 12% 88%, 26% 61%, 0% 50%, 26% 39%, 12% 12%, 39% 25%);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 18%, rgba(73,83,96,.60) 19% 28%, rgba(73,83,96,.12) 29% 100%) !important;
  box-shadow:0 0 0 8px rgba(73,83,96,.05), 0 0 0 16px rgba(73,83,96,.018) !important;
}
.v124-smack::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:76px !important;
  height:76px !important;
  transform:translate(-50%,-50%) rotate(-12deg) !important;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(73,83,96,.42) 30% 34%, transparent 34% 66%, rgba(73,83,96,.30) 66% 70%, transparent 70%),
    linear-gradient(transparent 0 30%, rgba(73,83,96,.42) 30% 34%, transparent 34% 66%, rgba(73,83,96,.30) 66% 70%, transparent 70%),
    linear-gradient(45deg, transparent 0 43%, rgba(73,83,96,.25) 43% 47%, transparent 47% 53%, rgba(73,83,96,.22) 53% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 0 43%, rgba(73,83,96,.25) 43% 47%, transparent 47% 53%, rgba(73,83,96,.22) 53% 57%, transparent 57%) !important;
  border-radius:50%;
}
.v124-smack.is-on{
  animation:v130StrikeBurst .50s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v130StrikeBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-20deg);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(-20deg);}
  65%{opacity:.9;transform:translate(-50%,-50%) scale(1.34) rotate(8deg);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.68) rotate(18deg);}
}

/* Body swing + face reaction while hitting */
.v98-line-clinger.is-hit-face .v98-eye{
  width:24px !important;
  height:17px !important;
  transform:translateY(1px) scale(1.08) !important;
}
.v98-line-clinger.is-hit-face .v98-eye::before{
  animation:v130HitPupil .34s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v130HitPupil{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px) scale(1);}
  38%{transform:translate(-50%,-50%) translate(5px,-2px) scale(.78);}
  70%{transform:translate(-50%,-50%) translate(-2px,2px) scale(.9);}
}

/* Joy */
.v98-line-clinger.is-joy{
  animation:v130JoyBounce .95s cubic-bezier(.2,1,.32,1) !important;
}
.v98-line-clinger.is-joy .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-2px) scale(1.08) !important;
}
.v98-line-clinger.is-joy .v98-eye::before{
  width:4px !important;
  height:4px !important;
  transform:translate(-50%,-50%) translate(0px,-1px) scale(.78) !important;
}
@keyframes v130JoyBounce{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  26%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 23px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 5deg));
  }
  52%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 10px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 4deg));
  }
}

/* Surprise */
.v98-line-clinger.is-surprised .v98-eye{
  width:25px !important;
  height:25px !important;
  transform:translateY(-2px) scale(1.14) !important;
}
.v98-line-clinger.is-surprised .v98-eye::before{
  width:4px !important;
  height:4px !important;
  transform:translate(-50%,-50%) translate(0px,0px) scale(.72) !important;
}

/* Sad mood after too much abuse */
.v98-line-clinger.is-sad{
  animation:v130SadDroop 1.4s ease-in-out infinite !important;
}
.v98-line-clinger.is-sad .v98-eye{
  width:22px !important;
  height:12px !important;
  border-radius:999px !important;
  transform:translateY(5px) rotate(-6deg) !important;
}
.v98-line-clinger.is-sad .v98-eye.right{
  transform:translateY(5px) rotate(6deg) !important;
}
.v98-line-clinger.is-sad .v98-eye::before{
  width:4px !important;
  height:4px !important;
  transform:translate(-50%,-50%) translate(0px,2px) scale(.85) !important;
  opacity:.8;
}
@keyframes v130SadDroop{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
    filter:drop-shadow(0 8px 14px rgba(26,34,42,.08));
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 10px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 2deg));
    filter:drop-shadow(0 10px 18px rgba(26,34,42,.10));
  }
}


/* v131: clearer hit: wind-up to side, then strike into cursor */

.v124-smack{
  --hit-angle: -28deg;
  width:72px !important;
  height:72px !important;
  opacity:0;
  pointer-events:none;
}
.v124-smack::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:60px !important;
  height:60px !important;
  transform:translate(-50%,-50%) rotate(var(--hit-angle)) !important;
  clip-path:polygon(50% 0%, 60% 25%, 87% 12%, 74% 38%, 100% 50%, 74% 62%, 87% 88%, 60% 75%, 50% 100%, 40% 75%, 13% 88%, 26% 62%, 0% 50%, 26% 38%, 13% 12%, 40% 25%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 18%, rgba(80,92,108,.68) 19% 29%, rgba(80,92,108,.12) 30% 100%) !important;
  box-shadow:
    0 0 0 10px rgba(80,92,108,.05),
    0 0 0 18px rgba(80,92,108,.018) !important;
}
.v124-smack::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:92px !important;
  height:14px !important;
  border-radius:999px !important;
  transform:translate(-50%,-50%) rotate(var(--hit-angle)) !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(80,92,108,.10) 12%,
      rgba(80,92,108,.68) 44%,
      rgba(255,255,255,.95) 50%,
      rgba(80,92,108,.48) 57%,
      rgba(80,92,108,.10) 82%,
      transparent 100%) !important;
  box-shadow:
    0 -11px 0 -4px rgba(80,92,108,.22),
    0 11px 0 -4px rgba(80,92,108,.16),
    0 0 0 1px rgba(255,255,255,.18) inset !important;
}
.v124-smack.is-on{
  animation:v131ImpactStrike .52s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v131ImpactStrike{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-10deg);}
  16%{opacity:1;transform:translate(-50%,-50%) scale(.88) rotate(-10deg);}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(2deg);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.62) rotate(12deg);}
}

.v98-line-clinger.is-hit-swing{
  animation:v131HitSwing .56s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v131HitSwing{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  20%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + var(--windup-x,0px)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--windup-y,0px)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 14deg)) scale(.97);
  }
  46%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + var(--punch-x,0px)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--punch-y,0px)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 20deg)) scale(1.10);
  }
  68%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + calc(var(--punch-x,0px) * .32)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + calc(var(--punch-y,0px) * .32)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 6deg)) scale(1.03);
  }
}

.v98-line-clinger.is-hit-face .v98-eye{
  width:24px !important;
  height:18px !important;
  transform:translateY(1px) scale(1.06) !important;
}
.v98-line-clinger.is-hit-face .v98-eye::before{
  animation:v131HitPupil .56s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v131HitPupil{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px) scale(1);}
  18%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * -0.55), calc(var(--hit-look-y,0px) * -0.55)) scale(.92);}
  44%{transform:translate(-50%,-50%) translate(var(--hit-look-x,0px), var(--hit-look-y,0px)) scale(.74);}
  70%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * 0.28), calc(var(--hit-look-y,0px) * 0.28)) scale(.88);}
}


/* v132: bring back BONK and make the wind-up obvious */
.v124-smack{
  --hit-angle:-28deg;
  width:88px !important;
  height:88px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  color:rgba(66,76,90,.88) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 6px 12px rgba(22,28,36,.10);
  opacity:0;
}
.v124-smack::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:58px !important;
  height:58px !important;
  transform:translate(-50%,-50%) rotate(var(--hit-angle)) !important;
  clip-path:polygon(50% 0%, 60% 25%, 87% 12%, 74% 38%, 100% 50%, 74% 62%, 87% 88%, 60% 75%, 50% 100%, 40% 75%, 13% 88%, 26% 62%, 0% 50%, 26% 38%, 13% 12%, 40% 25%);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 17%, rgba(80,92,108,.46) 18% 28%, rgba(80,92,108,.10) 29% 100%) !important;
  box-shadow:0 0 0 10px rgba(80,92,108,.04), 0 0 0 18px rgba(80,92,108,.016) !important;
}
.v124-smack::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:98px !important;
  height:14px !important;
  border-radius:999px !important;
  transform:translate(-50%,-50%) rotate(var(--hit-angle)) !important;
  background:linear-gradient(90deg, transparent 0%, rgba(80,92,108,.10) 12%, rgba(80,92,108,.60) 45%, rgba(255,255,255,.96) 50%, rgba(80,92,108,.42) 58%, rgba(80,92,108,.08) 82%, transparent 100%) !important;
  box-shadow:0 -11px 0 -4px rgba(80,92,108,.18), 0 11px 0 -4px rgba(80,92,108,.14) !important;
}
.v124-smack.is-on{animation:v132ImpactBonk .52s cubic-bezier(.18,1,.32,1) !important;}
@keyframes v132ImpactBonk{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.10) rotate(-16deg);}
  14%{opacity:1; transform:translate(-50%,-50%) scale(.82) rotate(-16deg);}
  42%{opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.42) rotate(12deg);}
}

.v98-line-clinger.is-hit-swing{animation:v132HitSwing .64s cubic-bezier(.18,1,.32,1) !important;}
@keyframes v132HitSwing{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  22%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + var(--windup-x,0px)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--windup-y,0px)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 18deg)) scale(.95);
  }
  30%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + calc(var(--windup-x,0px) * 1.12)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + calc(var(--windup-y,0px) * 1.12)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 20deg)) scale(.94);
  }
  50%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + var(--punch-x,0px)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--punch-y,0px)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 22deg)) scale(1.11);
  }
  70%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + calc(var(--punch-x,0px) * .38)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + calc(var(--punch-y,0px) * .38)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 7deg)) scale(1.03);
  }
}

.v98-line-clinger.is-hit-face .v98-eye{
  width:24px !important;
  height:18px !important;
  transform:translateY(1px) scale(1.08) !important;
}
.v98-line-clinger.is-hit-face .v98-eye::before{animation:v132HitPupil .64s cubic-bezier(.18,1,.32,1) !important;}
@keyframes v132HitPupil{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px) scale(1);}
  22%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * -0.75), calc(var(--hit-look-y,0px) * -0.75)) scale(.92);}
  32%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * -0.92), calc(var(--hit-look-y,0px) * -0.92)) scale(.90);}
  48%{transform:translate(-50%,-50%) translate(var(--hit-look-x,0px), var(--hit-look-y,0px)) scale(.72);}
  72%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * .24), calc(var(--hit-look-y,0px) * .24)) scale(.88);}
}


/* v133: clearer punch wind-up, simpler BONK, button greeting */

.v124-smack{
  --hit-angle:-18deg;
  width:56px !important;
  height:34px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  color:rgba(70,80,93,.88) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 3px 7px rgba(20,26,34,.08);
  opacity:0;
}
.v124-smack::before{
  content:'' !important;
  position:absolute !important;
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(76,88,103,.18) !important;
  transform:translate(-50%,-50%) scale(.86) !important;
  background:radial-gradient(circle, rgba(255,255,255,.60) 0 20%, rgba(255,255,255,0) 24%) !important;
  box-shadow:0 0 0 7px rgba(76,88,103,.03) !important;
  clip-path:none !important;
}
.v124-smack::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:48px !important;
  height:2px !important;
  border-radius:999px !important;
  transform:translate(-50%,-50%) rotate(var(--hit-angle)) !important;
  background:linear-gradient(90deg, transparent 0%, rgba(76,88,103,.14) 18%, rgba(76,88,103,.58) 52%, rgba(76,88,103,.14) 82%, transparent 100%) !important;
  box-shadow:
    0 -9px 0 -0.7px rgba(76,88,103,.18),
    0 9px 0 -0.7px rgba(76,88,103,.12) !important;
}
.v124-smack.is-on{
  animation:v133BonkMini .42s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v133BonkMini{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
  16%{opacity:1;transform:translate(-50%,-50%) scale(.92);}
  56%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.22);}
}

.v98-line-clinger.is-hit-swing{
  animation:v133HitSwing .72s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v133HitSwing{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  24%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + var(--windup-x,0px)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--windup-y,0px)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 22deg)) scale(.93);
  }
  35%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + calc(var(--windup-x,0px) * 1.12)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + calc(var(--windup-y,0px) * 1.12)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 25deg)) scale(.92);
  }
  52%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + var(--punch-x,0px)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + var(--punch-y,0px)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 24deg)) scale(1.12);
  }
  70%{
    transform:translate3d(
      calc(var(--mxp,0px) - 29px + calc(var(--punch-x,0px) * .28)),
      calc(var(--myp,0px) - 14px + var(--mbob,0px) + calc(var(--punch-y,0px) * .28)),
      0
    ) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 8deg)) scale(1.03);
  }
}

.v98-line-clinger.is-hit-face .v98-eye{
  width:24px !important;
  height:18px !important;
  transform:translateY(1px) scale(1.07) !important;
}
.v98-line-clinger.is-hit-face .v98-eye::before{
  animation:v133HitPupil .72s cubic-bezier(.18,1,.32,1) !important;
}
@keyframes v133HitPupil{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px) scale(1);}
  22%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * -0.95), calc(var(--hit-look-y,0px) * -0.95)) scale(.9);}
  36%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * -1.12), calc(var(--hit-look-y,0px) * -1.12)) scale(.88);}
  52%{transform:translate(-50%,-50%) translate(var(--hit-look-x,0px), var(--hit-look-y,0px)) scale(.68);}
  72%{transform:translate(-50%,-50%) translate(calc(var(--hit-look-x,0px) * .22), calc(var(--hit-look-y,0px) * .22)) scale(.88);}
}

/* Greet buttons: wave hands and look forward */
.v98-line-clinger.is-greeting .v98-eye{
  width:23px !important;
  height:23px !important;
  transform:translateY(-1px) scale(1.04) !important;
}
.v98-line-clinger.is-greeting .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,-0.4px) scale(.92) !important;
}
.v98-line-clinger.is-greeting{
  animation:v133HelloBounce 1.15s ease-in-out infinite !important;
}
@keyframes v133HelloBounce{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 17px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
}
.v98-rope-svg.is-wave-left g{
  animation:v133WaveLeft .9s ease-in-out infinite !important;
  transform-box:fill-box;
  transform-origin:center center;
}
.v98-rope-svg.is-wave-right g{
  animation:v133WaveRight .9s ease-in-out infinite !important;
  transform-box:fill-box;
  transform-origin:center center;
}
.v98-rope-svg.is-wave-left .v98-rope,
.v98-rope-svg.is-wave-right .v98-rope{
  stroke-width:1.85px !important;
  opacity:.16 !important;
}
@keyframes v133WaveLeft{
  0%,100%{transform:translate(0px,0px) rotate(-8deg);}
  50%{transform:translate(-1px,-1px) rotate(22deg);}
}
@keyframes v133WaveRight{
  0%,100%{transform:translate(0px,0px) rotate(8deg);}
  50%{transform:translate(1px,-1px) rotate(-22deg);}
}


/* v134: bonk beside cursor, angry eyes on hit, button wave fixed */

.v124-smack{
  width:62px !important;
  height:26px !important;
  font-size:12px !important;
  letter-spacing:.16em !important;
  color:rgba(62,72,86,.92) !important;
}
.v124-smack::before{
  width:28px !important;
  height:28px !important;
  border-width:1px !important;
  box-shadow:0 0 0 5px rgba(76,88,103,.025) !important;
}
.v124-smack::after{
  width:30px !important;
  height:2px !important;
  box-shadow:
    0 -6px 0 -0.8px rgba(76,88,103,.14),
    0 6px 0 -0.8px rgba(76,88,103,.09) !important;
}

.v98-line-clinger.is-angry-hit .v98-eye,
.v98-line-clinger.is-hit-face .v98-eye{
  width:24px !important;
  height:9px !important;
  border-radius:999px !important;
  transform:translateY(3px) skewX(-16deg) !important;
}
.v98-line-clinger.is-angry-hit .v98-eye.right,
.v98-line-clinger.is-hit-face .v98-eye.right{
  transform:translateY(3px) skewX(16deg) !important;
}
.v98-line-clinger.is-angry-hit .v98-eye::before,
.v98-line-clinger.is-hit-face .v98-eye::before{
  width:5px !important;
  height:5px !important;
}

.v98-line-clinger.is-greeting .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-1px) scale(1.08) !important;
}
.v98-line-clinger.is-greeting .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,-0.5px) scale(.88) !important;
}
.v98-line-clinger.is-greeting{
  animation:v134HelloBounce 1.0s ease-in-out infinite !important;
}
@keyframes v134HelloBounce{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 18px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
}
.v98-rope-svg.is-wave-left g{
  animation:v134WaveLeft .72s ease-in-out infinite !important;
}
.v98-rope-svg.is-wave-right g{
  animation:v134WaveRight .72s ease-in-out infinite !important;
}
@keyframes v134WaveLeft{
  0%,100%{transform:translate(0px,0px) rotate(-10deg);}
  50%{transform:translate(-1px,-2px) rotate(34deg);}
}
@keyframes v134WaveRight{
  0%,100%{transform:translate(0px,0px) rotate(10deg);}
  50%{transform:translate(1px,-2px) rotate(-34deg);}
}
.v98-rope-svg.is-wave-left .v98-rope,
.v98-rope-svg.is-wave-right .v98-rope{
  stroke-width:1.95px !important;
  opacity:.20 !important;
}


/* v135: stronger YES-YES-YES wave on buttons */

.v98-line-clinger.is-greeting{
  animation:v135HelloYes .72s ease-in-out infinite !important;
}
@keyframes v135HelloYes{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  25%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 19px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 5deg));
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 13px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) + 5deg));
  }
  75%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 18px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 4deg));
  }
}

.v98-line-clinger.is-greeting .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-2px) scale(1.1) !important;
}
.v98-line-clinger.is-greeting .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,-0.5px) scale(.84) !important;
}

.v98-rope-svg.is-wave-left g,
.v98-rope-svg.is-wave-right g{
  transform-box:fill-box;
  transform-origin:center center;
  will-change:transform;
}
.v98-rope-svg.is-wave-left g{
  animation:v135WaveLeft .42s ease-in-out infinite !important;
}
.v98-rope-svg.is-wave-right g{
  animation:v135WaveRight .42s ease-in-out infinite !important;
}
@keyframes v135WaveLeft{
  0%,100%{transform:translate(0px,0px) rotate(-8deg) scale(1);}
  25%{transform:translate(-2px,-3px) rotate(30deg) scale(1.08);}
  50%{transform:translate(0px,-1px) rotate(-2deg) scale(1.02);}
  75%{transform:translate(-2px,-3px) rotate(30deg) scale(1.08);}
}
@keyframes v135WaveRight{
  0%,100%{transform:translate(0px,0px) rotate(8deg) scale(1);}
  25%{transform:translate(2px,-3px) rotate(-30deg) scale(1.08);}
  50%{transform:translate(0px,-1px) rotate(2deg) scale(1.02);}
  75%{transform:translate(2px,-3px) rotate(-30deg) scale(1.08);}
}

.v98-rope-svg.is-wave-left .v98-rope,
.v98-rope-svg.is-wave-right .v98-rope{
  stroke-width:2.2px !important;
  opacity:.28 !important;
}

.v98-rope-svg.is-wave-left .v98-rope-hand,
.v98-rope-svg.is-wave-right .v98-rope-hand{
  filter:drop-shadow(0 2px 6px rgba(28,34,40,.10)) !important;
}


/* v136: petting mood + make eyes dancing button */

.eyes-dance-toggle{
  min-width:190px;
  justify-content:center;
}
.eyes-dance-toggle.is-active{
  box-shadow:0 10px 28px rgba(38,48,62,.10), inset 0 0 0 1px rgba(76,88,103,.12);
}

.v98-line-clinger.is-petted{
  animation:v136PetFloat 1.6s ease-in-out infinite !important;
}
.v98-line-clinger.is-petted .v98-eye{
  width:22px !important;
  height:8px !important;
  border-radius:999px !important;
  transform:translateY(6px) !important;
}
.v98-line-clinger.is-petted .v98-eye::before{
  width:4px !important;
  height:4px !important;
  transform:translate(-50%,-50%) translate(0px,1.5px) scale(.78) !important;
  opacity:.74;
}
@keyframes v136PetFloat{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg)));
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 12px + var(--mbob,0px)),0) rotate(calc(var(--tilt,0deg) + var(--stone-rot,0deg) - 4deg)) scale(1.015);
  }
}

.v98-line-clinger.is-dancing{
  animation:v136DanceBody .54s ease-in-out infinite !important;
  filter:drop-shadow(0 12px 20px rgba(26,34,42,.10));
}
.v98-line-clinger.is-dancing .v98-line-clinger-body{
  transform:scale(1.08);
}
.v98-line-clinger.is-dancing .v98-eye{
  width:24px !important;
  height:24px !important;
  transform:translateY(-2px) scale(1.12) !important;
}
.v98-line-clinger.is-dancing .v98-eye::before{
  animation:v136DancePupils .54s ease-in-out infinite !important;
}
@keyframes v136DanceBody{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) rotate(-8deg) scale(1.04);
  }
  25%{
    transform:translate3d(calc(var(--mxp,0px) - 24px), calc(var(--myp,0px) - 22px),0) rotate(10deg) scale(1.08);
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 11px),0) rotate(-4deg) scale(1.06);
  }
  75%{
    transform:translate3d(calc(var(--mxp,0px) - 35px), calc(var(--myp,0px) - 21px),0) rotate(8deg) scale(1.08);
  }
}
@keyframes v136DancePupils{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px) scale(.92);}
  25%{transform:translate(-50%,-50%) translate(-3px,-1px) scale(.88);}
  50%{transform:translate(-50%,-50%) translate(1px,1px) scale(.86);}
  75%{transform:translate(-50%,-50%) translate(3px,-1px) scale(.88);}
}

.v98-rope-svg.is-dance-left g,
.v98-rope-svg.is-dance-right g{
  transform-box:fill-box;
  transform-origin:center center;
}
.v98-rope-svg.is-dance-left g{
  animation:v136DanceLeft .36s ease-in-out infinite !important;
}
.v98-rope-svg.is-dance-right g{
  animation:v136DanceRight .36s ease-in-out infinite !important;
}
.v98-rope-svg.is-dance-left .v98-rope,
.v98-rope-svg.is-dance-right .v98-rope{
  stroke-width:2.2px !important;
  opacity:.24 !important;
}
@keyframes v136DanceLeft{
  0%,100%{transform:translate(0px,0px) rotate(-6deg);}
  50%{transform:translate(-2px,-4px) rotate(42deg) scale(1.08);}
}
@keyframes v136DanceRight{
  0%,100%{transform:translate(0px,0px) rotate(6deg);}
  50%{transform:translate(2px,-4px) rotate(-42deg) scale(1.08);}
}


/* v137: external music + concert dance mode */
body.eyes-dance-mode::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.055), rgba(0,0,0,0) 22%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.18), rgba(0,0,0,.72) 58%, rgba(4,8,14,.90) 100%);
  pointer-events:none;
  z-index:1800;
  animation:v137ConcertPulse 2.2s ease-in-out infinite;
}
body.eyes-dance-mode main,
body.eyes-dance-mode .site-header,
body.eyes-dance-mode footer,
body.eyes-dance-mode .curtain,
body.eyes-dance-mode .page-transition{
  filter:brightness(.16) saturate(.55) blur(.4px);
  transition:filter .35s ease;
}
body.eyes-dance-mode .site-header,
body.eyes-dance-mode footer{
  opacity:.45;
}
@keyframes v137ConcertPulse{
  0%,100%{opacity:1}
  50%{opacity:.82}
}

.v98-line-clinger{
  z-index:1905 !important;
}
.v98-line-clinger.is-dancing{
  animation:v137DanceBase .8s ease-in-out infinite !important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.18)) drop-shadow(0 12px 30px rgba(0,0,0,.18));
}
.v98-line-clinger.is-dancing .v98-eye{
  width:31px !important;
  height:31px !important;
  transform:translateY(-3px) scale(1.22) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.32), 0 0 18px rgba(255,255,255,.18) !important;
}
.v98-line-clinger.is-dancing .v98-eye::before{
  width:5px !important;
  height:5px !important;
}
.v98-line-clinger.is-dancing .v98-line-clinger-body{
  transform:scale(1.16);
}

@keyframes v137DanceBase{
  0%,100%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 14px),0) rotate(-6deg) scale(1.06);
  }
  50%{
    transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 18px),0) rotate(6deg) scale(1.10);
  }
}

/* 6 dance poses */
.v98-line-clinger.dance-pose-0{
  animation:v137Pose0 .4s ease-in-out infinite !important;
}
.v98-line-clinger.dance-pose-1{
  animation:v137Pose1 .4s ease-in-out infinite !important;
}
.v98-line-clinger.dance-pose-2{
  animation:v137Pose2 .4s ease-in-out infinite !important;
}
.v98-line-clinger.dance-pose-3{
  animation:v137Pose3 .4s ease-in-out infinite !important;
}
.v98-line-clinger.dance-pose-4{
  animation:v137Pose4 .4s ease-in-out infinite !important;
}
.v98-line-clinger.dance-pose-5{
  animation:v137Pose5 .4s ease-in-out infinite !important;
}
@keyframes v137Pose0{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 36px), calc(var(--myp,0px) - 22px),0) rotate(-10deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 20px), calc(var(--myp,0px) - 10px),0) rotate(12deg) scale(1.16);}
}
@keyframes v137Pose1{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 24px), calc(var(--myp,0px) - 8px),0) rotate(10deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 34px), calc(var(--myp,0px) - 21px),0) rotate(-12deg) scale(1.18);}
}
@keyframes v137Pose2{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 24px),0) rotate(-2deg) scale(1.18);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 7px),0) rotate(2deg) scale(1.08);}
}
@keyframes v137Pose3{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 39px), calc(var(--myp,0px) - 14px),0) rotate(-14deg) scale(1.14);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 18px), calc(var(--myp,0px) - 16px),0) rotate(14deg) scale(1.14);}
}
@keyframes v137Pose4{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 25px), calc(var(--myp,0px) - 20px),0) rotate(8deg) scale(1.15);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 33px), calc(var(--myp,0px) - 11px),0) rotate(-8deg) scale(1.11);}
}
@keyframes v137Pose5{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 10px),0) rotate(0deg) scale(1.08);}
  30%{transform:translate3d(calc(var(--mxp,0px) - 41px), calc(var(--myp,0px) - 18px),0) rotate(-12deg) scale(1.16);}
  70%{transform:translate3d(calc(var(--mxp,0px) - 17px), calc(var(--myp,0px) - 18px),0) rotate(12deg) scale(1.16);}
}

.v98-line-clinger.is-dancing .v98-eye::before{
  animation:v137DancePupils .8s ease-in-out infinite !important;
}
@keyframes v137DancePupils{
  0%,100%{transform:translate(-50%,-50%) translate(0px,0px) scale(.9);}
  25%{transform:translate(-50%,-50%) translate(-4px,-1px) scale(.82);}
  50%{transform:translate(-50%,-50%) translate(0px,2px) scale(.92);}
  75%{transform:translate(-50%,-50%) translate(4px,-1px) scale(.82);}
}

/* alt arm dances */
.v98-rope-svg.is-dance-left g,
.v98-rope-svg.is-dance-right g,
.v98-rope-svg.is-dance-left-alt g,
.v98-rope-svg.is-dance-right-alt g{
  transform-box:fill-box;
  transform-origin:center center;
}
.v98-rope-svg.is-dance-left g{
  animation:v137DanceLeft .40s ease-in-out infinite !important;
}
.v98-rope-svg.is-dance-right g{
  animation:v137DanceRight .40s ease-in-out infinite !important;
}
.v98-rope-svg.is-dance-left-alt g{
  animation:v137DanceLeftAlt .40s ease-in-out infinite !important;
}
.v98-rope-svg.is-dance-right-alt g{
  animation:v137DanceRightAlt .40s ease-in-out infinite !important;
}
.v98-rope-svg.is-dance-left .v98-rope,
.v98-rope-svg.is-dance-right .v98-rope,
.v98-rope-svg.is-dance-left-alt .v98-rope,
.v98-rope-svg.is-dance-right-alt .v98-rope{
  stroke-width:2.25px !important;
  opacity:.22 !important;
}
@keyframes v137DanceLeft{
  0%,100%{transform:translate(0px,0px) rotate(-8deg)}
  50%{transform:translate(-2px,-5px) rotate(48deg) scale(1.10)}
}
@keyframes v137DanceRight{
  0%,100%{transform:translate(0px,0px) rotate(8deg)}
  50%{transform:translate(2px,-5px) rotate(-48deg) scale(1.10)}
}
@keyframes v137DanceLeftAlt{
  0%,100%{transform:translate(0px,-1px) rotate(18deg)}
  50%{transform:translate(-1px,1px) rotate(-26deg) scale(1.08)}
}
@keyframes v137DanceRightAlt{
  0%,100%{transform:translate(0px,-1px) rotate(-18deg)}
  50%{transform:translate(1px,1px) rotate(26deg) scale(1.08)}
}


/* v138: better dance spotlight, no eye overlap, more expressive dancing */

body.eyes-dance-mode::before{
  background:
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.14), rgba(0,0,0,.74) 58%, rgba(4,8,14,.93) 100%) !important;
  animation:v138ConcertPulse 1.8s ease-in-out infinite !important;
}
@keyframes v138ConcertPulse{
  0%,100%{opacity:1}
  50%{opacity:.9}
}

/* spotlight follows the eyes */
.v98-line-clinger.is-dancing::before{
  content:'';
  position:absolute;
  left:50%;
  top:46%;
  width:340px;
  height:340px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.18) 10%,
      rgba(255,255,255,.08) 22%,
      rgba(255,255,255,.03) 34%,
      rgba(255,255,255,0) 58%);
  filter:blur(2px);
  pointer-events:none;
  z-index:-1;
  animation:v138SpotMove .9s ease-in-out infinite;
}
@keyframes v138SpotMove{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.08);}
}

/* keep them bigger but without overlapping */
.v98-line-clinger.is-dancing{
  filter:drop-shadow(0 0 16px rgba(255,255,255,.24)) drop-shadow(0 12px 30px rgba(0,0,0,.18)) !important;
}
.v98-line-clinger.is-dancing .v98-line-clinger-body{
  transform:scale(1.12) !important;
}
.v98-line-clinger.is-dancing .v98-eye{
  width:24px !important;
  height:24px !important;
  top:1px !important;
  transform:translateY(-1px) scale(1.06) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.34), 0 0 18px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.v98-line-clinger.is-dancing .v98-eye.left{ left:4px !important; }
.v98-line-clinger.is-dancing .v98-eye.right{ right:4px !important; }
.v98-line-clinger.is-dancing .v98-eye::before{
  width:5px !important;
  height:5px !important;
}
.v98-line-clinger.is-dancing .v98-rope{
  opacity:.20 !important;
}

/* dance pose set expanded */
.v98-line-clinger.dance-pose-0{ animation:v138Pose0 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-1{ animation:v138Pose1 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-2{ animation:v138Pose2 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-3{ animation:v138Pose3 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-4{ animation:v138Pose4 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-5{ animation:v138Pose5 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-6{ animation:v138Pose6 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-7{ animation:v138Pose7 .40s ease-in-out infinite !important; }

@keyframes v138Pose0{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 33px), calc(var(--myp,0px) - 20px),0) rotate(-10deg) scale(1.11);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 24px), calc(var(--myp,0px) - 8px),0) rotate(12deg) scale(1.16);}
}
@keyframes v138Pose1{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 24px), calc(var(--myp,0px) - 8px),0) rotate(10deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 36px), calc(var(--myp,0px) - 19px),0) rotate(-14deg) scale(1.18);}
}
@keyframes v138Pose2{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 25px),0) rotate(-2deg) scale(1.18);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 8px),0) rotate(2deg) scale(1.08);}
}
@keyframes v138Pose3{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 40px), calc(var(--myp,0px) - 14px),0) rotate(-14deg) scale(1.14);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 18px), calc(var(--myp,0px) - 16px),0) rotate(14deg) scale(1.14);}
}
@keyframes v138Pose4{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 23px), calc(var(--myp,0px) - 21px),0) rotate(8deg) scale(1.15);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 35px), calc(var(--myp,0px) - 11px),0) rotate(-10deg) scale(1.12);}
}
@keyframes v138Pose5{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 29px), calc(var(--myp,0px) - 10px),0) rotate(0deg) scale(1.08);}
  30%{transform:translate3d(calc(var(--mxp,0px) - 42px), calc(var(--myp,0px) - 17px),0) rotate(-14deg) scale(1.16);}
  70%{transform:translate3d(calc(var(--mxp,0px) - 16px), calc(var(--myp,0px) - 17px),0) rotate(14deg) scale(1.16);}
}
@keyframes v138Pose6{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 24px),0) rotate(-18deg) scale(1.14);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 26px), calc(var(--myp,0px) - 7px),0) rotate(18deg) scale(1.20);}
}
@keyframes v138Pose7{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 21px), calc(var(--myp,0px) - 16px),0) rotate(14deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 37px), calc(var(--myp,0px) - 20px),0) rotate(-8deg) scale(1.17);}
}

/* more dance emotions */
.v98-line-clinger.dance-mood-joy .v98-eye{
  width:23px !important;
  height:11px !important;
  border-radius:999px !important;
  transform:translateY(5px) !important;
}
.v98-line-clinger.dance-mood-joy .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,-2px) scale(.7) !important;
  opacity:.78;
}

.v98-line-clinger.dance-mood-cool .v98-eye{
  width:25px !important;
  height:8px !important;
  border-radius:999px !important;
  transform:translateY(3px) skewX(-10deg) !important;
}
.v98-line-clinger.dance-mood-cool .v98-eye.right{
  transform:translateY(3px) skewX(10deg) !important;
}
.v98-line-clinger.dance-mood-cool .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,0px) scale(.72) !important;
}

.v98-line-clinger.dance-mood-shout .v98-eye{
  width:25px !important;
  height:25px !important;
  transform:translateY(-2px) scale(1.08) !important;
}
.v98-line-clinger.dance-mood-shout .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,1px) scale(.64) !important;
}

.v98-line-clinger.dance-mood-bliss .v98-eye{
  width:22px !important;
  height:7px !important;
  border-radius:999px !important;
  transform:translateY(6px) !important;
}
.v98-line-clinger.dance-mood-bliss .v98-eye::before{
  opacity:.55 !important;
  transform:translate(-50%,-50%) translate(0px,1px) scale(.6) !important;
}

.v98-line-clinger.dance-mood-wink .v98-eye.left{
  height:6px !important;
  border-radius:999px !important;
  transform:translateY(7px) !important;
}
.v98-line-clinger.dance-mood-wink .v98-eye.right{
  width:24px !important;
  height:24px !important;
  transform:translateY(-1px) !important;
}
.v98-line-clinger.dance-mood-wink .v98-eye.right::before{
  transform:translate(-50%,-50%) translate(2px,0px) scale(.84) !important;
}

.v98-line-clinger.dance-mood-sassy .v98-eye{
  width:23px !important;
  height:10px !important;
  border-radius:999px !important;
  transform:translateY(3px) skewX(-14deg) !important;
}
.v98-line-clinger.dance-mood-sassy .v98-eye.right{
  transform:translateY(3px) skewX(14deg) !important;
}
.v98-line-clinger.dance-mood-sassy .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,-1px) scale(.72) !important;
}

/* more varied hand dances */
.v98-rope-svg.is-dance-left g,
.v98-rope-svg.is-dance-right g,
.v98-rope-svg.is-dance-left-alt g,
.v98-rope-svg.is-dance-right-alt g{
  transform-box:fill-box;
  transform-origin:center center;
  will-change:transform;
}
.v98-rope-svg.is-dance-left g{ animation:v138DanceLeft .40s ease-in-out infinite !important; }
.v98-rope-svg.is-dance-right g{ animation:v138DanceRight .40s ease-in-out infinite !important; }
.v98-rope-svg.is-dance-left-alt g{ animation:v138DanceLeftAlt .40s ease-in-out infinite !important; }
.v98-rope-svg.is-dance-right-alt g{ animation:v138DanceRightAlt .40s ease-in-out infinite !important; }

@keyframes v138DanceLeft{
  0%,100%{transform:translate(0px,0px) rotate(-10deg)}
  50%{transform:translate(-3px,-6px) rotate(52deg) scale(1.12)}
}
@keyframes v138DanceRight{
  0%,100%{transform:translate(0px,0px) rotate(10deg)}
  50%{transform:translate(3px,-6px) rotate(-52deg) scale(1.12)}
}
@keyframes v138DanceLeftAlt{
  0%,100%{transform:translate(0px,-1px) rotate(20deg)}
  50%{transform:translate(-1px,2px) rotate(-34deg) scale(1.10)}
}
@keyframes v138DanceRightAlt{
  0%,100%{transform:translate(0px,-1px) rotate(-20deg)}
  50%{transform:translate(1px,2px) rotate(34deg) scale(1.10)}
}


/* v139: real spotlight follows eyes + many more dance moves */

/* Make page dark, but spotlight is a separate layer exactly under the eyes */
body.eyes-dance-mode::before{
  background:rgba(3,6,12,.88) !important;
  animation:none !important;
}
.v139-dance-spotlight{
  position:fixed;
  left:0;
  top:0;
  width:430px;
  height:430px;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  z-index:1902;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.36) 10%,
      rgba(255,255,255,.18) 24%,
      rgba(255,255,255,.07) 40%,
      rgba(255,255,255,0) 66%);
  filter:blur(1px);
  mix-blend-mode:screen;
  transition:opacity .25s ease;
}
body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1;
  animation:v139SpotPulse .8s ease-in-out infinite;
}
@keyframes v139SpotPulse{
  0%,100%{width:410px;height:410px;filter:blur(1px) brightness(1);}
  50%{width:480px;height:480px;filter:blur(2px) brightness(1.18);}
}

/* kill previous pseudo spotlight so it does not look off-center */
.v98-line-clinger.is-dancing::before{
  display:none !important;
}

/* Eyes bigger but separated and stable */
.v98-line-clinger.is-dancing{
  z-index:1908 !important;
  width:78px !important;
  height:40px !important;
  filter:drop-shadow(0 0 20px rgba(255,255,255,.32)) drop-shadow(0 16px 34px rgba(0,0,0,.26)) !important;
}
.v98-line-clinger.is-dancing .v98-line-clinger-body{
  transform:scale(1) !important;
}
.v98-line-clinger.is-dancing .v98-eye{
  width:29px !important;
  height:29px !important;
  top:2px !important;
  transform:translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.40),
    0 0 24px rgba(255,255,255,.32),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.v98-line-clinger.is-dancing .v98-eye.left{ left:3px !important; }
.v98-line-clinger.is-dancing .v98-eye.right{ right:3px !important; }
.v98-line-clinger.is-dancing .v98-eye::before{
  width:5px !important;
  height:5px !important;
}

/* 14 dance poses, changing every 150 BPM beat */
.v98-line-clinger.dance-pose-0{ animation:v139Pose0 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-1{ animation:v139Pose1 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-2{ animation:v139Pose2 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-3{ animation:v139Pose3 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-4{ animation:v139Pose4 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-5{ animation:v139Pose5 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-6{ animation:v139Pose6 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-7{ animation:v139Pose7 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-8{ animation:v139Pose8 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-9{ animation:v139Pose9 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-10{ animation:v139Pose10 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-11{ animation:v139Pose11 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-12{ animation:v139Pose12 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-13{ animation:v139Pose13 .40s ease-in-out infinite !important; }

@keyframes v139Pose0{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 39px), calc(var(--myp,0px) - 23px),0) rotate(-12deg) scale(1.06);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 21px), calc(var(--myp,0px) - 10px),0) rotate(12deg) scale(1.12);}
}
@keyframes v139Pose1{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 20px), calc(var(--myp,0px) - 10px),0) rotate(12deg) scale(1.06);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 42px), calc(var(--myp,0px) - 22px),0) rotate(-16deg) scale(1.13);}
}
@keyframes v139Pose2{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 30px),0) rotate(-3deg) scale(1.16);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 7px),0) rotate(3deg) scale(1.04);}
}
@keyframes v139Pose3{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 50px), calc(var(--myp,0px) - 15px),0) rotate(-18deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 12px), calc(var(--myp,0px) - 17px),0) rotate(18deg) scale(1.10);}
}
@keyframes v139Pose4{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 22px), calc(var(--myp,0px) - 24px),0) rotate(10deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 42px), calc(var(--myp,0px) - 9px),0) rotate(-12deg) scale(1.07);}
}
@keyframes v139Pose5{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 11px),0) rotate(0deg) scale(1.04);}
  30%{transform:translate3d(calc(var(--mxp,0px) - 54px), calc(var(--myp,0px) - 19px),0) rotate(-18deg) scale(1.12);}
  70%{transform:translate3d(calc(var(--mxp,0px) - 8px), calc(var(--myp,0px) - 19px),0) rotate(18deg) scale(1.12);}
}
@keyframes v139Pose6{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 34px), calc(var(--myp,0px) - 28px),0) rotate(-22deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 27px), calc(var(--myp,0px) - 8px),0) rotate(22deg) scale(1.14);}
}
@keyframes v139Pose7{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 16px), calc(var(--myp,0px) - 18px),0) rotate(18deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 46px), calc(var(--myp,0px) - 22px),0) rotate(-10deg) scale(1.13);}
}
@keyframes v139Pose8{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 18px),0) rotate(0deg) scale(1.08);}
  25%{transform:translate3d(calc(var(--mxp,0px) - 46px), calc(var(--myp,0px) - 28px),0) rotate(-22deg) scale(1.12);}
  75%{transform:translate3d(calc(var(--mxp,0px) - 14px), calc(var(--myp,0px) - 28px),0) rotate(22deg) scale(1.12);}
}
@keyframes v139Pose9{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 28px),0) rotate(-8deg) scale(1.12);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 4px),0) rotate(8deg) scale(1.16);}
}
@keyframes v139Pose10{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 46px), calc(var(--myp,0px) - 8px),0) rotate(-24deg) scale(1.07);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 14px), calc(var(--myp,0px) - 28px),0) rotate(20deg) scale(1.14);}
}
@keyframes v139Pose11{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 15px), calc(var(--myp,0px) - 8px),0) rotate(24deg) scale(1.07);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 45px), calc(var(--myp,0px) - 28px),0) rotate(-20deg) scale(1.14);}
}
@keyframes v139Pose12{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 15px),0) rotate(0deg) scale(1.06);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 28px),0) rotate(0deg) scale(1.22);}
}
@keyframes v139Pose13{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 12px),0) rotate(-6deg) scale(1.05);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 25px),0) rotate(6deg) scale(1.12);}
}

/* more facial dance moods */
.v98-line-clinger.dance-mood-hype .v98-eye{
  width:28px !important;
  height:28px !important;
  transform:translateY(-2px) scale(1.02) !important;
}
.v98-line-clinger.dance-mood-hype .v98-eye::before{
  animation:v139HypePupil .4s ease-in-out infinite !important;
}
@keyframes v139HypePupil{
  0%,100%{transform:translate(-50%,-50%) translate(-3px,-1px) scale(.78);}
  50%{transform:translate(-50%,-50%) translate(3px,1px) scale(.86);}
}
.v98-line-clinger.dance-mood-spin .v98-eye{
  width:27px !important;
  height:27px !important;
}
.v98-line-clinger.dance-mood-spin .v98-eye::before{
  animation:v139SpinPupil .4s linear infinite !important;
}
@keyframes v139SpinPupil{
  0%{transform:translate(-50%,-50%) rotate(0deg) translate(3px,0) scale(.82);}
  100%{transform:translate(-50%,-50%) rotate(360deg) translate(3px,0) scale(.82);}
}

/* extra arm directions */
.v98-rope-svg.is-dance-left-up g{ animation:v139DanceLeftUp .40s ease-in-out infinite !important; transform-box:fill-box; transform-origin:center center; }
.v98-rope-svg.is-dance-right-up g{ animation:v139DanceRightUp .40s ease-in-out infinite !important; transform-box:fill-box; transform-origin:center center; }
.v98-rope-svg.is-dance-left-low g{ animation:v139DanceLeftLow .40s ease-in-out infinite !important; transform-box:fill-box; transform-origin:center center; }
.v98-rope-svg.is-dance-right-low g{ animation:v139DanceRightLow .40s ease-in-out infinite !important; transform-box:fill-box; transform-origin:center center; }

.v98-rope-svg.is-dance-left-up .v98-rope,
.v98-rope-svg.is-dance-right-up .v98-rope,
.v98-rope-svg.is-dance-left-low .v98-rope,
.v98-rope-svg.is-dance-right-low .v98-rope{
  stroke-width:2.2px !important;
  opacity:.22 !important;
}
@keyframes v139DanceLeftUp{
  0%,100%{transform:translate(-1px,-2px) rotate(18deg)}
  50%{transform:translate(-4px,-9px) rotate(70deg) scale(1.12)}
}
@keyframes v139DanceRightUp{
  0%,100%{transform:translate(1px,-2px) rotate(-18deg)}
  50%{transform:translate(4px,-9px) rotate(-70deg) scale(1.12)}
}
@keyframes v139DanceLeftLow{
  0%,100%{transform:translate(-1px,1px) rotate(-16deg)}
  50%{transform:translate(-3px,5px) rotate(30deg) scale(1.08)}
}
@keyframes v139DanceRightLow{
  0%,100%{transform:translate(1px,1px) rotate(16deg)}
  50%{transform:translate(3px,5px) rotate(-30deg) scale(1.08)}
}


/* v140: spotlight visible in light theme + eyes jump around the screen */

body.eyes-dance-mode::before{
  background:rgba(0,0,0,.86) !important;
  opacity:1 !important;
  z-index:1898 !important;
}
body.eyes-dance-mode main,
body.eyes-dance-mode .nav,
body.eyes-dance-mode footer,
body.eyes-dance-mode .ambient-bg{
  filter:brightness(.18) saturate(.55) blur(.5px) !important;
}

/* Actual theater spot: dark outside + clear light exactly on eyes */
.v139-dance-spotlight{
  width:260px !important;
  height:260px !important;
  z-index:1904 !important;
  opacity:0;
  mix-blend-mode:normal !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.78) 16%,
      rgba(255,255,255,.38) 34%,
      rgba(255,255,255,.12) 54%,
      rgba(255,255,255,0) 72%) !important;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.78),
    0 0 70px 32px rgba(255,255,255,.30) !important;
  filter:blur(.2px) brightness(1.12) !important;
}
body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1 !important;
  animation:v140RealSpot .4s ease-in-out infinite !important;
}
@keyframes v140RealSpot{
  0%,100%{
    width:250px;
    height:250px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.79), 0 0 70px 30px rgba(255,255,255,.28);
  }
  50%{
    width:295px;
    height:295px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.75), 0 0 92px 42px rgba(255,255,255,.40);
  }
}

/* Eyes stay readable inside the beam */
.v98-line-clinger.is-dancing{
  z-index:1910 !important;
  width:76px !important;
  height:40px !important;
}
.v98-line-clinger.is-dancing .v98-eye{
  width:28px !important;
  height:28px !important;
  top:2px !important;
}
.v98-line-clinger.is-dancing .v98-eye.left{ left:4px !important; }
.v98-line-clinger.is-dancing .v98-eye.right{ right:4px !important; }

/* stronger feeling of moving around, not just in-place shaking */
.v98-line-clinger.dance-pose-0{ animation:v140Pose0 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-1{ animation:v140Pose1 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-2{ animation:v140Pose2 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-3{ animation:v140Pose3 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-4{ animation:v140Pose4 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-5{ animation:v140Pose5 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-6{ animation:v140Pose6 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-7{ animation:v140Pose7 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-8{ animation:v140Pose8 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-9{ animation:v140Pose9 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-10{ animation:v140Pose10 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-11{ animation:v140Pose11 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-12{ animation:v140Pose12 .40s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-13{ animation:v140Pose13 .40s ease-in-out infinite !important; }

@keyframes v140Pose0{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 38px), calc(var(--myp,0px) - 22px),0) rotate(-18deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 20px), calc(var(--myp,0px) - 8px),0) rotate(18deg) scale(1.16);}
}
@keyframes v140Pose1{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 18px), calc(var(--myp,0px) - 8px),0) rotate(18deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 44px), calc(var(--myp,0px) - 24px),0) rotate(-20deg) scale(1.16);}
}
@keyframes v140Pose2{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 32px),0) rotate(-4deg) scale(1.20);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 6px),0) rotate(4deg) scale(1.06);}
}
@keyframes v140Pose3{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 54px), calc(var(--myp,0px) - 14px),0) rotate(-22deg) scale(1.12);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 8px), calc(var(--myp,0px) - 18px),0) rotate(22deg) scale(1.12);}
}
@keyframes v140Pose4{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 20px), calc(var(--myp,0px) - 26px),0) rotate(16deg) scale(1.12);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 44px), calc(var(--myp,0px) - 8px),0) rotate(-18deg) scale(1.08);}
}
@keyframes v140Pose5{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 10px),0) rotate(0deg) scale(1.06);}
  30%{transform:translate3d(calc(var(--mxp,0px) - 58px), calc(var(--myp,0px) - 21px),0) rotate(-24deg) scale(1.17);}
  70%{transform:translate3d(calc(var(--mxp,0px) - 4px), calc(var(--myp,0px) - 21px),0) rotate(24deg) scale(1.17);}
}
@keyframes v140Pose6{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 34px), calc(var(--myp,0px) - 32px),0) rotate(-26deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 26px), calc(var(--myp,0px) - 7px),0) rotate(26deg) scale(1.18);}
}
@keyframes v140Pose7{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 14px), calc(var(--myp,0px) - 18px),0) rotate(22deg) scale(1.10);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 48px), calc(var(--myp,0px) - 23px),0) rotate(-16deg) scale(1.16);}
}
@keyframes v140Pose8{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 18px),0) rotate(0deg) scale(1.10);}
  25%{transform:translate3d(calc(var(--mxp,0px) - 50px), calc(var(--myp,0px) - 30px),0) rotate(-28deg) scale(1.15);}
  75%{transform:translate3d(calc(var(--mxp,0px) - 10px), calc(var(--myp,0px) - 30px),0) rotate(28deg) scale(1.15);}
}
@keyframes v140Pose9{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 30px),0) rotate(-10deg) scale(1.16);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 3px),0) rotate(10deg) scale(1.20);}
}
@keyframes v140Pose10{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 50px), calc(var(--myp,0px) - 8px),0) rotate(-28deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 10px), calc(var(--myp,0px) - 30px),0) rotate(26deg) scale(1.18);}
}
@keyframes v140Pose11{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 12px), calc(var(--myp,0px) - 8px),0) rotate(28deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 48px), calc(var(--myp,0px) - 30px),0) rotate(-26deg) scale(1.18);}
}
@keyframes v140Pose12{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 14px),0) rotate(0deg) scale(1.08);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 31px), calc(var(--myp,0px) - 34px),0) rotate(0deg) scale(1.24);}
}
@keyframes v140Pose13{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 10px),0) rotate(-8deg) scale(1.06);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 28px),0) rotate(8deg) scale(1.16);}
}


/* v141: less dark concert mode + smoother eye dancing */

body.eyes-dance-mode::before{
  background:rgba(0,0,0,.64) !important;
}

body.eyes-dance-mode main,
body.eyes-dance-mode .nav,
body.eyes-dance-mode footer,
body.eyes-dance-mode .ambient-bg{
  filter:brightness(.34) saturate(.72) blur(.28px) !important;
}

.v139-dance-spotlight{
  width:230px !important;
  height:230px !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.72) 16%,
      rgba(255,255,255,.30) 34%,
      rgba(255,255,255,.10) 56%,
      rgba(255,255,255,0) 76%) !important;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.58),
    0 0 58px 24px rgba(255,255,255,.24) !important;
}

body.eyes-dance-mode .v139-dance-spotlight{
  animation:v141RealSpot .82s ease-in-out infinite !important;
}

@keyframes v141RealSpot{
  0%,100%{
    width:228px;
    height:228px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.58), 0 0 58px 22px rgba(255,255,255,.24);
  }
  50%{
    width:256px;
    height:256px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.54), 0 0 72px 28px rgba(255,255,255,.30);
  }
}

/* calmer body movement with small hops and pauses */
.v98-line-clinger.dance-pose-0{ animation:v141Pose0 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-1{ animation:v141Pose1 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-2{ animation:v141Pose2 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-3{ animation:v141Pose3 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-4{ animation:v141Pose4 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-5{ animation:v141Pose5 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-6{ animation:v141Pose6 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-7{ animation:v141Pose7 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-8{ animation:v141Pose8 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-9{ animation:v141Pose9 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-10{ animation:v141Pose10 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-11{ animation:v141Pose11 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-12{ animation:v141Pose12 .82s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-13{ animation:v141Pose13 .82s ease-in-out infinite !important; }

@keyframes v141Pose0{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(-5deg) scale(1.02);}
  40%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 24px),0) rotate(4deg) scale(1.08);}
  70%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(-2deg) scale(1.03);}
}
@keyframes v141Pose1{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 28px), calc(var(--myp,0px) - 14px),0) rotate(6deg) scale(1.03);}
  45%{transform:translate3d(calc(var(--mxp,0px) - 14px), calc(var(--myp,0px) - 42px),0) rotate(20deg) scale(1.11);}
}
@keyframes v141Pose2{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 32px), calc(var(--myp,0px) - 15px),0) rotate(-7deg) scale(1.03);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 42px), calc(var(--myp,0px) - 21px),0) rotate(-11deg) scale(1.08);}
}
@keyframes v141Pose3{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(0deg) scale(1.02);}
  40%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 54px),0) rotate(-6deg) scale(1.13);}
  72%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 18px),0) rotate(5deg) scale(1.05);}
}
@keyframes v141Pose4{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(8deg) scale(1.02);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 22px), calc(var(--myp,0px) - 19px),0) rotate(13deg) scale(1.08);}
}
@keyframes v141Pose5{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(-8deg) scale(1.02);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 38px), calc(var(--myp,0px) - 19px),0) rotate(-13deg) scale(1.08);}
}
@keyframes v141Pose6{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(-2deg) scale(1.02);}
  38%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 58px),0) rotate(4deg) scale(1.13);}
  70%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 20px),0) rotate(-2deg) scale(1.05);}
}
@keyframes v141Pose7{
  0%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 16px),0) rotate(0deg) scale(1.05);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 24px),0) rotate(180deg) scale(1.11);}
  100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 16px),0) rotate(360deg) scale(1.05);}
}
@keyframes v141Pose8{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(5deg) scale(1.03);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 20px), calc(var(--myp,0px) - 25px),0) rotate(10deg) scale(1.09);}
}
@keyframes v141Pose9{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(-5deg) scale(1.03);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 40px), calc(var(--myp,0px) - 24px),0) rotate(-10deg) scale(1.09);}
}
@keyframes v141Pose10{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(4deg) scale(1.02);}
  45%{transform:translate3d(calc(var(--mxp,0px) - 18px), calc(var(--myp,0px) - 15px),0) rotate(8deg) scale(1.06);}
}
@keyframes v141Pose11{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(-4deg) scale(1.02);}
  45%{transform:translate3d(calc(var(--mxp,0px) - 42px), calc(var(--myp,0px) - 15px),0) rotate(-8deg) scale(1.06);}
}
@keyframes v141Pose12{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(0deg) scale(1.02);}
  45%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 44px),0) rotate(180deg) scale(1.12);}
}
@keyframes v141Pose13{
  0%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 16px),0) rotate(0deg) scale(1.05);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 24px),0) rotate(-180deg) scale(1.11);}
  100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 16px),0) rotate(-360deg) scale(1.05);}
}



/* v142: stage-like spotlight with visible cone focused on the dancing eyes */

body.eyes-dance-mode::before{
  background: rgba(0,0,0,.56) !important;
}

body.eyes-dance-mode main,
body.eyes-dance-mode .nav,
body.eyes-dance-mode footer,
body.eyes-dance-mode .ambient-bg{
  filter: brightness(.42) saturate(.78) blur(.18px) !important;
}

.v139-dance-spotlight{
  width: 260px !important;
  height: 260px !important;
  border-radius: 50%;
  overflow: visible !important;
  isolation: isolate;
  pointer-events:none !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.84) 16%,
      rgba(255,255,255,.46) 32%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,0) 72%) !important;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.52),
    0 0 72px 26px rgba(255,255,255,.18) !important;
  filter: blur(.15px) brightness(1.06) !important;
}

.v139-dance-spotlight::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:50%;
  transform:translateX(-50%);
  width:260px;
  height:420px;
  pointer-events:none;
  clip-path: polygon(48% 0%, 52% 0%, 100% 100%, 0% 100%);
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.13) 18%,
      rgba(255,255,255,.09) 42%,
      rgba(255,255,255,.05) 66%,
      rgba(255,255,255,0) 100%);
  filter: blur(10px);
  opacity:.95;
  z-index:-1;
}

.v139-dance-spotlight::after{
  content:"";
  position:absolute;
  left:50%;
  top:-178px;
  transform:translateX(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.78) 35%,
      rgba(255,255,255,.14) 68%,
      rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 18px rgba(255,255,255,.55),
    0 0 40px rgba(255,255,255,.24);
  opacity:.85;
}

body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1 !important;
  animation:v142SpotPulse .9s ease-in-out infinite !important;
}
body.eyes-dance-mode .v139-dance-spotlight::before{
  animation:v142BeamPulse .9s ease-in-out infinite !important;
}
body.eyes-dance-mode .v139-dance-spotlight::after{
  animation:v142LampPulse .9s ease-in-out infinite !important;
}

@keyframes v142SpotPulse{
  0%,100%{
    width:248px;
    height:248px;
    box-shadow:
      0 0 0 9999px rgba(0,0,0,.52),
      0 0 70px 24px rgba(255,255,255,.18);
  }
  50%{
    width:280px;
    height:280px;
    box-shadow:
      0 0 0 9999px rgba(0,0,0,.48),
      0 0 88px 30px rgba(255,255,255,.24);
  }
}
@keyframes v142BeamPulse{
  0%,100%{
    width:248px;
    height:402px;
    opacity:.82;
    filter: blur(11px);
  }
  50%{
    width:284px;
    height:432px;
    opacity:1;
    filter: blur(9px);
  }
}
@keyframes v142LampPulse{
  0%,100%{
    transform:translateX(-50%) scale(1);
    opacity:.82;
  }
  50%{
    transform:translateX(-50%) scale(1.08);
    opacity:1;
  }
}

/* keep the eyes readable inside the spotlight */
body.eyes-dance-mode .v98-line-clinger.is-dancing{
  z-index:1912 !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.14));
}



/* v143: real soft spotlight around the eyes, without the heavy texture look */

body.eyes-dance-mode::before{
  background: rgba(0,0,0,.72) !important;
  opacity: 1 !important;
}

body.eyes-dance-mode main,
body.eyes-dance-mode .nav,
body.eyes-dance-mode footer,
body.eyes-dance-mode .ambient-bg{
  filter: brightness(.42) saturate(.78) blur(.12px) !important;
}

/* The spotlight now works as a soft glow around the eyes,
   not as a giant solid circle */
.v139-dance-spotlight{
  width: 340px !important;
  height: 220px !important;
  border-radius: 50%;
  overflow: visible !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,248,236,.94) 0%,
      rgba(255,248,236,.82) 14%,
      rgba(255,248,236,.54) 26%,
      rgba(255,248,236,.28) 42%,
      rgba(255,248,236,.12) 58%,
      rgba(255,248,236,0) 78%) !important;
  box-shadow:
    0 0 32px rgba(255,250,245,.24),
    0 0 88px rgba(255,250,245,.18) !important;
  filter: blur(.15px) saturate(1.02) !important;
}

/* Soft projector beam from above */
.v139-dance-spotlight::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 58%;
  transform: translateX(-50%);
  width: 250px;
  height: 440px;
  clip-path: polygon(47% 0%, 53% 0%, 73% 100%, 27% 100%);
  background:
    linear-gradient(to bottom,
      rgba(255,248,236,.16) 0%,
      rgba(255,248,236,.12) 18%,
      rgba(255,248,236,.08) 40%,
      rgba(255,248,236,.04) 62%,
      rgba(255,248,236,0) 100%);
  filter: blur(12px);
  opacity: .92;
  z-index: -1;
  pointer-events:none;
}

/* Small lamp source above */
.v139-dance-spotlight::after{
  content:"";
  position:absolute;
  left:50%;
  top:-166px;
  transform:translateX(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.96) 0%,
      rgba(255,248,236,.76) 42%,
      rgba(255,248,236,.18) 72%,
      rgba(255,248,236,0) 100%);
  box-shadow:
    0 0 12px rgba(255,255,255,.55),
    0 0 34px rgba(255,248,236,.22);
  opacity:.9;
}

body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1 !important;
  animation:v143SpotBreath 1.15s ease-in-out infinite !important;
}
body.eyes-dance-mode .v139-dance-spotlight::before{
  animation:v143BeamBreath 1.15s ease-in-out infinite !important;
}
body.eyes-dance-mode .v139-dance-spotlight::after{
  animation:v143LampBreath 1.15s ease-in-out infinite !important;
}

@keyframes v143SpotBreath{
  0%,100%{
    width: 326px;
    height: 206px;
    opacity: .94;
    box-shadow:
      0 0 28px rgba(255,250,245,.20),
      0 0 74px rgba(255,250,245,.14);
  }
  50%{
    width: 362px;
    height: 234px;
    opacity: 1;
    box-shadow:
      0 0 36px rgba(255,250,245,.30),
      0 0 96px rgba(255,250,245,.20);
  }
}
@keyframes v143BeamBreath{
  0%,100%{
    width: 238px;
    height: 420px;
    opacity: .76;
  }
  50%{
    width: 270px;
    height: 454px;
    opacity: .96;
  }
}
@keyframes v143LampBreath{
  0%,100%{
    transform: translateX(-50%) scale(1);
    opacity: .82;
  }
  50%{
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
  }
}

/* keep the dancing eyes crisp inside the light */
body.eyes-dance-mode .v98-line-clinger.is-dancing{
  z-index: 1912 !important;
  filter: drop-shadow(0 0 10px rgba(255,248,236,.22));
}



/* v144: refined real spotlight — darker surroundings, soft light exactly around the dancing eyes */
body.eyes-dance-mode::before{
  background: rgba(0,0,0,.64) !important;
  opacity: 1 !important;
}

body.eyes-dance-mode main,
body.eyes-dance-mode .nav,
body.eyes-dance-mode footer,
body.eyes-dance-mode .ambient-bg,
body.eyes-dance-mode .site-header{
  filter: brightness(.50) saturate(.84) blur(.04px) !important;
}

.v139-dance-spotlight{
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(255,250,240,.98) 0%,
      rgba(255,248,236,.92) 14%,
      rgba(255,244,228,.58) 28%,
      rgba(255,240,220,.24) 44%,
      rgba(255,240,220,.10) 56%,
      rgba(255,240,220,0) 74%) !important;
  box-shadow:
      0 0 0 9999px rgba(0,0,0,.36),
      0 0 30px rgba(255,248,236,.18),
      0 0 90px rgba(255,248,236,.15) !important;
  filter: none !important;
}

/* narrow cone from above — subtle, not a texture slab */
.v139-dance-spotlight::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:54%;
  transform:translateX(-50%);
  width:180px;
  height:360px;
  pointer-events:none;
  clip-path: polygon(49% 0%, 51% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom,
    rgba(255,248,236,.18) 0%,
    rgba(255,248,236,.12) 20%,
    rgba(255,248,236,.07) 45%,
    rgba(255,248,236,.03) 72%,
    rgba(255,248,236,0) 100%) !important;
  filter: blur(10px);
  opacity:.9;
  z-index:-1;
}

/* tiny source lamp */
.v139-dance-spotlight::after{
  content:"";
  position:absolute;
  left:50%;
  top:-150px;
  transform:translateX(-50%);
  width:16px;
  height:16px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.98) 0%,
    rgba(255,250,240,.86) 36%,
    rgba(255,248,236,.28) 70%,
    rgba(255,248,236,0) 100%) !important;
  box-shadow:
    0 0 12px rgba(255,255,255,.48),
    0 0 28px rgba(255,248,236,.18) !important;
  opacity:.9;
}

body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1 !important;
  animation:v144SpotPulse 1.05s ease-in-out infinite !important;
}
body.eyes-dance-mode .v139-dance-spotlight::before{
  animation:v144BeamPulse 1.05s ease-in-out infinite !important;
}
body.eyes-dance-mode .v139-dance-spotlight::after{
  animation:v144LampPulse 1.05s ease-in-out infinite !important;
}

@keyframes v144SpotPulse{
  0%,100%{
    width: 210px;
    height: 210px;
    box-shadow:
      0 0 0 9999px rgba(0,0,0,.36),
      0 0 28px rgba(255,248,236,.16),
      0 0 84px rgba(255,248,236,.13);
  }
  50%{
    width: 236px;
    height: 236px;
    box-shadow:
      0 0 0 9999px rgba(0,0,0,.33),
      0 0 34px rgba(255,248,236,.20),
      0 0 96px rgba(255,248,236,.17);
  }
}
@keyframes v144BeamPulse{
  0%,100%{ width:170px; height:344px; opacity:.78; }
  50%{ width:190px; height:372px; opacity:.95; }
}
@keyframes v144LampPulse{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.85; }
  50%{ transform:translateX(-50%) scale(1.08); opacity:1; }
}

/* crisp eyes inside spotlight */
body.eyes-dance-mode .v98-line-clinger.is-dancing{
  z-index:1912 !important;
  filter: drop-shadow(0 0 10px rgba(255,248,236,.26)) drop-shadow(0 0 24px rgba(255,248,236,.12)) !important;
}
body.eyes-dance-mode .v98-line-clinger.is-dancing .v98-eye{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42),
    0 0 12px rgba(255,248,236,.20),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* v146: actual spotlight feeling, not flat layers */
:root{
  --v146-spot-x: 50vw;
  --v146-spot-y: 50vh;
}

body.eyes-dance-mode::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1800;
  background: rgba(6,8,12,.72) !important;
  -webkit-mask-image:
    radial-gradient(circle 170px at var(--v146-spot-x) var(--v146-spot-y), rgba(0,0,0,0) 0 18%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.55) 44%, rgba(0,0,0,.9) 66%, rgba(0,0,0,1) 100%);
  mask-image:
    radial-gradient(circle 170px at var(--v146-spot-x) var(--v146-spot-y), rgba(0,0,0,0) 0 18%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.55) 44%, rgba(0,0,0,.9) 66%, rgba(0,0,0,1) 100%);
  animation:none !important;
}

body.eyes-dance-mode main,
body.eyes-dance-mode .site-header,
body.eyes-dance-mode footer,
body.eyes-dance-mode .curtain,
body.eyes-dance-mode .page-transition{
  filter:none !important;
  opacity:1 !important;
}

.v139-dance-spotlight{
  position:fixed;
  left:0;
  top:0;
  width:300px !important;
  height:440px !important;
  pointer-events:none;
  z-index:1902;
  opacity:0;
  background:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  transition:opacity .28s ease;
}
body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1 !important;
}

.v139-dance-spotlight::before,
.v139-dance-spotlight::after{
  content:'';
  position:absolute;
  left:50%;
  pointer-events:none;
}

/* spotlight cone from above */
.v139-dance-spotlight::before{
  top:-6px;
  width:190px;
  height:300px;
  transform:translateX(-50%);
  clip-path:polygon(50% 0%, 4% 100%, 96% 100%);
  background:linear-gradient(to bottom,
    rgba(255,255,255,.42) 0%,
    rgba(255,251,236,.29) 20%,
    rgba(255,248,228,.17) 44%,
    rgba(255,248,235,.08) 68%,
    rgba(255,255,255,0) 100%);
  filter:blur(12px);
  opacity:.95;
}

/* hot center glow exactly around the eyes */
.v139-dance-spotlight::after{
  top:72%;
  width:210px;
  height:210px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,250,.88) 0%,
    rgba(255,250,228,.64) 16%,
    rgba(255,247,220,.36) 32%,
    rgba(255,247,225,.18) 48%,
    rgba(255,249,236,.08) 64%,
    rgba(255,255,255,0) 82%);
  filter:blur(6px);
  box-shadow:
    0 0 38px rgba(255,247,214,.26),
    0 0 82px rgba(255,249,228,.18),
    0 0 130px rgba(255,251,236,.10);
  animation:v146GlowPulse 1.2s ease-in-out infinite;
}

@keyframes v146GlowPulse{
  0%,100%{transform:translate(-50%, -50%) scale(1); opacity:.96;}
  50%{transform:translate(-50%, -50%) scale(1.05); opacity:1;}
}

/* stronger light reaction on the eyes themselves */
.v98-line-clinger.is-dancing{
  filter:drop-shadow(0 0 18px rgba(255,255,255,.28)) drop-shadow(0 10px 28px rgba(0,0,0,.16)) !important;
}
.v98-line-clinger.is-dancing .v98-eye{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.44),
    0 0 12px rgba(255,255,255,.38),
    0 0 30px rgba(255,246,208,.18),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* v147: tighten spotlight shape, remove weird oval feel, keep true light on eyes */
:root{
  --v147-spot-size: 138px;
}

body.eyes-dance-mode::before{
  background: rgba(7, 9, 14, 0.64) !important;
  -webkit-mask-image:
    radial-gradient(circle var(--v147-spot-size) at var(--v146-spot-x) var(--v146-spot-y),
      rgba(0,0,0,0) 0 24%,
      rgba(0,0,0,.10) 34%,
      rgba(0,0,0,.40) 48%,
      rgba(0,0,0,.82) 68%,
      rgba(0,0,0,1) 100%) !important;
  mask-image:
    radial-gradient(circle var(--v147-spot-size) at var(--v146-spot-x) var(--v146-spot-y),
      rgba(0,0,0,0) 0 24%,
      rgba(0,0,0,.10) 34%,
      rgba(0,0,0,.40) 48%,
      rgba(0,0,0,.82) 68%,
      rgba(0,0,0,1) 100%) !important;
}

.v139-dance-spotlight{
  width: 260px !important;
  height: 360px !important;
  background: none !important;
  box-shadow: none !important;
}

/* slimmer overhead beam */
.v139-dance-spotlight::before{
  top: -2px !important;
  width: 126px !important;
  height: 236px !important;
  clip-path: polygon(50% 0%, 8% 100%, 92% 100%) !important;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.34) 0%,
    rgba(255,251,236,.22) 20%,
    rgba(255,248,228,.12) 42%,
    rgba(255,248,235,.05) 66%,
    rgba(255,255,255,0) 100%) !important;
  filter: blur(10px) !important;
  opacity: .78 !important;
}

/* tighter glow around the eyes */
.v139-dance-spotlight::after{
  top: 68% !important;
  width: 168px !important;
  height: 148px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 48%,
    rgba(255,255,250,.92) 0%,
    rgba(255,250,228,.62) 18%,
    rgba(255,247,220,.28) 40%,
    rgba(255,247,225,.12) 58%,
    rgba(255,255,255,0) 78%) !important;
  filter: blur(5px) !important;
  box-shadow:
    0 0 26px rgba(255,247,214,.22),
    0 0 58px rgba(255,249,228,.12) !important;
  animation: v147GlowPulse 1.35s ease-in-out infinite !important;
}

@keyframes v147GlowPulse{
  0%,100%{ transform: translate(-50%, -50%) scale(1); opacity:.94; }
  50%{ transform: translate(-50%, -50%) scale(1.04); opacity:1; }
}

/* stronger readable eye light without giant blobs */
.v98-line-clinger.is-dancing{
  filter: drop-shadow(0 0 12px rgba(255,255,255,.18)) drop-shadow(0 6px 16px rgba(0,0,0,.12)) !important;
}
.v98-line-clinger.is-dancing .v98-eye{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.40),
    0 0 9px rgba(255,255,255,.30),
    0 0 18px rgba(255,246,208,.12),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}


/* v148: dance mode scroll-safe + more smooth movement poses */
body.eyes-dance-mode .v98-rope-svg .v98-rope,
body.eyes-dance-mode .v98-rope-svg g{
  opacity:0 !important;
}

/* More calm pose set: no sharp jerks, more pauses and rhythmic hops */
.v98-line-clinger.dance-pose-14{ animation:v148Pose14 .86s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-15{ animation:v148Pose15 .86s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-16{ animation:v148Pose16 .86s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-17{ animation:v148Pose17 .86s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-18{ animation:v148Pose18 .86s ease-in-out infinite !important; }
.v98-line-clinger.dance-pose-19{ animation:v148Pose19 .86s ease-in-out infinite !important; }

@keyframes v148Pose14{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 15px),0) rotate(0deg) scale(1.04);}
  45%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 27px),0) rotate(-4deg) scale(1.10);}
}
@keyframes v148Pose15{
  0%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(0deg) scale(1.04);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 50px),0) rotate(180deg) scale(1.13);}
  100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(360deg) scale(1.04);}
}
@keyframes v148Pose16{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 28px), calc(var(--myp,0px) - 14px),0) rotate(7deg) scale(1.03);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 20px), calc(var(--myp,0px) - 18px),0) rotate(12deg) scale(1.07);}
}
@keyframes v148Pose17{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 32px), calc(var(--myp,0px) - 14px),0) rotate(-7deg) scale(1.03);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 40px), calc(var(--myp,0px) - 18px),0) rotate(-12deg) scale(1.07);}
}
@keyframes v148Pose18{
  0%,100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 15px),0) rotate(3deg) scale(1.03);}
  50%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 24px),0) rotate(-3deg) scale(1.08);}
}
@keyframes v148Pose19{
  0%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(0deg) scale(1.05);}
  45%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 58px),0) rotate(200deg) scale(1.17);}
  100%{transform:translate3d(calc(var(--mxp,0px) - 30px), calc(var(--myp,0px) - 14px),0) rotate(360deg) scale(1.05);}
}

/* More face moods for new poses */
.v98-line-clinger.dance-mood-sleepy .v98-eye{
  width:23px !important;
  height:7px !important;
  border-radius:999px !important;
  transform:translateY(6px) !important;
}
.v98-line-clinger.dance-mood-wow .v98-eye{
  width:27px !important;
  height:27px !important;
  transform:translateY(-2px) scale(1.06) !important;
}
.v98-line-clinger.dance-mood-wow .v98-eye::before{
  transform:translate(-50%,-50%) translate(0px,1px) scale(.72) !important;
}


/* v153 HARD FIX: visible close + visible disco ball, no hidden transform */
.v153-dance-close{
  position:fixed !important;
  left:-9999px;
  top:-9999px;
  width:50px !important;
  height:50px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.85) !important;
  background:rgba(8,10,16,.84) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:500 32px/1 Arial,sans-serif !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:2147483000 !important;
  box-shadow:0 16px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter:blur(8px);
}
.v153-dance-close.is-visible,
body.eyes-dance-mode .v153-dance-close.is-visible{
  opacity:1 !important;
  pointer-events:auto !important;
}
.v153-dance-close:hover{
  background:rgba(0,0,0,.95) !important;
}

.v153-disco-ball{
  position:fixed !important;
  left:-9999px;
  top:-9999px;
  width:72px !important;
  height:72px !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:2147482999 !important;
  overflow:visible !important;
}
.v153-disco-ball.is-visible,
body.eyes-dance-mode .v153-disco-ball.is-visible{
  opacity:1 !important;
}
.v153-disco-string{
  position:absolute;
  left:50%;
  bottom:100%;
  width:2px;
  height:38px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.12));
}
.v153-disco-core{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,1), rgba(255,255,255,.42) 16%, transparent 35%),
    radial-gradient(circle at 62% 58%, rgba(255,255,255,.22), transparent 54%),
    conic-gradient(from 0deg, rgba(255,255,255,.68), rgba(170,185,205,.20), rgba(255,255,255,.62), rgba(150,165,188,.18), rgba(255,255,255,.68));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 30px rgba(255,255,255,.30),
    0 12px 28px rgba(0,0,0,.24);
  animation:v153DiscoSpin 2.4s linear infinite, v153DiscoSwing 1.8s ease-in-out infinite;
}
.v153-disco-core::after{
  content:'';
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.24) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 2px, transparent 2px 6px);
  mix-blend-mode:screen;
  opacity:.9;
}
.v153-ray{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:92px;
  transform-origin:50% 0%;
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  filter:blur(2px);
  opacity:.65;
}
.v153-ray.r1{ transform:rotate(32deg); }
.v153-ray.r2{ transform:rotate(146deg); }
.v153-ray.r3{ transform:rotate(260deg); }

@keyframes v153DiscoSpin{ from{ rotate:0deg; } to{ rotate:360deg; } }
@keyframes v153DiscoSwing{ 0%,100%{ translate:0 0; } 50%{ translate:0 5px; } }

/* keep exact beat look while adding visible movement */
.v98-line-clinger.dance-pose-8,
.v98-line-clinger.dance-pose-14,
.v98-line-clinger.dance-pose-20,
.v98-line-clinger.dance-pose-24{
  animation-duration:.40s !important;
}


/* v154: tune close position visibility + disco glow for both themes */
.v153-dance-close{
  width:54px !important;
  height:54px !important;
  font-size:34px !important;
  box-shadow:0 18px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08) inset, inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.v153-disco-ball{
  filter: drop-shadow(0 0 12px rgba(255,255,255,.55)) drop-shadow(0 0 24px rgba(255,255,255,.28));
}
.v153-disco-ball::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:116px;
  height:116px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.46) 0%, rgba(255,255,255,.20) 22%, rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 72%);
  filter:blur(8px);
  z-index:-1;
  opacity:.95;
}
.v153-disco-ball::after{
  content:'';
  position:absolute;
  left:50%;
  top:58%;
  width:150px;
  height:60px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 36%, rgba(255,255,255,0) 72%);
  filter:blur(10px);
  z-index:-2;
  opacity:.85;
}
.v153-disco-core{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.82) inset,
    0 0 20px rgba(255,255,255,.48),
    0 0 42px rgba(255,255,255,.34),
    0 12px 28px rgba(0,0,0,.24) !important;
  filter:brightness(1.08);
}
.v153-disco-core::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  opacity:.7;
}
body.eyes-dance-mode:not(.dark-theme) .v153-disco-ball{
  filter: drop-shadow(0 0 18px rgba(255,255,255,.72)) drop-shadow(0 0 34px rgba(255,255,255,.42));
}
body.eyes-dance-mode:not(.dark-theme) .v153-disco-ball::before{
  background:radial-gradient(circle, rgba(255,255,255,.58) 0%, rgba(255,255,255,.26) 20%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 72%);
}
body.eyes-dance-mode:not(.dark-theme) .v153-ray{
  opacity:.82;
  filter:blur(2px) brightness(1.18);
}
body.eyes-dance-mode:not(.dark-theme) .v153-dance-close{
  background:rgba(12,14,20,.88) !important;
  border-color:rgba(255,255,255,.92) !important;
}


/* v161: guaranteed separate theme cord in dance mode */
.v161-dance-theme-switch{
  position:fixed;
  right:34px;
  top:112px;
  width:86px;
  height:116px;
  border:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
  z-index:2147482600;
  cursor:pointer;
}
.v161-dance-theme-switch.is-visible,
body.eyes-dance-mode .v161-dance-theme-switch.is-visible{
  opacity:1;
  pointer-events:auto;
}
.v161-mini-cord{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:66px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.20));
  filter:drop-shadow(0 0 8px rgba(255,255,255,.35));
}
.v161-mini-cord i{
  position:absolute;
  left:50%;
  top:0;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.86);
  box-shadow:0 0 14px rgba(255,255,255,.35);
}
.v161-mini-knob{
  position:absolute;
  left:50%;
  top:58px;
  width:46px;
  height:46px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 14px 34px rgba(0,0,0,.22), 0 0 28px rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.v161-mini-knob::after{
  content:'';
  position:absolute;
  inset:15px;
  border-radius:50%;
  border:1px solid rgba(25,28,34,.38);
}
.v161-mini-label{
  position:absolute;
  left:50%;
  top:108px;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.v161-dance-theme-switch:hover .v161-mini-knob{
  transform:translateX(-50%) translateY(4px);
  box-shadow:0 18px 40px rgba(0,0,0,.28), 0 0 40px rgba(255,255,255,.28);
}
body:not(.eyes-dance-mode) .v161-dance-theme-switch{
  display:none;
}
.v153-dance-close{
  transform:none !important;
}


/* v162: only ONE theme cord in dance mode.
   Hide the old pull-cord while dancing; keep the new working mini-cord. */
body.eyes-dance-mode .pull-cord,
body.dance-theme-controls-visible .pull-cord,
.pull-cord.dance-visible{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.eyes-dance-mode .v161-dance-theme-switch.is-visible{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* v162: make the close button easier to hit, but do not block dragging eyes */
.v153-dance-close{
  pointer-events:auto !important;
  z-index:2147483000 !important;
}


/* v163: restore the ORIGINAL working theme cord in dance mode.
   The extra mini-cord was confusing and non-working for the user. */
body.eyes-dance-mode .v161-dance-theme-switch,
body.dance-theme-controls-visible .v161-dance-theme-switch,
.v161-dance-theme-switch{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.eyes-dance-mode .pull-cord,
body.dance-theme-controls-visible .pull-cord,
.pull-cord.dance-visible{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:2147483600 !important;
}

body.eyes-dance-mode .pull-cord .cord-anchor,
body.eyes-dance-mode .pull-cord .cord-svg,
body.eyes-dance-mode .pull-cord .cord-line,
body.eyes-dance-mode .pull-cord .cord-handle,
body.eyes-dance-mode .pull-cord .cord-hint,
body.dance-theme-controls-visible .pull-cord .cord-anchor,
body.dance-theme-controls-visible .pull-cord .cord-svg,
body.dance-theme-controls-visible .pull-cord .cord-line,
body.dance-theme-controls-visible .pull-cord .cord-handle,
body.dance-theme-controls-visible .pull-cord .cord-hint{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

body.eyes-dance-mode .pull-cord .cord-handle,
body.dance-theme-controls-visible .pull-cord .cord-handle{
  display:grid !important;
  pointer-events:auto !important;
  box-shadow:0 18px 48px rgba(0,0,0,.28), 0 0 28px rgba(255,255,255,.28) !important;
}

body.eyes-dance-mode [data-theme-toggle],
body.dance-theme-controls-visible [data-theme-toggle]{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative;
  z-index:2147483599 !important;
}

/* ===== SMPL v164: hide broken dance mini-cord, keep only original pull-cord working in dance mode ===== */
body.eyes-dance-mode .v161-dance-theme-switch,
body.eyes-dance-mode .v161-dance-theme-switch.is-visible,
body.dance-theme-controls-visible .v161-dance-theme-switch,
.v161-dance-theme-switch,
.v161-dance-theme-switch *{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Important: the fullscreen pull-cord wrapper must NOT capture the whole screen.
   Only the round handle should be interactive, otherwise eye dragging breaks. */
body.eyes-dance-mode .pull-cord,
body.dance-theme-controls-visible .pull-cord,
.pull-cord.dance-visible{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  z-index:2147483600 !important;
}

body.eyes-dance-mode .pull-cord .cord-anchor,
body.eyes-dance-mode .pull-cord .cord-svg,
body.eyes-dance-mode .pull-cord .cord-line,
body.eyes-dance-mode .pull-cord .cord-hint,
body.dance-theme-controls-visible .pull-cord .cord-anchor,
body.dance-theme-controls-visible .pull-cord .cord-svg,
body.dance-theme-controls-visible .pull-cord .cord-line,
body.dance-theme-controls-visible .pull-cord .cord-hint{
  pointer-events:none !important;
}

body.eyes-dance-mode .pull-cord .cord-handle,
body.dance-theme-controls-visible .pull-cord .cord-handle{
  pointer-events:auto !important;
  display:grid !important;
  z-index:2147483601 !important;
}


/* ===== v169: smoother premium reveal scroll ===== */
/* just clean slide + unfold, no heavy psychedelic 3D */
.reveal{
  --smpl-rx: 0px;
  --smpl-ry: 44px;
  --smpl-rz: -54px;
  --smpl-rotx: 8deg;
  --smpl-roty: 0deg;
  --smpl-scale: .975;
  --smpl-delay: 0ms;
  opacity: 0;
  transform:
    translate3d(var(--smpl-rx), var(--smpl-ry), var(--smpl-rz))
    rotateX(var(--smpl-rotx))
    rotateY(var(--smpl-roty))
    scale(var(--smpl-scale));
  transform-origin: 50% 50%;
  filter: blur(1.8px);
  transition:
    opacity .78s cubic-bezier(.2,.8,.2,1) var(--smpl-delay),
    transform .95s cubic-bezier(.18,.86,.22,1) var(--smpl-delay),
    filter .78s cubic-bezier(.2,.8,.2,1) var(--smpl-delay);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.reveal.reveal-left{
  --smpl-rx: -34px;
  --smpl-ry: 34px;
  --smpl-roty: -7deg;
}
.reveal.reveal-right{
  --smpl-rx: 34px;
  --smpl-ry: 34px;
  --smpl-roty: 7deg;
}
.reveal.reveal-up{
  --smpl-ry: 54px;
  --smpl-rz: -72px;
  --smpl-rotx: 10deg;
}
.reveal.reveal-soft{
  --smpl-rx: 0px;
  --smpl-ry: 26px;
  --smpl-rz: -26px;
  --smpl-rotx: 5deg;
  --smpl-roty: 0deg;
  --smpl-scale: .985;
}

.reveal.visible{
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    rotateX(0deg)
    rotateY(0deg)
    scale(1);
  filter: blur(0);
}

/* remove strange white wash from motion/video area */
.v22-video-bg{
  opacity: .88 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.v22-video::after{
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)) !important;
}

.v22-video-bg.v167-video-bg{
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.v22-video-bg.v167-video-bg video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.v22-video-bg.v167-video-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.16));
  pointer-events:none;
}

/* keep cards looking normal, no weird highlighted edges */
.reveal.visible.card,
.reveal.visible.dark-card,
.reveal.visible.contact-card,
.reveal.visible.form-card,
.reveal.visible.division,
.reveal.visible.v24-eco-item,
.reveal.visible.v27-acc-item,
.reveal.visible.v72-tic,
.reveal.visible.v22-signal-board,
.reveal.visible.v22-video{
  box-shadow: inherit;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.reveal-left,
  .reveal.reveal-right,
  .reveal.reveal-up,
  .reveal.reveal-soft{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}


/* ===== v170: WEBM support for all motion slots 1-4 =====
   Put files here:
   assets/gif-slot-1.webm
   assets/gif-slot-2.webm
   assets/gif-slot-3.webm
   assets/gif-slot-4.webm
   PNG files stay as posters/fallback previews.
*/
.v22-video-bg.v170-video-bg,
.v22-video-bg.v167-video-bg{
  background-size:cover !important;
  background-position:center !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
.v22-video-bg.v170-video-bg video,
.v22-video-bg.v167-video-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  border-radius:inherit;
}
.v22-video-bg.v170-video-bg::after,
.v22-video-bg.v167-video-bg::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.16));
}


/* ============================================================
   SMPL v203: spin durations (full 360 turn lands on the beat) +
   mobile optimization + new eye emotions. Original darkening and
   spotlight are left intact (the light follows the eyes).
   ============================================================ */

/* Spin poses do a clean full turn per ~400ms beat */
.v98-line-clinger.dance-pose-7{ animation-duration:.40s !important; animation-timing-function:linear !important; }
.v98-line-clinger.dance-pose-13{ animation-duration:.40s !important; animation-timing-function:linear !important; }
.v98-line-clinger.dance-pose-15{ animation-duration:.40s !important; animation-timing-function:linear !important; }
.v98-line-clinger.dance-pose-19{ animation-duration:.42s !important; }

/* ---- NEW EYE EMOTIONS ---- */
.v98-line-clinger.vdm-adore .v98-eye{ width:23px !important; height:23px !important; }
.v98-line-clinger.vdm-adore .v98-eye::before{ width:12px !important; height:12px !important; background:#3b434b !important; box-shadow:none !important; transform:translate(-50%,-50%) !important; }
.v98-line-clinger.vdm-adore .v98-eye::after{ content:'' !important; position:absolute; left:34%; top:30%; width:4px; height:4px; border-radius:50%; background:#fff; }

.v98-line-clinger.vdm-shock .v98-eye{ width:24px !important; height:24px !important; }
.v98-line-clinger.vdm-shock .v98-eye::before{ width:5px !important; height:5px !important; transform:translate(-50%,-50%) !important; }

.v98-line-clinger.vdm-squint .v98-eye{ height:11px !important; background:transparent !important; border:none !important; border-bottom:3px solid #5b646c !important; border-radius:0 0 72% 72% !important; box-shadow:none !important; }
.v98-line-clinger.vdm-squint .v98-eye::before{ opacity:0 !important; }
body.dark-theme .v98-line-clinger.vdm-squint .v98-eye{ border-bottom-color:#c6d0d8 !important; }

.v98-line-clinger.vdm-love .v98-eye{ width:22px !important; height:22px !important; box-shadow:0 0 12px rgba(255,90,122,.5), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.v98-line-clinger.vdm-love .v98-eye::before{ width:12px !important; height:12px !important; background:#ff5a7a !important; border-radius:0 !important; box-shadow:none !important; transform:translate(-50%,-50%) !important; clip-path:polygon(50% 100%,12% 60%,0 30%,18% 8%,50% 28%,82% 8%,100% 30%,88% 60%) !important; }

.v98-line-clinger.vdm-star .v98-eye{ box-shadow:0 0 12px rgba(255,207,58,.45), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.v98-line-clinger.vdm-star .v98-eye::before{ width:13px !important; height:13px !important; background:#ffcf3a !important; border-radius:0 !important; box-shadow:none !important; transform:translate(-50%,-50%) !important; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) !important; }

.v98-line-clinger.vdm-hypno .v98-eye::before{ width:4px !important; height:4px !important; transform:translate(-50%,-50%) !important; }
.v98-line-clinger.vdm-hypno .v98-eye::after{ content:'' !important; position:absolute; left:50%; top:50%; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%); background:conic-gradient(from 0deg,#7a828b 0 25%,transparent 25% 50%,#7a828b 50% 75%,transparent 75%); opacity:.5; animation:vdmSpin .6s linear infinite; }
@keyframes vdmSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.v98-line-clinger.vdm-xx .v98-eye{ background:
  linear-gradient(45deg,transparent 43%,#5b646c 43% 57%,transparent 57%),
  linear-gradient(-45deg,transparent 43%,#5b646c 43% 57%,transparent 57%),
  radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(255,255,255,.5) 60%) !important; }
.v98-line-clinger.vdm-xx .v98-eye::before{ opacity:0 !important; }

.v98-line-clinger.vdm-sleepy .v98-eye{ height:9px !important; border-radius:0 0 60% 60% !important; }
.v98-line-clinger.vdm-sleepy .v98-eye::before{ transform:translate(-50%,-50%) translateY(2px) !important; opacity:.7 !important; }

.v98-line-clinger.vdm-cry .v98-eye{ overflow:visible !important; }
.v98-line-clinger.vdm-cry .v98-eye::after{ content:'' !important; position:absolute; left:50%; top:66%; width:5px; height:7px; background:#7ec8ff; border-radius:0 60% 60% 60%; transform:translate(-50%,0) rotate(45deg); animation:vdmTear .7s ease-in infinite; }
.v98-line-clinger.vdm-cry .v98-eye.right::after{ animation-delay:-.35s; }
@keyframes vdmTear{ 0%{opacity:0; top:58%} 25%{opacity:1} 100%{opacity:0; top:118%} }

.v98-line-clinger.vdm-rage .v98-eye{ overflow:visible !important; transform:scaleY(.82) !important; box-shadow:0 0 10px rgba(255,80,80,.35), inset 0 1px 0 rgba(255,255,255,.6) !important; }
.v98-line-clinger.vdm-rage .v98-eye::before{ background:#b23b41 !important; }
.v98-line-clinger.vdm-rage .v98-eye.left::after{ content:'' !important; position:absolute; left:-1px; top:-3px; width:16px; height:3px; background:#c0494f; border-radius:2px; transform:rotate(20deg); }
.v98-line-clinger.vdm-rage .v98-eye.right::after{ content:'' !important; position:absolute; right:-1px; top:-3px; width:16px; height:3px; background:#c0494f; border-radius:2px; transform:rotate(-20deg); }

.v98-line-clinger.vdm-wide .v98-eye{ width:23px !important; height:23px !important; }
.v98-line-clinger.vdm-wide .v98-eye::before{ width:4px !important; height:4px !important; animation:vdmDart .4s ease-in-out infinite; }
@keyframes vdmDart{ 0%,100%{ transform:translate(-50%,-50%) translateX(-3px); } 50%{ transform:translate(-50%,-50%) translateX(3px); } }

/* ---- MOBILE / PHONE OPTIMIZATION (all pages) ---- */
@media (max-width: 640px){
  html{ -webkit-text-size-adjust:100%; }
  h1, h2, h3, .lead, .v19-hero h1, .v22-hero h1, .page-hero h1, .media-copy h3{
    overflow-wrap:break-word; word-break:break-word; hyphens:auto;
  }
  h1{ font-size:clamp(34px, 11.5vw, 50px) !important; line-height:.96; letter-spacing:-.04em; }
  h2{ font-size:clamp(27px, 8.5vw, 42px) !important; line-height:1; letter-spacing:-.035em; }
  .page-hero h1{ font-size:clamp(32px, 10vw, 46px) !important; }
  .lead{ font-size:clamp(16px, 4.4vw, 19px); }
  .menu{ gap:4px; }
  .menu a{ min-height:48px; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .nav-actions .mode-toggle{ min-width:44px; min-height:44px; }
  .burger{ width:46px; height:46px; }
  .btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
  input, select, textarea{ font-size:16px !important; padding:15px 16px; border-radius:16px; }
  textarea{ min-height:130px; }
  .footer-inner{ text-align:center; }
  .footer-inner > *{ margin:9px 0; }
  .footer-inner .brand{ justify-content:center; }
  .eyes-dance-toggle{ min-height:46px; padding:12px 20px; }
  .section{ padding:56px 0; }
}
@media (max-width: 420px){
  h1{ font-size:clamp(30px, 12vw, 40px) !important; }
  h2{ font-size:clamp(24px, 9vw, 34px) !important; }
  .page-hero h1{ font-size:clamp(28px, 11vw, 38px) !important; }
  .nav-inner{ gap:8px; }
  .nav-actions{ gap:6px; }
  .section{ padding:48px 0; }
}


/* ===== v171: refined dance-mode lighting fix =====
   Goal: remove the strange textured/double-dark overlay in dance mode
   and keep a clean real spotlight around the eyes.
*/
:root{
  --v171-spot-size: 164px;
  --v171-spot-soft: 248px;
}

body.eyes-dance-mode::before{
  content:'' !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:68 !important;
  background:rgba(7,10,16,.56) !important;
  -webkit-mask-image: radial-gradient(
    circle var(--v171-spot-soft) at var(--v146-spot-x) var(--v146-spot-y),
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(var(--v171-spot-size) * .34),
    rgba(0,0,0,.05) calc(var(--v171-spot-size) * .48),
    rgba(0,0,0,.18) calc(var(--v171-spot-size) * .62),
    rgba(0,0,0,.44) calc(var(--v171-spot-size) * .84),
    rgba(0,0,0,.82) 100%
  ) !important;
  mask-image: radial-gradient(
    circle var(--v171-spot-soft) at var(--v146-spot-x) var(--v146-spot-y),
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(var(--v171-spot-size) * .34),
    rgba(0,0,0,.05) calc(var(--v171-spot-size) * .48),
    rgba(0,0,0,.18) calc(var(--v171-spot-size) * .62),
    rgba(0,0,0,.44) calc(var(--v171-spot-size) * .84),
    rgba(0,0,0,.82) 100%
  ) !important;
  backdrop-filter:none !important;
}

body.eyes-dance-mode main,
body.eyes-dance-mode .site-header,
body.eyes-dance-mode footer,
body.eyes-dance-mode .ambient-bg,
body.eyes-dance-mode .curtain,
body.eyes-dance-mode .page-transition,
body.eyes-dance-mode .nav{
  opacity:.34 !important;
  filter:saturate(.88) brightness(.82) !important;
  transition:opacity .35s ease, filter .35s ease !important;
}

.v139-dance-spotlight{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:290px !important;
  height:390px !important;
  pointer-events:none !important;
  z-index:69 !important;
  opacity:0 !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}
body.eyes-dance-mode .v139-dance-spotlight{
  opacity:1 !important;
}

/* upper cone of light */
.v139-dance-spotlight::before,
.v139-dance-spotlight::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
}
.v139-dance-spotlight::before{
  top:-18px !important;
  width:150px !important;
  height:265px !important;
  clip-path:polygon(50% 0%, 13% 100%, 87% 100%) !important;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.22) 0%,
    rgba(255,250,238,.16) 18%,
    rgba(255,248,230,.09) 40%,
    rgba(255,247,230,.04) 64%,
    rgba(255,255,255,0) 100%) !important;
  filter:blur(12px) !important;
  opacity:.92 !important;
}

/* soft halo centered exactly around the eyes */
.v139-dance-spotlight::after{
  top:60% !important;
  width:220px !important;
  height:180px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,252,.96) 0%,
    rgba(255,252,235,.78) 13%,
    rgba(255,248,220,.44) 30%,
    rgba(255,247,225,.22) 48%,
    rgba(255,247,225,.08) 62%,
    rgba(255,255,255,0) 78%) !important;
  filter:blur(10px) !important;
  box-shadow:
    0 0 28px rgba(255,248,219,.22),
    0 0 64px rgba(255,248,228,.13),
    0 0 110px rgba(255,249,235,.08) !important;
  animation:v171DanceGlow 1.85s ease-in-out infinite !important;
}
@keyframes v171DanceGlow{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.95; }
  50%{ transform:translate(-50%,-50%) scale(1.035); opacity:1; }
}

/* eyes stay crisp and get a real glow, not a flat texture */
body.eyes-dance-mode .v98-line-clinger.is-dancing{
  z-index:70 !important;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.16))
    drop-shadow(0 0 24px rgba(255,247,214,.12)) !important;
}
body.eyes-dance-mode .v98-line-clinger.is-dancing .v98-eye{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42),
    0 0 8px rgba(255,255,255,.32),
    0 0 18px rgba(255,246,214,.14),
    inset 0 1px 0 rgba(255,255,255,.97) !important;
}


/* ===== v172: dance mode scroll stability ===== */
body.eyes-dance-mode::before,
body.eyes-dance-mode .v139-dance-spotlight,
body.eyes-dance-mode .v98-line-clinger.is-dancing{
  will-change: transform, opacity, filter;
}


/* ===== v173: static white ambient background on scroll ===== */
.ambient-bg,
.ambient-light,
.ambient-dark{
  backface-visibility:hidden;
}
body:not(.flashlight-mode) .ambient-light,
body:not(.flashlight-mode) .ambient-dark{
  transform:none !important;
}


/* ===== v175: smoother page transitions + mobile polish ===== */
:root{
  --smpl-page-enter-duration:.42s;
  --smpl-page-leave-duration:.28s;
  --smpl-page-ease:cubic-bezier(.22,1,.36,1);
}

/* keep header stable, but make content switching feel softer */
body.smpl-soft-enter main,
body.smpl-soft-enter footer{
  opacity:0;
  transform:translate3d(0, 10px, 0);
  filter:none;
}
body.smpl-soft-enter.smpl-soft-enter-ready main,
body.smpl-soft-enter.smpl-soft-enter-ready footer{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:none;
  transition:
    opacity var(--smpl-page-enter-duration) var(--smpl-page-ease),
    transform var(--smpl-page-enter-duration) var(--smpl-page-ease),
    filter var(--smpl-page-enter-duration) var(--smpl-page-ease);
}
body.smpl-page-leave main,
body.smpl-page-leave footer{
  opacity:0 !important;
  transform:translate3d(0, -6px, 0) !important;
  filter:none !important;
  transition:
    opacity var(--smpl-page-leave-duration) var(--smpl-page-ease),
    transform var(--smpl-page-leave-duration) var(--smpl-page-ease),
    filter var(--smpl-page-leave-duration) var(--smpl-page-ease) !important;
}

/* mobile cleanup without touching desktop composition */
@media (max-width: 760px){
  body{ overflow-x:hidden; }
  .nav{
    top:8px !important;
    width:calc(100% - 14px) !important;
    border-radius:18px !important;
  }
  .nav-inner{
    min-height:64px !important;
    height:auto !important;
    padding:10px 12px !important;
    gap:8px !important;
  }
  .brand-mark{ font-size:13px !important; }
  .brand-name{ display:none !important; }
  .menu{
    top:84px !important;
    width:min(94vw, 500px) !important;
    border-radius:20px !important;
    padding:12px !important;
  }
  .menu a{ font-size:14px !important; }
  .nav-actions{ gap:6px !important; }
  .nav-actions .btn.light{ display:none !important; }
  .nav-actions .mode-toggle{
    min-width:42px !important;
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
  }
  .nav-actions .mode-toggle .mode-text{ display:none !important; }
  .burger{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
  }

  /* theme cord sits cleaner near the nav on phones */
  .pull-cord{
    top:8px !important;
    right:-6px !important;
    width:90px !important;
    height:260px !important;
    transform:scale(.82) !important;
    transform-origin:top right !important;
  }
  .cord-svg{ height:238px !important; }
  .cord-hint{
    top:238px !important;
    font-size:8px !important;
    letter-spacing:.2em !important;
  }

  /* text / spacing polish */
  .section{ padding:54px 0 !important; }
  .hero{ padding-top:124px !important; }
  .v22-hero-grid,
  .v22-two,
  .contact-wrap,
  .v25-contact-grid,
  .v24-micro-grid,
  .v22-service-composition,
  .page-hero,
  .division,
  .services-list,
  .grid-3,
  .grid-4,
  .process,
  .stats{
    gap:20px !important;
  }
  .v22-copy,
  .v72-eco-side,
  .section-head p,
  .lead,
  .page-hero p,
  .v27-service-intro,
  .v74-curtain-text p{
    max-width:none !important;
  }
  h1, h2, h3, p, li, .lead, .btn, .menu a, .v27-acc-title, .v22-video-content h3{
    text-wrap:pretty;
  }
  .v24-eco-item,
  .v27-acc-item,
  .v22-video,
  .v22-signal-board,
  .v74-curtain-panel,
  .contact-card,
  .form-card,
  .card,
  .step,
  .service,
  .division,
  .stat{
    min-width:0 !important;
  }
  .v24-eco-item h3,
  .v27-acc-title,
  .v22-video-content h3,
  .division h3,
  .service h3{
    overflow-wrap:anywhere;
  }
}

@media (max-width: 480px){
  .nav{ width:calc(100% - 12px) !important; }
  .nav-inner{ padding:9px 10px !important; }
  .pull-cord{
    right:-10px !important;
    transform:scale(.76) !important;
  }
  .menu{ top:80px !important; }
  h1{ line-height:.95 !important; }
  h2{ line-height:.98 !important; }
}


/* ===== v176: real mobile fix — cord, menu, text, blocks ===== */
/* Desktop remains untouched. These overrides only affect phone/tablet width. */

@media (max-width: 760px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Header: stable and readable */
  .nav{
    position:fixed !important;
    left:50% !important;
    top:8px !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    transform:translateX(-50%) !important;
    border-radius:18px !important;
    z-index:9000 !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(30,34,38,.10) !important;
    box-shadow:0 18px 46px rgba(24,28,32,.14) !important;
    backdrop-filter:blur(18px) !important;
  }
  body.dark-theme .nav{
    background:rgba(16,18,20,.96) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
  .nav-inner{
    height:64px !important;
    min-height:64px !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }
  .brand{
    min-width:auto !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
  }
  .brand-mark{
    width:auto !important;
    min-width:62px !important;
    height:34px !important;
    padding:0 12px !important;
    font-size:12px !important;
    letter-spacing:.24em !important;
    white-space:nowrap !important;
  }
  .brand-name{
    display:none !important;
  }
  .nav-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
    gap:7px !important;
  }
  .nav-actions .btn.light{
    display:none !important;
  }
  .nav-actions .mode-toggle,
  .burger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:999px !important;
  }
  .nav-actions .mode-toggle .mode-text{
    display:none !important;
  }
  .burger{
    flex:0 0 42px !important;
  }

  /* Mobile burger menu: solid, above page, not transparent over hero text */
  .menu{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:84px !important;
    width:calc(100vw - 32px) !important;
    max-width:420px !important;
    transform:translateX(-50%) !important;
    display:none !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:14px !important;
    border-radius:22px !important;
    background:#ffffff !important;
    border:1px solid rgba(28,32,36,.10) !important;
    box-shadow:0 28px 72px rgba(18,22,26,.26) !important;
    backdrop-filter:none !important;
    z-index:9300 !important;
  }
  .menu.open{
    display:flex !important;
  }
  body.dark-theme .menu{
    background:#111315 !important;
    border-color:rgba(255,255,255,.12) !important;
  }
  .menu a{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:13px 16px !important;
    border-radius:999px !important;
    font-size:15px !important;
    line-height:1.15 !important;
    text-align:center !important;
    color:#25292d !important;
    background:rgba(245,245,242,.92) !important;
    letter-spacing:.015em !important;
  }
  .menu a.active,
  .menu a[aria-current="page"]{
    background:#f0f0ec !important;
    color:#111315 !important;
    font-weight:500 !important;
  }
  body.dark-theme .menu a{
    background:rgba(255,255,255,.06) !important;
    color:#f4f1ec !important;
  }
  body.dark-theme .menu a.active,
  body.dark-theme .menu a[aria-current="page"]{
    background:rgba(255,255,255,.12) !important;
    color:#ffffff !important;
  }

  /* Pull cord: do not shrink into a tiny broken piece */
  .pull-cord{
    top:0 !important;
    right:4px !important;
    width:96px !important;
    height:280px !important;
    transform:none !important;
    transform-origin:top right !important;
    z-index:9200 !important;
    pointer-events:none !important;
  }
  .pull-cord .cord-anchor,
  .pull-cord .cord-svg,
  .pull-cord .cord-hint{
    pointer-events:none !important;
  }
  .pull-cord .cord-handle{
    pointer-events:auto !important;
  }
  .cord-svg{
    top:0 !important;
    height:270px !important;
    width:96px !important;
  }
  .cord-anchor{
    top:0 !important;
    width:10px !important;
    height:18px !important;
  }
  .cord-hint{
    top:218px !important;
    font-size:8px !important;
    letter-spacing:.18em !important;
    opacity:.38 !important;
  }

  /* Main page spacing so text doesn't swim under the nav */
  main{
    overflow:hidden !important;
  }
  .container{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
  }
  .hero,
  .v22-hero,
  .page-hero{
    padding-top:126px !important;
    min-height:auto !important;
  }
  .section{
    padding:54px 0 !important;
  }

  /* Typography: prevent giant broken lines and overlap */
  h1,
  .v22-hero h1,
  .page-hero h1{
    font-size:clamp(38px, 11.2vw, 58px) !important;
    line-height:.96 !important;
    letter-spacing:-.055em !important;
    max-width:100% !important;
  }
  h2{
    font-size:clamp(30px, 8.8vw, 44px) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
  }
  h3{
    font-size:clamp(22px, 6vw, 30px) !important;
    line-height:1.08 !important;
  }
  p,
  li,
  .lead,
  .text-block,
  .section-head p,
  .v22-copy p,
  .v72-eco-side p,
  .v22-signal-board p{
    font-size:16px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }
  .eyebrow,
  .kicker{
    font-size:11px !important;
    line-height:1.3 !important;
    letter-spacing:.34em !important;
    word-break:normal !important;
  }
  h1, h2, h3, p, li, .lead, .v27-acc-title, .v22-video-content h3{
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto !important;
  }

  /* Layout: force clean single-column flow on mobile */
  .v22-hero-grid,
  .v22-two,
  .v24-eco-head,
  .v22-service-composition,
  .v24-micro-grid,
  .v22-motion-map,
  .contact-wrap,
  .grid-3,
  .grid-4,
  .process,
  .services-list,
  .stats,
  .division{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .v22-hero-copy,
  .v22-signal-board,
  .v22-copy,
  .v22-service-title,
  .v27-accordion,
  .v24-micro-title,
  .v24-micro-slot,
  .v22-video,
  .contact-card,
  .form-card,
  .card,
  .dark-card,
  .service,
  .division,
  .step,
  .stat{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Growth map / signal board: stop text/lines from colliding */
  .v22-signal-board{
    min-height:auto !important;
    padding:22px 18px !important;
    overflow:hidden !important;
  }
  .v22-signal-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px 10px !important;
  }
  .v22-signal-grid span{
    min-width:0 !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }
  .v22-board-orbit,
  .v23-orbit-cluster,
  .v24-eco-orbit,
  .orbit,
  .sun-orbit{
    opacity:.32 !important;
    pointer-events:none !important;
    transform:none !important;
  }

  /* Ecosystem cards and game */
  .v24-eco-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .v24-eco-item,
  .v72-tic.v72-tic-inline{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    padding:22px 0 !important;
    border-right:0 !important;
    min-height:auto !important;
  }
  .v72-tic-inline .v72-tic-board,
  .v72-tic-inline .v72-tic-score{
    max-width:240px !important;
  }

  /* Process blocks */
  .step,
  .service,
  .card,
  .dark-card{
    padding:26px 22px !important;
    border-radius:22px !important;
  }
}

@media (max-width: 420px){
  .nav{
    width:calc(100vw - 12px) !important;
  }
  .nav-inner{
    padding:0 8px !important;
  }
  .brand-mark{
    min-width:58px !important;
    padding:0 10px !important;
    letter-spacing:.20em !important;
  }
  .nav-actions .mode-toggle,
  .burger{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }
  .pull-cord{
    right:0 !important;
    width:88px !important;
  }
  .cord-svg{
    width:88px !important;
  }
  .hero,
  .v22-hero,
  .page-hero{
    padding-top:118px !important;
  }
}


/* ===== v177: mobile layout repair after v176 ===== */
@media (max-width: 760px){
  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* --- header --- */
  .nav{
    position:fixed !important;
    left:50% !important;
    top:10px !important;
    transform:translateX(-50%) !important;
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    border-radius:20px !important;
    z-index:9000 !important;
    background:rgba(250,249,246,.96) !important;
    border:1px solid rgba(30,34,38,.10) !important;
    box-shadow:0 18px 44px rgba(24,28,32,.14) !important;
    backdrop-filter:blur(16px) !important;
  }
  body.dark-theme .nav{
    background:rgba(18,20,22,.94) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
  .nav-inner{
    height:66px !important;
    min-height:66px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    gap:10px !important;
    overflow:hidden !important;
  }
  .brand-mark{
    width:auto !important;
    min-width:72px !important;
    height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    font-size:12px !important;
    letter-spacing:.25em !important;
  }
  .brand-name{
    display:none !important;
  }
  .menu{
    position:fixed !important;
    left:50% !important;
    top:84px !important;
    transform:translateX(-50%) !important;
    width:calc(100vw - 24px) !important;
    max-width:430px !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:14px !important;
    border-radius:22px !important;
    background:#ffffff !important;
    border:1px solid rgba(28,32,36,.10) !important;
    box-shadow:0 26px 72px rgba(18,22,26,.22) !important;
    z-index:9100 !important;
  }
  .menu.open{ display:flex !important; }
  body.dark-theme .menu{
    background:#111315 !important;
    border-color:rgba(255,255,255,.12) !important;
  }
  .menu a{
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 16px !important;
    text-align:center !important;
    font-size:15px !important;
    line-height:1.15 !important;
    border-radius:999px !important;
    background:rgba(244,244,240,.96) !important;
    color:#24282c !important;
  }
  .menu a.active,
  .menu a[aria-current="page"]{
    background:#ecece8 !important;
    color:#141618 !important;
    font-weight:500 !important;
  }
  body.dark-theme .menu a{
    background:rgba(255,255,255,.06) !important;
    color:#f4f1ec !important;
  }
  body.dark-theme .menu a.active,
  body.dark-theme .menu a[aria-current="page"]{
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
  }
  .nav-actions{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
  }
  .nav-actions .btn.light{ display:none !important; }
  .nav-actions .mode-toggle,
  .burger{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .nav-actions .mode-toggle .mode-text{ display:none !important; }

  /* --- mobile rope: restore original feeling, tied to the theme button --- */
  .pull-cord{
    position:fixed !important;
    left:0 !important;
    right:auto !important;
    top:0 !important;
    width:100vw !important;
    height:230px !important;
    pointer-events:none !important;
    overflow:visible !important;
    z-index:9150 !important;
  }
  .pull-cord .cord-anchor,
  .pull-cord .cord-svg,
  .pull-cord .cord-hint{
    pointer-events:none !important;
  }
  .pull-cord .cord-handle{
    pointer-events:auto !important;
  }
  .cord-anchor{
    position:fixed !important;
  }
  .cord-svg{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:100vw !important;
    height:230px !important;
    overflow:visible !important;
  }
  .cord-hint{
    display:none !important;
  }

  /* --- page spacing --- */
  main{ overflow:hidden !important; }
  .container{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
  }
  .hero,
  .v22-hero,
  .page-hero{
    padding-top:122px !important;
    min-height:auto !important;
  }
  .section{ padding:52px 0 !important; }

  /* --- typography --- */
  h1,
  .v22-hero h1,
  .page-hero h1{
    font-size:clamp(34px,10.8vw,56px) !important;
    line-height:.96 !important;
    letter-spacing:-.05em !important;
  }
  h2{ font-size:clamp(28px,8vw,40px) !important; line-height:1 !important; }
  h3{ font-size:clamp(24px,6.2vw,32px) !important; line-height:1.06 !important; }
  p, li, .lead, .section-head p, .v22-copy p, .v22-signal-board p{
    font-size:15px !important;
    line-height:1.55 !important;
  }
  .eyebrow,.kicker{ font-size:11px !important; letter-spacing:.28em !important; }

  /* --- broad mobile stacking --- */
  .v22-hero-grid,
  .v22-two,
  .v24-eco-head,
  .v22-service-composition,
  .v24-micro-grid,
  .v22-motion-map,
  .contact-wrap,
  .grid-3,
  .grid-4,
  .process,
  .services-list,
  .stats,
  .division{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .v22-hero-copy,
  .v22-signal-board,
  .v22-copy,
  .v22-service-title,
  .v27-accordion,
  .v24-micro-title,
  .v24-micro-slot,
  .v22-video,
  .contact-card,
  .form-card,
  .card,
  .dark-card,
  .service,
  .division,
  .step,
  .stat{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-column:1 / -1 !important;
    grid-row:auto !important;
  }

  /* --- growth map / signal board cleanup --- */
  .v22-signal-board{
    min-height:auto !important;
    padding:20px 16px !important;
    border-radius:0 0 54px 0 !important;
    overflow:hidden !important;
  }
  .v22-board-head{
    gap:10px !important;
    font-size:11px !important;
    letter-spacing:.22em !important;
  }
  .v22-board-line{ margin:14px 0 16px !important; }
  .v22-signal-grid{
    max-width:none !important;
    gap:10px !important;
  }
  .v22-signal-grid span{
    min-height:56px !important;
    padding:10px 0 !important;
    font-size:19px !important;
    line-height:1.1 !important;
  }
  .v22-signal-board p{
    position:static !important;
    left:auto !important;
    bottom:auto !important;
    max-width:none !important;
    margin:16px 0 0 !important;
  }
  .v22-board-orbit{
    width:132px !important;
    height:132px !important;
    right:8px !important;
    bottom:68px !important;
    opacity:.34 !important;
  }
  .v22-signal-board::before{
    width:260px !important;
    height:260px !important;
    right:-120px !important;
    bottom:-120px !important;
    opacity:.55 !important;
  }
  .v22-signal-board::after{
    width:120px !important;
    height:120px !important;
    left:20px !important;
    top:86px !important;
    opacity:.45 !important;
  }

  /* --- ecosystem + game --- */
  .v24-eco-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .v24-eco-item:nth-child(1),
  .v24-eco-item:nth-child(2),
  .v24-eco-item:nth-child(3),
  .v24-eco-item:nth-child(4),
  .v24-eco-item:nth-child(5),
  .v72-tic.v72-tic-inline{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    border-right:none !important;
    border-left:none !important;
    padding:22px 0 !important;
    min-height:auto !important;
  }
  .v24-eco-item:nth-child(5){ padding-left:0 !important; }
  .v24-eco-item h3{
    font-size:clamp(30px, 12vw, 58px) !important;
    line-height:.95 !important;
  }
  .v24-eco-item p{
    font-size:15px !important;
    line-height:1.5 !important;
  }
  .v24-eco-orbit{
    width:140px !important;
    height:140px !important;
    right:8px !important;
    bottom:14px !important;
    opacity:.28 !important;
  }
  .v72-tic.v72-tic-inline{
    padding-top:24px !important;
  }
  .v72-tic-inline .v72-tic-board,
  .v72-tic-inline .v72-tic-score{
    max-width:240px !important;
  }

  /* --- accordions / cards --- */
  .v27-acc-item,
  .service,
  .card,
  .dark-card,
  .step{
    padding:24px 20px !important;
    border-radius:20px !important;
  }
  .v27-acc-head,
  .v27-acc-trigger{
    gap:14px !important;
  }
  .v27-acc-trigger{ padding:18px 0 !important; }
}

@media (max-width: 420px){
  .nav{ width:calc(100vw - 14px) !important; }
  .nav-inner{ padding:0 10px !important; }
  .brand-mark{ min-width:70px !important; }
  .menu{ width:calc(100vw - 18px) !important; }
  .hero, .v22-hero, .page-hero{ padding-top:116px !important; }
  .pull-cord{ height:220px !important; }
  .cord-svg{ height:220px !important; }
}


/* ===== v178: mobile theme fix ===== */
/* On mobile the rope stays visual/decorative, and the theme button itself is the reliable tap target.
   Desktop rope behavior is untouched. */
@media (max-width: 760px){
  [data-theme-toggle]{
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  .nav-actions [data-theme-toggle]{
    position:relative !important;
    z-index:9305 !important;
  }

  .pull-cord{
    pointer-events:none !important;
    z-index:9200 !important;
  }
  .pull-cord .cord-handle,
  .pull-cord .cord-svg,
  .pull-cord .cord-anchor,
  .pull-cord .cord-hint{
    pointer-events:none !important;
  }

  /* Make it visually clear that the cord comes from the theme button, but don't let it block taps */
  .cord-line{
    stroke:rgba(80,86,92,.44) !important;
  }
  .cord-knob-svg{
    opacity:.82 !important;
  }
  body.dark-theme .cord-line{
    stroke:rgba(235,238,241,.42) !important;
  }
}


/* ===== v179: mobile no-cord + stable nav hover + smooth burger menu ===== */
@media (max-width: 760px){
  /* Remove theme cord completely on mobile */
  .pull-cord,
  .pull-cord *,
  .cord-anchor,
  .cord-svg,
  .cord-line,
  .cord-handle,
  .cord-hint,
  .cord-knob-svg{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Theme button is the mobile switch */
  [data-theme-toggle]{
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  /* Stop top-row items from flying away on hover/touch */
  .nav .brand-mark,
  .nav .mode-toggle,
  .nav .burger,
  .nav .flash-icon,
  .nav .mode-icon,
  .nav .brand-mark.icon-reacting,
  .nav .mode-toggle.icon-reacting,
  .nav .burger.icon-reacting,
  .nav .flash-icon.icon-reacting,
  .nav .mode-icon.icon-reacting{
    transform:none !important;
    translate:none !important;
  }

  .nav .brand-mark,
  .nav .mode-toggle,
  .nav .burger{
    transition:
      background .24s ease,
      border-color .24s ease,
      box-shadow .24s ease,
      opacity .24s ease !important;
  }

  /* Smooth burger menu animation */
  .menu{
    display:flex !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(-10px) scale(.975) !important;
    transition:
      opacity .32s cubic-bezier(.22,1,.36,1),
      transform .32s cubic-bezier(.22,1,.36,1),
      visibility .32s step-end !important;
    will-change:opacity, transform;
  }

  .menu.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) scale(1) !important;
    transition:
      opacity .34s cubic-bezier(.22,1,.36,1),
      transform .34s cubic-bezier(.22,1,.36,1),
      visibility 0s step-start !important;
  }

  .menu::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:28px;
    background:rgba(255,255,255,.35);
    filter:blur(18px);
    z-index:-1;
    opacity:0;
    transition:opacity .34s ease;
  }
  .menu.open::before{
    opacity:1;
  }

  .menu a{
    opacity:0;
    transform:translateY(7px);
    transition:
      opacity .28s cubic-bezier(.22,1,.36,1),
      transform .28s cubic-bezier(.22,1,.36,1),
      background .24s ease,
      color .24s ease !important;
  }
  .menu.open a{
    opacity:1;
    transform:translateY(0);
  }
  .menu.open a:nth-child(1){transition-delay:.03s;}
  .menu.open a:nth-child(2){transition-delay:.06s;}
  .menu.open a:nth-child(3){transition-delay:.09s;}
  .menu.open a:nth-child(4){transition-delay:.12s;}
  .menu.open a:nth-child(5){transition-delay:.15s;}

  /* Slightly cleaner nav now that cord is gone */
  .nav{
    z-index:9300 !important;
  }
  .nav-inner{
    overflow:visible !important;
  }
  .nav-actions{
    overflow:visible !important;
  }
}

@media (max-width: 420px){
  .pull-cord,
  .pull-cord *{
    display:none !important;
  }
}


/* ===== v180: HARD mobile/tablet fix — no cord, stable nav, animated menu ===== */
/* Works also in browser responsive preview where CSS width may be 768-1024. */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  /* 1) Cord must be completely gone on mobile/tablet */
  body .pull-cord,
  body .pull-cord *,
  body .cord-anchor,
  body .cord-svg,
  body .cord-line,
  body .cord-handle,
  body .cord-hint,
  body .cord-knob-svg,
  body .cord-knob-hit-glow{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:0 !important;
    height:0 !important;
    transform:none !important;
  }

  /* Theme switch is now the actual mobile/touch control */
  body [data-theme-toggle]{
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  /* 2) Top bar must not fly away on hover / responsive preview */
  body .nav,
  body .nav *,
  body .nav .brand-mark,
  body .nav .mode-toggle,
  body .nav .burger,
  body .nav .flash-icon,
  body .nav .mode-icon{
    --icon-mx:0px !important;
    --icon-my:0px !important;
    --icon-power:0 !important;
  }

  body .nav .brand-mark,
  body .nav .mode-toggle,
  body .nav .burger,
  body .nav .flash-icon,
  body .nav .mode-icon,
  body .nav .brand-mark.icon-reacting,
  body .nav .mode-toggle.icon-reacting,
  body .nav .burger.icon-reacting,
  body .nav .flash-icon.icon-reacting,
  body .nav .mode-icon.icon-reacting{
    transform:none !important;
    translate:none !important;
  }

  body .nav{
    z-index:9500 !important;
    overflow:visible !important;
  }
  body .nav-inner,
  body .nav-actions{
    overflow:visible !important;
  }

  /* 3) Smooth burger menu: never display:none; animate opacity/scale/slide */
  body .nav .menu{
    display:flex !important;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:84px !important;
    width:calc(100vw - 28px) !important;
    max-width:430px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:14px !important;
    border-radius:22px !important;
    background:#fff !important;
    border:1px solid rgba(28,32,36,.10) !important;
    box-shadow:0 28px 74px rgba(18,22,26,.26) !important;
    z-index:9600 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(-12px) scale(.965) !important;
    transform-origin:50% 0 !important;
    transition:
      opacity .34s cubic-bezier(.22,1,.36,1),
      transform .34s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .34s !important;
    will-change:opacity, transform;
    backdrop-filter:none !important;
  }

  body.dark-theme .nav .menu{
    background:#111315 !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  body .nav .menu.open,
  body.mobile-menu-open .nav .menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) scale(1) !important;
    transition:
      opacity .36s cubic-bezier(.22,1,.36,1),
      transform .36s cubic-bezier(.22,1,.36,1),
      visibility 0s linear 0s !important;
  }

  body .nav .menu a{
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:
      opacity .28s cubic-bezier(.22,1,.36,1),
      transform .28s cubic-bezier(.22,1,.36,1),
      background .22s ease,
      color .22s ease !important;
  }

  body .nav .menu.open a,
  body.mobile-menu-open .nav .menu a{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  body .nav .menu.open a:nth-child(1),
  body.mobile-menu-open .nav .menu a:nth-child(1){ transition-delay:.03s !important; }
  body .nav .menu.open a:nth-child(2),
  body.mobile-menu-open .nav .menu a:nth-child(2){ transition-delay:.06s !important; }
  body .nav .menu.open a:nth-child(3),
  body.mobile-menu-open .nav .menu a:nth-child(3){ transition-delay:.09s !important; }
  body .nav .menu.open a:nth-child(4),
  body.mobile-menu-open .nav .menu a:nth-child(4){ transition-delay:.12s !important; }
  body .nav .menu.open a:nth-child(5),
  body.mobile-menu-open .nav .menu a:nth-child(5){ transition-delay:.15s !important; }

  body .nav .menu a{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 16px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:15px !important;
    line-height:1.15 !important;
    background:rgba(244,244,240,.96) !important;
    color:#24282c !important;
  }
  body.dark-theme .nav .menu a{
    background:rgba(255,255,255,.06) !important;
    color:#f4f1ec !important;
  }
}


/* ===== v181: mobile flashlight button + dark animation adaptation ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  /* flashlight button must be readable/tappable in the compact mobile nav */
  .nav-actions [data-flashlight-toggle]{
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    position:relative !important;
    z-index:9510 !important;
  }
  .nav-actions [data-flashlight-toggle] .flash-icon{
    width:18px !important;
    height:18px !important;
    transform:none !important;
  }

  /* when flashlight mode opens, keep nav usable and don't let the dark scene crush the phone layout */
  body.flashlight-mode{
    overflow:hidden !important;
  }

  body.flashlight-mode .nav{
    z-index:9700 !important;
    background:rgba(10,12,14,.72) !important;
    border-color:rgba(255,255,255,.13) !important;
    box-shadow:0 18px 54px rgba(0,0,0,.38) !important;
  }

  body.flashlight-mode .brand-mark,
  body.flashlight-mode .mode-toggle,
  body.flashlight-mode .burger{
    border-color:rgba(255,255,255,.18) !important;
    color:#f5f2ec !important;
    background:rgba(255,255,255,.08) !important;
  }

  body.flashlight-mode .flashlight-layer{
    position:fixed !important;
    inset:0 !important;
    opacity:1 !important;
    z-index:9400 !important;
    pointer-events:none !important;
    background:
      radial-gradient(circle 180px at var(--mx,50vw) var(--my,46vh),
        rgba(255,255,255,.20) 0%,
        rgba(255,245,215,.115) 20%,
        rgba(255,255,255,.035) 40%,
        rgba(0,0,0,.18) 58%,
        rgba(0,0,0,.84) 82%,
        rgba(0,0,0,.98) 100%),
      radial-gradient(circle 520px at var(--mx,50vw) var(--my,46vh),
        rgba(255,244,212,.09) 0%,
        rgba(255,255,255,.026) 28%,
        rgba(0,0,0,.38) 62%,
        rgba(0,0,0,.92) 100%) !important;
    backdrop-filter:none !important;
  }

  /* dark beautiful scene: fit inside mobile viewport */
  body.flashlight-mode .smpl-hidden-system{
    position:fixed !important;
    inset:0 !important;
    z-index:9300 !important;
    opacity:1 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  body.flashlight-mode .smpl-system-core{
    left:50% !important;
    top:50% !important;
    width:min(62vw, 280px) !important;
    height:min(62vw, 280px) !important;
    transform:translate(-50%, -50%) !important;
  }

  body.flashlight-mode .smpl-system-logo-wrap{
    width:100% !important;
    height:100% !important;
  }

  body.flashlight-mode .smpl-system-logo{
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }

  body.flashlight-mode .smpl-system-svg{
    width:150vw !important;
    height:96vh !important;
    left:50% !important;
    top:52% !important;
    transform:translate(-50%, -50%) scale(.92) !important;
    opacity:.72 !important;
  }

  body.flashlight-mode .smpl-system-grid{
    opacity:.32 !important;
    background-size:34px 34px !important;
  }

  body.flashlight-mode .smpl-system-label{
    font-size:10px !important;
    letter-spacing:.20em !important;
    opacity:.78 !important;
    transform:none !important;
  }

  body.flashlight-mode .smpl-system-label.strategy{ left:8vw !important; top:28vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:8vw !important; top:30vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:9vw !important; bottom:28vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:9vw !important; bottom:26vh !important; }
  body.flashlight-mode .smpl-system-label.content{ left:50% !important; top:18vh !important; transform:translateX(-50%) !important; }
  body.flashlight-mode .smpl-system-label.funnels{ left:50% !important; bottom:17vh !important; transform:translateX(-50%) !important; }

  /* mobile cursor is not visible, so put the light beam near center unless finger updates --mx/--my */
  body.flashlight-mode.mobile-flashlight-touch{
    --mx:50vw;
    --my:48vh;
  }

  /* smooth dark scene appearance */
  body.flashlight-mode .flashlight-layer,
  body.flashlight-mode .smpl-hidden-system{
    animation:v181MobileFlashIn .48s cubic-bezier(.22,1,.36,1) both;
  }

  @keyframes v181MobileFlashIn{
    0%{ opacity:0; filter:blur(10px); }
    100%{ opacity:1; filter:blur(0); }
  }

  /* menu must not stay open above flashlight */
  body.flashlight-mode .menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-core{
    width:min(70vw, 240px) !important;
    height:min(70vw, 240px) !important;
  }
  body.flashlight-mode .smpl-system-label{
    font-size:9px !important;
  }
}


/* ===== v182: mobile flashlight = internal centered light, tap enlarges ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode{
    overflow:hidden !important;
    --mobile-light-size: 150px;
    --mobile-light-glow: 360px;
    --mobile-light-core: .18;
    --mobile-light-bg: .96;
    --mx:50vw !important;
    --my:50vh !important;
  }

  body.flashlight-mode.mobile-flashlight-level-1{
    --mobile-light-size: 150px;
    --mobile-light-glow: 360px;
    --mobile-light-core: .18;
    --mobile-light-bg: .96;
  }
  body.flashlight-mode.mobile-flashlight-level-2{
    --mobile-light-size: 230px;
    --mobile-light-glow: 560px;
    --mobile-light-core: .26;
    --mobile-light-bg: .92;
  }
  body.flashlight-mode.mobile-flashlight-level-3{
    --mobile-light-size: 330px;
    --mobile-light-glow: 760px;
    --mobile-light-core: .34;
    --mobile-light-bg: .86;
  }

  /* No mouse-follow on phone: light is fixed inside the scene */
  body.flashlight-mode .flashlight-layer{
    position:fixed !important;
    inset:0 !important;
    opacity:1 !important;
    z-index:9400 !important;
    pointer-events:none !important;
    background:
      radial-gradient(circle var(--mobile-light-size) at 50% 50%,
        rgba(255,255,255,var(--mobile-light-core)) 0%,
        rgba(255,246,218,calc(var(--mobile-light-core) * .72)) 28%,
        rgba(255,255,255,.045) 48%,
        rgba(0,0,0,.18) 66%,
        rgba(0,0,0,var(--mobile-light-bg)) 100%),
      radial-gradient(circle var(--mobile-light-glow) at 50% 50%,
        rgba(255,244,212,.11) 0%,
        rgba(255,255,255,.035) 30%,
        rgba(0,0,0,.36) 66%,
        rgba(0,0,0,.96) 100%),
      #020304 !important;
    transition:background .42s cubic-bezier(.22,1,.36,1), opacity .32s ease !important;
    backdrop-filter:none !important;
  }

  body.flashlight-mode .smpl-hidden-system{
    position:fixed !important;
    inset:0 !important;
    z-index:9300 !important;
    opacity:1 !important;
    overflow:hidden !important;
    transform:none !important;
  }

  /* The scene itself sits in the center light */
  body.flashlight-mode .smpl-system-core{
    left:50% !important;
    top:50% !important;
    width:min(64vw, 280px) !important;
    height:min(64vw, 280px) !important;
    transform:translate(-50%, -50%) scale(calc(.82 + (var(--mobile-light-core) * .55))) !important;
    transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
    opacity:.96 !important;
  }

  body.flashlight-mode .smpl-system-svg{
    width:150vw !important;
    height:96vh !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) scale(calc(.86 + (var(--mobile-light-core) * .34))) !important;
    opacity:.64 !important;
    transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
  }

  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-svg{ opacity:.76 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-svg{ opacity:.88 !important; }

  body.flashlight-mode .smpl-system-grid{
    opacity:.28 !important;
    background-size:34px 34px !important;
  }

  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-grid{ opacity:.38 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-grid{ opacity:.48 !important; }

  body.flashlight-mode .smpl-system-label{
    font-size:10px !important;
    letter-spacing:.20em !important;
    opacity:.62 !important;
    transition:opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1) !important;
  }
  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-label{ opacity:.78 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-label{ opacity:.92 !important; }

  body.flashlight-mode .smpl-system-label.strategy{ left:8vw !important; top:28vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:8vw !important; top:30vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:9vw !important; bottom:28vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:9vw !important; bottom:26vh !important; }
  body.flashlight-mode .smpl-system-label.content{ left:50% !important; top:18vh !important; transform:translateX(-50%) !important; }
  body.flashlight-mode .smpl-system-label.funnels{ left:50% !important; bottom:17vh !important; transform:translateX(-50%) !important; }

  /* hint: tapping dark area increases the light */
  body.flashlight-mode::after{
    content:"tap to expand light";
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:9705;
    pointer-events:none;
    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.46);
    opacity:.78;
    transition:opacity .28s ease;
  }
  body.flashlight-mode.mobile-flashlight-level-3::after{
    opacity:.22;
  }

  /* nav remains above scene */
  body.flashlight-mode .nav{
    z-index:9800 !important;
    background:rgba(8,10,12,.72) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 18px 54px rgba(0,0,0,.40) !important;
  }

  body.flashlight-mode .menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-core{
    width:min(72vw, 245px) !important;
    height:min(72vw, 245px) !important;
  }
  body.flashlight-mode .smpl-system-label{
    font-size:9px !important;
  }
}


/* ===== v183: mobile flashlight centered composition fix ===== */
/* Problem: mobile flashlight scene was too large and shifted/cropped.
   Fix: center all dark-scene elements, contain the logo/scheme, keep light inside. */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode{
    --mx:50vw !important;
    --my:50vh !important;
    background:#020304 !important;
  }

  body.flashlight-mode.mobile-flashlight-level-1{
    --mobile-light-size: 135px;
    --mobile-light-glow: 330px;
    --mobile-logo-size: 176px;
    --mobile-map-scale: .58;
  }
  body.flashlight-mode.mobile-flashlight-level-2{
    --mobile-light-size: 215px;
    --mobile-light-glow: 520px;
    --mobile-logo-size: 198px;
    --mobile-map-scale: .66;
  }
  body.flashlight-mode.mobile-flashlight-level-3{
    --mobile-light-size: 300px;
    --mobile-light-glow: 700px;
    --mobile-logo-size: 218px;
    --mobile-map-scale: .74;
  }

  body.flashlight-mode .flashlight-layer{
    background:
      radial-gradient(circle var(--mobile-light-size) at 50% 50%,
        rgba(255,255,255,.20) 0%,
        rgba(255,246,218,.13) 26%,
        rgba(255,255,255,.045) 48%,
        rgba(0,0,0,.20) 66%,
        rgba(0,0,0,.95) 100%),
      radial-gradient(circle var(--mobile-light-glow) at 50% 50%,
        rgba(255,244,212,.10) 0%,
        rgba(255,255,255,.028) 34%,
        rgba(0,0,0,.44) 68%,
        rgba(0,0,0,.98) 100%),
      #020304 !important;
  }

  body.flashlight-mode .smpl-hidden-system{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    overflow:hidden !important;
    transform:none !important;
    opacity:1 !important;
  }

  body.flashlight-mode .smpl-system-core{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    width:var(--mobile-logo-size) !important;
    height:var(--mobile-logo-size) !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
    opacity:.96 !important;
    display:grid !important;
    place-items:center !important;
  }

  body.flashlight-mode .smpl-system-logo-wrap{
    width:100% !important;
    height:100% !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
  }

  body.flashlight-mode .smpl-system-logo{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    opacity:.88 !important;
  }

  body.flashlight-mode .core-dot{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
  }

  body.flashlight-mode .smpl-system-svg{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    width:118vw !important;
    max-width:118vw !important;
    height:72vh !important;
    max-height:72vh !important;
    transform:translate(-50%, -50%) scale(var(--mobile-map-scale)) !important;
    transform-origin:center !important;
    opacity:.54 !important;
    overflow:visible !important;
  }

  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-svg{ opacity:.66 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-svg{ opacity:.78 !important; }

  body.flashlight-mode .smpl-system-grid{
    position:fixed !important;
    inset:0 !important;
    opacity:.22 !important;
    transform:none !important;
    background-size:28px 28px !important;
  }

  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-grid{ opacity:.30 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-grid{ opacity:.38 !important; }

  /* Labels compactly around the centered light — no cropping at edges */
  body.flashlight-mode .smpl-system-label{
    position:fixed !important;
    font-size:9px !important;
    letter-spacing:.18em !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    max-width:34vw !important;
    white-space:nowrap !important;
    text-align:center !important;
    opacity:.68 !important;
    transform:none !important;
  }

  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-label{ opacity:.82 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-label{ opacity:.96 !important; }

  body.flashlight-mode .smpl-system-label.content{
    left:50% !important;
    top:19vh !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{
    left:7vw !important;
    top:31vh !important;
    right:auto !important;
    bottom:auto !important;
  }
  body.flashlight-mode .smpl-system-label.traffic{
    right:7vw !important;
    top:32vh !important;
    left:auto !important;
    bottom:auto !important;
  }
  body.flashlight-mode .smpl-system-label.ai{
    left:8vw !important;
    bottom:31vh !important;
    right:auto !important;
    top:auto !important;
  }
  body.flashlight-mode .smpl-system-label.scale{
    right:8vw !important;
    bottom:30vh !important;
    left:auto !important;
    top:auto !important;
  }
  body.flashlight-mode .smpl-system-label.funnels{
    left:50% !important;
    bottom:19vh !important;
    right:auto !important;
    top:auto !important;
    transform:translateX(-50%) !important;
  }

  body.flashlight-mode::after{
    content:"tap to expand light" !important;
    bottom:18px !important;
    font-size:9px !important;
    opacity:.48 !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode.mobile-flashlight-level-1{
    --mobile-logo-size: 158px;
    --mobile-map-scale: .50;
  }
  body.flashlight-mode.mobile-flashlight-level-2{
    --mobile-logo-size: 180px;
    --mobile-map-scale: .58;
  }
  body.flashlight-mode.mobile-flashlight-level-3{
    --mobile-logo-size: 198px;
    --mobile-map-scale: .66;
  }

  body.flashlight-mode .smpl-system-svg{
    width:126vw !important;
    height:68vh !important;
  }

  body.flashlight-mode .smpl-system-label{
    font-size:8px !important;
    letter-spacing:.16em !important;
    padding:7px 10px !important;
    max-width:38vw !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top:17vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left:5vw !important; top:30vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:5vw !important; top:31vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:6vw !important; bottom:30vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:6vw !important; bottom:29vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom:17vh !important; }
}


/* ===== v184: mobile flashlight reacts to phone tilt ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  :root{
    --mobile-tilt-x:0px;
    --mobile-tilt-y:0px;
    --mobile-tilt-rx:0deg;
    --mobile-tilt-ry:0deg;
  }

  body.flashlight-mode .flashlight-layer{
    background:
      radial-gradient(circle var(--mobile-light-size) at calc(50% + var(--mobile-tilt-x)) calc(50% + var(--mobile-tilt-y)),
        rgba(255,255,255,.20) 0%,
        rgba(255,246,218,.13) 26%,
        rgba(255,255,255,.045) 48%,
        rgba(0,0,0,.20) 66%,
        rgba(0,0,0,.95) 100%),
      radial-gradient(circle var(--mobile-light-glow) at calc(50% + var(--mobile-tilt-x)) calc(50% + var(--mobile-tilt-y)),
        rgba(255,244,212,.10) 0%,
        rgba(255,255,255,.028) 34%,
        rgba(0,0,0,.44) 68%,
        rgba(0,0,0,.98) 100%),
      #020304 !important;
  }

  body.flashlight-mode .smpl-system-core{
    transform:
      translate(calc(-50% + var(--mobile-tilt-x) * .34), calc(-50% + var(--mobile-tilt-y) * .28))
      rotateX(var(--mobile-tilt-rx))
      rotateY(var(--mobile-tilt-ry)) !important;
    transform-style:preserve-3d !important;
  }

  body.flashlight-mode .smpl-system-svg{
    transform:
      translate(calc(-50% + var(--mobile-tilt-x) * -.22), calc(-50% + var(--mobile-tilt-y) * -.18))
      scale(var(--mobile-map-scale)) !important;
    transition:opacity .42s ease !important;
  }

  body.flashlight-mode .smpl-system-label.strategy,
  body.flashlight-mode .smpl-system-label.ai{
    transform:translate3d(calc(var(--mobile-tilt-x) * .16), calc(var(--mobile-tilt-y) * .12), 0) !important;
  }

  body.flashlight-mode .smpl-system-label.traffic,
  body.flashlight-mode .smpl-system-label.scale{
    transform:translate3d(calc(var(--mobile-tilt-x) * -.16), calc(var(--mobile-tilt-y) * .12), 0) !important;
  }

  body.flashlight-mode .smpl-system-label.content,
  body.flashlight-mode .smpl-system-label.funnels{
    transform:translateX(-50%) translate3d(calc(var(--mobile-tilt-x) * .08), calc(var(--mobile-tilt-y) * .10), 0) !important;
  }

  body.flashlight-mode::after{
    content:"tilt phone / tap to expand light" !important;
  }

  body.flashlight-mode.mobile-tilt-denied::after{
    content:"tap to expand light" !important;
  }
}


/* ===== v185: cleaner mobile flashlight composition ===== */
/* More symmetrical, less cropped, less crooked. Tilt is softer. */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode{
    --mobile-tilt-x: clamp(-18px, var(--mobile-tilt-x), 18px);
    --mobile-tilt-y: clamp(-16px, var(--mobile-tilt-y), 16px);
  }

  body.flashlight-mode.mobile-flashlight-level-1{
    --mobile-light-size: 128px;
    --mobile-light-glow: 310px;
    --mobile-logo-size: 150px;
    --mobile-map-scale: .46;
  }
  body.flashlight-mode.mobile-flashlight-level-2{
    --mobile-light-size: 205px;
    --mobile-light-glow: 500px;
    --mobile-logo-size: 168px;
    --mobile-map-scale: .52;
  }
  body.flashlight-mode.mobile-flashlight-level-3{
    --mobile-light-size: 285px;
    --mobile-light-glow: 680px;
    --mobile-logo-size: 184px;
    --mobile-map-scale: .58;
  }

  body.flashlight-mode .flashlight-layer{
    background:
      radial-gradient(circle var(--mobile-light-size) at calc(50% + var(--mobile-tilt-x) * .55) calc(50% + var(--mobile-tilt-y) * .45),
        rgba(255,255,255,.18) 0%,
        rgba(255,246,218,.12) 27%,
        rgba(255,255,255,.04) 48%,
        rgba(0,0,0,.23) 67%,
        rgba(0,0,0,.95) 100%),
      radial-gradient(circle var(--mobile-light-glow) at calc(50% + var(--mobile-tilt-x) * .35) calc(50% + var(--mobile-tilt-y) * .30),
        rgba(255,244,212,.09) 0%,
        rgba(255,255,255,.025) 34%,
        rgba(0,0,0,.48) 68%,
        rgba(0,0,0,.985) 100%),
      #020304 !important;
  }

  body.flashlight-mode .smpl-system-core{
    left:50% !important;
    top:50% !important;
    width:var(--mobile-logo-size) !important;
    height:var(--mobile-logo-size) !important;
    transform:
      translate(calc(-50% + var(--mobile-tilt-x) * .16), calc(-50% + var(--mobile-tilt-y) * .13))
      rotateX(calc(var(--mobile-tilt-rx) * .35))
      rotateY(calc(var(--mobile-tilt-ry) * .35)) !important;
    opacity:.92 !important;
  }

  body.flashlight-mode .smpl-system-logo{
    opacity:.72 !important;
    filter:drop-shadow(0 0 18px rgba(255,255,255,.12)) !important;
  }

  body.flashlight-mode .smpl-system-svg{
    left:50% !important;
    top:50% !important;
    width:106vw !important;
    height:62vh !important;
    transform:
      translate(calc(-50% + var(--mobile-tilt-x) * -.08), calc(-50% + var(--mobile-tilt-y) * -.07))
      scale(var(--mobile-map-scale)) !important;
    opacity:.46 !important;
  }

  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-svg{ opacity:.56 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-svg{ opacity:.66 !important; }

  body.flashlight-mode .smpl-system-grid{
    opacity:.18 !important;
  }
  body.flashlight-mode.mobile-flashlight-level-2 .smpl-system-grid{ opacity:.24 !important; }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-grid{ opacity:.30 !important; }

  /* labels pulled inward and made symmetric */
  body.flashlight-mode .smpl-system-label{
    font-size:8px !important;
    letter-spacing:.16em !important;
    padding:7px 11px !important;
    opacity:.62 !important;
    max-width:32vw !important;
    background:rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  body.flashlight-mode .smpl-system-label.content{
    left:50% !important;
    top:12vh !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{
    left:7vw !important;
    top:23vh !important;
  }
  body.flashlight-mode .smpl-system-label.traffic{
    right:7vw !important;
    top:24vh !important;
  }
  body.flashlight-mode .smpl-system-label.ai{
    left:7vw !important;
    bottom:25vh !important;
  }
  body.flashlight-mode .smpl-system-label.scale{
    right:7vw !important;
    bottom:25vh !important;
  }
  body.flashlight-mode .smpl-system-label.funnels{
    left:50% !important;
    bottom:12vh !important;
    transform:translateX(-50%) !important;
  }

  body.flashlight-mode .smpl-system-label.strategy,
  body.flashlight-mode .smpl-system-label.ai,
  body.flashlight-mode .smpl-system-label.traffic,
  body.flashlight-mode .smpl-system-label.scale{
    transform:translate3d(0,0,0) !important;
  }

  body.flashlight-mode::after{
    bottom:14px !important;
    opacity:.36 !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode.mobile-flashlight-level-1{
    --mobile-logo-size: 138px;
    --mobile-map-scale: .42;
  }
  body.flashlight-mode.mobile-flashlight-level-2{
    --mobile-logo-size: 154px;
    --mobile-map-scale: .48;
  }
  body.flashlight-mode.mobile-flashlight-level-3{
    --mobile-logo-size: 170px;
    --mobile-map-scale: .54;
  }

  body.flashlight-mode .smpl-system-svg{
    width:112vw !important;
    height:58vh !important;
  }

  body.flashlight-mode .smpl-system-label{
    font-size:7.5px !important;
    letter-spacing:.14em !important;
    padding:6px 9px !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top:11vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ top:23vh !important; left:6vw !important; }
  body.flashlight-mode .smpl-system-label.traffic{ top:23vh !important; right:6vw !important; }
  body.flashlight-mode .smpl-system-label.ai{ bottom:25vh !important; left:6vw !important; }
  body.flashlight-mode .smpl-system-label.scale{ bottom:25vh !important; right:6vw !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom:11vh !important; }
}


/* ===== v186: dark theme button contrast fix ===== */
/* Fix for buttons like "make eyes dancing" becoming unreadable in dark theme. */
body.dark-theme .btn.ghost,
body.dark-theme .eyes-dance-toggle{
  background: rgba(255,255,255,.08) !important;
  color: #f4f6f8 !important;
  border-color: rgba(255,255,255,.18) !important;
}
body.dark-theme .btn.ghost:hover,
body.dark-theme .eyes-dance-toggle:hover{
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
}
body.dark-theme .eyes-dance-toggle.is-active{
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
/* Keep regular filled buttons readable too */
body.dark-theme .footer .btn:not(.ghost):not(.eyes-dance-toggle){
  background:#f2f0ec;
  color:#111315;
}


/* ===== v188: mobile flashlight true center fix =====
   Fixes the crooked mobile flashlight scene where the SMPL ring shifts to the bottom-right.
   On mobile we keep the scene centered and clean, with very mild response instead of broken offsets. */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode{
    --mobile-light-size: 172px;
    --mobile-light-glow: 380px;
    --mobile-core-size: 168px;
    --mobile-map-scale: .52;
  }

  body.flashlight-mode.mobile-flashlight-level-1{
    --mobile-light-size: 146px;
    --mobile-light-glow: 320px;
    --mobile-core-size: 146px;
    --mobile-map-scale: .46;
  }
  body.flashlight-mode.mobile-flashlight-level-2{
    --mobile-light-size: 188px;
    --mobile-light-glow: 430px;
    --mobile-core-size: 168px;
    --mobile-map-scale: .52;
  }
  body.flashlight-mode.mobile-flashlight-level-3{
    --mobile-light-size: 236px;
    --mobile-light-glow: 520px;
    --mobile-core-size: 186px;
    --mobile-map-scale: .58;
  }

  /* keep light centered; slight drift only inside the gradients */
  body.flashlight-mode .flashlight-layer{
    background:
      radial-gradient(circle var(--mobile-light-size) at calc(50% + var(--mobile-tilt-x, 0px) * .18) calc(50% + var(--mobile-tilt-y, 0px) * .18),
        rgba(255,255,255,.22) 0%,
        rgba(255,247,224,.16) 24%,
        rgba(255,255,255,.08) 40%,
        rgba(255,255,255,.03) 52%,
        rgba(0,0,0,.30) 70%,
        rgba(0,0,0,.98) 100%),
      radial-gradient(circle var(--mobile-light-glow) at 50% 50%,
        rgba(255,245,214,.12) 0%,
        rgba(255,255,255,.05) 26%,
        rgba(0,0,0,.28) 60%,
        rgba(0,0,0,.985) 100%),
      #020304 !important;
  }

  body.flashlight-mode .smpl-hidden-system{
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
  }

  /* main ring/logo stays truly centered */
  body.flashlight-mode .smpl-system-core{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--mobile-core-size) !important;
    height: var(--mobile-core-size) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    opacity: .96 !important;
  }

  body.flashlight-mode .smpl-system-logo-wrap{
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
  }

  body.flashlight-mode .smpl-system-logo{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    opacity: .78 !important;
  }

  body.flashlight-mode .smpl-system-svg{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 100vw !important;
    height: 62vh !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) scale(var(--mobile-map-scale)) !important;
    transform-origin: center center !important;
    opacity: .54 !important;
    overflow: visible !important;
  }
  body.flashlight-mode.mobile-flashlight-level-3 .smpl-system-svg{ opacity: .62 !important; }

  body.flashlight-mode .smpl-system-grid{
    inset: 0 !important;
    opacity: .17 !important;
    transform: none !important;
    background-size: 26px 26px !important;
  }

  /* stable label positions around the centered scene */
  body.flashlight-mode .smpl-system-label{
    position: fixed !important;
    font-size: 8px !important;
    letter-spacing: .16em !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    max-width: 34vw !important;
    opacity: .72 !important;
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.11) !important;
    transform: none !important;
  }

  body.flashlight-mode .smpl-system-label.content{ left:50% !important; top:12vh !important; transform:translateX(-50%) !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left:6vw !important; top:24vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:6vw !important; top:24vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:6vw !important; bottom:24vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:6vw !important; bottom:24vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ left:50% !important; bottom:12vh !important; transform:translateX(-50%) !important; }

  body.flashlight-mode::after{
    bottom: 14px !important;
    opacity: .34 !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode.mobile-flashlight-level-1{ --mobile-core-size: 140px; --mobile-map-scale: .42; }
  body.flashlight-mode.mobile-flashlight-level-2{ --mobile-core-size: 156px; --mobile-map-scale: .48; }
  body.flashlight-mode.mobile-flashlight-level-3{ --mobile-core-size: 172px; --mobile-map-scale: .54; }

  body.flashlight-mode .smpl-system-svg{
    width: 104vw !important;
    height: 58vh !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top:11vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom:11vh !important; }
}


/* ===== v189: mobile flashlight ring + labels refinement ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  /* pull the thin secondary ring back toward center by slightly reducing and offsetting the logo layer */
  body.flashlight-mode .smpl-system-logo{
    width: 92% !important;
    height: 92% !important;
    transform: translateX(-10px) translateY(-2px) !important;
    object-position: center center !important;
    opacity: .82 !important;
  }

  /* keep the main ring perfectly centered while the logo sits a touch left */
  body.flashlight-mode .smpl-system-core::before{
    transform: none !important;
  }

  /* bring all system labels closer to the center so they stay visible */
  body.flashlight-mode .smpl-system-label{
    max-width: 30vw !important;
    font-size: 7px !important;
    padding: 6px 10px !important;
    opacity: .78 !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{ left: 10vw !important; top: 28vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right: 10vw !important; top: 28vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left: 10vw !important; bottom: 26vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right: 10vw !important; bottom: 26vh !important; }
  body.flashlight-mode .smpl-system-label.content{ top: 15vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom: 15vh !important; }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-logo{
    width: 90% !important;
    height: 90% !important;
    transform: translateX(-9px) translateY(-1px) !important;
  }
  body.flashlight-mode .smpl-system-label{
    max-width: 28vw !important;
    font-size: 6.5px !important;
    padding: 6px 9px !important;
  }
  body.flashlight-mode .smpl-system-label.content{ top: 14vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom: 14vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left: 8vw !important; top: 27vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right: 8vw !important; top: 27vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left: 8vw !important; bottom: 24vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right: 8vw !important; bottom: 24vh !important; }
}


/* ===== v190: mobile flashlight logo truly centered inside the thick ring ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode .smpl-system-logo-wrap{
    inset: 0 !important;
    align-items: center !important;
    justify-items: center !important;
  }

  /* nudge the internal SMPL mark upward so it sits visually inside the thick ring like desktop */
  body.flashlight-mode .smpl-system-logo{
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateY(-8px) scale(0.985) !important;
    opacity: .82 !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-logo{
    width: 86% !important;
    height: 86% !important;
    max-width: 86% !important;
    max-height: 86% !important;
    transform: translateY(-9px) scale(0.98) !important;
  }
}

/* ===== v191: mobile flashlight cleanup ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  /* remove the thin secondary ring so only the thick white circle remains */
  body.flashlight-mode .smpl-system-core::after{
    display:none !important;
    opacity:0 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* keep the SMPL mark visually centered inside the thick ring */
  body.flashlight-mode .smpl-system-logo-wrap{
    inset: 23% !important;
    display:grid !important;
    place-items:center !important;
  }

  body.flashlight-mode .smpl-system-logo{
    width: 82% !important;
    height: 82% !important;
    max-width: 82% !important;
    max-height: 82% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateY(-3px) scale(.97) !important;
    opacity: .9 !important;
  }

  /* bring the surrounding labels noticeably closer to the central system */
  body.flashlight-mode .smpl-system-label{
    max-width: 28vw !important;
    font-size: 7px !important;
    padding: 6px 9px !important;
    opacity: .82 !important;
  }

  body.flashlight-mode .smpl-system-label.content{
    top: 18vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{
    left: 16vw !important;
    top: 31vh !important;
  }
  body.flashlight-mode .smpl-system-label.traffic{
    right: 16vw !important;
    top: 31vh !important;
  }
  body.flashlight-mode .smpl-system-label.ai{
    left: 16vw !important;
    bottom: 28vh !important;
  }
  body.flashlight-mode .smpl-system-label.scale{
    right: 16vw !important;
    bottom: 28vh !important;
  }
  body.flashlight-mode .smpl-system-label.funnels{
    bottom: 18vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-logo-wrap{
    inset: 22% !important;
  }

  body.flashlight-mode .smpl-system-logo{
    width: 80% !important;
    height: 80% !important;
    max-width: 80% !important;
    max-height: 80% !important;
    transform: translateY(-2px) scale(.965) !important;
  }

  body.flashlight-mode .smpl-system-label{
    max-width: 30vw !important;
    font-size: 6.5px !important;
    padding: 6px 8px !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top: 17vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left: 15vw !important; top: 30vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right: 15vw !important; top: 30vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left: 15vw !important; bottom: 27vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right: 15vw !important; bottom: 27vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom: 17vh !important; }
}


/* ===== v192: mobile flashlight final cleanup ===== */
/* Removes the thin ring by hiding the image logo on mobile flashlight,
   keeps only the thick white ring, centers the SMPL wordmark inside it,
   and pulls the surrounding labels closer to the core. */
.smpl-system-wordmark{display:none;}

@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode .smpl-system-core::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body.flashlight-mode .smpl-system-logo-wrap{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
  }

  /* hide the exact image on mobile flashlight because it contains the extra thin ring */
  body.flashlight-mode .smpl-system-logo{
    opacity:0 !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    pointer-events:none !important;
  }

  body.flashlight-mode .smpl-system-wordmark{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    font-family:inherit !important;
    font-weight:600 !important;
    font-size:clamp(26px, 8.6vw, 42px) !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
    color:rgba(255,255,255,.72) !important;
    text-shadow:0 0 10px rgba(255,255,255,.10), 0 0 22px rgba(255,255,255,.06) !important;
    white-space:nowrap !important;
    z-index:3 !important;
    pointer-events:none !important;
  }

  /* bring the surrounding labels closer to the central ring */
  body.flashlight-mode .smpl-system-label{
    max-width:26vw !important;
    font-size:7px !important;
    padding:6px 9px !important;
    opacity:.82 !important;
  }

  body.flashlight-mode .smpl-system-label.content{
    top:13vh !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{
    left:11vw !important;
    top:27vh !important;
  }
  body.flashlight-mode .smpl-system-label.traffic{
    right:11vw !important;
    top:27vh !important;
  }
  body.flashlight-mode .smpl-system-label.ai{
    left:11vw !important;
    bottom:24vh !important;
  }
  body.flashlight-mode .smpl-system-label.scale{
    right:11vw !important;
    bottom:24vh !important;
  }
  body.flashlight-mode .smpl-system-label.funnels{
    bottom:13vh !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-wordmark{
    font-size:clamp(24px, 8vw, 34px) !important;
  }

  body.flashlight-mode .smpl-system-label{
    max-width:29vw !important;
    font-size:6.5px !important;
    padding:5px 8px !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top:12vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left:9vw !important; top:26vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:9vw !important; top:26vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:9vw !important; bottom:23vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:9vw !important; bottom:23vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom:12vh !important; }
}


/* ===== v193: restore original SMPL font feel + closer mobile labels ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode .smpl-system-core::after,
  body.flashlight-mode .smpl-system-logo-wrap::before,
  body.flashlight-mode .smpl-system-logo-wrap::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body.flashlight-mode .smpl-system-wordmark{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50.6% !important;
    transform:translate(-50%, -50%) !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-weight:600 !important;
    font-size:clamp(22px, 7.2vw, 34px) !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    color:rgba(255,255,255,.68) !important;
    text-shadow:0 0 8px rgba(255,255,255,.10), 0 0 18px rgba(255,255,255,.06) !important;
    white-space:nowrap !important;
    z-index:4 !important;
    pointer-events:none !important;
  }

  body.flashlight-mode .smpl-system-label{
    font-size:7px !important;
    padding:6px 10px !important;
    max-width:24vw !important;
    opacity:.88 !important;
  }

  body.flashlight-mode .smpl-system-label.content{
    left:50% !important;
    top:14vh !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.funnels{
    left:50% !important;
    bottom:14vh !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{
    left:10vw !important;
    top:25vh !important;
  }
  body.flashlight-mode .smpl-system-label.traffic{
    right:10vw !important;
    top:25vh !important;
  }
  body.flashlight-mode .smpl-system-label.ai{
    left:10vw !important;
    bottom:24vh !important;
  }
  body.flashlight-mode .smpl-system-label.scale{
    right:10vw !important;
    bottom:24vh !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-wordmark{
    top:50.8% !important;
    font-size:clamp(21px, 7vw, 30px) !important;
    letter-spacing:.07em !important;
  }

  body.flashlight-mode .smpl-system-label{
    font-size:6.5px !important;
    padding:5px 9px !important;
    max-width:26vw !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top:13vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom:13vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left:8vw !important; top:24vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:8vw !important; top:24vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:8vw !important; bottom:22vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:8vw !important; bottom:22vh !important; }
}


/* ===== v194: restore original wordmark font + pull labels much closer on mobile ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  body.flashlight-mode .smpl-system-wordmark{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    font-family:var(--font) !important;
    font-weight:500 !important;
    font-size:clamp(23px, 7.4vw, 33px) !important;
    letter-spacing:.02em !important;
    line-height:1 !important;
    text-align:center !important;
    color:rgba(255,255,255,.70) !important;
    text-shadow:0 0 10px rgba(255,255,255,.10), 0 0 18px rgba(255,255,255,.05) !important;
    z-index:5 !important;
  }

  body.flashlight-mode .smpl-system-label{
    min-width:auto !important;
    max-width:20vw !important;
    font-size:6.6px !important;
    padding:5px 8px !important;
    letter-spacing:.16em !important;
    opacity:.92 !important;
  }

  body.flashlight-mode .smpl-system-label.content{
    left:50% !important;
    top:18vh !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.funnels{
    left:50% !important;
    bottom:18vh !important;
    transform:translateX(-50%) !important;
  }
  body.flashlight-mode .smpl-system-label.strategy{
    left:16vw !important;
    top:31vh !important;
  }
  body.flashlight-mode .smpl-system-label.traffic{
    right:16vw !important;
    top:31vh !important;
  }
  body.flashlight-mode .smpl-system-label.ai{
    left:16vw !important;
    bottom:28vh !important;
  }
  body.flashlight-mode .smpl-system-label.scale{
    right:16vw !important;
    bottom:28vh !important;
  }
}

@media (max-width: 480px){
  body.flashlight-mode .smpl-system-wordmark{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    font-family:var(--font) !important;
    font-weight:500 !important;
    font-size:clamp(22px, 7vw, 29px) !important;
    letter-spacing:.015em !important;
  }

  body.flashlight-mode .smpl-system-label{
    max-width:18vw !important;
    font-size:6px !important;
    padding:5px 7px !important;
    letter-spacing:.14em !important;
  }

  body.flashlight-mode .smpl-system-label.content{ top:17vh !important; }
  body.flashlight-mode .smpl-system-label.funnels{ bottom:17vh !important; }
  body.flashlight-mode .smpl-system-label.strategy{ left:14vw !important; top:30vh !important; }
  body.flashlight-mode .smpl-system-label.traffic{ right:14vw !important; top:30vh !important; }
  body.flashlight-mode .smpl-system-label.ai{ left:14vw !important; bottom:27vh !important; }
  body.flashlight-mode .smpl-system-label.scale{ right:14vw !important; bottom:27vh !important; }
}


/* ===== v196: mobile eyes touch interaction fix ===== */
@media (max-width: 1024px), (hover:none), (pointer:coarse){
  .v98-line-clinger,
  .smpl-attached-eyes,
  .smpl-eye-pair,
  .smpl-attached-eyes-layer{
    touch-action:none !important;
    -webkit-user-select:none !important;
    user-select:none !important;
  }

  body.mobile-eyes-drag-active{
    overscroll-behavior:none !important;
  }

  .v98-line-clinger.mobile-eye-dragging,
  .smpl-attached-eyes.mobile-eye-dragging,
  .smpl-eye-pair.mobile-eye-dragging{
    cursor:grabbing !important;
    z-index:2147482500 !important;
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.18)) !important;
  }

  /* Extra immediate touch offset for older eye layers that read CSS transforms */
  .smpl-attached-eyes.mobile-eye-dragging,
  .smpl-eye-pair.mobile-eye-dragging{
    transform:translate3d(var(--touch-x,0px), var(--touch-y,0px), 0) !important;
  }

  /* Important: do not affect dance-mode eyes; their own JS keeps the real position. */
  body.eyes-dance-mode .v98-line-clinger.mobile-eye-dragging{
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.22)) !important;
  }
}


/* ===== v197: mobile blocks + motion slots composition cleanup ===== */
@media (max-width: 760px){
  /* top rail / category strip */
  .v22-rail{
    overflow:hidden;
  }
  .v22-rail-inner{
    min-height:auto;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px 10px;
    padding:18px 0;
    align-items:center;
    justify-items:center;
  }
  .v22-rail span{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    font-size:10px;
    letter-spacing:.18em;
    line-height:1.15;
    padding:0 0 0 12px;
  }
  .v22-rail span::before{
    left:50%;
    top:-2px;
    transform:translateX(-50%);
    width:6px;
    height:6px;
  }

  /* make signal board cleaner on mobile */
  .v22-signal-board{
    min-height:390px;
    padding:20px;
    border-radius:0 0 46px 0;
  }
  .v22-board-line{
    margin:18px 0 24px;
  }
  .v22-signal-grid{
    max-width:none;
    gap:8px 14px;
  }
  .v22-signal-grid span{
    min-height:56px;
    font-size:16px;
    padding:8px 0;
  }
  .v22-board-orbit{
    right:18px;
    bottom:18px;
    width:112px;
    height:112px;
  }
  .v22-signal-board p{
    position:static;
    margin-top:18px;
    max-width:none;
    padding-right:118px;
    font-size:14px;
    line-height:1.55;
  }

  /* motion section should stay composed, not a plain vertical stack */
  .v22-motion-map{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows:minmax(118px, auto);
    gap:12px;
  }
  .v22-video,
  .v22-motion-note{
    min-width:0;
  }
  .v22-video-main{
    grid-column:1 / -1 !important;
    min-height:240px !important;
    border-radius:22px 22px 54px 22px !important;
  }
  .v22-video-arch{
    grid-column:1 / 2 !important;
    min-height:180px !important;
    border-radius:26px 26px 0 0 !important;
  }
  .v22-video-circle{
    grid-column:2 / 3 !important;
    min-height:180px !important;
    aspect-ratio:auto !important;
    border-radius:22px 22px 40px 22px !important;
  }
  .v22-video-thin{
    grid-column:1 / -1 !important;
    min-height:118px !important;
    border-radius:999px !important;
  }
  .v22-video-split{
    grid-column:1 / 2 !important;
    min-height:192px !important;
    border-radius:0 42px 0 0 !important;
  }
  .v22-motion-note{
    grid-column:2 / 3 !important;
    min-height:192px !important;
    padding:18px !important;
    justify-content:flex-end;
    border-top:1px solid rgba(92,100,108,.13);
    border-bottom:1px solid rgba(92,100,108,.13);
  }
  .v22-video-content{
    padding:16px;
  }
  .v22-video-content.row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px;
  }
  .v22-video span,
  .v22-motion-note b{
    font-size:9px;
    letter-spacing:.18em;
  }
  .v22-video h3{
    font-size:clamp(18px, 5.8vw, 28px);
    line-height:1.02;
    margin-top:12px;
    max-width:none;
  }
  .v22-motion-note p{
    margin-top:12px;
    font-size:14px;
    line-height:1.45;
  }

  /* slightly cleaner section head spacing on mobile */
  .section-head{
    gap:12px;
  }
  .section-head p{
    max-width:none;
    font-size:14px;
    line-height:1.5;
  }
}

@media (max-width: 520px){
  .v22-rail-inner{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px 10px;
  }
  .v22-signal-board p{
    padding-right:0;
  }
  .v22-motion-map{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px;
  }
  .v22-video-main{
    min-height:210px !important;
  }
  .v22-video-arch,
  .v22-video-circle,
  .v22-video-split,
  .v22-motion-note{
    min-height:165px !important;
  }
  .v22-video-thin{
    min-height:106px !important;
  }
  .v22-motion-note{
    grid-column:1 / -1 !important;
    min-height:150px !important;
  }
}


/* ===== v198: slot 5 uses its own video asset ===== */
.v22-video-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===== v202: micro animation video slots moved above What we build ===== */
.v202-micro-video-section{
  padding:70px 0 58px;
  border-top:1px solid rgba(92,100,108,.11);
  border-bottom:1px solid rgba(92,100,108,.11);
  background:rgba(255,255,255,.10);
}

.v202-micro-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:40px;
  align-items:end;
  margin-bottom:24px;
}

.v202-micro-head span{
  display:block;
  color:#889099;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
}

.v202-micro-head b{
  display:block;
  max-width:620px;
  font-size:clamp(24px, 3vw, 42px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:500;
  color:#22262a;
}

.v202-micro-video-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
}

.v202-micro-video-slot{
  position:relative;
  min-height:0 !important;
  aspect-ratio:4 / 3;
  padding:0 !important;
  overflow:hidden;
  border:1px solid rgba(90,98,106,.12);
  border-radius:28px;
  background:#ecebe8;
  isolation:isolate;
}

.v202-micro-video-slot:nth-child(1){
  border-radius:28px 28px 74px 28px;
}

.v202-micro-video-slot:nth-child(2){
  border-radius:74px 28px 28px 28px;
}

.v202-micro-video-slot:nth-child(3){
  border-radius:28px 74px 28px 28px;
}

.v202-micro-video-slot video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.82) contrast(1.04);
}

.v202-micro-video-slot::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)),
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.22), transparent 28%);
  z-index:1;
  pointer-events:none;
}

.v202-micro-caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  color:#f7f7f4;
  text-shadow:0 2px 18px rgba(0,0,0,.34);
}

.v202-micro-caption em{
  font-style:normal;
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.72);
}

.v202-micro-caption p{
  margin:0;
  font-size:14px;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(255,255,255,.88);
}

body.dark-theme .v202-micro-video-section{
  background:rgba(255,255,255,.018);
  border-color:rgba(255,255,255,.10);
}

body.dark-theme .v202-micro-head b{
  color:#f4f1ec;
}

body.dark-theme .v202-micro-video-slot{
  background:#151719;
  border-color:rgba(255,255,255,.11);
}

@media(max-width:900px){
  .v202-micro-head{
    grid-template-columns:1fr;
    gap:12px;
  }

  .v202-micro-video-grid{
    grid-template-columns:1.25fr .75fr !important;
    gap:12px !important;
  }

  .v202-micro-video-slot:nth-child(1){
    grid-column:1 / -1;
    aspect-ratio:16 / 9;
    border-radius:24px 24px 58px 24px;
  }

  .v202-micro-video-slot:nth-child(2),
  .v202-micro-video-slot:nth-child(3){
    aspect-ratio:1 / 1;
    border-radius:24px;
  }
}

@media(max-width:560px){
  .v202-micro-video-section{
    padding:44px 0 40px;
  }

  .v202-micro-video-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .v202-micro-video-slot:nth-child(1){
    grid-column:1 / -1;
    aspect-ratio:4 / 3;
  }

  .v202-micro-video-slot:nth-child(2),
  .v202-micro-video-slot:nth-child(3){
    aspect-ratio:1 / 1.08;
  }

  .v202-micro-caption{
    left:12px;
    right:12px;
    bottom:12px;
    display:block;
  }

  .v202-micro-caption p{
    margin-top:6px;
    font-size:13px;
  }
}


/* ===== v203: final content + RU/EN/EL language toggle ===== */
.lang-toggle{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(35,37,39,.18);
  background:rgba(255,255,255,.48);
  color:#33383d;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Greek copy is naturally wider; keep the editorial hero balanced. */
html[lang="el"] .v22-hero h1{
  max-width:820px;
  font-size:clamp(58px,7vw,112px);
  line-height:.9;
  letter-spacing:-.065em;
}
html[lang="el"] .v22-signal-board{
  min-height:620px;
}
html[lang="el"] .v22-signal-grid span{
  font-size:18px;
  line-height:1.15;
  overflow-wrap:anywhere;
}
html[lang="el"] .v22-signal-board p{
  max-width:320px;
  font-size:14px;
}
@media(max-width:1100px){
  html[lang="el"] .v22-hero h1{
    max-width:900px;
  }
  html[lang="el"] .v22-signal-board{
    min-height:540px;
  }
}
@media(max-width:700px){
  html[lang="el"] .v22-hero h1{
    font-size:clamp(42px,13vw,68px);
  }
  html[lang="el"] .v22-signal-board{
    min-height:500px;
  }
}
.lang-toggle:hover{
  transform:translateY(-1px);
  background:#1f2225;
  color:#fff;
}
body.dark-theme .lang-toggle{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#f4f1ec;
}
body.dark-theme .lang-toggle:hover{
  background:#f4f1ec;
  color:#111315;
}
@media(max-width:760px){
  .lang-toggle{
    width:40px;
    height:40px;
    min-width:40px;
    font-size:10px;
  }
}


/* ===== v204 polish: less text overlap, cleaner motion sections ===== */
.v202-micro-video-section{
  padding:56px 0 52px;
}
.v202-micro-head{
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:22px;
  max-width:720px;
}
.v202-micro-head b{
  max-width:560px;
  font-size:clamp(20px,2.5vw,30px);
  line-height:1.03;
}
.v202-micro-video-grid{
  align-items:start;
}
.v202-micro-caption p{
  font-size:14px;
  line-height:1.12;
}

.v22-motion-section .section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px 30px;
  align-items:end;
  margin-bottom:22px;
}
.v22-motion-section .section-head > div{
  max-width:620px;
}
.v22-motion-section .section-head p{
  max-width:320px;
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.45;
}

.v22-video::after{
  background:
    radial-gradient(circle at 80% 12%,rgba(255,255,255,.06),transparent 24%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18));
}
.v22-video-content{
  padding:20px 22px;
  justify-content:flex-end;
  gap:10px;
}
.v22-video-content.row{
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:10px;
}
.v22-video-content.center{
  justify-content:flex-end;
  align-items:flex-start;
  text-align:left;
}
.v22-video span,
.v22-motion-note b{
  color:rgba(255,255,255,.72);
  font-size:10px;
  letter-spacing:.22em;
}
.v22-video h3{
  color:#fff;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1.03;
  letter-spacing:-.04em;
  margin:0;
  max-width:72%;
  text-wrap:balance;
}
.v22-video-main h3{ max-width:58%; }
.v22-video-arch h3{ max-width:75%; }
.v22-video-thin h3{ max-width:54%; }
.v22-video-circle h3{ max-width:88%; font-size:clamp(18px,1.8vw,24px); }
.v22-video-split h3{ max-width:70%; }
.v22-video-circle .v22-video-content,
.v22-video-split .v22-video-content{
  padding:18px 18px 20px;
}
.v22-motion-note{
  min-height:280px;
  padding:26px 26px 22px;
  align-self:end;
}
.v22-motion-note p{
  max-width:340px;
  line-height:1.45;
  margin:10px 0 0;
  color:rgba(255,255,255,.74);
}

/* flow section was getting applied to section and container simultaneously */
section.v22-flow{
  display:block;
  border-top:0;
}
.container.v22-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(92,100,108,.12);
}
.container.v22-flow > div{
  min-height:220px;
}

@media (max-width:1100px){
  .v22-motion-section .section-head{
    grid-template-columns:1fr;
  }
  .v22-motion-section .section-head p{
    max-width:520px;
  }
  .v22-video h3,
  .v22-video-main h3,
  .v22-video-thin h3,
  .v22-video-arch h3,
  .v22-video-split h3,
  .v22-video-circle h3{
    max-width:82%;
  }
  .container.v22-flow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .v202-micro-video-section{
    padding:44px 0 42px;
  }
  .v202-micro-head b{
    max-width:100%;
    font-size:clamp(22px,7vw,34px);
  }
  .v22-motion-section .section-head{
    gap:12px;
  }
  .v22-motion-section .section-head p{
    max-width:100%;
  }
  .v22-video-content,
  .v22-video-circle .v22-video-content,
  .v22-video-split .v22-video-content{
    padding:16px;
  }
  .v22-video h3,
  .v22-video-main h3,
  .v22-video-thin h3,
  .v22-video-arch h3,
  .v22-video-split h3,
  .v22-video-circle h3{
    max-width:100%;
    font-size:clamp(18px,6vw,24px);
  }
  .container.v22-flow{
    grid-template-columns:1fr;
  }
  .container.v22-flow > div{
    min-height:unset;
  }
}


/* ===== v205 micro motion heading + first caption fit ===== */
.v202-micro-head{
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:20px;
}

.v202-micro-head b{
  max-width:520px;
  font-size:clamp(22px, 2.2vw, 34px);
}

.v202-micro-video-slot:nth-child(1) .v202-micro-caption{
  left:18px;
  right:24px;
  bottom:14px;
}

.v202-micro-video-slot:nth-child(1) .v202-micro-caption p{
  margin-left:auto;
  padding-right:6px;
  max-width:140px;
  text-align:right;
  white-space:nowrap;
  font-size:13px;
}

@media(max-width:560px){
  .v202-micro-head b{
    max-width:100%;
    font-size:clamp(20px, 6.4vw, 28px);
  }

  .v202-micro-video-slot:nth-child(1) .v202-micro-caption{
    left:12px;
    right:18px;
    bottom:12px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
  }

  .v202-micro-video-slot:nth-child(1) .v202-micro-caption p{
    margin-left:auto;
    max-width:116px;
    font-size:12px;
    padding-right:4px;
  }
}


/* ===== v208: smooth micro videos, no JS frame seeking ===== */
.v202-micro-video-slot video{
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:auto;
}


/* ===== v210: compact navigation CTA + language dropdown ===== */
.nav-actions .nav-cta{
  height:42px;
  min-height:42px;
  padding:0 15px;
  border-color:rgba(53,58,63,.13);
  background:rgba(255,255,255,.34);
  color:#3f454a;
  box-shadow:none;
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.055em;
  text-transform:none;
  white-space:nowrap;
  backdrop-filter:blur(12px);
}
.nav-actions .nav-cta:hover{
  transform:none;
  background:rgba(255,255,255,.72);
  border-color:rgba(53,58,63,.22);
  box-shadow:none;
  color:#1f2225;
}
body.dark-theme .nav-actions .nav-cta{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
  color:#e9e7e2;
}
body.dark-theme .nav-actions .nav-cta:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}

.lang-menu{
  position:relative;
  z-index:9600;
  flex:0 0 auto;
}
.lang-menu-trigger{
  position:relative;
  height:42px;
  min-width:64px;
  padding:0 29px 0 13px;
  border:1px solid rgba(53,58,63,.14);
  border-radius:999px;
  background:rgba(255,255,255,.34);
  color:#3f454a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:500 11px/1 Inter, sans-serif;
  letter-spacing:.12em;
  cursor:pointer;
  transition:background .24s ease,border-color .24s ease,color .24s ease;
  backdrop-filter:blur(12px);
}
.lang-menu-trigger::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-68%) rotate(45deg);
  transition:transform .24s ease;
  opacity:.62;
}
.lang-menu.is-open .lang-menu-trigger::after{
  transform:translateY(-28%) rotate(225deg);
}
.lang-menu-trigger:hover,
.lang-menu.is-open .lang-menu-trigger{
  background:rgba(255,255,255,.72);
  border-color:rgba(53,58,63,.22);
  color:#1f2225;
}
.lang-menu-list{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:174px;
  padding:6px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  background:rgba(244,243,239,.94);
  box-shadow:0 18px 46px rgba(28,31,34,.13);
  backdrop-filter:blur(24px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px) scale(.98);
  transform-origin:top right;
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
}
.lang-menu.is-open .lang-menu-list{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.lang-menu-option{
  min-height:40px;
  padding:0 11px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#626970;
  font-size:11px;
  letter-spacing:.1em;
  transition:background .2s ease,color .2s ease;
}
.lang-menu-option span{
  width:24px;
  color:#292e32;
  font-weight:600;
}
.lang-menu-option small{
  font-size:11px;
  letter-spacing:.025em;
  opacity:.72;
}
.lang-menu-option:hover,
.lang-menu-option:focus-visible{
  outline:none;
  background:rgba(255,255,255,.78);
  color:#1f2225;
}
.lang-menu-option.active{
  background:#24282c;
  color:#fff;
}
.lang-menu-option.active span{
  color:#fff;
}
body.dark-theme .lang-menu-trigger{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
  color:#eceae5;
}
body.dark-theme .lang-menu-trigger:hover,
body.dark-theme .lang-menu.is-open .lang-menu-trigger{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
body.dark-theme .lang-menu-list{
  background:rgba(24,27,29,.94);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 18px 46px rgba(0,0,0,.3);
}
body.dark-theme .lang-menu-option{
  color:#bfc4c8;
}
body.dark-theme .lang-menu-option span{
  color:#f0eee9;
}
body.dark-theme .lang-menu-option:hover,
body.dark-theme .lang-menu-option:focus-visible{
  background:rgba(255,255,255,.08);
  color:#fff;
}
body.dark-theme .lang-menu-option.active{
  background:#eeeae3;
  color:#171a1c;
}
body.dark-theme .lang-menu-option.active span{
  color:#171a1c;
}

@media(max-width:1024px){
  .lang-menu-trigger{
    width:42px;
    min-width:42px;
    padding:0;
  }
  .lang-menu-trigger::after{
    display:none;
  }
  .lang-menu-list{
    right:0;
  }
}

@media(max-width:420px){
  .lang-menu-trigger{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }
  .lang-menu-list{
    position:fixed;
    top:70px;
    right:10px;
    width:min(174px,calc(100vw - 20px));
  }
}

/* ===== v211: exact vertical alignment for desktop navigation ===== */
@media(min-width:981px){
  .nav .menu a{
    box-sizing:border-box;
    height:42px;
    min-height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    white-space:nowrap;
  }
  .nav-actions .nav-cta,
  .lang-menu-trigger,
  .nav-actions .mode-toggle{
    box-sizing:border-box;
    height:42px;
    min-height:42px;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  .nav-actions [data-theme-toggle]{
    width:84px;
    min-width:84px;
  }
}

/* ===== v212: theme changes color only — never page geometry ===== */
html{
  scrollbar-gutter:stable;
}
::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(root){
  animation:none !important;
}

/* ===== v213: clean dark canvas + viewport-locked theme control ===== */
body.dark-theme{
  --page-bg:#0d0f11;
  background:#0d0f11 !important;
}
body.dark-theme::before{
  opacity:0 !important;
  background-image:none !important;
  mix-blend-mode:normal !important;
}
body.dark-theme .ambient-dark{
  background:linear-gradient(180deg,#141719 0%,#0f1113 48%,#0b0d0f 100%) !important;
}

/* Header and theme pull switch always belong to the viewport, not the page. */
.nav{
  position:fixed !important;
}
.pull-cord{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  transform:none !important;
  overflow:visible !important;
  pointer-events:none !important;
}
.pull-cord .cord-svg,
.pull-cord .cord-anchor,
.pull-cord .cord-handle,
.pull-cord .cord-hint{
  position:fixed !important;
}
.pull-cord .cord-handle{
  pointer-events:auto !important;
}

/* ===== v214: readable glass navigation over scrolling content ===== */
.nav{
  background:rgba(247,246,242,.96) !important;
  -webkit-backdrop-filter:blur(42px) saturate(.72) !important;
  backdrop-filter:blur(42px) saturate(.72) !important;
  box-shadow:0 14px 44px rgba(22,26,29,.10) !important;
}
body:not(.flashlight-mode):not(.eyes-dance-mode) .nav{
  z-index:10000 !important;
  pointer-events:auto !important;
}
.nav a,
.nav button{
  pointer-events:auto !important;
}
body.dark-theme .nav{
  background:rgba(13,15,17,.94) !important;
  -webkit-backdrop-filter:blur(42px) saturate(.68) !important;
  backdrop-filter:blur(42px) saturate(.68) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.28) !important;
}

/* ===== v215: custom cursor stays visible above the floating navigation ===== */
body:not(.flashlight-mode):not(.eyes-dance-mode) .cursor-core,
body:not(.flashlight-mode):not(.eyes-dance-mode) .cursor-ring{
  z-index:10020 !important;
  pointer-events:none !important;
}

/* ===== v217: branded project-direction select ===== */
form[data-lead-form] .field:has(select[name="direction"]){
  position:relative;
}
form[data-lead-form] select[name="direction"]{
  -webkit-appearance:none;
  appearance:none;
  min-height:58px;
  padding:0 58px 0 18px;
  border:1px solid rgba(35,39,43,.14);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(247,246,242,.68));
  color:#252a2e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 24px rgba(28,32,36,.045);
  font-weight:450;
  line-height:1.2;
  cursor:pointer;
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}
form[data-lead-form] .field:has(select[name="direction"])::before{
  content:"";
  position:absolute;
  right:47px;
  bottom:12px;
  width:1px;
  height:34px;
  background:rgba(45,50,55,.10);
  pointer-events:none;
  z-index:1;
}
form[data-lead-form] .field:has(select[name="direction"])::after{
  content:"";
  position:absolute;
  right:20px;
  bottom:27px;
  width:8px;
  height:8px;
  border-right:1.5px solid #6d747a;
  border-bottom:1.5px solid #6d747a;
  transform:rotate(45deg);
  transform-origin:center;
  pointer-events:none;
  z-index:1;
}
form[data-lead-form] select[name="direction"]:hover{
  border-color:rgba(45,50,55,.28);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,246,242,.82));
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 30px rgba(28,32,36,.08);
  transform:translateY(-1px);
}
form[data-lead-form] select[name="direction"]:focus{
  border-color:rgba(65,72,78,.48);
  box-shadow:
    0 0 0 4px rgba(70,78,85,.08),
    0 12px 30px rgba(28,32,36,.07);
  transform:none;
}
form[data-lead-form] select[name="direction"] option{
  background:#f7f6f2;
  color:#252a2e;
}
body.dark-theme form[data-lead-form] select[name="direction"]{
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.055));
  color:#f2f0ec;
  border-color:rgba(255,255,255,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(0,0,0,.16);
}
body.dark-theme form[data-lead-form] .field:has(select[name="direction"])::before{
  background:rgba(255,255,255,.11);
}
body.dark-theme form[data-lead-form] .field:has(select[name="direction"])::after{
  border-color:#aeb4ba;
}
body.dark-theme form[data-lead-form] select[name="direction"]:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075));
  border-color:rgba(255,255,255,.26);
}
body.dark-theme form[data-lead-form] select[name="direction"]:focus{
  border-color:rgba(255,255,255,.38);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.07),
    0 14px 34px rgba(0,0,0,.22);
}
body.dark-theme form[data-lead-form] select[name="direction"] option{
  background:#171a1d;
  color:#f2f0ec;
}
@media(max-width:640px){
  form[data-lead-form] select[name="direction"]{
    min-height:56px;
    padding:0 50px 0 14px !important;
    font-size:14px !important;
  }
  form[data-lead-form] .field:has(select[name="direction"])::before{
    right:44px;
    bottom:11px;
  }
  form[data-lead-form] .field:has(select[name="direction"])::after{
    right:18px;
    bottom:26px;
  }
}

/* ===== v219: fully styled custom dropdown menu ===== */
form[data-lead-form] .smpl-native-select{
  display:none !important;
}
form[data-lead-form] .field:has(.smpl-select)::before,
form[data-lead-form] .field:has(.smpl-select)::after{
  display:none !important;
}
.smpl-select{
  position:relative;
  width:100%;
  z-index:4;
}
.smpl-select.is-open{
  z-index:80;
}
.smpl-select-trigger{
  width:100%;
  min-height:58px;
  padding:0 58px 0 18px;
  border:1px solid rgba(35,39,43,.14);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,246,242,.72));
  color:#252a2e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 8px 24px rgba(28,32,36,.05);
  display:flex;
  align-items:center;
  text-align:left;
  font:inherit;
  font-weight:450;
  cursor:pointer;
  transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.smpl-select-trigger:hover{
  border-color:rgba(45,50,55,.28);
  background:linear-gradient(180deg,#fff,rgba(247,246,242,.86));
  box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(28,32,36,.08);
  transform:translateY(-1px);
}
.smpl-select-trigger:focus-visible,
.smpl-select.is-open .smpl-select-trigger{
  outline:none;
  border-color:rgba(65,72,78,.46);
  box-shadow:0 0 0 4px rgba(70,78,85,.08),0 12px 30px rgba(28,32,36,.08);
  transform:none;
}
.smpl-select-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.smpl-select-arrow{
  position:absolute;
  right:0;
  top:0;
  width:48px;
  height:100%;
  border-left:1px solid rgba(45,50,55,.10);
  pointer-events:none;
}
.smpl-select-arrow::before{
  content:"";
  position:absolute;
  left:19px;
  top:23px;
  width:8px;
  height:8px;
  border-right:1.5px solid #6d747a;
  border-bottom:1.5px solid #6d747a;
  transform:rotate(45deg);
  transition:transform .22s ease,top .22s ease;
}
.smpl-select.is-open .smpl-select-arrow::before{
  top:27px;
  transform:rotate(225deg);
}
.smpl-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 9px);
  padding:8px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:20px;
  background:rgba(248,247,243,.94);
  -webkit-backdrop-filter:blur(28px) saturate(.78);
  backdrop-filter:blur(28px) saturate(.78);
  box-shadow:0 24px 60px rgba(24,28,32,.16),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.985);
  transform-origin:50% 0;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease,transform .24s cubic-bezier(.22,1,.36,1);
}
.smpl-select.opens-up .smpl-select-menu{
  top:auto;
  bottom:calc(100% + 9px);
  transform:translateY(8px) scale(.985);
  transform-origin:50% 100%;
}
.smpl-select.is-open .smpl-select-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.smpl-select-option{
  width:100%;
  min-height:46px;
  padding:10px 42px 10px 14px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#535b61;
  display:flex;
  align-items:center;
  text-align:left;
  font:inherit;
  font-size:14px;
  cursor:pointer;
  position:relative;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.smpl-select-option:hover,
.smpl-select-option:focus-visible{
  outline:none;
  background:rgba(31,35,39,.07);
  color:#202428;
  transform:translateX(2px);
}
.smpl-select-option.is-selected{
  background:#202428;
  color:#f7f6f2;
}
.smpl-select-option-mark{
  position:absolute;
  right:16px;
  top:50%;
  width:12px;
  height:7px;
  border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-65%) rotate(-45deg) scale(0);
  opacity:0;
  transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s ease;
}
.smpl-select-option.is-selected .smpl-select-option-mark{
  transform:translateY(-65%) rotate(-45deg) scale(1);
  opacity:1;
}
body.dark-theme .smpl-select-trigger{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
  color:#f2f0ec;
  border-color:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.16);
}
body.dark-theme .smpl-select-trigger:hover,
body.dark-theme .smpl-select.is-open .smpl-select-trigger{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.075));
  border-color:rgba(255,255,255,.27);
}
body.dark-theme .smpl-select-arrow{
  border-color:rgba(255,255,255,.11);
}
body.dark-theme .smpl-select-arrow::before{
  border-color:#aeb4ba;
}
body.dark-theme .smpl-select-menu{
  background:rgba(18,21,23,.96);
  border-color:rgba(255,255,255,.11);
  box-shadow:0 26px 68px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
}
body.dark-theme .smpl-select-option{
  color:#b8bec3;
}
body.dark-theme .smpl-select-option:hover,
body.dark-theme .smpl-select-option:focus-visible{
  background:rgba(255,255,255,.075);
  color:#f4f1ec;
}
body.dark-theme .smpl-select-option.is-selected{
  background:#f2f0ec;
  color:#15181a;
}
@media(max-width:640px){
  .smpl-select-trigger{
    min-height:56px;
    padding:0 50px 0 14px;
    font-size:14px;
  }
  .smpl-select-arrow{
    width:44px;
  }
  .smpl-select-arrow::before{
    left:17px;
    top:22px;
  }
  .smpl-select.is-open .smpl-select-arrow::before{
    top:26px;
  }
  .smpl-select-menu{
    border-radius:18px;
    padding:7px;
  }
  .smpl-select-option{
    min-height:44px;
    padding:9px 38px 9px 12px;
    font-size:13px;
  }
}