@font-face {
  font-family: Mochiy;
  src: url("./assets/mochiypopone-MochiyPopOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Rounded;
  src: url("./assets/mplusrounded1c-MPLUSRounded1c-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Rounded;
  src: url("./assets/mplusrounded1c-MPLUSRounded1c-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --white: #fffdf6;
  --ink: #30261e;
  --muted: #55463a;
  --red: #9f352d;
  --gold: #f6d775;
  --line: #e1d4bf;
  background: #f2ebde url("./assets/crayon-check.svg") center top / 208px 208px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 500 16px/1.7 Rounded, sans-serif; line-break: strict; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.development-page {
  width: min(100%, 650px);
  min-height: 100vh;
  margin-inline: auto;
  background: var(--white);
  border-inline: 1px solid var(--line);
}
.development-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 16px;
  padding: 8px clamp(14px, 5vw, 34px);
  border-bottom: 1px solid var(--line);
}
.development-header a { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark {
  font: italic 900 25px/1 "Avenir Next", Rounded, sans-serif;
  letter-spacing: -.065em;
  text-decoration: none;
}
.wordmark em { color: var(--red); margin-right: .16em; }
.back-link { font-size: 13px; text-underline-offset: .2em; }
.development-content { padding: 30px clamp(14px, 5vw, 34px) 42px; }
.development-label { color: var(--red); font-weight: 800; font-size: 13px; }
.development-content h1 { margin-top: 7px; font: 400 clamp(27px, 6vw, 40px)/1.4 Mochiy, Rounded, sans-serif; }
.development-content h1 span { display: block; margin-top: 4px; color: var(--muted); font: 800 16px/1.5 Rounded, sans-serif; }
.development-lead { margin-top: 24px; font-size: 19px; line-height: 1.5; }
.development-copy { margin-top: 8px; color: var(--muted); }

/* Illustrated stages of the EA's design. */
.dev-motion{margin-top:22px;border:2px solid #39271d;border-radius:14px 20px 12px 16px;overflow:hidden;background:var(--white);box-shadow:3px 4px #39271d25}
.dev-motion__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin:0;padding:12px 14px;border-bottom:2px solid #39271d;background:repeating-linear-gradient(-25deg,transparent 0 5px,#fffdf699 5px 6px),var(--gold);color:var(--ink);font-weight:800;font-size:14px}
.dev-motion__eyebrow span{color:#784620;font:900 11px/1.4 "Avenir Next",Rounded,sans-serif;letter-spacing:.08em}
.dev-motion__nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:12px 9px}
.dev-motion__nav button{display:grid;place-content:center;gap:2px;min-width:0;min-height:52px;padding:3px 1px;border:2px solid #39271d;border-radius:8px;background:var(--white);color:var(--ink);cursor:pointer}
.dev-motion__nav button b{font:900 16px/1.15 "Avenir Next",Rounded,sans-serif}
.dev-motion__nav button span{font-size:clamp(8px,2.05vw,10px);font-weight:800;line-height:1.3;white-space:nowrap;letter-spacing:-.06em}
.dev-motion__nav button[aria-pressed="true"]{background:repeating-linear-gradient(-25deg,transparent 0 5px,#fffdf699 5px 6px),#8fdbea;box-shadow:0 3px #338ca1}
.dev-motion__nav button[data-scene="4"]{background:#ffe5df;color:#8d2c31}
.dev-motion__nav button[data-scene="4"][aria-pressed="true"]{background:#fac0b7;box-shadow:0 3px #a84a49}
.dev-motion__scene{padding:10px 12px 15px}
.dev-chart__kicker{text-align:center;color:#52718d;font:800 10px/1.4 "Avenir Next",Rounded,sans-serif;letter-spacing:.1em}
.dev-chart__kicker span{color:#718398}
.dev-motion__scene h3{margin:7px 0 14px;text-align:center;color:var(--ink);font-size:18px;line-height:1.5}
.dev-motion .dev-chart{display:block;width:100%;height:auto;border-radius:10px;background:#fffdFA}
.dev-motion .dev-chart stop{stop-color:#fffdFA}
.dev-motion .dev-chart [fill="#33C6FB" i]{fill:#b63f3a}
.dev-motion .dev-chart [stroke="#33C6FB" i]{stroke:#b63f3a}
.dev-motion .dev-chart [fill="#FB5693" i]{fill:#2863a5}
.dev-motion .dev-chart [stroke="#FB5693" i]{stroke:#2863a5}
.dev-motion .dev-chart [stroke="#B8D5EF" i]{stroke:#dedad2;stroke-opacity:1}
.dev-motion .dev-chart [stroke="#CADBEB" i],.dev-motion .dev-chart [stroke="#C2D6EB" i],.dev-motion .dev-chart [stroke="#76C5E1" i],.dev-motion .dev-chart [stroke="#C790B1" i]{stroke:#716c63}
.dev-motion .dev-chart [fill="#49D69E" i],.dev-motion .dev-chart [fill="#1E395F" i]{fill:#47443e}
.dev-motion .dev-chart [stroke="#49D69E" i],.dev-motion .dev-chart [stroke="#446787" i]{stroke:#47443e}
.dev-motion .dev-chart text{font:800 10px Rounded,sans-serif;text-anchor:middle;fill:#47443e}
.dev-motion .dev-chart .chart-left{text-anchor:start}
.dev-motion .dev-chart .chart-muted{fill:#716c63;font-size:9px}
.dev-motion .dev-chart .chart-legend{font-size:9px}
.dev-motion .dev-chart .dev-chart__event text,.dev-motion .dev-chart .chart-tag{fill:#fffdFA}
.dev-chart__progress{height:3px;margin:8px 2px 0;background:#e3ebf2;border-radius:99px;overflow:hidden}
.dev-chart__progress i{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#fb5693,#33c6fb)}
@keyframes devChartReveal{0%{width:0}78%,100%{width:294px}}
@keyframes devChartEvent{0%,4%{opacity:0}10%,100%{opacity:1}}
@keyframes devChartProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html[data-motion="on"] .dev-motion .dev-chart__reveal{animation:devChartReveal 4.533333s linear infinite;animation-play-state:paused}
html[data-motion="on"] .dev-motion .dev-chart__event{animation:devChartEvent 4.533333s both infinite;animation-delay:var(--event-delay,0s);animation-play-state:paused}
html[data-motion="on"] .dev-motion .dev-chart__progress i{animation:devChartProgress 4.666667s linear infinite;animation-play-state:paused}
html[data-motion="on"] .dev-motion[data-active] .dev-chart__reveal,html[data-motion="on"] .dev-motion[data-active] .dev-chart__event,html[data-motion="on"] .dev-motion[data-active] .dev-chart__progress i{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.dev-motion .dev-chart__reveal,.dev-motion .dev-chart__event,.dev-motion .dev-chart__progress i{animation:none!important}}