:root {
  --black: #02050a;
  --panel: #06101a;
  --panel-2: #091725;
  --ink: #f3f6f8;
  --body: #aebdca;
  --muted: #708494;
  --line: rgba(190, 218, 238, .16);
  --line-strong: rgba(190, 218, 238, .28);
  --blue: #7fb8f4;
  --blue-hot: #a9d4ff;
  --gold: #d8b476;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  --sans: "Onest", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  color-scheme: dark;
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--body);
  font-family: var(--sans);
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

.wrap,
.utilityInner {
  width: min(100%, 1500px);
  margin-inline: auto;
  padding-inline: 48px;
}

.utilityBar {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(2, 5, 10, .28);
}

.utilityInner {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
}

.utilityBrand,
.lang :is(button,a[data-lang]),
.sectionKicker,
.wpCells span,
.evidenceAction {
  font-family: var(--mono);
  text-transform: uppercase;
}

.utilityBrand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(243, 246, 248, .78);
  font-size: 10px;
  letter-spacing: .1em;
  text-decoration: none;
}

.brandMark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: cover;
  object-position: center;
}

.siteMenuBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brandMarkLarge {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.lang {
  display: flex;
  gap: 4px;
}

.lang :is(button,a[data-lang]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: rgba(243, 246, 248, .42);
  font-size: 9px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.lang :is(button,a[data-lang]).active {
  border-color: transparent;
  color: var(--ink);
}

.lang :is(button,a[data-lang]).active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 1.2em;
  height: 1px;
  background: var(--blue);
  transform: translateX(-50%);
  pointer-events: none;
}

.shortHero {
  position: relative;
  min-height: clamp(760px, 56.28vw, 941px);
  overflow: hidden;
  background: var(--black);
}

.heroMedia {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.heroMedia img {
  display: block;
  width: min(100%, 1672px);
  height: auto;
}

.heroShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 5, 11, .98) 0%, rgba(1, 5, 11, .86) 24%, rgba(1, 5, 11, .32) 52%, rgba(1, 5, 11, .04) 76%),
    linear-gradient(180deg, rgba(1, 4, 9, .12) 0%, transparent 58%, var(--black) 100%);
}

.heroContent {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: clamp(760px, 56.28vw, 941px);
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  padding-bottom: 52px;
}

.eyebrow {
  margin-bottom: 24px;
  color: rgba(235, 243, 249, .65);
  font: 400 10px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.heroContent h1 {
  max-width: 630px;
  margin: 0;
  color: #fff;
  font: 600 clamp(108px, 10.4vw, 174px)/.72 var(--display);
  text-transform: uppercase;
  text-shadow: 0 18px 60px rgba(0, 0, 0, .34);
}

.heroSlogan {
  max-width: 700px;
  margin-top: 30px;
  color: #fff;
  font: 600 clamp(31px, 3.4vw, 54px)/.92 var(--display);
  text-transform: uppercase;
}

.heroSlogan::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin: 0 16px .22em 0;
  background: var(--gold);
}

.heroLead {
  max-width: 610px;
  margin-top: 16px;
  color: rgba(237, 242, 246, .74);
  font-size: 15px;
  line-height: 1.55;
}

.heroBrief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  width: min(100%, 850px);
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(216, 180, 118, .58);
}

.heroBrief > div {
  color: rgba(235, 241, 245, .72);
  font-size: 12px;
  line-height: 1.58;
}

.heroPara {
  display: block;
}

.heroPara + .heroPara {
  margin-top: 10px;
}

.whitePaper,
.evidence,
.possibility,
.humanity,
.join {
  position: relative;
  padding: 138px 0;
  border-top: 1px solid var(--line);
}

.whitePaper {
  background:
    linear-gradient(90deg, transparent 0 49.96%, rgba(127, 184, 244, .05) 50%, transparent 50.04%),
    #050b12;
}

.whitePaper .wrap {
  width: min(100%, 1320px);
}

.sectionKicker {
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .1em;
}

h2 {
  max-width: 1080px;
  margin: 18px 0 0;
  color: var(--ink);
  font: 600 clamp(68px, 7vw, 112px)/.84 var(--display);
  text-transform: uppercase;
}

.sectionLead {
  max-width: 900px;
  margin: 28px 0 52px;
  color: var(--body);
  font-size: 18px;
  line-height: 1.55;
}

.wpCells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.wpCells article {
  min-height: 126px;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
}

.wpCells article:last-child {
  border-right: 0;
}

.wpCells span {
  color: var(--blue);
  font-size: 9px;
  letter-spacing: .1em;
}

.wpCells h3 {
  margin: 14px 0 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.wpCells p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.evidence {
  background: var(--black);
}

.sectionHead {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-bottom: 72px;
}

.sectionHead h2 {
  margin-top: 0;
}

.evidenceGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.evidenceItem {
  position: relative;
  display: flex;
  min-height: 720px;
  flex-direction: column;
  padding: 36px;
  border-right: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.evidenceItem:last-child {
  border-right: 0;
}

.evidenceItem.active::after {
  content: "";
  position: absolute;
  inset: auto 36px 0;
  height: 2px;
  background: var(--gold);
}

.evidenceIndex {
  color: rgba(255, 255, 255, .22);
  font: 600 74px/1 var(--display);
}

.evidenceItem h3 {
  margin: 52px 0 0;
  color: var(--ink);
  font: 600 42px/.95 var(--display);
}

.evidenceItem h4 {
  max-width: 360px;
  margin: 20px 0 0;
  color: var(--blue-hot);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
}

.evidenceItem p {
  margin: 18px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.55;
}

.evidenceItem .evidenceExtra {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.evidenceExtra:empty {
  display: none;
}

.evidenceAction {
  margin-top: auto;
  padding-top: 28px;
  color: var(--blue);
  font-size: 9px;
  letter-spacing: .08em;
}

.possibility {
  background:
    linear-gradient(115deg, rgba(127, 184, 244, .07), transparent 42%),
    #050b12;
}

.possibilityInner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 84px;
  align-items: end;
}

.possibilityInner h2 {
  margin-top: 0;
}

.possibilityIntro {
  margin: 0;
  padding: 34px 0 4px 38px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.6;
}

.humanity {
  background:
    linear-gradient(180deg, rgba(9, 23, 37, .66), rgba(2, 5, 10, .2)),
    #02050a;
}

.humanityText {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 62px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.humanityText p {
  margin: 0;
  padding: 34px;
  border-right: 1px solid var(--line);
  color: var(--body);
  font-size: 16px;
  line-height: 1.65;
}

.humanityText p:last-child {
  border-right: 0;
}

.join {
  background:
    linear-gradient(125deg, rgba(127, 184, 244, .06), transparent 44%),
    #02050a;
}

.joinGrid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  border: 1px solid var(--line);
}

.joinText,
.contactForm {
  min-width: 0;
  min-height: 620px;
  padding: 58px;
}

.joinText {
  border-right: 1px solid var(--line);
}

.joinText h2 {
  margin-top: 34px;
  font-size: clamp(58px, 5.4vw, 88px);
}

.joinText p {
  max-width: 560px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.65;
}

.subscribePanel {
  max-width: 560px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.subscribePanel h3 {
  margin: 10px 0 10px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
}

.subscribePanel > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.subscribeForm {
  display: grid;
  gap: 12px;
}

.subscribeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.subscribeForm input[type="email"] {
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 0;
  outline: 0;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(1, 7, 13, .72);
}

.subscribeForm input[type="email"]:focus {
  border-color: var(--blue);
}

.subscribeForm button {
  min-width: 132px;
  min-height: 48px;
  border: 1px solid var(--blue);
  color: var(--ink);
  background: rgba(127, 184, 244, .08);
  font: 500 11px/1 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.subscribeForm button:disabled {
  opacity: .55;
  cursor: wait;
}

.subscribeConsent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.subscribeConsent input {
  margin: 3px 0 0;
  accent-color: var(--blue);
}

.subscribeStatus {
  min-height: 20px;
  color: var(--blue-hot);
  font-size: 12px;
}

.subscribeStatus.err {
  color: #ff9a9a;
}

.contactForm {
  display: flex;
  flex-direction: column;
  background: rgba(9, 23, 37, .52);
}

.contactForm h3 {
  margin: 0 0 28px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 400;
}

.contactForm label {
  display: grid;
  gap: 8px;
  margin-bottom: 17px;
}

.contactForm label > span {
  color: var(--muted);
  font: 400 11px/1.4 var(--mono);
  text-transform: uppercase;
}

.contactForm input,
.contactForm textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: rgba(1, 7, 13, .72);
  color: var(--ink);
  padding: 13px 14px;
}

.contactForm textarea {
  min-height: 160px;
  resize: vertical;
}

.contactCaptcha {
  width: 100%;
  min-height: 65px;
  margin: 2px 0 17px;
}

.contactForm input:focus,
.contactForm textarea:focus {
  border-color: var(--blue);
}

.contactForm button {
  min-height: 48px;
  border: 1px solid var(--blue);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.contactForm button:disabled {
  opacity: .5;
  cursor: wait;
}

.formStatus {
  min-height: 22px;
  margin-top: 12px;
  color: var(--blue-hot);
  font-size: 13px;
}

.formStatus.err {
  color: #ff9a9a;
}

.mailLink {
  width: max-content;
  margin-top: auto;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
}

.hiddenTrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

footer {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 400 10px/1.5 var(--mono);
}

@media (max-width: 1080px) {
  .wpCells {
    grid-template-columns: repeat(3, 1fr);
  }

  .wpCells article {
    border-bottom: 1px solid var(--line);
  }

  .wpCells article:nth-child(3n) {
    border-right: 0;
  }

  .wpCells article:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .evidenceGrid,
  .possibilityInner,
  .humanityText,
  .joinGrid {
    grid-template-columns: 1fr;
  }

  .possibilityInner {
    gap: 48px;
  }

  .humanityText p {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .humanityText p:last-child {
    border-bottom: 0;
  }

  .evidenceItem {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .evidenceItem:last-child {
    border-bottom: 0;
  }

  .joinText {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .wrap,
  .utilityInner {
    padding-inline: 20px;
  }

  .utilityInner {
    min-height: 58px;
  }

  .shortHero {
    min-height: auto;
  }

  .heroMedia {
    justify-content: center;
  }

  .heroMedia img {
    width: 100%;
    max-width: none;
  }

  .heroShade {
    background:
      linear-gradient(90deg, rgba(1, 5, 11, .8), rgba(1, 5, 11, .16)),
      linear-gradient(180deg, rgba(1, 4, 9, .08) 0%, rgba(2, 5, 10, .58) 20%, var(--black) 35%);
  }

  .heroContent {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 150px;
    padding-bottom: 74px;
  }

  .eyebrow {
    margin-bottom: 20px;
    font-size: 9px;
  }

  .heroContent h1 {
    max-width: 360px;
    font-size: clamp(82px, 26vw, 116px);
  }

  .heroSlogan {
    font-size: clamp(30px, 10vw, 46px);
  }

  .heroLead {
    font-size: 13px;
  }

  .heroBrief {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .heroBrief > div {
    font-size: 11px;
  }

  .whitePaper,
  .evidence,
  .possibility,
  .humanity,
  .join {
    padding: 92px 0;
  }

  h2 {
    font-size: clamp(58px, 18vw, 80px);
  }

  .sectionLead {
    font-size: 16px;
  }

  .wpCells {
    grid-template-columns: repeat(2, 1fr);
  }

  .wpCells article,
  .wpCells article:nth-child(3n) {
    min-height: 134px;
    border-right: 1px solid var(--line);
  }

  .wpCells article:nth-child(even) {
    border-right: 0;
  }

  .wpCells article:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .wpCells article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .sectionHead {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 46px;
  }

  .evidenceItem {
    padding: 28px 0;
  }

  .evidenceItem.active::after {
    right: 0;
    left: 0;
  }

  .evidenceItem h3 {
    margin-top: 34px;
  }

  .possibilityInner {
    gap: 38px;
  }

  .possibilityIntro {
    padding: 26px 0 0;
    border-left: 0;
    font-size: 17px;
  }

  .humanityText {
    margin-top: 44px;
  }

  .humanityText p {
    padding: 28px 0;
    font-size: 15px;
  }

  .joinGrid {
    border-right: 0;
    border-left: 0;
  }

  .joinText,
  .contactForm {
    min-height: 0;
    padding: 38px 20px;
  }

  .joinText h2 {
    font-size: 48px;
  }

  .subscribePanel {
    margin-top: 38px;
  }

  .subscribeRow {
    grid-template-columns: 1fr;
  }

  .subscribeForm input[type="email"] {
    border-right: 1px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* One-minute attention experiment between the individual and systemic layers. */
.legacyModules .hnMechanisms .attentionExperiment {
  position: relative;
  margin-top: clamp(62px, 7vw, 102px);
  padding: clamp(46px, 5vw, 72px) 0 0;
  border-top: 1px solid rgba(177, 207, 231, .18);
}

.legacyModules .hnMechanisms .attentionExperiment::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(72px, 9vw, 136px);
  height: 1px;
  background: linear-gradient(90deg, #83c7ff, #8c7cff 58%, transparent);
}

.attentionExperimentIntro {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr);
  gap: clamp(34px, 6vw, 94px);
  align-items: start;
}

.legacyModules .hnMechanisms .attentionExperimentKicker {
  margin: 0 0 16px;
  color: rgba(151, 198, 239, .72);
  font: 500 10px/1.3 var(--ief-font-mono, var(--mono));
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legacyModules .hnMechanisms .attentionExperiment h2 {
  max-width: none;
  margin: 0;
  color: rgba(245, 249, 252, .98);
  font: 520 clamp(48px, 5.2vw, 78px)/.92 var(--ief-font-display, var(--display));
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.legacyModules .hnMechanisms .attentionExperimentCopy {
  max-width: 830px;
}

.legacyModules .hnMechanisms .attentionExperimentCopy p {
  margin: 0;
  color: rgba(220, 231, 239, .8);
  font: 400 clamp(16px, 1.25vw, 19px)/1.68 var(--ief-font-body, var(--sans));
}

.legacyModules .hnMechanisms .attentionExperimentCopy p + p {
  position: relative;
  margin-top: clamp(24px, 2.5vw, 34px);
  padding-left: clamp(22px, 2.8vw, 38px);
  color: rgba(237, 243, 248, .94);
}

.legacyModules .hnMechanisms .attentionExperimentCopy p + p::before {
  content: "";
  position: absolute;
  inset: .3em auto .3em 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(127, 184, 244, .84), rgba(140, 124, 255, .18));
}

.attentionExperimentTimer {
  --attention-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M0 24H7L12 20L17 28L23 8L29 40L35 15L41 33L47 24H56L61 21L66 27L72 12L78 36L84 18L90 30L96 24' fill='none' stroke='%237fb8f4' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  margin-top: clamp(42px, 5vw, 66px);
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-top: 1px solid rgba(177, 207, 231, .16);
  border-bottom: 1px solid rgba(177, 207, 231, .16);
}

.attentionExperimentClock {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 190px;
}

.attentionExperimentGamma {
  color: rgba(127, 184, 244, .42);
  font: 300 clamp(35px, 3vw, 48px)/1 var(--ief-font-body, var(--sans));
}

.attentionExperimentClock > div {
  display: grid;
  gap: 4px;
}

.attentionExperimentClockLabel {
  color: rgba(151, 198, 239, .58);
  font: 500 9px/1.2 var(--ief-font-mono, var(--mono));
  letter-spacing: .1em;
  text-transform: uppercase;
}

.attentionExperimentClock output {
  color: #f5f9fc;
  font: 400 clamp(38px, 4vw, 58px)/.9 var(--ief-font-mono, var(--mono));
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
}

.attentionExperimentSignal {
  position: relative;
  min-width: 0;
  height: 64px;
  overflow: hidden;
}

.attentionExperimentSignal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgba(127, 184, 244, .11);
}

.attentionExperimentSignalBase,
.attentionExperimentSignalFill,
.attentionExperimentSignalFill > span {
  position: absolute;
  inset: 0;
}

.attentionExperimentSignalBase,
.attentionExperimentSignalFill > span {
  background-image: var(--attention-wave);
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 96px 48px;
}

.attentionExperimentSignalBase {
  opacity: .18;
  filter: saturate(.7);
}

.attentionExperimentSignalFill {
  z-index: 1;
  right: auto;
  width: calc(var(--attention-progress) * 100%);
  overflow: hidden;
  border-right: 1px solid rgba(205, 231, 255, .92);
  box-shadow: 6px 0 22px rgba(127, 184, 244, .26);
  transition: width .12s linear;
}

.attentionExperimentSignalFill > span {
  width: max(100vw, 1100px);
  opacity: .95;
  filter: drop-shadow(0 0 5px rgba(127, 184, 244, .42));
}

.attentionExperimentTimer[data-state="running"] .attentionExperimentSignalBase,
.attentionExperimentTimer[data-state="running"] .attentionExperimentSignalFill > span {
  animation: attentionGammaFlow .72s linear infinite;
}

@keyframes attentionGammaFlow {
  to { background-position: 96px center; }
}

.attentionExperimentAction {
  position: relative;
  display: inline-flex;
  min-width: 132px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(127, 184, 244, .46);
  border-radius: 0;
  background: rgba(127, 184, 244, .055);
  color: rgba(239, 247, 252, .94);
  font: 550 10px/1 var(--ief-font-mono, var(--mono));
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.attentionExperimentAction::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 11px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.attentionExperimentAction:hover,
.attentionExperimentAction:focus-visible {
  border-color: rgba(169, 212, 255, .9);
  background: rgba(127, 184, 244, .12);
  color: #fff;
  outline: none;
}

.attentionExperimentAction [data-timer-label] {
  display: none;
}

.attentionExperimentTimer[data-state="idle"] [data-timer-label="idle"],
.attentionExperimentTimer[data-state="running"] [data-timer-label="running"],
.attentionExperimentTimer[data-state="paused"] [data-timer-label="paused"],
.attentionExperimentTimer[data-state="complete"] [data-timer-label="complete"] {
  display: inline;
}

.attentionExperiment + .wp2Dossier {
  margin-top: clamp(66px, 7vw, 104px);
  border-top: 0;
}

html[data-theme="light"] .legacyModules .hnMechanisms .attentionExperiment {
  border-top-color: rgba(49, 95, 143, .2);
}

html[data-theme="light"] .legacyModules .hnMechanisms .attentionExperiment h2 {
  color: #142735;
}

html[data-theme="light"] .legacyModules .hnMechanisms .attentionExperimentKicker {
  color: #315f8f;
}

html[data-theme="light"] .legacyModules .hnMechanisms .attentionExperimentCopy p {
  color: #465a67 !important;
}

html[data-theme="light"] .legacyModules .hnMechanisms .attentionExperimentCopy p + p {
  color: #203b4d !important;
}

html[data-theme="light"] .attentionExperimentTimer {
  border-color: rgba(49, 95, 143, .18);
}

html[data-theme="light"] .attentionExperimentClock output {
  color: #142735;
}

html[data-theme="light"] .attentionExperimentGamma,
html[data-theme="light"] .attentionExperimentClockLabel {
  color: rgba(49, 95, 143, .74);
}

html[data-theme="light"] .attentionExperimentAction {
  border-color: rgba(49, 95, 143, .46);
  background: rgba(49, 95, 143, .045);
  color: #244f79;
}

html[data-theme="light"] .attentionExperimentAction:hover,
html[data-theme="light"] .attentionExperimentAction:focus-visible {
  border-color: rgba(36, 79, 121, .88);
  background: rgba(49, 95, 143, .1);
  color: #142735;
}

@media (max-width: 820px) {
  .attentionExperimentIntro {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .legacyModules .hnMechanisms .attentionExperiment {
    margin-top: 68px;
    padding-top: 42px;
  }

  .legacyModules .hnMechanisms .attentionExperiment h2 {
    max-width: 100%;
    min-width: 0;
    font-size: clamp(34px, 12vw, 56px);
  }

  .attentionExperimentTimer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 18px;
    margin-top: 38px;
    padding: 24px 0;
  }

  .attentionExperimentClock {
    min-width: 0;
  }

  .attentionExperimentSignal {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 56px;
  }

  .attentionExperimentAction {
    grid-column: 2;
    grid-row: 1;
    min-width: 116px;
    padding-inline: 16px;
  }
}

@media (max-width: 430px) {
  .attentionExperimentGamma {
    font-size: 32px;
  }

  .attentionExperimentClock output {
    font-size: 38px;
  }

  .attentionExperimentAction {
    min-width: 104px;
    padding-inline: 12px;
    letter-spacing: .08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attentionExperimentTimer[data-state="running"] .attentionExperimentSignalBase,
  .attentionExperimentTimer[data-state="running"] .attentionExperimentSignalFill > span {
    animation: none;
  }
}