:root {
  --accent: #002fa7;
  --paper: #fafaf8;
  --ink: #0a0a0a;
  --muted: #656565;
  --line: rgba(10, 10, 10, 0.22);
  --grid: 6.25%;
  font-family: Inter, "Inter Tight", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  color: var(--ink);
}

body {
  display: grid;
  place-items: center;
}

.deck {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  background: var(--paper);
  overflow: hidden;
}

.deck::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 47, 167, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 47, 167, 0.055) 1px, transparent 1px);
  background-size: calc(100% / 16) calc(100% / 9);
  pointer-events: none;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 0;
  padding: 3.6% 4.2%;
  z-index: 1;
}

.slide.active {
  display: grid;
  animation: appear 260ms ease-out both;
}

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.label,
.meta {
  font-size: clamp(10px, 0.92vw, 14px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

h1,
h2,
p {
  margin: 0;
  letter-spacing: 0;
}

h1,
h2 {
  font-weight: 900;
  line-height: 0.98;
}

h1 {
  font-size: clamp(54px, 6.2vw, 102px);
}

h2 {
  grid-column: 1 / 12;
  grid-row: 2 / 4;
  font-size: clamp(40px, 4.3vw, 74px);
}

.foot {
  grid-column: 1 / 16;
  grid-row: 9;
  align-self: end;
  border-top: 1px solid var(--ink);
  padding-top: 1.05vw;
  font-size: clamp(15px, 1.36vw, 22px);
  line-height: 1.35;
  font-weight: 800;
}

.cover {
  background: var(--accent);
  color: white;
}

.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.32;
}

.cover .meta {
  color: white;
  opacity: 0.85;
}

.cover .top {
  grid-column: 1 / 10;
  grid-row: 1;
}

.cover-title {
  grid-column: 1 / 11;
  grid-row: 3 / 7;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.26em;
  font-size: clamp(54px, 6.6vw, 112px);
  line-height: 0.92;
  font-weight: 950;
}

.cover-title span:nth-child(2) {
  font-size: 0.78em;
  line-height: 1.02;
}

.cover-sub {
  grid-column: 1 / 9;
  grid-row: 7;
  align-self: start;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}

.cover-mark {
  grid-column: 11 / 17;
  grid-row: 2 / 8;
  align-self: center;
}

.cover-mark svg {
  width: 100%;
  height: auto;
}

.cover-mark path {
  fill: none;
  stroke: white;
  stroke-width: 10;
}

.cover-mark .arc {
  stroke-width: 16;
}

.cover-mark .thin {
  stroke-width: 4;
  opacity: 0.62;
}

.cover-mark circle {
  fill: var(--accent);
  stroke: white;
  stroke-width: 9;
}

.dialectic-mark path {
  stroke-width: 8;
}

.dialectic-mark .arc {
  fill: none;
  stroke-width: 12;
}

.cover .bottom {
  grid-column: 1 / 14;
  grid-row: 9;
  align-self: end;
}

.statement .label,
.fault .label,
.gate .label,
.ledger .label,
.xray .label,
.debt .label,
.beef .label,
.roles .label,
.values .label,
.manager .label,
.factory .label,
.talent .label,
.warning .label,
.migrate .label,
.close .label,
.sources .label {
  grid-column: 1 / 8;
  grid-row: 1;
}

.statement h1 {
  grid-column: 1 / 14;
  grid-row: 2 / 5;
  align-self: start;
}

.statement-grid {
  grid-column: 1 / 16;
  grid-row: 6 / 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.statement-grid div,
.ledger-table div,
.proof-list div,
.system-copy div,
.matrix div,
.talent-notes div,
.sources li {
  border-right: 1px solid var(--ink);
  padding: 1.25vw;
}

.statement-grid div:last-child,
.ledger-table div:last-child {
  border-right: 0;
}

.statement-grid b,
.ledger-table b,
.fault-lines b,
.bridge b,
.timeline b,
.proof-list b,
.system-copy b,
.factory-flow b,
.warning-grid b,
.matrix b,
.talent-notes b {
  display: block;
  font-size: clamp(24px, 2.25vw, 38px);
  line-height: 1.08;
  font-weight: 900;
}

.statement-grid span,
.ledger-table span,
.fault-lines p,
.bridge span,
.timeline span,
.proof-list span,
.system-copy span,
.factory-flow span,
.warning-grid p,
.matrix span,
.talent-notes span {
  display: block;
  margin-top: 0.8vw;
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.42;
  font-weight: 650;
  color: #333;
}

.fault-grid {
  grid-column: 1 / 17;
  grid-row: 4 / 9;
  display: grid;
  grid-template-columns: 4fr 12fr;
  border-top: 1px solid var(--ink);
}

.big-num {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: white;
  font-size: clamp(112px, 12vw, 210px);
  font-weight: 950;
}

.fault-lines {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.fault-lines article {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1.15vw;
}

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

.fault-lines span,
.timeline small,
.bridge-line span,
.metric-strip span,
.quote-box b,
.warning-grid span {
  display: block;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}

.gate-layout,
.split,
.system,
.talent-layout {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  grid-template-columns: 6fr 10fr;
  gap: 0;
  border: 1px solid var(--ink);
}

.quote-box {
  border-right: 1px solid var(--ink);
  padding: 1.5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote-box span {
  font-size: clamp(18px, 1.7vw, 29px);
  font-weight: 850;
  line-height: 1.34;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 1.4vw;
  padding: 1.6vw 2vw;
}

.bar-chart div {
  height: var(--h);
  min-height: 86px;
  background: var(--accent);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.9vw;
}

.bar-chart em {
  font-style: normal;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 900;
}

.bar-chart strong {
  font-size: clamp(20px, 2vw, 34px);
  line-height: 1;
}

.ledger-table {
  grid-column: 1 / 17;
  grid-row: 4 / 6;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
}

.ledger-line {
  grid-column: 1 / 17;
  grid-row: 7 / 9;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  border-top: 10px solid var(--accent);
}

.ledger-line span {
  position: relative;
  font-size: clamp(20px, 2.1vw, 36px);
  font-weight: 900;
}

.ledger-line span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 12px;
  background: var(--accent);
}

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

.before,
.after {
  padding: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.before {
  border-right: 1px solid var(--ink);
}

.before small,
.after small {
  font-size: clamp(12px, 1vw, 16px);
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.before b,
.after b {
  font-size: clamp(26px, 3vw, 52px);
  line-height: 1.08;
}

.after {
  background: var(--accent);
  color: white;
}

.after small {
  color: white;
}

.metric-strip {
  grid-column: 1 / 17;
  grid-row: 8 / 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--ink);
  border-top: 0;
}

.metric-strip span {
  color: var(--ink);
  border-right: 1px solid var(--ink);
  padding: 1vw;
}

.bridge {
  grid-column: 1 / 17;
  grid-row: 4 / 7;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.bridge article {
  padding: 1.45vw;
  border-right: 1px solid var(--ink);
}

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

.bridge-line {
  grid-column: 1 / 17;
  grid-row: 8;
  display: grid;
  grid-template-columns: 4fr 4fr 4fr 4fr;
}

.bridge-line span,
.bridge-line b {
  padding: 1vw;
  border: 1px solid var(--ink);
  border-right: 0;
  color: var(--ink);
}

.bridge-line b {
  background: var(--accent);
  color: white;
  border-right: 1px solid var(--ink);
  font-size: clamp(18px, 1.8vw, 30px);
}

.beef-grid {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
}

.beef-grid div,
.beef-grid strong {
  padding: 1.6vw;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.beef-grid b {
  font-size: clamp(28px, 3vw, 52px);
  line-height: 1.06;
}

.beef-grid span {
  margin-top: 1.1vw;
  color: var(--accent);
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: 900;
}

.beef-grid strong {
  border-right: 0;
  background: var(--accent);
  color: white;
  font-size: clamp(28px, 3.1vw, 54px);
  line-height: 1.1;
}

.timeline {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
}

.timeline article {
  padding: 1.35vw;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.timeline article:nth-child(3) {
  background: var(--accent);
  color: white;
}

.timeline article:nth-child(3) small,
.timeline article:nth-child(3) span {
  color: white;
}

.proof-list {
  grid-column: 1 / 17;
  grid-row: 4 / 9;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  border: 1px solid var(--ink);
}

.proof-list div {
  display: grid;
  grid-template-columns: 3fr 13fr;
  align-items: center;
  border-right: 0;
  border-bottom: 1px solid var(--ink);
}

.proof-list div:last-child {
  border-bottom: 0;
}

.proof-list b {
  color: var(--accent);
}

.system {
  grid-template-columns: 7fr 9fr;
}

.loop {
  border-right: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  position: relative;
}

.loop span,
.loop b {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: clamp(24px, 2.6vw, 45px);
  font-weight: 900;
}

.loop span:nth-child(2),
.loop span:nth-child(4) {
  border-right: 0;
}

.loop span:nth-child(3),
.loop span:nth-child(4) {
  border-bottom: 0;
}

.loop b {
  position: absolute;
  inset: 35% 32%;
  background: var(--accent);
  color: white;
  border: 1px solid var(--ink);
  font-size: clamp(18px, 2vw, 34px);
}

.system-copy {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.system-copy div {
  border-right: 0;
  border-bottom: 1px solid var(--ink);
}

.system-copy div:last-child {
  border-bottom: 0;
}

.factory-flow {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
}

.factory-flow article {
  padding: 1.45vw;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.factory-flow article:nth-child(4) {
  background: var(--accent);
  color: white;
}

.factory-flow article:nth-child(4) span {
  color: white;
}

.talent-layout {
  grid-template-columns: 7fr 9fr;
}

.radar {
  position: relative;
  border-right: 1px solid var(--ink);
}

.radar svg {
  position: absolute;
  inset: 14% 18%;
  width: 64%;
  height: 72%;
}

.radar polygon {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.radar .shape {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: var(--accent);
  stroke-width: 8;
}

.radar i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  font-style: normal;
  font-size: clamp(11px, 1vw, 16px);
  font-weight: 900;
  white-space: nowrap;
}

.talent-notes {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.talent-notes div {
  border-right: 0;
  border-bottom: 1px solid var(--ink);
}

.talent-notes div:last-child {
  border-bottom: 0;
}

.warning-grid,
.matrix {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.warning-grid article,
.matrix div {
  padding: 1.45vw;
  border-right: 1px solid var(--ink);
}

.warning-grid article:last-child,
.matrix div:last-child {
  border-right: 0;
}

.warning-grid article:nth-child(2) {
  background: var(--accent);
  color: white;
}

.warning-grid article:nth-child(2) span,
.warning-grid article:nth-child(2) p {
  color: white;
}

.close {
  background: var(--accent);
  color: white;
}

.close .label {
  color: white;
}

.close h2 {
  grid-column: 1 / 15;
  grid-row: 2 / 5;
  font-size: clamp(42px, 4.9vw, 86px);
}

.choices {
  grid-column: 1 / 17;
  grid-row: 6 / 7;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid white;
}

.choices span {
  padding: 1.2vw;
  border-right: 1px solid white;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 900;
}

.choices span:last-child {
  border-right: 0;
}

.manifesto {
  grid-column: 1 / 15;
  grid-row: 8;
  align-self: end;
  border-top: 1px solid white;
  padding-top: 1vw;
  font-size: clamp(22px, 2.2vw, 38px);
  line-height: 1.25;
  font-weight: 900;
}

.sources ul {
  grid-column: 1 / 15;
  grid-row: 4 / 9;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  list-style: none;
}

.sources li {
  border-right: 0;
  border-bottom: 1px solid var(--ink);
  font-size: clamp(16px, 1.4vw, 23px);
  line-height: 1.45;
  font-weight: 700;
}

.sources li:last-child {
  border-bottom: 0;
}

.tension-list {
  grid-column: 1 / 17;
  grid-row: 4 / 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--ink);
}

.tension-list article {
  padding: 1.05vw;
  border-right: 1px solid var(--ink);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.5vw;
}

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

.tension-list b {
  font-size: clamp(20px, 1.95vw, 34px);
  line-height: 1.05;
}

.tension-list span {
  width: 2.2vw;
  height: 2.2vw;
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: white;
  font-weight: 950;
}

.tension-list p {
  margin-top: 0.7vw;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.42;
  font-weight: 680;
  color: #333;
}

.dialectic-split h2,
.xray-deep h2,
.debt-deep h2,
.beef-deep h2,
.transition-deep h2,
.manager-deep h2,
.cadre-deep h2,
.talent-deep h2,
.era h2,
.warning-deep h2,
.mba h2 {
  grid-column: 1 / 15;
}

.split-logic,
.ledger-deep,
.debt-stack,
.transition-map,
.manager-deep-grid,
.two-column,
.era-grid,
.warning-deep-grid,
.questions {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  border: 1px solid var(--ink);
}

.split-logic {
  grid-template-columns: repeat(3, 1fr);
}

.ledger-deep,
.debt-stack,
.transition-map,
.era-grid,
.questions {
  grid-template-columns: repeat(4, 1fr);
}

.manager-deep-grid,
.warning-deep-grid {
  grid-template-columns: repeat(3, 1fr);
}

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

.split-logic div,
.ledger-deep div,
.debt-stack div,
.transition-map article,
.manager-deep-grid div,
.two-column div,
.era-grid div,
.warning-deep-grid article,
.questions div {
  padding: 1.35vw;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.split-logic div:last-child,
.ledger-deep div:last-child,
.debt-stack div:last-child,
.transition-map article:last-child,
.manager-deep-grid div:last-child,
.two-column div:last-child,
.era-grid div:last-child,
.warning-deep-grid article:last-child,
.questions div:last-child {
  border-right: 0;
}

.split-logic .synthesis,
.ledger-deep div:nth-child(3),
.debt-stack div:nth-child(2),
.transition-map article:nth-child(3),
.manager-deep-grid div:nth-child(2),
.two-column div:nth-child(2),
.era-grid div:nth-child(4),
.warning-deep-grid article:nth-child(2),
.questions div:nth-child(4) {
  background: var(--accent);
  color: white;
}

.split-logic .synthesis span,
.ledger-deep div:nth-child(3) span,
.debt-stack div:nth-child(2) span,
.transition-map article:nth-child(3) span,
.manager-deep-grid div:nth-child(2) span,
.two-column div:nth-child(2) span,
.era-grid div:nth-child(4) span,
.warning-deep-grid article:nth-child(2) span,
.warning-deep-grid article:nth-child(2) p,
.questions div:nth-child(4) span {
  color: white;
}

.split-logic small,
.transition-map small,
.beef-deep-grid small,
.xray-deep-grid small {
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.split-logic .synthesis small,
.transition-map article:nth-child(3) small,
.xray-deep-grid .blue small {
  color: white;
}

.split-logic b,
.ledger-deep b,
.debt-stack b,
.transition-map b,
.manager-deep-grid b,
.two-column b,
.era-grid b,
.warning-deep-grid b,
.questions b {
  display: block;
  font-size: clamp(24px, 2.45vw, 42px);
  line-height: 1.05;
}

.split-logic span,
.ledger-deep span,
.debt-stack span,
.transition-map span,
.manager-deep-grid span,
.two-column span,
.era-grid span,
.warning-deep-grid span,
.questions span {
  display: block;
  margin-top: 1vw;
  font-size: clamp(14px, 1.16vw, 20px);
  line-height: 1.42;
  font-weight: 680;
  color: #333;
}

.xray-deep-grid {
  grid-column: 1 / 17;
  grid-row: 4 / 7;
  display: grid;
  grid-template-columns: 7fr 2fr 7fr;
  border: 1px solid var(--ink);
}

.xray-deep-grid .quote {
  padding: 1.45vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--ink);
}

.xray-deep-grid .quote b {
  font-size: clamp(25px, 2.7vw, 46px);
  line-height: 1.08;
}

.xray-deep-grid .blue {
  background: var(--accent);
  color: white;
  border-right: 0;
}

.xray-deep-grid .arrow {
  display: grid;
  place-items: center;
  font-size: clamp(42px, 5vw, 88px);
  font-weight: 900;
  border-right: 1px solid var(--ink);
}

.warning-line {
  grid-column: 1 / 17;
  grid-row: 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.warning-line span {
  padding: 1vw;
  border-right: 1px solid var(--ink);
  font-size: clamp(15px, 1.25vw, 21px);
  font-weight: 850;
}

.warning-line span:last-child {
  border-right: 0;
  background: var(--accent);
  color: white;
}

.beef-deep-grid {
  grid-column: 1 / 17;
  grid-row: 4 / 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
}

.beef-deep-grid div,
.beef-deep-grid strong {
  padding: 1.35vw;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.beef-deep-grid b {
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.05;
}

.beef-deep-grid span {
  font-size: clamp(14px, 1.12vw, 19px);
  line-height: 1.42;
  font-weight: 680;
  color: #333;
}

.beef-deep-grid strong {
  background: var(--accent);
  color: white;
  border-right: 0;
  font-size: clamp(25px, 2.6vw, 46px);
  line-height: 1.1;
}

.warning-deep-grid p {
  margin: 1vw 0 0;
  font-size: clamp(14px, 1.15vw, 20px);
  line-height: 1.45;
  font-weight: 680;
}

.hud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 99;
}

.hud button {
  width: 38px;
  height: 38px;
  border: 1px solid white;
  background: var(--ink);
  color: white;
  font-size: 26px;
  cursor: pointer;
}

.hud span {
  min-width: 72px;
  color: white;
  text-align: center;
  font-weight: 900;
  font-size: 12px;
}

.progress {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
  z-index: 99;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 180ms ease;
}

body.clean .hud,
body.clean .progress {
  display: none;
}

body.clean {
  background: #000;
}

.active .cover-mark .arc,
.active .cover-mark .thin {
  stroke-dasharray: 840;
  animation: draw 1000ms ease-out both;
}

.active .bar-chart div {
  transform-origin: bottom;
  animation: rise 560ms ease-out both;
}

@keyframes draw {
  from { stroke-dashoffset: 840; }
  to { stroke-dashoffset: 0; }
}

@keyframes rise {
  from { transform: scaleY(0.04); }
  to { transform: scaleY(1); }
}

@media (max-width: 900px) {
  .deck {
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }
}