.gear { width: 66px; height: 66px; margin: 0 auto 1.1rem; display: block; opacity: .85; }
.gear .teeth {
    fill: none; stroke: var(--accent); stroke-width: 3.6;
    stroke-dasharray: 2.1 2.44;
    transform-origin: 32px 32px;
    animation: spin 120s linear infinite reverse;
  }
.gear .ring { fill: none; stroke: var(--accent); stroke-width: 1.1; opacity: .5; }
.gear .wave {
    fill: none; stroke: var(--accent); stroke-width: 1.4;
    transform-origin: 32px 32px;
    animation: spin 11s linear infinite;
  }
.gear .hub { fill: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
/* compact chrome on chapter pages */
  body[data-route]:not([data-route=""]) .gear { display: none; }
/* first-load stagger */
  .rise { animation: rise .6s cubic-bezier(.2,.65,.25,1) both; }
.rise.d1 { animation-delay: .07s; }
.rise.d2 { animation-delay: .14s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.eyebrow {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1rem;
  }
.eyebrow .mins { color: var(--faint); letter-spacing: .08em; }
.opener .dek {
    font-style: italic;
    font-size: 1.24rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 1.9rem;
    text-wrap: balance;
  }
.home .dek { font-style: italic; font-size: 1.26rem; line-height: 1.55; margin: 0 0 1.5rem; }
.num { font-family: var(--sans); font-size: .86em; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* chapter marks */
  .art { width: 46px; height: 46px; display: block; }
.opener .art { width: 76px; height: 76px; margin: 0 0 1.5rem; }
.art .ln { stroke: var(--accent); fill: none; stroke-width: 1.6; }
.art .fd { fill: var(--accent); }
.art .faint { opacity: .35; }
.art.wm { width: 24px; height: 12px; display: inline-block; vertical-align: -1px; margin: 0 .42em 0 .15em; }
.art.wm.wm-s { width: 14px; }
.art.wm .ln { stroke-width: 1.3; }
.art.pv { width: 88px; height: 88px; float: right; margin: .25rem -7.4rem .7rem 1.5rem; }
.art.pv .ln { stroke-width: 1.5; }
.art.h3m { width: 17px; height: 17px; display: inline-block; vertical-align: -2.5px; margin-right: .55em; }
.art.h3m .ln { stroke-width: 1.4; }
@keyframes dim { 0%, 100% { opacity: .22; } 50% { opacity: .8; } }
@keyframes flow { to { stroke-dashoffset: -30; } }
@keyframes gate { 0%, 55%, 100% { opacity: 1; } 65%, 85% { opacity: .15; } }
.tviz { display: block; width: 100%; height: 34px; margin-top: auto; padding-top: .8rem; overflow: visible; }
.tviz .ln { stroke: var(--accent); fill: none; stroke-width: 1.4; }
.tviz .fd { fill: var(--accent); }
.tviz .faint { opacity: .3; }
.mfig svg { display: block; width: 100%; height: 18px; margin-top: .35rem; }
.mfig svg .ln { stroke: var(--accent); fill: none; stroke-width: 1.2; }
.mfig svg .fd { fill: var(--accent); }
/* the system belt */
  .sysline {
    display: block;
    width: min(58rem, 92vw);
    height: auto;
    margin: 2.6rem 0 1rem calc((100% - min(58rem, 92vw)) / 2);
    overflow: visible;
    touch-action: pan-y;
  }
.sysline .ln { stroke: var(--accent); fill: none; stroke-width: 1.5; }
.sysline .fd { fill: var(--accent); }
.sysline .faint { opacity: .3; }
.sysline .st { transform-box: fill-box; transform-origin: center; }
.sysline text {
    font-family: var(--sans); font-size: 11px;
    letter-spacing: .09em;
    fill: var(--muted); text-anchor: middle;
  }
.sysline text.big { font-size: 12.5px; fill: var(--accent); opacity: .9; }
.sysline text.head { font-size: 24px; font-weight: 500; fill: var(--accent); letter-spacing: .05em; }
.sysline a { cursor: pointer; }
.sysline a:hover text { fill: var(--accent); }
.sysline a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sysline .tb { transform-box: fill-box; transform-origin: center; }
.sysline .bfig { fill: var(--accent); stroke: none; }
.sysline #curvebot { fill: var(--accent); stroke: none; }
.sysline .curve { stroke-width: 1.7; }
.sysline .ta { text-anchor: start; }
.sysline .te { text-anchor: end; }
.sysline .era { cursor: pointer; }
.sysline .eranode { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; transition: fill .15s ease; }
.sysline .era:hover .eranode { fill: var(--accent); opacity: .6; }
.sysline .era.on .eranode { fill: var(--accent); opacity: 1; }
.sysline .era.on text, .sysline .era:hover text { fill: var(--accent); }
.heroinfo {
    width: min(58rem, 92vw);
    margin: .5rem 0 .8rem calc((100% - min(58rem, 92vw)) / 2);
    display: flex; gap: 1.2rem; align-items: baseline;
    min-height: 2.6rem;
  }
.heroinfo .et {
    font-family: var(--sans); font-size: .72rem; font-weight: 500;
    letter-spacing: .12em; color: var(--accent); white-space: nowrap;
  }
.heroinfo .eb { font-size: .99rem; color: var(--muted); line-height: 1.55; }
/* chapter key-data strip */
  .opener .dek { margin-bottom: .95rem; }
/* margin figures */
  .mfig { float: right; width: 7.4rem; margin: .35rem -8.6rem .5rem 1.4rem; font-family: var(--sans); }
.mfig .mv {
    display: block; font-size: 1.5rem; font-weight: 500;
    color: var(--accent); letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
  }
.mfig .ml { display: block; font-size: .68rem; color: var(--faint); line-height: 1.5; margin-top: .3rem; }
@keyframes ignite {
    0%, 100% { background: var(--bg); color: var(--accent); opacity: .7; box-shadow: none; }
    3.5%, 9% { background: var(--accent); color: var(--bg); opacity: 1; box-shadow: 0 0 14px -2px var(--accent); }
    14% { background: var(--bg); color: var(--accent); opacity: .7; box-shadow: none; }
  }
@keyframes raildrift { to { background-position: 0 9px; } }
@keyframes ain {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
@keyframes draw { from { width: 0; } }