:root {
  --font-archivo: "Archivo", system-ui, sans-serif;
  --font-instrument: "Instrument Sans", system-ui, sans-serif;
  --font-mono-jb: "JetBrains Mono", ui-monospace, monospace;
  --paper: #f8f6f2;
  --card: #fff;
  --ink: #17131c;
  --ink2: #403a48;
  --soft: #5d5766;
  --dim: #6f6978;
  --faint: #948e9b;
  --line: #e3ded6;
  --sunk: #ebe7df;
  --em: #3cf0a8;
  --em-ink: #0b8f5f;
  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #09090a;
  --card: #15161a;
  --ink: #f5f3ed;
  --ink2: #d8d4cc;
  --soft: #b0ada4;
  --dim: #8a8780;
  --faint: #8a8780;
  --line: #2c2d33;
  --sunk: #1b1c20;
  --em-ink: #3cf0a8;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --paper: #09090a;
    --card: #15161a;
    --ink: #f5f3ed;
    --ink2: #d8d4cc;
    --soft: #b0ada4;
    --dim: #8a8780;
    --faint: #8a8780;
    --line: #2c2d33;
    --sunk: #1b1c20;
    --em-ink: #3cf0a8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.kn-hero {
  --paper: #f8f6f2;
  --card: #fff;
  --ink: #17131c;
  --soft: #5d5766;
  --dim: #948e9b;
  --line: #e3ded6;
  --sea: #e3ded6;
  --em: #3cf0a8;
  --em-ink: #0b8f5f;
  --pad-x: clamp(18px, 3.4vw, 64px);
  --mono: var(--font-mono-jb), ui-monospace, monospace;
  --display: var(--font-archivo), system-ui, sans-serif;
  z-index: 1;
  background: var(--paper);
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-instrument), system-ui, sans-serif;
  grid-template-rows: auto 1fr auto;
  display: grid;
  position: relative;
  overflow-x: clip;
}
.kn-hero[data-theme="dark"] {
  --paper: #09090a;
  --card: #15161a;
  --ink: #f5f3ed;
  --soft: #b0ada4;
  --dim: #8a8780;
  --line: #2c2d33;
  --sea: #1b1c20;
  --em-ink: #3cf0a8;
}
@media (prefers-color-scheme: dark) {
  .kn-hero[data-theme="auto"] {
    --paper: #09090a;
    --card: #15161a;
    --ink: #f5f3ed;
    --soft: #b0ada4;
    --dim: #8a8780;
    --line: #2c2d33;
    --sea: #1b1c20;
    --em-ink: #3cf0a8;
  }
}
body:has(.kn-hero) { background: #f8f6f2; }
body:has(.kn-hero[data-theme="dark"]) { background: #09090a; }
@media (prefers-color-scheme: dark) {
  body:has(.kn-hero[data-theme="auto"]) { background: #09090a; }
}
.kn-hero a { color: var(--soft); text-decoration: none; }
.kn-hero a:hover { color: var(--ink); }
.kn-hero :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.kn-bar {
  padding: clamp(16px, 1.9vw, 28px) var(--pad-x);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  display: flex;
}
.kn-hero a.kn-brand {
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: -0.02em;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
}
.kn-hero a.kn-brand svg { color: var(--ink); }
.kn-nav {
  gap: clamp(16px, 2vw, 30px);
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  display: none;
}
.kn-bar .kn-langs { gap: clamp(6px, 0.8vw, 11px); margin-left: 0; display: none; }
.kn-langs button {
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 0 0 1px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
}
.kn-hero .kn-langs button:hover { color: var(--ink); }
.kn-hero .kn-langs button[data-on="1"] { color: var(--ink); border-color: var(--ink); }
.kn-pick { min-width: 0; margin-left: auto; position: relative; display: inline-flex; align-items: center; }
.kn-hero .kn-pick select {
  field-sizing: content;
  text-overflow: ellipsis;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  border-radius: 999px;
  min-width: 0;
  padding: 6px 22px 6px 10px;
  font-size: 12px;
  outline: none;
}
.kn-hero .kn-pick > span {
  pointer-events: none;
  position: absolute;
  right: 8px;
  color: var(--soft);
  font-size: 12px;
}
.kn-hero a.kn-pill, .kn-hero a.kn-ghost {
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 clamp(16px, 4vw, 22px);
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.16s, transform 0.16s;
  display: flex;
}
.kn-hero a.kn-pill { background: var(--ink); color: var(--paper); }
.kn-hero a.kn-pill:hover { opacity: 0.86; color: var(--paper); }
.kn-hero a.kn-ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.kn-hero a.kn-ghost:hover { box-shadow: inset 0 0 0 1px var(--dim); color: var(--ink); }
.kn-hero a.kn-pill:active, .kn-hero a.kn-ghost:active { transform: scale(0.97); }
.kn-hero .kn-round, .kn-hero a.kn-x {
  background: var(--card);
  width: 44px;
  height: 44px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.kn-hero .kn-round:hover, .kn-hero a.kn-x:hover { box-shadow: inset 0 0 0 1px var(--dim); color: var(--ink); }
.kn-hero a.kn-x { display: none; }
.kn-hero .kn-cta a.kn-x-low { width: 52px; height: 52px; padding: 0; display: flex; }
.kn-stage {
  width: 100%;
  max-width: 1600px;
  padding: clamp(8px, 2vh, 28px) var(--pad-x);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  margin: 0 auto;
  display: grid;
}
.kn-say { min-width: 0; }
.kn-five { margin: 0 0 clamp(16px, 2.4vh, 26px) 4px; display: flex; }
.kn-five i {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 3px var(--paper);
  border-radius: 50%;
  margin-left: -5px;
  display: block;
}
.kn-five i:first-child { margin-left: 0; }
.kn-claim {
  font-family: var(--display);
  letter-spacing: -0.045em;
  text-wrap: balance;
  word-break: keep-all;
  margin: 0;
  font-size: clamp(44px, 12.5vw, 76px);
  font-weight: 800;
  line-height: 0.96;
}
.kn-claim span { display: block; }
.kn-lede {
  max-width: 27em;
  color: var(--soft);
  text-wrap: pretty;
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  font-size: clamp(17px, 1.42vw, 22px);
  line-height: 1.38;
}
.kn-ca {
  max-width: 36em;
  margin: 14px 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-all;
}
.kn-cta { flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vh, 32px); display: flex; }
.kn-hero .kn-cta a { height: 52px; padding: 0 26px; font-size: 16px; }
.kn-world { min-width: 0; }
.kn-canvas {
  aspect-ratio: 16 / 9.4;
  touch-action: pan-y;
  width: 100%;
  max-height: 62vh;
  display: block;
  font-family: var(--display);
}
.kn-time {
  user-select: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 34px 2% 0;
  font-size: 14px;
  font-weight: 600;
  display: grid;
}
.kn-time > span { color: var(--dim); transition: color 0.2s; }
.kn-time > span[data-on="1"] { color: var(--ink); }
.kn-track { cursor: ew-resize; touch-action: none; height: 28px; position: relative; }
.kn-rail, .kn-fill {
  border-radius: 3px;
  height: 6px;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  left: 0;
}
.kn-rail { background: var(--line); right: 0; }
.kn-fill { width: var(--t); background: var(--ink); }
.kn-knob {
  left: var(--t);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  position: absolute;
  top: 50%;
  box-shadow: 0 2px 6px #0000002e;
}
.kn-when {
  left: clamp(40px, var(--t), calc(100% - 40px));
  white-space: nowrap;
  color: var(--soft);
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  bottom: 100%;
  transform: translate(-50%);
}
.kn-when b { font-family: var(--mono); color: var(--ink); margin: 0 0.3em; font-weight: 500; }
.kn-foot {
  padding: 0 var(--pad-x) clamp(14px, 2.6vh, 32px);
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 56px);
  display: none;
}
.kn-legend { cursor: default; flex: none; width: min(480px, 36vw); height: auto; display: none; overflow: visible; }
.kn-legend text { fill: var(--soft); font-size: 13px; font-weight: 500; font-family: var(--font-instrument), system-ui, sans-serif; }
.kn-legend-rail { stroke: var(--line); }
.kn-legend-lead { fill: none; stroke: #cdc7be; }
.kn-legend-ring { fill: none; stroke: var(--em-ink); stroke-width: 1.5px; }
.kn-legend-one { fill: var(--em); }
.kn-legend text.kn-one {
  fill: var(--em-ink);
  font-family: var(--display);
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 800;
}
.kn-steps {
  flex: 1 1 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.kn-steps button {
  border: 0;
  border-top: 2px solid var(--line);
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--dim);
  cursor: pointer;
  background: transparent;
  padding: 12px 0 0;
  font-size: 14px;
  line-height: 1.38;
  transition: color 0.3s, border-color 0.3s;
  display: block;
}
.kn-steps button:hover { color: var(--soft); }
.kn-steps li[data-on="1"] button { border-top-color: var(--ink); color: var(--ink); }
.kn-tag {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
  font-size: 11px;
  display: block;
}
@media (max-width: 420px) {
  .kn-bar { gap: 8px; padding-inline: 14px; }
  .kn-hero a.kn-pill { padding-inline: 14px; font-size: 14px; }
  .kn-hero .kn-round, .kn-hero a.kn-x { width: 40px; height: 40px; }
}
@media (min-width: 620px) {
  .kn-hero a.kn-x { display: flex; }
  .kn-hero .kn-cta a.kn-x-low { display: none; }
}
@media (min-width: 760px) {
  .kn-nav { display: flex; }
  .kn-pick { margin-left: 0; }
}
@media (min-width: 900px) {
  .kn-stage { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); }
  .kn-claim { font-size: clamp(52px, 5.9vw, 104px); }
  .kn-foot { display: flex; }
}
@media (min-width: 900px) and (min-height: 720px) {
  .kn-hero { height: 100dvh; overflow: hidden; }
}
@media (min-width: 1180px) { .kn-legend { display: block; } }
@media (min-width: 1280px) {
  .kn-bar .kn-langs { display: flex; }
  .kn-pick { display: none; }
}
.kn-bar, .kn-five, .kn-claim, .kn-lede, .kn-cta, .kn-time, .kn-foot {
  animation: kn-arrive 0.7s ease-out var(--at, 0s) both;
}
.kn-claim { --at: 80ms; }
.kn-lede { --at: 0.16s; }
.kn-cta { --at: 0.24s; }
.kn-time { --at: 0.36s; }
.kn-foot { --at: 0.48s; }
@keyframes kn-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kn-bar, .kn-five, .kn-claim, .kn-lede, .kn-cta, .kn-time, .kn-foot { animation: none; }
}

/* App shell */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-archivo), system-ui, sans-serif;
}
.app-side {
  border-right: 1px solid var(--line);
  min-height: 100dvh;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
}
.side-top { display: flex; align-items: center; gap: 8px; padding: 0 8px 18px 12px; }
.side-top a { color: var(--ink); display: flex; }
.side-collapse {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-mono-jb), monospace;
  font-size: 14px;
  border-radius: 999px;
  padding: 4px 8px;
}
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav a, .side-launch, .side-docs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  color: var(--ink2);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 14px;
}
.app-nav a[aria-current="page"] { background: var(--sunk); color: var(--ink); }
.app-nav a:hover, .side-docs:hover { background: color-mix(in srgb, var(--sunk) 70%, transparent); color: var(--ink); }
.nav-count {
  font-family: var(--font-mono-jb), monospace;
  font-size: 11px;
  color: var(--dim);
}
.side-launch {
  margin-top: 22px;
  background: var(--em);
  color: #09090a;
  font-weight: 600;
  justify-content: center;
  height: 40px;
}
.side-launch:hover { background: #6ff5bf; color: #09090a; }
.side-foot { margin-top: auto; }
.side-docs { color: var(--ink2); margin-bottom: 8px; }
.side-token {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 8px 12px 14px;
}
.side-token b { display: block; font-size: 13px; }
.side-token span { color: var(--dim); font-size: 12px; font-family: var(--font-mono-jb), monospace; }
.side-langs { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px 0; }
.side-langs button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
}
.side-langs button[data-on="1"] { color: var(--ink); }
.app-main { min-width: 0; padding: 16px 22px 48px; }
.app-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.app-search {
  flex: 1;
  max-width: 560px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0 14px;
  font-size: 14px;
  outline: none;
}
.app-search:focus { border-color: var(--dim); }
.icon-btn, .connect-btn {
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0 14px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.connect-btn { font-weight: 600; }
.live-note { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 13px; margin: 0 0 14px; }
.live-note i { width: 7px; height: 7px; border-radius: 50%; background: #2f7cff; display: block; }
.feature-row {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.feature {
  border-radius: 18px;
  padding: 18px 18px 16px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
}
.feature.official {
  background: #111113;
  color: #f5f3ed;
  border-color: #111113;
}
.kicker {
  font-family: var(--font-mono-jb), monospace;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--dim);
}
.official .kicker { color: #9a968e; }
.feature h2 { margin: 10px 0 8px; font-size: 28px; letter-spacing: -0.04em; font-weight: 750; }
.feature h2 em { font-style: normal; color: #9a968e; font-size: 16px; margin-left: 8px; font-weight: 600; }
.feature p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.4; }
.official p { color: #c8c4bb; }
.feature .meta { margin-top: 12px; font-family: var(--font-mono-jb), monospace; font-size: 12px; color: #9a968e; }
.pill-link {
  margin-top: auto;
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid #3a3a3e;
  color: #f5f3ed;
  text-decoration: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}
.feature:not(.official) .go {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.chain-pips { display: flex; gap: 6px; margin-top: 12px; }
.chain-pips b {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 6px;
  color: #17131c;
}
.recent { margin: 22px 0 8px; font-size: 13px; color: var(--dim); }
.recent-row { display: flex; gap: 8px; overflow: auto; padding-bottom: 8px; }
.recent-row a {
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 92px;
  font-size: 13px;
}
.recent-row a span { display: block; color: var(--dim); font-size: 11px; }
.filters { display: flex; align-items: center; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.filters button, .view-toggle {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--soft);
}
.filters button[aria-pressed="true"] { background: var(--sunk); color: var(--ink); }
.filters .count { margin-left: auto; color: var(--dim); font-size: 13px; font-family: var(--font-mono-jb), monospace; }
.coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.coin {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.coin-head { display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 750;
  color: #17131c;
  flex: none;
}
.coin-head strong { display: block; font-size: 15px; }
.coin-head em { font-style: normal; color: var(--dim); font-size: 12px; }
.coin-sub { margin: 8px 0; color: var(--dim); font-size: 12px; display: flex; justify-content: space-between; }
.coin-mcap { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.coin-mcap .up { color: var(--em-ink); font-family: var(--font-mono-jb), monospace; font-size: 12px; font-weight: 500; }
.coin-mcap .down { color: #d4534a; font-family: var(--font-mono-jb), monospace; font-size: 12px; font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stats div { font-size: 12px; color: var(--dim); }
.stats b { display: block; color: var(--ink); font-size: 13px; margin-top: 2px; }
.page-title { margin: 8px 0 6px; font-size: 40px; letter-spacing: -0.045em; }
.page-lede { margin: 0 0 22px; max-width: 42em; color: var(--soft); line-height: 1.45; }
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  max-width: 720px;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--soft); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--ink);
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.primary {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  height: 46px;
  padding: 0 18px;
  font-weight: 650;
}
.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 46px;
  padding: 0 18px;
}
.quote {
  font-family: var(--font-mono-jb), monospace;
  font-size: 13px;
  color: var(--soft);
  margin: 4px 0 16px;
}
.swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}
.choice { display: flex; gap: 8px; margin-bottom: 14px; }
.choice button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
.docs nav a { display: block; color: var(--soft); text-decoration: none; font-size: 14px; padding: 6px 0; }
.docs nav a:hover { color: var(--ink); }
.docs article h2 { margin: 28px 0 8px; letter-spacing: -0.03em; }
.docs article p, .docs article li { color: var(--soft); line-height: 1.5; }
.docs article ul { padding-left: 18px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--dim); font-weight: 550; font-size: 12px; letter-spacing: 0.04em; }
.modal {
  position: fixed;
  inset: 0;
  background: #17131c66;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal section {
  width: min(420px, 100%);
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  padding: 20px;
}
.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .app-side { position: relative; height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .feature-row, .docs, .row-2, .swap { grid-template-columns: 1fr; }
  .side-foot { margin-top: 18px; }
}
.app.is-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.app.is-collapsed .app-nav a,
.app.is-collapsed .side-launch,
.app.is-collapsed .side-docs,
.app.is-collapsed .side-token,
.app.is-collapsed .side-langs { font-size: 0; justify-content: center; padding-left: 0; padding-right: 0; }
.app.is-collapsed .nav-count { font-size: 11px; }