@font-face {
  font-family:'Sesimi Display';
  src:url('assets/sesimi-rebond.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Rebond;
  src:url('assets/rebond-regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Rebond;
  src:url('assets/rebond-medium.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap
}

@font-face {
  font-family:Rebond;
  src:url('assets/rebond-semibold.woff2') format('woff2');
  font-style:normal;
  font-weight:600;
  font-display:swap
}

:root {
  --forest:#03292d;
  --lime:#d1ff3b;
  --white:#fff;
  --paper:#f7f8f4;
  --muted:#53696b;
  --line:#cad3d3;
  --dark-line:#3c5a5d;
  --dim:#b3c4c4;
  --pad:clamp(22px,3.6vw,64px);
  --ease:cubic-bezier(.22,.68,0,1.02);
  font-family:Rebond,Helvetica,Arial,sans-serif;
  font-synthesis:none;
  color:var(--forest);
  background:var(--white);
  scroll-behavior:smooth
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,a {
  -webkit-tap-highlight-color:transparent
}

button,input {
  font:inherit
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button {
  border:0;
  border-radius:0;
  color:inherit;
  background:none
}

a {
  color:inherit;
  text-decoration:none
}

button:disabled {
  cursor:default;
  opacity:.35
}

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}

button:focus:not(:focus-visible) {
  outline:none
}

::selection {
  background:var(--lime);
  color:var(--forest)
}

[hidden] {
  display:none!important
}

h1,h2,h3,p {
  margin:0
}

h1,h2 {
  font-family:'Sesimi Display',Rebond,Helvetica,sans-serif;
  font-weight:400;
  font-variation-settings:'simi' 0
}

em {
  font-style:normal
}

i {
  font-style:normal
}

img {
  max-width:100%;
  display:block
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip {
  position:absolute;
  left:20px;
  top:-80px;
  padding:14px;
  background:var(--lime);
  z-index:30
}

.skip:focus {
  top:10px
}

.site-header {
  height:104px;
  display:flex;
  align-items:center;
  gap:40px;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line)
}

.wordmark {
  flex-shrink:0;
  display:inline-block
}

.wordmark img {
  width:112px;
  height:auto
}

.header-caption {
  font-size:12px;
  line-height:1.45;
  font-weight:500
}

.header-caption span {
  color:var(--muted);
  font-weight:400
}

.site-header nav {
  margin-left:auto;
  display:flex;
  gap:34px;
  font-size:14px;
  font-weight:500
}

.site-header nav a {
  padding:12px 0;
  border-bottom:1px solid transparent
}

.site-header nav a:hover {
  border-color:currentColor
}

.motion-toggle {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 0;
  font-size:12px;
  min-width:92px
}

.motion-icon {
  border:1px solid var(--line);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  font-size:13px
}

.motion-toggle:hover .motion-icon {
  background:var(--lime);
  border-color:var(--lime)
}

.hero {
  padding:42px var(--pad) 0;
  overflow:hidden
}

.hero-overline,.section-meta {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:500;
  line-height:1.5
}

.hero-overline {
  margin-bottom:30px
}

.hero-composition {
  display:grid;
  grid-template-columns:minmax(0,1fr) 27%;
  gap:28px;
  align-items:stretch
}

.hero h1 {
  font-size:clamp(90px,12.4vw,200px);
  line-height:.99;
  letter-spacing:-.047em;
  padding-bottom:.06em
}

.hero-line {
  display:block;
  white-space:nowrap;
  animation:typeEnter 1s var(--ease) both
}

.hero-line:nth-last-child(1) {
  animation-delay:.13s
}

.kinetic-type {
  --rest-tracking:-.047em;
  display:inline-block;
  letter-spacing:var(--rest-tracking);
  font-variation-settings:'simi' 0;
  animation:energise 7s var(--ease) 1.4s 1
}

.hero-art {
  position:relative;
  overflow:hidden;
  background:var(--forest);
  margin:10px 0 12px;
  animation:maskEnter 1.1s var(--ease) both
}

.hero-art img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:62% 50%
}

.hero-art span {
  position:absolute;
  top:0;
  left:0;
  padding:18px 20px 22px;
  font-size:11px;
  letter-spacing:.07em;
  line-height:1.5;
  color:var(--lime);
  background:var(--forest);
  width:100%;
  max-width:120px
}

.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin:39px 0 48px
}

.hero-bottom p {
  font-size:18px;
  line-height:1.5;
  max-width:510px
}

.text-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  border-bottom:1px solid currentColor;
  padding:10px 0 13px;
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  text-align:left
}

.text-link span {
  font-size:24px;
  transition:transform .25s
}

.text-link:hover span {
  transform:translateX(5px)
}

.hero-bottom .text-link {
  min-width:300px
}

.in-focus {
  display:grid;
  grid-template-columns:110px repeat(3,1fr);
  border-top:1px solid var(--line);
  align-items:stretch;
  padding:0 0 28px
}

.focus-label {
  font-size:11px;
  letter-spacing:.07em;
  padding-top:26px
}

.in-focus button {
  text-align:left;
  padding:24px 25px;
  position:relative;
  transition:background .3s
}

.in-focus button+button {
  border-left:1px solid var(--line)
}

.in-focus button:hover {
  background:var(--paper)
}

.in-focus button>span {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  margin-bottom:13px
}

.in-focus small {
  font-size:11px;
  color:var(--muted)
}

.in-focus strong {
  font-weight:500;
  font-size:22px;
  letter-spacing:-.025em;
  display:flex;
  gap:20px;
  justify-content:space-between
}

.in-focus i {
  font-size:20px
}

.roadmap-section {
  padding:56px var(--pad) 38px;
  background:var(--forest);
  color:white;
  scroll-margin-top:0
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin:36px 0 48px
}

.section-heading h2 {
  font-size:clamp(48px,6.2vw,94px);
  letter-spacing:-.038em;
  line-height:1.02
}

.section-heading h2 em {
  color:var(--lime)
}

.section-heading>p {
  font-size:17px;
  line-height:1.5;
  padding-bottom:4px;
  max-width:390px;
  color:#d4dfdf
}

.product-selector {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line)
}

.product-selector button {
  padding:20px 17px 21px;
  text-align:left;
  min-width:0;
  transition:background .2s,color .2s;
  position:relative;
  border-right:1px solid var(--dark-line)
}

.product-selector button:first-child {
  border-left:1px solid var(--dark-line)
}

.product-selector button>span {
  font-size:11px;
  color:var(--dim);
  display:block;
  margin-bottom:18px
}

.product-selector strong {
  display:block;
  font-size:clamp(21px,2.3vw,32px);
  font-weight:500;
  letter-spacing:-.03em;
  margin-bottom:7px
}

.product-selector small {
  display:block;
  font-size:12px;
  line-height:1.35;
  color:var(--dim)
}

.product-selector button[aria-pressed=true] {
  background:var(--lime);
  color:var(--forest);
  border-color:var(--lime)
}

.product-selector button[aria-pressed=true] span,.product-selector button[aria-pressed=true] small {
  color:var(--forest)
}

.product-selector button:hover:not([aria-pressed=true]) {
  background:#143b3e
}

.explorer-controls {
  margin-top:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--dark-line)
}

.horizons {
  display:flex;
  gap:30px
}

.horizons button {
  padding:15px 0 18px;
  font-size:16px;
  position:relative;
  white-space:nowrap;
  color:var(--dim)
}

.horizons button[aria-pressed=true] {
  color:var(--lime)
}

.horizons button[aria-pressed=true]:after {
  content:'';
  height:3px;
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  background:var(--lime)
}

.horizons button>span {
  font-size:11px;
  vertical-align:super;
  margin-left:6px;
  color:var(--dim)
}

.view-toggle {
  display:flex;
  gap:7px
}

.view-toggle button {
  font-size:12px;
  padding:10px 13px;
  border:1px solid transparent;
  color:var(--dim);
  white-space:nowrap
}

.view-toggle button[aria-pressed=true] {
  border-color:var(--dark-line);
  color:white
}

.view-toggle button:hover {
  color:var(--lime)
}

.explorer-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:23px 0 30px;
  min-height:90px
}

.explorer-caption>p {
  font-size:14px;
  line-height:1.45;
  max-width:650px;
  color:var(--dim)
}

.search {
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  border-bottom:1px solid var(--dark-line);
  padding:4px 0 8px
}

.search span {
  font-size:27px;
  line-height:1
}

.search input {
  width:180px;
  background:none;
  border:0;
  border-radius:0;
  color:white;
  font-size:14px;
  padding:4px
}

.search input::placeholder {
  color:var(--dim);
  opacity:1
}

.search input:focus {
  outline:none
}

.search:focus-within {
  border-bottom-color:var(--lime)
}

.product-row {
  display:grid;
  grid-template-columns:19% 1fr;
  border-top:1px solid var(--dark-line);
  padding:26px 0 30px;
  gap:25px
}

.row-heading {
  padding:10px 20px 0 0
}

.row-heading>span {
  font-size:11px;
  color:var(--dim);
  margin-bottom:12px;
  display:block
}

.row-heading h3 {
  font-size:33px;
  font-weight:500;
  letter-spacing:-.035em;
  margin-bottom:10px
}

.row-heading p {
  font-size:14px;
  line-height:1.45;
  max-width:170px;
  color:var(--dim)
}

.row-items {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 30px
}

.feature-card {
  text-align:left;
  padding:10px 14px 20px 0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:color .2s;
  min-height:180px
}

.feature-card:nth-child(n+3) {
  border-top:1px solid var(--dark-line);
  padding-top:23px
}

.card-meta {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:11px;
  line-height:1.5;
  margin-bottom:18px;
  color:var(--dim);
  flex-wrap:wrap
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap
}

.badge:before {
  content:'';
  width:6px;
  height:6px;
  border:1px solid currentColor;
  display:block
}

.badge[data-stage=progress]:before {
  background:currentColor
}

.badge[data-stage=available]:before {
  background:currentColor;
  border-radius:50%
}

.feature-card h4 {
  font-size:27px;
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.025em;
  margin:0 0 12px;
  padding-right:28px
}

.feature-card>p {
  font-size:15px;
  line-height:1.5;
  color:var(--dim);
  max-width:390px
}

.feature-card .card-arrow {
  position:absolute;
  top:50px;
  right:0;
  font-size:23px;
  color:var(--lime);
  transition:transform .25s
}

.feature-card:nth-child(n+3) .card-arrow {
  top:64px
}

.feature-card:hover h4 {
  color:var(--lime)
}

.feature-card:hover .card-arrow {
  transform:translateX(4px)
}

.feature-card:focus-visible {
  outline-offset:4px
}

.empty {
  padding:60px 0 80px;
  border-top:1px solid var(--dark-line)
}

.empty h3 {
  font-size:32px;
  font-weight:400;
  margin-bottom:12px
}

.empty p {
  color:var(--dim);
  font-size:17px;
  line-height:1.5
}

.empty button {
  margin-top:25px;
  border-bottom:1px solid currentColor;
  padding:8px 0;
  font-size:16px
}

.roadmap-footer {
  border-top:1px solid var(--dark-line);
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px;
  padding-top:21px;
  min-height:54px;
  color:var(--dim)
}

.roadmap-footer button {
  padding:8px 0
}

.roadmap-footer button:last-child {
  margin-left:auto;
  color:white
}

.availability-note {
  font-size:12px;
  line-height:1.5;
  color:var(--dim);
  margin-top:12px
}

#map-panel {
  border:1px solid var(--dark-line);
  margin-bottom:20px
}

.map-intro {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:20px 24px
}

.map-intro p {
  font-size:18px;
  font-weight:500
}

.map-intro span {
  font-size:12px;
  color:var(--dim)
}

.chapters {
  display:flex;
  border-top:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line);
  gap:25px;
  padding:0 24px;
  overflow-x:auto
}

.chapters button {
  padding:17px 0;
  font-size:11px;
  white-space:nowrap;
  color:var(--dim);
  border-bottom:2px solid transparent
}

.chapters button span {
  font-size:13px;
  margin-left:7px
}

.chapters button[aria-pressed=true] {
  color:var(--lime);
  border-color:var(--lime)
}

#map-viewport {
  height:730px;
  position:relative;
  overflow:clip;
  touch-action:pan-y;
  cursor:grab
}

#map-viewport.dragging {
  cursor:grabbing;
  touch-action:none
}

#world {
  position:absolute;
  left:0;
  top:0;
  height:730px;
  transform-origin:0 0;
  will-change:transform
}

#world.smooth {
  transition:transform .65s var(--ease)
}

#connections {
  position:absolute;
  left:0;
  top:0;
  height:730px;
  overflow:visible
}

#connections .trail {
  fill:none;
  stroke-width:1;
  opacity:.4
}

#connections .relationship {
  fill:none;
  stroke:var(--lime);
  stroke-width:2;
  opacity:.85
}

#connections .trail.dim {
  opacity:.08
}

.era-label {
  position:absolute;
  top:22px
}

.era-label strong {
  display:block;
  font-size:24px;
  font-weight:500;
  letter-spacing:-.02em
}

.era-label span {
  display:block;
  font-size:11px;
  color:var(--dim);
  margin-top:7px
}

.lane-label {
  position:absolute;
  left:22px;
  font-size:13px;
  font-weight:500;
  padding-right:20px;
  color:var(--dim)
}

.node {
  position:absolute;
  width:210px;
  text-align:left;
  padding:12px 16px 16px 22px;
  min-height:92px;
  background:var(--forest);
  transition:opacity .2s,color .2s;
  border-left:1px solid var(--path)
}

.node:before {
  content:'';
  width:7px;
  height:7px;
  background:var(--path);
  position:absolute;
  left:-4px;
  top:16px
}

.node[data-stage=ahead]:before {
  background:var(--forest);
  border:1px solid var(--path)
}

.node strong {
  display:block;
  font-size:21px;
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:500;
  margin-bottom:10px
}

.node small {
  display:block;
  font-size:12px;
  color:var(--dim)
}

.node.dim {
  opacity:.15;
  pointer-events:none
}

.node:hover strong,.node.active strong {
  color:var(--lime)
}

.node.active {
  border-left:2px solid var(--lime)
}

.node:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:5px
}

.map-navigation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--dark-line);
  gap:25px;
  padding:12px 20px
}

.map-navigation button {
  font-size:26px;
  padding:4px 10px
}

.map-navigation span {
  font-size:12px;
  line-height:1.45;
  color:var(--dim)
}

.guide-feature {
  background:var(--lime);
  padding:55px var(--pad) 45px
}

.beta-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--forest);
  margin:0 9px 2px
}

.guide-heading {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:70px;
  align-items:end;
  margin:42px 0 55px
}

.guide-heading h2 {
  font-size:clamp(46px,6vw,94px);
  letter-spacing:-.04em;
  line-height:1.02
}

.guide-heading>div>p {
  font-size:18px;
  line-height:1.5;
  max-width:420px
}

.guide-heading .text-link {
  margin-top:22px;
  font-size:14px
}

.guide-process {
  border-top:1px solid #678626;
  border-bottom:1px solid #678626
}

.process-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px
}

.process-steps button {
  text-align:left;
  padding:26px 22px 30px;
  position:relative;
  min-height:137px;
  transition:background .35s,color .35s;
  border-right:1px solid #678626
}

.process-steps button:last-child {
  border-right:0
}

.process-steps button>span {
  display:block;
  font-size:11px;
  letter-spacing:.04em;
  margin-bottom:20px
}

.process-steps strong {
  font-size:28px;
  font-weight:500;
  letter-spacing:-.03em
}

.process-steps i {
  position:absolute;
  right:22px;
  top:70px;
  font-size:25px
}

.process-steps button[aria-pressed=true] {
  background:var(--forest);
  color:var(--lime)
}

.process-steps button:hover:not([aria-pressed=true]) {
  background:#c4ef37
}

.process-detail {
  border-top:1px solid #678626;
  display:grid;
  grid-template-columns:1fr 1.5fr .5fr;
  padding:30px 22px 34px;
  gap:40px;
  align-items:start;
  min-height:150px
}

.process-detail>span:first-child {
  font-size:11px;
  letter-spacing:.04em;
  line-height:1.4
}

.process-detail p {
  font-size:20px;
  line-height:1.4;
  max-width:600px
}

.process-count {
  text-align:right;
  font-size:15px;
  font-variant-numeric:tabular-nums
}

.direction-note {
  margin-top:30px;
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  gap:40px;
  align-items:start
}

.direction-note>span {
  font-size:11px;
  letter-spacing:.04em;
  line-height:1.4
}

.direction-note p {
  font-size:16px;
  line-height:1.5;
  max-width:540px
}

.direction-note button {
  display:flex;
  gap:20px;
  justify-content:space-between;
  text-align:left;
  font-size:13px;
  line-height:1.5;
  border-bottom:1px solid currentColor;
  padding:0 0 10px
}

.history-section {
  padding:55px var(--pad) 75px
}

.history-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  margin-top:48px
}

.history-intro h2 {
  font-size:clamp(50px,6vw,90px);
  line-height:1.02;
  letter-spacing:-.04em
}

.history-intro>p {
  margin-top:30px;
  font-size:18px;
  line-height:1.5;
  max-width:380px
}

.history-intro>.history-note {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  max-width:300px;
  margin-top:25px
}

.timeline {
  border-top:1px solid var(--line)
}

.timeline>button {
  display:flex;
  align-items:flex-start;
  text-align:left;
  width:100%;
  gap:30px;
  border-bottom:1px solid var(--line);
  padding:25px 0;
  transition:background .2s
}

.timeline time {
  font-size:13px;
  padding-top:5px;
  font-variant-numeric:tabular-nums
}

.timeline h3 {
  font-size:26px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.025em;
  margin-bottom:10px
}

.timeline p {
  font-size:14px;
  color:var(--muted)
}

.timeline>button>span {
  margin-left:auto;
  font-size:22px
}

.timeline>button:hover {
  background:var(--paper)
}

.closing {
  background:var(--forest);
  color:white;
  padding:55px var(--pad) 28px
}

.closing-main {
  position:relative;
  padding:0 0 55px
}

.closing-main>span {
  font-size:11px;
  letter-spacing:.08em;
  display:block;
  margin-bottom:30px
}

.closing h2 {
  font-size:clamp(50px,7.8vw,120px);
  line-height:1.02;
  letter-spacing:-.04em
}

.closing h2 em {
  color:var(--lime)
}

.closing .text-link {
  position:absolute;
  right:0;
  bottom:60px;
  width:240px;
  color:var(--lime)
}

.closing-footer {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
  padding-top:30px;
  border-top:1px solid var(--dark-line);
  color:var(--dim)
}

.closing-footer .wordmark {
  background:var(--lime);
  mask:url('assets/sesimi.svg') left center/112px auto no-repeat;
  -webkit-mask:url('assets/sesimi.svg') left center/112px auto no-repeat;
  width:112px;
  height:30px;
  margin-right:auto
}

.closing-footer .wordmark img {
  opacity:0
}

.closing-footer a:hover {
  color:var(--lime)
}

dialog {
  border:0;
  color:var(--forest);
  background:white;
  padding:0
}

dialog::backdrop {
  background:rgba(0,20,23,.6);
  backdrop-filter:blur(3px)
}

#detail {
  position:fixed;
  left:auto;
  right:0;
  top:0;
  bottom:0;
  margin:0;
  width:min(600px,100%);
  max-width:100%;
  height:100dvh;
  max-height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain
}

#detail[open] {
  animation:panelEnter .4s var(--ease)
}

.detail-inner {
  padding:25px 38px 40px
}

.detail-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:34px
}

.detail-top>span {
  font-size:12px;
  line-height:1.4;
  max-width:80%
}

.detail-top button,.close-about {
  font-size:31px;
  line-height:1;
  padding:5px 8px
}

.detail-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--lime);
  padding:7px 10px;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:23px
}

.detail-status:before {
  content:'';
  width:5px;
  height:5px;
  background:currentColor
}

.detail-inner h2 {
  font-size:52px;
  letter-spacing:-.035em;
  line-height:1.04;
  margin-bottom:18px
}

.detail-headline {
  font-size:20px;
  line-height:1.4;
  color:var(--muted);
  margin-bottom:34px
}

.detail-section {
  margin-bottom:28px
}

.detail-section h3 {
  font-size:11px;
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.07em;
  margin-bottom:12px
}

.detail-section p {
  font-size:17px;
  line-height:1.55
}

.detail-section.availability {
  background:var(--paper);
  padding:20px 22px;
  margin-left:-22px;
  margin-right:-22px;
  border-left:2px solid var(--forest)
}

#related-nodes button {
  display:flex;
  justify-content:space-between;
  gap:24px;
  text-align:left;
  font-size:16px;
  line-height:1.4;
  width:100%;
  border-top:1px solid var(--line);
  padding:15px 0
}

#related-nodes button:hover {
  color:#4a6300
}

#release-link,#detail-contact {
  display:block;
  width:fit-content;
  border-bottom:1px solid currentColor;
  padding:10px 0;
  margin-top:8px;
  font-size:14px;
  font-weight:500
}

#about {
  position:fixed;
  width:600px;
  max-width:calc(100% - 32px);
  max-height:90dvh;
  padding:40px;
  overflow:auto
}

.close-about {
  position:absolute;
  right:22px;
  top:20px
}

.eyebrow {
  font-size:11px;
  letter-spacing:.08em
}

#about h2 {
  font-size:52px;
  line-height:1.04;
  letter-spacing:-.035em;
  margin:28px 0
}

#about p,#about dd {
  font-size:16px;
  line-height:1.5;
  margin:0 0 20px
}

#about dt {
  font-size:17px;
  font-weight:500;
  margin:25px 0 7px
}

#about dd {
  margin-left:0;
  color:var(--muted)
}

.noscript {
  padding:30px;
  background:var(--lime)
}

@keyframes typeEnter {
  from {
    opacity:0;
    transform:translateX(-25px)
  }

  to {
    opacity:1;
    transform:translateX(0)
  }

}

@keyframes maskEnter {
  from {
    clip-path:inset(0 100% 0 0)
  }

  to {
    clip-path:inset(0 0 0 0)
  }

}

/* Open tracking as the custom glyphs expand, then return to the original set. */
@keyframes energise {
  0%,100% {
    font-variation-settings:'simi' 0;
    letter-spacing:var(--rest-tracking);
  }

  40%,60% {
    font-variation-settings:'simi' 720;
    letter-spacing:-.02em;
  }
}
@media(max-width:520px) {
  .kinetic-type {
    --rest-tracking:-.045em;
  }
}

@keyframes panelEnter {
  from {
    transform:translateX(100%)
  }

  to {
    transform:translateX(0)
  }

}

.motion-paused .hero-line,.motion-paused .hero-art,.motion-paused .kinetic-type {
  animation:none!important
}

.motion-paused * {
  scroll-behavior:auto!important
}

.motion-paused #detail[open] {
  animation:none
}

.motion-paused #world.smooth {
  transition:none
}

@media(min-width:1600px) {
  .hero,.roadmap-section,.guide-feature,.history-section,.closing {
    padding-left:max(var(--pad),calc((100vw - 1472px)/2));
    padding-right:max(var(--pad),calc((100vw - 1472px)/2))
  }

  .hero h1 {
    font-size:190px
  }

}

@media(max-width:1100px) {
  .site-header {
    gap:25px
  }

  .site-header nav {
    gap:22px
  }

  .header-caption span {
    display:none
  }

  .hero h1 {
    font-size:12vw
  }

  .hero-composition {
    grid-template-columns:minmax(0,1fr) 25%;
    gap:20px
  }

  .hero-art {
    margin-top:4px
  }

  .in-focus {
    grid-template-columns:80px repeat(3,1fr)
  }

  .in-focus button {
    padding-left:17px;
    padding-right:17px
  }

  .in-focus strong {
    font-size:20px
  }

  .in-focus button>span {
    display:block
  }

  .in-focus small {
    display:block;
    margin-top:5px
  }

  .product-selector button {
    padding-left:12px;
    padding-right:12px
  }

  .product-selector strong {
    font-size:24px
  }

  .product-selector small {
    font-size:11px
  }

  .horizons {
    gap:20px
  }

  .horizons button {
    font-size:14px
  }

  .view-toggle button {
    font-size:11px;
    padding:9px
  }

  .section-heading {
    gap:30px
  }

  .section-heading>p {
    font-size:16px
  }

  .feature-card h4 {
    font-size:24px
  }

  .guide-heading {
    gap:40px
  }

  .guide-heading>div>p {
    font-size:16px
  }

  .process-steps strong {
    font-size:24px
  }

  .process-steps i {
    right:14px
  }

  .history-layout {
    gap:50px
  }

  .timeline {
    min-width:0
  }

  .timeline h3 {
    font-size:23px
  }

  .closing .text-link {
    width:190px
  }

  .closing h2 {
    font-size:7.3vw
  }

}

@media(max-width:800px) {
  .site-header {
    height:88px;
    gap:25px
  }

  .header-caption {
    display:none
  }

  .site-header nav {
    gap:20px;
    font-size:13px
  }

  .site-header nav a:last-child {
    display:none
  }

  .motion-toggle {
    min-width:28px
  }

  .motion-label {
    display:none
  }

  .hero {
    padding-top:30px
  }

  .hero-overline {
    font-size:10px;
    margin-bottom:30px
  }

  .hero-overline span:last-child {
    max-width:150px;
    text-align:right
  }

  .hero h1 {
    font-size:12.8vw
  }

  .hero-composition {
    grid-template-columns:minmax(0,1fr) 20%;
    gap:10px
  }

  .hero-art span {
    font-size:8px;
    padding:10px;
    max-width:85px
  }

  .hero-bottom p {
    font-size:16px
  }

  .hero-bottom .text-link {
    min-width:220px;
    font-size:14px
  }

  .in-focus {
    grid-template-columns:repeat(3,1fr);
    padding-bottom:20px
  }

  .focus-label {
    grid-column:1/-1;
    padding:18px 0 0
  }

  .in-focus button {
    padding:20px 15px 18px 0
  }

  .in-focus button+button {
    padding-left:15px;
    border-left:0
  }

  .in-focus strong {
    font-size:18px;
    gap:10px
  }

  .in-focus strong i {
    display:none
  }

  .section-heading {
    display:block;
    margin-bottom:35px
  }

  .section-heading h2 {
    font-size:64px
  }

  .section-heading>p {
    margin-top:25px;
    font-size:16px;
    max-width:500px
  }

  .product-selector {
    grid-template-columns:repeat(3,1fr)
  }

  .product-selector button {
    border-bottom:1px solid var(--dark-line);
    padding:14px 16px
  }

  .product-selector button:nth-child(3n+1) {
    border-left:1px solid var(--dark-line)
  }

  .product-selector button>span {
    display:none
  }

  .product-selector strong {
    font-size:25px
  }

  .product-selector small {
    font-size:12px
  }

  .explorer-controls {
    flex-wrap:wrap;
    gap:14px;
    margin-top:23px;
    padding-bottom:12px
  }

  .horizons {
    width:100%;
    justify-content:space-between;
    gap:10px
  }

  .horizons button {
    font-size:15px
  }

  .view-toggle {
    margin-left:auto
  }

  .explorer-caption {
    padding:20px 0 25px;
    align-items:flex-start
  }

  .explorer-caption>p {
    max-width:50%;
    font-size:12px
  }

  .search input {
    width:155px
  }

  .product-row {
    grid-template-columns:150px 1fr;
    gap:25px
  }

  .row-items {
    grid-template-columns:1fr
  }

  .row-heading h3 {
    font-size:28px
  }

  .row-heading p {
    font-size:13px
  }

  .feature-card {
    min-height:145px;
    padding-top:10px
  }

  .feature-card:nth-child(n+2) {
    border-top:1px solid var(--dark-line);
    padding-top:22px
  }

  .feature-card:nth-child(n+2) .card-arrow {
    top:65px
  }

  .card-meta {
    margin-bottom:15px
  }

  .feature-card h4 {
    font-size:25px
  }

  .guide-heading {
    display:block
  }

  .guide-heading h2 {
    font-size:64px
  }

  .guide-heading>div {
    max-width:490px;
    margin-top:28px
  }

  .guide-heading .text-link {
    max-width:330px
  }

  .guide-heading>div>p {
    font-size:18px
  }

  .process-steps {
    grid-template-columns:1fr
  }

  .process-steps button {
    padding:22px;
    border-right:0;
    border-bottom:1px solid #678626;
    min-height:105px
  }

  .process-steps button>span {
    margin-bottom:12px
  }

  .process-steps i {
    top:50px;
    right:24px
  }

  .process-detail {
    grid-template-columns:1fr auto;
    gap:20px;
    padding:25px 22px
  }

  .process-detail>span:first-child {
    grid-column:1/-1
  }

  .process-detail p {
    font-size:20px
  }

  .direction-note {
    grid-template-columns:1fr;
    gap:20px
  }

  .direction-note button {
    max-width:300px
  }

  .history-layout {
    grid-template-columns:1fr;
    gap:40px
  }

  .history-intro h2 {
    font-size:68px
  }

  .history-intro h2 br:nth-child(2) {
    display:none
  }

  .history-intro>p {
    max-width:520px
  }

  .history-intro>.history-note {
    max-width:400px
  }

  .timeline>button {
    padding:22px 0
  }

  .closing h2 {
    font-size:9vw
  }

  .closing .text-link {
    position:static;
    margin-top:35px
  }

  .closing-footer {
    gap:22px
  }

  .map-intro {
    display:block
  }

  .map-intro span {
    display:block;
    margin-top:8px
  }

  .chapters {
    gap:20px
  }

  .map-navigation span {
    font-size:11px
  }

  .section-meta {
    font-size:10px
  }

}

@media(max-width:520px) {
  .site-header {
    height:80px;
    gap:18px
  }

  .wordmark img {
    width:98px
  }

  .site-header nav {
    margin-left:auto;
    gap:16px
  }

  .site-header nav a:nth-child(2) {
    display:none
  }

  .hero-overline {
    font-size:9px;
    margin-bottom:25px
  }

  .hero-composition {
    display:block;
    position:relative
  }

  .hero h1 {
    font-size:17.5vw;
    line-height:1.02;
    letter-spacing:-.045em;
    position:relative;
    z-index:1
  }

  .hero-art {
    height:95px;
    margin:24px 0 0;
    width:100%
  }

  .hero-art img {
    object-position:50% 50%;
    width:100%;
    height:100%
  }

  .hero-art span {
    font-size:9px;
    max-width:100px;
    height:100%;
    padding:17px
  }

  .hero-bottom {
    display:block;
    margin:25px 0 30px
  }

  .hero-bottom p {
    font-size:16px;
    line-height:1.45
  }

  .hero-bottom .text-link {
    margin-top:22px;
    width:100%;
    font-size:15px
  }

  .desktop {
    display:none
  }

  .in-focus {
    display:block;
    padding-bottom:22px
  }

  .focus-label {
    display:block;
    padding:18px 0 8px
  }

  .in-focus button {
    padding:15px 0;
    display:block;
    width:100%;
    border-bottom:1px solid var(--line);
    border-left:0
  }

  .in-focus button+button {
    padding-left:0
  }

  .in-focus button>span {
    display:flex;
    margin-bottom:7px;
    font-size:11px
  }

  .in-focus small {
    margin:0;
    font-size:11px
  }

  .in-focus strong {
    font-size:21px
  }

  .in-focus strong i {
    display:block
  }

  .section-meta {
    font-size:9px;
    gap:20px
  }

  .section-meta>span:last-child {
    text-align:right;
    max-width:160px
  }

  .roadmap-section,.guide-feature,.history-section,.closing {
    padding-top:35px
  }

  .section-heading {
    margin-top:30px
  }

  .section-heading h2,.guide-heading h2 {
    font-size:clamp(42px,11.6vw,60px)
  }

  .section-heading>p {
    font-size:15px;
    line-height:1.5
  }

  .product-selector button {
    padding:13px 10px;
    min-height:90px
  }

  .product-selector strong {
    font-size:23px;
    line-height:1.1;
    margin-bottom:8px
  }

  .product-selector small {
    font-size:10px;
    line-height:1.3
  }

  .horizons {
    gap:10px
  }

  .horizons button {
    font-size:13px
  }

  .horizons button>span {
    font-size:9px;
    margin-left:3px
  }

  .view-toggle {
    margin-left:0
  }

  .view-toggle button {
    font-size:12px;
    padding:9px 13px
  }

  .explorer-caption {
    display:block
  }

  .explorer-caption>p {
    max-width:100%;
    font-size:13px;
    margin-bottom:18px
  }

  .search {
    width:100%;
    padding-bottom:10px
  }

  .search input {
    width:100%;
    font-size:15px
  }

  .product-row {
    grid-template-columns:1fr;
    padding:24px 0 18px;
    gap:22px
  }

  .row-heading {
    padding:0;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:10px;
    align-items:center
  }

  .row-heading>span {
    display:none
  }

  .row-heading h3 {
    font-size:30px;
    margin:0
  }

  .row-heading p {
    font-size:13px;
    max-width:none
  }

  .row-items {
    gap:8px
  }

  .feature-card {
    padding:5px 15px 19px 0;
    min-height:155px
  }

  .feature-card h4 {
    font-size:26px;
    margin-bottom:9px
  }

  .feature-card>p {
    font-size:15px
  }

  .feature-card .card-arrow {
    top:44px
  }

  .card-meta {
    font-size:11px;
    gap:12px;
    margin-bottom:16px
  }

  .roadmap-footer {
    gap:16px;
    flex-wrap:wrap;
    font-size:11px;
    padding-top:14px
  }

  .roadmap-footer button:last-child {
    margin-left:auto
  }

  .availability-note {
    font-size:11px;
    line-height:1.5
  }

  .guide-heading {
    margin-top:30px;
    margin-bottom:35px
  }

  .guide-heading>div>p {
    font-size:17px
  }

  .guide-heading .text-link {
    font-size:14px
  }

  .process-detail {
    padding:24px 18px;
    gap:16px
  }

  .process-detail p {
    font-size:18px
  }

  .process-count {
    font-size:12px
  }

  .direction-note p {
    font-size:16px
  }

  .history-intro h2 {
    font-size:clamp(47px,13vw,65px)
  }

  .history-intro>p {
    font-size:17px
  }

  .timeline>button {
    gap:20px
  }

  .timeline time {
    font-size:12px
  }

  .timeline h3 {
    font-size:22px
  }

  .timeline p {
    font-size:13px
  }

  .history-section {
    padding-bottom:40px
  }

  .closing h2 {
    font-size:12vw
  }

  .closing-main>span {
    font-size:10px
  }

  .closing-main {
    padding-bottom:35px
  }

  .closing-footer {
    flex-wrap:wrap;
    gap:20px;
    font-size:11px
  }

  .closing-footer .wordmark {
    flex-basis:100%;
    height:28px;
    margin-bottom:5px
  }

  .detail-inner {
    padding:20px 25px 35px
  }

  .detail-top {
    margin-bottom:25px
  }

  .detail-inner h2 {
    font-size:43px
  }

  .detail-headline {
    font-size:18px;
    margin-bottom:26px
  }

  .detail-section p {
    font-size:16px
  }

  .detail-section.availability {
    margin-left:-10px;
    margin-right:-10px;
    padding:18px 12px
  }

  .detail-status {
    font-size:11px
  }

  .detail-top>span {
    font-size:11px
  }

  #about {
    padding:30px 25px
  }

  #about h2 {
    font-size:43px
  }

  .map-navigation {
    padding:10px
  }

  .map-navigation span {
    font-size:10px
  }

  .map-intro {
    padding:18px
  }

  .chapters {
    padding:0 18px
  }

  .chapters button span {
    font-size:12px
  }

  #map-viewport {
    height:730px
  }

}

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

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .hero-line {
    opacity:1;
    transform:none
  }

}

/* Final editorial reading-size and motion refinements. */
.card-meta,.badge {
  font-size:12px
}

.in-focus small {
  font-size:12px
}

.hero-line {
  animation-delay:.12s
}

.hero-line:nth-last-child(1) {
  animation-delay:.25s
}

.row-heading>span {
  font-size:11px
}

.section-heading {
  align-items:flex-end
}

.section-heading h2 {
  font-size:clamp(46px,5.3vw,82px)
}

#map-empty {
  position:absolute;
  top:45%;
  left:10%;
  right:10%;
  padding:30px;
  background:var(--forest);
  text-align:center;
  line-height:1.5;
  font-size:20px;
  border:1px solid var(--dark-line)
}

@media(max-width:800px) {
  .explorer-caption>p {
    font-size:14px
  }

  .section-heading h2 {
    font-size:clamp(44px,8vw,64px)
  }

}

@media(max-width:520px) {
  .product-selector small {
    font-size:12px
  }

  .product-selector button {
    min-height:102px
  }

  .in-focus small {
    font-size:12px
  }

  .card-meta,.badge {
    font-size:12px
  }

  .section-heading h2 {
    font-size:10.3vw
  }

  .explorer-caption>p {
    font-size:14px
  }

}

/* Edition 03 — editorial index, purposeful controls and reading detail. */
:root {
  --forest-surface:#123b3f;
  --reading-measure:62ch
}

html {
  scroll-padding-top:24px
}

body {
  font-kerning:normal
}

p {
  text-wrap:pretty
}

button,input {
  min-width:0
}

.motion-toggle {
  min-width:44px;
  min-height:44px
}

.hero-bottom p {
  max-width:530px
}

.in-focus button {
  min-width:0
}

.in-focus strong {
  line-height:1.2
}

.in-focus i {
  flex-shrink:0
}

.product-selector button {
  min-height:132px
}

.product-selector button:focus-visible {
  outline:2px solid currentColor;
  outline-offset:-6px;
  z-index:1
}

.product-selector button:hover:not([aria-pressed=true]) {
  background:var(--forest-surface)
}

.product-selector strong {
  line-height:1.1
}

.horizons button {
  min-height:54px
}

.horizons button:hover:not([aria-pressed=true]) {
  color:var(--white)
}

.horizons button>span {
  font-variant-numeric:tabular-nums
}

.view-toggle {
  gap:0;
  border:1px solid var(--dark-line)
}

.view-toggle button {
  min-height:44px;
  padding:11px 15px;
  border:0;
  font-size:13px
}

.view-toggle button[aria-pressed=true] {
  background:var(--white);
  color:var(--forest)
}

.view-toggle button:hover:not([aria-pressed=true]) {
  background:var(--forest-surface)
}

.explorer-caption {
  padding-bottom:20px
}

.search {
  min-height:44px;
  width:240px;
  gap:10px;
  padding:4px 0 7px
}

.search input {
  width:100%;
  min-width:0;
  flex:1;
  font-size:16px;
  line-height:1.5
}

.search:focus-within {
  outline:2px solid var(--lime);
  outline-offset:6px;
  border-color:transparent
}

.search span {
  flex-shrink:0
}

.filter-summary {
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  color:var(--dim);
  padding-bottom:19px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.filter-summary:empty {
  display:none
}

.row-heading {
  align-self:start
}

.row-heading h3 {
  line-height:1.15
}

.row-heading p {
  max-width:19ch
}

.feature-card {
  min-width:0;
  padding-bottom:24px
}

.feature-card h4 {
  line-height:1.18;
  text-wrap:balance
}

.feature-card>p {
  max-width:43ch;
  line-height:1.55
}

.card-meta {
  gap:8px 14px;
  line-height:1.5
}

.badge:before {
  width:7px;
  height:7px;
  flex-shrink:0
}

.badge[data-stage=progress]:before {
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)
}

.badge[data-stage=ahead]:before {
  background:transparent
}

.feature-card:focus-visible h4 {
  color:var(--lime)
}

.feature-card:focus-visible .card-arrow {
  transform:translateX(4px)
}

.roadmap-footer button {
  min-height:44px
}

.availability-note {
  max-width:var(--reading-measure);
  font-size:12px;
  line-height:1.6
}

.node[data-stage=available]:before {
  border-radius:50%
}

.node[data-stage=progress]:before {
  background:linear-gradient(90deg,var(--path) 50%,var(--forest) 50%);
  border:1px solid var(--path)
}

.map-navigation button {
  min-width:44px;
  min-height:44px
}

.map-navigation span {
  max-width:65ch;
  text-align:center
}

.direction-note {
  border-top:1px solid #678626;
  padding-top:28px
}

.direction-note button {
  min-height:44px;
  align-items:flex-start
}

.timeline time {
  flex:0 0 76px;
  font-size:28px;
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.035em;
  padding-top:0
}

.timeline>button>div {
  min-width:0
}

.timeline h3 {
  line-height:1.18
}

.timeline p {
  line-height:1.5
}

.timeline>button>span {
  flex-shrink:0;
  transition:transform .25s
}

.timeline>button:hover>span {
  transform:translate(3px,-3px)
}

.closing-footer>a:not(.wordmark) {
  min-height:44px;
  display:flex;
  align-items:center
}

.detail-inner {
  padding-top:0
}

.detail-top {
  position:sticky;
  top:0;
  padding-top:22px;
  background:var(--white);
  z-index:3
}

.detail-top button,.close-about {
  width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  flex-shrink:0
}

.detail-top button:hover,.close-about:hover {
  background:var(--paper)
}

.detail-inner h2 {
  text-wrap:balance
}

.detail-headline {
  max-width:38ch;
  line-height:1.45
}

.detail-actions {
  display:flex;
  align-items:center;
  gap:12px 16px;
  flex-wrap:wrap;
  margin:-14px 0 34px
}

#copy-feature-link {
  border:1px solid var(--line);
  min-height:44px;
  padding:11px 14px;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  text-align:left;
  transition:background .2s,color .2s,border-color .2s
}

#copy-feature-link:hover {
  background:var(--forest);
  color:var(--white);
  border-color:var(--forest)
}

#copy-link-status {
  font-size:12px;
  line-height:1.5;
  color:var(--muted)
}

.detail-section h3 {
  font-size:12px;
  line-height:1.4
}

.detail-section p {
  max-width:var(--reading-measure)
}

#related-nodes button {
  min-height:55px;
  align-items:center
}

#release-link,#detail-contact {
  min-height:44px;
  line-height:1.5
}

#about h2 {
  text-wrap:balance
}

#about p,#about dd {
  line-height:1.6
}

.motion-paused *, .motion-paused *:before, .motion-paused *:after {
  animation:none!important;
  transition:none!important
}

@media(min-width:801px) {
  .row-heading {
    position:sticky;
    top:24px
  }

}

@media(max-width:1100px) {
  .product-selector button {
    min-height:122px
  }

  .view-toggle button {
    font-size:12px;
    padding:10px 12px
  }

}

@media(max-width:800px) {
  .product-selector button {
    min-height:100px
  }

  .hero-bottom {
    gap:28px
  }

  .search {
    width:210px
  }

  .row-heading p {
    max-width:none
  }

  .timeline time {
    flex-basis:70px
  }

  .view-toggle {
    margin-left:0
  }

  .explorer-controls {
    gap:18px;
    padding-bottom:18px
  }

  .detail-inner {
    padding-top:0
  }

  .section-heading>p br {
    display:none
  }

}

@media(max-width:520px) {
  .hero-bottom p {
    max-width:34ch
  }

  .product-selector button {
    min-height:104px
  }

  .product-selector strong {
    font-size:22px
  }

  .product-selector small {
    font-size:12px;
    line-height:1.4
  }

  .horizons button {
    min-height:48px
  }

  .view-toggle {
    width:100%
  }

  .view-toggle button {
    flex:1;
    font-size:13px;
    padding:11px 10px
  }

  .search {
    width:100%
  }

  .search input {
    font-size:16px
  }

  .explorer-caption {
    padding-bottom:17px
  }

  .filter-summary {
    font-size:12px;
    padding-bottom:18px
  }

  .section-heading h2 {
    font-size:clamp(38px,10.3vw,54px)
  }

  .feature-card h4 {
    line-height:1.18
  }

  .row-heading p {
    max-width:none
  }

  .timeline time {
    font-size:23px;
    flex-basis:51px;
    padding-top:1px
  }

  .timeline>button {
    gap:17px
  }

  .timeline h3 {
    font-size:22px
  }

  .timeline>button>span {
    font-size:20px
  }

  .direction-note {
    padding-top:25px
  }

  .detail-inner {
    padding-top:0
  }

  .detail-top {
    padding-top:16px
  }

  .detail-actions {
    margin-bottom:30px
  }

  .closing-footer>a:not(.wordmark) {
    min-height:44px
  }

  .availability-note {
    font-size:12px
  }

  .roadmap-footer {
    column-gap:18px
  }

  .roadmap-footer button:last-child {
    margin-left:0
  }

}

@media(max-width:360px) {
  .horizons {
    gap:7px
  }

  .horizons button {
    font-size:12px
  }

  .horizons button>span {
    margin-left:2px
  }

  .product-selector strong {
    font-size:20px
  }

  .product-selector button {
    padding-left:9px;
    padding-right:9px
  }

  .product-selector small {
    font-size:11px
  }

  .timeline time {
    font-size:21px;
    flex-basis:44px
  }

  .timeline>button {
    gap:13px
  }

  .detail-inner h2 {
    font-size:39px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}
/* Narrow layouts keep the product language at its intended reading size. */
.closing-note {
  max-width:44ch;
  margin-top:28px;
  color:var(--dim);
  font-size:17px;
  line-height:1.5;
}
.timeline h3 {
  text-wrap:balance;
}
.detail-top>span,
.detail-status,
.map-navigation span {
  font-size:12px;
}
@media(min-width:521px) and (max-width:650px) {
  .hero-bottom {
    display:block;
  }
  .hero-bottom p {
    max-width:42ch;
  }
  .hero-bottom .text-link {
    width:100%;
    margin-top:24px;
  }
}
@media(max-width:800px) {
  .closing-note {
    font-size:16px;
    margin-top:24px;
  }
  .closing .text-link {
    margin-top:24px;
  }
}
@media(max-width:375px) {
  .product-selector {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .product-selector button {
    min-height:100px;
    padding:16px 12px;
    border-left:0;
  }
  .product-selector button:nth-child(odd) {
    border-left:1px solid var(--dark-line);
  }
  .product-selector button[aria-pressed=true] {
    border-color:var(--lime);
  }
  .product-selector strong {
    font-size:23px;
  }
  .product-selector small {
    font-size:12px;
  }
}
/* Related features retain their own availability context. */
.related-label {
  display:block;
  min-width:0;
}
.related-status {
  display:block;
  margin-top:5px;
  font-size:12px;
  font-weight:400;
  line-height:1.45;
  color:var(--muted);
}
.related-arrow {
  flex-shrink:0;
  font-size:20px;
  transition:transform .2s;
}
#related-nodes button:hover .related-arrow {
  transform:translate(3px,-3px);
}
/* Keep keyboard focus inside controls whose foreground/background invert. */
.view-toggle button:focus-visible,
.process-steps button:focus-visible,
#copy-feature-link:focus-visible {
  outline:2px solid currentColor;
  outline-offset:-5px;
}
/* The artwork is masked, while the link keeps an unclipped focus boundary. */
.closing-footer .wordmark {
  position:relative;
  background:none;
  mask:none;
  -webkit-mask:none;
  min-height:44px;
  display:flex;
  align-items:center;
}
.closing-footer .wordmark::before {
  content:'';
  position:absolute;
  top:50%;
  left:0;
  width:112px;
  height:30px;
  transform:translateY(-50%);
  background:var(--lime);
  mask:url('assets/sesimi.svg') left center/112px auto no-repeat;
  -webkit-mask:url('assets/sesimi.svg') left center/112px auto no-repeat;
  pointer-events:none;
}
/* Reading headings receive programmatic focus; controls keep visible rings. */
#detail-title:focus,
#about-title:focus {
  outline:none;
}

/* Print the current selection as a compact editorial handout. */
@page {
  size:A4;
  margin:14mm 15mm;
}
@media print {
  :root {
    color:var(--forest);
    background:white;
  }
  *, *::before, *::after {
    animation:none!important;
    transition:none!important;
  }
  body {
    background:white;
    overflow:visible!important;
  }
  .skip,
  .site-header nav,
  .motion-toggle,
  .hero,
  .guide-feature,
  .history-section,
  .closing,
  .noscript,
  dialog,
  #detail[open],
  #about[open],
  .roadmap-section .section-meta,
  .product-selector,
  .explorer-controls,
  .explorer-caption,
  #map-panel,
  .roadmap-footer {
    display:none!important;
  }
  dialog::backdrop {
    display:none;
    background:none;
  }
  .site-header {
    height:auto;
    padding:0 0 9mm;
    gap:18px;
    border:0;
  }
  .header-caption {
    display:block;
    font-size:10pt;
  }
  .site-header .wordmark img {
    width:105px;
  }
  .roadmap-section {
    color:var(--forest);
    background:white;
    padding:0;
  }
  .section-heading {
    display:block;
    margin:0 0 6mm;
  }
  .section-heading h2 {
    font-size:30pt;
    line-height:1.05;
  }
  .section-heading h2 em {
    color:var(--forest);
  }
  .section-heading>p {
    display:none;
  }
  .filter-summary {
    font-size:10pt;
    color:var(--forest);
    padding-bottom:5mm;
  }
  #overview,
  #overview[hidden] {
    display:block!important;
  }
  .product-row {
    grid-template-columns:30mm minmax(0,1fr);
    gap:8mm;
    padding:6mm 0 3mm;
    border-top:1px solid var(--line);
  }
  .row-heading {
    display:block;
    position:static;
    padding:0;
  }
  .row-heading>span {
    display:block;
    font-size:8pt;
    color:var(--forest);
    margin-bottom:3mm;
  }
  .row-heading h3 {
    font-size:18pt;
    margin-bottom:3mm;
  }
  .row-heading p {
    font-size:10pt;
    max-width:none;
    color:var(--forest);
  }
  .row-items {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5mm;
  }
  .feature-card {
    display:block;
    color:var(--forest);
    min-height:0;
    padding:0 0 4mm;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .feature-card:nth-child(n+2) {
    border:0;
    padding-top:0;
  }
  .feature-card:nth-child(n+3) {
    border-top:1px solid var(--line);
    padding-top:4mm;
  }
  .feature-card h4 {
    font-size:14pt;
    line-height:1.2;
    padding-right:0;
    margin-bottom:3mm;
  }
  .feature-card>p {
    font-size:10.5pt;
    line-height:1.45;
    color:var(--forest);
  }
  .feature-card .card-arrow {
    display:none;
  }
  .card-meta,
  .badge {
    font-size:8.5pt;
    color:var(--forest);
  }
  .card-meta {
    margin-bottom:3mm;
  }
  .availability-note {
    max-width:none;
    color:var(--forest);
    font-size:9pt;
    line-height:1.5;
    margin-top:5mm;
    padding-top:5mm;
    border-top:1px solid var(--line);
  }
  .empty {
    color:var(--forest);
    padding:8mm 0;
    border-top:1px solid var(--line);
  }
  .empty p {
    color:var(--forest);
  }
  .empty button {
    display:none;
  }
}

/* Chapter choices never shrink their labels into adjacent choices. */
.chapters button {
  flex-shrink:0;
  min-height:48px;
}
@media(max-width:520px) {
  .chapters {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
    row-gap:0;
    overflow:visible;
  }
  .chapters button {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:54px;
    padding:12px 0;
    white-space:normal;
    text-align:left;
    line-height:1.35;
  }
  .chapters button span {
    display:block;
    min-width:0;
    margin:0;
    font-size:12px;
    text-wrap:balance;
  }
  .chapters button:nth-child(n+3) {
    border-top:1px solid var(--dark-line);
  }
  .chapters button:focus-visible {
    outline-offset:-4px;
  }
}