@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("Liberation Mono"), local("Nimbus Mono PS");
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30.01%;
  line-gap-override: 0%;
}

body {

  --fives-primary:     #1D4030;
  --fives-primary-700: #132B20;
  --fives-primary-100: #D6E0D4;

  --fives-accent:      #3D5A73;
  --fives-accent-700:  #2B4257;

  --fives-leather:     #9B6B3F;

  --fives-bg:            #F3F2EC;
  --fives-bg-2:          #E7EAE8;
  --fives-line:          #CBD4DB;
  --fives-rule:          rgba(61, 90, 115, 0.16);
  --fives-margin:        rgba(61, 90, 115, 0.45);
  --fives-ink-900:       #1B2A38;
  --fives-on-ink:        #F3F2EC;
  --fives-on-ink-muted:  #B7C1CB;

  --fives-pen:           var(--fives-accent);

  --fives-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace,
                SFMono-Regular, Menlo, monospace;

  --fives-primary-p:     var(--fives-primary);
  --fives-primary-700-p: var(--fives-primary-700);
  --fives-primary-100-p: var(--fives-primary-100);
  --fives-line-p:        var(--fives-line);
  --fives-pen-p:         var(--fives-accent);
}

.sk-ink {
  background: var(--fives-ink-900);
  color: var(--fives-on-ink);
  --fives-pen:         var(--fives-on-ink);
  --fives-primary:     var(--fives-on-ink);
  --fives-primary-700: var(--fives-on-ink);
  --fives-line:        rgba(243, 242, 236, 0.22);
}

.sk-paper {
  background: var(--fives-bg);
  color: var(--fives-text);
  --fives-pen:         var(--fives-pen-p);
  --fives-primary:     var(--fives-primary-p);
  --fives-primary-700: var(--fives-primary-700-p);
  --fives-primary-100: var(--fives-primary-100-p);
  --fives-line:        var(--fives-line-p);
}

.sc-eyebrow,
.sl-eyebrow {
  font-family: var(--fives-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sl-eyebrow { color: var(--fives-accent-700); }

.sc-eyebrow:not(.sc-eyebrow--light) { color: var(--fives-accent-700); }

.sc-hero-mark [data-ink="ball"],
.sl-band-mark circle { fill: var(--fives-leather); }
.sl-band-mark path[stroke-dasharray] { stroke: var(--fives-leather); }
.fv-empty-ball { fill: var(--fives-leather); }

.sc-hero-mark {
  --sc-chalk: var(--fives-on-ink);
  --sc-chalk-a: 0.9;
}
.sc-court-line path {
  stroke: var(--sc-chalk);
  stroke-opacity: var(--sc-chalk-a);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-court-slab rect {
  stroke: var(--sc-chalk);
  stroke-opacity: var(--sc-chalk-a);
  stroke-width: 1.5;
}
.sc-court-token circle {
  fill: none;
  stroke: var(--sc-chalk);
  stroke-opacity: var(--sc-chalk-a);
  stroke-width: 1.6;
}
.sc-court-token text {
  font-family: var(--fives-mono);
  font-size: 7px;
  font-weight: 500;
  fill: var(--sc-chalk);
  fill-opacity: var(--sc-chalk-a);
  text-anchor: middle;
  dominant-baseline: central;
}

.sc-court-token[data-drill="pupil"] text { opacity: 0; }
.sc-court-token[data-drill="pupil"].is-head text { opacity: 1; }

.sc-court-traj,
.sc-court-arcline {
  stroke: var(--sc-chalk);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.sc-court-traj { stroke-width: 1.8; }
.sc-court-arcline { stroke-width: 1.4; }

.sc-court-labels text {
  font-family: var(--fives-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06px;
  fill: var(--sc-chalk);
  fill-opacity: var(--sc-chalk-a);
}

.sk-tk-host { position: relative; }
.sk-tk {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
  color: var(--fives-pen);
}
.sk-tk-ink { fill: currentColor; }
.sk-tk.is-off { display: none; }

@keyframes skTkDraw { to { stroke-dashoffset: 0; } }
@keyframes skTkDry  { to { opacity: 1; filter: blur(0px); } }

@keyframes skTkUndraw1 { to { stroke-dashoffset: var(--l1); } }
@keyframes skTkUndraw2 { to { stroke-dashoffset: var(--l2); } }
@keyframes skTkLift    { to { opacity: 0; } }

body {
  --fives-t-tick-short: 120ms;
  --fives-t-tick-hold:   30ms;
  --fives-t-tick-long:  300ms;

  --fives-t-step:        60ms;
}

html.fv-ink.fv-ink-armed .sk-tk:not(.is-dry) { opacity: 0.78; filter: blur(0.6px); }
html.fv-ink.fv-ink-armed .sk-tk:not(.is-dry) .sk-tk-m1 { stroke-dashoffset: var(--l1); }
html.fv-ink.fv-ink-armed .sk-tk:not(.is-dry) .sk-tk-m2 { stroke-dashoffset: var(--l2); }

.sk-tk.is-drawing .sk-tk-m1 {
  animation: skTkDraw var(--fives-t-tick-short) var(--fives-e-draw) var(--sk-tk-delay, 0ms) both;
}
.sk-tk.is-drawing .sk-tk-m2 {
  animation: skTkDraw var(--fives-t-tick-long) var(--fives-e-draw)
             calc(var(--sk-tk-delay, 0ms) + var(--fives-t-tick-short) + var(--fives-t-tick-hold)) both;
}
.sk-tk.is-drawing {
  animation: skTkDry var(--fives-t-gentle) var(--fives-e-settle)
             calc(var(--sk-tk-delay, 0ms) + var(--fives-t-tick-short) + var(--fives-t-tick-hold)
                  + var(--fives-t-tick-long)) both;
}

.sk-tk.is-undrawing .sk-tk-m2 {
  animation: skTkUndraw2 var(--fives-t-standard) var(--fives-e-draw) both;
}
.sk-tk.is-undrawing .sk-tk-m1 {
  animation: skTkUndraw1 var(--fives-t-standard) var(--fives-e-draw)
             var(--fives-t-standard) both;
}

.sk-tk.is-undrawing {
  animation: skTkLift var(--fives-t-standard) var(--fives-e-settle)
             var(--fives-t-standard) both;
}

@keyframes skRise6  { to { opacity: 1; transform: translateY(0); } }
@keyframes skRise12 { to { opacity: 1; transform: translateY(0); } }
@keyframes skFadeIn { to { opacity: 1; } }
@keyframes skPopIn  { to { transform: scale(1); } }
@keyframes skDrawY  { to { transform: scaleY(1); } }

@keyframes skBallIn { to { opacity: 1; transform: scale(1); } }

html.fv-ink.fv-ink-armed [data-ink="eyebrow"] { opacity: 0; transform: translateY(6px); }
html.fv-ink.fv-ink-armed [data-ink="line"],
html.fv-ink.fv-ink-armed [data-ink="lede"],
html.fv-ink.fv-ink-armed [data-ink="ctas"],
html.fv-ink.fv-ink-armed [data-ink="facts"] { opacity: 0; transform: translateY(12px); }
html.fv-ink.fv-ink-armed [data-ink="mark-fade"],
html.fv-ink.fv-ink-armed [data-ink="actors"],
html.fv-ink.fv-ink-armed [data-ink="labels"] { opacity: 0; }
html.fv-ink.fv-ink-armed [data-ink="cap"] { opacity: 0; transform: translateY(6px); }
html.fv-ink.fv-ink-armed [data-ink="ball"] { opacity: 0; transform: scale(0.6); }
html.fv-ink.fv-ink-armed [data-ink="wall"],
html.fv-ink.fv-ink-armed [data-ink="step"],
html.fv-ink.fv-ink-armed [data-ink="traj"] { stroke-dashoffset: var(--len); }

[data-ink="ball"] { transform-box: fill-box; transform-origin: center; }

.is-inking [data-ink="eyebrow"] { animation: skRise6  var(--fives-t-gentle) var(--fives-e-settle) 0ms both; }
.is-inking [data-ink="line"]    { animation: skRise12 var(--fives-t-gentle) var(--fives-e-rebound) both; }
.is-inking [data-ink="line"]:nth-of-type(1) { animation-delay: 80ms; }
.is-inking [data-ink="line"]:nth-of-type(2) { animation-delay: calc(80ms + var(--fives-t-step)); }
.is-inking [data-ink="line"]:nth-of-type(3) { animation-delay: calc(80ms + var(--fives-t-step) * 2); }
.is-inking [data-ink="lede"]  { animation: skRise12 var(--fives-t-gentle) var(--fives-e-rebound) 320ms both; }
.is-inking [data-ink="ctas"]  { animation: skRise12 var(--fives-t-gentle) var(--fives-e-rebound) 360ms both; }
.is-inking [data-ink="facts"] { animation: skRise12 var(--fives-t-gentle) var(--fives-e-rebound) 400ms both; }

html.fv-ink {
  --sk-cover-wall: 700ms;
  --sk-cover-step: 300ms;
  --sk-cover-feat: 300ms;
}

.sc-hero.is-inking [data-ink="wall"]      { animation: skTkDraw var(--sk-cover-wall)    var(--fives-e-draw)    0ms    both; }
.sc-hero.is-inking [data-ink="step"]      { animation: skTkDraw var(--sk-cover-step)    var(--fives-e-draw)    520ms  both; }
.sc-hero.is-inking [data-ink="mark-fade"] { animation: skFadeIn var(--sk-cover-feat)    var(--fives-e-settle)  780ms  both; }
.sc-hero.is-inking [data-ink="labels"]    { animation: skFadeIn var(--fives-t-gentle)   var(--fives-e-settle)  900ms  both; }
.sc-hero.is-inking [data-ink="eyebrow"]   { animation: skRise6  var(--fives-t-standard) var(--fives-e-settle)  600ms  both; }
.sc-hero.is-inking [data-ink="line"]      { animation: skRise12 var(--fives-t-gentle)   var(--fives-e-rebound) both; }
.sc-hero.is-inking [data-ink="line"]:nth-of-type(1) { animation-delay: 700ms; }
.sc-hero.is-inking [data-ink="line"]:nth-of-type(2) { animation-delay: 840ms; }
.sc-hero.is-inking [data-ink="line"]:nth-of-type(3) { animation-delay: 980ms; }
.sc-hero.is-inking [data-ink="ball"]      { animation: skBallIn var(--fives-t-standard) var(--fives-e-rebound) 1000ms both; }

.sc-hero.is-inking [data-ink="actors"]    { animation: skFadeIn var(--fives-t-hero)     var(--fives-e-settle)  1100ms both; }
.sc-hero.is-inking [data-ink="lede"]      { animation: skRise6  var(--fives-t-gentle)   var(--fives-e-settle)  1200ms both; }

.sc-hero.is-inking [data-ink="cap"]       { animation: skRise6  var(--fives-t-gentle)   var(--fives-e-settle)  1200ms both; }
.sc-hero.is-inking [data-ink="ctas"]      { animation: skRise6  var(--fives-t-gentle)   var(--fives-e-settle)  1350ms both; }
.sc-hero.is-inking [data-ink="facts"]     { animation: skRise6  var(--fives-t-gentle)   var(--fives-e-settle)  1500ms both; }

html.fv-ink.fv-ink-armed .sc-hero [data-ink="lede"],
html.fv-ink.fv-ink-armed .sc-hero [data-ink="ctas"],
html.fv-ink.fv-ink-armed .sc-hero [data-ink="facts"] { transform: translateY(6px); }

html.fv-ink {
  --sk-band-wall: 500ms;
  --sk-band-step: 240ms;
  --sk-band-feat: 240ms;
  --sk-band-traj: 470ms;
}

.sl-hero.is-inking [data-ink="wall"]      { animation: skTkDraw var(--sk-band-wall)    var(--fives-e-draw)    0ms   both; }
.sl-hero.is-inking [data-ink="step"]      { animation: skTkDraw var(--sk-band-step)    var(--fives-e-draw)    360ms both; }
.sl-hero.is-inking [data-ink="mark-fade"] { animation: skFadeIn var(--sk-band-feat)    var(--fives-e-settle)  560ms both; }
.sl-hero.is-inking [data-ink="eyebrow"]   { animation: skRise6  var(--fives-t-standard) var(--fives-e-settle) 400ms both; }
.sl-hero.is-inking [data-ink="line"]      { animation: skRise12 var(--fives-t-gentle)  var(--fives-e-rebound) both; }
.sl-hero.is-inking [data-ink="line"]:nth-of-type(1) { animation-delay: 500ms; }
.sl-hero.is-inking [data-ink="line"]:nth-of-type(2) { animation-delay: 640ms; }
.sl-hero.is-inking [data-ink="ball"]      { animation: skBallIn var(--fives-t-standard) var(--fives-e-rebound) 700ms both; }
.sl-hero.is-inking [data-ink="traj"]      { animation: skTkDraw var(--sk-band-traj)    var(--fives-e-draw)    780ms both; }
.sl-hero.is-inking [data-ink="lede"]      { animation: skRise6  var(--fives-t-gentle)  var(--fives-e-settle)  850ms both; }

html.fv-ink.fv-ink-armed .sl-hero [data-ink="lede"] { transform: translateY(6px); }

html.fv-ink {
  --sk-ledger-draw: 220ms;
  --sk-ledger-rule: 620ms;
}

@keyframes skRuleDry {
  0%     { transform: scaleX(0); opacity: 1; animation-timing-function: var(--fives-e-draw); }
  35.48% { transform: scaleX(1); opacity: 1; animation-timing-function: var(--fives-e-settle); }
  100%   { transform: scaleX(1); opacity: 0; }
}

@keyframes skDashIn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.sc-ledger-tick { color: var(--fives-pen); }
.sc-ledger-tick path { stroke-dasharray: 1; }
.sc-tag.is-account .sc-tag-ring { color: var(--fives-pen); }
.sc-tag-ring rect { stroke-dasharray: 1; }

html.fv-armed.fv-ink.fv-ink-armed .sc-ledger-rows li.fv-reveal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px; height: 1px;
  background: var(--fives-pen);
  transform-origin: left;
  pointer-events: none;
}
html.fv-armed.fv-ink.fv-ink-armed .sc-ledger-rows li.fv-reveal:not(.is-in)::before {
  transform: scaleX(0);
}
html.fv-armed.fv-ink.fv-ink-armed .sc-ledger-rows li.fv-reveal:not(.is-in) .sc-ledger-tick path,
html.fv-armed.fv-ink.fv-ink-armed .sc-ledger-rows li.fv-reveal:not(.is-in) .sc-tag-ring rect {
  stroke-dashoffset: 1;
}

html.fv-armed.fv-ink.fv-ink-armed .sc-scheme[open] .sc-ledger-rows li.fv-reveal.is-in::before {
  animation: skRuleDry var(--sk-ledger-rule) linear
             calc(min(var(--fv-i, 0), 5) * var(--fives-t-step)) both;
}
html.fv-armed.fv-ink.fv-ink-armed .sc-scheme[open] .sc-ledger-rows li.fv-reveal.is-in .sc-ledger-tick path {
  animation: skDashIn var(--fives-t-tick-long) var(--fives-e-draw)
             calc(min(var(--fv-i, 0), 5) * var(--fives-t-step) + 180ms) both;
}
html.fv-armed.fv-ink.fv-ink-armed .sc-scheme[open] .sc-ledger-rows li.fv-reveal.is-in .sc-tag-ring rect {
  animation: skDashIn var(--sk-ledger-draw) var(--fives-e-draw)
             calc(min(var(--fv-i, 0), 5) * var(--fives-t-step) + 240ms) both;
}

.sk-margin {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--fives-margin);
  transform-origin: top center;
  pointer-events: none;
}
html.fv-ink.fv-ink-armed .sk-margin:not(.is-drawn) { transform: scaleY(0); }
.sk-margin.is-drawn { animation: skDrawY var(--fives-t-hero) var(--fives-e-draw) both; }

.sk-rg-base { stroke: var(--fives-line); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.sk-rg-mark.is-now .sk-rg-base { stroke: var(--fives-accent); stroke-width: 1; }

.sk-rg-ink {
  stroke: var(--fives-accent); stroke-width: 2.5; stroke-linecap: round; fill: none;
  stroke-dasharray: var(--len) calc(var(--len) * 2); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset var(--fives-t-standard) var(--fives-e-draw);
}
.sk-rg-mark.is-done .sk-rg-ink { stroke-dashoffset: 0; }

.sk-timer {
  position: absolute; inset: 0;
  background: var(--fives-accent);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
.sk-timer.is-draining { transition: transform var(--fives-t-standard) var(--fives-e-draw); }

html.fv-ink .fv-dust { display: none !important; }

@keyframes skBlotSpread {
  from { transform: scale(0.5); }
  to   { transform: scale(2.4); }
}
@keyframes skBlotDry {
  from { opacity: 0.7; }
  to   { opacity: 0;   }
}

.sk-blot {
  position: fixed;
  z-index: 2147483000;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
  will-change: transform, opacity;
  animation: skBlotSpread var(--fives-t-standard) var(--fives-e-draw) both,
             skBlotDry    var(--fives-t-gentle)   var(--fives-e-settle) var(--fives-t-instant) both;
}

html.fv-rm .sk-blot { display: none !important; }

html.fv-rm .sk-tk.is-undrawing { opacity: 1 !important; filter: none !important; animation: none !important; }
html.fv-rm .sk-tk.is-undrawing .sk-tk-m1,
html.fv-rm .sk-tk.is-undrawing .sk-tk-m2 { animation: none !important; stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .sk-tk, .sk-tk.is-drawing, .sk-tk.is-undrawing { opacity: 1 !important; filter: none !important; animation: none !important; }
  .sk-tk .sk-tk-m1, .sk-tk .sk-tk-m2 { animation: none !important; stroke-dashoffset: 0 !important; }
  .sk-margin, .sk-margin.is-drawn { animation: none !important; transform: none !important; }
  .sk-rg-ink { transition: none !important; }
  .sk-timer { transition: none !important; }
  .sk-blot { display: none !important; animation: none !important; }
  [data-ink="eyebrow"], [data-ink="line"], [data-ink="lede"],
  [data-ink="ctas"], [data-ink="facts"], [data-ink="mark-fade"],
  [data-ink="labels"], [data-ink="actors"], [data-ink="cap"] {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  [data-ink="ball"] { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-ink="wall"], [data-ink="step"], [data-ink="traj"] {
    stroke-dashoffset: 0 !important; animation: none !important;
  }

  .sc-ledger-tick path, .sc-tag-ring rect {
    stroke-dashoffset: 0 !important; animation: none !important;
  }
  .sc-ledger-rows li.fv-reveal::before { display: none !important; animation: none !important; }
}
