/* Fonts are self-hosted so visitors' IP addresses aren't sent to Google (UK GDPR). */
@font-face
{
  font-family:'Manrope';
  src:url(fonts/manrope-variable.woff2) format('woff2');
  font-weight:400 800;
  font-display:swap
}
@font-face
{
  font-family:'DM Mono';
  src:url(fonts/dm-mono-400.woff2) format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face
{
  font-family:'DM Mono';
  src:url(fonts/dm-mono-500.woff2) format('woff2');
  font-weight:500;
  font-display:swap
}
:root
{
  --bg:#111211;
  --ink:#e9e7df;
  --muted:#93938b;
  --line:#2b2d2a;
  --lime:#d7f36a
}
*
{
  box-sizing:border-box
}
html
{
  scroll-behavior:smooth
}
body
{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Manrope,sans-serif
}
a
{
  color:inherit;
  text-decoration:none
}
:focus-visible
{
  outline:2px solid var(--lime);
  outline-offset:3px
}
header
{
  height:80px;
  padding:0 5vw;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
  font:10px 'DM Mono';
  letter-spacing:.08em;
  text-transform:uppercase
}
.wordmark
{
  font-weight:500
}
.wordmark b,.start b,a b
{
  color:var(--lime);
  margin-right:8px
}
nav
{
  display:flex;
  gap:30px;
  color:var(--muted);
  margin-left:auto;
  margin-right:42px
}
nav a
{
  transition:color .2s ease
}
nav a:hover,.start:hover
{
  color:var(--lime)
}
.menu
{
  display:none;
  background:none;
  border:0;
  color:var(--ink);
  font-size:18px
}
.hero
{
  min-height:690px;
  padding:36px 5vw 58px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1
}
.meta,.top,small,.label,footer,.eyebrow
{
  font:10px 'DM Mono';
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)
}
.meta
{
  display:flex;
  justify-content:space-between
}
.hero-grid
{
  padding-top:clamp(105px,14vw,185px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}
.eyebrow
{
  color:var(--lime);
  margin-bottom:28px
}
.hero h1
{
  font-size:clamp(76px,12.8vw,190px);
  line-height:.81;
  letter-spacing:-.095em;
  margin:0
}
.hero em,h2 em
{
  font:400 .98em Georgia,serif;
  letter-spacing:-.08em
}
.intro
{
  width:250px;
  padding-bottom:3px
}
.intro p,.grid article p,.contact>div>p
{
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.intro a
{
  display:inline-block;
  margin-top:22px;
  font:11px 'DM Mono';
  text-transform:uppercase
}
.scroll
{
  position:absolute;
  left:5vw;
  bottom:38px;
  color:var(--muted);
  font:10px 'DM Mono';
  text-transform:uppercase
}
.scroll i
{
  display:inline-block;
  width:60px;
  height:1px;
  background:var(--muted);
  margin-left:15px;
  vertical-align:middle
}
.work
{
  padding:120px 5vw 145px;
  position:relative;
  z-index:1
}
.section-intro
{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  margin-bottom:72px
}
.section-intro h2,.contact h2
{
  font-size:clamp(46px,6vw,86px);
  line-height:.9;
  letter-spacing:-.08em;
  margin:0
}
.section-intro p
{
  color:var(--muted);
  font-size:12px;
  max-width:180px;
  line-height:1.5;
  margin:0 0 0 auto
}
.grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px
}
.grid article
{
  transition:transform .35s ease
}
.grid article:nth-child(2)
{
  transform:translateY(34px)
}
.grid article:nth-child(3)
{
  transform:translateY(-12px)
}
.grid article:hover
{
  transform:translateY(-6px)
}
.grid article:nth-child(2):hover
{
  transform:translateY(24px)
}
.top
{
  display:flex;
  justify-content:space-between;
  padding-bottom:15px;
  border-bottom:1px solid var(--line)
}
.top span:first-child
{
  color:var(--ink)
}
.media
{
  height:clamp(330px,40vw,570px);
  margin:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden
}
.media::before,.media::after
{
  content:'';
  position:absolute;
  pointer-events:none
}
.media::before
{
  width:72%;
  aspect-ratio:1;
  border:1px solid rgba(233,231,223,.22);
  border-radius:50%;
  transform:rotate(-18deg) scaleY(.44)
}
.media::after
{
  inset:12%;
  border:1px solid rgba(233,231,223,.12);
  transform:rotate(18deg) skewY(-12deg)
}
.media span
{
  font:10px 'DM Mono';
  letter-spacing:.1em;
  color:var(--muted);
  text-align:center;
  position:relative;
  z-index:1
}
.media img,.media video
{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0
}
.media video
{
  background:var(--bg)
}
.media:has(img) .media-placeholder,.media:has(video) .media-placeholder
{
  opacity:0
}
.grid article:nth-child(2) .media::before
{
  width:58%;
  border-radius:18% 50% 18% 50%;
  transform:rotate(22deg) scaleY(.78)
}
.grid article:nth-child(2) .media::after
{
  inset:18% 8%;
  transform:rotate(-8deg)
}
.grid article:nth-child(3) .media::before
{
  width:86%;
  border-radius:0;
  transform:rotate(45deg) scaleY(.34)
}
.grid article:nth-child(3) .media::after
{
  inset:9% 18%;
  transform:rotate(-28deg) skewY(18deg)
}
.web
{
  background:
    linear-gradient(132deg,rgba(215,243,106,.13),transparent 42%),
    #183021
}
.space
{
  background:
    radial-gradient(circle at 65% 35%,rgba(119,136,199,.4),transparent 1px),
    radial-gradient(circle at 30% 65%,rgba(233,231,223,.22),transparent 1px),
    #191b26;
  background-size:90px 90px,130px 130px,auto
}
.identity
{
  background:
    linear-gradient(135deg,transparent 49.5%,rgba(17,18,17,.2) 50%,transparent 50.5%),
    #d7f36a;
  background-size:22px 22px
}
.identity span
{
  color:#111211
}
.grid h3
{
  font-size:clamp(22px,2.4vw,33px);
  line-height:.98;
  letter-spacing:-.07em;
  max-width:250px;
  margin:0
}
.grid article p
{
  font-size:12px;
  max-width:280px;
  margin:15px 0
}
.enquire
{
  display:block;
  color:var(--muted);
  font:10px 'DM Mono';
  text-transform:uppercase;
  margin-top:26px
}
.contact
{
  padding:130px 5vw 150px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 2fr;
  position:relative;
  z-index:1
}
.label
{
  display:flex;
  flex-direction:column;
  gap:24px
}
.contact h2
{
  font-size:clamp(62px,9vw,126px)
}
.contact>div>p
{
  max-width:370px;
  margin:40px 0
}
.contact form
{
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:22px
}
.contact label
{
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--muted);
  font:10px 'DM Mono';
  text-transform:uppercase
}
.contact input,.contact textarea
{
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  padding:11px 0;
  font:14px Manrope;
  outline:0
}
.contact input:focus,.contact textarea:focus
{
  border-color:var(--lime)
}
.field-row
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.contact label .optional
{
  opacity:.6;
  text-transform:none
}
.contact label.consent
{
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  margin-top:4px;
  font:13px/1.55 Manrope,sans-serif;
  text-transform:none;
  cursor:pointer
}
.contact .consent input
{
  flex:none;
  width:18px;
  height:18px;
  margin:1px 0 0;
  padding:0;
  accent-color:var(--lime);
  cursor:pointer
}
.contact .consent a,.form-note a
{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--lime);
  text-underline-offset:3px
}
.contact .form-note
{
  max-width:440px;
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6
}
.contact .form-error
{
  margin:0;
  padding:14px 16px;
  border:1px solid #e0785a;
  color:#f0a58c;
  font:11px/1.5 'DM Mono'
}
.contact button
{
  align-self:flex-start;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lime);
  padding:0 0 9px;
  color:var(--ink);
  font:11px 'DM Mono';
  text-transform:uppercase;
  cursor:pointer
}
.contact button b
{
  color:var(--lime);
  margin-left:6px
}
.contact #success
{
  margin-top:35px;
  padding:18px 20px;
  border:1px solid var(--line);
  font:11px 'DM Mono'
}
.contact #success:first-letter
{
  color:var(--lime)
}
footer
{
  padding:26px 5vw 24px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto auto auto;
  column-gap:28px;
  row-gap:18px;
  align-items:center;
  position:relative;
  z-index:1
}
footer a
{
  color:var(--ink)
}
.footer-links
{
  display:flex;
  gap:22px
}
.footer-links a
{
  color:var(--muted);
  transition:color .2s ease
}
.footer-links a:hover
{
  color:var(--lime)
}
.legal-example
{
  grid-column:1 / -1;
  padding-top:15px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font:8px 'DM Mono';
  letter-spacing:.05em;
  line-height:1.6;
  text-transform:uppercase;
  margin:0
}
.scene
{
  position:fixed;
  inset:0;
  perspective:900px;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  opacity:.7
}
.cube,.orb
{
  position:absolute;
  transform-style:preserve-3d
}
.cube i,.orb i
{
  position:absolute;
  inset:0;
  border:1px solid rgba(215,243,106,.35)
}
.cube-a
{
  width:180px;
  height:180px;
  right:9%;
  top:21%;
  animation:spin-a 18s ease-in-out infinite;
  transform:rotateX(58deg) rotateZ(25deg)
}
.cube-a i:nth-child(1)
{
  transform:translateZ(90px)
}
.cube-a i:nth-child(2)
{
  transform:rotateY(90deg) translateZ(90px)
}
.cube-a i:nth-child(3)
{
  transform:rotateX(90deg) translateZ(90px)
}
.orb-b
{
  width:90px;
  height:90px;
  left:7%;
  top:55%;
  border-radius:50%;
  animation:spin-b 14s ease-in-out infinite;
  transform:rotateY(34deg)
}
.orb-b i
{
  border-radius:50%
}
.orb-b i:first-child
{
  transform:rotateX(65deg) scaleY(.42)
}
.orb-b i:last-child
{
  transform:rotateY(65deg) scaleX(.42)
}
.cube-c
{
  width:140px;
  height:140px;
  right:33%;
  bottom:10%;
  animation:spin-c 22s linear infinite;
  transform:rotateX(32deg) rotateY(48deg)
}
.cube-c i:nth-child(1)
{
  transform:translateZ(70px);
  border-color:rgba(233,231,223,.18)
}
.cube-c i:nth-child(2)
{
  transform:rotateY(60deg) translateZ(70px);
  border-color:rgba(233,231,223,.18)
}
.cube-c i:nth-child(3)
{
  transform:rotateX(60deg) translateZ(70px);
  border-color:rgba(233,231,223,.18)
}
@keyframes spin-a
{
  50%
  {
    translate:0 26px;
    rotate:8deg
  }
}
@keyframes spin-b
{
  50%
  {
    translate:0 -24px;
    rotate:-14deg
  }
}
@keyframes spin-c
{
  to
  {
    rotate:360deg
  }
}
@media(max-width:800px)
{
  header
  {
    height:70px;
    padding:0 6vw
  }
  .start,nav
  {
    display:none
  }
  .menu
  {
    display:block
  }
  nav.is-open
  {
    display:flex;
    position:absolute;
    top:70px;
    left:6vw;
    right:6vw;
    margin:0;
    padding:18px 0 22px;
    flex-direction:column;
    gap:16px;
    border-bottom:1px solid var(--line);
    background:var(--bg)
  }
  .hero
  {
    min-height:680px;
    padding:27px 6vw 45px
  }
  .meta span:last-child
  {
    display:none
  }
  .hero-grid
  {
    padding-top:128px;
    display:block
  }
  .hero h1
  {
    font-size:clamp(68px,21vw,150px)
  }
  .intro
  {
    width:72%;
    margin-top:58px
  }
  .work
  {
    padding:90px 6vw 100px
  }
  .section-intro
  {
    display:block;
    margin-bottom:48px
  }
  .section-intro h2
  {
    margin-top:30px;
    font-size:55px
  }
  .section-intro p
  {
    margin-top:25px
  }
  .grid
  {
    display:block
  }
  .grid article
  {
    margin-bottom:88px;
    transform:none !important
  }
  .media
  {
    height:auto;
    aspect-ratio:.92
  }
  .contact
  {
    padding:90px 6vw 110px;
    display:block
  }
  .label
  {
    margin-bottom:55px
  }
  .contact h2
  {
    font-size:75px
  }
  footer
  {
    padding:19px 6vw;
    gap:18px;
    grid-template-columns:1fr auto;
    grid-auto-flow:dense
  }
  .footer-links
  {
    grid-column:1 / -1
  }
  footer span:nth-child(2)
  {
    display:none
  }
  footer a
  {
    justify-self:end
  }
  .legal-example
  {
    padding-top:13px;
    font-size:9px;
    line-height:1.6
  }
  .cube-a
  {
    width:110px;
    height:110px;
    right:-20px;
    top:26%
  }
  .orb-b
  {
    width:58px;
    height:58px;
    left:-5px
  }
  .cube-c
  {
    width:80px;
    height:80px;
    right:16%;
    bottom:18%
  }
}

@media(prefers-reduced-motion:reduce)
{
  *,*::before,*::after
  {
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important
  }
}

.contact-teaser
{
  padding:130px 5vw 150px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 2fr;
  position:relative;
  z-index:1
}
.big-link
{
  display:inline-block;
  margin-top:30px;
  padding-bottom:10px;
  border-bottom:1px solid var(--lime);
  font:11px 'DM Mono';
  text-transform:uppercase
}
.big-link b
{
  color:var(--lime);
  margin-left:7px
}
.team-hero
{
  min-height:620px;
  padding:36px 5vw 58px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1
}
.team-hero-copy
{
  padding-top:clamp(100px,12vw,160px)
}
.team-hero h1
{
  font-size:clamp(76px,12vw,180px);
  line-height:.8;
  letter-spacing:-.095em;
  margin:0
}
.team-showcase
{
  padding:120px 5vw 160px;
  display:block;
  position:relative;
  z-index:1
}
.team-stage
{
  max-width:720px;
  text-align:center;
  margin:auto
}
.team-number
{
  max-width:720px;
  margin:0 auto 45px
}
.team-portrait
{
  width:min(270px,54vw);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 42px;
  color:var(--bg);
  font:clamp(50px,8vw,110px) 'DM Mono';
  position:relative;
  overflow:hidden;
  transition:background .3s ease,border-radius .35s ease,transform .35s ease
}
.team-portrait::before,.team-portrait::after
{
  content:'';
  position:absolute;
  pointer-events:none
}
.team-portrait::before
{
  width:140%;
  height:1px;
  background:rgba(17,18,17,.28);
  transform:rotate(-35deg)
}
.team-portrait::after
{
  inset:14%;
  border:1px solid rgba(17,18,17,.22);
  transform:rotate(18deg)
}
.team-portrait.blue::before
{
  background:rgba(233,231,223,.35)
}
.team-portrait.blue::after
{
  border-color:rgba(233,231,223,.3)
}
.team-portrait.portrait-02
{
  border-radius:18% 50% 18% 50%
}
.team-portrait.portrait-03
{
  border-radius:50% 18% 50% 18%
}
.team-portrait.portrait-04
{
  border-radius:50% 50% 18% 18%
}
.team-portrait.portrait-05
{
  border-radius:18% 18% 50% 50%
}
.team-portrait.portrait-06
{
  border-radius:50% 18% 18% 50%
}
.team-portrait.portrait-07
{
  border-radius:18% 50% 50% 18%
}
.team-portrait.portrait-08
{
  border-radius:50% 18% 50% 18%
}
.team-portrait.lime
{
  background:var(--lime)
}
.team-portrait.blue
{
  background:#7788c7
}
.team-portrait.paper
{
  background:var(--ink)
}
.team-details h2,.standalone-contact h1
{
  font-size:clamp(46px,6vw,86px);
  line-height:.9;
  letter-spacing:-.08em;
  margin:0
}
.team-details>p:last-child
{
  color:var(--muted);
  font-size:20px;
  line-height:1.45;
  max-width:500px;
  margin:20px auto 0
}
.team-controls
{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:45px;
  color:var(--muted);
  font:11px 'DM Mono'
}
.team-controls button
{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  width:46px;
  height:46px;
  border-radius:50%;
  font-size:18px;
  cursor:pointer
}
.team-controls button:hover
{
  border-color:var(--lime);
  color:var(--lime)
}
.team-reveal
{
  opacity:0;
  transform:translateY(45px);
  transition:opacity .8s ease,transform .8s ease
}
.team-reveal.is-visible
{
  opacity:1;
  transform:translateY(0)
}
.team-number
{
  color:var(--muted);
  font:10px 'DM Mono'
}
.standalone-contact
{
  min-height:calc(100vh - 80px);
  border-top:0
}
.standalone-contact h1
{
  font-size:clamp(62px,9vw,126px)
}
@media(max-width:800px)
{
  .contact-teaser
  {
    padding:90px 6vw 110px;
    display:block
  }
  .team-hero
  {
    min-height:650px;
    padding:27px 6vw 45px
  }
  .team-hero h1
  {
    font-size:clamp(68px,21vw,150px)
  }
  .team-showcase
  {
    padding:90px 6vw 110px;
    display:block
  }
  .team-number
  {
    margin-bottom:45px
  }
  .standalone-contact
  {
    min-height:auto
  }
  .field-row
  {
    grid-template-columns:1fr
  }
  .team-details>p:last-child
  {
    font-size:17px
  }
}

/* ---------- Legal pages (privacy.html, terms.html) ---------- */
.legal-hero
{
  padding:36px 5vw 70px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1
}
.legal-hero h1
{
  padding-top:clamp(80px,10vw,140px);
  font-size:clamp(64px,10vw,150px);
  line-height:.84;
  letter-spacing:-.09em;
  margin:0
}
.legal-hero h1 em
{
  font:400 .98em Georgia,serif;
  letter-spacing:-.08em;
  color:var(--lime)
}
.legal-hero .lede
{
  max-width:520px;
  margin:40px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65
}
.legal-body
{
  padding:90px 5vw 130px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  position:relative;
  z-index:1
}
.legal-toc
{
  position:sticky;
  top:40px;
  align-self:start
}
.legal-toc ol
{
  margin:24px 0 0;
  padding:0;
  list-style:none;
  counter-reset:toc;
  display:flex;
  flex-direction:column;
  gap:12px;
  font:11px 'DM Mono';
  text-transform:uppercase;
  letter-spacing:.06em
}
.legal-toc li
{
  counter-increment:toc
}
.legal-toc a
{
  color:var(--muted);
  transition:color .2s ease
}
.legal-toc a::before
{
  content:counter(toc,decimal-leading-zero) '  ';
  color:var(--line);
  white-space:pre
}
.legal-toc a:hover
{
  color:var(--lime)
}
.legal-content
{
  max-width:680px
}
.legal-content section
{
  padding:0 0 56px;
  margin:0 0 56px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:40px
}
.legal-content section:last-child
{
  border-bottom:0;
  margin-bottom:0
}
.legal-content h2
{
  font-size:clamp(28px,3vw,40px);
  line-height:1;
  letter-spacing:-.06em;
  margin:14px 0 24px
}
.legal-content h3
{
  font-size:16px;
  letter-spacing:-.02em;
  margin:28px 0 8px
}
.legal-content p,.legal-content li,.legal-content td
{
  color:var(--muted);
  font-size:15px;
  line-height:1.7
}
.legal-content p
{
  margin:0 0 14px
}
.legal-content ul
{
  margin:0 0 14px;
  padding-left:18px
}
.legal-content li
{
  margin-bottom:6px
}
.legal-content li::marker
{
  color:var(--lime)
}
.legal-content strong
{
  color:var(--ink);
  font-weight:600
}
.legal-content a
{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--lime);
  text-underline-offset:3px
}
.legal-content .table-wrap
{
  overflow-x:auto;
  margin:10px 0 18px
}
.legal-content table
{
  width:100%;
  min-width:520px;
  border-collapse:collapse
}
.legal-content th
{
  text-align:left;
  padding:0 16px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font:10px 'DM Mono';
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:400
}
.legal-content td
{
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:14px
}
.legal-content address
{
  font-style:normal;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  margin:0 0 14px
}
/* Business details still to be filled in, deliberately loud so they can't ship unnoticed. */
mark.fill
{
  background:rgba(215,243,106,.16);
  color:var(--lime);
  padding:0 4px;
  border:1px dashed rgba(215,243,106,.5)
}
@media(max-width:800px)
{
  .legal-hero
  {
    padding:27px 6vw 55px
  }
  .legal-body
  {
    padding:60px 6vw 90px;
    display:block
  }
  .legal-toc
  {
    position:static;
    margin-bottom:60px
  }
}
.legal-example mark,.legal-example a
{
  text-transform:none
}

/* ---------- Blurred code reels in project cards (code-reel.js) ---------- */
.code-reel
{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)
}
/* Pre-blurred image: the animation is a pure GPU transform. Overrides the
   generic .media img cover rule so it keeps its natural size. */
.media .code-reel .code-track
{
  position:static;
  display:block;
  width:auto;
  max-width:none;
  height:auto;
  object-fit:initial;
  will-change:transform;
  animation:code-scroll 100s linear infinite paused
}
.code-reel.is-playing .code-track
{
  animation-play-state:running
}
/* Durations keep all three scrolling at roughly the same speed (~25px/s). */
.grid article:nth-child(2) .code-track
{
  animation-duration:46s
}
.grid article:nth-child(3) .code-track
{
  animation-duration:50s
}
@keyframes code-scroll
{
  to
  {
    transform:translate3d(0,-50%,0)
  }
}
.media:has(.code-reel) .media-placeholder
{
  opacity:0
}
@media(prefers-reduced-motion:reduce)
{
  .media .code-reel .code-track
  {
    animation:none
  }
}

/* Read by screen readers and search engines, not shown on screen. */
.visually-hidden
{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}