/* The supplied transparent sheet is used directly as a CSS sprite.
   Ordinary backgrounds also work when opening index.html from disk. */
.button:before,.nav-download:before,.hero-bottom button:before,.play-preview:before{
  background:transparent url('assets/brush-strokes.png') center top / 100% 434.4% no-repeat;
  clip-path:none;filter:grayscale(1);opacity:.98;inset:-4px -10px;
}
.button:after,.nav-download:after,.hero-bottom button:after{content:none}
.button:hover:before,.nav-download:hover:before{opacity:.84}
.button-text:before,.hero .button-text:before,.hero-bottom button:before,.play-preview:before{
  background-size:100% 453.7%;background-position:center 34.35%;opacity:.12;
}
.button-text:hover:before,.hero .button-text:hover:before,.hero-bottom button:hover:before,.play-preview:hover:before{opacity:.2}
.button-small:before{background-size:100% 469.3%;background-position:center bottom}
.play-preview:before{inset:-3px -8px}
.play-preview{position:absolute;width:64px;height:48px;color:#fff}
.play-preview:before{opacity:.95}
.play-preview:hover:before{opacity:.82}
.tab-glass{background:transparent url('assets/brush-strokes.png') center 34.35% / 100% 453.7% no-repeat;clip-path:none;filter:grayscale(1)}
.ink-decoration{position:absolute;pointer-events:none;z-index:-1;width:clamp(240px,31vw,590px);height:85%;background:url('assets/ink-decoration.png') center / contain no-repeat;filter:grayscale(1);opacity:.105;transform-origin:center}
.ink-decoration-left{left:-9%;top:17%;opacity:.085;transform:rotate(-18deg);animation:ink-drift-left 24s ease-in-out infinite alternate}
.ink-decoration-right{right:-10%;top:2%;opacity:.06;transform:rotate(165deg);animation:ink-drift-right 29s ease-in-out infinite alternate}
.hero .ink-decoration{-webkit-mask-image:radial-gradient(ellipse at 40% 40%,#000 12%,#0009 46%,transparent 74%);mask-image:radial-gradient(ellipse at 40% 40%,#000 12%,#0009 46%,transparent 74%)}
.lab-art:before{content:'';position:absolute;inset:0;background:url('assets/ink-decoration.png') center / contain no-repeat;opacity:.07;filter:grayscale(1);pointer-events:none;transform:rotate(32deg)}
.ink-pointer-trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;contain:strict}
@keyframes ink-drift-left{to{transform:translate(12px,-18px) rotate(-15deg) scale(1.035)}}
@keyframes ink-drift-right{to{transform:translate(-14px,14px) rotate(168deg) scale(1.04)}}
[data-ambient=paused] .ink-decoration{animation-play-state:paused}
@media(max-width:700px){.ink-decoration{width:65%;height:70%;opacity:.07}.ink-decoration-left{left:-33%;top:28%}.ink-decoration-right{right:-35%;top:12%;opacity:.055}.hero-actions .button:before{inset:-3px -5px}}
@media(prefers-reduced-motion:reduce){.ink-decoration{animation:none}.ink-pointer-trail{display:none}}
@media(max-width:360px){.showcase-switcher{max-width:100%}.showcase-switcher button{padding-inline:6px;font-size:12px;gap:6px}.showcase-switcher .icon{display:none}}
@media(max-width:700px){.menu-open .nav-shell{height:auto;min-height:64px}.play-preview{top:18%}.cinema-overlay{right:17px}}

/* Recompose the supplied transparent wash into quiet, asymmetric margins.
   Each section keeps its own ink behind the content; no extra text or controls. */
#main{overflow:clip}
.showcase-section,.tools-section,.lab-section,.about-section{position:relative;isolation:isolate}
.showcase-section:before,.tools-section:before,.tools-section:after,.lab-section:after,.about-section:before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  background:url('assets/ink-decoration.png') center / contain no-repeat;
  filter:grayscale(1);opacity:.065;
  -webkit-mask-image:radial-gradient(ellipse,#000 16%,#000a 43%,transparent 72%);
  mask-image:radial-gradient(ellipse,#000 16%,#000a 43%,transparent 72%);
}
.showcase-section:before{width:clamp(280px,35vw,540px);height:650px;left:-15%;top:3%;transform:rotate(27deg)}
.tools-section:before{width:clamp(260px,32vw,500px);height:660px;right:-24%;top:-190px;transform:rotate(166deg);opacity:.08}
.tools-section:after{width:clamp(240px,28vw,430px);height:500px;left:-23%;bottom:-180px;transform:rotate(-23deg);opacity:.07}
.lab-section:after{width:clamp(270px,34vw,520px);height:600px;right:-26%;top:18%;transform:rotate(42deg);opacity:.055}
.about-section:before{width:clamp(300px,39vw,620px);height:560px;left:-22%;top:-25px;transform:rotate(73deg);opacity:.055}
@media(max-width:700px){
  .showcase-section:before{left:-190px;width:300px;height:460px;top:4%;opacity:.045}
  .tools-section:before{right:-190px;width:290px;height:470px;top:-130px;opacity:.06}
  .tools-section:after{left:-180px;width:280px;height:440px;bottom:-100px;opacity:.05}
  .lab-section:after{right:-210px;width:310px;height:460px;top:38%;opacity:.04}
  .about-section:before{left:-210px;width:330px;height:460px;top:0;opacity:.04}
}