/* V194 (his words: "this is super bad ... this was the style previously: the title, the Letter 0, the Letter 1 ... this
   kind of interaction ... I don't need the kind of blocks you created ... don't copy the old founder letters type,
   use what we have done on the home page ... we don't need the top navigation"):
   the old page's order and its hover, in the home page's own look. css/theme99.css is loaded before this sheet, so the
   ground, the ink and every size are the home page's: a heading the size of "You learn. We match." (--t-heading), the
   home page's card title size for a letter's name (--t-card), its body and its small line (--t-tab). no cards, no
   pictures on the list, no bar at the top: Home, Letters and Why Zero are in the menu of the bar at the foot */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lt { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: var(--t-body); line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.lt a { color: inherit; text-decoration: none; }
.lt a:focus-visible, .lt button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.lt img { max-width: 100%; }

.lt__main { flex: 1; width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: clamp(56px, 11svh, 120px) var(--gut) clamp(96px, 16svh, 180px); }
.lt__t { margin: 0; font-size: var(--t-heading); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-align: center; text-wrap: balance; }
.lt__t--2 { margin-top: clamp(96px, 18svh, 200px); }
.lt__tag { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.45em; margin: 0; font-size: var(--t-tab); line-height: 1.4; color: var(--mute); }

/* ---- a list of letters: the old page's column (500 wide on a 1512 screen) and its rhythm (a row every 108px) ---- */
.lt__list { display: grid; width: 100%; max-width: 33em; margin: clamp(40px, 7svh, 72px) auto 0; font-size: var(--t-body); }
.lt__row { position: relative; display: block; padding: clamp(14px, 1.6vw, 22px) 0; }
.lt__rw { display: grid; gap: 4px; transition: translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__rt { font-size: var(--t-card); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.lt__row .lt__tag { justify-content: flex-start; }
.lt__ar { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--mute); clip-path: inset(0 100% 0 0); translate: -10px 0; transition: clip-path 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (hover: hover) {
  .lt__row:hover .lt__rw, .lt__row:focus-visible .lt__rw { translate: 38px 0; }
  .lt__row:hover .lt__ar, .lt__row:focus-visible .lt__ar { clip-path: inset(0 0 0 0); translate: 0 0; }
}
.lt__row:active .lt__rw { translate: 38px 1px; }
/* "Read now": a small black key that rides with the pointer over a letter. it grows from the pointer, it never fades */
.lt__read { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; }
.lt__read::before { content: "Read now"; display: block; padding: 8px 14px; border-radius: 10px; background: linear-gradient(rgb(48, 52, 50) 0%, rgb(24, 26, 25) 100%); box-shadow: rgba(255, 255, 255, 0.16) 0 1px 0 0 inset, rgb(18, 20, 19) 0 0 0 1px, rgba(18, 20, 19, 0.4) 0 10px 18px -10px; color: #fff; font-size: var(--t-tab); line-height: 1.2; white-space: nowrap; transform: scale(0); transform-origin: 0 0; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__read.is-on::before { transform: scale(1); }
.lt__read { font-size: 0; }
.lt__read::before { font-size: 0.875rem; }

/* ---- a letter: the old page's order, centred: the series and number, the title, who wrote it; then the letter ---- */
.lt__head { display: grid; justify-items: center; gap: clamp(14px, 2svh, 22px); max-width: 33em; margin: 0 auto; font-size: var(--t-body); }
.lt__head .lt__tag a { transition: color 0.2s; }
@media (hover: hover) { .lt__head .lt__tag a:hover { color: var(--ink); } }
.lt__body { max-width: 33em; margin: clamp(56px, 10svh, 104px) auto 0; color: var(--text); font-size: var(--t-body); line-height: 1.65; }
.lt__body p { margin: 0; text-wrap: pretty; }
.lt__body p + p, .lt__body figure + p, .lt__body blockquote + p { margin-top: 1.1em; }
.lt__body em { font-style: normal; color: var(--mute); }
.lt__body strong { font-weight: 500; color: var(--ink); }
.lt__body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(12, 16, 28, 0.3); text-underline-offset: 0.18em; }
.lt__body figure { margin: clamp(32px, 5svh, 48px) 0; }
.lt__body figure img { display: block; width: 100%; height: auto; border-radius: 16px; background: #000; }
.lt__sign { display: grid; gap: 2px; margin-top: clamp(36px, 6svh, 56px) !important; }
.lt__sign span:first-child { color: var(--ink); }
.lt__sign span:last-child { font-size: var(--t-tab); color: var(--mute); }
.lt__post { margin: 0 0 clamp(32px, 5svh, 48px); padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: #fff; box-shadow: var(--halo); color: var(--ink); }
.lt__post p + p { margin-top: 0.8em; }
.lt__post footer { margin-top: 14px; font-size: var(--t-tab); color: var(--mute); }
.lt__list--next { margin-top: clamp(72px, 12svh, 128px); }
.lt__nk { justify-content: flex-start; }

.lt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut) calc(clamp(22px, 4svh, 40px) + 96px); font-size: var(--t-tab); color: var(--mute); }
.lt__foot nav { display: flex; gap: 20px; }
.lt__foot a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.2s; }
@media (hover: hover) { .lt__foot a:hover { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .lt__rw, .lt__ar, .lt__read::before { transition: none; } }

/* ---- the bar at the foot: the home page's, read off it (1512 wide: glass 56% white, blur 22, 7px in, 8 apart,
   corner 24; the Start key 280 by 62, corner 18, its dark slab and lip; the menu key 62 square, white, corner 18) ---- */
.lt__dock { --k: clamp(52px, 4.1vw, 62px); position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 8px; padding: 7px; border-radius: 24px; background: rgba(255, 255, 255, 0.56); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: rgba(12, 16, 28, 0.06) 0 0 0 1px, rgba(12, 16, 28, 0.42) 0 18px 36px -24px; transform: translateX(-50%); }
.lt__start { display: flex; align-items: center; justify-content: center; gap: 12px; width: calc(var(--k) * 4.52); height: var(--k); padding: 0 24px; border-radius: 18px; background: linear-gradient(rgb(48, 52, 50) 0%, rgb(24, 26, 25) 100%); box-shadow: rgba(255, 255, 255, 0.16) 0 1px 0 0 inset, rgba(0, 0, 0, 0.5) 0 -3px 0 0 inset, rgb(18, 20, 19) 0 0 0 1px, rgba(18, 20, 19, 0.5) 0 14px 24px -14px; color: #fff !important; font-size: calc(var(--k) * 0.295); letter-spacing: -0.012em; transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__start .ic { width: calc(var(--k) * 0.26); height: calc(var(--k) * 0.26); fill: currentColor; flex: none; }
.lt__start:active { translate: 0 2px; scale: 0.985; transition-duration: 34ms; }
.lt__menu { display: grid; place-content: center; gap: 5px; width: var(--k); height: var(--k); margin: 0; padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: rgba(0, 0, 0, 0.07) 0 -4px 0 0 inset, rgba(0, 0, 0, 0.06) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 12px 22px -14px; cursor: pointer; }
.lt__menu i { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__menu[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.lt__menu[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.lt__sheet { position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + clamp(52px, 4.1vw, 62px) + 26px); z-index: 41; display: grid; width: min(360px, calc(100vw - 24px)); padding: 6px; border-radius: 24px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: rgba(12, 16, 28, 0.06) 0 0 0 1px, rgba(12, 16, 28, 0.42) 0 18px 36px -24px; transform: translateX(-50%); transform-origin: 50% 100%; animation: lt-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__sheet[hidden] { display: none; }
@keyframes lt-up { from { transform: translateX(-50%) translateY(10px) scale(0.96); } }
.lt__sheet a { display: flex; align-items: center; padding: 0.95rem 1rem; border-radius: 14px; font-size: 1.125rem; letter-spacing: -0.02em; transition: background 0.2s; }
.lt__sheet a:hover, .lt__sheet a[aria-current="page"] { background: rgba(15, 15, 15, 0.05); }
@media (max-width: 560px) { .lt__dock { --k: 52px; } .lt__start { width: auto; min-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .lt__sheet { animation: none; } .lt__card, .lt__next { transition: none; } }

/* V195 ("let the letter be in dark mode, because that's what the vibe was ... when you click to the letter's page it
   should be dark"): a letter is read on the home page's own black (its ink, #0b0b0c, the ground of its black act).
   the list stays on the light ground; the bar at the foot stays as it is over the home page's black */
html:has(body.lt--dark), body.lt.lt--dark { background: var(--ink); color: #fff; }
.lt--dark .lt__t, .lt--dark .lt__rt, .lt--dark .lt__body strong, .lt--dark .lt__sign span:first-child, .lt--dark .lt__body a { color: #fff; }
.lt--dark .lt__tag, .lt--dark .lt__body em, .lt--dark .lt__sign span:last-child, .lt--dark .lt__ar, .lt--dark .lt__foot { color: rgba(255, 255, 255, 0.5); }
.lt--dark .lt__body { color: rgba(255, 255, 255, 0.78); }
.lt--dark .lt__body a { text-decoration-color: rgba(255, 255, 255, 0.35); }
.lt--dark .lt__post { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; }
.lt--dark .lt__post footer { color: rgba(255, 255, 255, 0.5); }
@media (hover: hover) { .lt--dark .lt__head .lt__tag a:hover, .lt--dark .lt__foot a:hover { color: #fff; } }
.lt--dark a:focus-visible, .lt--dark button:focus-visible { outline-color: #fff; }
.lt--dark .lt__read::before { background: #fff; color: var(--ink); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.6); }

/* V196: Previous and Next at the foot of a letter, the reading column's width, side by side; one above the other on a
   phone. each is a row of the list, so it has the list's hover (the arrow comes in, the words step aside) */
.lt__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 33em; margin: clamp(72px, 12svh, 128px) auto 0; font-size: var(--t-body); }
.lt__nx { text-align: right; }
.lt__nx .lt__nk, .lt__nx .lt__row .lt__tag { justify-content: flex-end; }
.lt__nx .lt__ar { left: auto; right: 0; translate: 10px 0; clip-path: inset(0 0 0 100%); }
@media (hover: hover) {
  .lt__nx .lt__row:hover .lt__rw, .lt__nx .lt__row:focus-visible .lt__rw { translate: -38px 0; }
  .lt__nx .lt__row:hover .lt__ar, .lt__nx .lt__row:focus-visible .lt__ar { clip-path: inset(0 0 0 0); translate: 0 0; }
}
.lt__nx .lt__row:active .lt__rw { translate: -38px 1px; }
@media (max-width: 640px) {
  .lt__pn { grid-template-columns: 1fr; gap: 8px; }
  .lt__pn > div:empty { display: none; }
  .lt__nx { text-align: left; }
  .lt__nx .lt__nk, .lt__nx .lt__row .lt__tag { justify-content: flex-start; }
}

/* V197 ("use a truncated effect ... smaller fonts so we can see a little more ... on hover it should not be an arrow ...
   in the details page there should not be an arrow"): at the foot of a letter, Previous and Next are the body's size,
   one line each, cut with an ellipsis; no arrow and no step on hover, the name just goes full white (or ink) */
.lt__pn .lt__ar { display: none; }
.lt__pn .lt__row .lt__rw, .lt__pn .lt__row:hover .lt__rw, .lt__pn .lt__row:focus-visible .lt__rw, .lt__pn .lt__row:active .lt__rw { translate: none; }
.lt__pn .lt__rt { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--t-body); letter-spacing: -0.01em; transition: color 0.2s; }
.lt--dark .lt__pn .lt__rt { color: rgba(255, 255, 255, 0.78); }
@media (hover: hover) { .lt--dark .lt__pn .lt__row:hover .lt__rt { color: #fff; } }
.lt__pn > div { min-width: 0; }
.lt__pn .lt__row { padding: 10px 0; }

/* the back key: top left, a slab like the menu key's, quiet on the black */
.lt__back { position: fixed; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); z-index: 40; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 13px; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff !important; font-size: var(--t-tab); transition: background 0.2s, translate 0.2s; }
.lt__back svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .lt__back:hover { background: rgba(255, 255, 255, 0.14); } }
.lt__back:active { translate: 0 1px; }

/* V203 ("left-aligned ... should feel like a letter ... more spacing, and a divider line as well ... only 7 or 8"):
   the index is a column set like a letter: left aligned, the heading over it, a hairline between lines (inside the
   column, never across the page), each line with air above and below. the number is a plain figure in grey. while
   one line is pointed at, the rest go grey */
.lt__ixw { position: relative; max-width: 36em; margin: 0 auto; text-align: left; }
.lt__t--ix { text-align: left; margin-bottom: clamp(48px, 8svh, 88px); }
.lt__gl { justify-content: flex-start; margin: clamp(48px, 8svh, 80px) 0 14px; }
.lt__ixs { display: grid; border-bottom: 1px solid rgba(12, 16, 28, 0.08); }
.lt__ix { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline; padding: clamp(18px, 2.6svh, 24px) 0; border-top: 1px solid rgba(12, 16, 28, 0.08); font-size: var(--t-body); line-height: 1.35; }
.lt__in { font-size: var(--t-tab); color: var(--mute); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.lt__it { display: inline-block; justify-self: start; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); transition: color 0.2s; }
@media (hover: hover) {
  .lt__ixw:has(.lt__ix:hover) .lt__it, .lt__ixw:has(.lt__ix:hover) .lt__in { color: var(--faint, #a9adb5); }
  .lt__ixw .lt__ix:hover .lt__it { color: var(--ink); }
  .lt__ixw .lt__ix:hover .lt__in { color: var(--mute); }
}
/* the card at the right of the column: white, corner 16, a hairline and a long soft shadow. it opens out of its left
   edge level with the line pointed at, and slides from line to line */
.lt__hc { position: absolute; left: calc(100% + clamp(32px, 4vw, 64px)); top: 0; width: clamp(240px, 19vw, 300px); pointer-events: none; transform: translateY(-50%); transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__hc.no-slide { transition: none; }
.lt__hcin { padding: 8px 8px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.06), 0 2px 6px -2px rgba(12, 16, 28, 0.08), 0 30px 60px -28px rgba(12, 16, 28, 0.35); transform: scale(0.4, 0); transform-origin: 0 50%; transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lt__hc.is-on .lt__hcin { transform: none; }
.lt__hcp { aspect-ratio: 43 / 16; border-radius: 11px; overflow: hidden; background: #000; }
.lt__hcp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lt__hcp.is-mark { display: grid; place-items: center; }
.lt__hcp.is-mark img { width: 18%; height: auto; filter: invert(1); }
.lt__hct { justify-content: flex-start; margin: 14px 8px 0; }
.lt__hcd { margin: 4px 8px 0; font-size: var(--t-tab); line-height: 1.45; color: var(--text); text-wrap: pretty; }
@media (max-width: 1180px) { .lt__hc { display: none; } }
@media (prefers-reduced-motion: reduce) { .lt__hc, .lt__hcin { transition: none; } }

/* V201: Our Story, in the home page's language: the old page's beats, one paragraph at a time in the middle of the
   page at the body's size, with that beat's own pictures at its two sides (photos as prints with a white border,
   people as cards, the stamp, the cap, the columns at the page's edges, the tools in a row, the logos as coins). as a
   beat comes up its pictures rise and turn into place from a little below, each a beat after the last (a rise and a
   turn, never a fade). a phone stacks the pictures above and below the words */
body.lt:not(.lt--dark) .lt__back { background: #fff; box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.08), 0 10px 20px -14px rgba(12, 16, 28, 0.35); color: var(--ink) !important; }
@media (hover: hover) { body.lt:not(.lt--dark) .lt__back:hover { background: #fff; translate: 0 -1px; } }
.os { overflow-x: clip; }
.os__head { margin-bottom: clamp(48px, 10svh, 120px); }
.os__s { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 72px); min-height: clamp(320px, 52svh, 520px); }
.os__s > .os__l, .os__s > span.os__l { grid-column: 1; justify-self: end; }
.os__s > .os__p { grid-column: 2; }
.os__s > .os__r, .os__s > span.os__r { grid-column: 3; justify-self: start; }
.os__p { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--text); text-align: center; text-wrap: pretty; }
.os__p b { font-weight: 500; color: var(--ink); }
.os__o { display: block; height: auto; max-width: 100%; }

/* the pictures, and where each comes to rest */
.os__pol { width: clamp(150px, 15vw, 250px); border-radius: 6px; box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.05), 0 24px 40px -26px rgba(12, 16, 28, 0.45); --r: -6deg; }
.os__stack { position: relative; width: clamp(170px, 17vw, 280px); height: clamp(190px, 19vw, 320px); }
.os__stack .os__pol { position: absolute; top: 0; left: 0; }
.os__stack .os__pol:first-child { --r: 3deg; } .os__stack .os__pol:last-child { left: 18%; top: 4%; --r: 8deg; }
.os__tks { display: block; width: 46px; margin: 0 auto 14px; --r: -8deg; }
.os__pair { position: relative; display: flex; gap: 0; }
.os__card { width: clamp(96px, 9vw, 150px); border-radius: 12px; box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.05), 0 20px 34px -22px rgba(12, 16, 28, 0.45); }
.os__pair .os__card:first-child { --r: -7deg; translate: 0 24px; } .os__pair .os__card:last-child { --r: 5deg; margin-left: -18px; }
.os__stamp { width: clamp(80px, 7vw, 110px); --r: -12deg; }
.os__cap { width: clamp(150px, 14vw, 230px); --r: 6deg; }
.os__s--4 { min-height: clamp(460px, 70svh, 640px); }
.os__col { position: absolute; top: 50%; width: clamp(90px, 13vw, 230px); translate: 0 -50%; --r: 0deg; }
.os__col--l { left: calc(var(--gut) * -1 - 2vw); } .os__col--r { right: calc(var(--gut) * -1 - 2vw); }
.os__s--4 > .os__p { grid-row: 1; }
.os__tools { grid-column: 2; grid-row: 2; width: 100%; max-width: 30em; justify-self: center; --r: 0deg; }
.os__logos { display: grid; gap: clamp(28px, 5svh, 56px); }
.os__logos .os__lg:last-child { translate: 40% 0; }
.os__lg { width: clamp(46px, 3.6vw, 60px); border-radius: 50%; box-shadow: 0 12px 24px -14px rgba(12, 16, 28, 0.4); --r: 0deg; }
.os__s--6 > .os__p { grid-row: 1; }
.os__broken { grid-column: 2; grid-row: 2; justify-self: center; width: clamp(120px, 11vw, 170px); border-radius: 8px; --r: -3deg; }
.os__end { grid-template-columns: 1fr; justify-items: center; gap: 14px; min-height: 0; padding: clamp(40px, 8svh, 96px) 0; }
.os__end .os__p { grid-column: 1; color: var(--mute); }
/* V202 ("this has to be our logo"): the story ends on Zero's own mark and wordmark (assets/brand), in ink */
.os__mk { width: clamp(56px, 4.6vw, 72px); margin-top: 10px; --r: 0deg; }
.os__wm { width: clamp(96px, 8vw, 128px); --r: 0deg; }
.os__post { max-width: 30em; margin: clamp(40px, 8svh, 96px) auto 0; }

/* coming into place */
.os__o { rotate: var(--r, 0deg); transform-origin: 50% 100%; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.os__s:not(.in) .os__o { transform: translateY(46px) scale(0.86); rotate: 0deg; visibility: hidden; }
.os__s.in .os__o { visibility: visible; }
.os__s.in .os__r .os__o, .os__s.in > .os__r { transition-delay: 0.08s; }
.os__s.in .os__o:nth-child(2) { transition-delay: 0.14s; }
@media (max-width: 860px) {
  .os__s { grid-template-columns: 1fr; justify-items: center; gap: 24px; min-height: 0; padding: 28px 0; }
  .os__s > .os__l, .os__s > span.os__l, .os__s > .os__p, .os__s > .os__r, .os__s > span.os__r, .os__tools, .os__broken { grid-column: 1; grid-row: auto; justify-self: center; }
  .os__col { display: none; }
  .os__logos { grid-auto-flow: column; } .os__logos .os__lg:last-child { translate: 0 0; }
  .os__pol { width: 160px; } .os__stack { width: 190px; height: 210px; }
}
@media (prefers-reduced-motion: reduce) { .os__o { transition: none; } .os__s:not(.in) .os__o { transform: none; visibility: visible; } }
/* the tools and the columns are pictures on white: they take the page's ground */
.os__tools, .os__col { mix-blend-mode: multiply; }

/* V202 ("it has to be a fluid UI. when I click on it, it should directly go to the next page title, and the same goes
   for back and forth. super, super fluid"): the pages move into each other. the title you press travels to the
   letter's heading (the script in each page's head names only that one title); the bar at the foot stays where it is;
   the page comes in by where you went. a letter rises over the list from below, and going back it drops away and the
   list is there under it. Next slides in from the right and Previous from the left, the page you leave stepping a
   little the other way. nothing fades: the pages slide over each other */
@view-transition { navigation: auto; }
.lt__dock { view-transition-name: lt-dock; }
.lt__vt { display: inline-block; }
[data-vt] { view-transition-class: lt-t; }
/* between two letters the title is the same white type: only the arriving one is drawn, and it grows out of the
   line you pressed, so no second copy shows through */
html[data-vt="next"]::view-transition-old(.lt-t), html[data-vt="prev"]::view-transition-old(.lt-t) { animation: none; visibility: hidden; }
html[data-vt="next"]::view-transition-new(.lt-t), html[data-vt="prev"]::view-transition-new(.lt-t) { animation: none; }
.lt__pn .lt__rt { display: inline-block; max-width: 100%; vertical-align: top; }
::view-transition-group(*) { animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.22, 0.9, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="in"]::view-transition-new(root) { animation: lt-vt-up 0.62s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
html[data-vt="in"]::view-transition-old(root) { animation: lt-vt-sink 0.62s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
html[data-vt="out"]::view-transition-old(root) { z-index: 1; animation: lt-vt-down 0.55s cubic-bezier(0.5, 0, 0.2, 1) both; }
html[data-vt="out"]::view-transition-new(root) { animation: lt-vt-lift 0.55s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
html[data-vt="next"]::view-transition-new(root) { animation: lt-vt-from-r 0.6s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
html[data-vt="next"]::view-transition-old(root) { animation: lt-vt-to-l 0.6s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
html[data-vt="prev"]::view-transition-new(root) { animation: lt-vt-from-l 0.6s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
html[data-vt="prev"]::view-transition-old(root) { animation: lt-vt-to-r 0.6s cubic-bezier(0.22, 0.9, 0.2, 1) both; }
@keyframes lt-vt-up { from { transform: translateY(100%); } }
@keyframes lt-vt-sink { to { transform: translateY(-14%); } }
@keyframes lt-vt-down { to { transform: translateY(100%); } }
@keyframes lt-vt-lift { from { transform: translateY(-14%); } }
@keyframes lt-vt-from-r { from { transform: translateX(100%); } }
@keyframes lt-vt-to-l { to { transform: translateX(-28%); } }
@keyframes lt-vt-from-l { from { transform: translateX(-100%); } }
@keyframes lt-vt-to-r { to { transform: translateX(28%); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }