/* System fonts keep the first impression immediate. */

:root {
  --bg: #0b0b10;
  --panel: #161519;
  --panel-2: #211e23;
  --line: #343039;
  --text: #f4eee5;
  --dim: #b4aeb4;
  --faint: #99919c;
  --accent: #efa775;      /* copper, as in the plug-in UI */
  --accent-ink: #17110a;
  --max: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.01em; }

section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.5rem 1.25rem;
  border-top: 1px solid var(--line);
}
section:first-of-type { border-top: 0; }

/* ---------------------------------------------------------------- top bar */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}
.wordmark {
  display: inline-block; text-decoration: none; color: var(--text);
}
.wordmark img, .wordmark svg { width: 200px; height: auto; display: block; }
.wordmark.small img { width: 60px; opacity: .75; }
.foot-grid .wordmark svg { width: 104px; opacity: .75; }
.bar.bar-float { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.bar nav { display: flex; gap: 1.35rem; align-self: flex-start; margin-top: .5rem; }
.bar.bar-end { justify-content: flex-end; }
.bar nav a {
  color: var(--dim); text-decoration: none; font-size: .9rem;
}
.bar nav a:hover { color: var(--text); }

/* ------------------------------------------------------------------- hero */
.hero { padding-top: 7.5rem; }
.hero-copy { max-width: 46rem; margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(3rem, 7.5vw, 6rem); font-weight: 900; line-height: .95; letter-spacing: -.055em; }
.hero h2 { color: var(--accent); }
.lede {
  max-width: 44rem; margin: 0 0 1.25rem;
  color: var(--dim); font-size: 1.08rem;
}
.cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: .72rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit; font-size: .95rem; font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: #22262b; border-color: #3a4048; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 650;
}
.btn.primary:hover { background: #e9924a; border-color: #e9924a; }
.btn[disabled] { opacity: .5; cursor: progress; }

.shot { margin: 1.8rem 0 0; }
.shot img {
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
@media (min-width: 761px) { .shot img { width: 100%; } }
.shot figcaption {
  margin-top: .9rem; color: var(--faint); font-size: .85rem;
}

/* ------------------------------------------------------------- amp cards */
.section-note {
  max-width: 46rem; color: var(--dim); margin: 0 0 1rem;
  font-size: 1.22rem; line-height: 1.5;
}

#amps h2 { font-size: clamp(1.9rem, 3.9vw, 2.6rem); }
.grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.amp {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.amp::before {
  content: "";
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 36px; height: 36px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
.amp > img { border-bottom: 1px solid var(--line); background: #000; aspect-ratio: 2 / 1; object-fit: cover; }
.amp > img.crop-top { object-position: 50% 0; }
.amp .imgbox {
  border-bottom: 1px solid var(--line); background: #000;
  aspect-ratio: 2 / 1; overflow: hidden;
}
.amp .imgbox > img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transform-origin: 50% 0%; transform: scale(1.2);
}
.amp .body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.amp h3 { margin-bottom: .15rem; font-size: 1.2rem; }
.amp .tag {
  margin: 0 0 .8rem;
  color: var(--accent);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.amp p { margin: 0 0 1rem; color: var(--dim); font-size: .95rem; }
.amp-specs {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.amp-specs li {
  padding: .28rem .6rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2);
  color: var(--dim); font-size: .78rem; white-space: nowrap;
}
.platform {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem 1rem; margin: 0 0 1.75rem;
}
.platform-specs { gap: .5rem; margin: 0; }
.platform-specs li {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border-color: #23272d; color: var(--dim);
}
.platform-specs svg { width: 13px; height: 13px; flex: none; color: var(--accent); }
.platform-specs .dot { margin: 0; color: var(--faint); }
.amp .fine { font-style: italic; }
.amp .btn { margin-top: auto; text-align: center; }

.amp-demos {
  width: 100%; max-width: none; margin: .25rem 0 1.25rem;
  padding: 1rem 0 0; border-top: 1px solid var(--line);
}
.demo-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .85rem; font-weight: 600; }
.demo-heading > span { margin-left: auto; color: var(--faint); font-size: .55rem; letter-spacing: .13em; }
.demo-track, .demo-empty { display: flex; align-items: center; gap: .75rem; padding-top: .9rem; }
.demo-play {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  border: 1px solid #b86c31; border-radius: 50%; color: var(--accent-ink);
  background: linear-gradient(145deg, #edb177, var(--accent)); cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff40, 0 3px 10px #0004;
}
.demo-play svg { width: 20px; height: 20px; fill: currentColor; }
.demo-play:hover { filter: brightness(1.12); }
.demo-play:focus-visible, .demo-seek:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.demo-placeholder { background: var(--panel-2); border-color: var(--line); color: var(--faint); box-shadow: none; cursor: default; }
.demo-empty { color: var(--faint); font-size: .8rem; }
.demo-details { flex: 1; min-width: 0; }
.demo-caption { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.demo-title { font-size: .76rem; overflow-wrap: anywhere; }
.demo-seek {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 24px; margin: 3px 0 0;
  background: transparent; cursor: pointer; --progress: 0%;
}
.demo-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--progress), var(--line) var(--progress)); }
.demo-seek::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line); }
.demo-seek::-moz-range-progress { height: 3px; background: var(--accent); }
.demo-seek::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); }
.demo-seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--accent); }
.demo-seek:disabled { opacity: .4; cursor: default; }
.demo-error { display: block; color: #efae8d; font-size: .7rem; }
.demo-error:empty { display: none; }
.is-playing .demo-title { color: #edb177; }

/* Compact single-row player */
.demo-track { gap: .7rem; padding-top: .7rem; }
.demo-play { flex-basis: 32px; width: 32px; height: 32px; }
.demo-play svg { width: 15px; height: 15px; transform: translateX(-.5px); }
.demo-caption { flex-wrap: nowrap; align-items: center; }
/* Track dropdown */
.demo-dropdown { position: relative; flex: 1; min-width: 0; }
.demo-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 3px 0; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: .76rem; cursor: pointer; text-align: left;
}
.demo-selected { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-dropdown-trigger svg {
  flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--accent);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s ease;
}
.demo-dropdown.open .demo-dropdown-trigger svg { transform: rotate(180deg); }
.demo-dropdown-trigger:hover .demo-selected { color: var(--accent); }
.demo-dropdown-menu {
  display: none; position: fixed; top: 0; left: 0;
  min-width: 160px; max-height: 240px; overflow-y: auto; z-index: 50;
  padding: 5px; background: #202124; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 10px 24px #0007;
}
.demo-dropdown.open .demo-dropdown-menu { display: block; }
.demo-dropdown-option {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 5px;
  background: transparent; color: var(--text); font: inherit; font-size: .75rem;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.demo-dropdown-option:hover,
.demo-dropdown-option:focus-visible { background: #34363a; outline: none; }
.demo-dropdown-option.active { color: var(--accent); background: #df914d12; }
.demo-dropdown-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.demo-seek { height: 14px; margin: 1px 0 0; }
.demo-volume { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--dim); }
.demo-volume svg { width: 15px; height: 15px; fill: currentColor; }
.demo-volume input {
  appearance: none; -webkit-appearance: none; width: 55px; height: 3px;
  border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) var(--volume, 75%), var(--line) var(--volume, 75%));
}
.demo-volume input::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.demo-volume input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--accent); }
.demo-volume input:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

@media (max-width: 420px) {
  .demo-volume input { width: 36px; }
}

.amp.bundle {
  background: linear-gradient(160deg, #1e2126, var(--panel));
  border-color: #3a4048;
}
.amp.bundle .body { justify-content: center; }

/* --------------------------------------------------------------- columns */
.cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cols h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cols ul { margin: 0; padding-left: 1.1rem; color: var(--dim); font-size: .95rem; }
.cols li { padding: .18rem 0; }

/* ------------------------------------------------------------ philosophy */
.philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 100px 1.25rem;
}
.philosophy h2 {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.1; letter-spacing: -.03em;
}
.philosophy h2 span { color: var(--accent); }
.philosophy-copy { max-width: 520px; }
.philosophy-copy p {
  color: var(--dim);
  font-size: 17px; line-height: 1.75; margin: 0 0 20px;
}
.philosophy-copy p:first-child {
  color: var(--text);
  font-size: 20px; line-height: 1.5;
}
@media (max-width: 768px) {
  .philosophy {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 64px 1.25rem;
  }
}

/* ------------------------------------------------------------------- faq */
details {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
details summary {
  cursor: pointer; font-weight: 600; list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; float: right; color: var(--faint); font-weight: 400;
}
details[open] summary::after { content: "–"; }
details p { margin: .85rem 0 0; color: var(--dim); max-width: 46rem; }
code {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; padding: .05em .35em; font-size: .88em;
}

/* ---------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.foot-grid {
  max-width: var(--max); margin: 0 auto; padding: 3rem 1.25rem;
  display: grid; gap: 2.5rem;
  grid-template-columns: 2fr 1fr 1fr;
}
footer h4 {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
footer ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
footer li { padding: .22rem 0; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }
footer a.social { display: inline-flex; align-items: center; gap: .45rem; }
.fine { color: var(--faint); font-size: .8rem; line-height: 1.55; margin: .9rem 0 0; }
.buy-error { color: #e08a6a; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .bar nav { gap: .9rem; }
  section { padding: 3rem 1.25rem; }
  .bar.bar-float { position: static; }
  .hero { padding-top: 1rem; }
  .wordmark svg, .wordmark img { width: 104px; }
}

/* ------------------------------------------------------- legal doc pages */
.doc { max-width: 46rem; }
.doc h2 { margin-top: 2.25rem; font-size: 1.15rem; }
.doc p, .doc li { color: var(--dim); }
.doc .updated { color: var(--faint); font-size: .85rem; }
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 8px 8px 0;
  padding: 1rem 1.15rem; margin: 1.5rem 0;
}
.notice p { margin: 0; }

.licence-key {
  display: block;
  margin: .8rem 0;
  padding: .8rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  word-break: break-all;
  user-select: all;
}
.licence-actions { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }

/* thanks.html download block */
.download-buttons { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.mobile-warning {
  margin-top: .9rem; padding: .8rem .95rem;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--bg);
}
.mobile-warning p + p { margin-top: .5rem; color: var(--dim); }
.platform-switch {
  display: block; margin: .35rem 0 0; padding: 0;
  border: 0; background: none; color: var(--accent);
  font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.platform-switch:hover { color: var(--text); }
.notice .fine { margin-top: .6rem; }

/* OS names keep their own casing ("macOS"). */
#requirements .cols h3 {
  display: flex; align-items: center; min-height: 1.5rem;
  font-size: .95rem; letter-spacing: 0; text-transform: none;
}

.storefront {
  background:
    radial-gradient(ellipse 62% 640px at 100% 490px, #9b3b2229, transparent),
    var(--bg);
}
.storefront > section { padding-top: 6rem; padding-bottom: 6rem; }
.storefront .bar { align-items: center; padding-top: 1.5rem; }
.storefront .bar .wordmark svg { width: 142px; }
.storefront .bar nav { align-self: center; margin: 0; }
.storefront .bar nav a { font-size: .8rem; color: #d2c7cc; }
.storefront .bar nav { align-items: center; }
.eyebrow {
  font-size: .67rem; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.8rem;
}
.signal-light {
  display: inline-block; width: 6px; height: 6px; margin: 0 .6rem .1rem 0;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #efa77590;
}
.storefront .hero {
  position: relative; isolation: isolate; max-width: none;
  padding: 12rem max(1.25rem, calc((100% - 1100px) / 2)) 4rem;
  overflow: hidden;
}
.storefront .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 45% 33% at 2% 65%, #b5c8ecb0, transparent),
    radial-gradient(ellipse 53% 33% at 18% 87%, #e7a99b80, transparent),
    radial-gradient(ellipse 65% 48% at 92% 76%, #c9511bb5, transparent),
    radial-gradient(ellipse 40% 30% at 62% 57%, #793a3d40, transparent),
    linear-gradient(#080810 15%, #141017 60%, #0b0b10);
}
.storefront .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22;
  pointer-events: none; background-size: 520px 520px;
  background-image: url("data:image/svg+xml,%3Csvg width='1040' height='1040' viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h520v520H0z'/%3E%3C/svg%3E");
}
.storefront .hero-copy { max-width: 52rem; }
.storefront .hero h1 {
  font-size: clamp(3rem, 7.5vw, 6rem); line-height: .95;
  letter-spacing: -.055em; margin-bottom: 1.8rem;
}
.storefront h1 em, .storefront h2 em { font-style: normal; font-weight: inherit; color: #eeb795; }
.hero-price { font-size: 1rem; letter-spacing: .01em; margin: 0 0 1rem; }
.hero-price span { color: var(--accent); white-space: nowrap; }
.storefront .hero .lede { max-width: 33rem; margin: 0 auto 1.8rem; font-size: .98rem; }
.storefront .hero .fine { color: #c0afb5; margin-top: 1.3rem; }
.storefront .hero .cta + .eyebrow { margin-top: 2rem; }
.btn { border-radius: 99px; padding: .8rem 1.4rem; transition: background .2s, border-color .2s, transform .2s; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: #ffd0ad; border-color: #ffd0ad; }
.btn:hover { transform: translateY(-2px); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #c1d5f5; outline-offset: 5px;
}
.storefront .hero .btn:not(.primary) { background: #17121a75; border-color: #e6b6a44a; }
.storefront .shot { margin: 4.5rem auto 0; max-width: 960px; }
.storefront .shot img {
  border-radius: 6px; border-color: #ffffff25;
  box-shadow: 0 30px 80px #0008;
}
.storefront .shot figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #c4b5bb;
}
.storefront section h2 { font-size: clamp(2.7rem, 5vw, 4.5rem); line-height: 1.03; letter-spacing: -.045em; }
.storefront #amps { border-top: 0; }
.storefront .section-note { max-width: 32rem; font-size: 1rem; margin: 1.4rem 0; }
.storefront .platform { margin-bottom: 2.5rem; }
.storefront .grid { gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.storefront .amp {
  border-radius: 12px; background: linear-gradient(145deg, #242026, #131216 65%);
  transition: border-color .25s, box-shadow .25s;
}
.storefront .amp:hover { border-color: #a1745d; box-shadow: 0 18px 45px #0004; }
.storefront .amp .body { padding: 1.5rem; }
.storefront .amp h3 { font-size: 1.2rem; }
.storefront .amp .tag { font-size: .65rem; letter-spacing: .13em; margin-bottom: 1rem; }
.storefront .amp p { font-size: .88rem; }
.storefront .amp-specs { gap: .35rem; }
.storefront .amp-specs li { white-space: normal; font-size: .7rem; background: #ffffff04; }
.storefront .amp .btn { font-size: .85rem; }
.storefront .amp.bundle { background: radial-gradient(ellipse at 100% 100%, #a14d3338, transparent 70%), #211b20; border-color: #a1745d; }
.storefront .philosophy { position: relative; gap: 4rem; align-items: center; }
.storefront .philosophy::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 15% 50%, #6e3a2528, transparent 65%);
}
.storefront .cols { margin-top: 2.5rem; }
.storefront #faq h2 { margin-bottom: 2rem; }
.storefront details { padding: 1.5rem 0; }
.storefront details summary { font-weight: 400; }
.storefront details summary::after { color: var(--accent); }
.storefront footer { background: #08080c; }
::selection { background: #efa775; color: #17110a; }
@media (max-width: 1000px) {
  .storefront .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .storefront .bar { position: absolute; gap: .75rem; padding-top: 1rem; }
  .storefront .bar .wordmark svg { width: 100px; }
  .storefront .bar nav { gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
  .storefront .bar nav a { font-size: .7rem; }
  .storefront .hero { padding-top: 10rem; padding-bottom: 2.5rem; }
  .storefront .hero h1 { font-size: clamp(2.6rem, 10vw, 4.5rem); }
  .storefront .hero .eyebrow { font-size: .56rem; letter-spacing: .12em; }
  .storefront .shot { margin-top: 3rem; }
  .storefront .shot figcaption { flex-direction: column; gap: .3rem; }
  .storefront > section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .storefront .philosophy { gap: 2rem; }
}
@media (max-width: 540px) {
  .storefront .grid { grid-template-columns: minmax(0, 1fr); }
  .storefront .hero-price { font-size: .88rem; }
  .storefront .hero .lede { font-size: .9rem; }
  .storefront .cta { gap: .6rem; }
  .storefront .cta .btn { padding: .8rem 1.1rem; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.signal-art {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  pointer-events: none; opacity: .18;
  filter: drop-shadow(0 0 4px #ff4e24) drop-shadow(0 0 12px #e53616);
  mask-image: linear-gradient(to bottom, #000 0%, #0009 40%, transparent 78%);
}
@media (max-width: 760px) {
  .signal-art { opacity: .12; }
}