@layer components {

:root {
  --nd-on-mass: #E6EBF3;
  --nd-on-mass-2: #C9D2E0;
}

.nd-cast {

  position: relative;
}

.nd-cast-fig {
  position: relative;
  width: 100%;
  margin-inline: 0;
  aspect-ratio: 1424 / 800;
  min-height: 340px;
}

.nd-cast-mass {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  height: 57.5%;
  background: #414A5F;
}

.nd-cast-draw { position: absolute; inset: 0; }

.nd-cast-op {
  position: absolute;
  left: var(--x);
  top: var(--y);
  white-space: nowrap;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1;
  transform: translateY(-50%);
}

.nd-cast-op--hi { color: #C3CBDB; font-weight: 600; font-size: 1rem; }
.nd-cast-op--lo { color: var(--nd-on-mass-2); font-weight: 400; }

.nd-cast-plate {
  position: absolute;
  left: 1.8%;
  width: 74.5%;
  top: 72%;
  height: 26.2%;
  background: #566179;
  clip-path: polygon(2% 20%, 100% 0%, 96% 100%, 0% 84%);
}

.nd-cast-mark {
  position: absolute;
  left: 82.87%;
  width: 7.58%;
  top: 84.7%;
  height: 13.5%;
  background: #B4BFD6;
}

.nd-cast-read {
  position: absolute;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8894AC;
  white-space: nowrap;
}

.nd-cast-read--in  { left: 4.6%;   top: 90.5%; color: var(--nd-on-mass); }
.nd-cast-read--out { left: 82.87%; top: 77.5%; }

.nd-cast-head { margin-bottom: var(--stack-md); }
.nd-cast-head .page-hero { padding: 0; max-width: none; width: 100%; }

@media (min-width: 1280px) {
  .nd-cast-head {
    position: absolute;
    left: 54%;
    right: 0;
    top: 4%;
    bottom: 44%;
    margin-bottom: 0;
    z-index: 3;
  }

  .nd-cast-fig { margin-top: round(calc(-0.04 * 800 / 1424 * 100%), 1px); }
  .nd-cast-head .page-hero-title { font-size: 3rem; }

  .nd-cast-head .page-hero-lede { font-size: 0.9375rem; margin-top: var(--space-4); color: var(--nd-on-mass-2); }
  .nd-cast-head .site-actions { margin-top: var(--space-5); }
}

@media (min-width: 1440px) {
  .nd-cast-fig { width: 100%; margin-inline: 0; }
  .nd-cast-head .page-hero-title { font-size: 3.25rem; }
  .nd-cast-head .page-hero-lede { font-size: 1rem; }
}

@media (max-width: 1279px) {
  .nd-cast-fig { aspect-ratio: 1424 / 620; }
  .nd-cast-op { font-size: 0.75rem; }
  .nd-cast-op--hi { font-size: 0.8125rem; }
}

@media (max-width: 1023px) {
  .nd-cast-fig {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
  }

  .nd-cast-head { order: -1; margin-bottom: var(--stack-md); }

  .nd-cast-draw {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1424 / 1700;
  }

  .nd-cast-mass  { top: 4%; height: 56%; }
  .nd-cast-plate { top: 70%; height: 22%; }
  .nd-cast-mark  { top: 78%; height: 14%; }

  .nd-cast-op { left: var(--px); top: var(--py); font-size: 0.75rem; }
  .nd-cast-op--hi { font-size: 0.8125rem; }

  .nd-cast-read { font-size: 0.75rem; letter-spacing: 0.1em; }
  .nd-cast-read--in  { top: 84%; }

  .nd-cast-read--out { left: auto; right: 9.55%; top: 63%; }
}

.nd-cast-op.nd-cast-op--i-1 { --x:3%; --y:10%; --px:4%; --py:5%; }
.nd-cast-op.nd-cast-op--i-2 { --x:24%; --y:5%; --px:48%; --py:12.5%; }
.nd-cast-op.nd-cast-op--i-3 { --x:9%; --y:27%; --px:7%; --py:20%; }
.nd-cast-op.nd-cast-op--i-4 { --x:32%; --y:19%; --px:45%; --py:28%; }
.nd-cast-op.nd-cast-op--i-5 { --x:2%; --y:47%; --px:3%; --py:36%; }
.nd-cast-op.nd-cast-op--i-6 { --x:27%; --y:41%; --px:52%; --py:44%; }
.nd-cast-op.nd-cast-op--i-7 { --x:13%; --y:58%; --px:6%; --py:52%; }
.nd-cast-op.nd-cast-op--i-8 { --x:36%; --y:53%; --px:50%; --py:60%; }
.nd-cast-op.nd-cast-op--i-9 { --x:4%; --y:70%; --px:4%; --py:68%; }
.nd-cast-op.nd-cast-op--i-10 { --x:30%; --y:74%; --px:46%; --py:76.5%; }
.nd-cast-op.nd-cast-op--i-11 { --x:8%; --y:86%; --px:8%; --py:85%; }
}

@layer components {

.nd-con-fig {
  position: relative;
  width: 100%;
  aspect-ratio: 1296 / 580;
  min-height: 380px;
  overflow: hidden;
  background: #4A5468;
  display: flex;
  flex-direction: column;
}

.nd-con-bar {
  flex: 0 0 7.34%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: #1D2230;
}

.nd-con-brand {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #C3CBDB;
}

.nd-con-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #AFBACF;
}

.nd-con-live {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #B4BFD6;
  opacity: 0.88;
  animation: nd-con-breathe 6.4s cubic-bezier(.45, 0, .55, 1) -1.3s infinite;
  animation-play-state: paused;
}

.nd-live-on .nd-con-live { animation-play-state: running; }

@keyframes nd-con-breathe {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 0.48; }
}

.nd-con-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 23.2% 49.4% 27.4%;
  min-height: 0;
}

.nd-con-thread {
  position: relative;
  overflow: hidden;
  background: #6E7A94;
  --nd-crop: 1;

  padding: var(--space-5) 0 var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nd-con-turn {
  display: block;
  padding: 10px 14px;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  width: max-content;
  max-width: 130%;
  --nd-pull: 0%;
  margin-left: calc(-1 * var(--nd-pull) * var(--nd-crop));
}

.nd-con-turn--in  { background: #3E4759; color: #EDF1F8; }
.nd-con-turn--out { background: #A3AEC4; color: #1D2230; align-self: flex-end; margin-right: 8%; }

.nd-con-case {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.nd-con-case-h,
.nd-con-rail-h {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nd-on-mass-2);
}

.nd-con-f { display: flex; gap: var(--space-4); align-items: baseline; }
.nd-con-fk { flex: 0 0 34%; font-size: 0.8125rem; color: var(--nd-on-mass-2); }
.nd-con-fv { font-size: 0.875rem; font-weight: 500; color: #EDF1F8; }

.nd-con-reply {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  background: #C9D3E8;
}

.nd-con-reply-k {
  display: block;
  margin-bottom: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3E475A;
}

.nd-con-reply-t {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #14181F;
}

.nd-con-rail {
  background: #2E3646;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nd-con-a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #EDF1F8;
}

@media (max-width: 900px) {

  .nd-con-fig { aspect-ratio: auto; min-height: 0; }
  .nd-con-body { grid-template-columns: 30% 70%; }
  .nd-con-rail { display: none; }
  .nd-con-count { letter-spacing: 0.04em; }
}

@media (max-width: 1023px) {
  .nd-con-case-h,
  .nd-con-rail-h { font-size: 0.75rem; letter-spacing: 0.12em; }
  .nd-con-reply-k { font-size: 0.75rem; letter-spacing: 0.12em; }
}

@media (max-width: 640px) {
  .nd-con-fig { aspect-ratio: auto; min-height: 0; }
  .nd-con-bar { flex: 0 0 auto; padding: 10px var(--space-4); }
  .nd-con-body { grid-template-columns: 1fr; }

  .nd-con-thread { --nd-crop: 0; padding: var(--space-4); }
  .nd-con-turn { white-space: normal; max-width: 88%; font-size: 0.8125rem; }
  .nd-con-brand { display: none; }
  .nd-con-count { margin-left: 0; font-size: 0.75rem; letter-spacing: 0.04em; }
  .nd-con-case { padding: var(--space-4); }
  .nd-con-case-h,
  .nd-con-rail-h { font-size: 0.75rem; letter-spacing: 0.12em; }
  .nd-con-fk { flex: 0 0 40%; font-size: 0.75rem; }
  .nd-con-fv { font-size: 0.8125rem; }
  .nd-con-reply { margin-top: var(--space-4); }
  .nd-con-reply-k { font-size: 0.75rem; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-con-live { animation: none; opacity: 0.88; }
}

.nd-con-turn.nd-con-turn--pull-22 { --nd-pull:22%; }
.nd-con-turn.nd-con-turn--pull-0 { --nd-pull:0%; }
.nd-con-turn.nd-con-turn--pull-16 { --nd-pull:16%; }
.nd-con-turn.nd-con-turn--pull-19 { --nd-pull:19%; }
.nd-con-turn.nd-con-turn--pull-14 { --nd-pull:14%; }
}

@layer components {

.nd-cor-fig {
  position: relative;
  width: 100%;
  margin-inline: 0;
  aspect-ratio: 1360 / 660;
  min-height: 360px;
}

.nd-cor-a {
  position: absolute;
  inset: 0;
  background: #434C61;
  clip-path: polygon(47.06% 0%, 0% 14.55%, 0% 85.45%, 51.47% 100%);
}

.nd-cor-b {
  position: absolute;
  inset: 0;
  background: #313B4D;
  clip-path: polygon(47.06% 0%, 100% 10.91%, 100% 89.09%, 51.47% 100%);
}

.nd-cor-arris {
  position: absolute;
  inset: 0;
  background: #CBD6EC;
  clip-path: polygon(47.06% 0%, 47.65% 0%, 52.06% 100%, 51.47% 100%);
  opacity: 0.22;
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
}

.nd-lit .nd-cor-arris { opacity: 1; }

.nd-cor-draw { position: absolute; inset: 0; }

.nd-cor-i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  white-space: nowrap;
  line-height: 1;
  transform: translateY(-50%);
  font-size: 0.8125rem;
}

.nd-cor-i--hi { font-size: 0.9375rem; font-weight: 600; }
.nd-cor-i--a.nd-cor-i--hi { color: #D8DEEB; }
.nd-cor-i--a.nd-cor-i--lo { color: var(--nd-on-mass-2); }
.nd-cor-i--b.nd-cor-i--hi { color: #CBD4E4; }
.nd-cor-i--b.nd-cor-i--lo { color: var(--nd-on-mass-2); }

.nd-cor-read {
  position: absolute;
  left: 4%;
  bottom: 0.5%;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8894AC;
  white-space: nowrap;
}

.nd-cor-head { margin-bottom: var(--stack-md); }
.nd-cor-head .site-head { margin: 0; max-width: none; }

@media (min-width: 1024px) {
  .nd-cor-head {
    position: absolute;
    left: 2.2%;
    width: 32%;
    top: 46%;
    margin-bottom: 0;
    z-index: 3;
  }
  .nd-cor-head .site-title { font-size: 2.125rem; }

  .nd-cor-head .site-lede { font-size: 0.875rem; max-width: none; color: var(--nd-on-mass-2); }
  .nd-cor-head .site-kicker { color: var(--nd-on-mass-2); }
}

@media (min-width: 1376px) {
  .nd-cor-fig { width: 100%; margin-inline: 0; }
}

@media (max-width: 1023px) {
  .nd-cor-fig {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
  }

  .nd-cor-head { order: -1; margin-bottom: var(--stack-md); }

  .nd-cor-draw {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1360 / 2360;
  }

  .nd-cor-a,
  .nd-cor-b,
  .nd-cor-arris { bottom: 11%; }

  .nd-cor-a { clip-path: polygon(0% 47.06%, 14.55% 0%, 85.45% 0%, 100% 51.47%); }
  .nd-cor-b { clip-path: polygon(0% 47.06%, 10.91% 100%, 89.09% 100%, 100% 51.47%); }
  .nd-cor-arris { clip-path: polygon(0% 47.06%, 0% 47.65%, 100% 52.06%, 100% 51.47%); }

  .nd-cor-i { left: var(--px); top: var(--py); font-size: 0.75rem; }
  .nd-cor-i--hi { font-size: 0.8125rem; }

  .nd-cor-read {
    left: 0;
    bottom: 0.5%;
    max-width: 100%;
    white-space: normal;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.5;
  }
}

.nd-cor-coda { margin: var(--space-5) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .nd-cor-arris { opacity: 1; transition: none; }
}

.nd-cor-i.nd-cor-i--i-1 { --x:32%; --y:7%; --px:34%; --py:5%; }
.nd-cor-i.nd-cor-i--i-2 { --x:17%; --y:12%; --px:14%; --py:9.75%; }
.nd-cor-i.nd-cor-i--i-3 { --x:4%; --y:17%; --px:48%; --py:14.5%; }
.nd-cor-i.nd-cor-i--i-4 { --x:28%; --y:21%; --px:11%; --py:19.25%; }
.nd-cor-i.nd-cor-i--i-5 { --x:2%; --y:25%; --px:44%; --py:24%; }
.nd-cor-i.nd-cor-i--i-6 { --x:24%; --y:30%; --px:6%; --py:28.75%; }
.nd-cor-i.nd-cor-i--i-7 { --x:7%; --y:34%; --px:52%; --py:33.5%; }
.nd-cor-i.nd-cor-i--i-8 { --x:29%; --y:38%; --px:8%; --py:38.25%; }
.nd-cor-i.nd-cor-i--i-9 { --x:5%; --y:42%; --px:44%; --py:43%; }
.nd-cor-i.nd-cor-i--i-10 { --x:53%; --y:8%; --px:46%; --py:56%; }
.nd-cor-i.nd-cor-i--i-11 { --x:74%; --y:13%; --px:8%; --py:60.2%; }
.nd-cor-i.nd-cor-i--i-12 { --x:55%; --y:20%; --px:40%; --py:64.4%; }
.nd-cor-i.nd-cor-i--i-13 { --x:80%; --y:26%; --px:6%; --py:68.6%; }
.nd-cor-i.nd-cor-i--i-14 { --x:53%; --y:33%; --px:48%; --py:72.8%; }
.nd-cor-i.nd-cor-i--i-15 { --x:72%; --y:39%; --px:8%; --py:77%; }
.nd-cor-i.nd-cor-i--i-16 { --x:54%; --y:52%; --px:44%; --py:81.2%; }
.nd-cor-i.nd-cor-i--i-17 { --x:76%; --y:60%; --px:10%; --py:85.4%; }
.nd-cor-i.nd-cor-i--i-18 { --x:53%; --y:70%; --px:42%; --py:89.6%; }
.nd-cor-i.nd-cor-i--i-19 { --x:71%; --y:79%; --px:12%; --py:93.8%; }
}

@layer components {

.nd-same-fig {
  position: relative;
  width: 100%;
  aspect-ratio: 1296 / 444;
  min-height: 260px;
}

.nd-same-body {
  position: absolute;
  left: 0;
  top: 1.8%;
  width: 74.07%;
  height: 96.4%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 94%);

  --nd-fill: #5D6982;
  --nd-mark: #A9B4CA;
  --nd-r: 1.25px;

  background-color: var(--nd-fill);
  background-image:
    radial-gradient(circle at 11% 7%,  var(--nd-mark) var(--nd-r), rgba(0, 0, 0, 0) calc(var(--nd-r) + 0.4px)),
    radial-gradient(circle at 37% 61%, var(--nd-mark) var(--nd-r), rgba(0, 0, 0, 0) calc(var(--nd-r) + 0.4px)),
    radial-gradient(circle at 58% 23%, var(--nd-mark) var(--nd-r), rgba(0, 0, 0, 0) calc(var(--nd-r) + 0.4px)),
    radial-gradient(circle at 79% 84%, var(--nd-mark) var(--nd-r), rgba(0, 0, 0, 0) calc(var(--nd-r) + 0.4px)),
    radial-gradient(circle at 23% 41%, var(--nd-mark) var(--nd-r), rgba(0, 0, 0, 0) calc(var(--nd-r) + 0.4px));
  background-size: 15px 15px;
  transition: background-color 220ms linear;
}

.nd-same-body[data-tier="rookie"] { --nd-fill: #414A5F; }
.nd-same-body[data-tier="pro"]    { --nd-fill: #5D6982; }
.nd-same-body[data-tier="elite"]  { --nd-fill: #7C8AA6; }

.nd-same-body[data-grade="standard"] { --nd-r: 0.75px; }
.nd-same-body[data-grade="premium"]  { --nd-r: 1.25px; }
.nd-same-body[data-grade="diamond"]  { --nd-r: 1.85px; }

.nd-same-out {
  position: absolute;
  left: 77.16%;
  right: 0;
  top: 22%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nd-same-mult {
  margin: 0;

  font-size: clamp(2.25rem, 5.56vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #F4F4F5;
  font-variant-numeric: tabular-nums;
}

.nd-same-formula {
  margin: var(--space-4) 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #A9B4CA;
  font-variant-numeric: tabular-nums;
}

.nd-same-base {
  margin: var(--space-1) 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #7C8AA6;
}

.nd-same-cap {
  margin: var(--space-3) 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7C8AA6;
}

.nd-same-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  margin-top: var(--space-5);
}

.nd-same-ctl { display: flex; flex-direction: column; gap: var(--space-2); }

.nd-same-ctl-l {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7C8AA6;
}

.nd-same-seg { display: flex; gap: var(--space-5); }

.nd-same-opt {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #7C8AA6;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color 160ms linear;
}

.nd-same-opt[aria-checked="true"] { color: #EDF1F8; font-weight: 600; }
.nd-same-opt:hover { color: #C3CBDB; }
.nd-same-opt:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

.nd-same-select {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #EDF1F8;
  background: #2E3646;
  border: 1px solid #6E7A94;
  padding: 6px 10px;
  cursor: pointer;
}

.nd-same-select:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

@media (max-width: 900px) {
  .nd-same-fig { aspect-ratio: 1296 / 640; }
  .nd-same-body { width: 100%; height: 58%; top: 0; }
  .nd-same-out { left: 0; top: 64%; }
  .nd-same-mult { font-size: clamp(2rem, 8vw, 3.5rem); }
}

@media (max-width: 1023px) {
  .nd-same-cap { font-size: 0.75rem; letter-spacing: 0.08em; }
  .nd-same-base { font-size: 0.75rem; }
  .nd-same-ctl-l { font-size: 0.75rem; letter-spacing: 0.1em; }
  .nd-same-opt {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }
}

@media (max-width: 640px) {
  .nd-same-fig {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
  }

  .nd-same-body {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 420;
  }

  .nd-same-out {
    position: static;
    margin-top: var(--space-5);
  }

  .nd-same-mult { font-size: clamp(2rem, 11vw, 3rem); }
  .nd-same-cap { font-size: 0.75rem; letter-spacing: 0.08em; }
  .nd-same-base { font-size: 0.75rem; }
  .nd-same-ctl-l { font-size: 0.75rem; letter-spacing: 0.1em; }

  .nd-same-seg { gap: var(--space-4); }

  .nd-same-opt {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-same-body { transition: none; }
  .nd-same-opt { transition: none; }
}
}

@layer components {

.nd-line-fig {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  aspect-ratio: 1360 / 540;
  min-height: 260px;
  overflow: hidden;
}

.nd-line-ribbon {
  position: absolute;
  inset: 0;
  background: #4E5870;
  clip-path: polygon(
    1.80% 29.30%,
    2.69% 29.34%,
    3.58% 29.38%,
    4.46% 29.42%,
    5.35% 29.47%,
    6.24% 29.52%,
    7.13% 29.56%,
    8.01% 29.59%,
    8.90% 29.59%,
    9.79% 29.54%,
    10.68% 29.44%,
    11.57% 29.27%,
    12.45% 29.01%,
    13.34% 28.67%,
    14.23% 28.24%,
    15.12% 27.71%,
    16.00% 27.10%,
    16.89% 26.42%,
    17.78% 25.68%,
    18.67% 24.90%,
    19.56% 24.11%,
    20.44% 23.33%,
    21.33% 22.58%,
    22.22% 21.89%,
    23.11% 21.29%,
    23.99% 20.78%,
    24.88% 20.39%,
    25.77% 20.12%,
    26.66% 19.97%,
    27.55% 19.95%,
    28.43% 20.03%,
    29.32% 20.21%,
    30.21% 20.45%,
    31.10% 20.74%,
    31.98% 21.04%,
    32.87% 21.32%,
    33.76% 21.55%,
    34.65% 21.70%,
    35.54% 21.74%,
    36.42% 21.64%,
    37.31% 21.41%,
    38.20% 21.02%,
    39.09% 20.47%,
    39.97% 19.78%,
    40.86% 18.96%,
    41.75% 18.03%,
    42.64% 17.02%,
    43.53% 15.97%,
    44.41% 14.91%,
    45.30% 13.90%,
    46.19% 12.97%,
    47.08% 12.17%,
    47.96% 11.53%,
    48.85% 11.08%,
    49.74% 10.86%,
    50.63% 10.87%,
    51.52% 11.14%,
    52.40% 11.67%,
    53.29% 12.44%,
    54.18% 13.44%,
    55.07% 14.65%,
    55.95% 16.03%,
    56.84% 17.55%,
    57.73% 19.17%,
    58.62% 20.83%,
    108.00% 20.83%,
    108.00% 79.17%,
    58.62% 79.17%,
    57.73% 77.51%,
    56.84% 75.89%,
    55.95% 74.36%,
    55.07% 72.98%,
    54.18% 71.77%,
    53.29% 70.77%,
    52.40% 70.00%,
    51.52% 69.48%,
    50.63% 69.21%,
    49.74% 69.19%,
    48.85% 69.41%,
    47.96% 69.86%,
    47.08% 70.50%,
    46.19% 71.31%,
    45.30% 72.23%,
    44.41% 73.25%,
    43.53% 74.30%,
    42.64% 75.35%,
    41.75% 76.36%,
    40.86% 77.29%,
    39.97% 78.11%,
    39.09% 78.81%,
    38.20% 79.35%,
    37.31% 79.74%,
    36.42% 79.98%,
    35.54% 80.07%,
    34.65% 80.03%,
    33.76% 79.88%,
    32.87% 79.65%,
    31.98% 79.37%,
    31.10% 79.07%,
    30.21% 78.79%,
    29.32% 78.54%,
    28.43% 78.37%,
    27.55% 78.28%,
    26.66% 78.31%,
    25.77% 78.45%,
    24.88% 78.72%,
    23.99% 79.11%,
    23.11% 79.62%,
    22.22% 80.23%,
    21.33% 80.91%,
    20.44% 81.66%,
    19.56% 82.44%,
    18.67% 83.23%,
    17.78% 84.01%,
    16.89% 84.75%,
    16.00% 85.43%,
    15.12% 86.04%,
    14.23% 86.57%,
    13.34% 87.00%,
    12.45% 87.35%,
    11.57% 87.60%,
    10.68% 87.77%,
    9.79% 87.88%,
    8.90% 87.92%,
    8.01% 87.92%,
    7.13% 87.90%,
    6.24% 87.85%,
    5.35% 87.80%,
    4.46% 87.76%,
    3.58% 87.71%,
    2.69% 87.67%,
    1.80% 87.63%);
}

.nd-line-mark {
  position: absolute;
  left: 57.81%;
  width: 1.62%;
  top: 2.2%;
  height: 9.5%;
  background: #8894AC;

  opacity: 0.85;
  animation: nd-line-breathe 7.3s cubic-bezier(.45, 0, .55, 1) -0.6s infinite;
  animation-play-state: paused;
}

.nd-live-on .nd-line-mark { animation-play-state: running; }

@keyframes nd-line-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.45; }
}

.nd-line-read {
  position: absolute;
  left: 60.0%;
  top: 2.4%;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8894AC;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .nd-line .site-head { max-width: 40%; }
  .nd-line .site-title { font-size: 2.25rem; }
  .nd-line .site-lede { max-width: none; }
}

@media (min-width: 1440px) {

  .nd-line-fig { width: 100%; margin-inline: 0; }
}

@media (max-width: 700px) {

  .nd-line-read { left: auto; right: 1.5%; }
}

@media (max-width: 900px) {
  .nd-line .site-head { max-width: none; }
  .nd-line-fig { aspect-ratio: 1360 / 560; }
  .nd-line-read { font-size: 0.5625rem; letter-spacing: 0.08em; }
}

@media (max-width: 1023px) {
  .nd-line-read { font-size: 0.75rem; letter-spacing: 0.06em; }
}

@media (max-width: 640px) {
  .nd-line-fig { aspect-ratio: 1360 / 700; }
  .nd-line-read {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    white-space: normal;
    text-align: right;
    max-width: 34%;
    line-height: 1.5;
  }

  .nd-line-read > span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-line-mark { animation: none; opacity: 0.85; }
}
}