:root{
  --bg:#020202;
  --surface:#080808;
  --text:#f2f2ef;
  --muted:#858583;
  --faint:#3b3b39;
  --line:rgba(255,255,255,.095);
  --ease:cubic-bezier(.22,1,.36,1);
  --page:clamp(22px,5vw,80px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:Manrope,sans-serif;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.045),transparent 32%),
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.028),transparent 28%),
    linear-gradient(180deg,#050505 0%,#030303 58%,#010101 100%);
  background-size:140% 140%,130% 130%,100% 100%;
  animation:ambientDrift 24s ease-in-out infinite alternate;
}
body::before{
  content:"";
  position:fixed;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  opacity:.026;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:4px 4px;
  animation:dotDrift 18s linear infinite;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.56) 100%);
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
::selection{background:#efefeb;color:#080808}

.jitter-s{
    display:inline-block;

    transform:
      rotate(-23deg);
      transform-origin:30% 90%;
/*      animation:letterFloat 7s ease-in-out infinite;*/
}


@keyframes letterFloat{

    0%{
        transform:
            rotate(-17deg)
            translateY(0)
            translateX(0);
    }

    50%{
        transform:
            rotate(-22deg)
            translateY(-0.02em)
            translateX(.01em);
    }

    100%{
        transform:
            rotate(-17deg)
            translateY(0)
            translateX(0);
    }

}
.ambient{
  position:fixed;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(circle at 28% 34%,rgba(255,255,255,.03),transparent 24%),
    radial-gradient(circle at 72% 64%,rgba(255,255,255,.02),transparent 28%);
  filter:blur(64px);
  animation:ambientFloat 24s ease-in-out infinite alternate;
}
.cursor-glow{
  position:fixed;
  width:520px;
  height:520px;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  opacity:.72;
  transform:translate(-50%,-50%);
  filter:blur(110px);
  mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.17) 0%,rgba(255,255,255,.055) 34%,transparent 72%);
}
.site,
.lightbox{
  position:relative;
  z-index:1;
}

/* NAV */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:22px var(--page);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:background .45s ease,border-color .45s ease,transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(2,2,2,.68);
  border-color:var(--line);
  backdrop-filter:blur(18px);
}
.brand{justify-self:start;font-weight:500}
.nav-center{justify-self:center;color:var(--muted)}
.nav-contact{justify-self:end;position:relative}
.nav-contact::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-5px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-contact:hover::after{transform:scaleX(1);transform-origin:left}

/* HEEZY */
.heezy{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:150px var(--page) 7vh;
  position:relative;
}
.heezy-copy{
  max-width:1400px;
}
.heezy h1{
  max-width:13ch;
  font-size:clamp(4rem,9.15vw,9.2rem);
  line-height:.86;
  letter-spacing:-.057em;
  font-weight:400;
  text-wrap:balance;
}
.serif{
  color:#fff;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:500;
  letter-spacing:-.045em;
}
.subtitle{
  margin-top:34px;
  color:var(--muted);
  font-size:clamp(.78rem,.9vw,.95rem);
  line-height:1;
  letter-spacing:.075em;
  white-space:nowrap;
}
.rotating-lock,#typed,.typed-cursor,.static-design{
  display:inline-block;
  vertical-align:baseline;
  font:inherit;
  line-height:inherit;
}
#typed{
  color:#f4f4f1;
  transition:opacity .22s ease,transform .22s ease,filter .22s ease;
}
#typed.is-switching{
  opacity:0;
  transform:translateY(3px);
  filter:blur(3px);
}
.typed-cursor{
  margin-left:.012em;
  color:#d6d6d2;
  animation:cursorBlink 1.1s steps(1,end) infinite;
}
.static-design{margin-left:.12em}

.heezy-footer{
  margin-top:auto;
  padding-top:54px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  color:var(--muted);
  font-size:.67rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.heezy-index{
  display:flex;
  gap:28px;
}
.scroll-cue{
  display:flex;
  align-items:center;
  gap:12px;
}
.scroll-line{
  position:relative;
  width:62px;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.13);
}
.scroll-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform:translateX(-100%);
  animation:scan 2.7s var(--ease) infinite;
}

/* INTRO */
.work-intro{
  padding:130px var(--page) 62px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  align-items:end;
}
.kicker{
  grid-column:span 3;
  color:var(--muted);
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.statement{
  grid-column:5 / span 8;
  max-width:920px;
  font-size:clamp(1.75rem,3.4vw,4rem);
  line-height:1.03;
  letter-spacing:-.036em;
  font-weight:300;
}
.statement em{
  font-family:"Cormorant Garamond",serif;
  font-size:1.08em;
  font-weight:500;
}

/* GALLERY */











.ratio-landscape{aspect-ratio:16/10}
.ratio-square{aspect-ratio:1/1}
.ratio-portrait{aspect-ratio:4/5}
.ratio-cinema{aspect-ratio:2.05/1}





.meta{
  padding-top:13px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:14px;
}
.num{
  color:#555;
  font-size:.66rem;
  letter-spacing:.14em;
}
.title{
  font-size:.9rem;
  font-weight:400;
  letter-spacing:-.012em;
}
.category{
  color:var(--muted);
  font-size:.66rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.desc{
  grid-column:2 / -1;
  max-width:480px;
  color:#777;
  font-size:.74rem;
  line-height:1.55;
}

/* FEATURE STATEMENT */
.break{
  grid-column:1 / -1;
  min-height:48vh;
  display:grid;
  place-items:center;
  padding:7vw 0;
  text-align:center;
}
.break p{
  max-width:16ch;
  color:#d9d9d5;
  font-size:clamp(2.6rem,6.4vw,7rem);
  line-height:.9;
  letter-spacing:-.05em;
}
.break em{
  color:#fff;
  font-family:"Cormorant Garamond",serif;
  font-size:1.08em;
  font-weight:500;
}

/* FOOTER */
.footer{
  padding:120px var(--page) 38px;
  border-top:1px solid var(--line);
}
.footer-top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  align-items:end;
}
.footer-label{
  grid-column:span 3;
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer-cta{
  grid-column:5 / span 8;
  font-size:clamp(2.8rem,7vw,7.2rem);
  letter-spacing:-.055em;
  line-height:.9;
  font-weight:300;
}
.footer-cta a{
  position:relative;
}
.footer-cta a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.01em;
  height:2px;
  background:currentColor;
  transform:scaleX(.18);
  transform-origin:left;
  transition:transform .7s var(--ease);
}
.footer-cta a:hover::after{transform:scaleX(1)}
.footer-bottom{
  margin-top:110px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(26px);
  filter:blur(10px);
  transition:opacity 1.05s ease,transform 1.05s var(--ease),filter 1.05s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
  filter:none;
}



/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:22px;
  background:rgba(0,0,0,.93);
  backdrop-filter:blur(22px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.lightbox.active{opacity:1;visibility:visible}
.lightbox-top,
.lightbox-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#a5a5a2;
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.lightbox-close{
  border:0;
  background:none;
  color:#eee;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.lightbox-stage{
  min-height:0;
  display:grid;
  place-items:center;
  padding:24px;
}
.lightbox img{
  max-width:min(92vw,1500px);
  max-height:78vh;
  object-fit:contain;
  filter:grayscale(0%) contrast(102%);
  transform:scale(.985);
  opacity:0;
  transition:transform .65s var(--ease),opacity .5s ease;
}
.lightbox.active img{transform:scale(1);opacity:1}
.lightbox-nav{display:flex;gap:22px}
.lightbox-nav button{
  border:0;background:none;color:inherit;cursor:pointer;
  text-transform:uppercase;letter-spacing:.12em;
}

/* PROGRESS */
.progress{
  position:fixed;
  left:0;top:0;
  z-index:40;
  width:100%;
  height:1px;
  transform-origin:left;
  transform:scaleX(0);
  background:#f0f0ec;
}

@keyframes cursorBlink{0%,48%{opacity:1}49%,100%{opacity:.18}}
@keyframes scan{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes ambientDrift{
  0%{background-position:0% 0%,100% 0%,0 0}
  50%{background-position:6% 3%,95% 4%,0 0}
  100%{background-position:2% 7%,98% 2%,0 0}
}
@keyframes ambientFloat{
  0%{transform:translate3d(-1.2%,-.8%,0) scale(1)}
  50%{transform:translate3d(1%,1.2%,0) scale(1.02)}
  100%{transform:translate3d(.2%,-.6%,0) scale(1.01)}
}
@keyframes dotDrift{
  0%{transform:translate3d(-1.5%,-1%,0)}
  50%{transform:translate3d(1%,.7%,0)}
  100%{transform:translate3d(-.5%,1%,0)}
}

@keyframes grainFloat{
  0%{transform:translate3d(-.7%,-.7%,0)}
  25%{transform:translate3d(.7%,0,0)}
  50%{transform:translate3d(0,.7%,0)}
  75%{transform:translate3d(-.35%,.35%,0)}
  100%{transform:translate3d(.7%,-.35%,0)}
}

@media(max-width:980px){
  .nav{grid-template-columns:1fr 1fr}
  .nav-center{display:none}
  .heezy{padding-top:130px}
  .heezy h1{max-width:11ch;font-size:clamp(4rem,12.5vw,7.5rem)}
  .work-intro{padding-top:100px}
  .kicker{grid-column:span 4}
  .statement{grid-column:5 / span 8}
  
  
}
@media(max-width:680px){
  :root{--page:20px}
  .nav{padding-top:18px;padding-bottom:18px}
  .nav-contact{font-size:0}
  .nav-contact::before{content:"Contact";font-size:.72rem}
  .heezy{min-height:92svh;padding-top:120px;padding-bottom:28px}
  .heezy h1{font-size:clamp(3.4rem,15.5vw,6rem);line-height:.9}
  .subtitle{margin-top:26px}
  .heezy-footer{padding-top:42px}
  .heezy-index{display:none}
  .work-intro{display:block;padding-top:86px;padding-bottom:46px}
  .statement{margin-top:22px}
  
  
  .meta{grid-template-columns:auto 1fr}
  .category{display:none}
  .desc{grid-column:2}
  .break{min-height:42vh;padding:90px 0 110px}
  .footer{padding-top:88px}
  .footer-top{display:block}
  .footer-cta{margin-top:26px}
  .footer-bottom{margin-top:78px;align-items:flex-end}
  .lightbox{padding:16px}
  .lightbox-stage{padding:12px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
  .cursor-glow{display:none}
}


/* Heezy logo — large, below the headline, original GIF animation preserved */
.heezy-logo-gif{
  position:absolute;
  left:65%;
  bottom:8.5vh;
 width:clamp(340px,26vw,500px);
  max-width:80%;
  height:auto;
  z-index:2;
  transform:translateX(-50%);
  object-fit:contain;
  mix-blend-mode:screen;
  pointer-events:none;
  user-select:none;
}

@media(max-width:980px){
  .heezy-logo-gif{
    left:62%;
    bottom:10vh;
    width:clamp(350px,48vw,560px);
  }
}

@media(max-width:680px){
  .heezy-logo-gif{
    position:relative;
    left:auto;
    bottom:auto;
    display:block;
    visibility:visible;
    opacity:1;
    width:min(82vw,380px);
    max-width:none;
    margin:20px auto 0;
    transform:none;
  }





}


/* Custom inverted plus cursor */
@media (hover:hover) and (pointer:fine){
  

  .cursor-plus{
    position:fixed;
    left:0;
    top:0;
    width:34px;
    height:34px;
    z-index:99999;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    mix-blend-mode:difference;
    transition:
      width .28s var(--ease),
      height .28s var(--ease),
      opacity .18s ease;
  }

  .cursor-plus-shape{
    position:absolute;
    inset:0;
    transform-origin:50% 50%;
    animation:cursorQuarterTurn 2.7s cubic-bezier(.22,1,.36,1) infinite;
    will-change:transform;
  }

  .cursor-plus-shape::before,
  .cursor-plus-shape::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    border-radius:999px;
    background:#fff;
    transform:translate(-50%,-50%);
  }

  .cursor-plus-shape::before{
    width:20px;
    height:3px;
  }

  .cursor-plus-shape::after{
    width:3px;
    height:20px;
  }

  .cursor-plus.is-visible{
    opacity:0.8;
  }

  .cursor-plus.is-active{
    width:48px;
    height:48px;
  }

  .cursor-plus.is-active .cursor-plus-shape::before{
    width:20px;
  }

  .cursor-plus.is-active .cursor-plus-shape::after{
    height:20px;
  }
}


@keyframes cursorQuarterTurn{
  0%,
  82%{
    transform:rotate(0deg);
  }

  90%,
  100%{
    transform:rotate(90deg);
  }
}


/* LIGHT / DARK THEME SWITCH */


.theme-toggle{
  position:absolute;
  right:calc(var(--page) + 82px);
  top:50%;
  width:52px;
  height:28px;
  padding:0;
  transform:translateY(-50%);
  border:0;
  border-radius:999px;
  color:inherit;
  background:transparent;
  cursor:pointer;
  z-index:2;
}

.theme-toggle-track{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:inherit;
  background:rgba(255,255,255,.045);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
  transition:
    background .65s var(--ease),
    border-color .65s var(--ease),
    box-shadow .65s var(--ease);
}

.theme-toggle-orb{
  position:absolute;
  left:4px;
  top:4px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#f4f4f1;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 4px 12px rgba(0,0,0,.28);
  transform:translateX(0) rotate(0deg);
  transition:
    transform .72s cubic-bezier(.34,1.56,.64,1),
    background .55s ease,
    box-shadow .55s ease;
}

.theme-icon{
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  transform:translateY(-50%);
  opacity:.38;
  transition:
    opacity .45s ease,
    transform .65s cubic-bezier(.34,1.56,.64,1),
    color .45s ease;
}

.theme-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-icon-sun{
  left:7px;
  color:#111;
  opacity:0;
  transform:translateY(-50%) rotate(-70deg) scale(.7);
}

.theme-icon-moon{
  right:7px;
  color:#f2f2ef;
  opacity:.62;
  transform:translateY(-50%) rotate(0deg) scale(1);
}

.theme-toggle:hover .theme-toggle-track{
  border-color:rgba(255,255,255,.28);
}

.theme-toggle:focus-visible{
  outline:1px solid currentColor;
  outline-offset:5px;
}

/* Light theme */
html[data-theme="light"]{
  color-scheme:light;
}

html[data-theme="light"] body{
  --bg:#f2f1ed;
  --surface:#e8e7e2;
  --text:#141414;
  --muted:#66645f;
  --faint:#aaa7a0;
  --line:rgba(0,0,0,.11);
  color:var(--text);
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.95),transparent 34%),
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.72),transparent 30%),
    linear-gradient(180deg,#f7f6f2 0%,#ecebe6 58%,#e7e5df 100%);
}

html[data-theme="light"] body::before{
  opacity:.055;
  background-image:radial-gradient(circle,rgba(0,0,0,.5) 1px,transparent 1px);
}

html[data-theme="light"] body::after{
  background:radial-gradient(circle at center,transparent 45%,rgba(81,76,66,.035) 72%,rgba(56,52,45,.11) 100%);
}

html[data-theme="light"] .ambient{
  opacity:.5;
  background:
    radial-gradient(circle at 28% 34%,rgba(255,255,255,.92),transparent 25%),
    radial-gradient(circle at 72% 64%,rgba(255,255,255,.7),transparent 29%);
}

html[data-theme="light"] .cursor-glow{
  opacity:.34;
  mix-blend-mode:multiply;
  background:radial-gradient(circle,rgba(0,0,0,.075) 0%,rgba(0,0,0,.025) 34%,transparent 72%);
}

html[data-theme="light"] .nav.scrolled{
  background:rgba(242,241,237,.72);
}

html[data-theme="light"] .serif,
html[data-theme="light"] #typed{
  color:#111;
}

html[data-theme="light"] .typed-cursor{
  color:#222;
}

html[data-theme="light"] .scroll-line{
  background:rgba(0,0,0,.14);
}

html[data-theme="light"] .scroll-line::after,
html[data-theme="light"] .progress{
  background:#171717;
}



html[data-theme="light"] .footer{
  border-color:rgba(0,0,0,.11);
}

html[data-theme="light"] .theme-toggle-track{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.055);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.36),
    0 8px 24px rgba(65,60,50,.1);
}

html[data-theme="light"] .theme-toggle-orb{
  background:#151515;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.16),
    0 4px 12px rgba(80,72,58,.16);
  transform:translateX(26px) rotate(180deg);
}

html[data-theme="light"] .theme-icon-sun{
  color:#f3f1eb;
  opacity:.82;
  transform:translateY(-50%) rotate(0deg) scale(1);
}

html[data-theme="light"] .theme-icon-moon{
  color:#151515;
  opacity:0;
  transform:translateY(-50%) rotate(70deg) scale(.7);
}

html.theme-switching::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:99997;
  pointer-events:none;
  background:var(--theme-flash,rgba(255,255,255,.08));
  animation:themeFlash .72s var(--ease) both;
}

@keyframes themeFlash{
  0%{
    opacity:0;
    clip-path:circle(0% at var(--theme-x,50%) var(--theme-y,50%));
  }
  45%{
    opacity:.38;
  }
  100%{
    opacity:0;
    clip-path:circle(150% at var(--theme-x,50%) var(--theme-y,50%));
  }
}

@media(max-width:680px){
  .theme-toggle{
    right:74px;
    width:48px;
    height:26px;
  }

  .theme-toggle-orb{
    width:16px;
    height:16px;
  }

  html[data-theme="light"] .theme-toggle-orb{
    transform:translateX(24px) rotate(180deg);
  }
}

@media(prefers-reduced-motion:reduce){
  html.theme-switching::before{
    animation:none;
    display:none;
  }

  .theme-toggle-orb,
  .theme-icon{
    transition-duration:.01ms;
  }
}


/* THEME SWITCH REFINEMENT + THEME-AWARE LIGHTBOX */
.lightbox{
  color:var(--text);
  background:rgba(0,0,0,.93);
  transition:
    background .7s var(--ease),
    color .55s ease,
    backdrop-filter .7s var(--ease),
    opacity .4s ease,
    visibility .4s;
}

.lightbox-top,
.lightbox-bottom,
.lightbox-close,
.lightbox-nav button{
  color:inherit;
}

html[data-theme="light"] .lightbox{
  color:#171715;
  background:rgba(244,243,239,.94);
  backdrop-filter:blur(22px) saturate(.92);
}

html[data-theme="light"] .lightbox-top,
html[data-theme="light"] .lightbox-bottom{
  color:#66645f;
}

html[data-theme="light"] .lightbox-close,
html[data-theme="light"] .lightbox-nav button{
  color:#171715;
}

html[data-theme="light"] .lightbox img{
  filter:none;
}

html[data-theme="light"] .lightbox-stage{
  background:transparent;
}

/* Refined toggle shell */
.theme-toggle{
  width:58px;
  height:30px;
}

.theme-toggle-track{
  overflow:visible;
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.014),
    0 10px 28px rgba(0,0,0,.16);
}

.theme-toggle-orb{
  left:4px;
  top:4px;
  width:20px;
  height:20px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:transparent;
  box-shadow:none;
  transform:translateX(0) rotate(0deg);
  transition:
    transform .74s cubic-bezier(.34,1.56,.64,1),
    box-shadow .55s ease;
}

.moon-phase{
  position:relative;
  width:18px;
  height:18px;
  display:block;
  border-radius:50%;
  overflow:hidden;
  transform:rotate(-12deg);
}

.moon-disc,
.moon-shadow{
  position:absolute;
  inset:0;
  display:block;
  border-radius:50%;
}

.moon-disc{
  background:#f2f2ef;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 4px 10px rgba(0,0,0,.25);
}

.moon-shadow{
  background:#111;
  transform:translateX(-58%);
  animation:moonPhases 10.5s ease-in-out infinite;
  will-change:transform;
}

.theme-icon{
  width:13px;
  height:13px;
}

.theme-icon-sun{
  left:8px;
  opacity:0;
  transform:translateY(-50%) rotate(-80deg) scale(.68);
}

.theme-icon-moon{
  right:8px;
  opacity:.48;
}

html[data-theme="light"] .theme-toggle-track{
  border-color:rgba(0,0,0,.14);
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(0,0,0,.035));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.54),
    0 10px 28px rgba(70,62,48,.12);
}

html[data-theme="light"] .theme-toggle-orb{
  transform:translateX(30px) rotate(180deg);
}

html[data-theme="light"] .moon-phase{
  overflow:visible;
  transform:none;
}

html[data-theme="light"] .moon-disc,
html[data-theme="light"] .moon-shadow{
  display:none;
}

html[data-theme="light"] .theme-toggle-orb::before,
html[data-theme="light"] .theme-toggle-orb::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

html[data-theme="light"] .theme-toggle-orb::before{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#161616;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.1),
    0 0 11px rgba(255,191,73,.18);
}

html[data-theme="light"] .theme-toggle-orb::after{
  width:20px;
  height:20px;
  background:
    linear-gradient(#161616,#161616) center top/1.25px 4px no-repeat,
    linear-gradient(#161616,#161616) center bottom/1.25px 4px no-repeat,
    linear-gradient(90deg,#161616,#161616) left center/4px 1.25px no-repeat,
    linear-gradient(90deg,#161616,#161616) right center/4px 1.25px no-repeat,
    linear-gradient(45deg,transparent 45%,#161616 46% 54%,transparent 55%) center/100% 100% no-repeat,
    linear-gradient(-45deg,transparent 45%,#161616 46% 54%,transparent 55%) center/100% 100% no-repeat;
  animation:sunRotate 12s linear infinite;
}

html[data-theme="light"] .theme-icon-sun{
  opacity:.72;
  color:#171715;
  transform:translateY(-50%) rotate(0deg) scale(1);
}

html[data-theme="light"] .theme-icon-moon{
  opacity:0;
  transform:translateY(-50%) rotate(70deg) scale(.7);
}

.theme-toggle:hover .theme-toggle-track{
  border-color:color-mix(in srgb,var(--text) 28%,transparent);
}

@keyframes moonPhases{
  0%{transform:translateX(-62%)}
  12.5%{transform:translateX(-38%)}
  25%{transform:translateX(-8%)}
  37.5%{transform:translateX(28%)}
  50%{transform:translateX(62%)}
  62.5%{transform:translateX(28%)}
  75%{transform:translateX(-8%)}
  87.5%{transform:translateX(-38%)}
  100%{transform:translateX(-62%)}
}

@keyframes sunRotate{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@media(max-width:680px){
  .theme-toggle{
    width:54px;
    height:28px;
  }

  .theme-toggle-orb{
    width:18px;
    height:18px;
  }

  .moon-phase{
    width:16px;
    height:16px;
  }

  html[data-theme="light"] .theme-toggle-orb{
    transform:translateX(28px) rotate(180deg);
  }
}

@media(prefers-reduced-motion:reduce){
  .moon-shadow,
  html[data-theme="light"] .theme-toggle-orb::after{
    animation:none;
  }
}


/* SMALL HEEZY COPY + ROOT SYSTEM VISUAL */
.heezy-copy{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  align-items:center;
  gap:clamp(30px,5vw,90px);
}

.heezy-text-panel{
  position:relative;
  min-width:0;
}

.heezy h1{
  max-width:11.5ch;
  font-size:clamp(2.75rem,5.2vw,5.8rem);
  line-height:.92;
  letter-spacing:-.05em;
}

.subtitle{
  margin-top:24px;
}

.heezy-root-visual{
  position:relative;
  width:min(38vw,520px);
  aspect-ratio:1;
  justify-self:end;
  opacity:.96;
  isolation:isolate;
}

.heezy-root-visual::before{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.035),transparent 58%);
  filter:blur(24px);
  z-index:0;
  animation:rootAura 8s ease-in-out infinite alternate;
}

.heezy-root-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:2;
}

.root-branch{
  fill:none;
  stroke:color-mix(in srgb,var(--text) 44%,transparent);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#rootGlow);
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:
    rootGrow 2.8s var(--ease) forwards,
    rootBreathe 7s ease-in-out 2.8s infinite alternate;
}

.root-branch.secondary{
  stroke:color-mix(in srgb,var(--text) 22%,transparent);
  stroke-width:.8;
  animation-delay:.18s,3s;
}

.root-node{
  fill:var(--bg);
  stroke:color-mix(in srgb,var(--text) 52%,transparent);
  stroke-width:1;
  opacity:0;
  animation:rootNodeIn .7s ease forwards;
}

.root-node-core{
  fill:var(--text);
  opacity:.85;
  filter:url(#rootGlow);
}

.root-glitch-shape{
  position:absolute;
  z-index:1;
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  pointer-events:none;
  opacity:.36;
  mix-blend-mode:difference;
}

.root-glitch-shape-a{
  width:74px;
  height:46px;
  left:12%;
  top:19%;
  transform:skewX(-12deg) rotate(-8deg);
  animation:rootShapeGlitchA 6.2s steps(1,end) infinite;
}

.root-glitch-shape-b{
  width:52px;
  height:52px;
  right:14%;
  bottom:18%;
  border-radius:50%;
  animation:rootShapeGlitchB 7.4s steps(1,end) infinite;
}

.root-code-flashes{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(.52rem,.62vw,.68rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 68%,transparent);
}

.root-code-flashes span{
  position:absolute;
  opacity:0;
  white-space:nowrap;
  text-shadow:0 0 12px color-mix(in srgb,var(--text) 18%,transparent);
}

.root-code-flashes span:nth-child(1){left:7%;top:31%;animation:codeFlash 8s 1.2s infinite}
.root-code-flashes span:nth-child(2){right:4%;top:22%;animation:codeFlash 8s 3s infinite}
.root-code-flashes span:nth-child(3){left:16%;bottom:17%;animation:codeFlash 8s 4.8s infinite}
.root-code-flashes span:nth-child(4){right:8%;bottom:31%;animation:codeFlash 8s 6.2s infinite}
.root-code-flashes span:nth-child(5){left:37%;top:8%;animation:codeFlash 8s 7.3s infinite}

html[data-theme="light"] .heezy-root-visual::before{
  background:radial-gradient(circle,rgba(0,0,0,.028),transparent 60%);
}

@keyframes rootGrow{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}

@keyframes rootBreathe{
  0%{opacity:.48;transform:translate3d(0,0,0)}
  50%{opacity:.8}
  100%{opacity:.56;transform:translate3d(1px,-1px,0)}
}

@keyframes rootNodeIn{
  from{opacity:0;transform:scale(.2)}
  to{opacity:1;transform:scale(1)}
}

@keyframes rootAura{
  from{transform:scale(.92);opacity:.35}
  to{transform:scale(1.06);opacity:.72}
}

@keyframes rootShapeGlitchA{
  0%,84%,100%{transform:skewX(-12deg) rotate(-8deg);clip-path:inset(0)}
  86%{transform:translateX(7px) skewX(22deg) rotate(-4deg);clip-path:inset(0 0 48% 0)}
  88%{transform:translateX(-4px) skewX(-26deg) rotate(-11deg);clip-path:inset(52% 0 0 0)}
  90%{transform:skewX(-12deg) rotate(-8deg);clip-path:inset(0)}
}

@keyframes rootShapeGlitchB{
  0%,78%,100%{transform:scale(1);border-radius:50%}
  80%{transform:scaleX(1.35) scaleY(.72) rotate(14deg);border-radius:18% 56% 32% 61%}
  82%{transform:scaleX(.78) scaleY(1.26) rotate(-10deg);border-radius:61% 22% 57% 29%}
  84%{transform:scale(1);border-radius:50%}
}

@keyframes codeFlash{
  0%,88%,100%{opacity:0;transform:translate3d(0,5px,0);filter:blur(2px)}
  90%{opacity:.18}
  92%{opacity:.88;transform:translate3d(0,0,0);filter:blur(0)}
  94%{opacity:.24;transform:translate3d(4px,-1px,0)}
  96%{opacity:0}
}

@media(max-width:980px){
  .heezy-copy{
    grid-template-columns:minmax(0,1fr) minmax(250px,.8fr);
    gap:32px;
  }

  .heezy h1{
    font-size:clamp(2.9rem,7.6vw,5.2rem);
  }

  .heezy-root-visual{
    width:min(40vw,420px);
  }
}

@media(max-width:680px){
  .heezy-copy{
    display:block;
  }

  .heezy h1{
    max-width:10.5ch;
    font-size:clamp(2.55rem,11.6vw,4.25rem);
    line-height:.94;
  }

  .heezy-root-visual{
    width:min(82vw,360px);
    margin:28px auto 0;
    justify-self:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .root-branch,
  .root-node,
  .root-glitch-shape,
  .root-code-flashes span,
  .heezy-root-visual::before{
    animation:none!important;
  }

  .root-branch{
    stroke-dashoffset:0;
  }

  .root-node{
    opacity:1;
  }
}


/* NAV BRAND LOGO */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.brand-logo-gif{
  width:30px;
  height:30px;
  object-fit:contain;
  flex:0 0 auto;
  display:block;
  mix-blend-mode:screen;
}

html[data-theme="light"] .brand-logo-gif{
  mix-blend-mode:multiply;
}

/* ROOT SYSTEM REFINEMENT */
.root-branch.fine{
  stroke-width:.55;
  stroke:color-mix(in srgb,var(--text) 18%,transparent);
  opacity:.62;
}

.root-branch.digital{
  stroke-width:.75;
  stroke:color-mix(in srgb,var(--text) 30%,transparent);
  stroke-dasharray:7 5 2 8;
  opacity:.58;
  animation:
    rootGrow 2.4s var(--ease) forwards,
    digitalRootShift 5.6s steps(1,end) 2.4s infinite;
}

.root-tip{
  fill:color-mix(in srgb,var(--text) 68%,transparent);
  opacity:.7;
}

.root-code-flashes span{
  opacity:0;
  animation-duration:11s;
  animation-timing-function:ease;
  animation-iteration-count:infinite;
}

.root-code-flashes span:nth-child(1){left:5%;top:24%;animation-name:codeFlashLong;animation-delay:.4s}
.root-code-flashes span:nth-child(2){right:5%;top:19%;animation-name:codeFlashLong;animation-delay:1.7s}
.root-code-flashes span:nth-child(3){left:14%;bottom:20%;animation-name:codeFlashLong;animation-delay:3.1s}
.root-code-flashes span:nth-child(4){right:8%;bottom:28%;animation-name:codeFlashLong;animation-delay:4.2s}
.root-code-flashes span:nth-child(5){left:36%;top:7%;animation-name:codeFlashLong;animation-delay:5.4s}
.root-code-flashes span:nth-child(6){left:41%;bottom:8%;animation-name:codeFlashLong;animation-delay:2.4s}
.root-code-flashes span:nth-child(7){right:20%;top:46%;animation-name:codeFlashLong;animation-delay:6.1s}

@keyframes codeFlashLong{
  0%,68%,100%{
    opacity:0;
    transform:translate3d(0,6px,0);
    filter:blur(2px);
  }
  72%{
    opacity:.18;
  }
  76%,89%{
    opacity:.88;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
  92%{
    opacity:.28;
    transform:translate3d(3px,-1px,0);
  }
  96%{
    opacity:0;
  }
}

@keyframes digitalRootShift{
  0%,78%,100%{stroke-dashoffset:0;transform:translate3d(0,0,0)}
  80%{stroke-dashoffset:-12;transform:translate3d(2px,-1px,0)}
  82%{stroke-dashoffset:-4;transform:translate3d(-1px,1px,0)}
  84%{stroke-dashoffset:-18;transform:translate3d(1px,0,0)}
  86%{stroke-dashoffset:0;transform:none}
}

@media(max-width:680px){
  .brand{
    gap:7px;
  }

  .brand-logo-gif{
    width:24px;
    height:24px;
  }
}


/* ROOT CLUSTER CENTER LOGO */
.root-center-logo{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  width:clamp(118px,15vw,205px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  pointer-events:none;
  isolation:isolate;
}

.root-center-logo img{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,.34))
    drop-shadow(0 0 18px rgba(255,255,255,.05));
}

.root-center-halo{
  position:absolute;
  inset:8%;
  z-index:1;
  border-radius:50%;
  background:
    radial-gradient(circle,
      color-mix(in srgb,var(--text) 8%,transparent) 0%,
      color-mix(in srgb,var(--text) 3%,transparent) 44%,
      transparent 72%);
  filter:blur(18px);
  animation:rootLogoHalo 7s ease-in-out infinite alternate;
}

.root-center-logo::before,
.root-center-logo::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.root-center-logo::before{
  width:116%;
  height:116%;
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  animation:rootLogoOrbit 16s linear infinite;
}

.root-center-logo::after{
  width:132%;
  height:132%;
  border:1px dashed color-mix(in srgb,var(--text) 8%,transparent);
  animation:rootLogoOrbitReverse 22s linear infinite;
}

html[data-theme="light"] .root-center-logo img{
  mix-blend-mode:multiply;
  filter:
    drop-shadow(0 10px 24px rgba(70,63,50,.16))
    drop-shadow(0 0 14px rgba(0,0,0,.025));
}

/* Give the root system a little breathing room around the logo */
.heezy-root-svg{
  transform:scale(1.04);
  transform-origin:50% 50%;
}

.root-branch{
  opacity:.78;
}

.root-branch.fine{
  opacity:.68;
}

.root-branch.digital{
  opacity:.62;
}

@keyframes rootLogoHalo{
  from{transform:scale(.92);opacity:.35}
  to{transform:scale(1.08);opacity:.76}
}

@keyframes rootLogoOrbit{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes rootLogoOrbitReverse{
  to{transform:translate(-50%,-50%) rotate(-360deg)}
}

@media(max-width:980px){
  .root-center-logo{
    width:clamp(105px,18vw,170px);
  }
}

@media(max-width:680px){
  .root-center-logo{
    width:clamp(102px,34vw,150px);
  }
}

@media(prefers-reduced-motion:reduce){
  .root-center-halo,
  .root-center-logo::before,
  .root-center-logo::after{
    animation:none!important;
  }
}


/* BRAIN PANEL + ROOT CONNECTIONS */
.root-code-flashes{
  font-size:clamp(.62rem,.76vw,.84rem);
}

.brain-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(26px,3.2vw,48px);
  border:1px solid color-mix(in srgb,var(--text) 11%,transparent);
  border-radius:18px 28px 16px 34px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--surface) 84%,transparent),
      color-mix(in srgb,var(--bg) 68%,transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--text) 2%,transparent),
    0 28px 90px rgba(0,0,0,.16);
  backdrop-filter:blur(16px);
  clip-path:polygon(2% 7%, 18% 2%, 42% 5%, 61% 1%, 82% 5%, 98% 14%, 96% 38%, 99% 59%, 95% 84%, 78% 98%, 54% 94%, 32% 99%, 10% 91%, 2% 70%, 4% 44%);
}

.brain-panel::before,
.brain-panel::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.brain-panel::before{
  inset:12px;
  border:1px solid color-mix(in srgb,var(--text) 6%,transparent);
  border-radius:14px 22px 12px 26px;
  clip-path:inherit;
}

.brain-panel::after{
  width:150px;
  height:150px;
  right:-45px;
  top:-35px;
  border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--text) 5%,transparent),
    transparent 68%);
  filter:blur(18px);
}

.brain-panel-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.48;
  pointer-events:none;
}

.brain-line{
  fill:none;
  stroke:color-mix(in srgb,var(--text) 12%,transparent);
  stroke-width:.45;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:5 9;
  animation:brainLineFlow 14s linear infinite;
}

.brain-line-b{animation-delay:-4s}
.brain-line-c{animation-delay:-8s}

.brain-node{
  fill:var(--text);
  opacity:.4;
  animation:brainNodePulse 4.2s ease-in-out infinite;
}

.brain-node:nth-of-type(2){animation-delay:-1.4s}
.brain-node:nth-of-type(3){animation-delay:-2.8s}

.brain-panel h1,
.brain-panel .subtitle{
  position:relative;
  z-index:2;
}

.heezy-copy{
  position:relative;
}

.heezy-neural-links{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
  pointer-events:none;
}

.brain-panel,
.heezy-root-visual{
  position:relative;
  z-index:2;
}

.neural-link{
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.neural-link-main{
  stroke:color-mix(in srgb,var(--text) 24%,transparent);
  stroke-width:1.15;
  stroke-dasharray:7 12;
  animation:neuralFlowForward 8s linear infinite;
}

.neural-link-return{
  stroke:color-mix(in srgb,var(--text) 12%,transparent);
  stroke-width:.8;
  stroke-dasharray:2 10;
  animation:neuralFlowBackward 11s linear infinite;
}

.neural-pulse{
  fill:var(--text);
  opacity:.72;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--text) 34%,transparent));
}

.neural-pulse-a{
  animation:neuralPulseA 6.4s ease-in-out infinite;
}

.neural-pulse-b{
  animation:neuralPulseB 7.8s ease-in-out infinite reverse;
}

html[data-theme="light"] .brain-panel{
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.72),
      rgba(230,228,221,.64));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 28px 80px rgba(70,62,48,.11);
}

/* Definitive animated sun override */
html[data-theme="light"] .theme-toggle-orb::after{
  animation:sunRotateBreatheFixed 6.8s ease-in-out infinite !important;
  transform-origin:50% 50%;
}

html[data-theme="light"] .theme-icon-sun svg{
  animation:sunGlyphSpin 4.8s linear infinite !important;
  transform-origin:50% 50%;
}

@keyframes sunRotateBreatheFixed{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(.9)}
  25%{transform:translate(-50%,-50%) rotate(90deg) scale(1.08)}
  50%{transform:translate(-50%,-50%) rotate(180deg) scale(.96)}
  75%{transform:translate(-50%,-50%) rotate(270deg) scale(1.05)}
  100%{transform:translate(-50%,-50%) rotate(360deg) scale(.9)}
}

@keyframes sunGlyphSpin{
  to{transform:rotate(360deg)}
}

@keyframes brainLineFlow{
  to{stroke-dashoffset:-140}
}

@keyframes brainNodePulse{
  0%,100%{opacity:.18;transform:scale(.8)}
  50%{opacity:.7;transform:scale(1.35)}
}

@keyframes neuralFlowForward{
  to{stroke-dashoffset:-190}
}

@keyframes neuralFlowBackward{
  to{stroke-dashoffset:170}
}

@keyframes neuralPulseA{
  0%,100%{offset-distance:0%;opacity:0}
  12%{opacity:.8}
  88%{opacity:.8}
  100%{offset-distance:100%;opacity:0}
}

@keyframes neuralPulseB{
  0%,100%{offset-distance:0%;opacity:0}
  15%{opacity:.65}
  85%{opacity:.65}
  100%{offset-distance:100%;opacity:0}
}

@media(max-width:680px){
  .brain-panel{
    padding:24px 22px;
    border-radius:16px 22px 14px 26px;
  }

  .heezy-neural-links{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .brain-line,
  .brain-node,
  .neural-link,
  .neural-pulse,
  html[data-theme="light"] .theme-toggle-orb::after,
  html[data-theme="light"] .theme-icon-sun svg{
    animation:none!important;
  }
}


/* HEADLINE NEURAL FIELD — PANEL REMOVED */
.brain-panel{
  overflow:visible;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  clip-path:none;
}

.brain-panel::before,
.brain-panel::after{
  display:none;
}

/* Local synapses surrounding the headline */
.brain-panel{
  isolation:isolate;
}

.brain-panel h1,
.brain-panel .subtitle{
  position:relative;
  z-index:4;
}

.brain-panel .headline-synapse-field{
  position:absolute;
  inset:-18% -16% -20% -12%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}

.headline-synapse{
  fill:none;
  stroke:color-mix(in srgb,var(--text) 18%,transparent);
  stroke-width:1;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:4 9;
  animation:headlineSynapseFlow 11s linear infinite;
}

.headline-synapse.fine{
  stroke-width:.65;
  stroke:color-mix(in srgb,var(--text) 11%,transparent);
  stroke-dasharray:2 8;
  animation-duration:14s;
}

.headline-synapse.digital{
  stroke-width:.8;
  stroke:color-mix(in srgb,var(--text) 24%,transparent);
  stroke-dasharray:8 5 2 7;
  animation:
    headlineSynapseFlow 9s linear infinite,
    headlineSynapseGlitch 6.4s steps(1,end) infinite;
}

.headline-synapse-node{
  fill:var(--text);
  opacity:.45;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 22%,transparent));
  animation:headlineNodePulse 4.8s ease-in-out infinite;
}

/* Connections now visually emerge from around the headline itself */
.heezy-neural-links{
  z-index:3;
}

.neural-link-main{
  stroke:color-mix(in srgb,var(--text) 28%,transparent);
  stroke-width:1.15;
  stroke-dasharray:6 11;
}

.neural-link-return{
  stroke:color-mix(in srgb,var(--text) 14%,transparent);
  stroke-width:.78;
  stroke-dasharray:2 9;
}

/* Extra branching filaments along the route */
.neural-link-branch{
  fill:none;
  stroke:color-mix(in srgb,var(--text) 12%,transparent);
  stroke-width:.62;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:3 8;
  animation:neuralBranchFlow 13s linear infinite;
}

.neural-link-branch.digital{
  stroke:color-mix(in srgb,var(--text) 20%,transparent);
  stroke-dasharray:7 4 1 7;
  animation:
    neuralBranchFlow 10s linear infinite,
    neuralBranchGlitch 7.2s steps(1,end) infinite;
}

@keyframes headlineSynapseFlow{
  to{stroke-dashoffset:-150}
}

@keyframes headlineNodePulse{
  0%,100%{opacity:.15;transform:scale(.75)}
  50%{opacity:.72;transform:scale(1.35)}
}

@keyframes headlineSynapseGlitch{
  0%,78%,100%{transform:none;opacity:.58}
  80%{transform:translate3d(3px,-1px,0);opacity:.88}
  82%{transform:translate3d(-2px,1px,0);opacity:.34}
  84%{transform:translate3d(1px,0,0);opacity:.72}
  86%{transform:none;opacity:.58}
}

@keyframes neuralBranchFlow{
  to{stroke-dashoffset:-135}
}

@keyframes neuralBranchGlitch{
  0%,82%,100%{transform:none}
  84%{transform:translate3d(2px,-1px,0)}
  86%{transform:translate3d(-1px,1px,0)}
  88%{transform:none}
}

@media(max-width:680px){
  .brain-panel{
    padding:0;
  }

  .brain-panel .headline-synapse-field{
    inset:-13% -8% -12% -7%;
  }
}

@media(prefers-reduced-motion:reduce){
  .headline-synapse,
  .headline-synapse-node,
  .neural-link-branch{
    animation:none!important;
  }
}


/* ORGANIC ROOT VARIATION + SOUND-DESIGN LFO LAYERS */
.root-code-flashes span:nth-child(8){
  left:7%;
  top:54%;
  animation-name:codeFlashLong;
  animation-delay:7.2s;
}

.root-code-flashes span:nth-child(9){
  right:4%;
  bottom:10%;
  animation-name:codeFlashLong;
  animation-delay:8.1s;
}

/* More varied root personalities */
.root-branch.root-thick{
  stroke-width:1.45;
  stroke:color-mix(in srgb,var(--text) 46%,transparent);
}

.root-branch.root-soft{
  stroke-width:.82;
  stroke:color-mix(in srgb,var(--text) 25%,transparent);
  opacity:.68;
}

.root-branch.root-wild{
  stroke-width:.7;
  stroke:color-mix(in srgb,var(--text) 20%,transparent);
  stroke-dasharray:3 7;
  opacity:.64;
  animation:
    rootGrow 3.2s var(--ease) forwards,
    rootWildPulse 8.6s ease-in-out 3.2s infinite alternate;
}

.root-branch.root-tendril{
  stroke-width:.48;
  stroke:color-mix(in srgb,var(--text) 15%,transparent);
  opacity:.58;
}

.root-node.root-hub{
  fill:color-mix(in srgb,var(--bg) 80%,transparent);
  stroke:color-mix(in srgb,var(--text) 62%,transparent);
  stroke-width:1.2;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--text) 14%,transparent));
}

.root-node.root-micro{
  stroke-width:.7;
  opacity:.62;
}

.root-node.root-signal{
  fill:var(--text);
  opacity:.78;
  animation:
    rootNodeIn .7s ease forwards,
    rootSignalPulse 3.8s ease-in-out infinite;
}

/* Sound-design waveform paths */
.root-waveform{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.62;
}

.root-waveform.saw{
  stroke:color-mix(in srgb,var(--text) 26%,transparent);
  stroke-width:.78;
  stroke-dasharray:6 7;
  animation:
    waveformReveal 2.4s var(--ease) forwards,
    sawLfoTravel var(--lfo-duration,6s) linear 2.4s infinite;
}

.root-waveform.square{
  stroke:color-mix(in srgb,var(--text) 20%,transparent);
  stroke-width:.7;
  stroke-dasharray:4 8;
  animation:
    waveformReveal 2.8s var(--ease) forwards,
    squareLfoTravel var(--lfo-duration,7.5s) steps(8,end) 2.8s infinite;
}

.root-waveform-label{
  fill:color-mix(in srgb,var(--text) 42%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.55;
}

@keyframes rootWildPulse{
  0%{opacity:.35;transform:translate3d(0,0,0)}
  45%{opacity:.72}
  100%{opacity:.48;transform:translate3d(1.5px,-1px,0)}
}

@keyframes rootSignalPulse{
  0%,100%{opacity:.35;transform:scale(.72)}
  50%{opacity:.95;transform:scale(1.45)}
}

@keyframes waveformReveal{
  from{stroke-dashoffset:320;opacity:0}
  to{stroke-dashoffset:0;opacity:.62}
}

@keyframes sawLfoTravel{
  0%{
    stroke-dashoffset:0;
    transform:translate3d(0,0,0) scaleY(.8);
  }
  38%{
    stroke-dashoffset:-34;
    transform:translate3d(1px,-1px,0) scaleY(1.18);
  }
  72%{
    stroke-dashoffset:-71;
    transform:translate3d(-1px,1px,0) scaleY(.92);
  }
  100%{
    stroke-dashoffset:-108;
    transform:translate3d(0,0,0) scaleY(1.05);
  }
}

@keyframes squareLfoTravel{
  0%{
    stroke-dashoffset:0;
    transform:scaleX(.92);
  }
  32%{
    stroke-dashoffset:-24;
    transform:scaleX(1.08);
  }
  67%{
    stroke-dashoffset:-58;
    transform:scaleX(.97);
  }
  100%{
    stroke-dashoffset:-96;
    transform:scaleX(1.04);
  }
}

@media(prefers-reduced-motion:reduce){
  .root-branch.root-wild,
  .root-node.root-signal,
  .root-waveform{
    animation:none!important;
  }
}


/* TRUE LFO MODULES + ROOT LENGTH VARIATION */
.root-waveform-module{
  transform-box:fill-box;
  transform-origin:center;
  opacity:.78;
}

.root-waveform-guide{
  fill:none;
  stroke:color-mix(in srgb,var(--text) 8%,transparent);
  stroke-width:.55;
  vector-effect:non-scaling-stroke;
}

.root-waveform-signal{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 12%,transparent));
}

.root-waveform-signal.saw-live{
  stroke:color-mix(in srgb,var(--text) 32%,transparent);
  stroke-width:.95;
  stroke-dasharray:180;
  stroke-dashoffset:180;
  animation:
    waveformDraw 1.6s var(--ease) forwards,
    waveformSawShift var(--wave-speed,4.8s) linear 1.6s infinite;
}

.root-waveform-signal.triple-decay{
  stroke:color-mix(in srgb,var(--text) 26%,transparent);
  stroke-width:.9;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:
    waveformDraw 1.9s var(--ease) forwards,
    waveformTripleDecay var(--wave-speed,6.6s) ease-in-out 1.9s infinite;
}

.root-waveform-signal.square-live{
  stroke:color-mix(in srgb,var(--text) 24%,transparent);
  stroke-width:.9;
  stroke-dasharray:200;
  stroke-dashoffset:200;
  animation:
    waveformDraw 1.8s var(--ease) forwards,
    waveformSquareStep var(--wave-speed,5.8s) steps(12,end) 1.8s infinite;
}

.root-waveform-head{
  fill:var(--text);
  opacity:.72;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--text) 22%,transparent));
}

.root-waveform-head.saw-head{
  animation:sawHeadTravel var(--wave-speed,4.8s) linear infinite;
}

.root-waveform-head.decay-head{
  animation:decayHeadTravel var(--wave-speed,6.6s) ease-in-out infinite;
}

.root-waveform-head.square-head{
  animation:squareHeadTravel var(--wave-speed,5.8s) steps(12,end) infinite;
}

.root-waveform-module.saw-module{
  animation:sawModuleBreath 8s ease-in-out infinite alternate;
}

.root-waveform-module.decay-module{
  animation:decayModuleMorph 9.5s ease-in-out infinite alternate;
}

.root-waveform-module.square-module{
  animation:squareModulePulse 7.6s steps(4,end) infinite;
}

/* Additional non-uniform root lengths */
.root-branch.root-extra-short{
  stroke-width:.5;
  opacity:.52;
}

.root-branch.root-extra-long{
  stroke-width:1.05;
  opacity:.76;
}

.root-branch.root-curled{
  stroke-width:.62;
  opacity:.64;
  stroke-dasharray:2 6;
  animation:
    rootGrow 3.5s var(--ease) forwards,
    curledRootDrift 10s ease-in-out 3.5s infinite alternate;
}

@keyframes waveformDraw{
  to{stroke-dashoffset:0}
}

@keyframes waveformSawShift{
  0%{stroke-dashoffset:0;transform:translateX(0) scaleY(.88)}
  40%{stroke-dashoffset:-36;transform:translateX(1px) scaleY(1.18)}
  72%{stroke-dashoffset:-72;transform:translateX(-1px) scaleY(.96)}
  100%{stroke-dashoffset:-108;transform:translateX(0) scaleY(1.05)}
}

@keyframes waveformTripleDecay{
  0%{stroke-dashoffset:0;transform:scaleY(.92)}
  28%{stroke-dashoffset:-28;transform:scaleY(1.16)}
  48%{stroke-dashoffset:-54;transform:scaleY(.76)}
  70%{stroke-dashoffset:-84;transform:scaleY(1.04)}
  100%{stroke-dashoffset:-122;transform:scaleY(.9)}
}

@keyframes waveformSquareStep{
  0%{stroke-dashoffset:0;transform:translateY(0)}
  25%{stroke-dashoffset:-26;transform:translateY(-1px)}
  50%{stroke-dashoffset:-52;transform:translateY(1px)}
  75%{stroke-dashoffset:-78;transform:translateY(-.5px)}
  100%{stroke-dashoffset:-104;transform:translateY(0)}
}

@keyframes sawHeadTravel{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:.85}
  92%{opacity:.85}
  100%{offset-distance:100%;opacity:0}
}

@keyframes decayHeadTravel{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:.8}
  90%{opacity:.8}
  100%{offset-distance:100%;opacity:0}
}

@keyframes squareHeadTravel{
  0%{offset-distance:0%;opacity:0}
  12%{opacity:.8}
  88%{opacity:.8}
  100%{offset-distance:100%;opacity:0}
}

@keyframes sawModuleBreath{
  from{transform:scale(.96) rotate(-1deg)}
  to{transform:scale(1.04) rotate(1deg)}
}

@keyframes decayModuleMorph{
  from{transform:skewX(-2deg) scaleY(.92)}
  to{transform:skewX(2deg) scaleY(1.08)}
}

@keyframes squareModulePulse{
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(-1px)}
  50%{transform:translateY(1px)}
  75%{transform:translateY(-.5px)}
}

@keyframes curledRootDrift{
  from{transform:translate3d(0,0,0);opacity:.42}
  to{transform:translate3d(1.5px,-1px,0);opacity:.72}
}

@media(prefers-reduced-motion:reduce){
  .root-waveform-signal,
  .root-waveform-head,
  .root-waveform-module,
  .root-branch.root-curled{
    animation:none!important;
  }
}


/* FIXED-POSITION LFO MODULES */
.root-waveform-module{
  animation:none!important;
  transform:none!important;
}

.root-waveform-signal.saw-live{
  animation:
    waveformDraw 1.6s var(--ease) forwards,
    waveformSawInPlace var(--wave-speed,4.8s) linear 1.6s infinite;
}

.root-waveform-signal.triple-decay{
  animation:
    waveformDraw 1.9s var(--ease) forwards,
    waveformTripleDecayInPlace var(--wave-speed,6.6s) ease-in-out 1.9s infinite;
}

.root-waveform-signal.square-live{
  animation:
    waveformDraw 1.8s var(--ease) forwards,
    waveformSquareInPlace var(--wave-speed,5.8s) steps(12,end) 1.8s infinite;
}

@keyframes waveformSawInPlace{
  0%{
    stroke-dashoffset:0;
    opacity:.58;
  }
  35%{
    stroke-dashoffset:-32;
    opacity:.84;
  }
  68%{
    stroke-dashoffset:-67;
    opacity:.7;
  }
  100%{
    stroke-dashoffset:-104;
    opacity:.58;
  }
}

@keyframes waveformTripleDecayInPlace{
  0%{
    stroke-dashoffset:0;
    opacity:.54;
  }
  25%{
    stroke-dashoffset:-26;
    opacity:.86;
  }
  52%{
    stroke-dashoffset:-58;
    opacity:.62;
  }
  76%{
    stroke-dashoffset:-88;
    opacity:.8;
  }
  100%{
    stroke-dashoffset:-122;
    opacity:.54;
  }
}

@keyframes waveformSquareInPlace{
  0%{
    stroke-dashoffset:0;
    opacity:.56;
  }
  25%{
    stroke-dashoffset:-24;
    opacity:.82;
  }
  50%{
    stroke-dashoffset:-51;
    opacity:.64;
  }
  75%{
    stroke-dashoffset:-77;
    opacity:.8;
  }
  100%{
    stroke-dashoffset:-103;
    opacity:.56;
  }
}


/* REFINED DIGITAL ROOT LANGUAGE */
.root-branch.digital{
  stroke-width:.68;
  stroke:color-mix(in srgb,var(--text) 22%,transparent);
  stroke-dasharray:3 7 1 9;
  opacity:.5;
  filter:none;
  animation:
    rootGrow 2.7s var(--ease) forwards,
    digitalRootSignal 8.4s linear 2.7s infinite;
}

.root-branch.digital:nth-child(even){
  stroke-dasharray:8 11;
  opacity:.38;
}

@keyframes digitalRootSignal{
  0%{
    stroke-dashoffset:0;
    opacity:.34;
  }
  38%{
    stroke-dashoffset:-18;
    opacity:.62;
  }
  72%{
    stroke-dashoffset:-43;
    opacity:.44;
  }
  100%{
    stroke-dashoffset:-68;
    opacity:.34;
  }
}

/* Reduce visual repetition and make branch hierarchy clearer */
.root-branch.root-thick{
  stroke-width:1.3;
}

.root-branch.root-soft{
  stroke-width:.72;
  opacity:.58;
}

.root-branch.root-tendril,
.root-branch.root-extra-short{
  opacity:.46;
}

.root-branch.root-extra-long{
  opacity:.64;
}

.root-node.root-hub{
  stroke-width:1;
  opacity:.82;
}

.root-node.root-micro{
  opacity:.48;
}


/* EXPRESSIVE MAIN ROOT BRANCHES */
.root-branch.root-thick{
  stroke-width:1.22;
  stroke:color-mix(in srgb,var(--text) 42%,transparent);
  opacity:.82;
  transform-box:fill-box;
  transform-origin:center;
  animation:
    rootGrow 3.1s var(--ease) forwards,
    mainRootOrganicMotion 9.5s ease-in-out 3.1s infinite alternate,
    mainRootEnergy 6.8s ease-in-out 3.1s infinite;
}

.root-branch.root-thick:nth-child(1){
  animation-duration:3.1s,10.8s,7.4s;
  animation-delay:0s,3.1s,3.1s;
}

.root-branch.root-thick:nth-child(3){
  animation-duration:3.1s,12.2s,8.1s;
  animation-delay:.12s,3.22s,3.22s;
}

.root-branch.root-thick:nth-child(5){
  animation-duration:3.1s,11.4s,7.8s;
  animation-delay:.24s,3.34s,3.34s;
}

.root-branch.root-thick:nth-child(6){
  animation-duration:3.1s,13s,8.6s;
  animation-delay:.36s,3.46s,3.46s;
}

.root-branch.root-thick::selection{
  background:transparent;
}

@keyframes mainRootOrganicMotion{
  0%{
    transform:translate3d(0,0,0) rotate(0deg) scaleY(.985);
  }
  35%{
    transform:translate3d(.6px,-.4px,0) rotate(.12deg) scaleY(1.012);
  }
  68%{
    transform:translate3d(-.45px,.55px,0) rotate(-.09deg) scaleY(.994);
  }
  100%{
    transform:translate3d(.3px,-.25px,0) rotate(.06deg) scaleY(1.006);
  }
}

@keyframes mainRootEnergy{
  0%,100%{
    stroke-dasharray:1 0;
    opacity:.68;
    filter:drop-shadow(0 0 0 transparent);
  }
  42%{
    opacity:.9;
    filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 12%,transparent));
  }
  58%{
    stroke-dasharray:120 14;
    stroke-dashoffset:-18;
    opacity:.78;
  }
  74%{
    stroke-dasharray:1 0;
    filter:drop-shadow(0 0 2px color-mix(in srgb,var(--text) 8%,transparent));
  }
}

/* Small offshoot accents on primary roots */
.root-branch.root-thick + .root-branch.root-soft{
  opacity:.54;
}

@media(prefers-reduced-motion:reduce){
  .root-branch.root-thick{
    animation:none!important;
    stroke-dashoffset:0;
  }
}


/* MOBILE HEEZY ORDER: ROOT CLUSTER BEFORE HEADLINE */
@media(max-width:680px){
  .heezy-copy{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  .heezy-root-visual{
    order:1;
    margin:0 auto 30px;
  }

  .heezy-text-panel{
    order:2;
  }

  .heezy-neural-links{
    display:none;
  }
}


/* ALIGN SUBTITLE WITH THE START OF “SOUND” */
.heezy-text-panel{
  --subtitle-x:0px;
}

.sound-anchor{
  display:inline-block;
}

.heezy-text-panel .subtitle{
  margin-left:var(--subtitle-x);
  width:max-content;
  transition:margin-left .45s var(--ease);
}

@media(max-width:680px){
  .heezy-text-panel .subtitle{
    margin-left:var(--subtitle-x);
  }
}


/* NUDGE SUBTITLE SLIGHTLY RIGHT OF “SOUND” */
.heezy-text-panel .subtitle{
  margin-left:calc(var(--subtitle-x) + .35em);
}


/* REMOVE ALL HEADLINE/SUBTITLE CONTAINER BOX STYLING */
.heezy-text-panel,
.brain-panel,
html[data-theme="light"] .heezy-text-panel,
html[data-theme="light"] .brain-panel,
html[data-theme="dark"] .heezy-text-panel,
html[data-theme="dark"] .brain-panel{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  clip-path:none!important;
}

.heezy-text-panel::before,
.heezy-text-panel::after,
.brain-panel::before,
.brain-panel::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

.heezy-text-panel h1,
.heezy-text-panel .subtitle{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* REMOVE CUSTOM CURSOR ARTIFACT ON TOUCH/MOBILE */
@media(max-width:680px), (hover:none), (pointer:coarse){
  .cursor-plus,
  .cursor-glow{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
  }
}


/* REMOVE MOBILE SYNAPSE DOT ARTIFACT */
@media(max-width:680px){
  .headline-synapse-node,
  .neural-pulse{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
  }
}


/* ROOT CLUSTER HOVER DENSITY */
.heezy-root-visual{
  --root-hover-density:0;
}

.root-hover-tendril{
  fill:none;
  stroke:color-mix(in srgb,var(--text) 18%,transparent);
  stroke-width:.48;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transition:
    opacity .75s var(--ease),
    transform 1.05s var(--ease),
    stroke-dashoffset 1.2s var(--ease);
}

.root-hover-tendril:nth-child(3n/**/+1){
  stroke-width:.38;
  stroke:color-mix(in srgb,var(--text) 13%,transparent);
}

.root-hover-tendril:nth-child(3n/**/+2){
  stroke-width:.56;
  stroke:color-mix(in srgb,var(--text) 21%,transparent);
}

.heezy-root-visual.is-density-hovered .root-hover-tendril{
  opacity:.68;
  transform:scale(1.018);
  stroke-dashoffset:0!important;
}

.heezy-root-visual.is-density-hovered .root-branch.fine,
.heezy-root-visual.is-density-hovered .root-branch.root-tendril,
.heezy-root-visual.is-density-hovered .root-node.root-micro{
  opacity:.78;
}

.heezy-root-visual .root-branch.fine,
.heezy-root-visual .root-branch.root-tendril,
.heezy-root-visual .root-node.root-micro{
  transition:
    opacity .8s var(--ease),
    filter .8s ease;
}

.heezy-root-visual.is-density-hovered .root-branch.fine,
.heezy-root-visual.is-density-hovered .root-branch.root-tendril{
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--text) 8%,transparent));
}

@media(hover:none), (pointer:coarse){
  .root-hover-tendril{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .root-hover-tendril,
  .heezy-root-visual .root-branch.fine,
  .heezy-root-visual .root-branch.root-tendril,
  .heezy-root-visual .root-node.root-micro{
    transition:none!important;
  }
}


/* STRONG, CLEAR ROOT DENSITY EXPANSION ON HOVER */
.root-hover-tendril{
  stroke-width:.82;
  stroke:color-mix(in srgb,var(--text) 34%,transparent);
  opacity:0;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--text) 9%,transparent));
  transform:scale(.94);
  transition:
    opacity .48s ease,
    transform .8s var(--ease),
    stroke-dashoffset .9s var(--ease);
}

.root-hover-tendril:nth-child(3n/**/+1){
  stroke-width:.62;
  stroke:color-mix(in srgb,var(--text) 25%,transparent);
}

.root-hover-tendril:nth-child(3n/**/+2){
  stroke-width:1;
  stroke:color-mix(in srgb,var(--text) 42%,transparent);
}

.root-hover-tendril:nth-child(4n){
  stroke-dasharray:5 7;
}

.heezy-root-visual.is-density-hovered .root-hover-tendril{
  opacity:.9;
  transform:scale(1.035);
  stroke-dashoffset:0!important;
}

.heezy-root-visual.is-density-hovered .root-branch.fine,
.heezy-root-visual.is-density-hovered .root-branch.root-tendril,
.heezy-root-visual.is-density-hovered .root-node.root-micro{
  opacity:.92;
}

.heezy-root-visual.is-density-hovered .root-branch.fine,
.heezy-root-visual.is-density-hovered .root-branch.root-tendril{
  stroke-width:calc(var(--hover-root-width, .7) * 1px);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 13%,transparent));
}

.heezy-root-visual.is-density-hovered{
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--text) 6%,transparent));
}

@media(prefers-reduced-motion:reduce){
  .root-hover-tendril{
    transition:none!important;
  }
}


/* MOBILE TAP-TO-DENSIFY ROOT CLUSTER */
@media(hover:none), (pointer:coarse){
  .root-hover-tendril{
    display:block!important;
    pointer-events:none;
  }

  .heezy-root-visual{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  .heezy-root-visual.is-density-hovered .root-hover-tendril{
    opacity:.9;
    transform:scale(1.035);
    stroke-dashoffset:0!important;
  }
}


/* CENTER THE THEME SWITCH ON MOBILE */
@media(max-width:680px){
  .nav{
    grid-template-columns:1fr auto 1fr;
  }

  .theme-toggle{
    left:50%;
    right:auto;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:3;
  }

  .brand{
    justify-self:start;
    min-width:0;
  }

  .nav-contact{
    justify-self:end;
    margin-left:12px;
    z-index:2;
  }
}


/* MOBILE NAV: EVEN SPACING, NO OVERLAP */
@media(max-width:680px){
  .nav{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-left:14px;
    padding-right:14px;
  }

  .nav-center{
    display:none!important;
  }

  .brand,
  .theme-toggle,
  .nav-contact{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    justify-self:auto!important;
    flex:0 1 auto;
  }

  .brand{
    min-width:0;
    max-width:42%;
    gap:6px;
    font-size:clamp(.55rem,2.45vw,.7rem);
    letter-spacing:.08em;
    white-space:nowrap;
  }

  .brand-logo-gif{
    flex:0 0 auto;
  }

  .theme-toggle{
    flex:0 0 auto;
    z-index:auto;
  }

  .nav-contact{
    flex:0 0 auto;
    font-size:.68rem;
    white-space:nowrap;
  }
}

/* MOBILE ROOT TAP: DISABLE TEXT SELECTION AND KEEP TAP TARGET ACTIVE */
@media(hover:none), (pointer:coarse), (max-width:680px){
  .heezy-root-visual,
  .heezy-root-visual *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
  }

  .heezy-root-visual{
    pointer-events:auto!important;
    touch-action:manipulation;
    cursor:pointer;
  }

  .root-code-flashes,
  .root-code-flashes *,
  .root-center-logo,
  .root-center-logo *,
  .root-glitch-shape{
    pointer-events:none!important;
  }
}


/* MOBILE CONTACT + SUBTITLE POSITION FIX */
@media(max-width:680px){
  /* Prevent the legacy pseudo-label from duplicating the real link text. */
  .nav-contact{
    font-size:.68rem!important;
  }

  .nav-contact::before{
    content:none!important;
    display:none!important;
  }

  /* Keep the rotating descriptor aligned with the mobile headline,
     rather than inheriting the desktop “sound” offset. */
  .heezy-text-panel .subtitle{
    margin-left:0!important;
    width:auto;
    max-width:100%;
    text-align:left;
  }
}


/* CONTACT MAIL ICON + MATCHED NAV TYPE SIZE */
.nav-contact{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:inherit;
  letter-spacing:inherit;
  line-height:1;
}

.nav-mail-icon{
  width:15px;
  height:11px;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.nav-mail-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.nav-mail-icon rect,
.nav-mail-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.nav-mail-icon .mail-flap{
  transform-box:fill-box;
  transform-origin:50% 0%;
}

.nav-contact:hover .mail-flap,
.nav-contact:focus-visible .mail-flap{
  animation:mailFlapOpen .72s var(--ease) both;
}

.nav-contact:hover .nav-mail-icon,
.nav-contact:focus-visible .nav-mail-icon{
  animation:mailIconNudge .72s var(--ease) both;
}

@keyframes mailFlapOpen{
  0%,100%{transform:rotateX(0deg)}
  42%{transform:rotateX(58deg)}
  68%{transform:rotateX(26deg)}
}

@keyframes mailIconNudge{
  0%,100%{transform:translateY(0)}
  42%{transform:translateY(-1.5px)}
  68%{transform:translateY(-.5px)}
}

@media(max-width:680px){
  .nav-contact{
    font-size:clamp(.55rem,2.45vw,.7rem)!important;
    letter-spacing:.08em;
    gap:5px;
  }

  .nav-mail-icon{
    width:13px;
    height:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .nav-contact:hover .mail-flap,
  .nav-contact:focus-visible .mail-flap,
  .nav-contact:hover .nav-mail-icon,
  .nav-contact:focus-visible .nav-mail-icon{
    animation:none!important;
  }
}


/* DESKTOP NAV: BRAND LEFT, MODE SWITCH CENTER, CONTACT RIGHT */
@media(min-width:681px){
  .nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    column-gap:28px;
  }

  .brand{
    grid-column:1;
    justify-self:start;
  }

  .theme-toggle{
    grid-column:2;
    justify-self:center;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
  }

  .nav-contact{
    grid-column:3;
    justify-self:end;
    margin:0!important;
  }
}


/* ROOT CODE LABEL SPACING */
.root-code-label[data-word="Premiere Pro"],
.root-code-word[data-word="Premiere Pro"]{
  transform:translate(-12px,18px)!important;
}

.root-code-label[data-word="Analog & Digital"],
.root-code-word[data-word="Analog & Digital"]{
  transform:translate(16px,-8px)!important;
}


/* FINAL ROOT LABEL POSITIONS */
.root-code-flashes span:nth-child(7){
  right:4%!important;
  top:58%!important;
  left:auto!important;
  bottom:auto!important;
}

.root-code-flashes span:nth-child(10){
  right:15%;
  top:8%;
  left:auto;
  bottom:auto;
  animation:codeFlashLong 11s 9.1s infinite ease;
}


/* DESKTOP TOP-BAR VERTICAL ALIGNMENT */
@media(min-width:681px){
  .nav{
    min-height:74px;
    align-items:center!important;
  }

  .brand,
  .theme-toggle,
  .nav-contact{
    align-self:center!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
  }

  .brand{
    display:inline-flex;
    align-items:center;
    height:32px;
  }

  .theme-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:32px;
    margin:0!important;
    vertical-align:middle;
  }

  .nav-contact{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    height:32px;
    line-height:1!important;
    padding-top:0!important;
    padding-bottom:0!important;
    vertical-align:middle;
  }

  .nav-mail-icon{
    align-self:center;
  }
}


/* FINAL DESKTOP NAV ROW FIX */
@media(min-width:681px){
  .nav{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
  }

  .nav-center{
    display:none!important;
  }

  .brand{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
  }

  .theme-toggle{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:center!important;
  }

  .nav-contact{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:end!important;
  }
}


/* KEEP THE DESKTOP MODE SWITCH INTERACTIVE */
@media(min-width:681px){
  .theme-toggle{
    position:relative!important;
    z-index:50!important;
    pointer-events:auto!important;
    isolation:isolate;
  }

  .theme-toggle *,
  .theme-toggle::before,
  .theme-toggle::after{
    pointer-events:none!important;
  }
}


/* ULTRA-SOFT EDGE BLUR FOR THE MAIN HEEZY TEXT */
.heezy-text-panel h1{
  position:relative;
  isolation:isolate;
  text-shadow:
    0 0 0.7px color-mix(in srgb,var(--text) 42%,transparent),
    0 0 4px color-mix(in srgb,var(--text) 5%,transparent),
    0 0 12px color-mix(in srgb,var(--text) 2.8%,transparent);
  filter:
    drop-shadow(0 0 2px color-mix(in srgb,var(--text) 4%,transparent))
    drop-shadow(0 0 9px color-mix(in srgb,var(--text) 2%,transparent));
}

html[data-theme="light"] .heezy-text-panel h1{
  text-shadow:
    0 0 0.65px rgba(0,0,0,.28),
    0 0 4px rgba(0,0,0,.035),
    0 0 11px rgba(0,0,0,.018);
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,.035))
    drop-shadow(0 0 8px rgba(0,0,0,.018));
}


/* STRONGER, VISIBLE SOFT GLOW ON MAIN HEEZY TEXT */
.heezy-text-panel h1{
  text-shadow:
    0 0 1px color-mix(in srgb,var(--text) 62%,transparent),
    0 0 7px color-mix(in srgb,var(--text) 15%,transparent),
    0 0 18px color-mix(in srgb,var(--text) 9%,transparent),
    0 0 34px color-mix(in srgb,var(--text) 5%,transparent)!important;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb,var(--text) 11%,transparent))
    drop-shadow(0 0 14px color-mix(in srgb,var(--text) 7%,transparent))
    drop-shadow(0 0 28px color-mix(in srgb,var(--text) 4%,transparent))!important;
}

html[data-theme="light"] .heezy-text-panel h1{
  text-shadow:
    0 0 1px rgba(0,0,0,.42),
    0 0 7px rgba(0,0,0,.11),
    0 0 18px rgba(0,0,0,.065),
    0 0 32px rgba(0,0,0,.035)!important;
  filter:
    drop-shadow(0 0 4px rgba(0,0,0,.09))
    drop-shadow(0 0 14px rgba(0,0,0,.055))
    drop-shadow(0 0 28px rgba(0,0,0,.03))!important;
}


/* WORD-SPECIFIC HEEZY EFFECTS: IMAGE GLITCH + SOUND LFO */
.image-glitch,
.sound-lfo{
  position:relative;
  display:inline-block;
  isolation:isolate;
}

/* Glitch only the word “image” */
.image-glitch::before,
.image-glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  color:currentColor;
  opacity:0;
  white-space:nowrap;
}

.image-glitch::before{
  z-index:-1;
  text-shadow:
    -3px 0 color-mix(in srgb,var(--text) 48%,transparent),
    2px 0 color-mix(in srgb,var(--text) 16%,transparent);
  clip-path:polygon(
    0 4%,100% 4%,100% 23%,0 23%,
    0 43%,100% 43%,100% 58%,0 58%,
    0 76%,100% 76%,100% 91%,0 91%
  );
  animation:imageGlitchA 4.9s steps(1,end) infinite;
}

.image-glitch::after{
  z-index:2;
  text-shadow:
    3px 0 color-mix(in srgb,var(--text) 34%,transparent),
    -2px 0 color-mix(in srgb,var(--text) 12%,transparent);
  clip-path:polygon(
    0 26%,100% 26%,100% 38%,0 38%,
    0 61%,100% 61%,100% 72%,0 72%
  );
  animation:imageGlitchB 6.2s steps(1,end) infinite;
}

.image-glitch{
  animation:imageCoreJolt 8.1s steps(1,end) infinite;
}

@keyframes imageGlitchA{
  0%,10%,15%,39%,44%,73%,78%,100%{
    opacity:0;
    transform:translate3d(0,0,0) skewX(0deg);
  }
  11%{
    opacity:.92;
    transform:translate3d(-8px,1px,0) skewX(-2deg);
  }
  12%{
    opacity:.38;
    transform:translate3d(5px,-1px,0) skewX(1deg);
  }
  13%{
    opacity:.74;
    transform:translate3d(-3px,0,0) skewX(-.6deg);
  }
  40%{
    opacity:.82;
    transform:translate3d(7px,0,0) skewX(1.5deg);
  }
  41%{
    opacity:.3;
    transform:translate3d(-4px,1px,0) skewX(-.8deg);
  }
  74%{
    opacity:.88;
    transform:translate3d(-9px,0,0) skewX(-2.2deg);
  }
  75%{
    opacity:.42;
    transform:translate3d(4px,-1px,0) skewX(.7deg);
  }
}

@keyframes imageGlitchB{
  0%,20%,25%,52%,57%,84%,89%,100%{
    opacity:0;
    transform:translate3d(0,0,0);
  }
  21%{
    opacity:.76;
    transform:translate3d(9px,-1px,0);
  }
  22%{
    opacity:.28;
    transform:translate3d(-5px,1px,0);
  }
  53%{
    opacity:.68;
    transform:translate3d(-7px,0,0);
  }
  54%{
    opacity:.34;
    transform:translate3d(4px,1px,0);
  }
  85%{
    opacity:.86;
    transform:translate3d(8px,0,0);
  }
  86%{
    opacity:.32;
    transform:translate3d(-3px,-1px,0);
  }
}

@keyframes imageCoreJolt{
  0%,11%,13.5%,40%,42%,74%,76.5%,100%{
    transform:translate3d(0,0,0);
    filter:none;
  }
  12%{
    transform:translate3d(-1.5px,.5px,0);
    filter:blur(.5px);
  }
  41%{
    transform:translate3d(1px,-.5px,0);
    filter:blur(.35px);
  }
  75%{
    transform:translate3d(-1px,0,0);
    filter:blur(.6px);
  }
}

/* LFO modulation on the word “sound” */
.sound-lfo{
  transform-origin:center;
  animation:soundLfoCarrier 3.6s linear infinite;
}

.sound-lfo::before{
  content:"";
  position:absolute;
  z-index:3;
  left:-8%;
  top:47%;
  width:116%;
  height:42%;
  pointer-events:none;
  opacity:.7;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 240 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24 C15 2 30 2 45 24 S75 46 90 24 S120 2 135 24 S165 46 180 24 S210 2 240 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center/180% 100% repeat-x;
  mix-blend-mode:difference;
  filter:blur(.2px) drop-shadow(0 0 3px currentColor);
  animation:soundLfoWave 1.55s linear infinite;
}

.sound-lfo::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:2;
  color:currentColor;
  pointer-events:none;
  white-space:nowrap;
  opacity:.72;
  clip-path:polygon(
    0 18%,100% 18%,100% 38%,0 38%,
    0 54%,100% 54%,100% 76%,0 76%
  );
  animation:soundLfoSlices 2.4s steps(1,end) infinite;
}

@keyframes soundLfoCarrier{
  0%{
    transform:translateY(0) skewX(0deg) scaleY(1);
    filter:blur(0);
  }
  18%{
    transform:translateY(-1px) skewX(-.8deg) scaleY(1.04);
    filter:blur(.1px);
  }
  34%{
    transform:translateY(1.5px) skewX(1.2deg) scaleY(.9);
    filter:blur(.55px);
  }
  51%{
    transform:translateY(-2px) skewX(-1.6deg) scaleY(1.12);
    filter:blur(.25px);
  }
  67%{
    transform:translateY(1px) skewX(.7deg) scaleY(.82);
    filter:blur(.8px);
  }
  84%{
    transform:translateY(-.5px) skewX(-.4deg) scaleY(1.06);
    filter:blur(.15px);
  }
  100%{
    transform:translateY(0) skewX(0deg) scaleY(1);
    filter:blur(0);
  }
}

@keyframes soundLfoWave{
  from{
    background-position-x:0;
    transform:translateY(-50%) scaleY(.72);
  }
  50%{
    opacity:1;
    transform:translateY(-50%) scaleY(1.5);
  }
  to{
    background-position-x:-240px;
    transform:translateY(-50%) scaleY(.72);
  }
}

@keyframes soundLfoSlices{
  0%,14%,22%,48%,58%,79%,87%,100%{
    transform:translate3d(0,0,0);
    opacity:.18;
  }
  15%{
    transform:translate3d(-5px,-2px,0) skewX(-2deg);
    opacity:.9;
  }
  17%{
    transform:translate3d(4px,2px,0) skewX(1.5deg);
    opacity:.55;
  }
  50%{
    transform:translate3d(7px,-1px,0) scaleY(.78);
    opacity:.88;
  }
  53%{
    transform:translate3d(-3px,2px,0) scaleY(1.25);
    opacity:.5;
  }
  80%{
    transform:translate3d(-8px,1px,0) skewX(-2.4deg);
    opacity:.95;
  }
  83%{
    transform:translate3d(3px,-2px,0) skewX(.8deg);
    opacity:.48;
  }
}

html[data-theme="light"] .image-glitch::before,
html[data-theme="light"] .image-glitch::after{
  mix-blend-mode:multiply;
}

html[data-theme="light"] .sound-lfo::before{
  mix-blend-mode:multiply;
  opacity:.5;
}

@media(prefers-reduced-motion:reduce){
  .image-glitch,
  .image-glitch::before,
  .image-glitch::after,
  .sound-lfo,
  .sound-lfo::before,
  .sound-lfo::after{
    animation:none!important;
  }

  .image-glitch::before,
  .image-glitch::after,
  .sound-lfo::before,
  .sound-lfo::after{
    display:none!important;
  }
}


/* PROFESSIONAL FIXED LFO MORPH: SAW → SINE → SQUARE → SAW */
.sound-lfo{
  position:relative;
  display:inline-block;
  isolation:isolate;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  vertical-align:baseline;
}

.sound-lfo-word{
  position:relative;
  z-index:2;
  display:inline-block;
  transform-origin:center;
  will-change:transform,filter,opacity;
  animation:soundWordModulation 8.4s cubic-bezier(.4,0,.2,1) infinite;
}

.sound-lfo-display{
  position:absolute;
  z-index:3;
  left:-4%;
  top:50%;
  width:108%;
  height:68%;
  transform:translateY(-50%);
  overflow:visible;
  pointer-events:none;
  mix-blend-mode:difference;
  filter:
    drop-shadow(0 0 2px color-mix(in srgb,var(--text) 34%,transparent))
    drop-shadow(0 0 7px color-mix(in srgb,var(--text) 12%,transparent));
}

.sound-lfo-baseline{
  fill:none;
  stroke:currentColor;
  stroke-width:.55;
  opacity:.16;
  vector-effect:non-scaling-stroke;
}

.sound-lfo-path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.86;
}

.sound-lfo::before,
.sound-lfo::after{
  content:none!important;
  display:none!important;
}

@keyframes soundWordModulation{
  0%{
    transform:translateY(0) skewX(0deg) scaleY(1);
    filter:blur(0);
    opacity:1;
  }
  16%{
    transform:translateY(-.35px) skewX(-.35deg) scaleY(1.018);
    filter:blur(.05px);
    opacity:.98;
  }
  32%{
    transform:translateY(.45px) skewX(.5deg) scaleY(.965);
    filter:blur(.18px);
    opacity:.92;
  }
  48%{
    transform:translateY(-.55px) skewX(-.65deg) scaleY(1.04);
    filter:blur(.12px);
    opacity:.96;
  }
  64%{
    transform:translateY(.35px) skewX(.3deg) scaleY(.95);
    filter:blur(.28px);
    opacity:.88;
  }
  80%{
    transform:translateY(-.25px) skewX(-.22deg) scaleY(1.025);
    filter:blur(.08px);
    opacity:.95;
  }
  100%{
    transform:translateY(0) skewX(0deg) scaleY(1);
    filter:blur(0);
    opacity:1;
  }
}

html[data-theme="light"] .sound-lfo-display{
  mix-blend-mode:multiply;
  opacity:.74;
}

@media(prefers-reduced-motion:reduce){
  .sound-lfo-word{
    animation:none!important;
  }

  .sound-lfo-display{
    display:none!important;
  }
}


/* LFO STROKE BREATHING AT PURE WAVEFORM STATES */
.sound-lfo-path{
  stroke-width:var(--lfo-stroke,1.65);
  opacity:var(--lfo-stroke-opacity,.86);
  transition:
    stroke-width 90ms linear,
    opacity 90ms linear,
    filter 90ms linear;
  filter:drop-shadow(
    0 0 var(--lfo-stroke-glow,2px)
    color-mix(in srgb,var(--text) 18%,transparent)
  );
}


/* LOGARITHMIC REVERB-DIFFUSION EFFECT FOR “SOUND” */
.sound-lfo-word{
  position:relative;
  display:inline-block;
  isolation:isolate;
}

.sound-lfo-core{
  position:relative;
  z-index:3;
  display:inline-block;
  animation:soundReverbCore 9.6s cubic-bezier(.19,1,.22,1) infinite;
}

.sound-lfo-word::before,
.sound-lfo-word::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  color:currentColor;
  white-space:nowrap;
  opacity:0;
  transform-origin:center;
}

.sound-lfo-word::before{
  filter:blur(1px);
  text-shadow:
    0 0 5px currentColor,
    0 0 12px color-mix(in srgb,var(--text) 34%,transparent),
    0 0 24px color-mix(in srgb,var(--text) 18%,transparent);
  animation:soundReverbNear 9.6s cubic-bezier(.19,1,.22,1) infinite;
}

.sound-lfo-word::after{
  z-index:0;
  filter:blur(3px);
  text-shadow:
    0 0 12px currentColor,
    0 0 28px color-mix(in srgb,var(--text) 28%,transparent),
    0 0 52px color-mix(in srgb,var(--text) 14%,transparent);
  animation:soundReverbFar 9.6s cubic-bezier(.19,1,.22,1) infinite;
}

@keyframes soundReverbCore{
  0%,18%,52%,100%{
    opacity:1;
    filter:blur(0);
  }
  27%{
    opacity:.72;
    filter:blur(.28px);
  }
  34%{
    opacity:.32;
    filter:blur(.9px);
  }
  39%{
    opacity:.16;
    filter:blur(1.8px);
  }
  44%{
    opacity:.54;
    filter:blur(.55px);
  }
}

@keyframes soundReverbNear{
  0%,18%,52%,100%{
    opacity:0;
    transform:scaleX(1) scaleY(1);
    filter:blur(1px);
  }
  25%{
    opacity:.28;
    transform:scaleX(1.015) scaleY(1.02);
    filter:blur(1.6px);
  }
  32%{
    opacity:.62;
    transform:scaleX(1.045) scaleY(1.06);
    filter:blur(3px);
  }
  39%{
    opacity:.9;
    transform:scaleX(1.09) scaleY(1.12);
    filter:blur(5.5px);
  }
  46%{
    opacity:.26;
    transform:scaleX(1.025) scaleY(1.03);
    filter:blur(1.8px);
  }
}

@keyframes soundReverbFar{
  0%,18%,52%,100%{
    opacity:0;
    transform:scaleX(1) scaleY(1);
    filter:blur(3px);
  }
  28%{
    opacity:.18;
    transform:scaleX(1.04) scaleY(1.06);
    filter:blur(5px);
  }
  35%{
    opacity:.48;
    transform:scaleX(1.1) scaleY(1.15);
    filter:blur(9px);
  }
  39%{
    opacity:.72;
    transform:scaleX(1.17) scaleY(1.23);
    filter:blur(14px);
  }
  47%{
    opacity:.12;
    transform:scaleX(1.045) scaleY(1.06);
    filter:blur(4px);
  }
}

html[data-theme="light"] .sound-lfo-word::before,
html[data-theme="light"] .sound-lfo-word::after{
  mix-blend-mode:multiply;
}

@media(prefers-reduced-motion:reduce){
  .sound-lfo-core,
  .sound-lfo-word::before,
  .sound-lfo-word::after{
    animation:none!important;
  }

  .sound-lfo-word::before,
  .sound-lfo-word::after{
    display:none!important;
  }
}

/* OPEN-STUDY OVERLAY REMOVED */



/* FOOTER CTA SPARKLES + DIFFUSION */
.footer-cta{
  position:relative;
  isolation:isolate;
}

.footer-cta::before{
  content:"";
  position:absolute;
  left:4%;
  top:16%;
  width:76%;
  height:82%;
  pointer-events:none;
  z-index:0;
  opacity:.44;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 36%,
      color-mix(in srgb,var(--text) 9%,transparent) 0,
      color-mix(in srgb,var(--text) 5%,transparent) 18%,
      transparent 58%),
    radial-gradient(circle at 72% 62%,
      color-mix(in srgb,var(--text) 7%,transparent) 0,
      color-mix(in srgb,var(--text) 3%,transparent) 20%,
      transparent 60%);
  filter:blur(20px);
  animation:footerDiffusionBreath 10.5s cubic-bezier(.22,.61,.36,1) infinite;
}

.footer-cta a{
  position:relative;
  z-index:3;
  display:inline-block;
  text-shadow:
    0 0 1px color-mix(in srgb,var(--text) 34%,transparent),
    0 0 10px color-mix(in srgb,var(--text) 5%,transparent);
}

.footer-cta-sparkles{
  position:absolute;
  inset:-8% -4% -10% -4%;
  pointer-events:none;
  z-index:2;
}

.footer-sparkle{
  position:absolute;
  width:12px;
  height:12px;
  opacity:0;
  transform:translate3d(0,0,0) scale(.6) rotate(0deg);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 12%,transparent));
  animation:footerSparkleDrift 8.2s ease-in-out infinite;
}

.footer-sparkle::before,
.footer-sparkle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:currentColor;
  border-radius:999px;
  transform:translate(-50%,-50%);
  opacity:.92;
}

.footer-sparkle::before{
  width:1.2px;
  height:100%;
}

.footer-sparkle::after{
  width:100%;
  height:1.2px;
}

.footer-sparkle-1{
  left:7%;
  top:10%;
  animation-delay:0s;
}

.footer-sparkle-2{
  left:84%;
  top:8%;
  width:10px;
  height:10px;
  animation-delay:1.3s;
}

.footer-sparkle-3{
  left:92%;
  top:52%;
  width:9px;
  height:9px;
  animation-delay:2.6s;
}

.footer-sparkle-4{
  left:18%;
  top:82%;
  width:8px;
  height:8px;
  animation-delay:3.4s;
}

.footer-sparkle-5{
  left:62%;
  top:88%;
  width:11px;
  height:11px;
  animation-delay:4.5s;
}

@keyframes footerSparkleDrift{
  0%,100%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.5) rotate(0deg);
    filter:drop-shadow(0 0 2px color-mix(in srgb,var(--text) 6%,transparent));
  }
  10%{
    opacity:.22;
    transform:translate3d(-1px,0,0) scale(.78) rotate(10deg);
  }
  18%{
    opacity:.9;
    transform:translate3d(0,-1px,0) scale(1.08) rotate(45deg);
    filter:drop-shadow(0 0 8px color-mix(in srgb,var(--text) 18%,transparent));
  }
  28%{
    opacity:.48;
    transform:translate3d(1px,-3px,0) scale(.82) rotate(70deg);
  }
  45%{
    opacity:0;
    transform:translate3d(2px,-5px,0) scale(.55) rotate(90deg);
  }
}

@keyframes footerDiffusionBreath{
  0%{
    opacity:.28;
    transform:translate3d(-1%,0,0) scale(.96);
    filter:blur(16px);
  }
  26%{
    opacity:.42;
    transform:translate3d(.5%,-1.5%,0) scale(1.02);
    filter:blur(22px);
  }
  42%{
    opacity:.62;
    transform:translate3d(1.5%,-2.5%,0) scale(1.08);
    filter:blur(28px);
  }
  58%{
    opacity:.18;
    transform:translate3d(0,0,0) scale(1.16);
    filter:blur(36px);
  }
  72%{
    opacity:.36;
    transform:translate3d(-1.5%,1%,0) scale(1.03);
    filter:blur(24px);
  }
  100%{
    opacity:.28;
    transform:translate3d(-1%,0,0) scale(.96);
    filter:blur(16px);
  }
}

html[data-theme="light"] .footer-cta::before{
  opacity:.28;
}

html[data-theme="light"] .footer-sparkle{
  filter:drop-shadow(0 0 4px rgba(0,0,0,.06));
}

@media(max-width:680px){
  .footer-cta::before{
    left:2%;
    width:90%;
    top:20%;
    height:74%;
  }

  .footer-cta-sparkles{
    inset:-10% -2% -8% -2%;
  }

  .footer-sparkle{
    width:9px;
    height:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-cta::before,
  .footer-sparkle{
    animation:none!important;
  }

  .footer-sparkle{
    opacity:.3;
    transform:none;
  }
}


/* STRONGER FOOTER SPARKLES + MORE VISIBLE TEXT DIFFUSION */
.footer-cta::before{
  opacity:.72!important;
  filter:blur(28px)!important;
  animation:footerDiffusionBreathStrong 7.8s cubic-bezier(.22,.61,.36,1) infinite!important;
}

.footer-cta a{
  text-shadow:
    0 0 1px color-mix(in srgb,var(--text) 46%,transparent),
    0 0 12px color-mix(in srgb,var(--text) 10%,transparent),
    0 0 24px color-mix(in srgb,var(--text) 5%,transparent)!important;
}

.footer-cta a::before{
  content:"";
  position:absolute;
  inset:-4% -2%;
  pointer-events:none;
  z-index:-1;
  opacity:.0;
  border-radius:28px;
  background:
    radial-gradient(circle at 30% 40%,
      color-mix(in srgb,var(--text) 18%,transparent) 0,
      color-mix(in srgb,var(--text) 10%,transparent) 18%,
      transparent 56%),
    radial-gradient(circle at 68% 58%,
      color-mix(in srgb,var(--text) 14%,transparent) 0,
      color-mix(in srgb,var(--text) 8%,transparent) 20%,
      transparent 60%);
  filter:blur(14px);
  animation:footerTextBloom 7.8s cubic-bezier(.19,1,.22,1) infinite;
}

.footer-sparkle{
  width:16px!important;
  height:16px!important;
  opacity:0;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--text) 28%,transparent))!important;
  animation:footerSparkleDriftStrong 6.6s ease-in-out infinite!important;
}

.footer-sparkle::before{
  width:1.6px!important;
  height:100%!important;
  background:currentColor!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--text) 26%,transparent);
}

.footer-sparkle::after{
  width:100%!important;
  height:1.6px!important;
  background:currentColor!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--text) 26%,transparent);
}

.footer-sparkle-1{ left:5%!important; top:8%!important; }
.footer-sparkle-2{ left:88%!important; top:6%!important; width:13px!important; height:13px!important; }
.footer-sparkle-3{ left:95%!important; top:48%!important; width:12px!important; height:12px!important; }
.footer-sparkle-4{ left:14%!important; top:84%!important; width:10px!important; height:10px!important; }
.footer-sparkle-5{ left:66%!important; top:90%!important; width:14px!important; height:14px!important; }

@keyframes footerSparkleDriftStrong{
  0%,100%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.45) rotate(0deg);
    filter:drop-shadow(0 0 2px color-mix(in srgb,var(--text) 10%,transparent));
  }
  8%{
    opacity:.26;
    transform:translate3d(-1px,0,0) scale(.8) rotate(18deg);
  }
  16%{
    opacity:1;
    transform:translate3d(0,-1px,0) scale(1.2) rotate(45deg);
    filter:drop-shadow(0 0 12px color-mix(in srgb,var(--text) 36%,transparent));
  }
  24%{
    opacity:.74;
    transform:translate3d(1px,-4px,0) scale(.96) rotate(78deg);
  }
  36%{
    opacity:.18;
    transform:translate3d(2px,-7px,0) scale(.6) rotate(92deg);
  }
  44%{
    opacity:0;
    transform:translate3d(2px,-9px,0) scale(.42) rotate(96deg);
  }
}

@keyframes footerDiffusionBreathStrong{
  0%{
    opacity:.36;
    transform:translate3d(-1%,0,0) scale(.94);
    filter:blur(18px);
  }
  18%{
    opacity:.58;
    transform:translate3d(.8%,-1.4%,0) scale(1.02);
    filter:blur(26px);
  }
  34%{
    opacity:.88;
    transform:translate3d(1.6%,-2.2%,0) scale(1.12);
    filter:blur(36px);
  }
  48%{
    opacity:.22;
    transform:translate3d(0,0,0) scale(1.22);
    filter:blur(46px);
  }
  66%{
    opacity:.64;
    transform:translate3d(-1.4%,1.2%,0) scale(1.06);
    filter:blur(30px);
  }
  100%{
    opacity:.36;
    transform:translate3d(-1%,0,0) scale(.94);
    filter:blur(18px);
  }
}

@keyframes footerTextBloom{
  0%,14%,100%{
    opacity:.04;
    transform:scale(.98);
    filter:blur(10px);
  }
  28%{
    opacity:.26;
    transform:scale(1.03);
    filter:blur(18px);
  }
  40%{
    opacity:.52;
    transform:scale(1.08);
    filter:blur(26px);
  }
  52%{
    opacity:.12;
    transform:scale(1.15);
    filter:blur(34px);
  }
  70%{
    opacity:.3;
    transform:scale(1.04);
    filter:blur(20px);
  }
}

html[data-theme="light"] .footer-cta::before{
  opacity:.48!important;
}

html[data-theme="light"] .footer-cta a::before{
  opacity:.0;
}

html[data-theme="light"] .footer-sparkle{
  filter:drop-shadow(0 0 8px rgba(0,0,0,.12))!important;
}

@media(max-width:680px){
  .footer-sparkle{
    width:12px!important;
    height:12px!important;
  }

  .footer-cta::before{
    width:96%!important;
    left:0!important;
  }
}


/* FOOTER CTA ROOT ORNAMENTS */
.footer-cta{
  overflow:visible;
}

.footer-cta-roots{
  position:absolute;
  inset:-24% -8% -20% -8%;
  width:116%;
  height:148%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}

.footer-cta-roots .footer-root-group{
  transform-box:fill-box;
  transform-origin:center;
}

.footer-cta-roots .footer-root-group-left{
  animation:footerRootSwayLeft 9.5s ease-in-out infinite;
}

.footer-cta-roots .footer-root-group-right{
  animation:footerRootSwayRight 10.8s ease-in-out infinite;
}

.footer-root{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.74;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 12%,transparent));
}

.footer-root-main{
  stroke-width:1.28;
}

.footer-root-branch{
  stroke-width:.94;
  opacity:.62;
}

.footer-root-fine{
  stroke-width:.66;
  opacity:.48;
}

.footer-root-node{
  fill:currentColor;
  opacity:.58;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--text) 18%,transparent));
  animation:footerRootNodePulse 6.2s ease-in-out infinite;
}

.footer-root-node-soft{
  opacity:.34;
  animation-delay:1.4s;
}

.footer-root-1{
  stroke-dasharray:360;
  stroke-dashoffset:360;
  animation:footerRootGrow 6.6s cubic-bezier(.19,1,.22,1) infinite;
}

.footer-root-2{
  stroke-dasharray:190;
  stroke-dashoffset:190;
  animation:footerRootGrow 6.6s cubic-bezier(.19,1,.22,1) .35s infinite;
}

.footer-root-3{
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:footerRootGrow 6.6s cubic-bezier(.19,1,.22,1) .7s infinite;
}

.footer-root-4{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation:footerRootGrow 6.6s cubic-bezier(.19,1,.22,1) 1s infinite;
}

.footer-root-5{
  stroke-dasharray:130;
  stroke-dashoffset:130;
  animation:footerRootGrow 6.6s cubic-bezier(.19,1,.22,1) 1.2s infinite;
}

.footer-root-6{
  stroke-dasharray:360;
  stroke-dashoffset:360;
  animation:footerRootGrowReverse 6.9s cubic-bezier(.19,1,.22,1) .15s infinite;
}

.footer-root-7{
  stroke-dasharray:175;
  stroke-dashoffset:175;
  animation:footerRootGrowReverse 6.9s cubic-bezier(.19,1,.22,1) .48s infinite;
}

.footer-root-8{
  stroke-dasharray:170;
  stroke-dashoffset:170;
  animation:footerRootGrowReverse 6.9s cubic-bezier(.19,1,.22,1) .82s infinite;
}

.footer-root-9{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation:footerRootGrowReverse 6.9s cubic-bezier(.19,1,.22,1) 1.15s infinite;
}

.footer-root-10{
  stroke-dasharray:110;
  stroke-dashoffset:110;
  animation:footerRootGrowReverse 6.9s cubic-bezier(.19,1,.22,1) 1.35s infinite;
}

@keyframes footerRootGrow{
  0%{
    stroke-dashoffset:calc(var(--dash, 1) * 1px);
    opacity:0;
  }
  10%{
    opacity:.12;
  }
  28%{
    opacity:.86;
  }
  58%{
    stroke-dashoffset:0;
    opacity:.78;
  }
  78%{
    opacity:.44;
  }
  100%{
    stroke-dashoffset:-16;
    opacity:.18;
  }
}

@keyframes footerRootGrowReverse{
  0%{
    stroke-dashoffset:calc(var(--dash, 1) * 1px);
    opacity:0;
  }
  10%{
    opacity:.12;
  }
  28%{
    opacity:.82;
  }
  58%{
    stroke-dashoffset:0;
    opacity:.74;
  }
  78%{
    opacity:.42;
  }
  100%{
    stroke-dashoffset:14;
    opacity:.16;
  }
}

@keyframes footerRootSwayLeft{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-.35deg) scale(1);
  }
  50%{
    transform:translate3d(3px,-2px,0) rotate(.55deg) scale(1.014);
  }
}

@keyframes footerRootSwayRight{
  0%,100%{
    transform:translate3d(0,0,0) rotate(.3deg) scale(1);
  }
  50%{
    transform:translate3d(-3px,2px,0) rotate(-.55deg) scale(1.012);
  }
}

@keyframes footerRootNodePulse{
  0%,100%{
    opacity:.28;
    transform:scale(.88);
  }
  50%{
    opacity:.7;
    transform:scale(1.24);
  }
}

/* Remove old sparkle visuals if still present */
.footer-cta-sparkles,
.footer-sparkle{
  display:none!important;
}

@media(max-width:680px){
  .footer-cta-roots{
    inset:-18% -6% -16% -6%;
    width:112%;
    height:138%;
  }

  .footer-root-main{
    stroke-width:1.06;
  }

  .footer-root-branch{
    stroke-width:.8;
  }

  .footer-root-fine{
    stroke-width:.56;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-cta-roots .footer-root-group,
  .footer-root,
  .footer-root-node{
    animation:none!important;
  }

  .footer-root{
    stroke-dashoffset:0!important;
    opacity:.34;
  }
}

.footer-root-1{--dash:360}.footer-root-2{--dash:190}.footer-root-3{--dash:220}.footer-root-4{--dash:120}.footer-root-5{--dash:130}
.footer-root-6{--dash:360}.footer-root-7{--dash:175}.footer-root-8{--dash:170}.footer-root-9{--dash:120}.footer-root-10{--dash:110}


/* ORGANIC FOOTER ROOTS REFINED AROUND CTA TEXT */
.footer-cta{
  overflow:visible;
}

.footer-cta-roots{
  position:absolute;
  inset:-10% 6% -16% 6%;
  width:88%;
  height:132%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}

.footer-root-frame{
  transform-box:fill-box;
  transform-origin:center;
}

.footer-root-frame-left{
  animation:footerOrganicDriftLeft 11.2s ease-in-out infinite;
}

.footer-root-frame-center{
  animation:footerOrganicDriftCenter 12.8s ease-in-out infinite;
}

.footer-root-frame-right{
  animation:footerOrganicDriftRight 10.6s ease-in-out infinite;
}

.footer-root{
  --root-min: .72;
  --root-max: 1.08;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-width:calc(var(--root-min) * 1px);
  opacity:.62;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 10%,transparent));
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  animation:
    footerOrganicTrace var(--dur) cubic-bezier(.19,1,.22,1) var(--delay) infinite,
    footerOrganicBreathe calc(var(--dur) * 1.65) ease-in-out calc(var(--delay) * .7) infinite;
}

.footer-root-main{
  --root-min: 1.08;
  --root-max: 1.62;
  opacity:.74;
}

.footer-root-branch{
  --root-min: .84;
  --root-max: 1.18;
  opacity:.6;
}

.footer-root-fine{
  --root-min: .56;
  --root-max: .84;
  opacity:.46;
}

.footer-root-under{
  --root-min: .92;
  --root-max: 1.34;
  opacity:.56;
}

.footer-root-top{
  --root-min: .64;
  --root-max: .92;
  opacity:.4;
}

.footer-root-halo{
  --root-min: .58;
  --root-max: .98;
  opacity:.32;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--text) 12%,transparent));
}

.footer-root-node{
  fill:currentColor;
  opacity:.52;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--text) 20%,transparent));
  animation:footerOrganicNode 6.7s ease-in-out infinite;
}

.footer-root-node-soft{
  opacity:.28;
  animation-delay:1.25s;
}

@keyframes footerOrganicTrace{
  0%{
    stroke-dashoffset:var(--len);
    opacity:0;
  }
  12%{
    opacity:.18;
  }
  34%{
    opacity:calc(.66 + (var(--root-max) - var(--root-min)) * 0.05);
  }
  58%{
    stroke-dashoffset:0;
    opacity:.72;
  }
  78%{
    opacity:.42;
  }
  100%{
    stroke-dashoffset:-18;
    opacity:.16;
  }
}

@keyframes footerOrganicBreathe{
  0%,100%{
    stroke-width:calc(var(--root-min) * 1px);
    filter:drop-shadow(0 0 3px color-mix(in srgb,var(--text) 8%,transparent));
  }
  48%{
    stroke-width:calc(var(--root-max) * 1px);
    filter:drop-shadow(0 0 7px color-mix(in srgb,var(--text) 14%,transparent));
  }
}

@keyframes footerOrganicDriftLeft{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-.28deg) scale(1);
  }
  50%{
    transform:translate3d(2px,-1.5px,0) rotate(.44deg) scale(1.012);
  }
}

@keyframes footerOrganicDriftCenter{
  0%,100%{
    transform:translate3d(0,0,0) scale(1);
  }
  50%{
    transform:translate3d(0,-1px,0) scale(1.01);
  }
}

@keyframes footerOrganicDriftRight{
  0%,100%{
    transform:translate3d(0,0,0) rotate(.25deg) scale(1);
  }
  50%{
    transform:translate3d(-2px,1.8px,0) rotate(-.42deg) scale(1.013);
  }
}

@keyframes footerOrganicNode{
  0%,100%{
    opacity:.24;
    transform:scale(.88);
  }
  50%{
    opacity:.72;
    transform:scale(1.18);
  }
}

/* override previous sparkle-root geometry */
.footer-cta-sparkles,
.footer-sparkle{
  display:none!important;
}

@media(max-width:680px){
  .footer-cta-roots{
    inset:-8% 2% -12% 2%;
    width:96%;
    height:126%;
  }

  .footer-root-main{
    --root-min: .92;
    --root-max: 1.34;
  }

  .footer-root-branch{
    --root-min: .72;
    --root-max: .98;
  }

  .footer-root-fine{
    --root-min: .5;
    --root-max: .74;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-root-frame,
  .footer-root,
  .footer-root-node{
    animation:none!important;
  }

  .footer-root{
    stroke-dashoffset:0!important;
    opacity:.32;
  }
}


/* RELIABLE RESPONSIVE VIDEO PLAYBACK */




.lightbox-video{
  display:none;
  width:min(88vw,1400px);
  max-height:76vh;
  object-fit:contain;
  background:#000;
}

.lightbox.is-video .lightbox-video{display:block}
.lightbox.is-video #lightboxImage{display:none}
.lightbox:not(.is-video) #lightboxImage{display:block}

@media(max-width:680px){
  .lightbox-video{
    width:94vw;
    max-height:72vh;
  }
}


/* SMALLER FOOTER CTA TYPOGRAPHY */
.footer-cta{
  font-size:clamp(2.15rem,5.35vw,5.65rem)!important;
  line-height:.92;
}

@media(max-width:680px){
  .footer-cta{
    font-size:clamp(2rem,10.5vw,3.55rem)!important;
    line-height:.94;
  }
}


/* FOOTER CTA: FIXED LFO ORNAMENTS AROUND TEXT */
.footer-cta{
  position:relative;
  isolation:isolate;
  overflow:visible;
}

.footer-cta-lfo{
  position:absolute;
  inset:-10% 1% -14% 1%;
  width:98%;
  height:132%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}

.footer-lfo-group{
  transform-box:fill-box;
  transform-origin:center;
  animation:footerLfoDrift 14s ease-in-out infinite;
}

.footer-lfo-path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.64;
  transition:
    stroke-width 120ms linear,
    opacity 120ms linear,
    filter 120ms linear;
}

.footer-lfo-top,
.footer-lfo-bottom{
  stroke-width:1.28;
  opacity:.72;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 11%,transparent));
}

.footer-lfo-left,
.footer-lfo-right{
  stroke-width:1.02;
  opacity:.56;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 9%,transparent));
}

.footer-lfo-top-glow,
.footer-lfo-bottom-glow,
.footer-lfo-left-glow,
.footer-lfo-right-glow{
  stroke-width:2.2;
  opacity:.2;
  filter:blur(.8px) drop-shadow(0 0 9px color-mix(in srgb,var(--text) 15%,transparent));
}

.footer-lfo-accent{
  stroke-width:.72;
  opacity:.24;
  stroke-dasharray:3 7;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 8%,transparent));
}

.footer-lfo-accent-top{
  animation:footerLfoDashA 8.2s linear infinite;
}

.footer-lfo-accent-bottom{
  animation:footerLfoDashB 9.1s linear infinite;
}

@keyframes footerLfoDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-1px,0) scale(1.005)}
}

@keyframes footerLfoDashA{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-40}
}

@keyframes footerLfoDashB{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:40}
}

html[data-theme="light"] .footer-lfo-top-glow,
html[data-theme="light"] .footer-lfo-bottom-glow,
html[data-theme="light"] .footer-lfo-left-glow,
html[data-theme="light"] .footer-lfo-right-glow{
  opacity:.12;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-8% -2% -10% -2%;
    width:104%;
    height:126%;
  }

  .footer-lfo-top,
  .footer-lfo-bottom{
    stroke-width:1.05;
  }

  .footer-lfo-left,
  .footer-lfo-right{
    stroke-width:.85;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-lfo-group,
  .footer-lfo-accent-top,
  .footer-lfo-accent-bottom{
    animation:none!important;
  }
}


/* DYNAMIC LFO FLICKER + IMPRESSUM LINK */
.footer-individuality{
  display:inline-block;
  position:relative;
  transition:opacity .3s ease,filter .3s ease,text-shadow .3s ease;
}

.footer-individuality.is-elegantly-flickering{
  animation:footerIndividualityFlicker var(--footer-flicker-rate,.36s) steps(1,end) infinite;
}

@keyframes footerIndividualityFlicker{
  0%,16%,31%,54%,72%,100%{
    opacity:1;
    filter:blur(0);
    text-shadow:
      0 0 calc(3px + 8px * var(--footer-flicker-intensity,0))
      color-mix(in srgb,var(--text) 18%,transparent);
  }
  18%{
    opacity:calc(.82 - .2 * var(--footer-flicker-intensity,0));
    filter:blur(calc(.15px + .45px * var(--footer-flicker-intensity,0)));
  }
  33%{
    opacity:calc(.9 - .15 * var(--footer-flicker-intensity,0));
    filter:blur(calc(.05px + .28px * var(--footer-flicker-intensity,0)));
  }
  56%{
    opacity:calc(.76 - .18 * var(--footer-flicker-intensity,0));
    filter:blur(calc(.2px + .55px * var(--footer-flicker-intensity,0)));
  }
  74%{
    opacity:.94;
    filter:blur(.08px);
  }
}

.sound-lfo-word.is-lfo-flickering{
  animation:soundWordLfoFlicker var(--sound-flicker-rate,.42s) steps(1,end) infinite;
}

@keyframes soundWordLfoFlicker{
  0%,14%,29%,48%,68%,100%{
    opacity:1;
    text-shadow:
      0 0 calc(2px + 7px * var(--sound-flicker-intensity,0))
      color-mix(in srgb,var(--text) 18%,transparent);
  }
  16%{
    opacity:calc(.88 - .18 * var(--sound-flicker-intensity,0));
    filter:blur(calc(.08px + .38px * var(--sound-flicker-intensity,0)));
  }
  31%{
    opacity:.94;
    filter:blur(.1px);
  }
  50%{
    opacity:calc(.8 - .14 * var(--sound-flicker-intensity,0));
    filter:blur(calc(.15px + .42px * var(--sound-flicker-intensity,0)));
  }
  70%{
    opacity:.92;
    filter:blur(.08px);
  }
}

.footer-impressum{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:none;
  position:relative;
  transition:color .25s ease,opacity .25s ease;
}

.footer-impressum::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}

.footer-impressum:hover::after,
.footer-impressum:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

@media(max-width:680px){
  .footer-bottom{
    width:100%;
    align-items:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-individuality,
  .sound-lfo-word{
    animation:none!important;
  }
}


/* FOOTER LFO MYCELIUM ENDINGS */
.footer-mycelium{
  pointer-events:none;
}

.footer-mycelium-path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:120;
  stroke-dashoffset:120;
  opacity:0;
  transition:opacity 120ms linear,stroke-width 120ms linear,filter 120ms linear;
}

.footer-mycelium-main{
  stroke-width:.74;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 10%,transparent));
}

.footer-mycelium-branch{
  stroke-width:.52;
  opacity:.76;
}

.footer-mycelium-fine{
  stroke-width:.34;
  opacity:.54;
}

.footer-mycelium-node{
  fill:currentColor;
  opacity:0;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--text) 16%,transparent));
  transition:opacity 120ms linear;
}

.footer-mycelium-node-soft{
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--text) 10%,transparent));
}

@media(max-width:680px){
  .footer-mycelium-main{stroke-width:.62}
  .footer-mycelium-branch{stroke-width:.44}
  .footer-mycelium-fine{stroke-width:.3}
}


/* REFINED CENTERED FOOTER LFO + STRONGER MYCELIUM */
.footer-cta-lfo{
  inset:-7% 8% -11% 8%!important;
  width:84%!important;
  height:122%!important;
  left:8%!important;
  right:8%!important;
}

.footer-lfo-group{
  transform-origin:50% 50%!important;
}

.footer-lfo-top,
.footer-lfo-bottom{
  opacity:.58;
}

.footer-lfo-left,
.footer-lfo-right{
  opacity:.42;
}

.footer-mycelium-main{
  stroke-width:.94!important;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 14%,transparent))!important;
}

.footer-mycelium-branch{
  stroke-width:.7!important;
}

.footer-mycelium-fine{
  stroke-width:.46!important;
}

.footer-mycelium-node{
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--text) 20%,transparent))!important;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-5% 2% -9% 2%!important;
    width:96%!important;
    height:118%!important;
    left:2%!important;
    right:2%!important;
  }

  .footer-mycelium-main{stroke-width:.8!important}
  .footer-mycelium-branch{stroke-width:.58!important}
  .footer-mycelium-fine{stroke-width:.4!important}
}


/* TWO PRIMARY FOOTER LFO FORMS + FINE BACKGROUND FIELD */
.footer-cta-lfo{
  inset:-7% 9% -11% 9%!important;
  width:82%!important;
  height:122%!important;
  left:9%!important;
  right:9%!important;
}

.footer-lfo-top,
.footer-lfo-bottom{
  opacity:.62!important;
}

.footer-lfo-left,
.footer-lfo-right{
  stroke-width:.46!important;
  opacity:.18!important;
}

.footer-lfo-left-glow,
.footer-lfo-right-glow{
  stroke-width:.8!important;
  opacity:.025!important;
}

.footer-lfo-accent{
  stroke-width:.42!important;
  stroke-dasharray:2 8!important;
}

.footer-mycelium-main{
  stroke-width:1.02!important;
}

.footer-mycelium-branch{
  stroke-width:.76!important;
}

.footer-mycelium-fine{
  stroke-width:.5!important;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-5% 2% -9% 2%!important;
    width:96%!important;
    height:118%!important;
    left:2%!important;
    right:2%!important;
  }

  .footer-mycelium-main{stroke-width:.86!important}
  .footer-mycelium-branch{stroke-width:.64!important}
  .footer-mycelium-fine{stroke-width:.44!important}
}


/* ASYMMETRIC FOOTER LFO PLACEMENT + TYPOGRAPHIC EXPANSION */
.footer-cta-lfo{
  inset:-8% 3% -11% 3%!important;
  width:94%!important;
  height:124%!important;
  left:3%!important;
  right:3%!important;
}

.footer-cta > a{
  --footer-expand-x:1;
  --footer-expand-y:1;
  --footer-expand-spacing:0em;
  --footer-expand-glow:0;
  transform:
    scaleX(var(--footer-expand-x))
    scaleY(var(--footer-expand-y));
  transform-origin:48% 55%;
  letter-spacing:calc(-.055em + var(--footer-expand-spacing));
  text-shadow:
    0 0 calc(2px + 10px * var(--footer-expand-glow))
    color-mix(in srgb,var(--text) 8%,transparent);
  transition:
    transform 100ms linear,
    letter-spacing 100ms linear,
    text-shadow 100ms linear;
}

.footer-lfo-top{
  opacity:.66!important;
}

.footer-lfo-bottom{
  opacity:.6!important;
}

.footer-mycelium-main{
  stroke-width:1.04!important;
}

.footer-mycelium-branch{
  stroke-width:.76!important;
}

.footer-mycelium-fine{
  stroke-width:.48!important;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-5% -2% -9% -2%!important;
    width:104%!important;
    height:119%!important;
    left:-2%!important;
    right:-2%!important;
  }

  .footer-cta > a{
    transform-origin:50% 55%;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-cta > a{
    transform:none!important;
    letter-spacing:-.055em!important;
    text-shadow:none!important;
  }
}


/* SINGLE LARGE FOOTER LFO ECOSYSTEM */
.footer-cta-lfo{
  inset:-14% 1% -16% 1%!important;
  width:98%!important;
  height:138%!important;
  left:1%!important;
  right:1%!important;
}

.footer-lfo-top{
  opacity:.7!important;
}

.footer-lfo-top-glow{
  opacity:.1!important;
}

.footer-lfo-bottom,
.footer-lfo-left,
.footer-lfo-right{
  stroke-width:.4!important;
  opacity:.14!important;
}

.footer-lfo-bottom-glow,
.footer-lfo-left-glow,
.footer-lfo-right-glow{
  stroke-width:.7!important;
  opacity:.018!important;
}

.footer-lfo-accent{
  stroke-width:.38!important;
  stroke-dasharray:2 9!important;
}

.footer-mycelium-main{
  stroke-width:1.08!important;
}

.footer-mycelium-branch{
  stroke-width:.8!important;
}

.footer-mycelium-fine{
  stroke-width:.52!important;
}

.footer-mycelium-node{
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--text) 22%,transparent))!important;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-9% -4% -12% -4%!important;
    width:108%!important;
    height:128%!important;
    left:-4%!important;
    right:-4%!important;
  }

  .footer-mycelium-main{stroke-width:.9!important}
  .footer-mycelium-branch{stroke-width:.66!important}
  .footer-mycelium-fine{stroke-width:.44!important}
}


/* FOOTER TEXT-TUNNEL LFO + FLASHING MYCELIUM TIPS */
.footer-cta-lfo{
  inset:-4% 0 -7% 0!important;
  width:100%!important;
  height:112%!important;
  left:0!important;
  right:0!important;
}

.footer-lfo-top{
  opacity:.72!important;
}

.footer-lfo-top-glow{
  opacity:.1!important;
}

.footer-lfo-bottom,
.footer-lfo-left,
.footer-lfo-right{
  stroke-width:.36!important;
  opacity:.11!important;
}

.footer-lfo-bottom-glow,
.footer-lfo-left-glow,
.footer-lfo-right-glow{
  stroke-width:.64!important;
  opacity:.014!important;
}

.footer-lfo-accent{
  stroke-width:.34!important;
  stroke-dasharray:2 10!important;
}

.footer-mycelium-main{
  stroke-width:1.1!important;
}

.footer-mycelium-branch{
  stroke-width:.82!important;
}

.footer-mycelium-fine{
  stroke-width:.54!important;
}

.footer-mycelium-node{
  opacity:0;
  fill:currentColor!important;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 10px color-mix(in srgb,var(--text) 32%,transparent))!important;
  transform-box:fill-box;
  transition:
    opacity 60ms linear,
    transform 60ms linear;
}

.footer-mycelium-node-soft{
  filter:
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 7px color-mix(in srgb,var(--text) 24%,transparent))!important;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-2% -5% -5% -5%!important;
    width:110%!important;
    height:108%!important;
    left:-5%!important;
    right:-5%!important;
  }

  .footer-mycelium-main{stroke-width:.92!important}
  .footer-mycelium-branch{stroke-width:.68!important}
  .footer-mycelium-fine{stroke-width:.46!important}
}


/* x2 ALIGNMENT, TAPERING AND TYPOGRAPHIC SPACING */
.footer-cta-lfo{
  inset:-4% auto -7% -8%!important;
  width:94%!important;
  height:112%!important;
  left:-8%!important;
  right:auto!important;
}

.heezy h1{
  letter-spacing:-.036em!important;
}

.footer-cta{
  letter-spacing:-.034em!important;
}

.footer-cta > a{
  letter-spacing:calc(-.034em + var(--footer-expand-spacing))!important;
}

.footer-lfo-left,
.footer-lfo-right{
  stroke-linecap:round!important;
}

.footer-mycelium-main{
  stroke-width:.82!important;
}

.footer-mycelium-branch{
  stroke-width:.6!important;
}

.footer-mycelium-fine{
  stroke-width:.4!important;
}

@media(max-width:680px){
  .footer-cta-lfo{
    inset:-2% auto -5% -7%!important;
    width:105%!important;
    height:108%!important;
    left:-7%!important;
    right:auto!important;
  }

  .heezy h1{
    letter-spacing:-.028em!important;
  }

  .footer-cta,
  .footer-cta > a{
    letter-spacing:-.026em!important;
  }
}


/* ROTATING HEADER PLUS — MATCHES THE CURSOR'S 90° FLIP */
.header-plus{
  position:relative;
  display:inline-block;
  width:.56em;
  height:.56em;
  margin:0 .08em;
  vertical-align:.02em;
  color:currentColor;
}

.header-plus-shape{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  animation:cursorQuarterTurn 2.7s cubic-bezier(.22,1,.36,1) infinite;
  will-change:transform;
}

.header-plus-shape::before,
.header-plus-shape::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%);
}

.header-plus-shape::before{
  width:100%;
  height:.075em;
  min-height:2px;
}

.header-plus-shape::after{
  width:.075em;
  min-width:2px;
  height:100%;
}

@media(max-width:680px){
  .header-plus{
    width:.52em;
    height:.52em;
    margin:0 .055em;
  }
}

@media(prefers-reduced-motion:reduce){
  .header-plus-shape{
    animation:none!important;
  }
}


/* HEADER PLUS — QUICK MICRO-SHRINK + RESTRAINED DIFFUSION */
.header-plus{
  animation:headerPlusMicroReverb 8.4s cubic-bezier(.19,1,.22,1) infinite;
  transform-origin:50% 50%;
  will-change:transform,filter,opacity;
}

.header-plus::before,
.header-plus::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  border-radius:50%;
  color:currentColor;
}

.header-plus::before{
  box-shadow:
    0 0 5px currentColor,
    0 0 12px color-mix(in srgb,currentColor 28%,transparent),
    0 0 22px color-mix(in srgb,currentColor 12%,transparent);
  filter:blur(2px);
  animation:headerPlusDiffusionNear 8.4s cubic-bezier(.19,1,.22,1) infinite;
}

.header-plus::after{
  box-shadow:
    0 0 10px currentColor,
    0 0 24px color-mix(in srgb,currentColor 18%,transparent);
  filter:blur(5px);
  animation:headerPlusDiffusionFar 8.4s cubic-bezier(.19,1,.22,1) infinite;
}

@keyframes headerPlusMicroReverb{
  0%,33%,38%,100%{
    transform:scale(1);
    filter:blur(0);
    opacity:1;
  }
  34.2%{
    transform:scale(.34);
    filter:blur(.22px);
    opacity:.78;
  }
  35.4%{
    transform:scale(.12);
    filter:blur(.58px);
    opacity:.48;
  }
  36.4%{
    transform:scale(.72);
    filter:blur(.18px);
    opacity:.88;
  }
}

@keyframes headerPlusDiffusionNear{
  0%,32.5%,38%,100%{
    opacity:0;
    transform:scale(.8);
  }
  34.6%{
    opacity:.34;
    transform:scale(1.1);
  }
  35.6%{
    opacity:.62;
    transform:scale(1.65);
  }
  37%{
    opacity:.08;
    transform:scale(2.05);
  }
}

@keyframes headerPlusDiffusionFar{
  0%,33%,38%,100%{
    opacity:0;
    transform:scale(.7);
  }
  35.2%{
    opacity:.24;
    transform:scale(1.8);
  }
  36.4%{
    opacity:.06;
    transform:scale(2.5);
  }
}

/* Portfolio metadata remains compact when descriptions are absent. */


@media(prefers-reduced-motion:reduce){
  .header-plus,
  .header-plus::before,
  .header-plus::after{
    animation:none!important;
  }
}


/* NAV TYPOGRAPHY MATCHES FOOTER LEGAL LINE */
.nav{
  color:var(--muted)!important;
  font-size:.65rem!important;
  letter-spacing:.1em!important;
}

.brand,
.nav-center,
.nav-contact{
  color:inherit!important;
  font-size:inherit!important;
  letter-spacing:inherit!important;
  font-weight:400!important;
}

.nav-mail-icon{
  width:13px!important;
  height:9px!important;
  color:inherit!important;
}

.nav-mail-icon rect,
.nav-mail-icon path{
  stroke:currentColor!important;
  stroke-width:1.1!important;
}

@media(max-width:680px){
  .nav{
    font-size:.65rem!important;
    letter-spacing:.1em!important;
  }

  .brand,
  .nav-center,
  .nav-contact{
    font-size:inherit!important;
    letter-spacing:inherit!important;
  }

  .nav-mail-icon{
    width:13px!important;
    height:9px!important;
  }
}


/* LIGHTBOX 75% VOLUME CONFIRMATION */
.lightbox-stage{
  position:relative;
}

.lightbox-volume-toast{
  position:absolute;
  left:clamp(18px,3vw,42px);
  bottom:clamp(50px,7vh,78px);
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:7px 10px 6px;
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  border-radius:999px;
  color:var(--text);
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--text) 4%,transparent),
    0 0 18px color-mix(in srgb,var(--text) 11%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transform:translate3d(0,5px,0) scale(.94);
  filter:blur(.5px);
  pointer-events:none;
  font-size:.62rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

.lightbox-volume-toast::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(
    circle,
    color-mix(in srgb,var(--text) 15%,transparent) 0,
    transparent 68%
  );
  filter:blur(8px);
}

.lightbox-volume-toast.is-visible{
  animation:lightboxVolumeToastIn 1.45s cubic-bezier(.19,1,.22,1) both;
}

.lightbox-volume-toast.is-visible::before{
  animation:lightboxVolumeToastGlow 1.45s ease-out both;
}

@keyframes lightboxVolumeToastIn{
  0%{
    opacity:0;
    transform:translate3d(0,6px,0) scale(.9);
    filter:blur(1px);
  }
  16%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1.03);
    filter:blur(0);
  }
  28%,68%{
    opacity:.96;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translate3d(0,-3px,0) scale(.97);
    filter:blur(.35px);
  }
}

@keyframes lightboxVolumeToastGlow{
  0%{opacity:0;transform:scale(.8)}
  22%{opacity:.62;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.42)}
}

html[data-theme="light"] .lightbox-volume-toast{
  background:rgba(255,255,255,.76);
  border-color:rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.025),
    0 0 18px rgba(0,0,0,.08);
}

@media(max-width:680px){
  .lightbox-volume-toast{
    left:14px;
    bottom:56px;
    min-width:44px;
    padding:7px 9px 6px;
    font-size:.58rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .lightbox-volume-toast.is-visible{
    animation:none!important;
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* POSITION 75% INDICATOR ABOVE THE NATIVE VOLUME CONTROL */
.lightbox-volume-toast{
  left:clamp(72px,6.2vw,104px)!important;
  bottom:clamp(58px,8vh,86px)!important;
  transform-origin:50% 100%;
}

@media(max-width:680px){
  .lightbox-volume-toast{
    left:68px!important;
    bottom:62px!important;
  }
}


/* DYNAMIC VOLUME-TOAST POSITIONING OVERRIDE */
.lightbox-volume-toast{
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform-origin:50% 100%;
}

@media(max-width:680px){
  .lightbox-volume-toast{
    left:0!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
  }
}


/* FINAL VOLUME-TOAST POSITION: BOTTOM RIGHT OF PREVIEW */
.lightbox-volume-toast{
  left:auto!important;
  top:auto!important;
  right:22px!important;
  bottom:66px!important;
  margin:0!important;
  transform-origin:100% 100%;
}

@media(max-width:680px){
  .lightbox-volume-toast{
    right:14px!important;
    bottom:58px!important;
  }
}


/* x2 SEAMLESS ORGANISM + x1-INSPIRED CLUSTER DENSITY */
.footer-lfo-left,
.footer-lfo-right,
.footer-mycelium-path{
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.footer-mycelium-path{
  filter:
    drop-shadow(0 0 3px color-mix(in srgb,var(--text) 9%,transparent))!important;
}

.footer-mycelium-main{
  opacity:.92!important;
}

.footer-mycelium-branch{
  opacity:.76!important;
}

.footer-mycelium-fine{
  opacity:.62!important;
}

.footer-mycelium-node{
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 9px color-mix(in srgb,var(--text) 27%,transparent))!important;
}

@media(max-width:680px){
  .footer-mycelium-path{
    filter:
      drop-shadow(0 0 2px color-mix(in srgb,var(--text) 8%,transparent))!important;
  }
}


/* x2 SPARKLE CLUSTER — MYCELIUM REMOVED */
.footer-mycelium,
.footer-mycelium-path,
.footer-mycelium-node{
  display:none!important;
}

.x2-sparkle-field{
  --x2-energy:.35;
  --x2-breathe:.5;
  position:absolute;
  inset:-10% -5% -12% -5%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
  opacity:calc(.54 + var(--x2-energy) * .28);
  transform:scale(calc(.985 + var(--x2-breathe) * .018));
  transform-origin:50% 50%;
  transition:opacity 120ms linear,transform 120ms linear;
}

.x2-sparkle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:calc(5px + 7px * var(--sparkle-scale));
  height:calc(5px + 7px * var(--sparkle-scale));
  transform:translate(-50%,-50%) scale(.46) rotate(0deg);
  opacity:0;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb,var(--text) 24%,transparent))
    drop-shadow(0 0 11px color-mix(in srgb,var(--text) 10%,transparent));
  animation:x2SparklePulse 6.8s ease-in-out var(--sparkle-delay) infinite;
}

.x2-sparkle::before,
.x2-sparkle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%);
}

.x2-sparkle::before{
  width:1px;
  height:100%;
}

.x2-sparkle::after{
  width:100%;
  height:1px;
}

.x2-sparkle:nth-child(3n)::before{
  width:.8px;
}

.x2-sparkle:nth-child(3n)::after{
  height:.8px;
}

.x2-sparkle:nth-child(4n){
  animation-duration:8.1s;
}

.x2-sparkle:nth-child(5n){
  animation-duration:5.9s;
}

@keyframes x2SparklePulse{
  0%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.34) rotate(0deg);
    filter:
      drop-shadow(0 0 2px color-mix(in srgb,var(--text) 12%,transparent));
  }
  10%{
    opacity:.12;
  }
  17%{
    opacity:calc(.58 + var(--x2-energy) * .38);
    transform:translate(-50%,-52%) scale(calc(.82 + var(--sparkle-scale) * .24)) rotate(45deg);
    filter:
      drop-shadow(0 0 6px color-mix(in srgb,var(--text) 32%,transparent))
      drop-shadow(0 0 14px color-mix(in srgb,var(--text) 14%,transparent));
  }
  24%{
    opacity:.18;
    transform:translate(-48%,-60%) scale(.64) rotate(82deg);
  }
  38%{
    opacity:0;
    transform:translate(-46%,-70%) scale(.4) rotate(96deg);
  }
}

html[data-theme="light"] .x2-sparkle{
  filter:
    drop-shadow(0 0 4px rgba(0,0,0,.12))
    drop-shadow(0 0 10px rgba(0,0,0,.05));
}

@media(max-width:680px){
  .x2-sparkle-field{
    inset:-7% -3% -9% -3%;
  }

  .x2-sparkle{
    width:calc(4px + 5px * var(--sparkle-scale));
    height:calc(4px + 5px * var(--sparkle-scale));
  }
}

@media(prefers-reduced-motion:reduce){
  .x2-sparkle-field{
    transform:none!important;
  }

  .x2-sparkle{
    animation:none!important;
    opacity:.22;
    transform:translate(-50%,-50%) scale(.7);
  }
}


/* FOOTER CTA: TWO-LINE COPY, INLINE LFO, CONTINUOUS CONTACT-ICON MORPH */
.footer-cta{
  position:relative;
  letter-spacing:-.034em!important;
}

.footer-cta::before,
.footer-cta > a::before,
.footer-cta > a::after{
  content:none!important;
  display:none!important;
}

.footer-cta-link{
  --footer-expand-x:1!important;
  --footer-expand-y:1!important;
  --footer-expand-spacing:0em!important;
  --footer-expand-glow:0!important;
  position:relative;
  z-index:3;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  width:fit-content;
  max-width:100%;
  transform:none!important;
  letter-spacing:-.034em!important;
  text-shadow:none!important;
  line-height:.9;
}

.footer-cta-line{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.footer-cta-line-bottom{
  gap:.13em;
}

.footer-individuality{
  text-decoration:none!important;
  border:0!important;
  background:none!important;
}

.footer-individuality::before,
.footer-individuality::after{
  content:none!important;
  display:none!important;
}

/* The LFO replaces the old underline and lives precisely between both lines. */
.footer-lfo-slot{
  position:relative;
  z-index:1;
  display:block;
  width:33%;
  height:clamp(18px,2.25vw,31px);
  margin:clamp(-2px,-.14vw,-1px) 0 clamp(-3px,-.18vw,-1px);
  overflow:visible;
  pointer-events:none;
  transform-origin:0 50%;
  transition:
    width 850ms cubic-bezier(.16,1,.3,1),
    filter 700ms cubic-bezier(.16,1,.3,1);
}

.footer-cta:is(:hover,:focus-within) .footer-lfo-slot{
  width:100%;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--text) 11%,transparent));
}

.footer-cta-lfo{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  height:100%!important;
  overflow:visible;
  color:inherit;
  pointer-events:none;
}

.footer-lfo-group{
  transform:none!important;
  opacity:1!important;
}

.footer-lfo-top,
.footer-lfo-top-glow{
  display:block!important;
}

.footer-lfo-bottom,
.footer-lfo-bottom-glow,
.footer-lfo-left,
.footer-lfo-left-glow,
.footer-lfo-right,
.footer-lfo-right-glow,
.footer-lfo-accent{
  opacity:.08!important;
}

.footer-lfo-top{
  opacity:.76!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.footer-lfo-top-glow{
  opacity:.1!important;
}

/* Footer contact symbol: persistent strokes, geometry animated in JavaScript. */
.footer-contact-morph{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:.78em;
  height:.62em;
  margin-left:.035em;
  color:currentColor;
  vertical-align:.035em;
}

.footer-contact-morph svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

#footerContactMorphGroup{
  transform-origin:12px 9px;
  will-change:transform;
}

#footerContactMorphPrimary,
#footerContactMorphSecondary{
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

#footerContactMorphSecondary{
  stroke-width:1.05;
}

.footer-cta-link:is(:hover,:focus-visible) .footer-contact-morph{
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 18%,transparent));
}

/* Footer CTA: 10% smaller than the original responsive size. */
.footer-cta{
  font-size:clamp(2.52rem,6.3vw,6.48rem)!important;
}

/* LFO unfolds in width while its frequency decelerates in JavaScript. */
.footer-lfo-slot{
  transition:
    width 1050ms cubic-bezier(.16,1,.3,1),
    filter 850ms cubic-bezier(.16,1,.3,1)!important;
}

@media(max-width:680px){
  .footer-contact-morph{
    width:.74em;
    height:.6em;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-lfo-slot{
    width:33%;
    transition:none!important;
  }

  .footer-cta:is(:hover,:focus-within) .footer-lfo-slot{
    width:100%;
  }

}


/* FOOTER TEXT: NO FLICKER */
.footer-individuality,
.footer-individuality.is-elegantly-flickering{
  opacity:1!important;
  filter:none!important;
  text-shadow:none!important;
  animation:none!important;
}


/* FOOTER SAW: SHORTER RESTING STATE */
.footer-lfo-slot{
  width:16.5%!important;
}

.footer-cta:is(:hover,:focus-within) .footer-lfo-slot{
  width:100%!important;
}


/* FOOTER SAW: ELEGANT HOVER SHIMMER */
.footer-cta:is(:hover,:focus-within) .footer-lfo-top{
  animation:footerSawShimmer 1.85s steps(1,end) infinite;
}

.footer-cta:is(:hover,:focus-within) .footer-lfo-top-glow{
  animation:footerSawGlowShimmer 1.85s steps(1,end) infinite;
}

@keyframes footerSawShimmer{
  0%,11%,16%,36%,41%,67%,72%,100%{
    opacity:.78;
    filter:none;
  }
  12%,37%,68%{
    opacity:.96;
    filter:
      drop-shadow(0 0 2px color-mix(in srgb,var(--text) 24%,transparent))
      drop-shadow(0 0 7px color-mix(in srgb,var(--text) 10%,transparent));
  }
  13%,38%,69%{
    opacity:.62;
    filter:none;
  }
  14%,39%,70%{
    opacity:.9;
    filter:
      drop-shadow(0 0 3px color-mix(in srgb,var(--text) 18%,transparent));
  }
}

@keyframes footerSawGlowShimmer{
  0%,10%,17%,35%,42%,66%,73%,100%{
    opacity:.09;
  }
  12%,37%,68%{
    opacity:.24;
  }
  13%,38%,69%{
    opacity:.045;
  }
  14%,39%,70%{
    opacity:.16;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-cta:is(:hover,:focus-within) .footer-lfo-top,
  .footer-cta:is(:hover,:focus-within) .footer-lfo-top-glow{
    animation:none!important;
  }
}


/* FOOTER CTA: SMALLER, WITHOUT COLLAPSING THE ORIGINAL SCALE */
.footer-cta{
  font-size:clamp(2.38rem,5.95vw,6.12rem)!important;
}

/* BRIGHT LFO-ICON FIREWORK CLUSTER */
.footer-lfo-fireworks{
  position:absolute;
  inset:0;
  z-index:5;
  overflow:visible;
  pointer-events:none;
}

.footer-lfo-firework{
  --dx:0px;
  --dy:0px;
  --rot:0deg;
  --delay:0ms;
  position:absolute;
  left:50%;
  top:52%;
  width:clamp(19px,1.65vw,27px);
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--text) 72%,transparent);
  border-radius:2px;
  color:var(--text);
  background:color-mix(in srgb,var(--bg) 54%,transparent);
  box-shadow:
    0 0 5px color-mix(in srgb,var(--text) 72%,transparent),
    0 0 16px color-mix(in srgb,var(--text) 34%,transparent),
    0 0 32px color-mix(in srgb,var(--text) 14%,transparent);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.15) rotate(0deg);
  animation:footerLfoFirework 1180ms cubic-bezier(.12,.78,.16,1)
    var(--delay) both;
  will-change:transform,opacity,filter;
}

.footer-lfo-firework svg{
  display:block;
  width:100%;
  height:100%;
  padding:3px;
  overflow:visible;
}

.footer-lfo-firework path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}

.footer-lfo-firework::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:3px;
  opacity:0;
  background:radial-gradient(
    circle,
    color-mix(in srgb,var(--text) 26%,transparent) 0,
    transparent 68%
  );
  filter:blur(5px);
  animation:footerLfoFireworkHalo 1180ms ease-out var(--delay) both;
}

@keyframes footerLfoFirework{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.12) rotate(0deg);
    filter:brightness(1);
  }
  12%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.22) rotate(calc(var(--rot) * .22));
    filter:brightness(2.8);
  }
  27%{
    opacity:.96;
    transform:
      translate(
        calc(-50% + var(--dx) * .34),
        calc(-50% + var(--dy) * .34)
      )
      scale(.96)
      rotate(calc(var(--rot) * .48));
    filter:brightness(2.15);
  }
  68%{
    opacity:.82;
    transform:
      translate(
        calc(-50% + var(--dx) * .88),
        calc(-50% + var(--dy) * .88)
      )
      scale(.78)
      rotate(calc(var(--rot) * .88));
    filter:brightness(1.55);
  }
  100%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--dx)),
        calc(-50% + var(--dy))
      )
      scale(.42)
      rotate(var(--rot));
    filter:brightness(1);
  }
}

@keyframes footerLfoFireworkHalo{
  0%,100%{opacity:0;transform:scale(.35)}
  16%{opacity:.95;transform:scale(1)}
  52%{opacity:.34;transform:scale(1.55)}
}

html[data-theme="light"] .footer-lfo-firework{
  border-color:rgba(0,0,0,.5);
  background:rgba(255,255,255,.76);
  box-shadow:
    0 0 5px rgba(0,0,0,.34),
    0 0 15px rgba(0,0,0,.14),
    0 0 30px rgba(0,0,0,.06);
}

@media(max-width:680px){
  .footer-lfo-firework{
    width:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-lfo-fireworks{
    display:none!important;
  }
}


/* FOOTER FIREWORKS: LARGER OUTER HALO AROUND CTA */
.footer-lfo-fireworks{
  inset:-28% -16% -34% -16%;
  overflow:visible!important;
}

.footer-lfo-firework{
  width:clamp(22px,2vw,32px);
}

@media(max-width:680px){
  .footer-lfo-fireworks{
    inset:-22% -10% -28% -10%;
  }

  .footer-lfo-firework{
    width:21px;
  }
}


/* FIREWORK ORIGINS DISTRIBUTED THROUGHOUT THE CTA */
.footer-lfo-firework{
  --sx:50%;
  --sy:50%;
  left:var(--sx)!important;
  top:var(--sy)!important;
}


/* ORGANIC BUBBLE BORDERS FOR FIREWORK ICONS */
.footer-lfo-firework{
  --blob-a:42%;
  --blob-b:58%;
  --blob-c:46%;
  --blob-d:54%;
  border-radius:
    var(--blob-a)
    var(--blob-b)
    var(--blob-c)
    var(--blob-d)
    / 48% 56% 44% 52%!important;
  border-width:1px!important;
}

.footer-lfo-firework::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid color-mix(in srgb,var(--text) 32%,transparent);
  border-radius:
    calc(var(--blob-d) + 3%)
    calc(var(--blob-a) - 2%)
    calc(var(--blob-b) + 1%)
    calc(var(--blob-c) - 1%)
    / 54% 46% 58% 42%;
  opacity:.38;
  transform:rotate(7deg) scale(.97);
  pointer-events:none;
}

.footer-lfo-firework svg{
  border-radius:inherit;
}


/* FIREWORK ICON BORDERS: BRIEF FLASH, THEN FAINT — NO GLOW */
.footer-lfo-firework{
  border-color:color-mix(in srgb,var(--text) 18%,transparent)!important;
  box-shadow:none!important;
  filter:none!important;
}

.footer-lfo-firework::before{
  border-color:color-mix(in srgb,var(--text) 11%,transparent)!important;
  box-shadow:none!important;
  filter:none!important;
}

.footer-lfo-firework::after{
  display:none!important;
  animation:none!important;
}

.footer-lfo-firework{
  animation:footerLfoFireworkQuietBorder 1180ms cubic-bezier(.12,.78,.16,1)
    var(--delay) both!important;
}

@keyframes footerLfoFireworkQuietBorder{
  0%{
    opacity:0;
    border-color:color-mix(in srgb,var(--text) 0%,transparent);
    transform:translate(-50%,-50%) scale(.12) rotate(0deg);
  }
  9%{
    opacity:1;
    border-color:color-mix(in srgb,var(--text) 96%,transparent);
    transform:translate(-50%,-50%) scale(1.18) rotate(calc(var(--rot) * .16));
  }
  13%{
    opacity:.42;
    border-color:color-mix(in srgb,var(--text) 12%,transparent);
  }
  17%{
    opacity:.84;
    border-color:color-mix(in srgb,var(--text) 76%,transparent);
  }
  23%{
    opacity:.32;
    border-color:color-mix(in srgb,var(--text) 14%,transparent);
    transform:
      translate(
        calc(-50% + var(--dx) * .28),
        calc(-50% + var(--dy) * .28)
      )
      scale(.96)
      rotate(calc(var(--rot) * .42));
  }
  68%{
    opacity:.25;
    border-color:color-mix(in srgb,var(--text) 16%,transparent);
    transform:
      translate(
        calc(-50% + var(--dx) * .88),
        calc(-50% + var(--dy) * .88)
      )
      scale(.78)
      rotate(calc(var(--rot) * .88));
  }
  100%{
    opacity:0;
    border-color:color-mix(in srgb,var(--text) 8%,transparent);
    transform:
      translate(
        calc(-50% + var(--dx)),
        calc(-50% + var(--dy))
      )
      scale(.42)
      rotate(var(--rot));
  }
}

html[data-theme="light"] .footer-lfo-firework{
  border-color:rgba(0,0,0,.14)!important;
  box-shadow:none!important;
}

html[data-theme="light"] .footer-lfo-firework::before{
  border-color:rgba(0,0,0,.08)!important;
}


/* FIREWORK FIELD: FULL VIEWPORT WIDTH ACROSS THE FOOTER SECTION */
.footer-lfo-fireworks{
  left:50%!important;
  right:auto!important;
  top:-28%!important;
  bottom:-34%!important;
  width:100vw!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
}

@media(max-width:680px){
  .footer-lfo-fireworks{
    top:-22%!important;
    bottom:-28%!important;
    width:100vw!important;
  }
}


/* FOOTER CTA: SIGNIFICANTLY SMALLER TEXT + MATCHING ANIMATED ICON */
.footer-cta{
  font-size:clamp(1.9rem,4.75vw,4.9rem)!important;
}

.footer-contact-morph{
  width:.76em!important;
  height:.6em!important;
}


/* FOOTER CTA: FURTHER SIZE REDUCTION */
.footer-cta{
  font-size:clamp(1.55rem,3.85vw,4rem)!important;
}

.footer-contact-morph{
  width:.72em!important;
  height:.57em!important;
}


/* SLIGHTLY SMALLER MATCHING SANS PHRASES */
.heezy-curating,
.footer-cta-line-top{
  font-size:.9em;
}

.heezy-curating{
  display:inline-block;
}


/* FOOTER CONTACT MORPH: HOVER-ONLY, CENTERED BELOW THE CTA COPY */
.footer-cta-link{
  padding-bottom:.82em;
}

.footer-contact-morph{
  position:absolute!important;
  left:50%!important;
  top:calc(100% + .12em)!important;
  width:.72em!important;
  height:.57em!important;
  margin:0!important;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(-4px) scale(.86);
  transform-origin:50% 50%;
  pointer-events:none;
  transition:
    opacity 240ms ease,
    transform 480ms cubic-bezier(.16,1,.3,1),
    visibility 0s linear 480ms;
}

.footer-cta:is(:hover,:focus-within) .footer-contact-morph{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
  transition:
    opacity 180ms ease,
    transform 520ms cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s;
}

@media(max-width:680px){
  .footer-cta-link{
    padding-bottom:.9em;
  }

  .footer-contact-morph{
    top:calc(100% + .08em)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-contact-morph{
    transition:none!important;
  }
}


/* FIREWORK ICONS: SLIGHTLY LARGER AND LONGER-LIVED */
.footer-lfo-firework{
  width:clamp(26px,2.35vw,37px)!important;
  animation-duration:1650ms!important;
}

.footer-lfo-firework::before{
  animation-duration:1650ms!important;
}

@media(max-width:680px){
  .footer-lfo-firework{
    width:24px!important;
  }
}


/* X1 DOUBLE-CLICK MATRIX BURST */
.root-center-logo{
  pointer-events:auto!important;
}

.root-center-logo img{
  cursor:pointer;
  user-select:none;
  -webkit-user-drag:none;
}

.heezy-root-visual{
  isolation:isolate;
}

.x1-matrix-burst{
  position:absolute;
  inset:-7%;
  z-index:10;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transform:scale(.92);
  border-radius:50%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 17px,
      color-mix(in srgb,var(--text) 34%,transparent) 18px,
      transparent 19px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 17px,
      color-mix(in srgb,var(--text) 34%,transparent) 18px,
      transparent 19px
    );
  mask-image:radial-gradient(circle at 50% 50%,#000 0 56%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 56%,transparent 78%);
  mix-blend-mode:screen;
}

.x1-matrix-burst::before,
.x1-matrix-burst::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.x1-matrix-burst::before{
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 35px,
      color-mix(in srgb,var(--text) 18%,transparent) 36px,
      transparent 37px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 35px,
      color-mix(in srgb,var(--text) 18%,transparent) 36px,
      transparent 37px
    );
  transform:rotate(.35deg) scale(1.03);
}

.x1-matrix-burst::after{
  background:
    radial-gradient(circle at 24% 31%,currentColor 0 1px,transparent 2px),
    radial-gradient(circle at 72% 22%,currentColor 0 1px,transparent 2px),
    radial-gradient(circle at 81% 68%,currentColor 0 1px,transparent 2px),
    radial-gradient(circle at 36% 76%,currentColor 0 1px,transparent 2px),
    radial-gradient(circle at 53% 44%,currentColor 0 1px,transparent 2px);
  background-size:54px 54px,68px 68px,62px 62px,74px 74px,48px 48px;
  opacity:.42;
}

.heezy-root-visual.is-matrix-bursting .x1-matrix-burst{
  animation:x1MatrixDissolve 1.95s cubic-bezier(.15,.78,.2,1) both;
}

.heezy-root-visual.is-matrix-bursting .heezy-root-svg,
.heezy-root-visual.is-matrix-bursting .root-center-logo{
  animation:x1ClusterFlash 1.95s cubic-bezier(.18,.8,.18,1) both;
}

.heezy-root-visual.is-matrix-bursting .root-center-logo img{
  animation:x1LogoFlash 1.95s cubic-bezier(.18,.8,.18,1) both;
}

.heezy-root-visual.is-matrix-bursting .root-branch,
.heezy-root-visual.is-matrix-bursting .root-hover-tendril,
.heezy-root-visual.is-matrix-bursting .root-node{
  animation:x1RootSignalFlash 1.95s ease-out both;
}

@keyframes x1ClusterFlash{
  0%{
    filter:brightness(1);
  }
  6%{
    filter:
      brightness(3.4)
      drop-shadow(0 0 9px color-mix(in srgb,var(--text) 85%,transparent))
      drop-shadow(0 0 32px color-mix(in srgb,var(--text) 42%,transparent));
  }
  12%{
    filter:brightness(.9);
  }
  18%{
    filter:
      brightness(2.45)
      drop-shadow(0 0 12px color-mix(in srgb,var(--text) 52%,transparent));
  }
  30%{
    filter:brightness(1.22);
  }
  100%{
    filter:brightness(1);
  }
}

@keyframes x1LogoFlash{
  0%{
    transform:scale(1);
    filter:brightness(1);
  }
  7%{
    transform:scale(1.09);
    filter:
      brightness(4.2)
      contrast(1.25)
      drop-shadow(0 0 18px color-mix(in srgb,var(--text) 94%,transparent))
      drop-shadow(0 0 50px color-mix(in srgb,var(--text) 50%,transparent));
  }
  14%{
    transform:scale(.985);
    filter:brightness(1.15);
  }
  21%{
    transform:scale(1.045);
    filter:brightness(2.6);
  }
  38%{
    transform:scale(1);
    filter:brightness(1.08);
  }
  100%{
    transform:scale(1);
    filter:brightness(1);
  }
}

@keyframes x1MatrixDissolve{
  0%{
    opacity:0;
    transform:scale(.82) rotate(-.4deg);
    filter:brightness(2.8) blur(.3px);
    clip-path:inset(46% 48% 46% 48%);
  }
  9%{
    opacity:1;
    transform:scale(1.03) rotate(.2deg);
    filter:brightness(3.4) blur(0);
    clip-path:inset(0);
  }
  18%{
    opacity:.82;
    transform:scale(1) rotate(0);
    filter:brightness(1.7);
  }
  45%{
    opacity:.48;
    transform:scale(1.06);
    filter:brightness(1.15) blur(.15px);
    clip-path:inset(0 0 0 0);
  }
  72%{
    opacity:.18;
    transform:scale(1.13);
    filter:brightness(.9) blur(.7px);
    clip-path:inset(8% 5% 12% 7%);
  }
  100%{
    opacity:0;
    transform:scale(1.2);
    filter:brightness(.75) blur(2px);
    clip-path:inset(48% 42% 44% 46%);
  }
}

@keyframes x1RootSignalFlash{
  0%,100%{
    opacity:inherit;
  }
  7%{
    opacity:1;
    stroke-width:2.1;
    filter:
      drop-shadow(0 0 4px currentColor)
      drop-shadow(0 0 11px color-mix(in srgb,var(--text) 72%,transparent));
  }
  15%{
    opacity:.36;
  }
  22%{
    opacity:.96;
    filter:drop-shadow(0 0 7px color-mix(in srgb,var(--text) 46%,transparent));
  }
  38%{
    opacity:.72;
    filter:none;
  }
}

html[data-theme="light"] .x1-matrix-burst{
  mix-blend-mode:multiply;
}

@media(max-width:680px){
  .x1-matrix-burst{
    inset:-3%;
    background:
      repeating-linear-gradient(
        0deg,
        transparent 0 13px,
        color-mix(in srgb,var(--text) 30%,transparent) 14px,
        transparent 15px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0 13px,
        color-mix(in srgb,var(--text) 30%,transparent) 14px,
        transparent 15px
      );
  }
}

@media(prefers-reduced-motion:reduce){
  .heezy-root-visual.is-matrix-bursting .x1-matrix-burst,
  .heezy-root-visual.is-matrix-bursting .heezy-root-svg,
  .heezy-root-visual.is-matrix-bursting .root-center-logo,
  .heezy-root-visual.is-matrix-bursting .root-center-logo img,
  .heezy-root-visual.is-matrix-bursting .root-branch,
  .heezy-root-visual.is-matrix-bursting .root-hover-tendril,
  .heezy-root-visual.is-matrix-bursting .root-node{
    animation:none!important;
  }
}


/* X1 MATRIX GRID: COUNTER-MOVING SCAN LAYERS */
.heezy-root-visual.is-matrix-bursting .x1-matrix-burst{
  animation:
    x1MatrixDissolve 1.95s cubic-bezier(.15,.78,.2,1) both,
    x1MatrixGridDrift 680ms linear infinite;
}

.heezy-root-visual.is-matrix-bursting .x1-matrix-burst::before{
  animation:x1MatrixGridCounterDrift 520ms linear infinite;
}

.heezy-root-visual.is-matrix-bursting .x1-matrix-burst::after{
  animation:x1MatrixNodeScan 760ms steps(4,end) infinite;
}

@keyframes x1MatrixGridDrift{
  0%{
    background-position:
      0 0,
      0 0;
  }
  100%{
    background-position:
      0 38px,
      -38px 0;
  }
}

@keyframes x1MatrixGridCounterDrift{
  0%{
    background-position:
      0 0,
      0 0;
    transform:rotate(.35deg) scale(1.03) translate3d(0,0,0);
  }
  100%{
    background-position:
      0 -74px,
      74px 0;
    transform:rotate(-.35deg) scale(1.05) translate3d(2px,-2px,0);
  }
}

@keyframes x1MatrixNodeScan{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
    opacity:.18;
  }
  25%{
    background-position:
      18px -12px,
      -20px 16px,
      14px 22px,
      -16px -18px,
      24px 10px;
    opacity:.58;
  }
  50%{
    background-position:
      36px -24px,
      -40px 32px,
      28px 44px,
      -32px -36px,
      48px 20px;
    opacity:.3;
  }
  75%{
    background-position:
      54px -36px,
      -60px 48px,
      42px 66px,
      -48px -54px,
      72px 30px;
    opacity:.52;
  }
  100%{
    background-position:
      72px -48px,
      -80px 64px,
      56px 88px,
      -64px -72px,
      96px 40px;
    opacity:.18;
  }
}

@media(prefers-reduced-motion:reduce){
  .heezy-root-visual.is-matrix-bursting .x1-matrix-burst,
  .heezy-root-visual.is-matrix-bursting .x1-matrix-burst::before,
  .heezy-root-visual.is-matrix-bursting .x1-matrix-burst::after{
    animation:none!important;
  }
}


/* MOBILE MATRIX-BURST ACTIVATION + ROBUST PORTFOLIO MEDIA */
.root-center-logo img{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}


















/* FOOTER CONTACT MORPH: ALWAYS VISIBLE AND CONTINUOUSLY ANIMATED */
.footer-contact-morph{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0) scale(1)!important;
  transition:none!important;
}

.footer-cta:is(:hover,:focus-within) .footer-contact-morph{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0) scale(1)!important;
}


/* =========================================================
   OFF THE HEEZY STUDIO — EASTER-EGG COLOR MODE
   Double-click the theme switch to enter.
   ========================================================= */

.theme-easter-logo,
.theme-icon-easter{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.theme-easter-logo{
  position:absolute;
  inset:1px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#000;
  transform:scale(.65) rotate(-24deg);
  transition:
    opacity .42s ease,
    visibility .42s ease,
    transform .7s cubic-bezier(.16,1,.3,1);
}

.theme-easter-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:saturate(1.08) contrast(1.08);
}

.theme-icon-easter{
  right:6px;
  color:#15100c;
  transform:translateY(-50%) rotate(-16deg) scale(.55);
}

.theme-icon-easter .egg-shell{
  fill:rgba(255,255,255,.1);
}

.theme-icon-easter .egg-wave{
  stroke-dasharray:18;
  stroke-dashoffset:18;
}

html[data-theme="easter"]{
  color-scheme:dark;
  --oth-orange:#ff7417;
  --oth-orange-deep:#e94d0a;
  --oth-amber:#ffad32;
  --oth-warm:#ffd06a;
  --oth-accent-gradient:linear-gradient(
    118deg,
    #e94d0a 0%,
    #ff7417 35%,
    #ff9823 68%,
    #ffbd4c 100%
  );
}

html[data-theme="easter"] body{
  --bg:#080503;
  --surface:#110a06;
  --text:#ff8b22;
  --muted:#c46927;
  --faint:#7b3d18;
  --line:rgba(255,120,30,.2);
  color:#ff8d25;
  background:
    radial-gradient(circle at 14% 8%,rgba(255,105,20,.1),transparent 30%),
    radial-gradient(circle at 86% 18%,rgba(255,159,35,.06),transparent 28%),
    radial-gradient(circle at 52% 76%,rgba(235,72,6,.055),transparent 42%),
    linear-gradient(180deg,#090503 0%,#050302 48%,#0b0603 100%);
}

html[data-theme="easter"] body::before{
  opacity:.14;
  background-image:
    radial-gradient(circle,rgba(255,125,31,.42) 1px,transparent 1px);
  background-size:29px 29px;
}

html[data-theme="easter"] body::after{
  background:
    radial-gradient(circle at center,transparent 42%,rgba(109,35,4,.12) 72%,rgba(0,0,0,.6) 100%);
}

html[data-theme="easter"] .ambient{
  opacity:.72;
  background:
    radial-gradient(circle at 24% 30%,rgba(255,100,15,.13),transparent 24%),
    radial-gradient(circle at 74% 66%,rgba(255,171,44,.08),transparent 30%);
}

html[data-theme="easter"] .cursor-glow{
  opacity:.58;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle,rgba(255,116,23,.22) 0%,rgba(255,95,9,.08) 34%,transparent 72%);
}

html[data-theme="easter"] .nav.scrolled{
  background:rgba(8,5,3,.78);
  border-bottom-color:rgba(255,118,24,.13);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
}

html[data-theme="easter"] .brand-logo-gif,
html[data-theme="easter"] .root-center-logo img{
  background:#000;
  border-radius:50%;
  filter:
    saturate(1.12)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(255,105,15,.22));
}

html[data-theme="easter"] .theme-toggle-track{
  border-color:rgba(255,191,76,.42);
  background:
    linear-gradient(
      118deg,
      rgba(225,67,6,.94) 0%,
      rgba(255,105,15,.96) 38%,
      rgba(255,145,30,.94) 70%,
      rgba(255,183,65,.92) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,221,150,.17),
    0 0 14px rgba(255,94,8,.18),
    0 8px 24px rgba(0,0,0,.28);
}

html[data-theme="easter"] .theme-toggle-orb{
  background:#000;
  transform:translateX(0) rotate(0deg);
  box-shadow:
    0 0 0 1px rgba(255,190,80,.5),
    0 0 11px rgba(255,96,10,.36),
    0 4px 12px rgba(0,0,0,.38);
}

html[data-theme="easter"] .moon-phase,
html[data-theme="easter"] .theme-icon-sun,
html[data-theme="easter"] .theme-icon-moon{
  opacity:0!important;
  visibility:hidden;
}

html[data-theme="easter"] .theme-easter-logo{
  opacity:1;
  visibility:visible;
  transform:scale(1) rotate(0deg);
}

html[data-theme="easter"] .theme-icon-easter{
  opacity:.96;
  visibility:visible;
  transform:translateY(-50%) rotate(0deg) scale(1);
  animation:easterEggFloat 2.5s cubic-bezier(.45,0,.2,1) infinite;
}

html[data-theme="easter"] .theme-icon-easter .egg-wave-a{
  animation:easterEggWave 1.7s ease-in-out infinite;
}

html[data-theme="easter"] .theme-icon-easter .egg-wave-b{
  animation:easterEggWave 1.7s ease-in-out .18s infinite reverse;
}

@keyframes easterEggFloat{
  0%,100%{transform:translateY(-50%) rotate(-4deg) scale(1)}
  50%{transform:translateY(-57%) rotate(4deg) scale(1.06)}
}

@keyframes easterEggWave{
  0%{stroke-dashoffset:18;opacity:.28}
  38%,72%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-18;opacity:.28}
}

/* Orange-gradient typography and linework */


html[data-theme="easter"] :is(
  .serif,
  #typed,
  .footer-individuality,
  .heezy-text-panel h1
){
  color:transparent!important;
  background:var(--oth-accent-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

html[data-theme="easter"] :is(
  .progress,
  .scroll-line::after
){
  background:var(--oth-accent-gradient)!important;
  box-shadow:0 0 10px rgba(255,103,13,.28);
}

html[data-theme="easter"] :is(
  .nav-mail-icon rect,
  .nav-mail-icon path,
  .footer-contact-morph path,
  .theme-icon svg,
  .heezy-root-svg path,
  .heezy-root-svg circle,
  .sound-lfo-display path,
  .footer-lfo-path,
  .x1-matrix-burst
){
  stroke:#ff7b1c;
}

html[data-theme="easter"] :is(
  .root-branch,
  .root-fine-branch,
  .root-digital-branch,
  .root-waveform,
  .root-hover-tendril
){
  stroke:#ff7818!important;
  filter:
    drop-shadow(0 0 3px rgba(255,96,10,.3))
    drop-shadow(0 0 9px rgba(255,140,31,.11));
}

html[data-theme="easter"] :is(
  .root-node,
  .root-digital-node,
  .footer-sparkle
){
  fill:#ff8e22!important;
  color:#ff8e22!important;
  filter:drop-shadow(0 0 5px rgba(255,115,20,.45));
}











html[data-theme="easter"] .footer{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,102,10,.05),transparent 42%),
    #070402;
}

html[data-theme="easter"] .lightbox{
  color:#ff8720;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,93,6,.055),transparent 40%),
    rgba(5,3,2,.985);
}

html[data-theme="easter"] :is(
  .lightbox-top,
  .lightbox-bottom
){
  border-color:rgba(255,120,24,.17);
  background:rgba(8,5,3,.7);
}

html[data-theme="easter"] :is(
  .lightbox-close,
  .lightbox-nav button
){
  border-color:rgba(255,124,27,.25);
  background:rgba(255,100,10,.045);
}

html[data-theme="easter"] :is(
  .lightbox-close,
  .lightbox-nav button
):hover{
  border-color:rgba(255,165,46,.58);
  background:rgba(255,105,12,.1);
}

html[data-theme="easter"] .lightbox-volume-toast{
  color:#ff9228;
  border-color:rgba(255,136,32,.26);
  background:rgba(17,9,4,.76);
  box-shadow:
    0 0 0 1px rgba(255,104,12,.04),
    0 0 18px rgba(255,91,5,.12);
}

html[data-theme="easter"] .cursor-plus{
  color:#ff811e;
}

html[data-theme="easter"] ::selection{
  color:#080402;
  background:#ff8c25;
}

html[data-theme="easter"] .x1-matrix-burst{
  color:#ff811d;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 17px,
      rgba(255,119,23,.36) 18px,
      transparent 19px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 17px,
      rgba(255,165,42,.3) 18px,
      transparent 19px
    );
}

html[data-theme="easter"] .footer-lfo-firework{
  color:#ff8420;
  border-color:rgba(255,128,27,.18)!important;
  background:rgba(18,9,4,.68);
}

@media(max-width:680px){
  html[data-theme="easter"] .theme-toggle-track{
    box-shadow:
      inset 0 0 0 1px rgba(255,221,150,.14),
      0 0 10px rgba(255,94,8,.14);
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="easter"] .theme-icon-easter,
  html[data-theme="easter"] .theme-icon-easter .egg-wave{
    animation:none!important;
  }
}


/* =========================================================
   v2.49 — STUDIO MODE POLISH + AMBIENT CTA LFO SIGNALS
   ========================================================= */

/* The animated plus between “image” and “sound” must remain visible. */
html[data-theme="easter"] .header-plus{
  opacity:1!important;
  visibility:visible!important;
  color:#ff8621!important;
  filter:
    drop-shadow(0 0 3px rgba(255,112,18,.46))
    drop-shadow(0 0 10px rgba(255,91,5,.18));
}

html[data-theme="easter"] .header-plus-shape::before,
html[data-theme="easter"] .header-plus-shape::after{
  background:linear-gradient(
    118deg,
    #e94d0a 0%,
    #ff7417 44%,
    #ffad32 100%
  )!important;
  box-shadow:
    0 0 4px rgba(255,114,19,.46),
    0 0 11px rgba(255,83,3,.17);
}

/* Studio mode: no artificial black disc behind the x1 GIF. */
html[data-theme="easter"] .root-center-logo img{
  background:transparent!important;
  border-radius:0!important;
  mix-blend-mode:screen;
  transform:
    perspective(900px)
    rotateX(2.4deg)
    rotateY(-3deg)
    translateZ(18px);
  transform-origin:50% 60%;
  filter:
    saturate(1.11)
    contrast(1.08)
    brightness(.95)
    drop-shadow(0 8px 7px rgba(0,0,0,.46))
    drop-shadow(0 22px 21px rgba(0,0,0,.34))
    drop-shadow(0 44px 46px rgba(0,0,0,.24))
    drop-shadow(0 0 11px rgba(255,101,12,.12))!important;
}

/*
  The center is darkened in the surrounding cluster itself, creating depth
  without placing a flat shape behind the GIF.
*/
html[data-theme="easter"] .root-center-halo{
  inset:-12%!important;
  opacity:1!important;
  background:
    radial-gradient(
      ellipse at 50% 58%,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.62) 22%,
      rgba(20,8,2,.38) 42%,
      rgba(255,91,5,.045) 61%,
      transparent 76%
    )!important;
  filter:blur(16px)!important;
  transform:translateZ(0);
}

/* Ground-contact shadow projected onto the website background. */
html[data-theme="easter"] .root-center-logo::before{
  width:92%!important;
  height:28%!important;
  left:50%!important;
  top:91%!important;
  border:0!important;
  border-radius:50%!important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.48) 34%,
      rgba(0,0,0,.18) 63%,
      transparent 79%
    )!important;
  transform:
    translate(-50%,-50%)
    perspective(520px)
    rotateX(66deg)
    scaleX(1.06)!important;
  filter:blur(10px)!important;
  opacity:.78!important;
  animation:x1StudioGroundShadow 4.8s ease-in-out infinite alternate!important;
  z-index:0;
}

html[data-theme="easter"] .root-center-logo::after{
  width:108%!important;
  height:108%!important;
  border-color:rgba(255,113,17,.1)!important;
  box-shadow:
    inset 0 0 38px rgba(0,0,0,.3),
    0 0 28px rgba(255,89,4,.035);
}

@keyframes x1StudioGroundShadow{
  0%{
    opacity:.62;
    filter:blur(9px);
    transform:
      translate(-50%,-50%)
      perspective(520px)
      rotateX(66deg)
      scaleX(.96);
  }
  100%{
    opacity:.82;
    filter:blur(12px);
    transform:
      translate(-50%,-50%)
      perspective(520px)
      rotateX(66deg)
      scaleX(1.12);
  }
}

/* Occasional single LFO shapes appearing inside the CTA area. */
.footer-ambient-lfo{
  --ambient-x:50%;
  --ambient-y:50%;
  --ambient-rotation:0deg;
  --ambient-scale:1;
  position:absolute;
  left:var(--ambient-x);
  top:var(--ambient-y);
  z-index:4;
  width:clamp(18px,1.65vw,28px);
  aspect-ratio:1;
  color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  border-radius:48% 52% 44% 56% / 55% 42% 58% 45%;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  opacity:0;
  pointer-events:none;
  transform:
    translate(-50%,-50%)
    rotate(var(--ambient-rotation))
    scale(calc(var(--ambient-scale) * .54));
  animation:footerAmbientLfoSignal 2.25s cubic-bezier(.18,.72,.2,1) both;
  will-change:opacity,transform,filter;
}

.footer-ambient-lfo svg{
  display:block;
  width:100%;
  height:100%;
  padding:3px;
  overflow:visible;
}

.footer-ambient-lfo path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}

@keyframes footerAmbientLfoSignal{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--ambient-rotation) - 9deg))
      scale(calc(var(--ambient-scale) * .35));
    filter:brightness(1);
  }
  9%{
    opacity:.98;
    filter:brightness(2.7);
  }
  15%{
    opacity:.24;
    filter:brightness(1);
  }
  20%{
    opacity:.78;
    filter:brightness(1.85);
  }
  31%{
    opacity:.27;
    transform:
      translate(-50%,-55%)
      rotate(var(--ambient-rotation))
      scale(calc(var(--ambient-scale) * 1.03));
    filter:brightness(1);
  }
  72%{
    opacity:.18;
    transform:
      translate(-50%,-70%)
      rotate(calc(var(--ambient-rotation) + 7deg))
      scale(calc(var(--ambient-scale) * .9));
  }
  100%{
    opacity:0;
    transform:
      translate(-50%,-88%)
      rotate(calc(var(--ambient-rotation) + 12deg))
      scale(calc(var(--ambient-scale) * .68));
  }
}

html[data-theme="easter"] .footer-ambient-lfo{
  color:#ff8822;
  border-color:rgba(255,128,25,.14);
  background:rgba(17,8,3,.66);
}

@media(max-width:680px){
  .footer-ambient-lfo{
    width:18px;
  }

  html[data-theme="easter"] .root-center-logo img{
    transform:
      perspective(720px)
      rotateX(1.8deg)
      rotateY(-2.2deg)
      translateZ(12px);
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="easter"] .root-center-logo::before{
    animation:none!important;
  }

  .footer-ambient-lfo{
    display:none!important;
  }
}


/* =========================================================
   v2.50 — UNIVERSAL PLUS, SOFTER STUDIO DEPTH, CTA SIGNAL FIX
   ========================================================= */

/* Keep the animated plus in the Studio gradient in every color mode. */
.header-plus{
  opacity:1!important;
  visibility:visible!important;
  color:#ff8621!important;
  filter:
    drop-shadow(0 0 3px rgba(255,112,18,.42))
    drop-shadow(0 0 9px rgba(255,91,5,.15))!important;
}

.header-plus-shape::before,
.header-plus-shape::after{
  background:
    linear-gradient(
      118deg,
      #e94d0a 0%,
      #ff7417 44%,
      #ff9c29 74%,
      #ffad32 100%
    )!important;
  box-shadow:
    0 0 4px rgba(255,114,19,.42),
    0 0 10px rgba(255,83,3,.14)!important;
}

/*
  Studio x1 center: edge-free radial falloff.
  The darkness is produced by several very large, blurred gradients rather
  than a bounded circular plate.
*/
html[data-theme="easter"] .root-center-halo{
  inset:-48%!important;
  opacity:1!important;
  border-radius:0!important;
  background:
    radial-gradient(
      ellipse 34% 31% at 50% 54%,
      rgba(0,0,0,.9) 0%,
      rgba(0,0,0,.76) 21%,
      rgba(0,0,0,.52) 42%,
      rgba(2,1,0,.25) 61%,
      rgba(12,5,1,.08) 76%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 52% 47% at 50% 57%,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.17) 43%,
      transparent 82%
    )!important;
  filter:blur(34px)!important;
  transform:scale(1.16) translateZ(0)!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

html[data-theme="easter"] .root-center-logo::after{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  opacity:0!important;
}

/* Soft, dimensional border treatment for the Studio-mode switch. */
html[data-theme="easter"] .theme-toggle-track{
  border:1px solid transparent!important;
  background:
    linear-gradient(
      118deg,
      rgba(225,67,6,.94) 0%,
      rgba(255,105,15,.96) 38%,
      rgba(255,145,30,.94) 70%,
      rgba(255,183,65,.92) 100%
    ) padding-box,
    linear-gradient(
      118deg,
      rgba(255,227,174,.7) 0%,
      rgba(255,161,61,.48) 38%,
      rgba(255,111,20,.32) 70%,
      rgba(255,208,112,.62) 100%
    ) border-box!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,232,185,.08),
    0 0 0 1px rgba(70,24,3,.16),
    0 7px 20px rgba(0,0,0,.25),
    0 0 13px rgba(255,94,8,.12)!important;
}

/* Ensure ambient CTA signals are never clipped or hidden behind the copy. */
.footer,
.footer-inner,
.footer-cta,
.footer-cta-link{
  overflow:visible!important;
}

.footer-ambient-lfo{
  z-index:8!important;
  opacity:0;
  mix-blend-mode:normal;
  box-shadow:none;
}

.footer-ambient-lfo.is-visible{
  animation:footerAmbientLfoSignal 2.55s cubic-bezier(.18,.72,.2,1) both!important;
}

/* Slightly stronger initial flash so the occasional signals are noticeable. */
@keyframes footerAmbientLfoSignal{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--ambient-rotation) - 9deg))
      scale(calc(var(--ambient-scale) * .35));
    filter:brightness(1);
  }
  7%{
    opacity:1;
    filter:brightness(3.1);
  }
  13%{
    opacity:.3;
    filter:brightness(1);
  }
  18%{
    opacity:.9;
    filter:brightness(2.05);
  }
  30%{
    opacity:.35;
    transform:
      translate(-50%,-56%)
      rotate(var(--ambient-rotation))
      scale(calc(var(--ambient-scale) * 1.04));
    filter:brightness(1);
  }
  74%{
    opacity:.2;
    transform:
      translate(-50%,-72%)
      rotate(calc(var(--ambient-rotation) + 7deg))
      scale(calc(var(--ambient-scale) * .9));
  }
  100%{
    opacity:0;
    transform:
      translate(-50%,-92%)
      rotate(calc(var(--ambient-rotation) + 12deg))
      scale(calc(var(--ambient-scale) * .68));
  }
}


/* x4 — SERVICE RANGE TERMINAL LINE */
.subtitle{
  margin-top:clamp(46px,5.1vw,76px)!important;
  max-width:min(92vw,760px);
  white-space:normal!important;
  line-height:1.28!important;
}

.rotating-lock{
  display:inline-flex!important;
  align-items:baseline;
  max-width:100%;
}

#typed{
  display:inline!important;
  white-space:normal;
  text-wrap:balance;
}

.static-design{
  display:none!important;
}

.typed-cursor{
  display:inline-block!important;
  flex:0 0 auto;
  margin-left:.045em!important;
}

/* Studio-mode cursor uses the same orange gradient as the interface accents. */
html[data-theme="easter"] .typed-cursor{
  color:transparent!important;
  background:
    linear-gradient(
      118deg,
      #e94d0a 0%,
      #ff7417 44%,
      #ff9c29 74%,
      #ffad32 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 3px rgba(255,112,18,.34))
    drop-shadow(0 0 8px rgba(255,91,5,.12));
}

@media(max-width:680px){
  .subtitle{
    margin-top:clamp(38px,10vw,56px)!important;
    max-width:94vw;
    font-size:clamp(.72rem,2.7vw,.86rem)!important;
  }
}


/* CTA AMBIENT LFO SIGNALS: MORE FREQUENT, LARGER, LONGER */
.footer-ambient-lfo{
  width:clamp(22px,2vw,34px)!important;
}

.footer-ambient-lfo.is-visible{
  animation-duration:3.05s!important;
}

@media(max-width:680px){
  .footer-ambient-lfo{
    width:21px!important;
  }
}


/* x4 — BRIGHT, REFINED GRADIENT TYPOGRAPHY */
#typed{
  color:transparent!important;
  background:
    linear-gradient(
      108deg,
      #f24f0b 0%,
      #ff7417 28%,
      #ff9c2a 54%,
      #ffd06a 76%,
      #ff7b1b 100%
    );
  background-size:220% 100%;
  background-position:12% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 4px rgba(255,111,18,.18))
    drop-shadow(0 0 12px rgba(255,128,22,.07));
  animation:x4GradientDrift 8.5s cubic-bezier(.45,0,.2,1) infinite alternate;
}

html[data-theme="light"] #typed{
  background:
    linear-gradient(
      108deg,
      #b92f00 0%,
      #e94d0a 27%,
      #ff7417 52%,
      #d98512 76%,
      #c83b02 100%
    );
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 3px rgba(224,72,5,.1));
}

html[data-theme="easter"] #typed{
  background:
    linear-gradient(
      108deg,
      #ff4f08 0%,
      #ff7417 27%,
      #ff9e2b 54%,
      #ffd36f 76%,
      #ff6b10 100%
    );
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 5px rgba(255,105,12,.3))
    drop-shadow(0 0 14px rgba(255,128,20,.12));
}

@keyframes x4GradientDrift{
  0%{background-position:8% 50%}
  100%{background-position:92% 50%}
}

@media(prefers-reduced-motion:reduce){
  #typed{
    animation:none!important;
    background-position:42% 50%;
  }
}


/* CTA AMBIENT LFO SIGNALS: QUICKER, LARGER, LONGER */
.footer-ambient-lfo{
  width:clamp(26px,2.35vw,39px)!important;
}

.footer-ambient-lfo.is-visible{
  animation-duration:3.55s!important;
}

@media(max-width:680px){
  .footer-ambient-lfo{
    width:24px!important;
  }
}


/* FOOTER CONTACT MORPH — MATCH THE x3 PLUS */
.footer-contact-morph{
  color:#ff8621!important;
  filter:
    drop-shadow(0 0 3px rgba(255,112,18,.42))
    drop-shadow(0 0 9px rgba(255,91,5,.15))!important;
}

#footerContactMorphPrimary,
#footerContactMorphSecondary{
  stroke:url(#footerContactGradient)!important;
}

#footerContactMorphPrimary{
  filter:
    drop-shadow(0 0 2px rgba(255,114,19,.36))
    drop-shadow(0 0 7px rgba(255,83,3,.12));
}

#footerContactMorphSecondary{
  filter:
    drop-shadow(0 0 2px rgba(255,137,28,.28))
    drop-shadow(0 0 6px rgba(255,83,3,.09));
}


/* x4 CURSOR — MATCH THE ACTIVE TEXT GRADIENT IN EVERY MODE */
.typed-cursor{
  color:transparent!important;
  background:
    linear-gradient(
      108deg,
      #f24f0b 0%,
      #ff7417 28%,
      #ff9c2a 54%,
      #ffd06a 76%,
      #ff7b1b 100%
    );
  background-size:220% 100%;
  background-position:92% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 4px rgba(255,111,18,.18))
    drop-shadow(0 0 10px rgba(255,128,22,.06));
}

html[data-theme="light"] .typed-cursor{
  background:
    linear-gradient(
      108deg,
      #b92f00 0%,
      #e94d0a 27%,
      #ff7417 52%,
      #d98512 76%,
      #c83b02 100%
    );
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 3px rgba(224,72,5,.1));
}

html[data-theme="easter"] .typed-cursor{
  background:
    linear-gradient(
      108deg,
      #ff4f08 0%,
      #ff7417 27%,
      #ff9e2b 54%,
      #ffd36f 76%,
      #ff6b10 100%
    )!important;
  background-size:220% 100%!important;
  background-position:92% 50%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:
    drop-shadow(0 0 5px rgba(255,105,12,.3))
    drop-shadow(0 0 12px rgba(255,128,20,.1))!important;
}


/* CTA AMBIENT LFO SIGNALS — RESTORED TO PREVIOUS BALANCE */
.footer-ambient-lfo{
  width:clamp(22px,2vw,34px)!important;
}

.footer-ambient-lfo.is-visible{
  animation-duration:3.05s!important;
}

@media(max-width:680px){
  .footer-ambient-lfo{
    width:21px!important;
  }
}


/* =========================================================
   v2.60 — STUDIO SWITCH MATRIX INDICATOR
   ========================================================= */

/* Replace the unused Easter egg with a miniature live matrix simulation. */
.theme-icon-easter{
  width:20px!important;
  height:16px!important;
  right:5px!important;
}

.theme-icon-easter > svg{
  display:none!important;
}

.theme-matrix-mini{
  position:relative;
  display:block;
  width:18px;
  height:14px;
  overflow:hidden;
  border-radius:2px;
  border:1px solid rgba(32,14,4,.42);
  background:
    linear-gradient(rgba(27,11,2,.84),rgba(9,4,1,.96)),
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255,161,53,.22) 3px 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(255,161,53,.22) 3px 4px
    );
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.72),
    0 0 5px rgba(255,111,15,.2);
  transform:translateZ(0);
}

.theme-matrix-mini::before,
.theme-matrix-mini::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.theme-matrix-mini::before{
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255,172,67,.27) 3px 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(255,172,67,.27) 3px 4px
    );
  opacity:.7;
  animation:themeMatrixGridDrift 1.55s linear infinite;
}

.theme-matrix-mini::after{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,151,38,.18),transparent 68%);
  mix-blend-mode:screen;
  animation:themeMatrixPulse 1.9s ease-in-out infinite;
}

.theme-matrix-scan{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  height:3px;
  top:-4px;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(255,207,111,.82),
    rgba(255,115,18,.14)
  );
  filter:blur(.2px);
  animation:themeMatrixScan 1.35s linear infinite;
}

.theme-matrix-cell{
  position:absolute;
  z-index:2;
  width:2px;
  height:2px;
  background:#ff9a2b;
  box-shadow:0 0 3px rgba(255,135,24,.82);
  opacity:.22;
  animation:themeMatrixCellBlink 1.2s steps(2,end) infinite;
}

.theme-matrix-cell.cell-a{left:2px;top:2px;animation-delay:-.18s}
.theme-matrix-cell.cell-b{left:7px;top:5px;animation-delay:-.72s}
.theme-matrix-cell.cell-c{left:12px;top:2px;animation-delay:-.4s}
.theme-matrix-cell.cell-d{left:4px;top:10px;animation-delay:-.96s}
.theme-matrix-cell.cell-e{left:14px;top:9px;animation-delay:-.58s}

@keyframes themeMatrixGridDrift{
  0%{transform:translate(0,0)}
  100%{transform:translate(4px,4px)}
}

@keyframes themeMatrixScan{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.85}
  82%{opacity:.42}
  100%{transform:translateY(18px);opacity:0}
}

@keyframes themeMatrixCellBlink{
  0%,36%,100%{opacity:.18;transform:scale(.75)}
  38%,64%{opacity:1;transform:scale(1.15)}
}

@keyframes themeMatrixPulse{
  0%,100%{opacity:.32}
  50%{opacity:.86}
}

/* A clearly visible but still refined Studio-mode switch border. */
html[data-theme="easter"] .theme-toggle-track{
  border:1px solid rgba(255,224,170,.78)!important;
  background:
    linear-gradient(
      118deg,
      rgba(225,67,6,.94) 0%,
      rgba(255,105,15,.96) 38%,
      rgba(255,145,30,.94) 70%,
      rgba(255,183,65,.92) 100%
    ) padding-box!important;
  box-shadow:
    inset 0 0 0 1px rgba(72,23,2,.34),
    inset 0 1px 0 rgba(255,239,205,.28),
    0 0 0 1px rgba(255,133,32,.2),
    0 7px 20px rgba(0,0,0,.25),
    0 0 13px rgba(255,94,8,.14)!important;
}

html[data-theme="easter"] .theme-icon-easter{
  animation:none!important;
}

@media(prefers-reduced-motion:reduce){
  .theme-matrix-mini::before,
  .theme-matrix-mini::after,
  .theme-matrix-scan,
  .theme-matrix-cell{
    animation:none!important;
  }

  .theme-matrix-scan{
    top:5px;
    opacity:.42;
  }

  .theme-matrix-cell{
    opacity:.72;
  }
}


/* =========================================================
   v2.61 — FULL-WIDTH STUDIO MATRIX + CTA LEGIBILITY
   ========================================================= */

/*
  Let the miniature matrix occupy the complete right-hand chamber of the
  switch rather than reading as a small icon floating inside it.
*/
html[data-theme="easter"] .theme-icon-easter{
  position:absolute!important;
  top:3px!important;
  right:3px!important;
  bottom:3px!important;
  width:calc(50% - 5px)!important;
  height:auto!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:999px!important;
  pointer-events:none;
}

html[data-theme="easter"] .theme-matrix-mini{
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  border:0!important;
  background:
    linear-gradient(
      90deg,
      rgba(10,4,1,.42) 0%,
      rgba(8,3,1,.76) 22%,
      rgba(5,2,0,.94) 100%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255,164,56,.24) 3px 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(255,164,56,.24) 3px 4px
    )!important;
  box-shadow:
    inset 1px 0 0 rgba(255,220,159,.11),
    inset 0 0 8px rgba(0,0,0,.76),
    0 0 7px rgba(255,111,15,.13)!important;
}

html[data-theme="easter"] .theme-matrix-mini::before{
  opacity:.82!important;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255,183,83,.3) 3px 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(255,183,83,.3) 3px 4px
    )!important;
}

html[data-theme="easter"] .theme-matrix-mini::after{
  background:
    radial-gradient(
      ellipse at 58% 50%,
      rgba(255,157,42,.24) 0%,
      rgba(255,105,14,.1) 42%,
      transparent 76%
    )!important;
}

html[data-theme="easter"] .theme-matrix-scan{
  height:4px!important;
}

html[data-theme="easter"] .theme-matrix-cell{
  width:2px!important;
  height:2px!important;
}

/* Redistribute cells across the wider right-hand matrix field. */
html[data-theme="easter"] .theme-matrix-cell.cell-a{left:12%;top:20%}
html[data-theme="easter"] .theme-matrix-cell.cell-b{left:36%;top:45%}
html[data-theme="easter"] .theme-matrix-cell.cell-c{left:62%;top:18%}
html[data-theme="easter"] .theme-matrix-cell.cell-d{left:24%;top:72%}
html[data-theme="easter"] .theme-matrix-cell.cell-e{left:78%;top:64%}

/*
  Ensure the serif “individuality” line stays fully visible in Studio mode.
  This preserves the type treatment while removing any inherited clipping,
  transparency, blend-mode or text-fill conflict.
*/
html[data-theme="easter"] .footer-cta-individuality,
html[data-theme="easter"] .footer-cta-line-bottom,
html[data-theme="easter"] .footer-cta .individuality{
  opacity:1!important;
  visibility:visible!important;
  color:#ff9a2b!important;
  -webkit-text-fill-color:#ff9a2b!important;
  background:none!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;
  mix-blend-mode:normal!important;
  filter:
    drop-shadow(0 0 4px rgba(255,111,18,.2))
    drop-shadow(0 0 12px rgba(255,95,8,.07))!important;
  overflow:visible!important;
}

html[data-theme="easter"] .footer-cta-line-bottom{
  position:relative!important;
  z-index:3!important;
}


/* =========================================================
   v2.62 — CONTAINED MINIMAL PERSPECTIVE GRID
   ========================================================= */

/* Keep every Studio-mode matrix layer physically inside the switch track. */
html[data-theme="easter"] .theme-toggle-track{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  contain:paint;
}

html[data-theme="easter"] .theme-icon-easter{
  position:absolute!important;
  inset:2px 2px 2px auto!important;
  width:calc(50% - 3px)!important;
  height:calc(100% - 4px)!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:0 999px 999px 0!important;
  transform:none!important;
  animation:none!important;
  clip-path:inset(0 round 0 999px 999px 0);
  z-index:1!important;
}

/*
  Minimal reference-driven treatment:
  only perspective grid lines, without cells, scan bars, dots, or glow plates.
*/
html[data-theme="easter"] .theme-matrix-mini{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:inherit!important;
  background:
    linear-gradient(
      90deg,
      rgba(8,3,1,.18) 0%,
      rgba(7,3,1,.5) 38%,
      rgba(4,2,0,.72) 100%
    )!important;
  box-shadow:
    inset 1px 0 0 rgba(255,224,172,.1),
    inset 0 0 5px rgba(0,0,0,.5)!important;
  transform:none!important;
}

html[data-theme="easter"] .theme-matrix-mini::before{
  content:""!important;
  position:absolute!important;
  left:-30%!important;
  right:-30%!important;
  bottom:-38%!important;
  top:28%!important;
  opacity:.72!important;
  transform-origin:50% 100%!important;
  transform:perspective(42px) rotateX(61deg) scaleX(1.06)!important;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 6px,
      rgba(255,157,46,.68) 6px 7px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 4px,
      rgba(255,157,46,.58) 4px 5px
    )!important;
  filter:none!important;
  animation:themeMatrixPerspectiveFlow 2.5s linear infinite!important;
  will-change:background-position,transform;
}

html[data-theme="easter"] .theme-matrix-mini::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.55!important;
  background:
    linear-gradient(
      180deg,
      rgba(4,1,0,.9) 0%,
      rgba(4,1,0,.44) 32%,
      transparent 66%
    )!important;
  animation:none!important;
  pointer-events:none;
}

/* Remove all non-grid simulation elements. */
html[data-theme="easter"] .theme-matrix-scan,
html[data-theme="easter"] .theme-matrix-cell{
  display:none!important;
}

@keyframes themeMatrixPerspectiveFlow{
  0%{
    background-position:0 0,0 0;
    transform:perspective(42px) rotateX(61deg) scaleX(1.06) translateY(0);
  }
  50%{
    background-position:3px 0,0 3px;
    transform:perspective(42px) rotateX(61deg) scaleX(1.1) translateY(1px);
  }
  100%{
    background-position:7px 0,0 8px;
    transform:perspective(42px) rotateX(61deg) scaleX(1.06) translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="easter"] .theme-matrix-mini::before{
    animation:none!important;
    background-position:2px 0,0 3px;
  }
}


/* =========================================================
   v2.63 — DEFINITIVE STUDIO-MODE INDIVIDUALITY VISIBILITY FIX
   ========================================================= */

/*
  The actual element is .footer-individuality. Earlier overrides targeted
  different class names, so the Studio theme's transparent text-fill remained
  active. This exact selector is deliberately placed last in the cascade.
*/
html[data-theme="easter"] .footer-cta .footer-individuality,
html[data-theme="easter"] .footer-individuality,
html[data-theme="easter"] .footer-individuality.is-elegantly-flickering{
  display:inline-block!important;
  position:relative!important;
  z-index:6!important;
  opacity:1!important;
  visibility:visible!important;

  color:#ff9a2b!important;
  -webkit-text-fill-color:#ff9a2b!important;

  background:none!important;
  background-image:none!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;

  mix-blend-mode:normal!important;
  filter:
    drop-shadow(0 0 3px rgba(255,116,23,.24))
    drop-shadow(0 0 10px rgba(255,89,6,.08))!important;
  text-shadow:none!important;

  animation:none!important;
  transform:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  overflow:visible!important;
}

html[data-theme="easter"] .footer-cta-line-bottom{
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  isolation:isolate;
}


/* =========================================================
   v2.64 — PERFORMANCE CONTAINMENT (VISUALLY IDENTICAL)
   ========================================================= */





.footer{
  content-visibility:auto;
  contain-intrinsic-size:760px;
}



.cursor-glow,
.cursor-plus,
.theme-matrix-mini,
.footer-contact-morph{
  will-change:auto;
}

@media(max-width:680px){
  

  .footer{
    contain-intrinsic-size:620px;
  }
}


/* =========================================================
   v2.65 — LIGHTWEIGHT STUDIO-MODE SWITCH
   ========================================================= */

/*
  Studio mode now uses one contained rotating gradient layer only.
  All previous matrix and logo elements are disabled to avoid unnecessary
  animation and GIF decoding work.
*/
.theme-easter-logo,
.theme-icon-easter,
.theme-matrix-mini,
.theme-matrix-scan,
.theme-matrix-cell{
  display:none!important;
}

html[data-theme="easter"] .theme-toggle-track{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  contain:paint;
  border:1px solid rgba(255,214,151,.62)!important;
  background:#120804!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,129,31,.1),
    inset 0 1px 0 rgba(255,239,210,.14),
    0 0 0 1px rgba(72,22,2,.3),
    0 6px 18px rgba(0,0,0,.24)!important;
}

html[data-theme="easter"] .theme-toggle-track::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-34%;
  top:-95%;
  width:168%;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  background:
    conic-gradient(
      from 18deg,
      #050201 0deg,
      #1a0903 52deg,
      #4b1706 104deg,
      #b43b0a 154deg,
      #ff7417 196deg,
      #7c2607 238deg,
      #210b03 296deg,
      #050201 360deg
    );
  filter:saturate(.94) contrast(1.06);
  animation:studioSwitchGradientRotate 8.5s linear infinite;
  will-change:transform;
}

html[data-theme="easter"] .theme-toggle-track::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at 72% 36%,
      rgba(255,153,54,.16) 0%,
      rgba(255,104,20,.06) 34%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.08) 0%,
      transparent 30%,
      rgba(0,0,0,.18) 100%
    );
  box-shadow:inset 0 0 9px rgba(0,0,0,.3);
}

/* Studio mode is intentionally icon-free and purely atmospheric. */
html[data-theme="easter"] .theme-toggle-track > *{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@keyframes studioSwitchGradientRotate{
  to{transform:rotate(360deg)}
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="easter"] .theme-toggle-track::before{
    animation:none!important;
    transform:rotate(22deg);
  }
}


/* =========================================================
   v2.66 — STATIC STUDIO SHIMMER + RIGHT BLACK ORB
   ========================================================= */

/* Remove all motion from the Studio-mode switch. */
html[data-theme="easter"] .theme-toggle-track::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  aspect-ratio:auto!important;
  border-radius:inherit!important;
  transform:none!important;
  animation:none!important;
  will-change:auto!important;
  filter:none!important;
  background:
    linear-gradient(
      112deg,
      #050201 0%,
      #120603 18%,
      #301005 38%,
      #7a2609 58%,
      #d84d10 72%,
      #6a2108 84%,
      #120603 100%
    )!important;
}

html[data-theme="easter"] .theme-toggle-track::after{
  background:
    radial-gradient(
      ellipse at 68% 24%,
      rgba(255,216,158,.2) 0%,
      rgba(255,142,49,.1) 22%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.025) 28%,
      transparent 49%,
      rgba(0,0,0,.2) 100%
    )!important;
  animation:none!important;
}

/* Restore the right-side control orb in Studio mode. */
html[data-theme="easter"] .theme-toggle-track > .theme-toggle-orb{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:3!important;
  transform:translateX(30px) rotate(180deg)!important;
}

html[data-theme="easter"] .theme-toggle-orb .moon-phase{
  display:none!important;
}

/* Match the black circular indicator used in light mode. */
html[data-theme="easter"] .theme-toggle-orb::before,
html[data-theme="easter"] .theme-toggle-orb::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

html[data-theme="easter"] .theme-toggle-orb::before{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#090909;
  box-shadow:
    0 0 0 1px rgba(255,214,151,.22),
    0 0 9px rgba(255,112,24,.2);
}

html[data-theme="easter"] .theme-toggle-orb::after{
  width:20px;
  height:20px;
  background:
    linear-gradient(#090909,#090909) center top/1.25px 4px no-repeat,
    linear-gradient(#090909,#090909) center bottom/1.25px 4px no-repeat,
    linear-gradient(90deg,#090909,#090909) left center/4px 1.25px no-repeat,
    linear-gradient(90deg,#090909,#090909) right center/4px 1.25px no-repeat,
    linear-gradient(45deg,transparent 45%,#090909 46% 54%,transparent 55%) center/100% 100% no-repeat,
    linear-gradient(-45deg,transparent 45%,#090909 46% 54%,transparent 55%) center/100% 100% no-repeat;
  animation:none!important;
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="easter"] .theme-toggle-track::before,
  html[data-theme="easter"] .theme-toggle-track::after,
  html[data-theme="easter"] .theme-toggle-orb::after{
    animation:none!important;
    transform:none;
  }
}


/* =========================================================
   v2.67 — RESPONSIVE STUDIO CURSOR
   ========================================================= */

/*
  Difference blending and the large blended glow require expensive backdrop
  sampling on every pointer update. Studio mode uses a direct orange cursor
  instead, retaining the same dimensions and interaction states.
*/
html[data-theme="easter"] .cursor-plus{
  mix-blend-mode:normal!important;
  filter:none!important;
  transition:
    width .2s var(--ease),
    height .2s var(--ease),
    opacity .1s linear!important;
  contain:layout paint style;
}

html[data-theme="easter"] .cursor-plus-shape{
  animation:none!important;
  will-change:auto!important;
}

html[data-theme="easter"] .cursor-plus-shape::before,
html[data-theme="easter"] .cursor-plus-shape::after{
  background:#ff811e!important;
  box-shadow:none!important;
}

/* Disable the expensive full-screen pointer glow only in Studio mode. */
html[data-theme="easter"] .cursor-glow{
  display:none!important;
  opacity:0!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}


/* =========================================================
   v2.68 — REUSABLE OLDSCHOOL MATRIX TOOLTIP SYSTEM (y1)
   ========================================================= */

.y-tooltip-layer{
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
  overflow:hidden;
}

.y-tooltip{
  --y-line-length:120px;
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .16s ease,
    visibility 0s linear .16s;
}

.y-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

.y-tooltip-label{
  position:fixed;
  left:0;
  top:0;
  max-width:min(310px,calc(100vw - 28px));
  padding:8px 10px 7px;
  border:1px solid rgba(255,139,35,.2);
  background:
    linear-gradient(180deg,rgba(5,5,5,.91),rgba(2,2,2,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.2);
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace);
  font-size:clamp(.64rem,.72vw,.74rem);
  line-height:1.35;
  letter-spacing:.035em;
  text-transform:none;
  white-space:nowrap;
  color:transparent;
  background-image:
    linear-gradient(108deg,#e94d0a 0%,#ff7417 38%,#ffad32 72%,#ff7417 100%),
    linear-gradient(180deg,rgba(5,5,5,.91),rgba(2,2,2,.82));
  background-size:220% 100%,100% 100%;
  background-position:22% 50%,0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text,padding-box;
  background-clip:text,padding-box;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 5px rgba(255,113,18,.1));
  transform:translateY(4px);
  opacity:0;
  transition:
    transform .2s cubic-bezier(.2,.7,.2,1),
    opacity .16s ease;
}

.y-tooltip.is-visible .y-tooltip-label{
  transform:translateY(0);
  opacity:1;
}

.y-tooltip-line{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:visible;
}

.y-tooltip-line-path{
  fill:none;
  stroke:#ff7d1b;
  stroke-width:1;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:8 5 2 5;
  stroke-dashoffset:0;
  opacity:.72;
  filter:drop-shadow(0 0 2px rgba(255,107,15,.22));
}

.y-tooltip.is-visible .y-tooltip-line-path{
  animation:yTooltipDataFlow 1.15s linear infinite;
}

.y-tooltip-line-node{
  fill:#ff9b2b;
  opacity:.88;
  filter:drop-shadow(0 0 3px rgba(255,116,20,.34));
}

@keyframes yTooltipDataFlow{
  to{stroke-dashoffset:-20}
}

/* Slightly larger hover/proximity target without changing the switch layout. */
.theme-toggle[data-y-tooltip]{
  isolation:isolate;
}

.theme-toggle[data-y-tooltip]::after{
  content:"";
  position:absolute;
  inset:-18px -24px;
  z-index:-1;
}

@media(max-width:680px){
  .y-tooltip-label{
    white-space:normal;
    max-width:230px;
    font-size:.64rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .y-tooltip,
  .y-tooltip-label{
    transition:none!important;
  }

  .y-tooltip-line-path{
    animation:none!important;
    stroke-dasharray:5 5;
  }
}


/* =========================================================
   v2.69 — y1 CRT TYPOGRAPHY + SIGNAL MODULATION
   ========================================================= */

.y-tooltip-label{
  /*
    CRT / broadcast-terminal character without introducing an additional font
    request. The stack favours narrow system monospace faces where available.
  */
  font-family:
    "Lucida Console",
    "Andale Mono",
    "Courier New",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace!important;
  font-weight:400;
  font-stretch:condensed;
  letter-spacing:.075em!important;
  text-rendering:geometricPrecision;
  text-shadow:
    .35px 0 0 rgba(255,166,70,.22),
    -.35px 0 0 rgba(255,74,8,.16);
}

.y-tooltip-label::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 3px
    );
  mix-blend-mode:screen;
  opacity:.42;
}

.y-tooltip.is-visible .y-tooltip-label{
  animation:
    yTooltipBorderArrival .62s cubic-bezier(.18,.74,.22,1) 1,
    yTooltipBrightnessBreath 3s ease-in-out .72s infinite;
}

@keyframes yTooltipBorderArrival{
  0%{
    border-color:rgba(255,132,28,.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 8px 22px rgba(0,0,0,.2);
  }
  28%{
    border-color:rgba(255,202,126,.92);
    box-shadow:
      inset 0 0 0 1px rgba(255,182,81,.25),
      0 0 11px rgba(255,126,25,.38),
      0 8px 22px rgba(0,0,0,.2);
  }
  52%{
    border-color:rgba(255,140,34,.32);
    box-shadow:
      inset 0 0 0 1px rgba(255,135,34,.08),
      0 0 4px rgba(255,111,18,.12),
      0 8px 22px rgba(0,0,0,.2);
  }
  100%{
    border-color:rgba(255,139,35,.2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 8px 22px rgba(0,0,0,.2);
  }
}

@keyframes yTooltipBrightnessBreath{
  0%,100%{
    filter:
      brightness(1)
      drop-shadow(0 0 5px rgba(255,113,18,.1));
  }
  46%{
    filter:
      brightness(1.05)
      drop-shadow(0 0 6px rgba(255,113,18,.13));
  }
  58%{
    filter:
      brightness(1.18)
      drop-shadow(0 0 9px rgba(255,132,28,.2));
  }
  70%{
    filter:
      brightness(1.04)
      drop-shadow(0 0 6px rgba(255,113,18,.12));
  }
}

@media(prefers-reduced-motion:reduce){
  .y-tooltip.is-visible .y-tooltip-label{
    animation:none!important;
  }
}


/* =========================================================
   v2.70 — x4 DEEPER ORANGE GRADIENT
   ========================================================= */

/* Preserve the slow gradient drift while reducing the yellow/amber range. */
#typed{
  background:
    linear-gradient(
      108deg,
      #bf3505 0%,
      #e94d0a 25%,
      #ff6c12 51%,
      #f08a20 74%,
      #d94708 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

.typed-cursor{
  background:
    linear-gradient(
      108deg,
      #bf3505 0%,
      #e94d0a 25%,
      #ff6c12 51%,
      #f08a20 74%,
      #d94708 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

html[data-theme="light"] #typed,
html[data-theme="light"] .typed-cursor{
  background:
    linear-gradient(
      108deg,
      #8f2602 0%,
      #bc3505 28%,
      #e6530c 54%,
      #d96a13 76%,
      #a92c03 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

html[data-theme="easter"] #typed,
html[data-theme="easter"] .typed-cursor{
  background:
    linear-gradient(
      108deg,
      #c83a05 0%,
      #ed4f09 27%,
      #ff6e13 54%,
      #ef8a20 75%,
      #d94407 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}


/* =========================================================
   v2.71 — y1 SOFTER ANALOG / OLD-SCHOOL TOOLTIP TREATMENT
   ========================================================= */

.y-tooltip-label{
  border-color:rgba(224,104,28,.14)!important;
  border-radius:2px 3px 2px 4px!important;
  background-image:
    linear-gradient(
      108deg,
      #b83a08 0%,
      #d84f0b 38%,
      #e87519 70%,
      #ca4308 100%
    ),
    linear-gradient(
      180deg,
      rgba(7,6,5,.92) 0%,
      rgba(3,3,3,.88) 58%,
      rgba(7,4,2,.84) 100%
    )!important;
  background-size:220% 100%,100% 100%!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    inset 0 0 11px rgba(255,98,16,.018),
    0 7px 18px rgba(0,0,0,.18)!important;
  filter:
    brightness(.92)
    contrast(.98)
    drop-shadow(0 0 3px rgba(214,73,10,.055))!important;
  text-shadow:
    .25px 0 0 rgba(255,151,64,.12),
    -.28px 0 0 rgba(133,31,3,.12)!important;
}

/* Slightly imperfect analog edge rather than a precise digital box. */
.y-tooltip-label::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:3px 2px 4px 2px;
  border:1px solid rgba(238,117,32,.075);
  clip-path:polygon(
    0 2%,
    99% 0,
    100% 96%,
    98% 100%,
    1% 98%
  );
  opacity:.68;
}

/* Softer, less clinical scan texture. */
.y-tooltip-label::before{
  opacity:.24!important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.011) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      90deg,
      rgba(255,81,12,.025),
      transparent 24%,
      rgba(255,147,45,.018) 61%,
      transparent
    )!important;
}

/* Tone down the connector line and nodes. */
.y-tooltip-line-path{
  stroke:#cf4e0d!important;
  opacity:.48!important;
  filter:drop-shadow(0 0 1px rgba(190,54,4,.11))!important;
}

.y-tooltip-line-node{
  fill:#dd6418!important;
  opacity:.58!important;
  filter:drop-shadow(0 0 2px rgba(179,49,4,.12))!important;
}

/*
  One restrained arrival flicker: visible enough to register, but not a
  high-intensity digital flash.
*/
.y-tooltip.is-visible .y-tooltip-label{
  animation:
    yTooltipBorderArrivalSoft .72s cubic-bezier(.2,.64,.24,1) 1,
    yTooltipBrightnessBreathSoft 3s ease-in-out .82s infinite!important;
}

@keyframes yTooltipBorderArrivalSoft{
  0%{
    border-color:rgba(196,72,12,.07);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.012),
      0 7px 18px rgba(0,0,0,.18);
    filter:
      brightness(.84)
      contrast(.97)
      drop-shadow(0 0 1px rgba(190,52,5,.025));
  }
  22%{
    border-color:rgba(236,123,42,.28);
    box-shadow:
      inset 0 0 0 1px rgba(224,96,21,.045),
      0 0 5px rgba(207,74,11,.09),
      0 7px 18px rgba(0,0,0,.18);
    filter:
      brightness(.99)
      contrast(.98)
      drop-shadow(0 0 3px rgba(198,65,7,.07));
  }
  38%{
    border-color:rgba(190,66,10,.11);
    filter:
      brightness(.89)
      contrast(.98)
      drop-shadow(0 0 1px rgba(181,48,4,.03));
  }
  52%{
    border-color:rgba(225,103,26,.2);
    filter:
      brightness(.95)
      contrast(.98)
      drop-shadow(0 0 2px rgba(193,59,6,.05));
  }
  100%{
    border-color:rgba(224,104,28,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      inset 0 0 11px rgba(255,98,16,.018),
      0 7px 18px rgba(0,0,0,.18);
    filter:
      brightness(.92)
      contrast(.98)
      drop-shadow(0 0 3px rgba(214,73,10,.055));
  }
}

/* Subtle three-second analog luminance drift instead of a bright pulse. */
@keyframes yTooltipBrightnessBreathSoft{
  0%,100%{
    filter:
      brightness(.92)
      contrast(.98)
      drop-shadow(0 0 3px rgba(214,73,10,.055));
  }
  44%{
    filter:
      brightness(.94)
      contrast(.985)
      drop-shadow(0 0 3px rgba(214,73,10,.06));
  }
  58%{
    filter:
      brightness(.985)
      contrast(.99)
      drop-shadow(0 0 4px rgba(214,73,10,.075));
  }
  72%{
    filter:
      brightness(.935)
      contrast(.98)
      drop-shadow(0 0 3px rgba(214,73,10,.055));
  }
}


/* =========================================================
   v2.72 — x4 SLIGHTLY BRIGHTER, STILL ORANGE-LED
   ========================================================= */

/* Lift luminance without bringing the gradient back into yellow. */
#typed{
  background:
    linear-gradient(
      108deg,
      #d64207 0%,
      #f05a0d 25%,
      #ff7216 51%,
      #f39028 74%,
      #e34b0a 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:
    drop-shadow(0 0 4px rgba(255,103,16,.2))
    drop-shadow(0 0 10px rgba(255,122,22,.07))!important;
}

.typed-cursor{
  background:
    linear-gradient(
      108deg,
      #d64207 0%,
      #f05a0d 25%,
      #ff7216 51%,
      #f39028 74%,
      #e34b0a 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

html[data-theme="light"] #typed,
html[data-theme="light"] .typed-cursor{
  background:
    linear-gradient(
      108deg,
      #a92d03 0%,
      #d34408 28%,
      #f05a0d 54%,
      #e4771b 76%,
      #bd3505 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

html[data-theme="easter"] #typed,
html[data-theme="easter"] .typed-cursor{
  background:
    linear-gradient(
      108deg,
      #df4708 0%,
      #f55a0d 27%,
      #ff7317 54%,
      #f29227 75%,
      #e34b09 100%
    )!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}


/* =========================================================
   v2.73 — STUDIO BACKGROUND FADE INTO FOOTER BLACK
   ========================================================= */

/*
  In Studio mode, the lower page atmosphere now resolves gradually into
  absolute black before and throughout the footer. The transition is layered
  and edge-free so it reads as a continuation of the page background.
*/
html[data-theme="easter"] .footer{
  position:relative;
  isolation:isolate;
  background:#000!important;
}

html[data-theme="easter"] .footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:100%;
  height:clamp(220px,34vw,520px);
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 18%,
      rgba(0,0,0,.24) 40%,
      rgba(0,0,0,.52) 66%,
      rgba(0,0,0,.82) 86%,
      #000 100%
    );
}

html[data-theme="easter"] .footer::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.96) 0%,
      #000 16%,
      #000 100%
    );
}

/* Keep all footer content and effects above the black transition layers. */
html[data-theme="easter"] .footer > *,
html[data-theme="easter"] .footer-inner,
html[data-theme="easter"] .footer-cta{
  position:relative;
  z-index:1;
}


/* =========================================================
   v2.74 — ROBUST FULL-WIDTH STUDIO FADE INTO BLACK
   ========================================================= */

/*
  Previous approach used a negative-z pseudo-element above the footer, which
  could disappear behind stacking contexts. This version paints the fade
  directly onto the actual page sections, so it works consistently at every
  viewport width and device pixel ratio.
*/

html[data-theme="easter"] .site{
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent calc(100% - clamp(520px,48vw,860px)),
      rgba(0,0,0,.12) calc(100% - clamp(430px,40vw,720px)),
      rgba(0,0,0,.42) calc(100% - clamp(300px,29vw,520px)),
      rgba(0,0,0,.76) calc(100% - clamp(170px,17vw,300px)),
      #000 100%
    )!important;
}



html[data-theme="easter"] .footer{
  background:#000!important;
}

/* Remove the obsolete pseudo-element fade completely. */
html[data-theme="easter"] .footer::before,
html[data-theme="easter"] .footer::after{
  content:none!important;
  display:none!important;
}

/*
  Preserve all footer effects and text above the solid black base without
  creating clipping or isolated stacking behavior.
*/
html[data-theme="easter"] .footer{
  isolation:auto!important;
  overflow:visible!important;
}

@media(max-width:900px){
  html[data-theme="easter"] .site{
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent calc(100% - 560px),
        rgba(0,0,0,.16) calc(100% - 450px),
        rgba(0,0,0,.5) calc(100% - 320px),
        rgba(0,0,0,.82) calc(100% - 170px),
        #000 100%
      )!important;
  }

  
}

@media(max-width:560px){
  html[data-theme="easter"] .site{
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent calc(100% - 430px),
        rgba(0,0,0,.18) calc(100% - 350px),
        rgba(0,0,0,.54) calc(100% - 235px),
        rgba(0,0,0,.86) calc(100% - 110px),
        #000 100%
      )!important;
  }

  
}

/* =========================================================
   v2.91 — RETRO-FUTURIST PORTFOLIO TERMINAL
   ========================================================= */

/*
  One coherent gallery surface. No connector SVGs, intersection markers,
  runtime geometry calculations, or per-frame decorative JavaScript.
*/


/* Terminal header rail. */


/* Peripheral registration frame with deliberate signal gaps. */






/*
  Project chassis. Pseudo-elements stay outside the image and therefore do not
  alter dimensions, aspect ratio, crop, decoding or video playback.
*/




/* Segmented analog perimeter. */


/* Corner brackets and optical scan sheen. */


/* Top status tab. */




/* Bottom telemetry strip. */






/* Delayed focus remains calm while scrolling. */










/* Light-mode optical inverse. */












/* Rendering controls retained from the production pass. */
.ambient,
.cursor-glow{
  display:none!important;
}

.footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}

.perf-zone:not(.perf-inview) *,
.perf-zone:not(.perf-inview) *::before,
.perf-zone:not(.perf-inview) *::after{
  animation-play-state:paused!important;
}

html.perf-lite .headline-synapse-field *,
html.perf-lite .heezy-neural-links *,
html.perf-lite .sound-lfo-display *,
html.perf-lite .footer-cta-lfo *,
html.perf-lite .footer-lfo-signal,
html.perf-lite .root-code-flashes *{
  animation:none!important;
}

html.perf-lite .cursor-plus{
  display:none!important;
}



html.perf-lite .root-center-halo,
html.perf-lite .root-aura{
  filter:none!important;
}





/* Responsive terminal density. */






@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* =========================================================
   v2.92 — HIGH-VISIBILITY RETRO-FUTURIST UI
   ========================================================= */

/*
  Increase contrast and legibility across dark, Studio and light themes
  without obscuring or resizing the artwork.
*/




















/* Studio mode: slightly brighter cold-neutral instrumentation. */






/* Light mode: stronger charcoal inverse with no washed-out lines. */
















/* Keep the UI clearly readable on smaller screens. */





/* =========================================================
   v2.93 — TERMINAL GLITCHES + ANIMATED RETRO GRID
   ========================================================= */

/*
  Stronger animated grid plane behind the complete portfolio.
  The movement is slow and linear to avoid visual noise and expensive repaints.
*/


/* Animated signal sweep across the grid. */


/*
  Terminal heading glitch:
  subtle positional jitter, brightness pulse and brief channel split.
*/








/* Thin animated telemetry pulses under each node. */






/* Slightly more visible grid and glitch contrast in Studio mode. */




/* Light mode inversion. */




















/* Performance-safe fallbacks. */







/* =========================================================
   v2.94 — STUDIO GRID VISIBILITY FIX
   ========================================================= */

/*
  Studio mode previously lost the grid against its near-black page treatment.
  This explicit final override increases optical separation and keeps the grid
  above the Studio background without placing it over the artwork.
*/


/* Keep the moving registration sweep clearly visible in Studio mode. */


/* Ensure the gallery surface itself remains visible above the page fade. */




/* More compact grid spacing is retained on smaller Studio viewports. */





/* =========================================================
   v2.95 — SOFTWARE-EMULATION KNOWLEDGE LAYER
   ========================================================= */



/* Compact system console above the media field. */


















/* Vertical capability rails at the outer grid edge. */













/* Keep the artwork above the software-emulation layer. */


/* Studio mode: brighter console readout. */




/* Light mode inverse. */








/* Mobile keeps the console compact and readable. */





/* =========================================================
   v2.96 — EXPANDED PORTFOLIO + DARK GRID CALIBRATION
   ========================================================= */

/* Dark mode now approaches Studio visibility while remaining slightly softer. */


/*
  Eight-item archive rhythm: dense enough to show breadth while preserving
  each media source's native aspect ratio.
*/




/* The wide material study anchors the expanded lower section. */


/* Media remains isolated and never stretches beyond its chosen ratio. */


/* Keep the square cover and motion study fully legible. */


/* Avoid simultaneous decode pressure as the larger archive enters view. */







/* =========================================================
   v2.97 — UNIFORM RETRO-FUTURIST PORTFOLIO MODULES
   ========================================================= */

/*
  All portfolio nodes now use one consistent responsive module size.
  Source aspect ratios are preserved through cropping rather than shrinking
  the artwork inside uneven boxes.
*/






/*
  Every image and video fills the full chassis. This removes the tiny-media
  effect caused by portrait or cinema compositions being fitted inside boxes.
*/


/* Fine-tuned framing for the new portrait installation image. */


/* Keep the graphic cover fully readable while still filling the module. */


/*
  Complete retro-futurist perimeter:
  outer chassis, segmented signal edge, corner locks, and inner hairline.
  All layers are absolutely positioned and do not change media dimensions.
*/






/* Inner monitor hairline without affecting the artwork. */


/* Strong, consistent focus state. */


/* Light-mode inverse with the same visual weight. */










/* Tablet keeps even cards with controlled density. */


/* Mobile uses one full-width professional module per row. */



/* =========================================================
   v2.98 — CLEARLY VISIBLE RETRO-FUTURIST PORTFOLIO FRAMES
   ========================================================= */



/*
  Make every portfolio module read as one strong UI node.
  The border is intentionally mid-thick and clearly visible across all modes.
*/










/* Light mode inversion with equal clarity. */














/* Keep the outer UI clear on smaller screens too. */



/* =========================================================
   v2.100 — PORTFOLIO ITEM UI BORDER FIX
   Inspired by retro-futurist framed interfaces.
   TRUE visible border only — no image overlay wash.
   ========================================================= */







/* Keep the media pristine, but give it a clearly visible frame. */




/* Main visible outer frame + corner / side nodes. */


/* Secondary segmented techno frame, still border-only. */


/* Ensure no inherited overlay haze touches the media surface. */


/* Tight mobile adaptation so the frame still reads clearly. */



/* =========================================================
   v2.101 — ANALOG / IMPERFECT RETRO-FUTURIST BORDERS
   ========================================================= */

/*
  Keep the border clearly visible, but break the perfect digital regularity.
  The media surface remains completely untouched.
*/


/* Irregular outer frame with small gaps and asymmetric segment lengths. */


/* Secondary trace with off-register gaps and non-uniform rhythm. */


/* Per-item timing and tiny registration differences prevent a templated feel. */








/* Focus improves signal clarity without making the border mechanically perfect. */








/* Light and Studio modes retain the same analog irregularity. */


/* Mobile keeps the effect visible but calmer. */





/* =========================================================
   v2.102 — LIGHTWEIGHT HOLLOW NODES + ORGANIC GRID VARIATION
   ========================================================= */

/*
  Remove the filled rectangular node blocks from the frame.
  Replace them with hollow registration boxes built from 1px border segments.
*/


/*
  Reduce the overall gallery footprint and introduce controlled organic scale.
  Variation uses only grid spans, width, alignment and margins—no JS.
*/




/* Organic desktop composition */


















/* Responsive aspect variation: still cohesive, no tiny cards. */






/* Small per-node frame variation for a less templated cluster. */








/* Tablet: maintain variation but avoid awkward narrow modules. */


/* Mobile: one column with restrained width and vertical variation. */





/* =========================================================
   v2.103 — NATIVE MEDIA ASPECT RATIOS IN PORTFOLIO
   ========================================================= */

/*
  Portfolio previews now use the exact intrinsic aspect ratio of each source.
  No cropping, forced ratio, letterboxing, or artificial fixed-height module.
*/


/* Images define the module height from their native dimensions. */


/*
  Video elements expose their encoded intrinsic ratio directly.
  The wrapper follows the video's rendered height automatically.
*/


/* Remove legacy ratio-specific cropping and positioning overrides. */


/*
  Preserve the organic grid sizing from v102 while allowing each item's
  natural height to determine the vertical rhythm.
*/






/*
  Prevent large portrait sources from becoming excessively tall on narrow
  screens without changing their aspect ratio. Width is reduced instead.
*/




/* Fallback for browsers without :has() support. */



/* =========================================================
   v2.104 — EXACT SOURCE-RATIO PORTFOLIO FIX
   ========================================================= */

/*
  Each media wrapper receives its exact intrinsic ratio from the loaded image
  or video. This prevents grid stretching, black remainder areas and cropping.
*/




/*
  The rendered media itself remains native-ratio. No cover crop and no
  artificial 100%-height stretching.
*/


/* Once the exact ratio is known, the element fills the matching wrapper. */


/* The border stays attached to the exact media rectangle. */


/* Video black is limited to the encoded video surface only. */


/* Grid rows are content-driven rather than equal-height. */


/* Mobile and tablet retain exact ratios; only widths change. */





/* =========================================================
   v2.105 — OTH NODE LABELS + MOBILE COLLISION FIX
   ========================================================= */

/* Incremental portfolio labels: OTH-1, OTH-2, OTH-3, ... */




/*
  Keep enough physical separation for the external UI frames.
  The border extends beyond the media box, so spacing must account for it.
*/


/* Tablet spacing remains compact but collision-safe. */


/* Phone: one item per row with clear breathing room between outer frames. */


/* Extra-narrow phones get slightly more vertical clearance. */



/* =========================================================
   v2.106 — CENTERED MOBILE FOOTER CTA
   ========================================================= */

@media(max-width:680px){
  .footer{
    text-align:center!important;
  }

  .footer-top{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
  }

  .footer-cta{
    grid-column:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin-inline:auto!important;
    text-align:center!important;
  }

  .footer-cta-link{
    display:inline-flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:100%!important;
    margin-inline:auto!important;
    text-align:center!important;
  }

  .footer-cta-line{
    display:block!important;
    width:auto!important;
    text-align:center!important;
  }

  .footer-cta-line-bottom{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:baseline!important;
    justify-content:center!important;
    column-gap:.18em!important;
  }

  .footer-contact-morph{
    display:block!important;
    margin:.18em auto 0!important;
    align-self:center!important;
  }

  .footer-bottom{
    align-items:center!important;
    text-align:center!important;
  }
}

@media(max-width:420px){
  .footer-cta{
    padding-inline:8px!important;
  }

  .footer-cta-line-bottom{
    row-gap:.04em!important;
  }
}

/* =========================================================
   v2.121 — COMPACT HORIZONTAL MATRIX ARCHIVE
   ========================================================= */

.portfolio-band{
  --band-line:rgba(235,239,237,.28);
  --band-line-strong:rgba(244,247,246,.78);
  --band-grid-major:rgba(235,239,237,.07);
  --band-grid-minor:rgba(235,239,237,.024);
  --band-panel:rgba(5,6,6,.76);
  --band-muted:rgba(232,237,235,.78);
  --band-card-height:clamp(160px,16vw,220px);

  position:relative;
  isolation:isolate;
  width:min(94vw,1480px);
  margin:clamp(46px,6vw,82px) auto clamp(42px,5vw,68px);
  padding:12px 0 10px;
  overflow:hidden;
  border-top:1px solid var(--band-line);
  border-bottom:1px solid var(--band-line);
  background:
    linear-gradient(90deg,var(--band-grid-major) 1px,transparent 1px),
    linear-gradient(180deg,var(--band-grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--band-grid-minor) 1px,transparent 1px),
    linear-gradient(180deg,var(--band-grid-minor) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.025),transparent 68%),
    var(--band-panel);
  background-size:44px 44px,44px 44px,11px 11px,11px 11px,100% 100%,100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(255,255,255,.016);
}

.portfolio-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,6,.96),transparent 6%,transparent 94%,rgba(5,6,6,.96));
}

.portfolio-band::after{
  content:"";
  position:absolute;
  z-index:1;
  top:44px;
  bottom:30px;
  left:-18%;
  width:16%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(245,248,247,.11),transparent);
  opacity:.5;
  transform:skewX(-14deg);
  animation:portfolioBandSweep 9s linear infinite;
}

.portfolio-band__header,
.portfolio-band__footer{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-inline:clamp(16px,2.4vw,34px);
}

.portfolio-band__header{
  min-height:36px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(235,239,237,.11);
}

.portfolio-band__identity{
  position:relative;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:5px 6px 5px 10px;
  border-left:1px solid rgba(235,239,237,.32);
  border-top:1px solid rgba(235,239,237,.12);
  border-bottom:1px solid rgba(235,239,237,.12);
  background:rgba(5,6,6,.42);
}

.portfolio-band__identity::after{
  content:"";
  width:18px;
  height:1px;
  margin-left:2px;
  background:rgba(235,239,237,.28);
}

.portfolio-band__kicker,
.portfolio-band__counter,
.portfolio-band__footer{
  color:var(--band-muted);
  font-family:"Courier New","Lucida Console",ui-monospace,monospace;
  text-transform:uppercase;
}

.portfolio-band__kicker{
  font-size:7px;
  letter-spacing:.13em;
  white-space:nowrap;
}

.portfolio-band__identity h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:5px 7px 4px;
  color:#090b0a;
  background:rgba(238,241,239,.9);
  border:1px solid rgba(255,255,255,.22);
  font:400 7px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 0 10px rgba(255,255,255,.035);
}

.portfolio-band__identity h2 span{
  white-space:nowrap;
}

.portfolio-band__identity h2 small{
  padding-left:8px;
  border-left:1px solid rgba(9,11,10,.28);
  font:inherit;
  opacity:.62;
}

.portfolio-band__controls{
  display:flex;
  align-items:center;
  gap:7px;
}

.portfolio-band__counter{
  min-width:62px;
  margin-right:4px;
  font-size:7px;
  letter-spacing:.12em;
  text-align:right;
}

.portfolio-band__counter b{
  color:var(--text);
  font-weight:400;
}

.portfolio-band__button{
  display:grid;
  place-items:center;
  width:29px;
  height:24px;
  padding:0;
  color:var(--text);
  border:1px solid rgba(235,239,237,.2);
  background:rgba(5,6,6,.72);
  font:400 13px/1 "Courier New",ui-monospace,monospace;
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}

.portfolio-band__button:hover,
.portfolio-band__button:focus-visible{
  border-color:var(--band-line-strong);
  background:rgba(235,239,237,.07);
  outline:none;
}

.portfolio-band__button:active{transform:translateY(1px)}

.portfolio-band__viewport{
  position:relative;
  z-index:2;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:clamp(18px,3vw,44px);
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}

.portfolio-band__viewport::-webkit-scrollbar{display:none}

.portfolio-band__viewport:focus-visible{
  outline:1px solid rgba(235,239,237,.32);
  outline-offset:-1px;
}

.gallery{
  counter-reset:project-node;
  display:flex!important;
  align-items:center!important;
  gap:clamp(22px,2.2vw,34px)!important;
  width:max-content!important;
  min-width:100%!important;
  margin:0!important;
  padding:
    30px
    clamp(24px,3vw,48px)
    28px!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  content-visibility:visible!important;
  contain:none!important;
}

.project,
.project.wide,
.project:nth-of-type(n){
  --fallback-ratio:4 / 3;
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:var(--band-card-height)!important;
  min-width:0!important;
  margin:0!important;
  aspect-ratio:var(--source-ratio,var(--fallback-ratio))!important;
  scroll-snap-align:center;
  scroll-snap-stop:normal;
  overflow:visible!important;
  contain:layout style;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}

.project:has(.ratio-landscape){--fallback-ratio:16 / 10}
.project:has(.ratio-square){--fallback-ratio:1 / 1}
.project:has(.ratio-cinema){--fallback-ratio:16 / 9}
.project:has(.ratio-portrait){--fallback-ratio:3 / 4}

.project::before{
  counter-increment:project-node;
  content:"OTH -" counter(project-node) " / " attr(data-category);
  position:absolute;
  z-index:8;
  top:-17px;
  left:7px;
  max-width:calc(100% - 14px);
  overflow:hidden;
  color:rgba(241,244,243,.9);
  background:rgba(5,6,6,.97);
  padding:3px 6px 2px;
  border-left:1px solid rgba(240,243,242,.42);
  border-right:1px solid rgba(240,243,242,.14);
  font:7px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}

.project::after{
  content:"";
  position:absolute;
  z-index:7;
  right:8px;
  bottom:-7px;
  width:min(28%,72px);
  height:4px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(235,239,237,.7) 0 1px,transparent 1px 4px,rgba(139,145,143,.32) 4px 5px,transparent 5px 9px);
  opacity:.55;
}

.project .meta{display:none!important}

.media,
.project .media,
.project .ratio-landscape,
.project .ratio-square,
.project .ratio-cinema,
.project .ratio-portrait{
  position:relative!important;
  isolation:isolate;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  aspect-ratio:inherit!important;
  overflow:visible!important;
  border:0!important;
  border-radius:1px!important;
  background:#050606!important;
  box-shadow:
    0 0 0 1px rgba(241,244,243,.52),
    0 0 0 4px rgba(5,6,6,.96),
    0 0 0 5px rgba(241,244,243,.18),
    0 10px 28px rgba(0,0,0,.2)!important;
  cursor:pointer;
}

.media::before{
  content:"";
  position:absolute;
  z-index:6;
  inset:-7px;
  pointer-events:none;
  color:rgba(244,247,246,.78);
  background:
    linear-gradient(currentColor,currentColor) left top/31% 1px no-repeat,
    linear-gradient(currentColor,currentColor) right 1px top/22% 1px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/18% 1px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom 1px/37% 1px no-repeat,
    linear-gradient(currentColor,currentColor) left top/1px 28% no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/1px 18% no-repeat,
    linear-gradient(currentColor,currentColor) right top/1px 20% no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/1px 39% no-repeat;
  opacity:.9;
  filter:drop-shadow(0 0 3px rgba(236,240,238,.08));
  animation:portfolioBandFrame 8s steps(10,end) infinite;
}

.media::after{
  content:"";
  position:absolute;
  z-index:7;
  inset:-10px;
  pointer-events:none;
  color:rgba(238,242,240,.62);
  background:
    linear-gradient(currentColor,currentColor) left top/10px 1px no-repeat,
    linear-gradient(currentColor,currentColor) left top/1px 10px no-repeat,
    linear-gradient(currentColor,currentColor) right top/10px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right top/1px 10px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/10px 1px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/1px 10px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/10px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/1px 10px no-repeat;
  opacity:.76;
}

.project:nth-of-type(2n) .media::before{animation-delay:-2.3s}
.project:nth-of-type(3n) .media::before{animation-delay:-4.7s}

.media > img,
.media > video,
.media > picture,
.media > picture > img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  background:#050606;
}

.media.is-loading > img,
.media.is-loading > video{opacity:.84!important}

.media:hover,
.media:focus-visible{
  box-shadow:
    0 0 0 1px rgba(249,251,250,.82),
    0 0 0 4px rgba(5,6,6,.98),
    0 0 0 5px rgba(249,251,250,.28),
    0 14px 34px rgba(0,0,0,.26),
    0 0 20px rgba(235,239,237,.045)!important;
  outline:none;
}

.portfolio-band__footer{
  min-height:22px;
  padding-top:8px;
  border-top:1px solid rgba(235,239,237,.09);
  font-size:7px;
  letter-spacing:.12em;
}

.portfolio-band__progress{
  position:relative;
  flex:1 1 auto;
  max-width:340px;
  height:2px;
  overflow:hidden;
  background:rgba(235,239,237,.11);
}

.portfolio-band__progress i{
  display:block;
  width:100%;
  height:100%;
  background:rgba(235,239,237,.74);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .12s linear;
}

html[data-theme="easter"] .portfolio-band{
  --band-line:rgba(247,237,229,.32);
  --band-line-strong:rgba(252,247,243,.84);
  --band-grid-major:rgba(247,237,229,.08);
  --band-grid-minor:rgba(247,237,229,.027);
  --band-panel:rgba(3,3,3,.82);
  --band-muted:rgba(244,238,233,.66);
}

html[data-theme="light"] .portfolio-band{
  --band-line:rgba(22,26,24,.24);
  --band-line-strong:rgba(16,20,18,.72);
  --band-grid-major:rgba(22,26,24,.075);
  --band-grid-minor:rgba(22,26,24,.026);
  --band-panel:rgba(246,246,243,.78);
  --band-muted:rgba(26,30,28,.56);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.018),inset 0 -1px 0 rgba(0,0,0,.012);
}

html[data-theme="light"] .portfolio-band::before{
  background:linear-gradient(90deg,rgba(246,246,243,.96),transparent 6%,transparent 94%,rgba(246,246,243,.96));
}

html[data-theme="light"] .portfolio-band__identity{
  border-color:rgba(20,25,23,.15);
  background:rgba(255,255,255,.34);
}

html[data-theme="light"] .portfolio-band__identity h2{
  color:#f4f5f2;
  background:rgba(20,24,22,.88);
  border-color:rgba(20,24,22,.18);
}

html[data-theme="light"] .portfolio-band__identity h2 small{
  border-left-color:rgba(244,245,242,.26);
}

html[data-theme="light"] .portfolio-band__button{
  color:#171a18;
  border-color:rgba(22,26,24,.2);
  background:rgba(248,248,245,.72);
}

html[data-theme="light"] .project::before{
  color:rgba(25,29,27,.7);
  background:rgba(247,247,244,.96);
  border-color:rgba(22,26,24,.32);
}

html[data-theme="light"] .media,
html[data-theme="light"] .project .media{
  background:#eceeeb!important;
  box-shadow:
    0 0 0 1px rgba(19,23,21,.44),
    0 0 0 4px rgba(247,247,244,.98),
    0 0 0 5px rgba(19,23,21,.14),
    0 9px 24px rgba(0,0,0,.08)!important;
}

html[data-theme="light"] .media::before{color:rgba(20,24,22,.68);filter:none}
html[data-theme="light"] .media::after{color:rgba(20,24,22,.52)}
html[data-theme="light"] .media > img,
html[data-theme="light"] .media > video,
html[data-theme="light"] .media > picture,
html[data-theme="light"] .media > picture > img{background:#eceeeb}

@keyframes portfolioBandSweep{
  from{transform:translateX(0) skewX(-14deg)}
  to{transform:translateX(760%) skewX(-14deg)}
}

@keyframes portfolioBandFrame{
  0%,100%{transform:translate3d(0,0,0);opacity:.86}
  21%{transform:translate3d(.35px,0,0);opacity:.94}
  43%{transform:translate3d(-.25px,.15px,0);opacity:.79}
  45%{opacity:.58}
  47%{opacity:.9}
  72%{transform:translate3d(.2px,-.2px,0);opacity:.84}
}

html.perf-lite .portfolio-band::after,
html.perf-lite .media::before{animation:none!important}

@media(max-width:900px){
  .portfolio-band{
    --band-card-height:clamp(145px,22vw,190px);
    width:96vw;
  }

  .portfolio-band__footer > span:last-child{display:none}
}

@media(max-width:680px){
  .portfolio-band{
    --band-card-height:148px;
    width:100%;
    margin-block:38px 34px;
  }

  .portfolio-band__header{
    padding-inline:14px;
  }

  .portfolio-band__identity{
    gap:8px;
  }

  .portfolio-band__identity h2{font-size:6.5px;letter-spacing:.1em}
  .portfolio-band__kicker{font-size:6.5px;letter-spacing:.1em}
  .portfolio-band__counter{display:none}

  .portfolio-band__button{
    width:31px;
    height:26px;
  }

  .gallery{
    gap:22px!important;
    padding:28px 22px 26px!important;
  }

  .project::before{
    top:-16px;
    font-size:6.5px;
  }

  .portfolio-band__footer{
    padding-inline:14px;
    font-size:6.5px;
  }

  .portfolio-band__progress{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .portfolio-band::after,
  .media::before{animation:none!important}
}


/* =========================================================
   v2.123 — NATIVE CURSOR SUPPRESSION
   ========================================================= */

@media (hover:hover) and (pointer:fine){
  html,
  body,
  body *,
  body *::before,
  body *::after{
    cursor:none!important;
  }
}


/* =========================================================
   v2.124 — MOBILE MEDIA, PARADISE GROW + PROFILE SIGNAL
   ========================================================= */

.project-video{
  pointer-events:none!important;
}

.paradise-grow-preview{
  background:#030403!important;
}

.paradise-grow-preview > video{
  box-sizing:border-box!important;
  padding:4.5%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#030403!important;
}

.heezy-root-visual{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}



@media(max-width:680px){
  .portfolio-band__viewport,
  .portfolio-band__viewport .media{
    touch-action:pan-x pan-y;
  }

}


/* =========================================================
   v2.127 — FEATURED MAIN TEASER
   ========================================================= */

.project--main-teaser{
  --fallback-ratio:16 / 9;
  height:calc(var(--band-card-height) * 1.08)!important;
}

.project--main-teaser::before{
  content:"OTH -1 / FEATURED SIGNAL";
  color:#0a0c0b;
  background:rgba(239,242,240,.92);
  border-color:rgba(255,255,255,.28);
  letter-spacing:.14em;
}

.project--main-teaser::after{
  width:min(42%,128px);
  background:repeating-linear-gradient(90deg,#f27f16 0 2px,transparent 2px 7px,rgba(235,239,237,.55) 7px 8px,transparent 8px 12px);
  opacity:.82;
}

.main-teaser-preview{
  background:#030404!important;
  box-shadow:
    0 0 0 1px rgba(248,250,249,.74),
    0 0 0 4px rgba(5,6,6,.98),
    0 0 0 6px rgba(242,127,22,.28),
    0 16px 38px rgba(0,0,0,.3),
    0 0 28px rgba(242,127,22,.055)!important;
}

.main-teaser-preview > video{
  object-fit:contain!important;
  background:#030404!important;
}

.main-teaser-preview__badge,
.main-teaser-preview__scope{
  position:absolute;
  z-index:9;
  pointer-events:none;
  font:7px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.main-teaser-preview__badge{
  left:10px;
  top:10px;
  padding:5px 7px 4px;
  color:#0a0c0b;
  background:rgba(239,242,240,.9);
  border-left:2px solid #f27f16;
}

.main-teaser-preview__badge::before{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:7px;
  border-radius:50%;
  background:#f27f16;
  box-shadow:0 0 7px rgba(242,127,22,.65);
  vertical-align:1px;
  animation:mainTeaserLive 1.25s steps(2,end) infinite;
}

.main-teaser-preview__scope{
  right:10px;
  bottom:10px;
  padding:4px 6px 3px;
  color:rgba(234,238,236,.72);
  background:rgba(4,5,5,.9);
  border-right:1px solid rgba(239,242,240,.38);
}

@keyframes mainTeaserLive{
  0%,46%{opacity:1}
  47%,100%{opacity:.25}
}

html[data-theme="light"] .project--main-teaser::before{
  color:#f4f5f2;
  background:rgba(20,24,22,.9);
}

html[data-theme="light"] .main-teaser-preview{
  box-shadow:
    0 0 0 1px rgba(19,23,21,.58),
    0 0 0 4px rgba(247,247,244,.98),
    0 0 0 6px rgba(217,107,21,.24),
    0 13px 30px rgba(0,0,0,.1)!important;
}

@media(max-width:680px){
  .project--main-teaser{
    height:calc(var(--band-card-height) * 1.04)!important;
  }

  .main-teaser-preview__badge,
  .main-teaser-preview__scope{
    font-size:6px;
  }

  .main-teaser-preview__scope{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .main-teaser-preview__badge::before{animation:none}
}

/* =========================================================
   v2.130 — NATURE + STUDIO MODE NODES
   ========================================================= */

.mode-node{
  position:absolute;
  top:50%;
  width:24px;
  height:24px;
  padding:0;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:rgba(242,244,243,.68);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012),0 6px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(12px);
  z-index:3;
  transition:color .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s ease;
}

.mode-node--nature{right:calc(var(--page) + 144px)}
.mode-node--studio{right:calc(var(--page) + 54px)}

.mode-node__icon,
.mode-node__icon svg{
  display:block;
  width:100%;
  height:100%;
}

.mode-node__icon{padding:4px}
.mode-node__icon svg{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.mode-node:hover,.mode-node:focus-visible{transform:translateY(-50%) scale(1.08);border-color:rgba(255,255,255,.34);outline:none}

.mode-node--nature[aria-pressed="true"]{
  color:#aaf7bd;
  border-color:rgba(134,240,165,.55);
  background:linear-gradient(145deg,rgba(91,205,126,.28),rgba(17,72,42,.42));
  box-shadow:0 0 0 1px rgba(92,224,131,.1),0 0 18px rgba(71,218,112,.2),inset 0 0 12px rgba(143,255,176,.08);
}

.mode-node--studio[aria-pressed="true"]{
  color:#ff9a39;
  border-color:rgba(255,137,34,.54);
  background:linear-gradient(145deg,rgba(255,126,25,.24),rgba(76,31,7,.42));
  box-shadow:0 0 0 1px rgba(255,128,27,.09),0 0 18px rgba(255,112,18,.18),inset 0 0 12px rgba(255,158,62,.07);
}

.mode-node--nature[aria-pressed="true"] .tree-crown-a{
  transform-origin:50% 78%;
  animation:natureTreeWind 2.8s ease-in-out infinite;
}
.mode-node--nature[aria-pressed="true"] .tree-crown-b{
  transform-origin:50% 78%;
  animation:natureTreeWind 2.8s ease-in-out .12s infinite reverse;
}

@keyframes natureTreeWind{
  0%,100%{transform:rotate(-2deg) translateX(-.2px)}
  48%{transform:rotate(4deg) translateX(.7px)}
  72%{transform:rotate(1deg) translateX(.2px)}
}

.theme-toggle.is-deactivated .theme-toggle-track{
  border-color:rgba(255,255,255,.14)!important;
  background:linear-gradient(90deg,#0a0a0a 0 50%,#ededeb 50% 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 7px 20px rgba(0,0,0,.12)!important;
}
.theme-toggle.is-deactivated .theme-toggle-orb{opacity:.72;filter:grayscale(1);transform:translateX(13px)!important}
.theme-toggle.is-deactivated .theme-icon{opacity:.22!important;color:#888!important}

/* Nature mode: lightweight layered gradients, high contrast, no raster background. */
html[data-theme="nature"]{
  --bg:#07120d;
  --text:#edf8f0;
  --muted:#9db2a4;
  --line:rgba(191,231,202,.18);
  --accent:#72d692;
}

html[data-theme="nature"] body{
  color:var(--text);
  background:
    radial-gradient(ellipse at 18% 8%,rgba(79,173,111,.22),transparent 36%),
    radial-gradient(ellipse at 78% 34%,rgba(35,106,70,.18),transparent 42%),
    linear-gradient(155deg,#0a1c13 0%,#07130d 42%,#031009 100%);
}

html[data-theme="nature"] body::before{
  opacity:.58;
  background:
    linear-gradient(90deg,rgba(163,221,179,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(163,221,179,.035) 1px,transparent 1px),
    radial-gradient(circle at 28% 35%,rgba(108,210,139,.07),transparent 30%);
  background-size:26px 26px,26px 26px,100% 100%;
}

html[data-theme="nature"] .nav.scrolled{
  background:rgba(5,18,11,.76);
  border-color:rgba(178,226,191,.14);
}

html[data-theme="nature"] :is(.portfolio-band,.capability-console,.footer){
  border-color:rgba(184,229,196,.18);
}

html[data-theme="nature"] .portfolio-band{
  --band-line:rgba(207,241,216,.72);
  --band-line-soft:rgba(178,224,190,.2);
  --band-muted:rgba(198,225,205,.72);
  background:
    linear-gradient(90deg,rgba(175,226,189,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(175,226,189,.055) 1px,transparent 1px),
    radial-gradient(ellipse at 15% 50%,rgba(92,190,119,.1),transparent 36%),
    rgba(4,17,10,.78);
  background-size:38px 38px,38px 38px,100% 100%,100% 100%;
  box-shadow:inset 0 1px 0 rgba(220,248,227,.05),0 18px 42px rgba(0,0,0,.18);
}

html[data-theme="nature"] .portfolio-band__identity h2,
html[data-theme="nature"] .project::before,
html[data-theme="nature"] .project-featured-badge,
html[data-theme="nature"] .project-featured-scope{
  color:#07130c;
  background:linear-gradient(90deg,#c9f2d3,#86daa0);
  border-color:rgba(220,255,229,.32);
}

html[data-theme="nature"] .project .media{
  border-color:rgba(211,241,218,.72);
  box-shadow:0 0 0 1px rgba(106,204,133,.08),0 0 24px rgba(73,166,100,.06);
}

html[data-theme="nature"] .footer{
  background:linear-gradient(180deg,transparent,rgba(3,12,7,.9));
}

html[data-theme="nature"] .lightbox{
  background:rgba(2,10,6,.94);
}

html[data-theme="nature"] .cursor-plus{color:#9fe8b2;mix-blend-mode:screen}
html[data-theme="nature"] ::selection{background:#6dcc8b;color:#06110a}

/* Refined studio mode node integration. Existing Studio visuals remain intact. */
html[data-theme="easter"] .mode-node--nature{color:rgba(255,240,225,.46);border-color:rgba(255,214,178,.16)}
html[data-theme="easter"] .mode-node--studio{color:#ff9a39}

html[data-theme="light"] .mode-node{
  color:rgba(20,24,22,.62);
  border-color:rgba(20,24,22,.17);
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 5px 14px rgba(0,0,0,.06);
}

html[data-theme="light"] .theme-toggle.is-deactivated .theme-toggle-track{
  border-color:rgba(20,24,22,.18)!important;
}

@media(max-width:760px){
  .mode-node{width:22px;height:22px}
  .mode-node--nature{right:calc(var(--page) + 137px)}
  .mode-node--studio{right:calc(var(--page) + 56px)}
}

@media(max-width:520px){
  .mode-node--nature{right:calc(var(--page) + 132px)}
  .mode-node--studio{right:calc(var(--page) + 53px)}
  .mode-node__icon{padding:4px}
}

@media(prefers-reduced-motion:reduce){
  .mode-node--nature[aria-pressed="true"] .tree-crown{animation:none!important}
}


/* =========================================================
   v2.131 — PRECISE MODE CLUSTER + REAL TREE ICON
   ========================================================= */

/* One centered cluster prevents the mode buttons from drifting toward Contact. */
.mode-switch-cluster{
  position:absolute;
  left:50%;
  top:50%;
  display:grid;
  grid-template-columns:28px 52px 28px;
  align-items:center;
  gap:8px;
  transform:translate(-50%,-50%);
  z-index:5;
}

.mode-switch-cluster .theme-toggle,
.mode-switch-cluster .mode-node{
  position:relative!important;
  inset:auto!important;
  right:auto!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  margin:0!important;
}

.mode-switch-cluster .theme-toggle{
  width:52px;
  height:28px;
}

.mode-switch-cluster .mode-node{
  width:28px;
  height:28px;
}

.mode-switch-cluster .mode-node:hover,
.mode-switch-cluster .mode-node:focus-visible{
  transform:scale(1.07)!important;
}

.mode-node__icon--tree{
  padding:2px!important;
}

.mode-node__icon--tree svg{
  overflow:visible;
  stroke:none!important;
}

.mode-node__icon--tree .tree-leaf{
  fill:#a9adaa;
  transition:fill .35s ease,filter .35s ease;
}

.mode-node__icon--tree .tree-leaf-b,
.mode-node__icon--tree .tree-leaf-c{
  fill:#858a87;
}

.mode-node__icon--tree .tree-trunk{
  fill:#777b79;
  transition:fill .35s ease;
}

.mode-node__icon--tree .tree-branch{
  fill:none;
  stroke:#777b79;
  stroke-width:1.6;
  stroke-linecap:round;
  transition:stroke .35s ease;
}

.mode-node--nature[aria-pressed="true"] .tree-leaf-a,
.mode-node--nature[aria-pressed="true"] .tree-leaf-d{fill:#5fb44a}
.mode-node--nature[aria-pressed="true"] .tree-leaf-b{fill:#45a14c}
.mode-node--nature[aria-pressed="true"] .tree-leaf-c{fill:#378f47}
.mode-node--nature[aria-pressed="true"] .tree-trunk{fill:#845c35}
.mode-node--nature[aria-pressed="true"] .tree-branch{stroke:#70492d}

.mode-node--nature[aria-pressed="true"] .tree-crown{
  transform-origin:16px 20px;
  animation:natureTreeCanopyWind 2.4s cubic-bezier(.45,0,.55,1) infinite;
}

.mode-node--nature[aria-pressed="true"] .tree-trunk,
.mode-node--nature[aria-pressed="true"] .tree-branch{
  transform-origin:16px 27px;
  animation:natureTreeTrunkWind 2.4s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes natureTreeCanopyWind{
  0%,100%{transform:rotate(-2deg) translateX(-.3px)}
  45%{transform:rotate(4.5deg) translateX(1px)}
  72%{transform:rotate(1deg) translateX(.2px)}
}

@keyframes natureTreeTrunkWind{
  0%,100%{transform:skewX(-1deg)}
  45%{transform:skewX(2.5deg)}
  72%{transform:skewX(.5deg)}
}

/* Nature mirrors Studio's active-switch treatment, using nature tones. */
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-track{
  border-color:rgba(125,223,151,.42)!important;
  background:
    radial-gradient(circle at 72% 48%,rgba(179,255,199,.18),transparent 31%),
    linear-gradient(90deg,#07110b 0 48%,#2f814a 48% 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(205,255,218,.04),
    0 0 16px rgba(76,190,108,.16),
    0 7px 20px rgba(0,0,0,.14)!important;
}

html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-orb{
  opacity:1!important;
  filter:none!important;
  transform:translateX(26px)!important;
  background:#9be7ad!important;
  box-shadow:0 0 0 1px rgba(220,255,228,.32),0 0 14px rgba(94,221,130,.3)!important;
}

html[data-theme="nature"] .theme-toggle.is-deactivated .theme-icon{
  color:#b7e8c3!important;
  opacity:.34!important;
}

/* Remove the redundant featured-signal label; MAIN TEASER remains inside media. */
.project--main-teaser::before{
  content:none!important;
  display:none!important;
}

/* Footer helper copy is intentionally absent; keep the progress line centered. */
.portfolio-band__footer{
  grid-template-columns:1fr!important;
  justify-items:center!important;
}

.portfolio-band__progress{
  width:min(72%,640px)!important;
  max-width:640px!important;
}

@media(max-width:760px){
  .mode-switch-cluster{
    grid-template-columns:25px 50px 25px;
    gap:6px;
  }
  .mode-switch-cluster .mode-node{width:25px;height:25px}
  .mode-switch-cluster .theme-toggle{width:50px;height:27px}
}

@media(max-width:520px){
  .mode-switch-cluster{
    grid-template-columns:23px 46px 23px;
    gap:5px;
  }
  .mode-switch-cluster .mode-node{width:23px;height:23px}
  .mode-switch-cluster .theme-toggle{width:46px;height:25px}
  .mode-node__icon--tree{padding:1.5px!important}
}

@media(max-width:390px){
  .mode-switch-cluster{
    left:52%;
    grid-template-columns:21px 43px 21px;
    gap:4px;
  }
  .mode-switch-cluster .mode-node{width:21px;height:21px}
  .mode-switch-cluster .theme-toggle{width:43px;height:24px}
}

@media(prefers-reduced-motion:reduce){
  .mode-node--nature[aria-pressed="true"] :is(.tree-crown,.tree-trunk,.tree-branch){animation:none!important}
}


/* =========================================================
   v2.132 — STUDIO LOGO ICON + VISIBLE NATURE WIND MOTION
   ========================================================= */

.mode-node__icon--studio{
  padding:3px!important;
  display:grid!important;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
}

.mode-node__icon--studio img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:grayscale(1) contrast(2.25) brightness(1.55) drop-shadow(0 0 2px rgba(255,255,255,.18));
  opacity:.76;
  transform:scale(1.16);
  transition:filter .32s ease,opacity .32s ease,transform .32s ease;
}

.mode-node--studio:hover .mode-node__icon--studio img,
.mode-node--studio:focus-visible .mode-node__icon--studio img{
  opacity:1;
  transform:scale(1.22);
}

.mode-node--studio[aria-pressed="true"] .mode-node__icon--studio img{
  opacity:1;
  transform:scale(1.2);
  filter:grayscale(1) sepia(1) saturate(7) hue-rotate(340deg) brightness(1.35) contrast(2.15) drop-shadow(0 0 3px rgba(255,132,35,.62));
}

.mode-node--nature[aria-pressed="true"] .mode-node__icon--tree svg{
  transform-origin:50% 92%;
  animation:natureTreeWholeWind 2.15s ease-in-out infinite;
}

.mode-node--nature[aria-pressed="true"] .tree-crown{
  transform-origin:16px 21px;
  animation:natureTreeCanopyWindStrong 1.72s ease-in-out infinite;
}

.mode-node--nature[aria-pressed="true"] .tree-leaf-a{
  transform-origin:12px 17px;
  animation:natureLeafWindA 1.34s ease-in-out infinite;
}

.mode-node--nature[aria-pressed="true"] .tree-leaf-b{
  transform-origin:16px 17px;
  animation:natureLeafWindB 1.58s ease-in-out .08s infinite;
}

.mode-node--nature[aria-pressed="true"] .tree-leaf-c{
  transform-origin:20px 18px;
  animation:natureLeafWindA 1.43s ease-in-out .16s infinite reverse;
}

.mode-node--nature[aria-pressed="true"] .tree-leaf-d{
  transform-origin:16px 19px;
  animation:natureLeafWindB 1.82s ease-in-out .05s infinite;
}

.mode-node--nature[aria-pressed="true"] .tree-trunk,
.mode-node--nature[aria-pressed="true"] .tree-branch{
  transform-origin:16px 28px;
  animation:natureTreeTrunkWindStrong 2.15s ease-in-out infinite;
}

@keyframes natureTreeWholeWind{
  0%,100%{transform:rotate(-2.4deg) translateX(-.4px)}
  30%{transform:rotate(1.2deg) translateX(.2px)}
  57%{transform:rotate(5.2deg) translateX(1.1px)}
  78%{transform:rotate(1.4deg) translateX(.25px)}
}

@keyframes natureTreeCanopyWindStrong{
  0%,100%{transform:skewX(-3deg) rotate(-1.8deg) translateX(-.3px)}
  48%{transform:skewX(7deg) rotate(4.8deg) translateX(1.15px)}
  72%{transform:skewX(1.5deg) rotate(.7deg) translateX(.2px)}
}

@keyframes natureTreeTrunkWindStrong{
  0%,100%{transform:skewX(-1.4deg)}
  54%{transform:skewX(4.4deg)}
  78%{transform:skewX(.8deg)}
}

@keyframes natureLeafWindA{
  0%,100%{transform:translateX(-.3px) translateY(0) rotate(-2deg)}
  52%{transform:translateX(1.2px) translateY(-.45px) rotate(6deg)}
}

@keyframes natureLeafWindB{
  0%,100%{transform:translateX(0) translateY(0) scale(1)}
  46%{transform:translateX(.75px) translateY(-.35px) scale(1.045)}
  74%{transform:translateX(.15px) translateY(.1px) scale(.985)}
}

@media(max-width:520px){
  .mode-node__icon--studio{padding:2.5px!important}
  .mode-node__icon--studio img{transform:scale(1.12)}
  .mode-node--studio[aria-pressed="true"] .mode-node__icon--studio img{transform:scale(1.16)}
}

@media(prefers-reduced-motion:reduce){
  .mode-node--nature[aria-pressed="true"] .mode-node__icon--tree svg,
  .mode-node--nature[aria-pressed="true"] :is(.tree-crown,.tree-leaf,.tree-trunk,.tree-branch){
    animation:none!important;
  }
}


/* =========================================================
   v2.133 — CLEAN DEACTIVATED DARK / LIGHT SWITCH
   ========================================================= */

/* Nature and Studio use the central control only as a neutral inactive
   black/white switch. Remove every sun/moon graphic and generated ray. */
.theme-toggle.is-deactivated .theme-icon,
.theme-toggle.is-deactivated .moon-phase,
.theme-toggle.is-deactivated .moon-disc,
.theme-toggle.is-deactivated .moon-shadow{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}

.theme-toggle.is-deactivated .theme-toggle-orb::before,
.theme-toggle.is-deactivated .theme-toggle-orb::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  animation:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* Keep one simple, readable monochrome orb without inherited theme glyphs. */
.theme-toggle.is-deactivated .theme-toggle-orb{
  background:#ededeb!important;
  border:1px solid rgba(0,0,0,.32)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    0 1px 4px rgba(0,0,0,.24)!important;
  filter:none!important;
}

html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-orb{
  background:#edf1ed!important;
  border-color:rgba(5,13,8,.42)!important;
}

html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-orb{
  background:#f0efec!important;
  border-color:rgba(18,10,5,.5)!important;
}


/* =========================================================
   v2.134 — TRUE FOREST-GREEN NATURE PALETTE
   ========================================================= */

html[data-theme="nature"]{
  color-scheme:dark;
  --bg:#050d05;
  --surface:#0a1709;
  --text:#eef7ec;
  --muted:#a6bda3;
  --faint:#687f67;
  --line:rgba(164,211,157,.2);
  --accent:#69c85d;

  --oth-orange:#63c456;
  --oth-orange-deep:#2f7f35;
  --oth-amber:#8cdb72;
  --oth-warm:#b5eba1;
  --oth-accent-gradient:linear-gradient(
    118deg,
    #255f2d 0%,
    #3f9442 34%,
    #69c85d 67%,
    #a3e887 100%
  );
}

html[data-theme="nature"] body{
  color:var(--text);
  background:
    radial-gradient(ellipse at 16% 6%,rgba(86,168,72,.25),transparent 34%),
    radial-gradient(ellipse at 82% 28%,rgba(39,111,43,.2),transparent 40%),
    radial-gradient(ellipse at 48% 78%,rgba(30,82,32,.15),transparent 45%),
    linear-gradient(155deg,#0b220d 0%,#081808 43%,#030b03 100%)!important;
}

html[data-theme="nature"] body::before{
  opacity:.62;
  background:
    linear-gradient(90deg,rgba(159,211,149,.038) 1px,transparent 1px),
    linear-gradient(180deg,rgba(159,211,149,.038) 1px,transparent 1px),
    radial-gradient(circle at 28% 35%,rgba(104,196,86,.085),transparent 30%)!important;
  background-size:26px 26px,26px 26px,100% 100%!important;
}

html[data-theme="nature"] .nav.scrolled{
  background:rgba(5,17,5,.8)!important;
  border-color:rgba(153,205,146,.16)!important;
}

html[data-theme="nature"] .portfolio-band{
  --band-line:rgba(211,239,205,.76);
  --band-line-soft:rgba(151,204,143,.22);
  --band-muted:rgba(194,220,188,.76);
  background:
    linear-gradient(90deg,rgba(156,205,148,.058) 1px,transparent 1px),
    linear-gradient(180deg,rgba(156,205,148,.058) 1px,transparent 1px),
    radial-gradient(ellipse at 14% 48%,rgba(87,177,73,.13),transparent 36%),
    rgba(5,18,5,.82)!important;
  background-size:38px 38px,38px 38px,100% 100%,100% 100%!important;
  box-shadow:
    inset 0 1px 0 rgba(221,244,216,.055),
    0 18px 42px rgba(0,0,0,.2)!important;
}

html[data-theme="nature"] :is(
  .portfolio-band__identity h2,
  .project::before,
  .project-featured-badge,
  .project-featured-scope,
  .main-teaser-preview__badge,
  .main-teaser-preview__scope
){
  color:#061006!important;
  background:linear-gradient(90deg,#d0efc7,#77c967)!important;
  border-color:rgba(220,247,214,.34)!important;
}

html[data-theme="nature"] .project .media{
  border-color:rgba(207,235,201,.74)!important;
  box-shadow:
    0 0 0 1px rgba(87,177,73,.1),
    0 0 24px rgba(58,145,54,.075)!important;
}

html[data-theme="nature"] .project--main-teaser::after{
  background:
    repeating-linear-gradient(
      90deg,
      #4ca345 0 2px,
      transparent 2px 7px,
      rgba(214,237,208,.58) 7px 8px,
      transparent 8px 12px
    )!important;
}

html[data-theme="nature"] .main-teaser-preview{
  box-shadow:
    0 0 0 1px rgba(235,245,232,.76),
    0 0 0 4px rgba(5,10,5,.98),
    0 0 0 6px rgba(76,163,69,.3),
    0 16px 38px rgba(0,0,0,.3),
    0 0 28px rgba(76,163,69,.08)!important;
}

html[data-theme="nature"] .main-teaser-preview__badge{
  border-left-color:#4ca345!important;
}

html[data-theme="nature"] .main-teaser-preview__badge::before{
  background:#69c85d!important;
  box-shadow:0 0 7px rgba(105,200,93,.68)!important;
}

/* Replace all warm/orange interface typography with forest-green gradients. */
html[data-theme="nature"] :is(
  .serif,
  #typed,
  .footer-individuality,
  .heezy-text-panel h1
){
  color:transparent!important;
  background:var(--oth-accent-gradient)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

html[data-theme="nature"] .typed-cursor{
  color:transparent!important;
  background:linear-gradient(118deg,#2f7f35,#69c85d 56%,#a3e887)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 0 3px rgba(84,181,73,.34))!important;
}

html[data-theme="nature"] :is(
  .progress,
  .scroll-line::after
){
  background:var(--oth-accent-gradient)!important;
  box-shadow:0 0 10px rgba(79,173,68,.26)!important;
}

html[data-theme="nature"] :is(
  .nav-mail-icon rect,
  .nav-mail-icon path,
  .footer-contact-morph path,
  .theme-icon svg,
  .heezy-root-svg path,
  .heezy-root-svg circle,
  .sound-lfo-display path,
  .footer-lfo-path,
  .x1-matrix-burst
){
  stroke:#67c75a!important;
}

html[data-theme="nature"] :is(
  .root-node,
  .root-node-core,
  .root-satellite,
  .footer-lfo-accent,
  .portfolio-band__progress i
){
  background:#69c85d!important;
  color:#69c85d!important;
}

html[data-theme="nature"] :is(
  .subtitle,
  .footer-cta-link,
  .footer-contact-morph,
  .cursor-plus
){
  color:#78d36a!important;
}

html[data-theme="nature"] .footer{
  background:linear-gradient(180deg,transparent,rgba(3,11,3,.92))!important;
}

html[data-theme="nature"] .lightbox{
  background:rgba(2,8,2,.95)!important;
}

html[data-theme="nature"] ::selection{
  background:#69c85d!important;
  color:#041004!important;
}

/* Active Nature control uses a greener, less cyan visual range. */
.mode-node--nature[aria-pressed="true"]{
  color:#72d166!important;
  border-color:rgba(113,205,101,.46)!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(120,222,104,.18),transparent 62%),
    rgba(8,25,8,.82)!important;
  box-shadow:
    inset 0 0 0 1px rgba(199,241,192,.05),
    0 0 14px rgba(78,171,69,.2)!important;
}

html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-track{
  border-color:rgba(111,199,99,.46)!important;
  background:
    radial-gradient(circle at 72% 48%,rgba(154,230,140,.2),transparent 31%),
    linear-gradient(90deg,#061006 0 48%,#3d8f3e 48% 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(207,242,199,.045),
    0 0 16px rgba(74,165,65,.18),
    0 7px 20px rgba(0,0,0,.16)!important;
}

html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-orb{
  background:#9cdb8c!important;
  border-color:rgba(17,55,19,.5)!important;
  box-shadow:
    0 0 0 1px rgba(221,246,215,.34),
    0 0 14px rgba(93,194,82,.32)!important;
}


/* =========================================================
   v2.135 — NEUTRAL DEACTIVATED SWITCH + GREEN HEADER PLUS
   ========================================================= */

/* Whenever Nature or Studio is active, the dark/light switch is inactive.
   It must always read as one clean white-to-black gradient, independent of
   the selected alternate mode. */
.theme-toggle.is-deactivated .theme-toggle-track,
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-track,
html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-track{
  background:linear-gradient(90deg,#f3f3f1 0%,#c9c9c6 32%,#777876 58%,#171918 100%)!important;
  border-color:rgba(232,234,232,.28)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 6px 18px rgba(0,0,0,.2)!important;
}

.theme-toggle.is-deactivated .theme-toggle-orb,
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-orb,
html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-orb{
  background:#efefed!important;
  border:1px solid rgba(12,14,13,.42)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 1px 5px rgba(0,0,0,.28)!important;
  filter:none!important;
}

/* The animated + between IMAGE and SOUND is part of the primary accent
   system and therefore follows the Nature palette as well. */
html[data-theme="nature"] .header-plus{
  color:#65c658!important;
  filter:
    drop-shadow(0 0 3px rgba(87,190,75,.42))
    drop-shadow(0 0 9px rgba(48,126,52,.18))!important;
}

html[data-theme="nature"] .header-plus-shape::before,
html[data-theme="nature"] .header-plus-shape::after{
  background:
    linear-gradient(
      118deg,
      #245f2b 0%,
      #3e9340 38%,
      #68c75a 70%,
      #a0e684 100%
    )!important;
  box-shadow:
    0 0 4px rgba(93,195,81,.42),
    0 0 11px rgba(42,119,47,.2)!important;
}

html[data-theme="nature"] .header-plus::before,
html[data-theme="nature"] .header-plus::after{
  border-color:rgba(99,198,87,.34)!important;
  box-shadow:
    0 0 8px rgba(88,184,76,.2),
    0 0 16px rgba(47,126,51,.1)!important;
}


/* =========================================================
   v2.136 — NATURE ACCENT COMPLETION: HEADER PLUS + CURSOR
   ========================================================= */

/* The animated + between IMAGE and SOUND must use the Nature palette,
   including its actual shape, glow and diffusion layers. */
html[data-theme="nature"] .header-plus{
  color:#69c85d!important;
  opacity:1!important;
  visibility:visible!important;
  filter:
    drop-shadow(0 0 3px rgba(92,194,80,.48))
    drop-shadow(0 0 10px rgba(38,112,43,.22))!important;
}

html[data-theme="nature"] .header-plus-shape::before,
html[data-theme="nature"] .header-plus-shape::after{
  background:
    linear-gradient(
      118deg,
      #245d2a 0%,
      #3c8d3d 38%,
      #67c65a 70%,
      #a4e78a 100%
    )!important;
  box-shadow:
    0 0 4px rgba(99,201,86,.48),
    0 0 12px rgba(41,123,46,.24)!important;
}

html[data-theme="nature"] .header-plus::before{
  box-shadow:
    0 0 5px rgba(105,200,93,.82),
    0 0 13px rgba(80,174,70,.34),
    0 0 23px rgba(38,111,42,.18)!important;
}

html[data-theme="nature"] .header-plus::after{
  box-shadow:
    0 0 10px rgba(105,200,93,.66),
    0 0 25px rgba(53,144,58,.25)!important;
}

/* The custom + cursor must also switch completely from white/orange to
   dark-to-bright forest green in Nature mode. */
html[data-theme="nature"] .cursor-plus{
  color:#69c85d!important;
  mix-blend-mode:normal!important;
  filter:
    drop-shadow(0 0 3px rgba(101,198,87,.5))
    drop-shadow(0 0 9px rgba(39,118,44,.24))!important;
}

html[data-theme="nature"] .cursor-plus-shape::before,
html[data-theme="nature"] .cursor-plus-shape::after{
  background:
    linear-gradient(
      118deg,
      #235c29 0%,
      #3c8e3d 38%,
      #69c85d 70%,
      #a4e78a 100%
    )!important;
  box-shadow:
    0 0 4px rgba(100,201,87,.52),
    0 0 11px rgba(39,119,44,.25)!important;
}

/* Preserve the green cursor during active/pressed interaction states. */
html[data-theme="nature"] .cursor-plus.is-active .cursor-plus-shape::before,
html[data-theme="nature"] .cursor-plus.is-active .cursor-plus-shape::after{
  background:
    linear-gradient(
      118deg,
      #1f5225 0%,
      #367f38 34%,
      #61bd55 66%,
      #b0ee96 100%
    )!important;
  box-shadow:
    0 0 5px rgba(113,215,98,.58),
    0 0 14px rgba(45,135,50,.3)!important;
}


/* =========================================================
   v2.138 — NATURE FOOTER MAILBOX ARROW
   ========================================================= */

/* The footer contact arrow uses its own inline SVG gradient, so it must be
   recolored explicitly in Nature mode rather than inheriting the default
   orange/yellow gradient. */
html[data-theme="nature"] .footer-contact-morph{
  color:#69c85d!important;
  filter:
    drop-shadow(0 0 3px rgba(101,198,87,.48))
    drop-shadow(0 0 10px rgba(39,118,44,.22))!important;
}

html[data-theme="nature"] #footerContactGradient stop:nth-child(1){
  stop-color:#245d2a!important;
}

html[data-theme="nature"] #footerContactGradient stop:nth-child(2){
  stop-color:#3c8d3d!important;
}

html[data-theme="nature"] #footerContactGradient stop:nth-child(3){
  stop-color:#69c85d!important;
}

html[data-theme="nature"] #footerContactGradient stop:nth-child(4){
  stop-color:#a4e78a!important;
}

html[data-theme="nature"] #footerContactMorphPrimary,
html[data-theme="nature"] #footerContactMorphSecondary{
  stroke:url(#footerContactGradient)!important;
}

html[data-theme="nature"] #footerContactMorphPrimary{
  filter:
    drop-shadow(0 0 2px rgba(105,200,93,.48))
    drop-shadow(0 0 8px rgba(39,118,44,.2))!important;
}

html[data-theme="nature"] #footerContactMorphSecondary{
  filter:
    drop-shadow(0 0 2px rgba(140,220,118,.38))
    drop-shadow(0 0 7px rgba(46,132,50,.16))!important;
}

html[data-theme="nature"] .footer-cta-link:is(:hover,:focus-visible) .footer-contact-morph{
  filter:
    drop-shadow(0 0 4px rgba(118,214,103,.58))
    drop-shadow(0 0 13px rgba(43,129,48,.28))!important;
}


/* =========================================================
   v2.139 — BASIC INACTIVE DARK/LIGHT SWITCH
   ========================================================= */

/* Nature and Studio must present the exact same inactive control:
   a plain greyed white-to-black gradient, with no orb, symbols, glow,
   theme tint, or mode-specific styling. */
.theme-toggle.is-deactivated,
html[data-theme="nature"] .theme-toggle.is-deactivated,
html[data-theme="easter"] .theme-toggle.is-deactivated{
  filter:none!important;
  opacity:.82!important;
  box-shadow:none!important;
}

.theme-toggle.is-deactivated .theme-toggle-track,
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-track,
html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-track{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(
    90deg,
    #f1f1ef 0%,
    #d2d2cf 28%,
    #969794 52%,
    #555754 73%,
    #171918 100%
  )!important;
  border:1px solid rgba(181,184,181,.38)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22)!important;
}

/* Remove the movable circle entirely while the switch is inactive. */
.theme-toggle.is-deactivated .theme-toggle-orb,
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-orb,
html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-orb{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  transform:none!important;
  animation:none!important;
  box-shadow:none!important;
  background:none!important;
  border:0!important;
}

/* Remove every remaining generated or nested graphic. */
.theme-toggle.is-deactivated .theme-toggle-track::before,
.theme-toggle.is-deactivated .theme-toggle-track::after,
.theme-toggle.is-deactivated .theme-toggle-orb::before,
.theme-toggle.is-deactivated .theme-toggle-orb::after,
.theme-toggle.is-deactivated .theme-icon,
.theme-toggle.is-deactivated .moon-phase,
.theme-toggle.is-deactivated .moon-disc,
.theme-toggle.is-deactivated .moon-shadow{
  content:none!important;
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* No hover/focus tinting while inactive. */
.theme-toggle.is-deactivated:is(:hover,:focus-visible) .theme-toggle-track,
html[data-theme="nature"] .theme-toggle.is-deactivated:is(:hover,:focus-visible) .theme-toggle-track,
html[data-theme="easter"] .theme-toggle.is-deactivated:is(:hover,:focus-visible) .theme-toggle-track{
  background:linear-gradient(
    90deg,
    #f1f1ef 0%,
    #d2d2cf 28%,
    #969794 52%,
    #555754 73%,
    #171918 100%
  )!important;
  border-color:rgba(181,184,181,.38)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22)!important;
}


/* =========================================================
   v2.140 — SIMPLE INACTIVE DARK / LIGHT CONTROL
   ========================================================= */

/* In Nature and Studio, preserve the normal button shell.
   Show only the sun on the left and moon on the right. */
.theme-toggle.is-deactivated,
html[data-theme="nature"] .theme-toggle.is-deactivated,
html[data-theme="easter"] .theme-toggle.is-deactivated{
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
}

.theme-toggle.is-deactivated .theme-toggle-track,
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-track,
html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-track{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 8px 24px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(14px)!important;
}

/* No movable orb, phase disc, glow or generated decoration. */
.theme-toggle.is-deactivated .theme-toggle-orb,
.theme-toggle.is-deactivated .moon-phase,
.theme-toggle.is-deactivated .moon-disc,
.theme-toggle.is-deactivated .moon-shadow,
html[data-theme="nature"] .theme-toggle.is-deactivated .theme-toggle-orb,
html[data-theme="easter"] .theme-toggle.is-deactivated .theme-toggle-orb{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}

.theme-toggle.is-deactivated .theme-toggle-track::before,
.theme-toggle.is-deactivated .theme-toggle-track::after{
  content:none!important;
  display:none!important;
}

/* Both existing icons remain visible, static and monochrome. */
.theme-toggle.is-deactivated .theme-icon{
  display:block!important;
  visibility:visible!important;
  opacity:.72!important;
  animation:none!important;
  filter:none!important;
}

.theme-toggle.is-deactivated .theme-icon-sun{
  left:7px!important;
  color:#e6e7e4!important;
  transform:translateY(-50%) rotate(0deg) scale(.9)!important;
}

.theme-toggle.is-deactivated .theme-icon-moon{
  right:7px!important;
  color:#f0f1ee!important;
  transform:translateY(-50%) rotate(0deg) scale(.92)!important;
}

.theme-toggle.is-deactivated .theme-icon svg{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.55!important;
}

/* Keep the inactive appearance identical in Nature and Studio,
   including hover and keyboard focus. */
.theme-toggle.is-deactivated:is(:hover,:focus-visible) .theme-toggle-track,
html[data-theme="nature"] .theme-toggle.is-deactivated:is(:hover,:focus-visible) .theme-toggle-track,
html[data-theme="easter"] .theme-toggle.is-deactivated:is(:hover,:focus-visible) .theme-toggle-track{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 8px 24px rgba(0,0,0,.12)!important;
}


/* =========================================================
   v2.141 — UNIFIED FOUR-MODE SELECTOR
   ========================================================= */

.mode-switch-cluster.mode-selector{
  position:absolute!important;
  left:50%!important;
  top:18px!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  display:grid!important;
  grid-template-columns:repeat(4,38px)!important;
  align-items:center!important;
  gap:0!important;
  padding:4px!important;
  border:1px solid rgba(235,239,237,.16)!important;
  border-radius:999px!important;
  background:rgba(5,6,6,.58)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 28px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

.mode-selector .mode-segment{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:32px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  color:rgba(230,234,232,.48)!important;
  border:0!important;
  border-right:1px solid rgba(235,239,237,.085)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  transition:
    color .26s ease,
    background .26s ease,
    opacity .26s ease,
    filter .26s ease!important;
}

.mode-selector .mode-segment:first-child{
  border-radius:999px 0 0 999px!important;
}

.mode-selector .mode-segment:last-child{
  border-right:0!important;
  border-radius:0 999px 999px 0!important;
}

.mode-selector .mode-segment::before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  z-index:-1!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0!important;
  transition:opacity .26s ease,background .26s ease,box-shadow .26s ease!important;
}

.mode-selector .mode-segment:is(:hover,:focus-visible){
  color:rgba(244,247,245,.82)!important;
  outline:none!important;
}

.mode-selector .mode-segment:is(:hover,:focus-visible)::before{
  opacity:1!important;
  background:rgba(255,255,255,.045)!important;
}

.mode-selector .mode-segment[aria-pressed="true"]{
  color:#f5f7f5!important;
}

.mode-selector .mode-segment[aria-pressed="true"]::before{
  opacity:1!important;
  background:rgba(238,241,239,.12)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 0 10px rgba(255,255,255,.055)!important;
}

.mode-selector .mode-segment__icon,
.mode-selector .mode-node__icon{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:.62!important;
  filter:grayscale(1)!important;
  transition:opacity .26s ease,filter .26s ease,transform .26s ease!important;
}

.mode-selector .mode-segment[aria-pressed="true"] :is(.mode-segment__icon,.mode-node__icon){
  opacity:1!important;
  filter:none!important;
}

.mode-selector .mode-segment__icon svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.5!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.mode-selector .mode-node__icon--tree svg{
  width:22px!important;
  height:22px!important;
}

.mode-selector .mode-node__icon--studio{
  overflow:hidden!important;
  border-radius:50%!important;
}

.mode-selector .mode-node__icon--studio img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:scale(1.13)!important;
  opacity:.7!important;
  filter:grayscale(1) contrast(1.7) brightness(1.25)!important;
}

.mode-selector .mode-node--studio[aria-pressed="true"] .mode-node__icon--studio img{
  opacity:1!important;
  transform:scale(1.16)!important;
  filter:
    grayscale(1)
    sepia(1)
    saturate(7)
    hue-rotate(340deg)
    brightness(1.35)
    contrast(2.1)
    drop-shadow(0 0 3px rgba(255,132,35,.58))!important;
}

.mode-selector .mode-node--nature[aria-pressed="true"]{
  color:#75d568!important;
}

.mode-selector .mode-node--nature[aria-pressed="true"]::before{
  background:rgba(83,177,73,.16)!important;
  box-shadow:
    inset 0 0 0 1px rgba(117,213,104,.2),
    0 0 12px rgba(69,156,62,.16)!important;
}

.mode-selector .mode-node--studio[aria-pressed="true"]{
  color:#ff8a25!important;
}

.mode-selector .mode-node--studio[aria-pressed="true"]::before{
  background:rgba(255,124,28,.14)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,145,53,.18),
    0 0 12px rgba(255,106,17,.14)!important;
}

.mode-selector .mode-segment--light[aria-pressed="true"]{
  color:#ffffff!important;
}

.mode-selector .mode-segment--dark[aria-pressed="true"]{
  color:#eef0ee!important;
}

html[data-theme="light"] .mode-switch-cluster.mode-selector{
  border-color:rgba(20,24,22,.16)!important;
  background:rgba(248,248,245,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 24px rgba(0,0,0,.07)!important;
}

html[data-theme="light"] .mode-selector .mode-segment{
  color:rgba(20,24,22,.42)!important;
  border-right-color:rgba(20,24,22,.09)!important;
}

html[data-theme="light"] .mode-selector .mode-segment:is(:hover,:focus-visible){
  color:rgba(20,24,22,.78)!important;
}

html[data-theme="light"] .mode-selector .mode-segment[aria-pressed="true"]{
  color:#111411!important;
}

html[data-theme="light"] .mode-selector .mode-segment[aria-pressed="true"]::before{
  background:rgba(20,24,22,.09)!important;
  box-shadow:inset 0 0 0 1px rgba(20,24,22,.08)!important;
}

/* Keep the brand readable while reserving room for the centered selector. */
@media(max-width:1080px){
  .nav .brand span{
    font-size:clamp(.66rem,1.15vw,.82rem)!important;
    letter-spacing:.075em!important;
  }
}

@media(max-width:760px){
  .mode-switch-cluster.mode-selector{
    top:14px!important;
    grid-template-columns:repeat(4,34px)!important;
    padding:3px!important;
  }

  .mode-selector .mode-segment{
    width:34px!important;
    height:30px!important;
  }

  .mode-selector .mode-segment__icon,
  .mode-selector .mode-node__icon{
    width:20px!important;
    height:20px!important;
  }

  .nav .brand span{
    font-size:.62rem!important;
    letter-spacing:.06em!important;
  }
}

@media(max-width:560px){
  .nav{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  .mode-switch-cluster.mode-selector{
    left:50%!important;
    top:12px!important;
    grid-template-columns:repeat(4,31px)!important;
  }

  .mode-selector .mode-segment{
    width:31px!important;
    height:28px!important;
  }

  .mode-selector .mode-segment__icon,
  .mode-selector .mode-node__icon{
    width:18px!important;
    height:18px!important;
  }

  .mode-selector .mode-segment__icon svg{
    width:15px!important;
    height:15px!important;
  }

  .nav .brand span{
    max-width:74px!important;
    font-size:.54rem!important;
    line-height:1.1!important;
  }

  .nav-contact > span:last-child{
    display:none!important;
  }
}

@media(max-width:390px){
  .nav .brand span{
    display:none!important;
  }

  .mode-switch-cluster.mode-selector{
    grid-template-columns:repeat(4,29px)!important;
  }

  .mode-selector .mode-segment{
    width:29px!important;
  }
}


/* =========================================================
   v2.142 — MOBILE VIDEO ACCESS + CLEARER NATURE TREE
   ========================================================= */

/* Make the Nature symbol read immediately as a tree at compact sizes:
   canopy remains above; trunk is wider, lower and visibly separated. */
.mode-selector .mode-node__icon--tree{
  width:24px!important;
  height:24px!important;
}

.mode-selector .mode-node__icon--tree svg{
  width:24px!important;
  height:24px!important;
  overflow:visible!important;
}

.mode-selector .mode-node__icon--tree .tree-trunk{
  fill:#7d7169!important;
  stroke:rgba(20,22,20,.18)!important;
  stroke-width:.45!important;
}

.mode-selector .mode-node__icon--tree .tree-branch{
  stroke:#71665f!important;
  stroke-width:1.8!important;
}

.mode-selector .mode-node--nature[aria-pressed="true"] .tree-trunk{
  fill:#8d5d32!important;
  stroke:#5f3b22!important;
  stroke-width:.55!important;
}

.mode-selector .mode-node--nature[aria-pressed="true"] .tree-branch{
  stroke:#724526!important;
  stroke-width:1.9!important;
}

.mode-selector .mode-node--nature[aria-pressed="true"] .tree-crown{
  filter:drop-shadow(0 0 2px rgba(91,190,78,.28));
}

@media(max-width:560px){
  .mode-selector .mode-node__icon--tree,
  .mode-selector .mode-node__icon--tree svg{
    width:21px!important;
    height:21px!important;
  }
}


/* =========================================================
   v2.147 — EXPLICIT PORTFOLIO INDEX + NATURE LABEL REFINEMENT
   ========================================================= */

/* Use stable DOM indices instead of CSS counters. Style containment on each
   project caused the counter to restart, which displayed OTH -1 repeatedly. */
.project::before,
.project--main-teaser::before{
  content:"OTH -" attr(data-oth-index) " / " attr(data-category)!important;
}

/* Nature mode: labels remain part of the interface typography rather than
   appearing as separate pale-green panels. Contrast comes from type treatment,
   not filled rectangles. */
html[data-theme="nature"] .portfolio-band__identity h2,
html[data-theme="nature"] .project::before,
html[data-theme="nature"] .project-featured-badge,
html[data-theme="nature"] .project-featured-scope,
html[data-theme="nature"] .main-teaser-preview__badge,
html[data-theme="nature"] .main-teaser-preview__scope{
  color:rgba(224,242,228,.94)!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:
    0 1px 2px rgba(0,8,3,.96),
    0 0 7px rgba(0,8,3,.72)!important;
}

html[data-theme="nature"] .portfolio-band__identity h2{
  border-color:rgba(183,225,193,.24)!important;
}

html[data-theme="nature"] .portfolio-band__identity h2 small{
  border-left-color:rgba(205,237,213,.28)!important;
}

html[data-theme="nature"] .project::before{
  border-left-color:rgba(154,218,169,.62)!important;
  border-right-color:rgba(154,218,169,.16)!important;
}

html[data-theme="nature"] .main-teaser-preview__badge{
  border-left-color:#69c85d!important;
}

html[data-theme="nature"] .main-teaser-preview__scope{
  border-right-color:rgba(196,232,204,.42)!important;
}


/* =========================================================
   v2.148 — CONSISTENT MAIN-TEASER LABELS
   ========================================================= */

/* MAIN TEASER: identical in every theme.
   Dark lo-fi plate, white type, restrained analogue texture. */
.main-teaser-preview__badge,
html[data-theme="dark"] .main-teaser-preview__badge,
html[data-theme="light"] .main-teaser-preview__badge,
html[data-theme="nature"] .main-teaser-preview__badge,
html[data-theme="easter"] .main-teaser-preview__badge{
  color:rgba(248,248,244,.96)!important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.022) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      180deg,
      rgba(35,36,35,.98),
      rgba(7,8,8,.98)
    )!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-left:2px solid rgba(255,255,255,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 3px 10px rgba(0,0,0,.38)!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 0 3px rgba(255,255,255,.12)!important;
  -webkit-font-smoothing:none!important;
  font-smooth:never!important;
}

.main-teaser-preview__badge::before,
html[data-theme="dark"] .main-teaser-preview__badge::before,
html[data-theme="light"] .main-teaser-preview__badge::before,
html[data-theme="nature"] .main-teaser-preview__badge::before,
html[data-theme="easter"] .main-teaser-preview__badge::before{
  background:rgba(245,245,240,.92)!important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    0 0 5px rgba(255,255,255,.32)!important;
}

/* AFTER EFFECTS ANIMATION in Nature mode:
   no pale-green field; retain only readable interface type. */
html[data-theme="nature"] .main-teaser-preview__scope{
  color:rgba(229,239,230,.88)!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid rgba(199,226,202,.42)!important;
  box-shadow:none!important;
  text-shadow:
    0 1px 2px rgba(0,7,2,.98),
    0 0 6px rgba(0,7,2,.76)!important;
}


/* =========================================================
   v2.149 — PORTFOLIO HEADER CONTRAST + LIGHT GRID
   ========================================================= */

/* SELECTED WORK / 01—09:
   replace the stark maximum-white plate with a quieter charcoal interface tag.
   The treatment stays consistent and readable in every mode. */
.portfolio-band__identity h2,
html[data-theme="dark"] .portfolio-band__identity h2,
html[data-theme="light"] .portfolio-band__identity h2,
html[data-theme="nature"] .portfolio-band__identity h2,
html[data-theme="easter"] .portfolio-band__identity h2{
  color:rgba(232,235,232,.9)!important;
  background:
    linear-gradient(
      180deg,
      rgba(38,41,39,.92),
      rgba(14,16,15,.94)
    )!important;
  border:1px solid rgba(232,235,232,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 3px 10px rgba(0,0,0,.18)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.72)!important;
}

.portfolio-band__identity h2 span{
  color:rgba(240,242,239,.92)!important;
}

.portfolio-band__identity h2 small,
html[data-theme="dark"] .portfolio-band__identity h2 small,
html[data-theme="light"] .portfolio-band__identity h2 small,
html[data-theme="nature"] .portfolio-band__identity h2 small,
html[data-theme="easter"] .portfolio-band__identity h2 small{
  color:rgba(202,207,203,.74)!important;
  border-left-color:rgba(229,233,230,.2)!important;
  opacity:1!important;
}

/* Light mode:
   retain the light-page context but give the technical archive grid a clearly
   visible dark-grey structure instead of an almost-white background pattern. */
html[data-theme="light"] .portfolio-band{
  --band-line:rgba(22,26,24,.34)!important;
  --band-line-strong:rgba(12,15,14,.78)!important;
  --band-grid-major:rgba(17,20,19,.17)!important;
  --band-grid-minor:rgba(17,20,19,.065)!important;
  --band-panel:rgba(225,227,223,.94)!important;
  --band-muted:rgba(24,28,26,.66)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 10px 34px rgba(35,39,36,.055)!important;
}

html[data-theme="light"] .portfolio-band::before{
  background:
    linear-gradient(
      90deg,
      rgba(225,227,223,.98),
      transparent 6%,
      transparent 94%,
      rgba(225,227,223,.98)
    )!important;
}

html[data-theme="light"] .portfolio-band__header{
  border-bottom-color:rgba(18,22,20,.15)!important;
}

html[data-theme="light"] .portfolio-band__footer{
  border-top-color:rgba(18,22,20,.13)!important;
}

html[data-theme="light"] .portfolio-band__identity{
  border-color:rgba(18,22,20,.2)!important;
  background:rgba(205,208,203,.52)!important;
}

html[data-theme="light"] .portfolio-band__identity::after{
  background:rgba(18,22,20,.34)!important;
}


/* =========================================================
   v2.152 — HARD LOCK: NATURE LABELS + MAIN TEASER UI
   ========================================================= */

/* Nature portfolio labels:
   typography only — never a pale green filled field. */
html[data-theme="nature"] .project::before,
html[data-theme="nature"] .project-featured-badge,
html[data-theme="nature"] .project-featured-scope{
  color:rgba(226,239,228,.94)!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  text-shadow:
    0 1px 2px rgba(0,7,2,.98),
    0 0 7px rgba(0,7,2,.74)!important;
}

html[data-theme="nature"] .project::before{
  border-left:1px solid rgba(159,214,165,.62)!important;
  border-right:1px solid rgba(159,214,165,.18)!important;
}

/* AFTER EFFECTS ANIMATION:
   transparent in Nature mode, readable without a separate field. */
html[data-theme="nature"] .main-teaser-preview__scope{
  color:rgba(232,240,232,.91)!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-right:1px solid rgba(202,225,204,.42)!important;
  box-shadow:none!important;
  text-shadow:
    0 1px 2px rgba(0,6,2,.98),
    0 0 7px rgba(0,6,2,.8)!important;
}

/* MAIN TEASER:
   one identical, theme-independent lo-fi black/charcoal plate. */
.main-teaser-preview__badge,
html[data-theme="dark"] .main-teaser-preview__badge,
html[data-theme="light"] .main-teaser-preview__badge,
html[data-theme="nature"] .main-teaser-preview__badge,
html[data-theme="easter"] .main-teaser-preview__badge{
  color:rgba(248,248,244,.97)!important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.024) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      180deg,
      rgba(38,39,38,.98),
      rgba(6,7,7,.99)
    )!important;
  border:1px solid rgba(255,255,255,.19)!important;
  border-left:2px solid rgba(255,255,255,.76)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 3px 11px rgba(0,0,0,.42)!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.92),
    0 0 3px rgba(255,255,255,.12)!important;
}

.main-teaser-preview__badge::before,
html[data-theme="dark"] .main-teaser-preview__badge::before,
html[data-theme="light"] .main-teaser-preview__badge::before,
html[data-theme="nature"] .main-teaser-preview__badge::before,
html[data-theme="easter"] .main-teaser-preview__badge::before{
  background:rgba(246,246,241,.93)!important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 0 5px rgba(255,255,255,.3)!important;
}




/* =========================================================
   v2.155 — REMOVE MOBILE TAP OVERLAY COMPLETELY
   ========================================================= */

@media (hover:none), (pointer:coarse){
  .portfolio-band .media::after,
  .portfolio-band .project .media::after{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }

  .portfolio-band .media,
  .portfolio-band .project .media{
    -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
    -webkit-touch-callout:none!important;
    outline:none!important;
  }

  .portfolio-band .media:focus,
  .portfolio-band .media:focus-visible,
  .portfolio-band .media:active{
    outline:none!important;
    filter:none!important;
  }

  .portfolio-band .media > img,
  .portfolio-band .media > video{
    opacity:1!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    -webkit-backface-visibility:hidden!important;
    backface-visibility:hidden!important;
    transform:translateZ(0)!important;
  }
}

/* iOS/WebKit fallback where hover/pointer media queries may be unreliable. */
@supports (-webkit-touch-callout:none){
  @media(max-width:1024px){
    .portfolio-band .media::after{
      content:none!important;
      display:none!important;
      visibility:hidden!important;
      opacity:0!important;
      background:none!important;
    }

    .portfolio-band .media{
      -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
    }
  }
}


/* =========================================================
   v2.156 — TWO INDEPENDENT PORTFOLIO ROWS
   ========================================================= */

.portfolio-band{
  --band-card-height-secondary:clamp(136px,13.7vw,188px);
}

.portfolio-band__rows{
  position:relative;
  z-index:2;
  display:grid;
  gap:0;
}

.portfolio-row{
  position:relative;
  min-width:0;
  padding-block:7px 10px;
}

.portfolio-row + .portfolio-row{
  padding-top:11px;
  border-top:1px solid rgba(235,239,237,.1);
}

.portfolio-row__toolbar{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:28px;
  padding-inline:clamp(17px,2.7vw,40px);
  color:var(--band-muted);
}

.portfolio-row__label{
  overflow:hidden;
  font:400 6.5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.13em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.portfolio-row__controls{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.portfolio-row__controls .portfolio-band__button{
  width:27px;
  height:23px;
}

.portfolio-row__viewport{
  min-width:0;
}

.portfolio-row .gallery{
  padding-top:28px!important;
  padding-bottom:25px!important;
}

.portfolio-row--primary .project{
  height:var(--band-card-height)!important;
}

.portfolio-row--secondary .project{
  height:var(--band-card-height-secondary)!important;
}

.portfolio-row__progress{
  position:relative;
  z-index:4;
  width:calc(100% - clamp(34px,5.4vw,80px));
  height:1px;
  margin:0 auto;
  overflow:hidden;
  background:rgba(235,239,237,.1);
}

.portfolio-row__progress i{
  display:block;
  width:100%;
  height:100%;
  background:rgba(235,239,237,.67);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .12s linear;
}

/* Explicit indices keep OTH numbering continuous across both tracks. */
.portfolio-row .gallery{
  counter-reset:none!important;
}

.portfolio-row .project::before{
  counter-increment:none!important;
  content:"OTH -" attr(data-oth-index) " / " attr(data-category)!important;
}

html[data-theme="light"] .portfolio-row + .portfolio-row{
  border-top-color:rgba(18,22,20,.14);
}

html[data-theme="light"] .portfolio-row__progress{
  background:rgba(18,22,20,.13);
}

html[data-theme="light"] .portfolio-row__progress i{
  background:rgba(18,22,20,.62);
}

html[data-theme="nature"] .portfolio-row + .portfolio-row{
  border-top-color:rgba(125,188,132,.15);
}

html[data-theme="nature"] .portfolio-row__progress{
  background:rgba(126,184,132,.13);
}

html[data-theme="nature"] .portfolio-row__progress i{
  background:rgba(153,210,159,.58);
}

@media(max-width:900px){
  .portfolio-band{
    --band-card-height-secondary:clamp(124px,18.5vw,162px);
  }
}

@media(max-width:680px){
  .portfolio-band{
    --band-card-height-secondary:126px;
  }

  .portfolio-band__header{
    padding-bottom:8px;
  }

  .portfolio-row{
    padding-block:5px 8px;
  }

  .portfolio-row + .portfolio-row{
    padding-top:9px;
  }

  .portfolio-row__toolbar{
    min-height:26px;
    padding-inline:14px;
  }

  .portfolio-row__label{
    font-size:6px;
    letter-spacing:.1em;
  }

  .portfolio-row__controls .portfolio-band__button{
    width:29px;
    height:25px;
  }

  .portfolio-row .gallery{
    gap:20px!important;
    padding:26px 22px 23px!important;
  }

  .portfolio-row__progress{
    width:calc(100% - 28px);
  }
}

@media(max-width:420px){
  .portfolio-row__label{
    max-width:58vw;
  }
}


/* =========================================================
   v2.157 — COMPACT TWO-ROW PORTFOLIO SPACING
   ========================================================= */

.portfolio-band__rows{
  gap:0!important;
}

.portfolio-row{
  padding-block:3px 4px!important;
}

.portfolio-row + .portfolio-row{
  margin-top:0!important;
  padding-top:3px!important;
  border-top-color:rgba(235,239,237,.085)!important;
}

.portfolio-row__toolbar{
  min-height:22px!important;
  padding-block:0!important;
}

.portfolio-row .gallery{
  padding-top:23px!important;
  padding-bottom:18px!important;
}

.portfolio-row__progress{
  margin-top:-2px!important;
  margin-bottom:0!important;
}

.portfolio-row--secondary .portfolio-row__toolbar{
  margin-top:0!important;
}

/* Keep the two tracks visually grouped while retaining a clear divider. */
.portfolio-row--primary{
  padding-bottom:1px!important;
}

.portfolio-row--secondary{
  padding-top:2px!important;
}

/* Tablet */
@media(max-width:900px){
  .portfolio-row{
    padding-block:2px 3px!important;
  }

  .portfolio-row + .portfolio-row{
    padding-top:2px!important;
  }

  .portfolio-row__toolbar{
    min-height:21px!important;
  }

  .portfolio-row .gallery{
    padding-top:21px!important;
    padding-bottom:16px!important;
  }

  .portfolio-row__progress{
    margin-top:-3px!important;
  }
}

/* Mobile */
@media(max-width:680px){
  .portfolio-row{
    padding-block:1px 2px!important;
  }

  .portfolio-row + .portfolio-row{
    padding-top:1px!important;
    border-top-color:rgba(235,239,237,.075)!important;
  }

  .portfolio-row__toolbar{
    min-height:20px!important;
    padding-inline:14px!important;
  }

  .portfolio-row .gallery{
    padding-top:20px!important;
    padding-bottom:14px!important;
  }

  .portfolio-row__progress{
    margin-top:-3px!important;
  }
}

/* Very narrow phones */
@media(max-width:420px){
  .portfolio-row__toolbar{
    min-height:19px!important;
  }

  .portfolio-row .gallery{
    padding-top:19px!important;
    padding-bottom:13px!important;
  }
}

/* Theme-aware divider remains subtle in every mode. */
html[data-theme="light"] .portfolio-row + .portfolio-row{
  border-top-color:rgba(18,22,20,.11)!important;
}

html[data-theme="nature"] .portfolio-row + .portfolio-row{
  border-top-color:rgba(125,188,132,.11)!important;
}

html[data-theme="easter"] .portfolio-row + .portfolio-row{
  border-top-color:rgba(255,132,35,.11)!important;
}



/* =========================================================
   v2.159 — SIGNAL LANDSCAPE + RESPONSIVE HERO FLOW
   ========================================================= */

.heezy{
  min-height:auto!important;
  justify-content:flex-start!important;
  padding-top:clamp(108px,10vw,150px)!important;
  padding-bottom:clamp(34px,4.7vw,70px)!important;
}

.heezy-copy{width:100%}

.heezy-footer{
  margin-top:clamp(24px,3vw,42px)!important;
  padding-top:0!important;
}

.signal-landscape{
  --landscape-ink:232,235,232;
  --landscape-muted:130,137,133;
  --landscape-accent:239,100,18;
  position:relative;
  width:min(100%,1180px);
  margin:clamp(20px,3vw,38px) auto 0;
  color:rgba(var(--landscape-ink),.86);
  isolation:isolate;
}

.signal-landscape__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:0 9px 8px;
  border-bottom:1px solid rgba(var(--landscape-ink),.11);
}

.signal-landscape__eyebrow,
.signal-landscape__readout{
  display:block;
  font:500 6.5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.signal-landscape__eyebrow{color:rgba(var(--landscape-muted),.78)}

.signal-landscape__header h2{
  margin-top:6px;
  max-width:38ch;
  color:rgba(var(--landscape-ink),.72);
  font:400 clamp(.65rem,.82vw,.82rem)/1.35 Manrope,sans-serif;
  letter-spacing:.015em;
}

.signal-landscape__readout{
  max-width:44%;
  overflow:hidden;
  color:rgba(var(--landscape-accent),.82);
  font-variant-numeric:tabular-nums;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.signal-landscape__visual{
  position:relative;
  height:clamp(148px,14vw,210px);
  overflow:hidden;
  touch-action:manipulation;
  background:
    linear-gradient(90deg,transparent,rgba(var(--landscape-ink),.025) 50%,transparent),
    repeating-linear-gradient(90deg,rgba(var(--landscape-ink),.025) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(var(--landscape-ink),.018) 0 1px,transparent 1px 36px);
  border-bottom:1px solid rgba(var(--landscape-ink),.1);
}

.signal-landscape__visual::before,
.signal-landscape__visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.signal-landscape__visual::before{
  opacity:.26;
  background:repeating-linear-gradient(0deg,rgba(var(--landscape-ink),.022) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;
}

.signal-landscape__visual::after{
  background:linear-gradient(90deg,rgba(0,0,0,.13),transparent 8%,transparent 92%,rgba(0,0,0,.13));
}

#signalLandscapeCanvas{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
}

.signal-landscape__nodes{
  position:absolute;
  inset:16px 19px 25px;
  z-index:4;
  pointer-events:none;
}

.signal-node{
  position:absolute;
  left:var(--node-x);
  top:var(--node-y);
  width:13px;
  height:13px;
  padding:0;
  transform:translate(-50%,-50%);
  color:rgba(var(--landscape-ink),.68);
  border:1px solid rgba(var(--landscape-ink),.38);
  border-radius:50%;
  background:rgba(4,5,5,.82);
  box-shadow:0 0 0 3px rgba(0,0,0,.12),0 0 10px rgba(var(--landscape-ink),.035);
  cursor:pointer;
  pointer-events:auto;
  transition:color .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s var(--ease);
}

.signal-node::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:3px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:currentColor;
}

.signal-node span{
  position:absolute;
  left:50%;
  top:calc(100% + 6px);
  transform:translateX(-50%);
  color:rgba(var(--landscape-muted),.78);
  font:500 5.5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
  pointer-events:none;
}

.signal-node:is(:hover,:focus-visible),
.signal-node.is-active{
  color:rgba(var(--landscape-accent),.98);
  border-color:rgba(var(--landscape-accent),.84);
  background:rgba(12,8,5,.94);
  box-shadow:0 0 0 3px rgba(var(--landscape-accent),.08),0 0 14px rgba(var(--landscape-accent),.24);
  transform:translate(-50%,-50%) scale(1.18);
  outline:none;
}

.signal-node:is(:hover,:focus-visible) span,
.signal-node.is-active span{color:rgba(var(--landscape-ink),.92)}

.signal-landscape__legend{
  position:absolute;
  left:9px;
  right:9px;
  bottom:7px;
  z-index:5;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  color:rgba(var(--landscape-muted),.62);
  font:500 5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
  pointer-events:none;
}

.signal-landscape__legend span:nth-child(2){
  justify-self:center;
  color:rgba(var(--landscape-accent),.68);
}

.signal-landscape__legend span:last-child{justify-self:end}

.project.is-signal-target .media{
  box-shadow:0 0 0 1px rgba(239,100,18,.66),0 0 24px rgba(239,100,18,.16)!important;
}

html[data-theme="light"] .signal-landscape{
  --landscape-ink:26,30,27;
  --landscape-muted:72,78,74;
  --landscape-accent:201,69,13;
}

html[data-theme="light"] .signal-landscape__visual::before{mix-blend-mode:multiply}

html[data-theme="light"] .signal-node{
  background:rgba(231,232,228,.94);
  box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 9px rgba(30,35,31,.045);
}

html[data-theme="nature"] .signal-landscape{
  --landscape-ink:205,229,207;
  --landscape-muted:118,165,125;
  --landscape-accent:91,190,99;
}

html[data-theme="easter"] .signal-landscape{
  --landscape-ink:239,226,217;
  --landscape-muted:174,145,126;
  --landscape-accent:255,126,27;
}

/* Nature mode: organic brown roots with repeated growth. */
html[data-theme="nature"] .heezy-root-visual .root-branch{
  stroke:#89552f!important;
  stroke-dasharray:var(--root-length)!important;
  filter:drop-shadow(0 0 1px rgba(121,74,39,.58)) drop-shadow(0 0 5px rgba(68,40,22,.16))!important;
  animation:natureRootGrowth 9.6s cubic-bezier(.42,0,.2,1) var(--root-delay,0s) infinite!important;
}

html[data-theme="nature"] .heezy-root-visual .root-branch.fine,
html[data-theme="nature"] .heezy-root-visual .root-branch.root-tendril{
  stroke:#a46b3e!important;
  opacity:.74!important;
}

html[data-theme="nature"] .heezy-root-visual .root-branch.digital{
  stroke:#6f4227!important;
  opacity:.68!important;
}

html[data-theme="nature"] .heezy-root-visual .root-node{
  fill:#122317!important;
  stroke:#a66d40!important;
}

html[data-theme="nature"] .heezy-root-visual .root-node-core,
html[data-theme="nature"] .heezy-root-visual .root-tip{
  fill:#b37845!important;
}

@keyframes natureRootGrowth{
  0%,7%{stroke-dashoffset:var(--root-length);opacity:.16}
  42%{stroke-dashoffset:0;opacity:.96}
  76%{stroke-dashoffset:0;opacity:.82}
  100%{stroke-dashoffset:var(--root-length);opacity:.12}
}

html[data-theme="nature"] .footer-individuality{
  color:#a66a3c!important;
  text-shadow:0 1px 0 rgba(33,17,8,.7),0 0 8px rgba(125,75,40,.12)!important;
}

@media(max-width:1100px){
  .heezy{padding-top:clamp(104px,12vw,132px)!important}
  .signal-landscape{margin-top:clamp(18px,3vw,30px)}
}

@media(max-width:680px){
  .heezy{
    min-height:auto!important;
    padding-top:112px!important;
    padding-bottom:32px!important;
  }

  .signal-landscape{
    width:100%;
    margin-top:22px;
  }

  .signal-landscape__header{
    align-items:flex-start;
    gap:12px;
    padding-inline:4px;
  }

  .signal-landscape__header h2{
    max-width:26ch;
    font-size:.62rem;
  }

  .signal-landscape__readout{
    max-width:42%;
    padding-top:1px;
    font-size:5px;
    letter-spacing:.1em;
  }

  .signal-landscape__visual{height:142px}
  .signal-landscape__nodes{inset:14px 10px 24px}

  .signal-node{
    width:12px;
    height:12px;
  }

  .signal-node span{
    top:calc(100% + 5px);
    font-size:4.7px;
  }

  .heezy-footer{margin-top:25px!important}
}

@media(max-width:420px){
  .signal-landscape__eyebrow{
    font-size:5.5px;
    letter-spacing:.1em;
  }

  .signal-landscape__header h2{display:none}
  .signal-landscape__visual{height:132px}
  .signal-node span{display:none}
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="nature"] .heezy-root-visual .root-branch{
    animation:none!important;
    stroke-dashoffset:0!important;
    opacity:.82!important;
  }

  .signal-node,
  .project.is-signal-target .media{
    transition:none!important;
  }
}


/* =========================================================
   v2.160 — XY WAVEFORM MORPH / DISTORTION FIELD
   ========================================================= */

.signal-landscape__readouts{
  display:grid;
  justify-items:end;
  gap:5px;
  min-width:min(48%,430px);
}

.signal-landscape__readout{
  max-width:100%;
  color:rgba(var(--landscape-accent),.9)!important;
  font-variant-numeric:tabular-nums;
}

.signal-landscape__project-readout{
  max-width:100%;
  overflow:hidden;
  color:rgba(var(--landscape-muted),.75);
  font:500 5.5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.11em;
  text-align:right;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.signal-landscape__visual{
  cursor:crosshair;
  outline:none;
}

.signal-landscape__visual:focus-visible{
  box-shadow:
    inset 0 0 0 1px rgba(var(--landscape-accent),.35),
    inset 0 0 24px rgba(var(--landscape-accent),.025);
}

.signal-landscape__x-axis{
  position:absolute;
  left:9px;
  right:9px;
  bottom:7px;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  color:rgba(var(--landscape-muted),.66);
  font:500 5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
}

.signal-landscape__x-axis span:nth-child(2),
.signal-landscape__x-axis span:nth-child(3){
  justify-self:center;
}

.signal-landscape__x-axis span:last-child{
  justify-self:end;
}

.signal-landscape__y-axis{
  position:absolute;
  top:8px;
  right:8px;
  bottom:23px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  color:rgba(var(--landscape-muted),.58);
  font:500 4.8px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.08em;
  text-align:right;
  text-transform:uppercase;
  pointer-events:none;
}

.signal-landscape__nodes{
  inset:17px 34px 28px 19px!important;
}

/* Keep node labels readable above the new X-axis notation. */
.signal-node span{
  top:calc(100% + 5px)!important;
}

@media(max-width:680px){
  .signal-landscape__header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  }

  .signal-landscape__readouts{
    min-width:0;
    gap:4px;
  }

  .signal-landscape__readout{
    max-width:100%!important;
    font-size:5px!important;
    letter-spacing:.075em!important;
  }

  .signal-landscape__project-readout{
    font-size:4.8px;
    letter-spacing:.075em;
  }

  .signal-landscape__nodes{
    inset:15px 30px 27px 10px!important;
  }

  .signal-landscape__x-axis{
    font-size:4.4px;
    letter-spacing:.05em;
  }

  .signal-landscape__y-axis{
    right:5px;
    font-size:4.2px;
    letter-spacing:.035em;
  }
}

@media(max-width:420px){
  .signal-landscape__header{
    grid-template-columns:1fr;
  }

  .signal-landscape__readouts{
    justify-items:start;
    width:100%;
  }

  .signal-landscape__readout,
  .signal-landscape__project-readout{
    text-align:left;
  }

  .signal-landscape__x-axis{
    grid-template-columns:1fr 1fr;
    row-gap:3px;
  }

  .signal-landscape__x-axis span:nth-child(2),
  .signal-landscape__x-axis span:nth-child(3){
    display:none;
  }

  .signal-landscape__x-axis span:last-child{
    grid-column:2;
  }

  .signal-landscape__y-axis span{
    max-width:68px;
  }
}


/* =========================================================
   v2.161 — HIGH-DENSITY Y DRIVE + CONNECTED PROJECT OVERLAY
   ========================================================= */

body{
  position:relative;
}

.signal-project-preview{
  position:absolute;
  z-index:19;
  width:clamp(174px,18vw,246px);
  padding:7px;
  color:#f1f2ef;
  background:#050606;
  border:1px solid rgba(244,246,243,.2);
  border-left:2px solid rgba(239,100,18,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 14px 34px rgba(0,0,0,.48);
  opacity:0;
  visibility:hidden;
  transform:translateY(5px) scale(.985);
  transform-origin:50% 50%;
  pointer-events:none;
  transition:
    opacity .18s ease,
    visibility 0s linear .18s,
    transform .24s var(--ease);
}

.signal-project-preview.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition-delay:0s;
  animation:signalPreviewBorderArrival .72s cubic-bezier(.2,.64,.24,1) 1;
}

.signal-project-preview::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.24;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 4px
    );
  mix-blend-mode:screen;
}

.signal-project-preview__close{
  position:absolute;
  top:5px;
  right:5px;
  z-index:5;
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  padding:0;
  color:rgba(245,246,243,.78);
  border:1px solid rgba(245,246,243,.17);
  background:#090a0a;
  cursor:pointer;
}

.signal-project-preview__close:is(:hover,:focus-visible){
  color:#fff;
  border-color:rgba(239,100,18,.64);
  outline:none;
}

.signal-project-preview__media{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,.09);
}

.signal-project-preview__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:1!important;
  background:#000;
}

.signal-project-preview__meta{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 8px;
  align-items:baseline;
  padding:7px 2px 1px;
}

.signal-project-preview__index,
.signal-project-preview__category{
  color:rgba(220,223,219,.58);
  font:500 5.5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.signal-project-preview__title{
  min-width:0;
  overflow:hidden;
  color:rgba(247,248,245,.94);
  font:500 7px/1.15 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.055em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.signal-project-preview__category{
  grid-column:1 / -1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.signal-connector-layer{
  --signal-connector:#cf4e0d;
  position:absolute;
  left:0;
  top:0;
  z-index:18;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .16s ease,
    visibility 0s linear .16s;
}

.signal-connector-layer.is-visible{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

.signal-connector-path{
  fill:none;
  stroke:var(--signal-connector);
  stroke-width:1;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:8 5 2 5;
  filter:drop-shadow(0 0 2px rgba(197,66,7,.2));
}

.signal-connector-path--preview{
  opacity:.78;
}

.signal-connector-path--portfolio{
  opacity:.42;
  stroke-dasharray:5 7 1 7;
}

.signal-connector-layer.is-visible .signal-connector-path{
  animation:signalConnectorFlow 1.15s linear infinite;
}

.signal-connector-node{
  fill:#df6518;
  opacity:.8;
  filter:drop-shadow(0 0 3px rgba(179,49,4,.2));
}

.signal-connector-node--portfolio{
  opacity:.56;
}

.signal-portfolio-beacon{
  position:absolute;
  z-index:19;
  padding:5px 7px 4px;
  color:rgba(243,244,241,.86);
  background:#080909;
  border:1px solid rgba(239,100,18,.22);
  font:500 5.5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-50%) scale(.96);
  pointer-events:none;
  transition:opacity .16s ease,transform .2s var(--ease);
}

.signal-portfolio-beacon.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

.project.is-signal-linked .media{
  box-shadow:
    0 0 0 1px rgba(239,100,18,.72),
    0 0 25px rgba(239,100,18,.18)!important;
}

@keyframes signalConnectorFlow{
  to{stroke-dashoffset:-20}
}

@keyframes signalPreviewBorderArrival{
  0%{
    border-color:rgba(196,72,12,.08);
    box-shadow:0 10px 25px rgba(0,0,0,.36);
  }
  30%{
    border-color:rgba(255,169,82,.7);
    box-shadow:
      inset 0 0 0 1px rgba(239,100,18,.13),
      0 0 13px rgba(239,100,18,.25),
      0 14px 34px rgba(0,0,0,.48);
  }
  100%{
    border-color:rgba(244,246,243,.2);
    border-left-color:rgba(239,100,18,.74);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -1px 0 rgba(0,0,0,.72),
      0 14px 34px rgba(0,0,0,.48);
  }
}

@media(max-width:680px){
  .signal-project-preview{
    width:min(168px,54vw);
    padding:6px;
  }

  .signal-project-preview__close{
    width:20px;
    height:20px;
  }

  .signal-project-preview__title{
    font-size:6.3px;
  }

  .signal-project-preview__index,
  .signal-project-preview__category{
    font-size:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .signal-project-preview,
  .signal-portfolio-beacon,
  .signal-connector-layer{
    transition:none!important;
  }

  .signal-project-preview.is-visible,
  .signal-connector-layer.is-visible .signal-connector-path{
    animation:none!important;
  }

  .signal-connector-path{
    stroke-dasharray:5 5;
  }
}


/* =========================================================
   v2.163 — PROFESSIONAL MOBILE XY PAD + CONNECTED PREVIEW
   ========================================================= */

.signal-landscape__visual{
  touch-action:none!important;
  overscroll-behavior:contain!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
  cursor:crosshair!important;
}

.signal-landscape__visual.is-xy-dragging{
  cursor:grabbing!important;
}

.signal-landscape__visual,
.signal-landscape__visual *{
  -webkit-tap-highlight-color:transparent!important;
}

.signal-project-preview{
  z-index:86!important;
}

.signal-project-preview__media{
  cursor:pointer!important;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s var(--ease)!important;
}

.signal-project-preview__media::after{
  content:"OPEN PROJECT";
  position:absolute;
  right:7px;
  bottom:7px;
  z-index:4;
  padding:5px 7px 4px;
  color:rgba(248,248,244,.92);
  background:#080909;
  border:1px solid rgba(255,255,255,.18);
  border-left:2px solid rgba(239,100,18,.72);
  font:600 5px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:.78;
  pointer-events:none;
}

.signal-project-preview__media:is(:hover,:focus-visible){
  border-color:rgba(255,144,62,.62)!important;
  box-shadow:
    inset 0 0 0 1px rgba(239,100,18,.14),
    0 0 15px rgba(239,100,18,.15)!important;
  outline:none!important;
}

.signal-project-preview__media:is(:hover,:focus-visible)::after{
  opacity:1;
}

.signal-connector-layer{
  --signal-connector:#ff6815!important;
  z-index:85!important;
}

.signal-connector-path{
  vector-effect:non-scaling-stroke;
}

.signal-connector-path--glow{
  fill:none;
  stroke:#ff5b0b;
  stroke-width:7px;
  stroke-linecap:square;
  stroke-linejoin:miter;
  opacity:.2;
  filter:
    blur(1.2px)
    drop-shadow(0 0 7px rgba(255,86,10,.45));
}

.signal-connector-path--preview-glow{
  opacity:.32;
}

.signal-connector-path--portfolio-glow{
  stroke:#ff8b37;
  stroke-width:6px;
  opacity:.22;
}

.signal-connector-path--preview{
  stroke:#ffd2ad!important;
  stroke-width:1.8px!important;
  stroke-dasharray:10 4 2 4!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.5))
    drop-shadow(0 0 6px rgba(255,93,13,.55))!important;
}

.signal-connector-path--portfolio{
  stroke:#ff7421!important;
  stroke-width:1.55px!important;
  stroke-dasharray:7 5 1 5!important;
  opacity:.9!important;
  filter:
    drop-shadow(0 0 2px rgba(255,120,35,.56))
    drop-shadow(0 0 7px rgba(255,75,7,.32))!important;
}

.signal-connector-layer.is-visible .signal-connector-path--preview,
.signal-connector-layer.is-visible .signal-connector-path--portfolio{
  animation:
    signalConnectorFlow .9s linear infinite,
    signalConnectorPulse 1.8s ease-in-out infinite!important;
}

.signal-connector-layer.is-visible .signal-connector-path--glow{
  animation:signalConnectorGlow 1.8s ease-in-out infinite!important;
}

.signal-connector-node{
  fill:#fff0e4!important;
  stroke:#ff6514;
  stroke-width:1.25px;
  opacity:1!important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.7))
    drop-shadow(0 0 8px rgba(255,82,8,.72))!important;
}

.signal-connector-node--source{
  fill:#ff6b16!important;
  stroke:#fff0e3;
}

.signal-connector-node--portfolio{
  fill:#ff8a35!important;
}

.signal-portfolio-beacon{
  z-index:87!important;
  color:#fff3e9!important;
  border-color:rgba(255,117,31,.62)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 12px rgba(255,82,7,.2)!important;
}

@keyframes signalConnectorPulse{
  0%,100%{opacity:.72}
  50%{opacity:1}
}

@keyframes signalConnectorGlow{
  0%,100%{opacity:.14}
  50%{opacity:.38}
}

@media(max-width:680px){
  .signal-landscape__visual{
    touch-action:none!important;
  }

  .signal-project-preview__media::after{
    right:5px;
    bottom:5px;
    font-size:4.7px;
  }

  .signal-connector-path--glow{
    stroke-width:6px;
  }

  .signal-connector-path--preview{
    stroke-width:1.65px!important;
  }

  .signal-connector-path--portfolio{
    stroke-width:1.45px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .signal-connector-layer.is-visible .signal-connector-path,
  .signal-connector-layer.is-visible .signal-connector-path--glow{
    animation:none!important;
  }
}


/* =========================================================
   v2.165 — HORIZONTAL WAVE BASELINES + LARGER PROJECT NODES
   ========================================================= */

.signal-node{
  width:17px!important;
  height:17px!important;
  margin:-2px!important;
  border-width:1.25px!important;
}

.signal-node::before{
  width:4px!important;
  height:4px!important;
}

.signal-node::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
}

.signal-node span{
  top:calc(100% + 6px)!important;
}

.signal-node:is(:hover,:focus-visible),
.signal-node.is-active{
  transform:translate(-50%,-50%) scale(1.14)!important;
}

@media(max-width:680px){
  .signal-node{
    width:18px!important;
    height:18px!important;
    margin:-3px!important;
  }

  .signal-node::before{
    width:4.5px!important;
    height:4.5px!important;
  }

  .signal-node::after{
    inset:-8px;
  }
}


/* =========================================================
   v2.166 — PERSISTENT POINT PREVIEW + READABLE FX READOUT
   ========================================================= */

.signal-landscape__readouts{
  min-width:min(62%,640px)!important;
  gap:7px!important;
}

.signal-landscape__readout{
  max-width:100%!important;
  padding:7px 10px 6px!important;
  overflow:visible!important;
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(5,6,6,.78) 18%,
      rgba(5,6,6,.72)
    )!important;
  border:1px solid rgba(var(--landscape-ink),.18)!important;
  border-left:2px solid rgba(var(--landscape-accent),.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.18)!important;
  font:700 clamp(8px,.76vw,10.5px)/1.25
    "Courier New","Lucida Console",ui-monospace,monospace!important;
  letter-spacing:.075em!important;
  text-align:right!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

html[data-theme="light"] .signal-landscape__readout{
  color:rgba(22,25,23,.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(238,239,235,.94) 18%,
      rgba(226,228,223,.91)
    )!important;
  border-color:rgba(22,25,23,.2)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 5px 14px rgba(30,34,31,.1)!important;
}

@media(max-width:900px){
  .signal-landscape__readouts{
    min-width:min(64%,560px)!important;
  }

  .signal-landscape__readout{
    font-size:7.5px!important;
    letter-spacing:.055em!important;
  }
}

@media(max-width:680px){
  .signal-landscape__header{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
  }

  .signal-landscape__readouts{
    width:100%!important;
    min-width:0!important;
  }

  .signal-landscape__readout{
    padding:6px 7px 5px!important;
    font-size:6.5px!important;
    line-height:1.3!important;
    letter-spacing:.035em!important;
    white-space:normal!important;
  }
}

@media(max-width:420px){
  .signal-landscape__header{
    grid-template-columns:1fr!important;
  }

  .signal-landscape__readout{
    width:100%!important;
    font-size:6.3px!important;
    text-align:left!important;
  }
}


/* =========================================================
   v2.167 — STANDARD XY ORIENTATION + UNCROPPED PREVIEW MEDIA
   ========================================================= */

.signal-project-preview__media{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background-color:rgba(8,9,9,.8)!important;
  background-image:none!important;
}

.signal-project-preview__media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  scale:1!important;
  clip-path:none!important;
  background:transparent!important;
}

html[data-theme="light"] .signal-project-preview__media{
  background-color:rgba(205,207,201,.8)!important;
}

html[data-theme="nature"] .signal-project-preview__media{
  background-color:rgba(18,34,22,.8)!important;
}

html[data-theme="easter"] .signal-project-preview__media{
  background-color:rgba(35,25,20,.8)!important;
}


/* =========================================================
   v2.168 — 100–10.000 FREQ DISPLAY + EXPANDED WAVE BANK
   ========================================================= */

.signal-landscape__x-axis{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  column-gap:5px;
}

.signal-landscape__x-axis span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.signal-landscape__x-axis span:not(:first-child):not(:last-child){
  justify-self:center;
  text-align:center;
}

.signal-landscape__x-axis span:last-child{
  justify-self:end!important;
  text-align:right;
}

@media(max-width:900px){
  .signal-landscape__x-axis{
    font-size:4.4px!important;
    letter-spacing:.035em!important;
  }
}

@media(max-width:680px){
  .signal-landscape__x-axis{
    grid-template-columns:1fr auto 1fr!important;
  }

  .signal-landscape__x-axis span:nth-child(2),
  .signal-landscape__x-axis span:nth-child(3),
  .signal-landscape__x-axis span:nth-child(5),
  .signal-landscape__x-axis span:nth-child(6){
    display:none!important;
  }

  .signal-landscape__x-axis span:nth-child(1){
    grid-column:1;
    justify-self:start!important;
  }

  .signal-landscape__x-axis span:nth-child(4){
    grid-column:2;
    justify-self:center!important;
  }

  .signal-landscape__x-axis span:nth-child(7){
    grid-column:3;
    justify-self:end!important;
  }
}


/* =========================================================
   v2.169 — REMOVE MOBILE POST-FOOTER OVERFLOW
   ========================================================= */

/*
  The connector SVG previously received the document's pixel height as an
  inline box size. On mobile Safari that absolute element could enlarge the
  document after a project preview had been used, leaving a large themed grid
  below the footer. The SVG now occupies the existing body only while visible.
*/
.signal-connector-layer{
  width:0!important;
  height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  contain:strict;
}

.signal-connector-layer.is-visible{
  width:100%!important;
  height:100%!important;
}

/*
  Mobile Safari can also retain the footer's old intrinsic placeholder when
  content-visibility is used. Render the compact footer normally on phones so
  its physical height always equals its actual content.
*/
@media(max-width:680px){
  html,
  body,
  .site{
    min-height:0!important;
    height:auto!important;
  }

  body{
    min-height:100svh!important;
    padding-bottom:0!important;
  }

  .footer{
    content-visibility:visible!important;
    contain:none!important;
    contain-intrinsic-size:0 0!important;
    min-height:0!important;
    height:auto!important;
    margin-bottom:0!important;
  }

  .footer::before,
  .footer::after{
    max-height:0;
  }

  .site{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
}

@supports (-webkit-touch-callout:none){
  @media(max-width:680px){
    .footer{
      content-visibility:visible!important;
      contain:none!important;
      contain-intrinsic-size:0!important;
    }

    .signal-connector-layer{
      overflow:visible!important;
    }
  }
}


/* =========================================================
   v2.170 — ACTIVE X-WAVE LABEL
   ========================================================= */

.signal-landscape__x-axis span{
  position:relative;
  z-index:1;
  padding:4px 5px 3px;
  overflow:visible!important;
  color:rgba(var(--landscape-muted),.52);
  background:transparent;
  border:1px solid transparent;
  opacity:.55;
  text-overflow:clip!important;
  transition:
    color .16s ease,
    opacity .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s var(--ease);
}

.signal-landscape__x-axis span.is-current{
  z-index:4;
  color:rgba(var(--landscape-ink),.98)!important;
  background:rgba(5,6,6,.92);
  border-color:rgba(var(--landscape-accent),.68);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 10px rgba(var(--landscape-accent),.16);
  font-weight:700;
  opacity:1!important;
  transform:translateY(-2px) scale(1.08);
}

.signal-landscape__x-axis span.is-current::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:-3px;
  height:1px;
  background:rgba(var(--landscape-accent),.92);
  box-shadow:0 0 5px rgba(var(--landscape-accent),.42);
}

html[data-theme="light"] .signal-landscape__x-axis span.is-current{
  color:rgba(19,22,20,.98)!important;
  background:rgba(233,235,230,.96);
  border-color:rgba(var(--landscape-accent),.64);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 0 9px rgba(var(--landscape-accent),.12);
}

html[data-theme="nature"] .signal-landscape__x-axis span.is-current{
  background:rgba(10,24,14,.94);
}

@media(max-width:680px){
  /*
    Keep every stage available on mobile. Inactive labels stay restrained;
    the nearest stage becomes a larger, solid, readable marker.
  */
  .signal-landscape__x-axis{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    column-gap:1px!important;
  }

  .signal-landscape__x-axis span,
  .signal-landscape__x-axis span:nth-child(n){
    display:block!important;
    grid-column:auto!important;
    justify-self:center!important;
    max-width:none!important;
    padding:3px 2px 2px;
    font-size:3.7px!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
  }

  .signal-landscape__x-axis span:first-child{
    justify-self:start!important;
  }

  .signal-landscape__x-axis span:last-child{
    justify-self:end!important;
  }

  .signal-landscape__x-axis span.is-current{
    padding-inline:5px;
    font-size:5.4px!important;
    letter-spacing:.025em!important;
    transform:translateY(-3px) scale(1.06);
  }
}

@media(max-width:390px){
  .signal-landscape__x-axis span{
    font-size:3.35px!important;
  }

  .signal-landscape__x-axis span.is-current{
    font-size:5px!important;
  }
}


/* =========================================================
   v2.172 — GUARANTEED FULL-ASPECT PROJECT PREVIEW
   ========================================================= */

.signal-project-preview{
  --preview-letterbox:rgba(8,9,9,.8);
  --preview-image-border:rgba(242,244,240,.22);
  --preview-image-edge:rgba(239,100,18,.28);
}

/*
  The popup and its 16:10 media frame keep their current dimensions.
  Only the source image is scaled to its largest uncropped size.
*/
.signal-project-preview .signal-project-preview__media{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  aspect-ratio:16 / 10!important;
  overflow:hidden!important;
  padding:0!important;
  background:var(--preview-letterbox)!important;
  border-color:rgba(255,255,255,.12)!important;
}

.signal-project-preview .signal-project-preview__media > img{
  display:block!important;
  width:var(--preview-fitted-width,auto)!important;
  height:var(--preview-fitted-height,auto)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  object-fit:fill!important;
  object-position:center!important;
  aspect-ratio:auto!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  clip-path:none!important;
  overflow:visible!important;
  opacity:1!important;
  background:transparent!important;
  border:1px solid var(--preview-image-border)!important;
  box-shadow:
    0 0 0 1px var(--preview-image-edge),
    0 5px 13px rgba(0,0,0,.18)!important;
}

/* Side/top letterboxing remains solid at 80% opacity and follows the mode. */
html[data-theme="light"] .signal-project-preview{
  --preview-letterbox:rgba(215,218,211,.8);
  --preview-image-border:rgba(28,33,29,.24);
  --preview-image-edge:rgba(190,67,14,.22);
}

html[data-theme="nature"] .signal-project-preview{
  --preview-letterbox:rgba(18,40,23,.8);
  --preview-image-border:rgba(185,218,188,.25);
  --preview-image-edge:rgba(137,85,47,.42);
}

html[data-theme="easter"] .signal-project-preview{
  --preview-letterbox:rgba(38,27,21,.8);
  --preview-image-border:rgba(239,226,217,.25);
  --preview-image-edge:rgba(255,126,27,.3);
}

@media(max-width:680px){
  .signal-project-preview .signal-project-preview__media > img{
    box-shadow:
      0 0 0 1px var(--preview-image-edge),
      0 4px 10px rgba(0,0,0,.16)!important;
  }
}


/* =========================================================
   v2.173 — ANIMATED POPUP PREVIEWS + CLEARER X LABELS
   ========================================================= */

.signal-project-preview .signal-project-preview__media > video{
  display:block;
  width:var(--preview-fitted-width,auto)!important;
  height:var(--preview-fitted-height,auto)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  object-fit:fill!important;
  object-position:center!important;
  aspect-ratio:auto!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  clip-path:none!important;
  overflow:visible!important;
  opacity:1!important;
  background:transparent!important;
  border:1px solid var(--preview-image-border)!important;
  box-shadow:
    0 0 0 1px var(--preview-image-edge),
    0 5px 13px rgba(0,0,0,.18)!important;
}

.signal-project-preview__media > img[hidden],
.signal-project-preview__media > video[hidden]{
  display:none!important;
}

.signal-project-preview__media[data-preview-type="video"]::before{
  content:"LIVE PREVIEW";
  position:absolute;
  left:7px;
  top:7px;
  z-index:4;
  padding:4px 6px 3px;
  color:rgba(248,248,244,.9);
  background:rgba(5,6,6,.82);
  border:1px solid rgba(255,255,255,.15);
  border-left:2px solid rgba(239,100,18,.72);
  font:600 4.8px/1 "Courier New","Lucida Console",ui-monospace,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
}

/* X waveform labels: larger, brighter and less compressed. */
.signal-landscape__x-axis{
  bottom:6px!important;
  font-size:clamp(5.8px,.5vw,7.2px)!important;
  letter-spacing:.045em!important;
}

.signal-landscape__x-axis span{
  padding:5px 6px 4px!important;
  color:rgba(var(--landscape-ink),.67)!important;
  font-weight:600!important;
  opacity:.76!important;
}

.signal-landscape__x-axis span.is-current{
  padding:6px 8px 5px!important;
  font-size:clamp(7.2px,.62vw,9px)!important;
  letter-spacing:.055em!important;
  opacity:1!important;
}

@media(max-width:900px){
  .signal-landscape__x-axis{
    font-size:5.2px!important;
    letter-spacing:.025em!important;
  }

  .signal-landscape__x-axis span{
    padding-inline:4px!important;
  }

  .signal-landscape__x-axis span.is-current{
    font-size:6.8px!important;
    padding-inline:6px!important;
  }
}

@media(max-width:680px){
  .signal-landscape__x-axis span,
  .signal-landscape__x-axis span:nth-child(n){
    font-size:4.25px!important;
    font-weight:600!important;
    opacity:.72!important;
  }

  .signal-landscape__x-axis span.is-current{
    font-size:6.1px!important;
    opacity:1!important;
  }

  .signal-project-preview .signal-project-preview__media > video{
    box-shadow:
      0 0 0 1px var(--preview-image-edge),
      0 4px 10px rgba(0,0,0,.16)!important;
  }
}


/* =========================================================
   v2.176 — THEME-AWARE MODE-SWITCH TOOLTIP
   Based directly on v2.173.
   ========================================================= */

/*
  Shared structure and equal readability across all four modes.
  Only Studio retains the orange visual language.
*/
html{
  --yt-text-a:#d8dde0;
  --yt-text-b:#f4f6f4;
  --yt-text-c:#aeb8bd;
  --yt-panel-a:rgba(8,10,11,.96);
  --yt-panel-b:rgba(3,4,5,.94);
  --yt-border:rgba(188,204,214,.34);
  --yt-border-bright:rgba(230,240,244,.72);
  --yt-line:#b8c7cf;
  --yt-node:#e4ecef;
  --yt-glow:rgba(187,211,222,.2);
  --yt-shadow:rgba(0,0,0,.3);
  --yt-scan:rgba(220,236,242,.022);
}

/* Light mode — high-contrast graphite on a warm neutral panel. */
html[data-theme="light"]{
  --yt-text-a:#222724;
  --yt-text-b:#090c0a;
  --yt-text-c:#4b5550;
  --yt-panel-a:rgba(244,244,239,.98);
  --yt-panel-b:rgba(224,226,219,.96);
  --yt-border:rgba(28,37,32,.34);
  --yt-border-bright:rgba(12,18,14,.72);
  --yt-line:#293630;
  --yt-node:#0f1713;
  --yt-glow:rgba(30,48,39,.16);
  --yt-shadow:rgba(22,28,24,.16);
  --yt-scan:rgba(20,30,24,.026);
}

/* Nature mode — warm ivory text with restrained botanical green. */
html[data-theme="nature"]{
  --yt-text-a:#b9d8bc;
  --yt-text-b:#edf5ec;
  --yt-text-c:#82ad87;
  --yt-panel-a:rgba(13,31,18,.97);
  --yt-panel-b:rgba(7,19,11,.95);
  --yt-border:rgba(131,185,139,.4);
  --yt-border-bright:rgba(202,232,205,.76);
  --yt-line:#8fbd95;
  --yt-node:#d3ead5;
  --yt-glow:rgba(111,184,122,.2);
  --yt-shadow:rgba(4,13,7,.34);
  --yt-scan:rgba(190,226,195,.022);
}

/* Studio mode — the original orange treatment belongs here only. */
html[data-theme="easter"]{
  --yt-text-a:#bd3c08;
  --yt-text-b:#f28a24;
  --yt-text-c:#d8520c;
  --yt-panel-a:rgba(8,6,5,.96);
  --yt-panel-b:rgba(3,3,3,.94);
  --yt-border:rgba(224,104,28,.3);
  --yt-border-bright:rgba(255,190,104,.76);
  --yt-line:#df6418;
  --yt-node:#f29a3b;
  --yt-glow:rgba(231,91,15,.2);
  --yt-shadow:rgba(0,0,0,.3);
  --yt-scan:rgba(255,153,70,.022);
}

.y-tooltip-label{
  border-color:var(--yt-border)!important;
  background-image:
    linear-gradient(
      108deg,
      var(--yt-text-a) 0%,
      var(--yt-text-b) 44%,
      var(--yt-text-c) 100%
    ),
    linear-gradient(
      180deg,
      var(--yt-panel-a) 0%,
      var(--yt-panel-b) 100%
    )!important;
  background-size:220% 100%,100% 100%!important;
  background-position:22% 50%,0 0!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text,padding-box!important;
  background-clip:text,padding-box!important;
  -webkit-text-fill-color:transparent!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 10px var(--yt-glow),
    0 8px 22px var(--yt-shadow)!important;
  filter:
    brightness(1)
    contrast(1)
    drop-shadow(0 0 3px var(--yt-glow))!important;
  text-shadow:none!important;
}

/* Theme-colored scan texture without reducing text contrast. */
.y-tooltip-label::before{
  opacity:.3!important;
  background:
    repeating-linear-gradient(
      180deg,
      var(--yt-scan) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      90deg,
      var(--yt-glow),
      transparent 24%,
      var(--yt-glow) 61%,
      transparent
    )!important;
}

/* Analog edge follows the active mode instead of staying orange. */
.y-tooltip-label::after{
  border-color:var(--yt-border)!important;
  opacity:.72!important;
}

.y-tooltip-line-path{
  stroke:var(--yt-line)!important;
  opacity:.72!important;
  filter:
    drop-shadow(0 0 2px var(--yt-glow))!important;
}

.y-tooltip-line-node{
  fill:var(--yt-node)!important;
  opacity:.86!important;
  filter:
    drop-shadow(0 0 3px var(--yt-glow))!important;
}

.y-tooltip.is-visible .y-tooltip-label{
  animation:
    yTooltipThemeArrival .72s cubic-bezier(.2,.64,.24,1) 1,
    yTooltipThemeBreath 3s ease-in-out .82s infinite!important;
}

@keyframes yTooltipThemeArrival{
  0%{
    border-color:color-mix(in srgb,var(--yt-border) 45%,transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 7px 18px var(--yt-shadow);
    filter:
      brightness(.88)
      contrast(.99)
      drop-shadow(0 0 1px var(--yt-glow));
  }

  24%{
    border-color:var(--yt-border-bright);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--yt-border-bright) 22%,transparent),
      0 0 7px var(--yt-glow),
      0 7px 18px var(--yt-shadow);
    filter:
      brightness(1.08)
      contrast(1.01)
      drop-shadow(0 0 4px var(--yt-glow));
  }

  48%{
    border-color:color-mix(in srgb,var(--yt-border) 70%,transparent);
    filter:
      brightness(.97)
      contrast(1)
      drop-shadow(0 0 2px var(--yt-glow));
  }

  100%{
    border-color:var(--yt-border);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      inset 0 0 10px var(--yt-glow),
      0 8px 22px var(--yt-shadow);
    filter:
      brightness(1)
      contrast(1)
      drop-shadow(0 0 3px var(--yt-glow));
  }
}

@keyframes yTooltipThemeBreath{
  0%,100%{
    filter:
      brightness(1)
      contrast(1)
      drop-shadow(0 0 3px var(--yt-glow));
  }

  50%{
    filter:
      brightness(1.065)
      contrast(1.01)
      drop-shadow(0 0 5px var(--yt-glow));
  }
}

/* Fallback for browsers without color-mix support. */
@supports not (color:color-mix(in srgb,white,black)){
  @keyframes yTooltipThemeArrival{
    0%{
      border-color:var(--yt-border);
      filter:brightness(.88);
    }

    24%{
      border-color:var(--yt-border-bright);
      filter:brightness(1.08);
    }

    100%{
      border-color:var(--yt-border);
      filter:brightness(1);
    }
  }
}

@media(prefers-reduced-motion:reduce){
  .y-tooltip.is-visible .y-tooltip-label{
    animation:none!important;
  }
}


/* =========================================================
   v2.177 — TERMINAL FOOTER CTA
   ========================================================= */

/*
  Preserve the established footer scale. Only the typography and copy change.
*/
.footer-cta-link{
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  letter-spacing:0!important;
}

.footer-cta-link::after{
  content:none!important;
  display:none!important;
}

.footer-terminal-cta{
  position:relative;
  z-index:4;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  width:max-content;
  max-width:100%;
  color:currentColor;
  font-family:
    "Lucida Console",
    "Andale Mono",
    "Courier New",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace!important;
  font-size:1em;
  font-weight:400;
  font-stretch:condensed;
  line-height:.9;
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
  text-rendering:geometricPrecision;
  font-variant-ligatures:none;
}

.footer-terminal-copy{
  display:inline;
}

.footer-terminal-cursor{
  display:inline-block;
  width:.62em;
  margin-left:.025em;
  overflow:hidden;
  color:currentColor;
  -webkit-text-fill-color:currentColor;
  animation:footerTerminalCursor 1.05s steps(1,end) infinite;
  transform:translateY(.02em);
}

@keyframes footerTerminalCursor{
  0%,44%{
    opacity:1;
  }

  45%,100%{
    opacity:0;
  }
}

/* Keep the existing animated mail arrow centered below the new one-line CTA. */
.footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  top:calc(100% + .12em)!important;
  margin:0!important;
  transform:translateX(-50%) translateY(-4px) scale(.86);
}

.footer-cta:is(:hover,:focus-within) .footer-terminal-cta + .footer-contact-morph{
  transform:translateX(-50%) translateY(0) scale(1);
}

/* Theme-specific text remains inherited from the existing footer palette. */
html[data-theme="light"] .footer-terminal-cta,
html[data-theme="dark"] .footer-terminal-cta,
html[data-theme="nature"] .footer-terminal-cta,
html[data-theme="easter"] .footer-terminal-cta{
  color:currentColor!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
  filter:none!important;
  text-shadow:none!important;
}

@media(max-width:680px){
  .footer-terminal-cta{
    font-size:1em;
    letter-spacing:.01em;
  }

  .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% + .08em)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-terminal-cursor{
    animation:none!important;
    opacity:1!important;
  }
}


/* =========================================================
   v2.178 — NATURE MAIN-TEASER LABELS MATCH DARK MODE
   ========================================================= */

/*
  Override the earlier Nature gradient fields with the exact dark-mode
  interface treatment. Both labels remain readable without pale green plates.
*/
html[data-theme="nature"] body .main-teaser-preview .main-teaser-preview__badge{
  color:rgba(248,248,244,.97)!important;
  background-color:rgba(6,7,7,.99)!important;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.024) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      180deg,
      rgba(38,39,38,.98),
      rgba(6,7,7,.99)
    )!important;
  border:1px solid rgba(255,255,255,.19)!important;
  border-left:2px solid rgba(255,255,255,.76)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 3px 11px rgba(0,0,0,.42)!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.92),
    0 0 3px rgba(255,255,255,.12)!important;
}

html[data-theme="nature"] body .main-teaser-preview .main-teaser-preview__badge::before{
  background:rgba(246,246,241,.93)!important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 0 5px rgba(255,255,255,.3)!important;
}

html[data-theme="nature"] body .main-teaser-preview .main-teaser-preview__scope{
  color:rgba(234,238,236,.72)!important;
  background-color:rgba(4,5,5,.9)!important;
  background-image:none!important;
  border:0!important;
  border-right:1px solid rgba(239,242,240,.38)!important;
  box-shadow:none!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 0 3px rgba(255,255,255,.1)!important;
}


/* =========================================================
   v2.179 — REFERENCE TERMINAL TYPEFACE / HARD OVERRIDE
   ========================================================= */

/*
  Match the compact CRT/terminal character of the supplied 01_INDEX /
  02_PORTFOLIO reference. This final, highly specific block prevents older
  footer typography rules from replacing it with Manrope or a generic sans.
*/
html body .site .footer .footer-top .footer-cta > .footer-cta-link >
.footer-terminal-cta,
html body .site .footer .footer-top .footer-cta > .footer-cta-link >
.footer-terminal-cta *,
html body .site .footer .footer-cta-link .footer-terminal-copy,
html body .site .footer .footer-cta-link .footer-terminal-cursor{
  font-family:
    "Share Tech Mono",
    "OCR A Std",
    "OCR A Extended",
    "Lucida Console",
    "Courier New",
    monospace!important;
  font-style:normal!important;
  font-weight:400!important;
  font-stretch:normal!important;
  font-variant:normal!important;
  font-variant-ligatures:none!important;
  font-feature-settings:"liga" 0,"calt" 0!important;
  font-kerning:none!important;
  letter-spacing:.018em!important;
  text-transform:uppercase!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:none!important;
  -moz-osx-font-smoothing:grayscale!important;
}

html body .site .footer .footer-cta-link .footer-terminal-cta{
  font-size:1em!important;
  line-height:.9!important;
  word-spacing:0!important;
  white-space:nowrap!important;
  transform:none!important;
}

/* Remove any inherited/generated decoration around the terminal copy. */
html body .site .footer .footer-terminal-cta::before,
html body .site .footer .footer-terminal-cta::after,
html body .site .footer .footer-terminal-copy::before,
html body .site .footer .footer-terminal-copy::after{
  content:none!important;
  display:none!important;
}

/*
  Slight CRT edge softness like the reference raster, without changing the
  established theme color or overall footer text size.
*/
html body .site .footer .footer-terminal-copy,
html body .site .footer .footer-terminal-cursor{
  color:currentColor!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
  filter:none!important;
  text-shadow:
    .018em 0 0 color-mix(in srgb,currentColor 24%,transparent),
    -.018em 0 0 color-mix(in srgb,currentColor 15%,transparent)!important;
}

/* Keep the underscore attached to CREATE, not spaced as a separate glyph. */
html body .site .footer .footer-terminal-cursor{
  width:auto!important;
  min-width:.58em!important;
  margin-left:0!important;
  padding-left:0!important;
  overflow:visible!important;
  transform:translateY(.01em)!important;
}

/* The existing CTA scale remains authoritative at every viewport. */
@media(max-width:680px){
  html body .site .footer .footer-cta-link .footer-terminal-cta,
  html body .site .footer .footer-cta-link .footer-terminal-cta *{
    font-size:1em!important;
    letter-spacing:.012em!important;
  }
}

@supports not (color:color-mix(in srgb,white,black)){
  html body .site .footer .footer-terminal-copy,
  html body .site .footer .footer-terminal-cursor{
    text-shadow:
      .018em 0 0 currentColor,
      -.018em 0 0 currentColor!important;
  }
}


/* =========================================================
   v2.180 — COMPACT RESPONSIVE TERMINAL FOOTER
   ========================================================= */

/*
  The footer no longer needs the former 620–760px intrinsic placeholder.
  Render its actual content height so the terminal line, arrow and legal row
  define the block instead of an empty performance-containment estimate.
*/
html body .site > .footer{
  content-visibility:visible!important;
  contain:none!important;
  contain-intrinsic-size:0!important;
  box-sizing:border-box!important;
  min-height:0!important;
  height:auto!important;
  padding:
    clamp(48px,4.6vw,72px)
    var(--page)
    clamp(22px,2.1vw,32px)!important;
  margin-block:0!important;
}

html body .site > .footer .footer-top{
  min-height:0!important;
  height:auto!important;
  align-items:center!important;
}

html body .site > .footer .footer-cta{
  min-height:0!important;
  height:auto!important;
  margin-block:0!important;
  padding-block:0!important;
}

/*
  Preserve enough space for the centered mail-arrow animation, but remove the
  large former gap created for the old two-line statement and LFO ornament.
*/
html body .site > .footer .footer-cta-link{
  margin-block:0!important;
  padding-top:0!important;
  padding-bottom:.68em!important;
}

html body .site > .footer .footer-bottom{
  min-height:0!important;
  height:auto!important;
  margin-top:clamp(42px,4vw,60px)!important;
  padding-top:clamp(13px,1.25vw,18px)!important;
  padding-bottom:0!important;
}

/* Tablet proportions. */
@media(max-width:900px){
  html body .site > .footer{
    padding:
      clamp(42px,6.2vw,56px)
      var(--page)
      clamp(22px,3.4vw,28px)!important;
  }

  html body .site > .footer .footer-bottom{
    margin-top:clamp(38px,5.8vw,50px)!important;
  }
}

/* Phone: compact without crowding the animated arrow or legal row. */
@media(max-width:680px){
  html body .site > .footer{
    padding:
      clamp(36px,10vw,46px)
      var(--page)
      max(20px,env(safe-area-inset-bottom))!important;
  }

  html body .site > .footer .footer-cta-link{
    padding-bottom:.72em!important;
  }

  html body .site > .footer .footer-bottom{
    margin-top:clamp(34px,9vw,44px)!important;
    padding-top:14px!important;
  }
}

/* Very narrow devices retain a clean minimum breathing distance. */
@media(max-width:420px){
  html body .site > .footer{
    padding-top:34px!important;
  }

  html body .site > .footer .footer-bottom{
    margin-top:32px!important;
  }
}


/* =========================================================
   v2.181 — PROFESSIONAL ANALOG CRT FOOTER TITLE
   ========================================================= */

/*
  Final high-specificity rendering pass. The typography keeps the compact
  terminal construction, but the visible result is deliberately imperfect:
  low-resolution phosphor edges, scanline breakup, slight registration drift,
  restrained luminance breathing and occasional horizontal signal tearing.
*/
html body .site > .footer .footer-cta-link .footer-terminal-cta{
  position:relative!important;
  isolation:isolate!important;
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  overflow:visible!important;
  transform:scaleX(.955)!important;
  transform-origin:50% 50%!important;
  filter:
    contrast(1.08)
    brightness(.96)!important;
}

/* Fine CRT raster over the complete title, clipped to its own footprint. */
html body .site > .footer .footer-cta-link .footer-terminal-cta::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:6!important;
  inset:-.08em -.05em -.06em!important;
  pointer-events:none!important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.075) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 4px
    )!important;
  mix-blend-mode:soft-light!important;
  opacity:.34!important;
  clip-path:inset(0)!important;
  animation:footerTerminalRasterDrift 6.4s steps(2,end) infinite!important;
}

html body .site > .footer .footer-cta-link .footer-terminal-copy{
  position:relative!important;
  z-index:3!important;
  display:inline-block!important;
  color:currentColor!important;
  -webkit-text-fill-color:currentColor!important;
  -webkit-text-stroke:.012em currentColor!important;
  letter-spacing:.006em!important;
  word-spacing:-.04em!important;
  line-height:.88!important;
  transform:
    translateZ(0)
    skewX(-.18deg)!important;
  transform-origin:50% 55%!important;
  filter:
    blur(.16px)
    contrast(1.14)
    brightness(.98)!important;
  text-shadow:
    .018em 0 0 color-mix(in srgb,currentColor 42%,transparent),
    -.022em 0 0 color-mix(in srgb,currentColor 26%,transparent),
    0 .022em 0 color-mix(in srgb,currentColor 18%,transparent),
    0 0 .075em color-mix(in srgb,currentColor 20%,transparent)!important;
  animation:
    footerTerminalAnalogBreath 4.8s steps(2,end) infinite,
    footerTerminalMicroJitter 8.6s steps(1,end) infinite!important;
}

/*
  Two duplicate signal registrations. They are monochrome and use currentColor,
  so every theme keeps its intended footer color.
*/
html body .site > .footer .footer-cta-link .footer-terminal-copy::before,
html body .site > .footer .footer-cta-link .footer-terminal-copy::after{
  content:attr(data-text)!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  color:currentColor!important;
  -webkit-text-fill-color:currentColor!important;
  -webkit-text-stroke:.008em currentColor!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  word-spacing:inherit!important;
  white-space:nowrap!important;
}

/* Soft analog ghost / phosphor persistence. */
html body .site > .footer .footer-cta-link .footer-terminal-copy::before{
  z-index:-1!important;
  opacity:.19!important;
  transform:translate(.022em,.014em)!important;
  filter:blur(.65px)!important;
  mix-blend-mode:screen!important;
}

/* Horizontal signal band that produces the old monitor breakup. */
html body .site > .footer .footer-cta-link .footer-terminal-copy::after{
  z-index:5!important;
  opacity:.2!important;
  transform:translateX(-.018em)!important;
  clip-path:polygon(
    0 31%,
    100% 31%,
    100% 47%,
    0 47%
  )!important;
  filter:blur(.18px)!important;
  animation:footerTerminalSignalTear 7.2s steps(1,end) infinite!important;
}

/* Cursor uses the same phosphor behavior instead of a clean vector glyph. */
html body .site > .footer .footer-cta-link .footer-terminal-cursor{
  position:relative!important;
  z-index:4!important;
  display:inline-block!important;
  min-width:.55em!important;
  color:currentColor!important;
  -webkit-text-fill-color:currentColor!important;
  -webkit-text-stroke:.012em currentColor!important;
  filter:
    blur(.14px)
    contrast(1.1)!important;
  text-shadow:
    .018em 0 0 color-mix(in srgb,currentColor 36%,transparent),
    0 0 .09em color-mix(in srgb,currentColor 24%,transparent)!important;
  animation:
    footerTerminalCursor 1.05s steps(1,end) infinite,
    footerTerminalCursorNoise 3.8s steps(2,end) infinite!important;
}

@keyframes footerTerminalAnalogBreath{
  0%,100%{
    opacity:.94;
    filter:
      blur(.16px)
      contrast(1.14)
      brightness(.98);
  }

  46%{
    opacity:.98;
    filter:
      blur(.11px)
      contrast(1.18)
      brightness(1.025);
  }

  53%{
    opacity:.91;
    filter:
      blur(.21px)
      contrast(1.1)
      brightness(.94);
  }

  58%{
    opacity:.97;
    filter:
      blur(.14px)
      contrast(1.16)
      brightness(1.01);
  }
}

@keyframes footerTerminalMicroJitter{
  0%,8%,14%,46%,52%,83%,100%{
    transform:translate(0,0) skewX(-.18deg);
  }

  9%{
    transform:translate(.012em,0) skewX(-.18deg);
  }

  47%{
    transform:translate(-.009em,.006em) skewX(-.12deg);
  }

  84%{
    transform:translate(.006em,-.004em) skewX(-.22deg);
  }
}

@keyframes footerTerminalSignalTear{
  0%,17%,19%,49%,52%,79%,82%,100%{
    opacity:.12;
    transform:translateX(-.018em);
    clip-path:polygon(0 31%,100% 31%,100% 47%,0 47%);
  }

  18%{
    opacity:.31;
    transform:translateX(.055em);
    clip-path:polygon(0 18%,100% 18%,100% 31%,0 31%);
  }

  50%{
    opacity:.26;
    transform:translateX(-.042em);
    clip-path:polygon(0 61%,100% 61%,100% 72%,0 72%);
  }

  80%{
    opacity:.29;
    transform:translateX(.034em);
    clip-path:polygon(0 42%,100% 42%,100% 55%,0 55%);
  }
}

@keyframes footerTerminalRasterDrift{
  0%,100%{
    transform:translateY(0);
    opacity:.31;
  }

  50%{
    transform:translateY(1px);
    opacity:.37;
  }
}

@keyframes footerTerminalCursorNoise{
  0%,100%{
    filter:blur(.14px) contrast(1.1) brightness(1);
  }

  48%{
    filter:blur(.1px) contrast(1.16) brightness(1.05);
  }

  54%{
    filter:blur(.22px) contrast(1.06) brightness(.91);
  }
}

/* Tablet and phone tuning: preserve the effect without producing fuzziness. */
@media(max-width:900px){
  html body .site > .footer .footer-cta-link .footer-terminal-copy{
    -webkit-text-stroke:.01em currentColor!important;
    filter:
      blur(.12px)
      contrast(1.12)
      brightness(.99)!important;
  }

  html body .site > .footer .footer-cta-link .footer-terminal-copy::before{
    opacity:.16!important;
    filter:blur(.5px)!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-cta-link .footer-terminal-cta{
    transform:scaleX(.97)!important;
  }

  html body .site > .footer .footer-cta-link .footer-terminal-copy{
    letter-spacing:.004em!important;
    text-shadow:
      .014em 0 0 color-mix(in srgb,currentColor 38%,transparent),
      -.017em 0 0 color-mix(in srgb,currentColor 22%,transparent),
      0 0 .06em color-mix(in srgb,currentColor 18%,transparent)!important;
  }

  html body .site > .footer .footer-cta-link .footer-terminal-cta::after{
    opacity:.27!important;
  }
}

/* Reduced motion keeps the analog surface but removes signal movement. */
@media(prefers-reduced-motion:reduce){
  html body .site > .footer .footer-cta-link .footer-terminal-copy,
  html body .site > .footer .footer-cta-link .footer-terminal-copy::after,
  html body .site > .footer .footer-cta-link .footer-terminal-cta::after,
  html body .site > .footer .footer-cta-link .footer-terminal-cursor{
    animation:none!important;
  }
}


/* =========================================================
   v2.182 — TRUE LOW-RES TERMINAL RASTER
   ========================================================= */

/*
  Stop the earlier high-resolution CSS text simulation. The visible title is
  now rendered to a deliberately low-resolution canvas and enlarged with
  nearest-neighbour scaling, producing real raster edges rather than a clean
  webfont with decorative filters.
*/
html body .site > .footer .footer-terminal-cta{
  position:relative!important;
  isolation:isolate!important;
  display:inline-block!important;
  width:max-content!important;
  max-width:100%!important;
  height:auto!important;
  overflow:visible!important;
  transform:none!important;
  filter:none!important;
}

html body .site > .footer .footer-terminal-cta::before,
html body .site > .footer .footer-terminal-cta::after,
html body .site > .footer .footer-terminal-source::before,
html body .site > .footer .footer-terminal-source::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/*
  Invisible semantic/layout source. It reserves the exact responsive width and
  height while the canvas supplies the visible lo-fi terminal raster.
*/
html body .site > .footer .footer-terminal-source{
  display:inline-block!important;
  position:relative!important;
  z-index:0!important;
  font-family:
    "Share Tech Mono",
    "OCR A Std",
    "OCR A Extended",
    "Lucida Console",
    "Courier New",
    monospace!important;
  font-size:1em!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:.9!important;
  letter-spacing:.008em!important;
  word-spacing:-.035em!important;
  white-space:nowrap!important;
  opacity:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  filter:none!important;
  transform:none!important;
  pointer-events:none!important;
  user-select:none!important;
}

html body .site > .footer .footer-terminal-canvas{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  width:100%!important;
  height:118%!important;
  max-width:none!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:50% 50%!important;
  image-rendering:pixelated!important;
  image-rendering:crisp-edges!important;
  opacity:.98!important;
  filter:
    contrast(1.13)
    brightness(.97)
    drop-shadow(1px 0 0 color-mix(in srgb,currentColor 16%,transparent))
    drop-shadow(0 0 3px color-mix(in srgb,currentColor 12%,transparent))!important;
  pointer-events:none!important;
}

/* A restrained analog glass/raster layer over the actual pixel canvas. */
html body .site > .footer .footer-terminal-cta::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  inset:-5% -1% -7%!important;
  pointer-events:none!important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.07) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      90deg,
      transparent 0 42%,
      rgba(255,255,255,.035) 49%,
      transparent 56% 100%
    )!important;
  mix-blend-mode:soft-light!important;
  opacity:.38!important;
  animation:footerRasterGlassDrift 5.8s steps(2,end) infinite!important;
}

@keyframes footerRasterGlassDrift{
  0%,100%{
    transform:translateY(0);
    opacity:.34;
  }

  49%{
    transform:translateY(1px);
    opacity:.4;
  }

  51%{
    transform:translateY(-1px);
    opacity:.31;
  }
}

/* Preserve the compact footer and centered arrow from the preceding revision. */
html body .site > .footer .footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  top:calc(100% + .12em)!important;
}

/* Avoid excessive pixel enlargement on small screens. */
@media(max-width:900px){
  html body .site > .footer .footer-terminal-canvas{
    height:114%!important;
    filter:
      contrast(1.1)
      brightness(.98)
      drop-shadow(1px 0 0 color-mix(in srgb,currentColor 13%,transparent))
      drop-shadow(0 0 2px color-mix(in srgb,currentColor 10%,transparent))!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-terminal-source{
    letter-spacing:.004em!important;
  }

  html body .site > .footer .footer-terminal-canvas{
    height:112%!important;
  }

  html body .site > .footer .footer-terminal-cta::after{
    opacity:.29!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .site > .footer .footer-terminal-cta::after{
    animation:none!important;
  }
}


/* =========================================================
   v2.183 — SHARPER GRAIN / NO TERMINAL RECTANGLE
   ========================================================= */

/*
  Remove the full rectangular glass/scan overlay. Grain now exists only in
  the rasterized glyph pixels, so there is no visible box around the title.
*/
html body .site > .footer .footer-terminal-cta::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
  animation:none!important;
}

/* Crisper pixel edges with restrained monochrome persistence. */
html body .site > .footer .footer-terminal-canvas{
  height:108%!important;
  opacity:1!important;
  image-rendering:pixelated!important;
  image-rendering:crisp-edges!important;
  filter:
    contrast(1.24)
    brightness(1.015)
    drop-shadow(1px 0 0 color-mix(in srgb,currentColor 7%,transparent))
    drop-shadow(0 0 1px color-mix(in srgb,currentColor 8%,transparent))!important;
}

/* Eliminate any inherited outline, panel or background around the title. */
html body .site > .footer .footer-terminal-cta,
html body .site > .footer .footer-terminal-source,
html body .site > .footer .footer-terminal-canvas{
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Mobile/tablet remain sharp instead of becoming progressively softer. */
@media(max-width:900px){
  html body .site > .footer .footer-terminal-canvas{
    height:107%!important;
    filter:
      contrast(1.21)
      brightness(1.02)
      drop-shadow(0 0 1px color-mix(in srgb,currentColor 7%,transparent))!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-terminal-canvas{
    height:106%!important;
    filter:
      contrast(1.18)
      brightness(1.025)!important;
  }
}


/* =========================================================
   v2.184 — THIN TERMINAL STROKES / ZERO BACKGROUND PANEL
   ========================================================= */

/*
  Hard-reset every possible inherited plate, pseudo-element and backdrop in
  the terminal CTA. This removes the rectangle regardless of earlier rules.
*/
html body .site > .footer .footer-cta,
html body .site > .footer .footer-cta-link,
html body .site > .footer .footer-terminal-cta,
html body .site > .footer .footer-terminal-source,
html body .site > .footer .footer-terminal-canvas{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body .site > .footer .footer-cta::before,
html body .site > .footer .footer-cta::after,
html body .site > .footer .footer-cta-link::before,
html body .site > .footer .footer-cta-link::after,
html body .site > .footer .footer-terminal-cta::before,
html body .site > .footer .footer-terminal-cta::after,
html body .site > .footer .footer-terminal-source::before,
html body .site > .footer .footer-terminal-source::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  animation:none!important;
}

/* The visible raster stays grainy but no longer gains artificial thickness. */
html body .site > .footer .footer-terminal-canvas{
  opacity:.94!important;
  filter:
    contrast(1.06)
    brightness(1.01)!important;
  mix-blend-mode:normal!important;
}

/* Ensure no hidden container clipping creates a rectangular visual edge. */
html body .site > .footer .footer-cta,
html body .site > .footer .footer-cta-link,
html body .site > .footer .footer-terminal-cta{
  overflow:visible!important;
  isolation:auto!important;
}

/* Keep the thinner result consistent across devices. */
@media(max-width:900px){
  html body .site > .footer .footer-terminal-canvas{
    opacity:.95!important;
    filter:
      contrast(1.05)
      brightness(1.015)!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-terminal-canvas{
    opacity:.96!important;
    filter:
      contrast(1.04)
      brightness(1.02)!important;
  }
}


/* =========================================================
   v2.185 — SHARPER TERMINAL + PROFESSIONAL TRACKING
   ========================================================= */

html body .site > .footer .footer-terminal-source{
  letter-spacing:.095em!important;
  word-spacing:.01em!important;
}

html body .site > .footer .footer-terminal-canvas{
  height:104%!important;
  opacity:.98!important;
  filter:
    contrast(1.1)
    brightness(1.025)!important;
  image-rendering:pixelated!important;
  image-rendering:crisp-edges!important;
}

@media(max-width:900px){
  html body .site > .footer .footer-terminal-source{
    letter-spacing:.085em!important;
  }

  html body .site > .footer .footer-terminal-canvas{
    height:103%!important;
    filter:
      contrast(1.085)
      brightness(1.025)!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-terminal-source{
    letter-spacing:.075em!important;
  }

  html body .site > .footer .footer-terminal-canvas{
    height:102%!important;
    filter:
      contrast(1.07)
      brightness(1.03)!important;
  }
}


/* =========================================================
   v2.186 — REMOVE ALL SPACE AFTER COPYRIGHT FOOTER
   ========================================================= */

/* No trailing document padding or minimum-height filler. */
html,
body,
.site{
  margin-bottom:0!important;
  padding-bottom:0!important;
}

html,
body{
  min-height:0!important;
  height:auto!important;
}

.site{
  min-height:0!important;
  height:auto!important;
}

/*
  Exact footer height is measured from its top edge to the bottom of the
  copyright/Impressum row. Nothing may stretch below that point.
*/
html body .site > .footer{
  height:var(--footer-exact-height,auto)!important;
  min-height:0!important;
  max-height:var(--footer-exact-height,none)!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
  overflow:clip!important;
}

/* The legal row is the last in-flow content and has no trailing margin. */
html body .site > .footer .footer-bottom{
  margin-bottom:0!important;
  padding-bottom:0!important;
}

/*
  Hidden absolute overlays are collapsed to the page origin. visibility:hidden
  alone is insufficient because their previous coordinates can still enlarge
  scrollable overflow in Safari, Chrome and embedded mobile browsers.
*/
body > .signal-project-preview:not(.is-visible){
  left:0!important;
  top:0!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

body > .signal-portfolio-beacon:not(.is-visible){
  left:0!important;
  top:0!important;
  width:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

body > .signal-connector-layer:not(.is-visible){
  left:0!important;
  top:0!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
}

/* Prevent browser overscroll from exposing a differently colored lower layer. */
html{
  background:var(--bg)!important;
  overscroll-behavior-y:none;
}

body{
  overscroll-behavior-y:none;
}

@supports not (overflow:clip){
  html body .site > .footer{
    overflow:hidden!important;
  }
}


/* =========================================================
   v2.187 — BORDERLESS BOTTOM SECTION
   ========================================================= */

/*
  Remove both horizontal separators:
  1. the line above the terminal footer
  2. the line above the copyright / Impressum row
*/
html body .site > .footer{
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}

html body .site > .footer .footer-bottom{
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Prevent pseudo-elements or theme layers from recreating separators. */
html body .site > .footer::before,
html body .site > .footer::after,
html body .site > .footer .footer-bottom::before,
html body .site > .footer .footer-bottom::after{
  content:none!important;
  display:none!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Keep the bottom area visually continuous across all themes. */
html[data-theme="dark"] body .site > .footer,
html[data-theme="light"] body .site > .footer,
html[data-theme="nature"] body .site > .footer,
html[data-theme="easter"] body .site > .footer{
  border-color:transparent!important;
}


/* =========================================================
   v2.188 — COMPACT FOOTER SPACING + TEXT MORPH POSITIONING
   ========================================================= */

/* Center the complete CTA assembly independently of the old 12-column grid. */
html body .site > .footer .footer-top{
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  gap:0!important;
  width:100%!important;
}

html body .site > .footer .footer-cta{
  grid-column:1!important;
  justify-self:center!important;
  width:100%!important;
  max-width:100%!important;
  text-align:center!important;
}

/* Bring the arrow closer to the terminal text. */
html body .site > .footer .footer-cta-link{
  padding-bottom:.42em!important;
}

html body .site > .footer
.footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  top:calc(100% - .055em)!important;
  margin:0!important;
}

/* Better visual balance between CTA group and the legal row. */
html body .site > .footer{
  padding-top:clamp(38px,3.7vw,56px)!important;
}

html body .site > .footer .footer-bottom{
  margin-top:clamp(30px,2.9vw,43px)!important;
  padding-top:0!important;
  align-items:center!important;
}

/* No border or plate may return around either terminal phrase. */
html body .site > .footer
:is(
  .footer-terminal-cta,
  .footer-terminal-source,
  .footer-terminal-canvas
){
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/*
  OTH STUDIO is intentionally only a brief signal fragment. A tiny luminance
  accent helps it register during its short hold without changing color.
*/
html body .site > .footer
.footer-terminal-cta[data-terminal-state="alternate"]
.footer-terminal-canvas{
  opacity:1!important;
  filter:
    contrast(1.12)
    brightness(1.055)!important;
}

@media(max-width:900px){
  html body .site > .footer{
    padding-top:clamp(34px,5.2vw,46px)!important;
  }

  html body .site > .footer .footer-bottom{
    margin-top:clamp(28px,4.8vw,38px)!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-cta-link{
    padding-bottom:.46em!important;
  }

  html body .site > .footer
  .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .035em)!important;
  }

  html body .site > .footer .footer-bottom{
    margin-top:clamp(26px,7vw,34px)!important;
  }
}


/* =========================================================
   v2.189 — TRUE VIEWPORT-CENTERED FOOTER CTA
   ========================================================= */

/*
  Center the terminal title and arrow as one compact group in the viewport.
  The footer legal row remains distributed left/right as before.
*/
html body .site > .footer .footer-top{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
  text-align:center!important;
}

html body .site > .footer .footer-cta{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  display:block!important;
  flex:0 0 auto!important;
  grid-column:auto!important;
  justify-self:auto!important;
  align-self:center!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding-inline:0!important;
  transform:none!important;
  text-align:center!important;
}

html body .site > .footer .footer-cta-link{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto!important;
  transform:none!important;
  text-align:center!important;
}

html body .site > .footer .footer-terminal-cta{
  display:inline-block!important;
  align-self:center!important;
  margin-inline:auto!important;
}

html body .site > .footer
.footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%) translateY(-4px) scale(.86);
}

html body .site > .footer .footer-cta:is(:hover,:focus-within)
.footer-terminal-cta + .footer-contact-morph{
  transform:translateX(-50%) translateY(0) scale(1);
}


/* =========================================================
   v2.190 — ARROW LOCKED TO TERMINAL TITLE
   ========================================================= */

/*
  Treat LET'S CREATE_ / OTH STUDIO and the morphing arrow as one compact unit.
  The arrow now sits directly beneath the terminal baseline instead of below
  the link's former reserved padding area.
*/
html body .site > .footer .footer-cta-link{
  padding-bottom:.16em!important;
}

html body .site > .footer
.footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  right:auto!important;
  top:calc(100% - .24em)!important;
  margin:0!important;
  transform:
    translateX(-50%)
    translateY(-2px)
    scale(.9)!important;
  transform-origin:50% 50%!important;
}

html body .site > .footer .footer-cta:is(:hover,:focus-within)
.footer-terminal-cta + .footer-contact-morph{
  transform:
    translateX(-50%)
    translateY(0)
    scale(1)!important;
}

/*
  Keep the title/arrow assembly centered as a single visual object, while
  retaining enough separation from the copyright row.
*/
html body .site > .footer .footer-bottom{
  margin-top:clamp(28px,2.65vw,40px)!important;
}

@media(max-width:900px){
  html body .site > .footer .footer-cta-link{
    padding-bottom:.17em!important;
  }

  html body .site > .footer
  .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .23em)!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-cta-link{
    padding-bottom:.18em!important;
  }

  html body .site > .footer
  .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .22em)!important;
    transform:
      translateX(-50%)
      translateY(-1px)
      scale(.92)!important;
  }

  html body .site > .footer .footer-cta:is(:hover,:focus-within)
  .footer-terminal-cta + .footer-contact-morph{
    transform:
      translateX(-50%)
      translateY(0)
      scale(1)!important;
  }

  html body .site > .footer .footer-bottom{
    margin-top:clamp(26px,6.4vw,32px)!important;
  }
}


/* =========================================================
   v2.191 — BALANCED MOBILE VERTICAL RHYTHM
   ========================================================= */

/*
  A coherent mobile spacing system for the navigation, hero, XY module,
  Selected Work cue and portfolio archive. Desktop geometry is unchanged.
*/
@media(max-width:680px){
  :root{
    --mobile-rhythm-xs:8px;
    --mobile-rhythm-sm:14px;
    --mobile-rhythm-md:22px;
    --mobile-rhythm-lg:30px;
    --mobile-rhythm-section:40px;
  }

  /* Header: compact but still comfortably tappable. */
  .nav{
    min-height:68px!important;
    padding:
      max(12px,env(safe-area-inset-top))
      14px
      12px!important;
  }

  /*
    Start the hero cleanly below the fixed header. Remove the accumulated
    bottom padding that previously combined with the archive's top margin.
  */
  .heezy{
    min-height:auto!important;
    padding-top:96px!important;
    padding-bottom:10px!important;
  }

  .heezy-copy{
    margin:0!important;
    padding:0!important;
  }

  .heezy-text-panel{
    margin:0!important;
  }

  /* Headline → rotating technical-expertise line. */
  .heezy-text-panel .subtitle{
    margin-top:28px!important;
    margin-bottom:0!important;
  }

  /* Technical-expertise line → XY module. */
  .signal-landscape{
    margin-top:28px!important;
  }

  .signal-landscape__header{
    gap:9px!important;
    padding:
      0
      0
      10px!important;
  }

  .signal-landscape__readouts{
    gap:5px!important;
  }

  .signal-landscape__visual{
    margin-top:0!important;
  }

  /* XY module → Selected Work cue. */
  .heezy-footer{
    min-height:0!important;
    margin-top:27px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  .scroll-cue{
    gap:10px!important;
    min-height:20px;
  }

  .scroll-line{
    width:54px!important;
  }

  /*
    Selected Work cue → archive. These three values replace the former
    combined hero padding + 38px portfolio margin, which produced the large
    visually empty band shown in the iPhone capture.
  */
  .portfolio-band{
    margin-top:18px!important;
    margin-bottom:26px!important;
  }

  .portfolio-band__header{
    min-height:42px!important;
    padding:
      9px
      14px
      8px!important;
  }

  .portfolio-band__identity{
    align-items:center!important;
  }

  .portfolio-band__rows{
    margin-top:0!important;
  }

  .portfolio-row__toolbar{
    min-height:24px!important;
  }

  .portfolio-row .gallery{
    padding-top:18px!important;
    padding-bottom:15px!important;
  }
}

/* iPhone 13 Pro and similarly sized phones. */
@media(max-width:430px){
  .nav{
    min-height:64px!important;
    padding:
      max(11px,env(safe-area-inset-top))
      14px
      11px!important;
  }

  .heezy{
    padding-top:90px!important;
    padding-bottom:7px!important;
  }

  .heezy-text-panel .subtitle{
    margin-top:24px!important;
  }

  .signal-landscape{
    margin-top:25px!important;
  }

  .signal-landscape__header{
    gap:8px!important;
    padding-bottom:9px!important;
  }

  .heezy-footer{
    margin-top:23px!important;
  }

  .scroll-cue{
    gap:9px!important;
  }

  .scroll-line{
    width:48px!important;
  }

  .portfolio-band{
    margin-top:15px!important;
    margin-bottom:22px!important;
  }

  .portfolio-band__header{
    min-height:40px!important;
    padding:
      8px
      12px
      7px!important;
  }

  .portfolio-row__toolbar{
    min-height:22px!important;
    padding-inline:12px!important;
  }

  .portfolio-row .gallery{
    padding-top:17px!important;
    padding-bottom:14px!important;
  }
}

/* Short mobile landscape viewports retain the same hierarchy without excess. */
@media(max-width:900px) and (max-height:520px){
  .nav{
    min-height:58px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }

  .heezy{
    padding-top:78px!important;
  }

  .heezy-text-panel .subtitle{
    margin-top:20px!important;
  }

  .signal-landscape{
    margin-top:22px!important;
  }

  .heezy-footer{
    margin-top:20px!important;
  }

  .portfolio-band{
    margin-top:14px!important;
  }
}


/* =========================================================
   v2.192 — XY FIRST-CONTACT TOOLTIP / SHARED THEME STYLE
   ========================================================= */

/*
  The mode-switch and XY-pad introductions are the same tooltip component.
  This final grouped selector prevents older signal-field rules from changing
  the XY version independently.
*/
.y-tooltip[data-tooltip-id="y1"] .y-tooltip-label,
.y-tooltip[data-tooltip-id="xy-pad-intro"] .y-tooltip-label{
  border-color:var(--yt-border)!important;
  background-image:
    linear-gradient(
      108deg,
      var(--yt-text-a) 0%,
      var(--yt-text-b) 44%,
      var(--yt-text-c) 100%
    ),
    linear-gradient(
      180deg,
      var(--yt-panel-a) 0%,
      var(--yt-panel-b) 100%
    )!important;
  background-size:220% 100%,100% 100%!important;
  background-position:22% 50%,0 0!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text,padding-box!important;
  background-clip:text,padding-box!important;
  -webkit-text-fill-color:transparent!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 10px var(--yt-glow),
    0 8px 22px var(--yt-shadow)!important;
  filter:
    brightness(1)
    contrast(1)
    drop-shadow(0 0 3px var(--yt-glow))!important;
  text-shadow:none!important;
}

.y-tooltip[data-tooltip-id="y1"] .y-tooltip-label::before,
.y-tooltip[data-tooltip-id="xy-pad-intro"] .y-tooltip-label::before{
  opacity:.3!important;
  background:
    repeating-linear-gradient(
      180deg,
      var(--yt-scan) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      90deg,
      var(--yt-glow),
      transparent 24%,
      var(--yt-glow) 61%,
      transparent
    )!important;
}

.y-tooltip[data-tooltip-id="y1"] .y-tooltip-label::after,
.y-tooltip[data-tooltip-id="xy-pad-intro"] .y-tooltip-label::after{
  border-color:var(--yt-border)!important;
}

.y-tooltip[data-tooltip-id="y1"] .y-tooltip-line-path,
.y-tooltip[data-tooltip-id="xy-pad-intro"] .y-tooltip-line-path{
  stroke:var(--yt-line)!important;
  opacity:.72!important;
  filter:
    drop-shadow(0 0 2px var(--yt-glow))!important;
}

.y-tooltip[data-tooltip-id="y1"] .y-tooltip-line-node,
.y-tooltip[data-tooltip-id="xy-pad-intro"] .y-tooltip-line-node{
  fill:var(--yt-node)!important;
  opacity:.86!important;
  filter:
    drop-shadow(0 0 3px var(--yt-glow))!important;
}


/* =========================================================
   v2.193 — CONSISTENT XY → INDEX → PORTFOLIO RHYTHM
   ========================================================= */

/*
  Treat the three elements as one transition sequence:
  XY field → Portfolio / 2026 + Selected Work → archive panel.
  Remove the former combination of hero bottom padding and large portfolio
  margin that produced a disproportionate empty band on wide screens.
*/
html body .site > .heezy{
  padding-bottom:0!important;
}

html body .site > .heezy .heezy-footer{
  min-height:18px!important;
  margin-top:clamp(25px,2.25vw,36px)!important;
  padding:0!important;
  align-items:center!important;
  line-height:1!important;
}

html body .site > .heezy .heezy-index,
html body .site > .heezy .scroll-cue{
  min-height:18px!important;
  align-items:center!important;
  line-height:1!important;
}

html body .site > .portfolio-band{
  margin-top:clamp(27px,2.4vw,40px)!important;
  margin-bottom:clamp(34px,3.6vw,54px)!important;
}

/*
  Keep the left and right transition labels optically level and restrained.
*/
html body .site > .heezy .heezy-index,
html body .site > .heezy .scroll-cue{
  font-size:clamp(.61rem,.64vw,.69rem)!important;
  letter-spacing:.115em!important;
}

html body .site > .heezy .scroll-cue{
  gap:clamp(10px,1vw,15px)!important;
}

html body .site > .heezy .scroll-line{
  width:clamp(48px,4.2vw,66px)!important;
}

/* Medium desktop and tablet: retain the same proportional sequence. */
@media(max-width:1180px){
  html body .site > .heezy .heezy-footer{
    margin-top:clamp(24px,2.8vw,32px)!important;
  }

  html body .site > .portfolio-band{
    margin-top:clamp(24px,3vw,34px)!important;
    margin-bottom:clamp(30px,4vw,44px)!important;
  }
}

/*
  Mobile keeps the already compact stack, but uses the same relative spacing:
  the Selected Work cue sits midway between the XY field and archive panel.
*/
@media(max-width:680px){
  html body .site > .heezy{
    padding-bottom:0!important;
  }

  html body .site > .heezy .heezy-footer{
    margin-top:clamp(22px,6vw,28px)!important;
    min-height:20px!important;
  }

  html body .site > .heezy .scroll-cue{
    min-height:20px!important;
    gap:9px!important;
  }

  html body .site > .portfolio-band{
    margin-top:clamp(20px,5.6vw,26px)!important;
    margin-bottom:clamp(22px,6vw,30px)!important;
  }
}

/* iPhone-class widths receive slightly tighter but still even spacing. */
@media(max-width:430px){
  html body .site > .heezy .heezy-footer{
    margin-top:22px!important;
  }

  html body .site > .portfolio-band{
    margin-top:20px!important;
    margin-bottom:24px!important;
  }
}

/* Short landscape screens avoid an oversized transition zone. */
@media(max-width:900px) and (max-height:520px){
  html body .site > .heezy .heezy-footer{
    margin-top:18px!important;
  }

  html body .site > .portfolio-band{
    margin-top:17px!important;
    margin-bottom:20px!important;
  }
}


/* =========================================================
   v2.194 — GUARANTEED VISIBLE XY TOOLTIP
   ========================================================= */

/*
  Dedicated XY introduction uses the exact same y-tooltip component and theme
  variables as the mode-switch introduction, but sits above the interactive
  canvas and project-node layers.
*/
.xy-pad-tooltip-layer{
  z-index:240!important;
  display:block!important;
  pointer-events:none!important;
}

.xy-pad-tooltip{
  display:block!important;
}

.xy-pad-tooltip.is-visible{
  opacity:1!important;
  visibility:visible!important;
}

.xy-pad-tooltip .y-tooltip-label{
  z-index:2!important;
}

.xy-pad-tooltip .y-tooltip-line{
  z-index:1!important;
}

/* Same theme-aware visual contract as the color-mode tooltip. */
.xy-pad-tooltip .y-tooltip-label{
  border-color:var(--yt-border)!important;
  background-image:
    linear-gradient(
      108deg,
      var(--yt-text-a) 0%,
      var(--yt-text-b) 44%,
      var(--yt-text-c) 100%
    ),
    linear-gradient(
      180deg,
      var(--yt-panel-a) 0%,
      var(--yt-panel-b) 100%
    )!important;
  background-size:220% 100%,100% 100%!important;
  background-position:22% 50%,0 0!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text,padding-box!important;
  background-clip:text,padding-box!important;
  -webkit-text-fill-color:transparent!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 10px var(--yt-glow),
    0 8px 22px var(--yt-shadow)!important;
  filter:
    brightness(1)
    contrast(1)
    drop-shadow(0 0 3px var(--yt-glow))!important;
  text-shadow:none!important;
}

.xy-pad-tooltip .y-tooltip-line-path{
  stroke:var(--yt-line)!important;
  opacity:.72!important;
  filter:
    drop-shadow(0 0 2px var(--yt-glow))!important;
}

.xy-pad-tooltip .y-tooltip-line-node{
  fill:var(--yt-node)!important;
  opacity:.86!important;
  filter:
    drop-shadow(0 0 3px var(--yt-glow))!important;
}


/* =========================================================
   v2.195 — TRUE VERTICAL FOOTER CENTERING
   ========================================================= */

/*
  Keep the LET'S CREATE_ terminal title and the arrow/mail morph vertically
  centered inside the footer's main stage across desktop, tablet and phone.
  The legal row remains docked at the bottom, but the CTA block is centered
  in the available visual area above it.
*/
html body .site > .footer{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  min-height:clamp(220px,24vh,320px)!important;
  padding-top:clamp(28px,3vw,42px)!important;
  padding-bottom:clamp(14px,1.6vw,22px)!important;
}

html body .site > .footer .footer-top{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  height:100%!important;
  padding-block:0!important;
}

html body .site > .footer .footer-cta{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:center!important;
  margin:auto!important;
  min-height:0!important;
}

html body .site > .footer .footer-cta-link{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto!important;
  padding-top:0!important;
  padding-bottom:.14em!important;
}

html body .site > .footer .footer-terminal-cta{
  margin:0 auto!important;
}

html body .site > .footer .footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  right:auto!important;
  top:calc(100% - .22em)!important;
  transform:
    translateX(-50%)
    translateY(-1px)
    scale(.92)!important;
  transform-origin:50% 50%!important;
}

html body .site > .footer .footer-bottom{
  align-self:end!important;
  margin-top:0!important;
  padding-top:clamp(10px,.9vw,14px)!important;
}

@media (max-width: 900px){
  html body .site > .footer{
    min-height:clamp(200px,22vh,270px)!important;
    padding-top:clamp(24px,4.4vw,34px)!important;
    padding-bottom:clamp(12px,2vw,18px)!important;
  }

  html body .site > .footer .footer-cta-link{
    padding-bottom:.16em!important;
  }

  html body .site > .footer .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .20em)!important;
    transform:
      translateX(-50%)
      translateY(-1px)
      scale(.93)!important;
  }

  html body .site > .footer .footer-bottom{
    padding-top:12px!important;
  }
}

@media (max-width: 680px){
  html body .site > .footer{
    min-height:clamp(180px,21vh,232px)!important;
    padding-top:clamp(22px,7vw,30px)!important;
    padding-bottom:max(12px, env(safe-area-inset-bottom))!important;
  }

  html body .site > .footer .footer-cta-link{
    padding-bottom:.18em!important;
  }

  html body .site > .footer .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .18em)!important;
    transform:
      translateX(-50%)
      translateY(0)
      scale(.94)!important;
  }

  html body .site > .footer .footer-bottom{
    padding-top:10px!important;
  }
}

@media (max-width: 420px){
  html body .site > .footer{
    min-height:170px!important;
    padding-top:20px!important;
    padding-bottom:max(10px, env(safe-area-inset-bottom))!important;
  }

  html body .site > .footer .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .16em)!important;
  }
}


/* =========================================================
   v2.196 — PUBLISH-READY FOOTER + MOBILE STABILITY
   ========================================================= */

/* XY introduction is intentionally removed. */
.xy-pad-tooltip-layer,
.xy-pad-tooltip{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/*
  Stable footer geometry:
  - fixed responsive visual stage
  - CTA centered in the full footer
  - legal row docked to the bottom
  - no JS height measurement or feedback loop
*/
html body .site > .footer{
  --footer-legal-inset:clamp(14px,1.35vw,20px);
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:clamp(250px,27svh,350px)!important;
  max-height:none!important;
  margin:0!important;
  padding:
    0
    var(--page)
    var(--footer-legal-inset)!important;
  overflow:hidden!important;
  contain:layout paint!important;
}

html body .site > .footer .footer-top{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}

html body .site > .footer .footer-cta{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:3!important;
  display:block!important;
  width:max-content!important;
  max-width:calc(100% - (2 * var(--page)))!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  pointer-events:auto!important;
}

html body .site > .footer .footer-cta-link{
  position:relative!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:
    0
    0
    .32em!important;
  transform:none!important;
  text-align:center!important;
}

html body .site > .footer .footer-terminal-cta{
  display:inline-block!important;
  margin:0 auto!important;
  transform:none!important;
}

html body .site > .footer
.footer-terminal-cta + .footer-contact-morph{
  left:50%!important;
  right:auto!important;
  top:calc(100% - .10em)!important;
  margin:0!important;
  transform:
    translateX(-50%)
    translateY(0)
    scale(.94)!important;
  transform-origin:50% 50%!important;
}

html body .site > .footer .footer-cta:is(:hover,:focus-within)
.footer-terminal-cta + .footer-contact-morph{
  transform:
    translateX(-50%)
    translateY(2px)
    scale(1)!important;
}

html body .site > .footer .footer-bottom{
  position:absolute!important;
  z-index:4!important;
  left:var(--page)!important;
  right:var(--page)!important;
  bottom:var(--footer-legal-inset)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* Eliminate every obsolete footer particle layer. */
.footer-lfo-fireworks,
.footer-lfo-firework,
.footer-ambient-lfo,
.footer-sparkle,
.footer-cta-sparkles{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}

/*
  Global horizontal containment prevents transformed decorative layers,
  temporary project connectors and browser subpixel rounding from widening
  or vertically destabilizing the mobile document.
*/
html,
body,
.site{
  max-width:100%!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
  overflow-x:clip!important;
}

html,
body{
  height:auto!important;
  min-height:0!important;
}

body{
  position:relative!important;
}

.site{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
}

/* Remove the old JS-controlled footer height if it remains in browser state. */
html body .site > .footer{
  --footer-exact-height:auto!important;
}

/*
  Coarse-pointer/mobile stability:
  no cursor artifacts, particle systems or large transformed burst layers.
*/
@media(max-width:900px), (hover:none), (pointer:coarse){
  .cursor-plus,
  .cursor-glow,
  .footer-lfo-fireworks,
  .footer-lfo-firework,
  .footer-ambient-lfo,
  .footer-sparkle,
  .footer-cta-sparkles,
  .x1-matrix-burst{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    animation:none!important;
    transform:none!important;
  }
}

@media(max-width:900px){
  html body .site > .footer{
    --footer-legal-inset:clamp(12px,2.4vw,17px);
    min-height:clamp(220px,25svh,292px)!important;
  }

  html body .site > .footer .footer-cta{
    max-width:calc(100% - 32px)!important;
  }

  html body .site > .footer .footer-cta-link{
    padding-bottom:.34em!important;
  }

  html body .site > .footer .footer-bottom{
    left:max(16px,var(--page))!important;
    right:max(16px,var(--page))!important;
  }
}

@media(max-width:680px){
  html body .site > .footer{
    --footer-legal-inset:max(11px,env(safe-area-inset-bottom));
    min-height:clamp(190px,23svh,236px)!important;
  }

  html body .site > .footer .footer-cta{
    top:47%!important;
    max-width:calc(100% - 26px)!important;
  }

  html body .site > .footer .footer-cta-link{
    padding-bottom:.36em!important;
  }

  html body .site > .footer
  .footer-terminal-cta + .footer-contact-morph{
    top:calc(100% - .08em)!important;
    transform:
      translateX(-50%)
      translateY(0)
      scale(.95)!important;
  }

  html body .site > .footer .footer-bottom{
    left:14px!important;
    right:14px!important;
    gap:12px!important;
    font-size:.61rem!important;
    letter-spacing:.085em!important;
    white-space:nowrap!important;
  }

  /*
    Mobile animation containment: transformed sections cannot create
    scrollable overflow beyond their own boxes.
  */
  .heezy,
  .portfolio-band,
  .signal-landscape,
  .footer{
    max-width:100%!important;
    overflow-x:clip!important;
  }
}

@media(max-width:390px){
  html body .site > .footer{
    min-height:184px!important;
  }

  html body .site > .footer .footer-bottom{
    left:12px!important;
    right:12px!important;
    font-size:.56rem!important;
    letter-spacing:.065em!important;
  }
}

@supports not (overflow:clip){
  html,
  body,
  .site,
  .heezy,
  .portfolio-band,
  .signal-landscape{
    overflow-x:hidden!important;
  }
}


/* =========================================================
   v2.197 — FINAL INTERACTION + OPTICAL BALANCE PASS
   ========================================================= */

html body .site > .footer{
  --footer-cta-optical-y:43.5%;
}

html body .site > .footer .footer-cta{
  top:var(--footer-cta-optical-y)!important;
}

html body .site > .footer .footer-terminal-cta{
  color:var(--text)!important;
}

html body .site > .footer .footer-terminal-canvas{
  opacity:1!important;
  filter:
    contrast(1.13)
    brightness(1.2)
    drop-shadow(
      0 0 2px
      color-mix(
        in srgb,
        currentColor 20%,
        transparent
      )
    )!important;
}

html body .site > .footer
.footer-terminal-cta + .footer-contact-morph{
  top:calc(100% - .08em)!important;
}

.signal-landscape__nodes{
  transition:
    opacity .14s ease,
    visibility 0s linear 0s;
}

.signal-landscape__visual.is-xy-dragging
.signal-landscape__nodes{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    opacity .1s ease,
    visibility 0s linear .1s;
}

.portfolio-band .project.is-signal-linked{
  position:relative;
  z-index:3;
}

@media(max-width:900px), (hover:none), (pointer:coarse){
  html{
    scroll-behavior:auto!important;
  }

  .reveal,
  .reveal.visible{
    transform:none!important;
    filter:none!important;
  }

  .site,
  .heezy,
  .portfolio-band,
  .signal-landscape,
  .footer{
    max-width:100%!important;
  }

  .heezy,
  .portfolio-band,
  .footer{
    contain:layout paint!important;
  }

  .theme-icon-easter,
  .theme-matrix-mini::before,
  #typed{
    animation-duration:0s!important;
    animation-iteration-count:1!important;
  }

  body > .signal-project-preview:not(.is-visible),
  body > .signal-portfolio-beacon:not(.is-visible),
  body > .signal-connector-layer:not(.is-visible){
    left:0!important;
    top:0!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
}

@media(max-width:900px){
  html body .site > .footer{
    --footer-cta-optical-y:42.5%;
  }

  html body .site > .footer .footer-terminal-canvas{
    filter:
      contrast(1.11)
      brightness(1.18)
      drop-shadow(
        0 0 1px
        color-mix(
          in srgb,
          currentColor 17%,
          transparent
        )
      )!important;
  }
}

@media(max-width:680px){
  html body .site > .footer{
    --footer-cta-optical-y:41.5%;
  }

  html body .site > .footer .footer-terminal-canvas{
    filter:
      contrast(1.09)
      brightness(1.17)!important;
  }
}

@supports not (color:color-mix(in srgb,white,black)){
  html body .site > .footer .footer-terminal-canvas{
    filter:
      contrast(1.13)
      brightness(1.2)!important;
  }
}


/* =========================================================
   v2.198 — DARK-MODE FOOTER ARROW / MAILBOX IN WHITE
   ========================================================= */

html[data-theme="dark"] .footer-contact-morph{
  color:#f2f4f3!important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.34))
    drop-shadow(0 0 9px rgba(210,220,216,.12))!important;
}

html[data-theme="dark"] #footerContactGradient stop:nth-child(1){
  stop-color:#bfc5c2!important;
}

html[data-theme="dark"] #footerContactGradient stop:nth-child(2){
  stop-color:#d9dddb!important;
}

html[data-theme="dark"] #footerContactGradient stop:nth-child(3){
  stop-color:#f1f3f2!important;
}

html[data-theme="dark"] #footerContactGradient stop:nth-child(4){
  stop-color:#ffffff!important;
}

html[data-theme="dark"] #footerContactMorphPrimary,
html[data-theme="dark"] #footerContactMorphSecondary{
  stroke:url(#footerContactGradient)!important;
}

html[data-theme="dark"] #footerContactMorphPrimary{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.38))
    drop-shadow(0 0 7px rgba(220,228,224,.14))!important;
}

html[data-theme="dark"] #footerContactMorphSecondary{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.28))
    drop-shadow(0 0 6px rgba(220,228,224,.1))!important;
}

html[data-theme="dark"]
.footer-cta-link:is(:hover,:focus-visible)
.footer-contact-morph{
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.48))
    drop-shadow(0 0 12px rgba(220,228,224,.2))!important;
}


/* =========================================================
   v2.199 — FOOTER CONTACT DISCOVERY
   ========================================================= */

/* The animated arrow/mailbox is an explicit extension of the mailto link. */
html body .site > .footer .footer-contact-morph{
  z-index:8!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation;
}

html body .site > .footer .footer-contact-morph::before{
  content:"";
  position:absolute;
  inset:-11px -15px;
  border-radius:10px;
}

html body .site > .footer .footer-contact-morph svg,
html body .site > .footer .footer-contact-morph path{
  pointer-events:none!important;
}

/* Dual-connector helper uses the established mode-switch tooltip language. */
.footer-connect-tooltip-layer{
  position:fixed;
  inset:0;
  z-index:280;
  pointer-events:none;
  overflow:hidden;
}

.footer-connect-tooltip{
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .16s ease,
    visibility 0s linear .16s;
}

.footer-connect-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

.footer-connect-tooltip__label{
  position:fixed!important;
  z-index:3;
  max-width:min(280px,calc(100vw - 28px));
  white-space:nowrap!important;
}

.footer-connect-tooltip__lines{
  position:fixed;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  overflow:visible;
}

.footer-connect-tooltip__path{
  fill:none;
  stroke:var(--yt-line)!important;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:8 5 2 5;
  vector-effect:non-scaling-stroke;
  opacity:.76!important;
  filter:
    drop-shadow(0 0 2px var(--yt-glow))!important;
}

.footer-connect-tooltip.is-visible
.footer-connect-tooltip__path{
  animation:footerConnectTooltipFlow 1.05s linear infinite;
}

.footer-connect-tooltip__path--mail{
  animation-delay:-.34s!important;
}

.footer-connect-tooltip__node{
  fill:var(--yt-node)!important;
  opacity:.9!important;
  filter:
    drop-shadow(0 0 3px var(--yt-glow))!important;
}

@keyframes footerConnectTooltipFlow{
  to{
    stroke-dashoffset:-20;
  }
}

/*
  Temporary background cluster: lines originate at the footer perimeter and
  draw inward toward the terminal text and animated mail control.
*/
.footer-connect-cluster{
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}

.footer-connect-cluster.is-active{
  opacity:1;
  visibility:visible;
}

.footer-connect-cluster__path{
  fill:none;
  stroke:var(--yt-line);
  stroke-width:.75;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  path-length:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  filter:
    drop-shadow(0 0 2px var(--yt-glow));
}

.footer-connect-cluster__path--mail{
  stroke-width:.9;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__path{
  animation:
    footerConnectClusterDraw
    1.05s
    cubic-bezier(.2,.72,.24,1)
    both;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__path:nth-child(2n){
  animation-delay:.05s;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__path:nth-child(3n){
  animation-delay:.1s;
}

.footer-connect-cluster__node{
  fill:var(--yt-node);
  opacity:0;
  filter:
    drop-shadow(0 0 4px var(--yt-glow));
}

.footer-connect-cluster.is-active
.footer-connect-cluster__node{
  animation:
    footerConnectClusterNode
    1.25s
    cubic-bezier(.2,.72,.24,1)
    both;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__node:nth-last-child(-n+2){
  animation-delay:.12s;
}

@keyframes footerConnectClusterDraw{
  0%{
    stroke-dashoffset:1;
    opacity:0;
  }

  18%{
    opacity:.48;
  }

  72%{
    stroke-dashoffset:0;
    opacity:.54;
  }

  100%{
    stroke-dashoffset:0;
    opacity:0;
  }
}

@keyframes footerConnectClusterNode{
  0%,12%{
    opacity:0;
    transform:scale(.2);
    transform-origin:center;
  }

  58%{
    opacity:.74;
    transform:scale(1.35);
  }

  100%{
    opacity:0;
    transform:scale(.6);
  }
}

/* Keep the CTA and legal row above the temporary background signal. */
html body .site > .footer .footer-cta,
html body .site > .footer .footer-bottom{
  z-index:4!important;
}

/* Theme parity with the existing color-mode tooltip. */
.footer-connect-tooltip__label{
  border-color:var(--yt-border)!important;
  background-image:
    linear-gradient(
      108deg,
      var(--yt-text-a) 0%,
      var(--yt-text-b) 44%,
      var(--yt-text-c) 100%
    ),
    linear-gradient(
      180deg,
      var(--yt-panel-a) 0%,
      var(--yt-panel-b) 100%
    )!important;
  background-size:220% 100%,100% 100%!important;
  background-position:22% 50%,0 0!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text,padding-box!important;
  background-clip:text,padding-box!important;
  -webkit-text-fill-color:transparent!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 10px var(--yt-glow),
    0 8px 22px var(--yt-shadow)!important;
  filter:
    brightness(1)
    contrast(1)
    drop-shadow(0 0 3px var(--yt-glow))!important;
  text-shadow:none!important;
}

@media(max-width:680px){
  .footer-connect-tooltip__label{
    max-width:calc(100vw - 24px);
    padding:8px 9px 7px!important;
    font-size:.62rem!important;
    white-space:normal!important;
  }

  .footer-connect-cluster__path{
    stroke-width:.65;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-connect-tooltip__path,
  .footer-connect-cluster__path,
  .footer-connect-cluster__node{
    animation:none!important;
  }

  .footer-connect-cluster.is-active
  .footer-connect-cluster__path{
    stroke-dashoffset:0;
    opacity:.28;
  }
}


/* =========================================================
   v2.200 — NATURE TOOLTIP SIGNALS + STRONGER BROWN ROOTS
   ========================================================= */

/*
  Nature mode uses a distinctly botanical green for every tooltip connector,
  endpoint and inward footer cluster. Final high-specificity selectors prevent
  older orange signal rules from leaking into this mode.
*/
html[data-theme="nature"]{
  --yt-line:#69c85d;
  --yt-node:#c9efc2;
  --yt-glow:rgba(105,200,93,.34);
}

html[data-theme="nature"] .y-tooltip-line-path,
html[data-theme="nature"] .footer-connect-tooltip__path,
html[data-theme="nature"] .footer-connect-cluster__path{
  stroke:#69c85d!important;
  opacity:.82!important;
  filter:
    drop-shadow(0 0 2px rgba(105,200,93,.5))
    drop-shadow(0 0 7px rgba(66,151,65,.22))!important;
}

html[data-theme="nature"] .y-tooltip-line-node,
html[data-theme="nature"] .footer-connect-tooltip__node,
html[data-theme="nature"] .footer-connect-cluster__node{
  fill:#c9efc2!important;
  stroke:#4d9e49!important;
  stroke-width:.55!important;
  opacity:.94!important;
  filter:
    drop-shadow(0 0 3px rgba(105,200,93,.52))
    drop-shadow(0 0 8px rgba(66,151,65,.2))!important;
}

/*
  Increase the brown root hierarchy without turning it into a flat bright
  graphic. Primary branches are stronger; fine tendrils remain subordinate.
*/
html[data-theme="nature"] .heezy-root-visual{
  opacity:1!important;
  filter:
    drop-shadow(0 0 7px rgba(94,54,27,.2))
    drop-shadow(0 0 16px rgba(71,42,23,.1))!important;
}

html[data-theme="nature"] .heezy-root-visual::before{
  opacity:.78!important;
  background:
    radial-gradient(
      circle,
      rgba(129,78,42,.17),
      rgba(84,49,27,.07) 42%,
      transparent 68%
    )!important;
  filter:blur(20px)!important;
}

html[data-theme="nature"] .heezy-root-visual .root-branch{
  stroke:#a66a3c!important;
  stroke-width:1.42!important;
  opacity:.94!important;
  filter:
    drop-shadow(0 0 1px rgba(191,126,75,.72))
    drop-shadow(0 0 5px rgba(102,59,29,.34))
    drop-shadow(0 0 10px rgba(61,35,19,.14))!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.root-thick{
  stroke:#b67843!important;
  stroke-width:1.72!important;
  opacity:1!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.secondary,
html[data-theme="nature"] .heezy-root-visual
.root-branch.root-soft{
  stroke:#92582f!important;
  stroke-width:1.08!important;
  opacity:.84!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.fine,
html[data-theme="nature"] .heezy-root-visual
.root-branch.root-tendril,
html[data-theme="nature"] .heezy-root-visual
.root-hover-tendril{
  stroke:#bd7c49!important;
  stroke-width:.9!important;
  opacity:.82!important;
  filter:
    drop-shadow(0 0 3px rgba(126,72,37,.3))!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.digital{
  stroke:#7d4827!important;
  stroke-width:.96!important;
  opacity:.8!important;
}

html[data-theme="nature"] .heezy-root-visual .root-node{
  fill:#132416!important;
  stroke:#c17d49!important;
  stroke-width:1.28!important;
  opacity:.96!important;
  filter:
    drop-shadow(0 0 4px rgba(159,94,48,.42))!important;
}

html[data-theme="nature"] .heezy-root-visual .root-node-core,
html[data-theme="nature"] .heezy-root-visual .root-tip{
  fill:#d08b54!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 4px rgba(174,103,54,.46))!important;
}

/* Retain the stronger visibility at reduced motion and on smaller devices. */
@media(prefers-reduced-motion:reduce){
  html[data-theme="nature"] .heezy-root-visual .root-branch{
    opacity:.94!important;
  }
}

@media(max-width:680px){
  html[data-theme="nature"] .heezy-root-visual .root-branch{
    stroke-width:1.3!important;
  }

  html[data-theme="nature"] .heezy-root-visual
  .root-branch.root-thick{
    stroke-width:1.56!important;
  }

  html[data-theme="nature"] .heezy-root-visual
  .root-branch.fine,
  html[data-theme="nature"] .heezy-root-visual
  .root-branch.root-tendril{
    stroke-width:.84!important;
    opacity:.86!important;
  }
}


/* =========================================================
   v2.201 — VISIBLE FOOTER HELPER + TRUE NATURE SIGNAL COLOR
   ========================================================= */

/*
  The shared y-tooltip label starts at opacity:0. The footer helper uses its
  own root class, so explicitly promote the label when the helper is active.
*/
.footer-connect-tooltip-layer{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:420!important;
}

.footer-connect-tooltip-layer.is-visible{
  pointer-events:none!important;
}

.footer-connect-tooltip.is-visible{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.footer-connect-tooltip.is-visible
.footer-connect-tooltip__label{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translateY(0)!important;
}

.footer-connect-tooltip.is-visible
.footer-connect-tooltip__lines{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.footer-connect-tooltip.is-visible
.footer-connect-tooltip__path{
  opacity:.9!important;
}

/*
  Make the inward footer signal clearly perceptible without becoming a panel.
*/
.footer-connect-cluster{
  z-index:2!important;
  background:
    radial-gradient(
      circle at 50% 45%,
      color-mix(in srgb,var(--yt-glow) 42%,transparent) 0,
      color-mix(in srgb,var(--yt-glow) 16%,transparent) 24%,
      transparent 64%
    )!important;
  transform:scale(1.035);
  transform-origin:50% 50%;
}

.footer-connect-cluster.is-active{
  animation:footerConnectClusterSurface 1.45s ease-out both;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__path{
  stroke-width:1.05!important;
  animation-duration:1.18s!important;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__node{
  animation-duration:1.35s!important;
}

@keyframes footerConnectClusterSurface{
  0%{
    opacity:0;
    transform:scale(1.08);
    filter:brightness(.82);
  }

  24%{
    opacity:1;
    transform:scale(1.015);
    filter:brightness(1.16);
  }

  72%{
    opacity:.86;
    transform:scale(1);
    filter:brightness(1);
  }

  100%{
    opacity:0;
    transform:scale(.985);
    filter:brightness(.94);
  }
}

/*
  Nature mode: hard override every tooltip and footer-discovery connector.
  This comes after all historical orange rules and uses higher specificity.
*/
html[data-theme="nature"] body
.y-tooltip-layer .y-tooltip-line-path,
html[data-theme="nature"] body
.footer-connect-tooltip-layer .footer-connect-tooltip__path,
html[data-theme="nature"] body
.site > .footer .footer-connect-cluster__path{
  stroke:#64c85d!important;
  color:#64c85d!important;
  opacity:.92!important;
  filter:
    drop-shadow(0 0 2px rgba(100,200,93,.68))
    drop-shadow(0 0 8px rgba(69,157,65,.3))!important;
}

html[data-theme="nature"] body
.y-tooltip-layer .y-tooltip-line-node,
html[data-theme="nature"] body
.footer-connect-tooltip-layer .footer-connect-tooltip__node,
html[data-theme="nature"] body
.site > .footer .footer-connect-cluster__node{
  fill:#d3f2cc!important;
  stroke:#489846!important;
  stroke-width:.65!important;
  opacity:.98!important;
  filter:
    drop-shadow(0 0 3px rgba(100,200,93,.68))
    drop-shadow(0 0 9px rgba(69,157,65,.28))!important;
}

html[data-theme="nature"] body
.footer-connect-tooltip-layer .footer-connect-tooltip__label{
  --yt-line:#64c85d;
  --yt-node:#d3f2cc;
  --yt-glow:rgba(100,200,93,.34);
}

/* Slightly darker brown roots, with the existing stronger visibility kept. */
html[data-theme="nature"] .heezy-root-visual .root-branch{
  stroke:#7d4929!important;
  opacity:.96!important;
  filter:
    drop-shadow(0 0 1px rgba(153,89,48,.72))
    drop-shadow(0 0 5px rgba(82,47,26,.42))
    drop-shadow(0 0 10px rgba(49,28,17,.18))!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.root-thick{
  stroke:#8d542f!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.secondary,
html[data-theme="nature"] .heezy-root-visual
.root-branch.root-soft{
  stroke:#683c23!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.fine,
html[data-theme="nature"] .heezy-root-visual
.root-branch.root-tendril,
html[data-theme="nature"] .heezy-root-visual
.root-hover-tendril{
  stroke:#925631!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.digital{
  stroke:#59321f!important;
}

html[data-theme="nature"] .heezy-root-visual .root-node{
  stroke:#9b5b34!important;
}

html[data-theme="nature"] .heezy-root-visual .root-node-core,
html[data-theme="nature"] .heezy-root-visual .root-tip{
  fill:#a9673d!important;
}

/* Mobile visibility and reliable tap feedback. */
@media(max-width:680px){
  .footer-connect-tooltip-layer{
    z-index:520!important;
  }

  .footer-connect-tooltip.is-visible
  .footer-connect-tooltip__label{
    opacity:1!important;
  }

  .footer-connect-cluster.is-active
  .footer-connect-cluster__path{
    stroke-width:.9!important;
  }
}


/* =========================================================
   v2.202 — TRUE NATURE CONNECTION SYSTEM + EDGE TERMINATION
   ========================================================= */

/*
  Nature mode project-routing system:
  source node → preview popup → portfolio item.
  These final selectors override every historical orange hard-coded stroke.
*/
html[data-theme="nature"] body > .signal-connector-layer{
  --signal-connector:#63c85c!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-path--preview{
  stroke:#d8f3d3!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 2px rgba(224,249,220,.62))
    drop-shadow(0 0 7px rgba(86,190,80,.66))!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-path--portfolio{
  stroke:#63c85c!important;
  opacity:.96!important;
  filter:
    drop-shadow(0 0 2px rgba(111,218,103,.72))
    drop-shadow(0 0 8px rgba(53,144,52,.44))!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-path--preview-glow{
  stroke:#82db79!important;
  opacity:.36!important;
  filter:
    blur(1.2px)
    drop-shadow(0 0 8px rgba(91,201,84,.52))!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-path--portfolio-glow{
  stroke:#4fba4b!important;
  opacity:.31!important;
  filter:
    blur(1.2px)
    drop-shadow(0 0 9px rgba(61,166,59,.5))!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-node{
  fill:#e2f7de!important;
  stroke:#59b955!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 3px rgba(225,249,221,.76))
    drop-shadow(0 0 9px rgba(75,177,71,.68))!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-node--source{
  fill:#67cf60!important;
  stroke:#e5f8e1!important;
}

html[data-theme="nature"] body >
.signal-connector-layer .signal-connector-node--portfolio{
  fill:#8ddd84!important;
  stroke:#dff5da!important;
}

/* Connected project and popup use the same Nature signal language. */
html[data-theme="nature"] .project.is-signal-linked .media{
  box-shadow:
    0 0 0 1px rgba(100,200,93,.84),
    0 0 28px rgba(71,164,67,.24)!important;
}

html[data-theme="nature"] body > .signal-portfolio-beacon{
  color:#e2f5dd!important;
  border-color:rgba(100,200,93,.68)!important;
  box-shadow:
    inset 0 0 0 1px rgba(226,248,221,.05),
    0 0 14px rgba(67,157,63,.26)!important;
}

html[data-theme="nature"] body > .signal-project-preview{
  border-left-color:#63c85c!important;
  box-shadow:
    inset 0 0 0 1px rgba(100,200,93,.08),
    0 14px 34px rgba(0,0,0,.48),
    0 0 18px rgba(62,148,59,.15)!important;
}

html[data-theme="nature"] body >
.signal-project-preview .signal-project-preview__media::after{
  border-left-color:#63c85c!important;
}

html[data-theme="nature"] body >
.signal-project-preview .signal-project-preview__media:is(:hover,:focus-visible){
  border-color:rgba(117,214,108,.68)!important;
  box-shadow:
    inset 0 0 0 1px rgba(100,200,93,.14),
    0 0 16px rgba(69,163,65,.2)!important;
}

/*
  Footer helper target nodes now mark the exterior termination point. Keep
  them compact so the line visibly stops before entering either mail button.
*/
.footer-connect-tooltip__node--target-text,
.footer-connect-tooltip__node--target-mail{
  r:1.8;
}

/* Preserve the requested darker root tone from the previous revision. */
html[data-theme="nature"] .heezy-root-visual .root-branch{
  stroke:#744326!important;
}

html[data-theme="nature"] .heezy-root-visual
.root-branch.root-thick{
  stroke:#824c2b!important;
}


/* =========================================================
   v2.203 — RANDOM FOOTER COPY + CENTER-FADED CLUSTER
   ========================================================= */

.footer-connect-cluster{
  --cluster-rotation:0deg;
  --cluster-scale:1;
  --cluster-center-x:50%;
  --cluster-center-y:44%;
  --cluster-fade-inner:12%;
  --cluster-fade-middle:29%;

  /*
    The network remains strongest at the perimeter and dissolves smoothly
    before reaching the terminal text and mail icon.
  */
  -webkit-mask-image:
    radial-gradient(
      ellipse 38% 46%
      at
      var(--cluster-center-x)
      var(--cluster-center-y),
      transparent 0,
      transparent var(--cluster-fade-inner),
      rgba(0,0,0,.15)
      calc(var(--cluster-fade-inner) + 5%),
      rgba(0,0,0,.58)
      var(--cluster-fade-middle),
      #000 62%
    )!important;
  mask-image:
    radial-gradient(
      ellipse 38% 46%
      at
      var(--cluster-center-x)
      var(--cluster-center-y),
      transparent 0,
      transparent var(--cluster-fade-inner),
      rgba(0,0,0,.15)
      calc(var(--cluster-fade-inner) + 5%),
      rgba(0,0,0,.58)
      var(--cluster-fade-middle),
      #000 62%
    )!important;
  transform:
    rotate(var(--cluster-rotation))
    scale(var(--cluster-scale))!important;
  transform-origin:
    var(--cluster-center-x)
    var(--cluster-center-y)!important;
  will-change:
    opacity,
    transform;
}

.footer-connect-cluster.is-active{
  animation:
    footerConnectClusterSurfaceVaried
    1.5s
    cubic-bezier(.18,.72,.2,1)
    both!important;
}

.footer-connect-cluster.is-active
.footer-connect-cluster__path{
  animation-delay:
    var(--cluster-path-delay,0s)!important;
}

@keyframes footerConnectClusterSurfaceVaried{
  0%{
    opacity:0;
    transform:
      rotate(var(--cluster-rotation))
      scale(calc(var(--cluster-scale) + .035));
    filter:
      brightness(.84)
      blur(.18px);
  }

  24%{
    opacity:.94;
    transform:
      rotate(var(--cluster-rotation))
      scale(calc(var(--cluster-scale) + .008));
    filter:
      brightness(1.1)
      blur(0);
  }

  72%{
    opacity:.72;
    transform:
      rotate(var(--cluster-rotation))
      scale(var(--cluster-scale));
    filter:
      brightness(1);
  }

  100%{
    opacity:0;
    transform:
      rotate(var(--cluster-rotation))
      scale(calc(var(--cluster-scale) - .012));
    filter:
      brightness(.94)
      blur(.12px);
  }
}

.footer-connect-cluster.is-active
.footer-connect-cluster__path{
  opacity:
    var(--cluster-path-opacity,.5);
}

/*
  Small alternating cadence changes keep repeated activations organic without
  changing the visual language or center alignment.
*/
.footer-connect-cluster[data-variation="1"].is-active
.footer-connect-cluster__path:nth-child(odd){
  animation-duration:1.08s!important;
}

.footer-connect-cluster[data-variation="2"].is-active
.footer-connect-cluster__path:nth-child(3n){
  animation-duration:1.22s!important;
}

.footer-connect-cluster[data-variation="3"].is-active
.footer-connect-cluster__node{
  animation-delay:.08s!important;
}

.footer-connect-tooltip__label{
  min-width:min-content;
}

@media(max-width:680px){
  .footer-connect-cluster{
    -webkit-mask-image:
      radial-gradient(
        ellipse 48% 42%
        at
        var(--cluster-center-x)
        var(--cluster-center-y),
        transparent 0,
        transparent var(--cluster-fade-inner),
        rgba(0,0,0,.18)
        calc(var(--cluster-fade-inner) + 5%),
        rgba(0,0,0,.6)
        var(--cluster-fade-middle),
        #000 68%
      )!important;
    mask-image:
      radial-gradient(
        ellipse 48% 42%
        at
        var(--cluster-center-x)
        var(--cluster-center-y),
        transparent 0,
        transparent var(--cluster-fade-inner),
        rgba(0,0,0,.18)
        calc(var(--cluster-fade-inner) + 5%),
        rgba(0,0,0,.6)
        var(--cluster-fade-middle),
        #000 68%
      )!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-connect-cluster{
    transform:none!important;
  }

  .footer-connect-cluster.is-active{
    animation:
      footerConnectClusterReduced
      1.2s
      ease-out
      both!important;
  }

  @keyframes footerConnectClusterReduced{
    0%,100%{opacity:0}
    25%,70%{opacity:.52}
  }
}


/* =========================================================
   v2.204 — MATCHED XY HEADER PANELS + LOWERCASE FOOTER COPY
   ========================================================= */

/*
  The left module label now uses the exact visual grammar of the live FX
  readout: same technical panel, border system, typography and density.
*/
html body .signal-landscape__header{
  align-items:start!important;
}

html body .signal-landscape__header > div:first-child{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  min-width:0!important;
}

html body .signal-landscape__eyebrow{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:7px 10px 6px!important;
  overflow:hidden!important;
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(5,6,6,.78) 18%,
      rgba(5,6,6,.72)
    )!important;
  border:1px solid rgba(var(--landscape-ink),.18)!important;
  border-left:2px solid rgba(var(--landscape-accent),.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.18)!important;
  font:
    700
    clamp(8px,.76vw,10.5px)/1.25
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  letter-spacing:.075em!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Theme parity with the right-side live readout. */
html[data-theme="light"] body
.signal-landscape__eyebrow{
  color:rgba(22,25,23,.94)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(238,239,235,.94) 18%,
      rgba(226,228,223,.91)
    )!important;
  border-color:rgba(22,25,23,.2)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 5px 14px rgba(30,34,31,.1)!important;
}

html[data-theme="nature"] body
.signal-landscape__eyebrow{
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.13),
      rgba(5,18,9,.84) 18%,
      rgba(4,15,8,.78)
    )!important;
  border-color:rgba(var(--landscape-ink),.2)!important;
}

html[data-theme="easter"] body
.signal-landscape__eyebrow{
  color:rgba(var(--landscape-ink),.97)!important;
}

/* Footer helper text is intentionally always lowercase. */
.footer-connect-tooltip__label{
  text-transform:lowercase!important;
}

/* Responsive pairing: left title and right live data stay balanced. */
@media(max-width:900px){
  html body .signal-landscape__eyebrow{
    padding:6px 8px 5px!important;
    font-size:7.5px!important;
    letter-spacing:.055em!important;
  }
}

@media(max-width:680px){
  html body .signal-landscape__header{
    grid-template-columns:
      minmax(0,.86fr)
      minmax(0,1.14fr)!important;
    align-items:start!important;
  }

  html body .signal-landscape__eyebrow{
    width:100%!important;
    padding:6px 7px 5px!important;
    font-size:6.5px!important;
    line-height:1.3!important;
    letter-spacing:.035em!important;
    white-space:normal!important;
  }
}

@media(max-width:420px){
  html body .signal-landscape__header{
    grid-template-columns:1fr!important;
  }

  html body .signal-landscape__eyebrow{
    width:100%!important;
    font-size:6.3px!important;
  }
}


/* =========================================================
   v2.206 — HIGH-DEFINITION FOOTER TERMINAL
   ========================================================= */

/*
  The canvas now has a substantially denser backing store. Keep it aligned
  directly to the semantic text box so no subpixel translate or vertical
  stretching can soften the glyphs.
*/
html body .site > .footer .footer-terminal-canvas{
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transform-origin:50% 50%!important;
  opacity:1!important;
  image-rendering:auto!important;
  filter:
    contrast(1.3)
    brightness(1.16)!important;
  backface-visibility:hidden!important;
}

/* OTH STUDIO uses the same sharp rendering during its brief hold. */
html body .site > .footer
.footer-terminal-cta[data-terminal-state="alternate"]
.footer-terminal-canvas{
  filter:
    contrast(1.32)
    brightness(1.18)!important;
}

/* Remove every historical glow that can visually double the letter edges. */
html body .site > .footer .footer-terminal-canvas{
  text-shadow:none!important;
  box-shadow:none!important;
}

/* Theme-specific brightness remains crisp rather than hazy. */
html[data-theme="dark"] body
.site > .footer .footer-terminal-canvas{
  filter:
    contrast(1.34)
    brightness(1.2)!important;
}

html[data-theme="light"] body
.site > .footer .footer-terminal-canvas{
  filter:
    contrast(1.28)
    brightness(1.08)!important;
}

html[data-theme="nature"] body
.site > .footer .footer-terminal-canvas{
  filter:
    contrast(1.32)
    brightness(1.16)!important;
}

html[data-theme="easter"] body
.site > .footer .footer-terminal-canvas{
  filter:
    contrast(1.3)
    brightness(1.14)!important;
}

@media(max-width:900px){
  html body .site > .footer .footer-terminal-canvas{
    height:100%!important;
    filter:
      contrast(1.32)
      brightness(1.17)!important;
  }
}

@media(max-width:680px){
  html body .site > .footer .footer-terminal-canvas{
    height:100%!important;
    filter:
      contrast(1.34)
      brightness(1.18)!important;
  }
}


/* =========================================================
   v2.207 — ONE-TIME XY INTRO / STATIC TITLE REMOVED
   ========================================================= */

/* With the former static title removed, the live readouts remain right-aligned. */
html body .signal-landscape__header{
  justify-content:flex-end!important;
}

html body .signal-landscape__readouts{
  margin-left:auto!important;
}

/* Full-pad introductory title shown once per page load. */
html body .signal-landscape__intro{
  position:absolute!important;
  z-index:30!important;
  inset:0!important;
  display:grid!important;
  place-content:center!important;
  gap:.22em!important;
  padding:18px!important;
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      135deg,
      rgba(4,5,5,.985),
      rgba(8,9,9,.975)
    )!important;
  font:
    700
    clamp(15px,2.15vw,28px)/1.02
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  letter-spacing:.075em!important;
  text-align:left!important;
  text-transform:uppercase!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(.992)!important;
  pointer-events:none!important;
  transition:
    opacity .24s ease,
    transform .34s var(--ease),
    visibility 0s linear .34s!important;
}

html body .signal-landscape__intro span{
  display:block!important;
}

html body .signal-landscape__visual.is-intro-active
.signal-landscape__intro{
  opacity:1!important;
  visibility:visible!important;
  transform:scale(1)!important;
  transition-delay:0s!important;
}

/* Hide every functional pad layer while the introduction occupies the field. */
html body .signal-landscape__visual.is-intro-active
:is(
  canvas,
  .signal-landscape__nodes,
  .signal-landscape__x-axis,
  .signal-landscape__y-axis
){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

html body .signal-landscape__visual.is-intro-active{
  cursor:default!important;
}

html body .signal-landscape__visual.is-intro-leaving
.signal-landscape__intro{
  opacity:0!important;
  transform:scale(1.012)!important;
}

/* Theme variants preserve the same technical title treatment. */
html[data-theme="light"] body .signal-landscape__intro{
  color:rgba(20,23,21,.96)!important;
  background:
    linear-gradient(
      135deg,
      rgba(241,242,238,.99),
      rgba(225,228,222,.985)
    )!important;
}

html[data-theme="nature"] body .signal-landscape__intro{
  background:
    linear-gradient(
      135deg,
      rgba(4,17,8,.99),
      rgba(7,27,13,.985)
    )!important;
}

html[data-theme="easter"] body .signal-landscape__intro{
  background:
    linear-gradient(
      135deg,
      rgba(18,8,3,.99),
      rgba(31,13,5,.985)
    )!important;
}

@media(max-width:680px){
  html body .signal-landscape__header{
    display:flex!important;
    justify-content:flex-end!important;
  }

  html body .signal-landscape__readouts{
    width:min(100%,520px)!important;
  }

  html body .signal-landscape__intro{
    padding:16px!important;
    font-size:clamp(13px,4.7vw,20px)!important;
    letter-spacing:.055em!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .signal-landscape__intro{
    transform:none!important;
    transition:opacity .2s linear!important;
  }
}


/* =========================================================
   v2.208 — XY INTRO MATCHES OTH NODE LABEL TYPOGRAPHY
   ========================================================= */

/*
  Match the OTH-1 … OTH-10 node-label language exactly:
  Courier terminal stack, medium weight, tight line-height and .08em tracking.
  Only the responsive size is increased so the two-line intro remains legible.
*/
html body .signal-landscape__intro{
  font-family:
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  font-size:clamp(13px,1.45vw,19px)!important;
  font-style:normal!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:none!important;
  font-synthesis:none!important;
}

html body .signal-landscape__intro span{
  font:inherit!important;
}

@media(max-width:680px){
  html body .signal-landscape__intro{
    font-size:clamp(11px,3.7vw,15px)!important;
    line-height:1!important;
    letter-spacing:.08em!important;
  }
}


/* =========================================================
   v2.210 — MATCHED XY HEADER PANELS
   ========================================================= */

/*
  Both status lines use the same technical panel language.
  Desktop: selected project left, live XY/FX data right.
*/
html body .signal-landscape__header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:8px!important;
  padding:0 9px 8px!important;
}

html body .signal-landscape__readouts{
  display:contents!important;
}

html body .signal-landscape__project-readout,
html body .signal-landscape__readout{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:7px 10px 6px!important;
  overflow:hidden!important;
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(5,6,6,.78) 18%,
      rgba(5,6,6,.72)
    )!important;
  border:1px solid rgba(var(--landscape-ink),.18)!important;
  border-left:2px solid rgba(var(--landscape-accent),.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.18)!important;
  font:
    700
    clamp(8px,.76vw,10.5px)/1.25
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

html body .signal-landscape__project-readout{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  text-align:left!important;
}

html body .signal-landscape__readout{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:end!important;
  text-align:right!important;
}

/* Light mode keeps the same matched panel treatment. */
html[data-theme="light"] body
:is(
  .signal-landscape__project-readout,
  .signal-landscape__readout
){
  color:rgba(22,25,23,.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.11),
      rgba(241,242,238,.9) 18%,
      rgba(230,232,227,.86)
    )!important;
  border-color:rgba(22,25,23,.18)!important;
}

/*
  Mobile order:
  1. selected project panel
  2. the right-aligned live XY/FX panel
*/
@media(max-width:680px){
  html body .signal-landscape__header{
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:0 8px 8px!important;
  }

  html body .signal-landscape__project-readout{
    grid-column:1!important;
    grid-row:1!important;
    text-align:left!important;
  }

  html body .signal-landscape__readout{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:end!important;
    text-align:right!important;
  }

  html body .signal-landscape__project-readout,
  html body .signal-landscape__readout{
    font-size:clamp(7px,2.15vw,9px)!important;
    letter-spacing:.065em!important;
  }
}


/* =========================================================
   v2.211 — MOBILE XY HEADER PANELS IN SEPARATE ROWS
   ========================================================= */

@media(max-width:680px){
  html body .signal-landscape__header{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    gap:6px!important;
    padding:0 8px 8px!important;
  }

  html body .signal-landscape__readouts{
    display:contents!important;
  }

  html body .signal-landscape__project-readout,
  html body .signal-landscape__readout{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    justify-self:auto!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    word-break:normal!important;
  }

  html body .signal-landscape__project-readout{
    order:1!important;
    text-align:left!important;
  }

  html body .signal-landscape__readout{
    order:2!important;
    text-align:right!important;
  }
}


/* =========================================================
   v2.212 — ACTIVE LIGHT / DARK MODE ICON ANIMATIONS
   ========================================================= */

.mode-selector .mode-segment--light,
.mode-selector .mode-segment--dark{
  overflow:visible!important;
}

.mode-selector .mode-icon{
  overflow:visible!important;
  transform-origin:50% 50%!important;
}

.mode-selector .mode-icon__sun-orbit{
  transform-origin:12px 12px!important;
}

.mode-selector .mode-icon__sun-core{
  fill:currentColor!important;
  stroke:currentColor!important;
  transform-origin:12px 12px!important;
}

.mode-selector .mode-icon__sun-rays{
  fill:none!important;
  stroke:currentColor!important;
  transform-origin:12px 12px!important;
}

.mode-selector .mode-icon__moon-disk{
  fill:currentColor!important;
  stroke:none!important;
}

.mode-selector .mode-icon__moon-shadow{
  fill:#080a0e!important;
  stroke:none!important;
  transform-origin:12px 12px!important;
}

.mode-selector .mode-icon__moon-outline{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.25!important;
}

/* Light mode: precise warm yellow, restrained glow, continuous rotation. */
.mode-selector .mode-segment--light[aria-pressed="true"]{
  color:#ffd34f!important;
}

.mode-selector .mode-segment--light[aria-pressed="true"]::before{
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,211,79,.18),
      rgba(255,191,35,.08) 55%,
      transparent 76%
    )!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,225,132,.2),
    0 0 13px rgba(255,198,49,.18)!important;
}

.mode-selector .mode-segment--light[aria-pressed="true"]
.mode-icon__sun-orbit{
  animation:modeSunRotation 8s linear infinite!important;
}

.mode-selector .mode-segment--light[aria-pressed="true"]
.mode-icon__sun-core{
  animation:modeSunPulse 2.8s ease-in-out infinite!important;
  filter:
    drop-shadow(0 0 2px rgba(255,222,105,.75))
    drop-shadow(0 0 5px rgba(255,190,40,.34))!important;
}

/* Dark mode: animated lunar phase cycle with a cool moonlit finish. */
.mode-selector .mode-segment--dark[aria-pressed="true"]{
  color:#dce8ff!important;
}

.mode-selector .mode-segment--dark[aria-pressed="true"]::before{
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(155,190,255,.14),
      rgba(89,116,174,.06) 58%,
      transparent 78%
    )!important;
  box-shadow:
    inset 0 0 0 1px rgba(190,211,255,.16),
    0 0 13px rgba(99,137,210,.14)!important;
}

.mode-selector .mode-segment--dark[aria-pressed="true"]
.mode-icon__moon-disk{
  filter:
    drop-shadow(0 0 2px rgba(218,232,255,.56))
    drop-shadow(0 0 6px rgba(110,147,214,.22))!important;
}

.mode-selector .mode-segment--dark[aria-pressed="true"]
.mode-icon__moon-shadow{
  animation:modeMoonPhase 6.8s cubic-bezier(.45,0,.55,1) infinite!important;
}

.mode-selector .mode-segment--dark[aria-pressed="true"]
.mode-icon__moon-outline{
  animation:modeMoonOutlinePulse 3.4s ease-in-out infinite!important;
}

@keyframes modeSunRotation{
  to{transform:rotate(360deg)}
}

@keyframes modeSunPulse{
  0%,100%{transform:scale(.94)}
  50%{transform:scale(1.08)}
}

@keyframes modeMoonPhase{
  0%{
    transform:translateX(-13.4px);
  }
  25%{
    transform:translateX(-6.7px);
  }
  50%{
    transform:translateX(0);
  }
  75%{
    transform:translateX(6.7px);
  }
  100%{
    transform:translateX(13.4px);
  }
}

@keyframes modeMoonOutlinePulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* Inactive icons remain restrained and monochrome. */
.mode-selector .mode-segment--light[aria-pressed="false"]
.mode-icon__sun-core{
  fill:transparent!important;
}

.mode-selector .mode-segment--dark[aria-pressed="false"]
.mode-icon__moon-disk{
  fill:transparent!important;
}

.mode-selector .mode-segment--dark[aria-pressed="false"]
.mode-icon__moon-shadow{
  display:none!important;
}

/* Preserve clarity against the light theme navigation surface. */
html[data-theme="light"]
.mode-selector .mode-segment--light[aria-pressed="true"]{
  color:#e3a600!important;
}

html[data-theme="light"]
.mode-selector .mode-segment--light[aria-pressed="true"]::before{
  background:
    radial-gradient(
      circle,
      rgba(255,197,28,.2),
      rgba(255,197,28,.07) 60%,
      transparent 78%
    )!important;
  box-shadow:
    inset 0 0 0 1px rgba(194,139,0,.18),
    0 0 11px rgba(227,166,0,.13)!important;
}

@media(prefers-reduced-motion:reduce){
  .mode-selector .mode-segment--light[aria-pressed="true"]
  .mode-icon__sun-orbit,
  .mode-selector .mode-segment--light[aria-pressed="true"]
  .mode-icon__sun-core,
  .mode-selector .mode-segment--dark[aria-pressed="true"]
  .mode-icon__moon-shadow,
  .mode-selector .mode-segment--dark[aria-pressed="true"]
  .mode-icon__moon-outline{
    animation:none!important;
  }

  .mode-selector .mode-segment--dark[aria-pressed="true"]
  .mode-icon__moon-shadow{
    transform:translateX(6.7px)!important;
  }
}


/* =========================================================
   v2.213 — MOBILE LIGHTBOX SWIPE NAVIGATION
   ========================================================= */

@media(max-width:900px), (hover:none), (pointer:coarse){
  .lightbox-stage{
    --lightbox-swipe-x:0px;
    touch-action:pan-y pinch-zoom!important;
    transform:
      translate3d(
        var(--lightbox-swipe-x),
        0,
        0
      )!important;
    will-change:transform,opacity!important;
  }

  .lightbox-stage.is-swipe-tracking{
    transition:none!important;
  }

  .lightbox-stage.is-swipe-returning{
    transition:
      transform .22s cubic-bezier(.22,.75,.25,1),
      opacity .22s ease!important;
  }

  .lightbox-stage.is-swipe-next{
    animation:
      lightboxSwipeNext .18s
      cubic-bezier(.4,0,1,1)
      both!important;
  }

  .lightbox-stage.is-swipe-previous{
    animation:
      lightboxSwipePrevious .18s
      cubic-bezier(.4,0,1,1)
      both!important;
  }
}

@keyframes lightboxSwipeNext{
  from{
    transform:
      translate3d(
        var(--lightbox-swipe-x),
        0,
        0
      );
    opacity:1;
  }
  to{
    transform:translate3d(-18%,0,0);
    opacity:0;
  }
}

@keyframes lightboxSwipePrevious{
  from{
    transform:
      translate3d(
        var(--lightbox-swipe-x),
        0,
        0
      );
    opacity:1;
  }
  to{
    transform:translate3d(18%,0,0);
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .lightbox-stage.is-swipe-next,
  .lightbox-stage.is-swipe-previous{
    animation-duration:.01ms!important;
  }

  .lightbox-stage.is-swipe-returning{
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   v2.214 — RESTORED CRESCENT MOON / ACTIVE DARK ANIMATION
   ========================================================= */

/* Restore the original crescent symbol used before the phase-disc variant. */
.mode-selector .mode-icon--moon-crescent{
  overflow:visible!important;
  transform-origin:12px 12px!important;
}

.mode-selector .mode-icon__moon-crescent{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.5!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transform-box:fill-box!important;
  transform-origin:center!important;
}

/*
  Active dark mode: a slow lunar drift, gentle tilt and controlled breathing
  glow. The movement remains precise and does not distort the original icon.
*/
.mode-selector .mode-segment--dark[aria-pressed="true"]
.mode-icon--moon-crescent{
  animation:
    modeCrescentOrbit 5.8s
    cubic-bezier(.45,0,.55,1)
    infinite!important;
}

.mode-selector .mode-segment--dark[aria-pressed="true"]
.mode-icon__moon-crescent{
  animation:
    modeCrescentBreath 3.2s
    ease-in-out
    infinite!important;
  filter:
    drop-shadow(0 0 2px rgba(222,233,255,.64))
    drop-shadow(0 0 6px rgba(113,148,215,.25))!important;
}

/* Inactive dark mode stays static and monochrome. */
.mode-selector .mode-segment--dark[aria-pressed="false"]
.mode-icon--moon-crescent,
.mode-selector .mode-segment--dark[aria-pressed="false"]
.mode-icon__moon-crescent{
  animation:none!important;
  filter:none!important;
  transform:none!important;
}

@keyframes modeCrescentOrbit{
  0%,100%{
    transform:
      translate3d(0,0,0)
      rotate(-7deg);
  }
  25%{
    transform:
      translate3d(.45px,-.65px,0)
      rotate(-1deg);
  }
  50%{
    transform:
      translate3d(0,-.95px,0)
      rotate(5deg);
  }
  75%{
    transform:
      translate3d(-.45px,-.45px,0)
      rotate(0deg);
  }
}

@keyframes modeCrescentBreath{
  0%,100%{
    opacity:.82;
    transform:scale(.96);
  }
  50%{
    opacity:1;
    transform:scale(1.045);
  }
}

/* Disable the superseded phase-disc animation rules for this restored icon. */
.mode-selector .mode-icon--moon-crescent
:is(
  .mode-icon__moon-disk,
  .mode-icon__moon-shadow,
  .mode-icon__moon-outline
){
  display:none!important;
}

@media(prefers-reduced-motion:reduce){
  .mode-selector .mode-segment--dark[aria-pressed="true"]
  .mode-icon--moon-crescent,
  .mode-selector .mode-segment--dark[aria-pressed="true"]
  .mode-icon__moon-crescent{
    animation:none!important;
    transform:none!important;
  }
}


/* =========================================================
   v2.215 — CLEAR XY FIRST-CONTACT INSTRUCTIONS
   ========================================================= */

html body .signal-landscape__intro{
  width:min(88%,620px)!important;
  max-width:620px!important;
  margin:auto!important;
  padding:clamp(14px,2vw,22px)!important;
  gap:.62em!important;
  place-content:center start!important;
  font-family:
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  font-size:clamp(11.5px,1.25vw,17px)!important;
  font-weight:500!important;
  line-height:1.28!important;
  letter-spacing:.065em!important;
  text-align:left!important;
}

html body .signal-landscape__intro span{
  display:block!important;
  width:100%!important;
  font:inherit!important;
  text-wrap:balance!important;
}

@media(max-width:680px){
  html body .signal-landscape__intro{
    width:calc(100% - 28px)!important;
    padding:14px!important;
    gap:.72em!important;
    font-size:clamp(10px,3.35vw,13.5px)!important;
    line-height:1.34!important;
    letter-spacing:.05em!important;
  }
}

/* Ensure the mobile color-scheme tooltip cannot remain visually stuck. */
@media(max-width:900px), (hover:none), (pointer:coarse){
  .y-tooltip{
    transition:
      opacity .16s ease,
      visibility 0s linear .16s!important;
  }

  .y-tooltip:not(.is-visible){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .y-tooltip:not(.is-visible) .y-tooltip-label{
    opacity:0!important;
    transform:translateY(4px)!important;
  }
}


/* =========================================================
   v2.216 — SEAMLESS XY INTRO OVERLAY
   ========================================================= */

/*
  Remove the limited opaque rectangle. The intro now spans the complete pad
  and uses only a soft center haze, so there are no visible box edges or cuts.
*/
html body .signal-landscape__intro{
  inset:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(
      ellipse 72% 82% at 50% 50%,
      rgba(0,0,0,.2) 0%,
      rgba(0,0,0,.105) 42%,
      rgba(0,0,0,.035) 64%,
      transparent 88%
    )!important;
}

/* Keep the text in a readable centered column without creating a panel. */
html body .signal-landscape__intro span{
  width:min(88%,620px)!important;
  max-width:620px!important;
  margin-inline:auto!important;
}

/* Theme-specific versions remain seamless and softly blended. */
html[data-theme="light"] body .signal-landscape__intro{
  background:
    radial-gradient(
      ellipse 72% 82% at 50% 50%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.16) 43%,
      rgba(255,255,255,.045) 66%,
      transparent 88%
    )!important;
}

html[data-theme="nature"] body .signal-landscape__intro{
  background:
    radial-gradient(
      ellipse 72% 82% at 50% 50%,
      rgba(2,17,8,.25) 0%,
      rgba(2,17,8,.12) 43%,
      rgba(2,17,8,.04) 66%,
      transparent 88%
    )!important;
}

html[data-theme="easter"] body .signal-landscape__intro{
  background:
    radial-gradient(
      ellipse 72% 82% at 50% 50%,
      rgba(24,8,2,.24) 0%,
      rgba(24,8,2,.11) 43%,
      rgba(24,8,2,.035) 66%,
      transparent 88%
    )!important;
}

@media(max-width:680px){
  html body .signal-landscape__intro{
    width:auto!important;
    padding:14px 18px!important;
    background:
      radial-gradient(
        ellipse 92% 78% at 50% 50%,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.075) 52%,
        transparent 90%
      )!important;
  }

  html body .signal-landscape__intro span{
    width:100%!important;
    max-width:none!important;
  }

  html[data-theme="light"] body .signal-landscape__intro{
    background:
      radial-gradient(
        ellipse 92% 78% at 50% 50%,
        rgba(255,255,255,.3) 0%,
        rgba(255,255,255,.1) 52%,
        transparent 90%
      )!important;
  }

  html[data-theme="nature"] body .signal-landscape__intro{
    background:
      radial-gradient(
        ellipse 92% 78% at 50% 50%,
        rgba(2,17,8,.22) 0%,
        rgba(2,17,8,.08) 52%,
        transparent 90%
      )!important;
  }

  html[data-theme="easter"] body .signal-landscape__intro{
    background:
      radial-gradient(
        ellipse 92% 78% at 50% 50%,
        rgba(24,8,2,.21) 0%,
        rgba(24,8,2,.075) 52%,
        transparent 90%
      )!important;
  }
}


/* =========================================================
   v2.219 — THIRD PORTFOLIO ROW / PHOTOGRAPHY
   ========================================================= */

.portfolio-row--tertiary .project{
  height:var(--band-card-height-secondary)!important;
}

/* Photography has no per-item metadata label by request. */
.portfolio-row--tertiary .project--photography::before{
  content:none!important;
  display:none!important;
}

.portfolio-row--tertiary .project--photography .media{
  background:#050606;
}

.portfolio-row--tertiary .project--photography img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Keep the new row visually grouped with the existing archive system. */
.portfolio-row--tertiary{
  padding-top:2px!important;
}

@media(max-width:900px){
  .portfolio-row--tertiary .project{
    height:var(--band-card-height-secondary)!important;
  }
}

@media(max-width:680px){
  .portfolio-row--tertiary .project{
    height:126px!important;
  }
}


/* =========================================================
   v2.220 — RELEVANCE-BASED XY POINT VISIBILITY
   ========================================================= */

/*
  Inactive points stay deliberately small and quiet, preserving the waveform.
  Labels are hidden by default and never reserve visual space.
*/
html body .signal-landscape__visual .signal-node{
  width:12px!important;
  height:12px!important;
  opacity:.4!important;
  color:rgba(var(--landscape-ink),.58)!important;
  border-color:rgba(var(--landscape-ink),.28)!important;
  transform:translate(-50%,-50%) scale(.82)!important;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.08),
    0 0 7px rgba(var(--landscape-ink),.025)!important;
  transition:
    opacity .2s ease,
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .24s ease,
    transform .24s var(--ease)!important;
}

html body .signal-landscape__visual .signal-node span{
  opacity:0!important;
  visibility:hidden!important;
  transform:
    translateX(-50%)
    translateY(3px)!important;
  transition:
    opacity .16s ease,
    transform .2s var(--ease),
    visibility 0s linear .2s!important;
}

/* Nearby desktop points brighten without competing with the selected point. */
html body .signal-landscape__visual .signal-node.is-nearby{
  opacity:.76!important;
  color:rgba(var(--landscape-ink),.88)!important;
  border-color:rgba(var(--landscape-ink),.54)!important;
  transform:translate(-50%,-50%) scale(.96)!important;
  box-shadow:
    0 0 0 3px rgba(var(--landscape-ink),.035),
    0 0 11px rgba(var(--landscape-ink),.075)!important;
}

html body .signal-landscape__visual
.signal-node:is(.is-nearby,:hover,:focus-visible) span{
  opacity:.9!important;
  visibility:visible!important;
  transform:
    translateX(-50%)
    translateY(0)!important;
  transition-delay:0s!important;
}

/* The selected project remains the visual anchor on every device. */
html body .signal-landscape__visual .signal-node.is-active{
  width:17px!important;
  height:17px!important;
  opacity:1!important;
  color:rgba(var(--landscape-accent),1)!important;
  border-color:rgba(var(--landscape-accent),.9)!important;
  background:rgba(12,8,5,.96)!important;
  transform:translate(-50%,-50%) scale(1.08)!important;
  box-shadow:
    0 0 0 3px rgba(var(--landscape-accent),.1),
    0 0 16px rgba(var(--landscape-accent),.3)!important;
}

html body .signal-landscape__visual .signal-node.is-active span{
  opacity:1!important;
  visibility:visible!important;
  color:rgba(var(--landscape-ink),.96)!important;
  transform:
    translateX(-50%)
    translateY(0)!important;
  transition-delay:0s!important;
}

/* Direct hover/focus remains clear even before proximity calculation settles. */
html body .signal-landscape__visual
.signal-node:is(:hover,:focus-visible):not(.is-active){
  opacity:.88!important;
  color:rgba(var(--landscape-accent),.88)!important;
  border-color:rgba(var(--landscape-accent),.66)!important;
  transform:translate(-50%,-50%) scale(1)!important;
  outline:none!important;
}

/* Light mode uses a clean neutral inactive surface. */
html[data-theme="light"] body
.signal-landscape__visual .signal-node{
  background:rgba(231,232,228,.84)!important;
}

html[data-theme="light"] body
.signal-landscape__visual .signal-node.is-active{
  background:rgba(246,244,237,.98)!important;
}

/*
  Touch devices have no persistent hover state: only the active label remains
  visible. Points retain a generous invisible hit target via ::after.
*/
@media(max-width:900px), (hover:none), (pointer:coarse){
  html body .signal-landscape__visual .signal-node{
    width:11px!important;
    height:11px!important;
    opacity:.42!important;
    transform:translate(-50%,-50%) scale(.86)!important;
  }

  html body .signal-landscape__visual
  .signal-node:not(.is-active) span{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body .signal-landscape__visual .signal-node.is-active{
    width:16px!important;
    height:16px!important;
    opacity:1!important;
    transform:translate(-50%,-50%) scale(1.04)!important;
  }

  html body .signal-landscape__visual .signal-node::after{
    inset:-10px!important;
  }
}

/* While XY dragging, point and label relevance remains fully suppressed. */
html body .signal-landscape__visual.is-xy-dragging
.signal-node,
html body .signal-landscape__visual.is-xy-dragging
.signal-node span{
  opacity:0!important;
  visibility:hidden!important;
}


/* =========================================================
   v2.224 — DEFINITIVE XY STATUS PANEL ORDER
   ========================================================= */

/*
  Desktop and larger tablets:
  selected project always occupies the first/left panel,
  live frequency/drive/waveform data always occupies the second/right panel.
*/
@media(min-width:901px){
  html body .signal-landscape__header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:"project fx"!important;
    align-items:stretch!important;
    gap:8px!important;
  }

  html body .signal-landscape__readouts{
    display:contents!important;
  }

  html body .signal-landscape__project-readout{
    grid-area:project!important;
    grid-column:1!important;
    grid-row:1!important;
    order:1!important;
    justify-self:stretch!important;
    text-align:left!important;
  }

  html body .signal-landscape__readout{
    grid-area:fx!important;
    grid-column:2!important;
    grid-row:1!important;
    order:2!important;
    justify-self:stretch!important;
    text-align:right!important;
  }
}

/*
  Mobile and touch-sized layouts:
  force two distinct full-width rows, regardless of DOM order or older rules.
*/
@media(max-width:900px){
  html body .signal-landscape__header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "project"
      "fx"!important;
    align-items:stretch!important;
    width:100%!important;
    gap:6px!important;
    padding:0 8px 8px!important;
  }

  html body .signal-landscape__readouts{
    display:contents!important;
  }

  html body .signal-landscape__project-readout,
  html body .signal-landscape__readout{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    justify-self:stretch!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  html body .signal-landscape__project-readout{
    grid-area:project!important;
    grid-column:1!important;
    grid-row:1!important;
    order:1!important;
    text-align:left!important;
  }

  html body .signal-landscape__readout{
    grid-area:fx!important;
    grid-column:1!important;
    grid-row:2!important;
    order:2!important;
    text-align:right!important;
  }
}


/* =========================================================
   v2.225 — FULL-WIDTH / MOBILE-SAFE XY STATUS PANELS
   ========================================================= */

/*
  The readout wrapper itself owns the layout. This avoids display:contents
  inconsistencies in mobile Safari and prevents older flex rules from placing
  both panels beside one another.
*/
html body .signal-landscape__header{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 0 8px!important;
}

html body .signal-landscape__readouts{
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}

html body .signal-landscape__project-readout,
html body .signal-landscape__readout{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}

/* Desktop: two equal panels spanning exactly the complete XY-pad width. */
@media(min-width:901px){
  html body .signal-landscape__readouts{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    grid-template-areas:"project fx"!important;
    gap:8px!important;
  }

  html body .signal-landscape__project-readout{
    grid-area:project!important;
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    text-align:left!important;
  }

  html body .signal-landscape__readout{
    grid-area:fx!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    text-align:right!important;
  }
}

/*
  Mobile/tablet: two physically separate rows. The explicit wrapper grid
  prevents inherited flex, source order, or browser display:contents behavior
  from ever placing them side by side.
*/
@media(max-width:900px){
  html body .signal-landscape__header{
    padding:0 0 8px!important;
  }

  html body .signal-landscape__readouts{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "project"
      "fx"!important;
    gap:6px!important;
    width:100%!important;
  }

  html body .signal-landscape__project-readout{
    grid-area:project!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    display:block!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  html body .signal-landscape__readout{
    grid-area:fx!important;
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:block!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    text-align:right!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}


/* =========================================================
   v2.226 — RESPONSIVE DESKTOP CURSOR PRESERVATION
   ========================================================= */

/*
  Viewport width must never decide whether the desktop cursor exists.
  A narrow browser window can still use a precise mouse/trackpad, so the
  custom cursor remains enabled for every fine-pointer desktop layout.
*/
@media(hover:hover) and (pointer:fine){
  html body .cursor-plus{
    display:block!important;
    visibility:visible!important;
    animation:initial;
  }

  html body .cursor-plus:not(.is-visible){
    opacity:0!important;
  }

  html body .cursor-plus.is-visible{
    opacity:.8!important;
  }

  /*
    Performance mode may simplify the cursor animation, but must not remove
    the only visible pointer while the native cursor is intentionally hidden.
  */
  html.perf-lite body .cursor-plus{
    display:block!important;
    visibility:visible!important;
  }

  html.perf-lite body .cursor-plus-shape{
    animation:none!important;
  }
}

/*
  Only genuine touch/coarse-pointer devices suppress the custom cursor.
  These devices retain their normal operating-system touch behaviour.
*/
@media(hover:none), (pointer:coarse){
  html body .cursor-plus,
  html body .cursor-glow{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
}


/* =========================================================
   v2.227 — HARD MOBILE STACKING FOR XY STATUS PANELS
   ========================================================= */

/*
  This rule is bound to the actual input device rather than only viewport
  width. It therefore also works in mobile Safari, landscape mode, desktop
  emulation and devices reporting unusual CSS viewport dimensions.
*/
html.is-coarse-layout body .signal-landscape__header{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  padding:0 0 8px!important;
}

html.is-coarse-layout body .signal-landscape__readouts{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  gap:6px!important;
  margin:0!important;
}

html.is-coarse-layout body .signal-landscape__project-readout,
html.is-coarse-layout body .signal-landscape__readout{
  position:relative!important;
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}

html.is-coarse-layout body .signal-landscape__project-readout{
  order:1!important;
  text-align:left!important;
}

html.is-coarse-layout body .signal-landscape__readout{
  order:2!important;
  text-align:right!important;
}

/*
  Width fallback for browsers that delay pointer media-query evaluation.
  The direct-child selectors and flex-basis prevent any side-by-side result.
*/
@media(max-width:900px){
  html body .signal-landscape__header{
    display:block!important;
  }

  html body .signal-landscape__header
  > .signal-landscape__readouts{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    gap:6px!important;
  }

  html body .signal-landscape__readouts
  > .signal-landscape__project-readout,
  html body .signal-landscape__readouts
  > .signal-landscape__readout{
    display:block!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    min-width:100%!important;
    box-sizing:border-box!important;
  }

  html body .signal-landscape__readouts
  > .signal-landscape__project-readout{
    order:1!important;
  }

  html body .signal-landscape__readouts
  > .signal-landscape__readout{
    order:2!important;
  }
}


/* =========================================================
   v2.228 — LEFT-ALIGNED MOBILE FX STATUS
   ========================================================= */

html.is-coarse-layout body .signal-landscape__readout{
  text-align:left!important;
}

@media(max-width:900px){
  html body .signal-landscape__readouts
  > .signal-landscape__readout{
    text-align:left!important;
  }
}


/* =========================================================
   v2.229 — SINGLE-ACTION ROTATING GIF CONTROL
   ========================================================= */

.root-center-logo img[role="button"]{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

.root-center-logo img[role="button"]:focus-visible{
  outline:1px solid rgba(var(--landscape-accent,239,100,18),.72)!important;
  outline-offset:5px!important;
}


/* =========================================================
   v2.230 — MOBILE GIF TAP ISOLATION
   ========================================================= */

.root-center-logo{
  touch-action:manipulation!important;
}

.root-center-logo img[role="button"]{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* The parent cluster must not receive a mobile active-state transform. */
@media(hover:none), (pointer:coarse){
  .root-center-logo img[role="button"]:active{
    transform:none!important;
  }
}


/* =========================================================
   v2.232 — STRONGER PORTFOLIO ROW INDEX LABELS
   ========================================================= */

html body .portfolio-row__label{
  max-width:none!important;
  overflow:visible!important;
  color:currentColor!important;
  font:
    600
    clamp(9px,.78vw,12px)/1.15
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  letter-spacing:.095em!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

@media(max-width:900px){
  html body .portfolio-row__label{
    max-width:calc(100vw - 112px)!important;
    overflow:hidden!important;
    font-size:clamp(9px,2.55vw,11px)!important;
    letter-spacing:.075em!important;
    text-overflow:ellipsis!important;
  }
}

@media(max-width:480px){
  html body .portfolio-row__label{
    max-width:calc(100vw - 104px)!important;
    font-size:9px!important;
    letter-spacing:.06em!important;
  }
}


/* =========================================================
   v2.233 — PORTFOLIO INDEX TYPOGRAPHY / NEW PROJECT
   ========================================================= */

html body .portfolio-band__kicker,
html body .portfolio-band__identity h2,
html body .portfolio-band__counter{
  font-family:
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  font-size:clamp(9px,.78vw,12px)!important;
  line-height:1.15!important;
  letter-spacing:.095em!important;
}

html body .portfolio-band__identity h2{
  font-weight:600!important;
}

html body .portfolio-band__identity h2 small{
  font:inherit!important;
}

html body .portfolio-band__counter{
  min-width:76px!important;
  font-weight:600!important;
}

@media(max-width:900px){
  html body .portfolio-band__kicker,
  html body .portfolio-band__identity h2,
  html body .portfolio-band__counter{
    font-size:clamp(9px,2.55vw,11px)!important;
    letter-spacing:.075em!important;
  }

  html body .portfolio-band__counter{
    display:block!important;
  }
}

@media(max-width:480px){
  html body .portfolio-band__kicker,
  html body .portfolio-band__identity h2,
  html body .portfolio-band__counter{
    font-size:9px!important;
    letter-spacing:.06em!important;
  }
}


/* =========================================================
   v2.234 — XY DESCRIPTION TERMINAL (XYDESC)
   ========================================================= */

html body .signal-landscape__xydesc{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:3.15em!important;
  margin:8px 0 0!important;
  padding:10px 12px 9px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(5,6,6,.78) 18%,
      rgba(5,6,6,.72)
    )!important;
  border:1px solid rgba(var(--landscape-ink),.18)!important;
  border-left:2px solid rgba(var(--landscape-accent),.82)!important;
  border-radius:0!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.18)!important;
  font:
    600
    clamp(11px,1vw,14px)/1.42
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  letter-spacing:.045em!important;
  text-align:left!important;
  text-transform:lowercase!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease!important;
}

html body .signal-landscape__xydesc:hover,
html body .signal-landscape__xydesc:focus-visible{
  border-color:rgba(var(--landscape-ink),.3)!important;
  border-left-color:rgba(var(--landscape-accent),1)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 6px 18px rgba(0,0,0,.22),
    0 0 14px rgba(var(--landscape-accent),.07)!important;
  outline:none!important;
}

html body .signal-landscape__xydesc-line{
  display:inline!important;
  white-space:normal!important;
}

html body .signal-landscape__xydesc-line--secondary:not([hidden]){
  display:block!important;
  margin-top:.52em!important;
}

html body .signal-landscape__xydesc-line[hidden]{
  display:none!important;
}

html body .signal-landscape__xydesc-cursor{
  display:inline-block!important;
  width:.62em!important;
  margin-left:.06em!important;
  color:rgba(var(--landscape-accent),.96)!important;
  font:inherit!important;
  animation:xydescTerminalCursor .82s steps(1,end) infinite!important;
  vertical-align:baseline!important;
}

/*
  In the expanded state, place the cursor after the final line rather than
  visually attaching it to the first paragraph.
*/
html body .signal-landscape__xydesc[data-xydesc-state="2"]
.signal-landscape__xydesc-cursor{
  margin-left:.08em!important;
}

html[data-theme="light"] body .signal-landscape__xydesc{
  color:rgba(22,25,23,.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.11),
      rgba(241,242,238,.9) 18%,
      rgba(230,232,227,.86)
    )!important;
  border-color:rgba(22,25,23,.18)!important;
  border-left-color:rgba(var(--landscape-accent),.82)!important;
}

@keyframes xydescTerminalCursor{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}

@media(max-width:900px){
  html body .signal-landscape__xydesc{
    min-height:3.35em!important;
    margin-top:7px!important;
    padding:10px 11px 9px!important;
    font-size:clamp(11px,3.05vw,13px)!important;
    line-height:1.42!important;
    letter-spacing:.035em!important;
  }
}

@media(max-width:480px){
  html body .signal-landscape__xydesc{
    font-size:11px!important;
    line-height:1.45!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .signal-landscape__xydesc-cursor{
    animation:none!important;
    opacity:1!important;
  }
}


/* =========================================================
   v2.235 — XYDESC RESET / CURSOR ATTACHMENT
   ========================================================= */

html body .signal-landscape__xydesc-tail{
  display:inline-block!important;
  white-space:nowrap!important;
}

html body .signal-landscape__xydesc-cursor{
  display:inline!important;
  width:auto!important;
  margin-left:0!important;
  color:inherit!important;
  font:inherit!important;
  vertical-align:baseline!important;
  animation:xydescTerminalCursor .82s steps(1,end) infinite!important;
}

html body .signal-landscape__xydesc[data-xydesc-state="2"]
.signal-landscape__xydesc-cursor{
  margin-left:0!important;
  color:inherit!important;
}


/* =========================================================
   v2.236 — LIGHTBOX TAP-CLOSE / MOBILE SWIPE REFINEMENT
   ========================================================= */

html body .lightbox-stage{
  touch-action:pan-y pinch-zoom!important;
  overscroll-behavior-x:contain!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

html body #lightboxImage{
  cursor:zoom-out!important;
  touch-action:pan-y pinch-zoom!important;
  -webkit-user-drag:none!important;
  user-select:none!important;
}

@media(max-width:900px), (hover:none), (pointer:coarse){
  html body .lightbox-stage{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  html body .lightbox-stage > img,
  html body .lightbox-stage > video{
    will-change:transform!important;
  }

  html body .lightbox-stage.is-swipe-tracking{
    transition:none!important;
  }

  html body .lightbox-stage.is-swipe-returning{
    transition:
      transform .24s cubic-bezier(.22,.8,.24,1),
      opacity .2s ease!important;
  }

  html body .lightbox-stage.is-swipe-next{
    animation:
      lightboxSwipeNext .19s
      cubic-bezier(.38,0,.9,.48)
      both!important;
  }

  html body .lightbox-stage.is-swipe-previous{
    animation:
      lightboxSwipePrevious .19s
      cubic-bezier(.38,0,.9,.48)
      both!important;
  }
}


/* =========================================================
   v2.237 — XY AUTO-FOLD / SINGLE TERMINAL CURSOR
   ========================================================= */

/* Remove every legacy DOM cursor; only the final-word pseudo cursor remains. */
html body .signal-landscape__xydesc-cursor{
  display:none!important;
  animation:none!important;
}

html body .signal-landscape__xydesc-tail{
  display:inline-block!important;
  white-space:nowrap!important;
}

html body .signal-landscape__xydesc-tail.is-cursor-target::after{
  content:"_"!important;
  display:inline!important;
  margin:0!important;
  color:inherit!important;
  font:inherit!important;
  animation:xydescTerminalCursor .82s steps(1,end) infinite!important;
  vertical-align:baseline!important;
}

/* Compact technical control between the readouts and the effect field. */
html body .signal-landscape__fold-toggle{
  display:block!important;
  width:100%!important;
  height:19px!important;
  margin:0!important;
  padding:0 9px!important;
  color:rgba(var(--landscape-muted),.74)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.055),
      rgba(5,6,6,.42) 20%,
      rgba(5,6,6,.28)
    )!important;
  border:0!important;
  border-bottom:1px solid rgba(var(--landscape-ink),.1)!important;
  border-radius:0!important;
  font:
    600
    6px/19px
    "Courier New",
    "Lucida Console",
    ui-monospace,
    monospace!important;
  letter-spacing:.13em!important;
  text-align:right!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

html body .signal-landscape__fold-toggle:hover,
html body .signal-landscape__fold-toggle:focus-visible{
  color:rgba(var(--landscape-ink),.94)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.09),
      rgba(5,6,6,.5) 20%,
      rgba(5,6,6,.34)
    )!important;
  outline:none!important;
}

html body .signal-landscape__visual{
  transform-origin:50% 0!important;
  transition:
    height .64s cubic-bezier(.22,.78,.2,1),
    opacity .38s ease,
    transform .64s cubic-bezier(.22,.78,.2,1),
    border-color .3s ease!important;
}

html body .signal-landscape.is-folded
.signal-landscape__visual{
  height:0!important;
  min-height:0!important;
  opacity:0!important;
  transform:scaleY(.94)!important;
  border-bottom-color:transparent!important;
  pointer-events:none!important;
}

html body .signal-landscape.is-folded
.signal-landscape__fold-toggle{
  border-bottom-color:rgba(var(--landscape-accent),.24)!important;
}

/* Keep the control readable against the light color scheme. */
html[data-theme="light"] body .signal-landscape__fold-toggle{
  color:rgba(31,35,32,.68)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.06),
      rgba(239,241,236,.66) 20%,
      rgba(229,232,226,.56)
    )!important;
  border-bottom-color:rgba(24,28,26,.13)!important;
}

@media(max-width:900px){
  html body .signal-landscape__fold-toggle{
    height:22px!important;
    padding-inline:10px!important;
    font-size:6.5px!important;
    line-height:22px!important;
  }

  html body .signal-landscape__visual{
    transition:
      height .56s cubic-bezier(.22,.78,.2,1),
      opacity .34s ease,
      transform .56s cubic-bezier(.22,.78,.2,1),
      border-color .28s ease!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .signal-landscape__visual{
    transition-duration:.01ms!important;
  }

  html body .signal-landscape__xydesc-tail.is-cursor-target::after{
    animation:none!important;
    opacity:1!important;
  }
}


/* =========================================================
   v2.238 — DELAYED XY UNFOLD
   ========================================================= */

/*
  The field is collapsed in the HTML itself, so it never flashes during the
  first paint. After the page and fonts are ready, it unfolds after two seconds.
*/
html body .signal-landscape.is-initial-delay
.signal-landscape__visual{
  height:0!important;
  min-height:0!important;
  opacity:0!important;
  transform:scaleY(.88)!important;
  border-bottom-color:transparent!important;
  pointer-events:none!important;
}

html body .signal-landscape__visual{
  transform:scaleY(1)!important;
  transition:
    height .7s cubic-bezier(.2,.78,.2,1),
    opacity .42s ease,
    transform .7s cubic-bezier(.2,.78,.2,1),
    border-color .34s ease!important;
}

/*
  The manual fold control is withheld during the opening delay. It appears
  together with the field rather than adding another immediate interface item.
*/
html body .signal-landscape__fold-toggle{
  transition:
    height .34s ease,
    padding .34s ease,
    opacity .26s ease,
    border-color .26s ease!important;
}

html body .signal-landscape.is-initial-delay
.signal-landscape__fold-toggle{
  height:0!important;
  padding-block:0!important;
  opacity:0!important;
  overflow:hidden!important;
  border-width:0!important;
  pointer-events:none!important;
}

/* Restrained arrival emphasis without adding another independent animation. */
html body .signal-landscape.is-initial-unfolding
.signal-landscape__visual{
  box-shadow:
    inset 0 0 0 1px rgba(var(--landscape-accent),.08),
    inset 0 0 24px rgba(var(--landscape-accent),.025)!important;
}

@media(max-width:900px){
  html body .signal-landscape__visual{
    transition:
      height .62s cubic-bezier(.2,.78,.2,1),
      opacity .38s ease,
      transform .62s cubic-bezier(.2,.78,.2,1),
      border-color .3s ease!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .signal-landscape__visual,
  html body .signal-landscape__fold-toggle{
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   v2.242 — ONE-TIME STAGED XY / DESCRIPTION REVEAL
   ========================================================= */

/* The obsolete fold control is no longer created; hide any stale cached node. */
html body .signal-landscape__fold-toggle{
  display:none!important;
}

/*
  The description enters shortly after the XY field. Its shell controls layout
  arrival without affecting the description's later text expansion.
*/
html body .signal-landscape__xydesc-shell{
  width:100%!important;
  max-height:48rem!important;
  overflow:hidden!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  transition:
    max-height .66s cubic-bezier(.2,.78,.2,1),
    opacity .4s ease,
    transform .66s cubic-bezier(.2,.78,.2,1)!important;
}

html body .signal-landscape__xydesc-shell.is-delayed-hidden{
  max-height:0!important;
  opacity:0!important;
  transform:translate3d(0,-7px,0)!important;
  pointer-events:none!important;
}

html body .signal-landscape__xydesc-shell.is-delayed-revealing{
  will-change:max-height,opacity,transform!important;
}

/*
  The former toggle occupied a strip between status readouts and the field.
  With the control removed, restore a direct, clean transition into the pad.
*/
html body .signal-landscape__header{
  margin-bottom:0!important;
}

html body .signal-landscape__visual{
  margin-top:0!important;
}

@media(max-width:900px){
  html body .signal-landscape__xydesc-shell{
    transition:
      max-height .58s cubic-bezier(.2,.78,.2,1),
      opacity .36s ease,
      transform .58s cubic-bezier(.2,.78,.2,1)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .signal-landscape__xydesc-shell{
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   v2.243 — XY CONTEXT PANELS ON FIRST INTERACTION
   ========================================================= */

html body .signal-landscape__header{
  max-height:12rem!important;
  overflow:hidden!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  box-sizing:border-box!important;
  transition:
    max-height .58s cubic-bezier(.2,.78,.2,1),
    padding .48s cubic-bezier(.2,.78,.2,1),
    opacity .34s ease,
    transform .58s cubic-bezier(.2,.78,.2,1),
    border-color .32s ease!important;
}

html body .signal-landscape.is-context-hidden
.signal-landscape__header{
  max-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  opacity:0!important;
  transform:translate3d(0,-7px,0)!important;
  border-bottom-color:transparent!important;
  pointer-events:none!important;
}

html body .signal-landscape.is-context-revealing
.signal-landscape__header,
html body .signal-landscape.is-context-revealing
.signal-landscape__xydesc-shell{
  will-change:max-height,opacity,transform!important;
}

html body .signal-landscape.is-context-hidden
.signal-landscape__xydesc-shell{
  max-height:0!important;
  opacity:0!important;
  transform:translate3d(0,7px,0)!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  html body .signal-landscape__header{
    max-height:14rem!important;
    transition:
      max-height .54s cubic-bezier(.2,.78,.2,1),
      padding .44s cubic-bezier(.2,.78,.2,1),
      opacity .32s ease,
      transform .54s cubic-bezier(.2,.78,.2,1),
      border-color .3s ease!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .signal-landscape__header{
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   v2.244 — CONTEXT REVEAL TIMING / UNIFIED PANEL DESIGN
   ========================================================= */

/*
  Match the lower description panel to the two technical readouts while
  preserving its intentionally larger lowercase typography.
*/
html body .signal-landscape__xydesc{
  color:rgba(var(--landscape-ink),.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(5,6,6,.78) 18%,
      rgba(5,6,6,.72)
    )!important;
  border:1px solid rgba(var(--landscape-ink),.18)!important;
  border-left:2px solid rgba(var(--landscape-accent),.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.18)!important;
  font-weight:700!important;
  letter-spacing:.075em!important;
}

html[data-theme="light"] body .signal-landscape__xydesc{
  color:rgba(22,25,23,.96)!important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--landscape-accent),.12),
      rgba(238,239,235,.94) 18%,
      rgba(226,228,223,.91)
    )!important;
  border-color:rgba(22,25,23,.2)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 5px 14px rgba(30,34,31,.1)!important;
}

@media(max-width:900px){
  html body .signal-landscape__xydesc{
    letter-spacing:.055em!important;
  }
}


/* v2.245 — regular weight for all three status rectangles */
html body .signal-landscape__readout,
html body .signal-landscape__project-readout,
html body .signal-landscape__xydesc{
  font-weight:600!important;
}