/* TBC · How it works — Story style as the base (tokens from tbc.co and the brand book), with the Vivid style's magic:
   the night sky, lime light and glass buttons. */
@font-face { font-family: "STIX Two Math"; src: url("data:font/woff2;base64,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") format("woff2"); font-display: swap; unicode-range: U+2190-2194, U+2248, U+2264-2265; }
:root {
  --n950: #0F1113; --n600: #4F687E; --n500: #889CAF; --n300: #C3CDD7; --n200: #D8E2EC; --n50: #F3F7FA; --white: #fff;
  --lime: #EFFF42; --soft-lime: #D7E98F; --coral: #F45F4A; --soft: #AAC0D1; --deep: #5C7891; --stage: #0B0D10;
  --serif: "STIX Two Text", "STIX Two Math", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, Arial, sans-serif;
  --fs-h: clamp(2.3rem, min(4.9vw, 8vh), 4.75rem);
  --fs-5: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-6: clamp(1rem, .9636rem + .1495vw, 1.125rem);
  --fs-8: clamp(.75rem, .7136rem + .1495vw, .875rem);
  --margin: clamp(1.25rem, .1883rem + 5.381vw, 6rem);
  --gutter: clamp(.75rem, .5314rem + .8969vw, 1.5rem);
  --nav-h: 4.8rem;
  --fg: var(--n950); --fg2: var(--n600); --fg3: var(--n600); --line: var(--n300);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-t: .3s; --nav-e: cubic-bezier(.5, 0, .2, 1);   /* r8: the one short step the nav's ink, pills, scrim and the rail all turn in with the theme */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--stage); }
html, body { margin: 0; }
body { background: var(--stage); overflow-x: clip; }
body:not(:has(> .page_wrap)), :where(body:has(> .page_wrap) > :not(.page_wrap), #story, #traceCard) { color: #fff; font-family: var(--sans); font-size: var(--fs-6); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(body:not(:has(> .page_wrap)), body:has(> .page_wrap) > :not(.page_wrap), #story, #traceCard) ::selection { background: var(--lime); color: var(--n950); }
:where(body:not(:has(> .page_wrap)), body:has(> .page_wrap) > :not(.page_wrap), #story, #traceCard) a { color: inherit; }
:where(body:not(:has(> .page_wrap)), body:has(> .page_wrap) > :not(.page_wrap), #story, #traceCard) b { font-weight: 600; }

/* ---------- canvas, poster, loading ---------- */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; touch-action: pan-y; }
.poster { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity .9s var(--ease);
  background: radial-gradient(130vw 60vh at 100% 112%, rgba(47, 49, 51, .95), rgba(47, 49, 51, 0) 100%), #0f1113; }   /* r5: Story's charcoal studio while the scene loads (it was Vivid's navy) */
body.gl-ready .poster { opacity: 0; }
body.no-gl .poster, body.gl-wait .poster { opacity: 1; }
body[data-theme="light"].gl-wait .poster { background: linear-gradient(160deg, #eef3f8, #cfdbe7); }
/* v4 (Meng: "We need some sort of very nice loading animation in the center"): the page's own rings, in the middle of the field.
   Hairline arcs turn slowly, a lime bead with its tail rides the middle one, and the cell at the centre lights as it comes round.
   It waits .15 s before it shows (a quick load never flashes it), and eases out as the hero comes in. */
.loading { --ld: 15, 17, 19; position: fixed; inset: 0; z-index: 16; display: grid; place-items: center; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }   /* (it leaves quickly, before the board is up under it) */
body[data-theme="dark"] .loading { --ld: 255, 255, 255; }
body:not(.gl-ready):not(.no-gl) .loading, body.gl-wait .loading { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .15s, visibility 0s linear 0s; }
.ld-in { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; transform: scale(1.04); transition: transform .9s var(--ease); }
body:not(.gl-ready):not(.no-gl) .ld-in, body.gl-wait .ld-in { transform: none; }
.ld { width: 7.75rem; height: 7.75rem; overflow: visible; }
.ld circle { fill: none; stroke-linecap: round; }
.ld-r circle { stroke: rgba(var(--ld), .36); stroke-width: 1; }
.ld-r circle + circle { stroke: rgba(var(--ld), .24); stroke-width: .75; }
.ld .ld-r3 circle { stroke: rgba(var(--ld), .24); }
.ld-r, .ld-bd { transform-box: view-box; transform-origin: 50% 50%; }
.ld-r1 { animation: ld-spin 9s linear infinite; }
.ld-r2 { animation: ld-spin 14s linear infinite reverse; }
.ld-r3 { animation: ld-spin 6.5s linear infinite; }
.ld-bd { animation: ld-spin 3.2s linear infinite; }
.ld-t { stroke: #9cc237; stroke-width: 1.6; opacity: var(--o); }
.ld .ld-b { fill: #d9f24a; stroke: #6f8f1f; stroke-width: .8; }
.ld .ld-s { fill: rgba(var(--ld), .5); stroke: none; }
.ld .ld-glow { fill: #d9f24a; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ld-fire 3.2s var(--ease) infinite; }
.ld-tx { font: 500 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ld), .55); padding-left: .16em; }
body.gl-ready:not(.gl-wait) .ld * { animation-play-state: paused; }   /* (at rest once it has gone) */
@keyframes ld-spin { to { transform: rotate(1turn); } }
@keyframes ld-fire { 0% { opacity: .55; transform: scale(.6); } 40% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } }
@property --sk { syntax: '<number>'; inherits: true; initial-value: 1; }
.scrim { position: fixed; left: 0; right: 0; bottom: 0; height: 58svh; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease), background .6s var(--ease), --sk .6s var(--ease); }
body.night-studio .scrim { --sk: 0; }   /* r5: no dark scrim over Story's floor in the hero and the same shape (11-night.js) */

/* ---------- nav (matches tbc.co) ---------- */
@property --nsc { syntax: '<color>'; inherits: true; initial-value: rgb(18 20 23 / .5); }
@property --nsh { syntax: '<color>'; inherits: true; initial-value: rgb(18 20 23 / .55); }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--nav-h); display: flex; align-items: center; gap: 2rem; padding: 0 var(--margin); color: var(--n950);
  --nsc: rgb(216 225 234 / .3); --nsh: rgb(222 230 238 / .6); transition: color var(--nav-t) var(--nav-e), --nsc var(--nav-t) var(--nav-e), --nsh var(--nav-t) var(--nav-e); }
body[data-theme="dark"] .nav { color: #fff; --nsc: rgb(18 20 23 / .5); --nsh: rgb(18 20 23 / .55); }
/* r8: and a halo round the ink in the same colour (--nsh), unseen on the chapter's own field: where a hand-off puts the other
   field or a picture under the bar, it lifts the ink locally instead of laying a band across the bar */
.brand { filter: drop-shadow(0 0 4px var(--nsh)) drop-shadow(0 0 10px color-mix(in srgb, var(--nsh) calc(var(--nav-k, 0) * 100%), transparent)); }
.nav-links a { text-shadow: 0 0 .25rem var(--nsh), 0 0 .8rem var(--nsh), 0 0 1.5rem color-mix(in srgb, var(--nsh) calc(var(--nav-k, 0) * 100%), transparent); }   /* (r9: and a wider one through a hand-off) */
/* r8: the bar's scrim, a long soft fall-off in the field's own colour (Story's charcoal on dark, the Mist on light; --nsc carries
   its strength, lighter on the Mist, where a pale band on a darker field would read as a band): invisible on the chapter's own
   field, it keeps the ink legible over whatever passes under it in a hand-off (a bright tile, the other field) */
.nav-scrim { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 3.5rem); z-index: -2; pointer-events: none;
  /* r10: through a hand-off the tint goes (--ns2: none at --nav-k 1) and the shield below carries the bar: the theme turns
     once, but the field under the bar can be both (a Mist margin beside a dark board), and a tint of the theme's own colour laid a black
     band over the light part. The shield's blur is the field's own tone, light over the Mist and dark over the charcoal */
  --ns2: color-mix(in srgb, var(--nsc) calc(100% - var(--nav-k, 0) * 100%), transparent);
  background: linear-gradient(to bottom, var(--ns2) 0%, color-mix(in srgb, var(--ns2) 92%, transparent) 30%, color-mix(in srgb, var(--ns2) 74%, transparent) 48%,
    color-mix(in srgb, var(--ns2) 48%, transparent) 64%, color-mix(in srgb, var(--ns2) 25%, transparent) 78%, color-mix(in srgb, var(--ns2) 9%, transparent) 90%, color-mix(in srgb, var(--ns2) 0%, transparent) 100%); }
/* r9: the shield. Whenever 3D can be moving under the bar (a hand-off: --nav-k, 06-dom.js, 0 while a chapter's copy is at rest,
   1 through the hand-off) a frosted strip comes up under the ink: a backdrop blur that turns whatever passes (a dot field, gold
   fingers, a row of blocks) into a soft, desaturated wash of its own tone, falling off below the hairline. No tint of its own,
   so the theme's one step turns nothing more than it did; the ink's halo (--nsh, wider through a hand-off) carries the
   contrast. At rest it is not drawn at all, so the bar over its own quiet field is as it was; the phone's solid bar has its own frost */
.nav-scrim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 2.5rem); pointer-events: none;
  opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(14px) saturate(.55); backdrop-filter: blur(14px) saturate(.55);
  --shm: linear-gradient(to bottom, #000 0, #000 calc(var(--nav-h) - 1rem), rgb(0 0 0 / .78) calc(var(--nav-h) - .25rem), rgb(0 0 0 / .45) calc(var(--nav-h) + .6rem), rgb(0 0 0 / .18) calc(var(--nav-h) + 1.4rem), transparent 100%);
  -webkit-mask-image: var(--shm); mask-image: var(--shm); transition: opacity .24s linear, visibility 0s linear .3s; }
.nav.shield .nav-scrim::before { opacity: var(--nav-k, 0); visibility: visible; transition: opacity .24s linear, visibility 0s linear 0s; }
/* r10: and the shield keeps the field's own tone (never darker than the field; under dark ink a touch lighter), so the ink holds
   by its halo over either field, with no band of the theme's colour */
body[data-theme="light"] .nav-scrim::before { -webkit-backdrop-filter: blur(14px) saturate(.55) brightness(1.1); backdrop-filter: blur(14px) saturate(.55) brightness(1.1); }
body.nav-solid .nav.shield .nav-scrim::before { opacity: 0; visibility: hidden; transition: opacity .24s linear, visibility 0s linear .3s; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--nav-t) var(--nav-e), background-color var(--nav-t) var(--nav-e);
  background: rgba(240,244,248,.965); -webkit-backdrop-filter: blur(16px) saturate(.45); backdrop-filter: blur(16px) saturate(.45); }   /* r8: a desaturated backdrop, so a glow under the bar never smears colour into it (r10: denser, so What's next's dark board scrolling out under it is no grey smudge) */
body[data-theme="dark"] .nav::before { background: rgba(13,15,18,.8); }
body.nav-solid .nav::before { opacity: 1; }
.nav::after { content: ""; position: absolute; left: var(--margin); right: var(--margin); bottom: 0; height: 1px; background: currentColor; opacity: .14;
  transition: left .6s var(--ease), right .6s var(--ease), opacity var(--nav-t) var(--nav-e), background-color var(--nav-t) var(--nav-e); }
body.at-hero .nav::after { left: 0; right: 0; opacity: .22; background: #dfe8ff; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; flex: 0 0 auto; }
.brand-mark, .brand-word { display: block; background: currentColor; -webkit-mask: var(--m) no-repeat center / contain; mask: var(--m) no-repeat center / contain; }
.brand-mark { --m: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 539 288' fill='none'%3E%3Cpath d='M307.106 150.598C307.106 167.022 293.797 180.339 277.345 180.37H261.655C245.203 180.339 231.894 167.022 231.894 150.598V137.464C231.894 121.008 245.264 107.691 261.716 107.691H277.253C293.736 107.691 307.076 121.039 307.076 137.464V150.598H307.106ZM476.072 47.5683H539V0.0304985H368.521V30.3511C368.521 46.776 355.213 60.0927 338.79 60.1232H261.625C245.203 60.0623 231.894 46.776 231.894 30.3511V0H184.276V90.5047C184.276 106.93 170.937 120.216 154.484 120.246H0V167.784H31.5928C48.0454 167.784 61.3846 181.07 61.4151 197.495V288H109.033V197.526C109.033 181.07 122.403 167.754 138.855 167.754H154.392C170.845 167.754 184.215 181.07 184.215 197.495V227.877H354.694V197.556C354.694 181.101 368.063 167.784 384.516 167.784H538.939V120.246H445.839C429.417 120.185 416.109 106.868 416.109 90.4741V77.3402C416.109 60.8848 429.478 47.5681 445.931 47.5681L476.072 47.5683Z' fill='%23000'/%3E%3C/svg%3E "); width: 5.6rem; height: 2.99rem; }
.brand-word { --m: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 468 188' fill='none'%3E%3Cpath d='M58.9843 48.2204H38.0171V45.898C39.9742 45.898 41.4198 45.751 42.3541 45.4542C43.2865 45.1588 43.913 44.5218 44.2317 43.5419C44.5504 42.5634 44.7101 41.0492 44.7101 38.9999V6.62626H40.7485C38.2444 6.62626 36.3658 6.89936 35.1138 7.44586C33.8608 7.99196 32.9622 8.93766 32.4161 10.2802C31.87 11.624 31.3458 13.5478 30.8453 16.0514H28.3184L29.0691 3.34766H68.0683L68.6144 16.0514H66.0875C65.5861 13.5477 65.0628 11.624 64.5167 10.2802C63.9706 8.93766 63.0829 7.99206 61.8528 7.44586C60.6236 6.89926 58.7341 6.62626 56.1843 6.62626H52.2911V38.9999C52.2911 41.0492 52.4381 42.5634 52.7349 43.5419C53.0308 44.5218 53.6572 45.1588 54.6133 45.4542C55.5695 45.751 57.0262 45.898 58.9842 45.898L58.9843 48.2204Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M90.7425 48.2193H73.9406V46.0339C75.7616 46.0339 77.0146 45.7723 77.6977 45.2481C78.3799 44.7253 78.7214 43.5303 78.7214 41.6627V7.1033C78.7214 5.9197 78.4027 5.1686 77.7652 4.8494C77.1278 4.5316 76.3533 4.3713 75.4437 4.3713C74.8967 4.3713 74.2364 4.417 73.4629 4.5078V2.3224L83.0931 0H85.6885V41.3896C85.6885 42.528 85.7789 43.4385 85.9616 44.1216C86.1424 44.8042 86.5981 45.2942 87.3278 45.5896C88.0557 45.8864 89.1936 46.0339 90.7424 46.0339L90.7425 48.2193ZM111.505 48.2193H94.7717V46.0339C96.3196 46.0339 97.4238 45.8745 98.0849 45.5558C98.7443 45.2375 99.1534 44.7362 99.3141 44.0531C99.473 43.37 99.5534 42.4599 99.5534 41.3211V30.2567C99.5534 28.4361 99.4383 26.7508 99.2118 25.2024C98.9835 23.6549 98.4483 22.4257 97.6063 21.5143C96.7634 20.6043 95.4319 20.1485 93.6109 20.1485C92.2447 20.1485 90.8894 20.4901 89.547 21.1727C88.2036 21.8558 86.621 23.0627 84.8 24.7928L84.8685 20.7631H85.9617C88.0101 18.7599 89.8649 17.3138 91.5279 16.4261C93.1891 15.538 94.9772 15.0941 96.8896 15.0941C98.7563 15.0941 100.315 15.4475 101.568 16.153C102.819 16.8594 103.81 17.8156 104.539 19.0215C105.267 20.2284 105.779 21.5946 106.076 23.1192C106.371 24.6452 106.52 26.227 106.52 27.8662V41.116C106.52 42.9379 106.826 44.2133 107.441 44.9407C108.057 45.6699 109.41 46.0339 111.505 46.0339V48.2193Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M128.307 48.9021C125.392 48.9021 122.809 48.2636 120.555 46.9897C118.301 45.7153 116.548 43.8134 115.296 41.2865C114.043 38.7596 113.418 35.6755 113.418 32.0321C113.418 28.2074 114.101 25.043 115.467 22.5385C116.833 20.0348 118.654 18.1673 120.931 16.938C123.207 15.7083 125.734 15.0938 128.512 15.0938C132.427 15.0938 135.569 16.3914 137.938 18.9869C140.305 21.5824 141.557 25.3386 141.694 30.2564H119.701L119.633 27.5243H133.976C133.93 25.7485 133.679 24.1331 133.224 22.6751C132.769 21.2185 132.075 20.0573 131.141 19.192C130.208 18.3276 128.991 17.8942 127.487 17.8942C125.029 17.8942 123.219 18.896 122.058 20.8993C120.897 22.9034 120.317 25.8404 120.317 29.7098C120.317 32.8071 120.77 35.3445 121.682 37.3253C122.592 39.3057 123.822 40.7637 125.37 41.6965C126.917 42.6303 128.649 43.0964 130.561 43.0964C132.381 43.0964 133.896 42.869 135.103 42.4133C136.308 41.959 137.333 41.3439 138.176 40.5695C139.018 39.7955 139.803 38.9302 140.533 37.9741L141.967 39.0669C141.329 40.3422 140.624 41.5832 139.85 42.7892C139.075 43.9961 138.176 45.0545 137.152 45.965C136.128 46.8764 134.898 47.5933 133.464 48.1166C132.03 48.6394 130.31 48.9021 128.307 48.9021Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M51.7446 109.732H29.752V107.409C31.573 107.409 32.9501 107.25 33.8843 106.932C34.8167 106.614 35.4432 105.987 35.7628 105.053C36.0806 104.121 36.2404 102.743 36.2404 100.922V73.3289C36.2404 71.5083 36.0806 70.1645 35.7628 69.2992C35.4432 68.4348 34.8167 67.865 33.8843 67.5914C32.9501 67.3183 31.573 67.1818 29.752 67.1818V64.8594H49.5593C53.657 64.8594 56.9237 65.2813 59.3602 66.1233C61.7949 66.9662 63.5483 68.1612 64.6187 69.7087C65.6881 71.2571 66.2241 73.1471 66.2241 75.3777C66.2241 78.4288 65.3017 80.7284 63.4579 82.2759C61.6141 83.8243 59.2798 84.9855 56.457 85.759V86.0325C58.4141 86.3512 60.2926 86.932 62.0917 87.7741C63.8899 88.6166 65.3931 89.823 66.5995 91.3937C67.8059 92.9644 68.4095 95.0476 68.4095 97.643C68.4095 101.559 66.941 104.553 64.004 106.624C61.067 108.697 56.9802 109.732 51.7446 109.732ZM43.7537 68.0694V84.8028H47.9885C51.9036 84.8028 54.5793 84.1316 56.0131 82.7882C57.4478 81.4457 58.1647 79.2485 58.1647 76.1973C58.1647 73.511 57.3903 71.4503 55.8423 70.016C54.2943 68.5817 51.54 67.8649 47.5784 67.8649C46.9857 67.8649 46.3711 67.8763 45.7346 67.8987C45.0962 67.9224 44.4368 67.979 43.7537 68.0694ZM48.33 106.931C49.7866 106.931 51.1984 106.841 52.5637 106.658C53.9299 106.478 55.1701 106.089 56.2861 105.497C57.4012 104.907 58.278 103.995 58.9163 102.765C59.5528 101.536 59.8724 99.8521 59.8724 97.7114C59.8724 95.0712 59.3135 93.0447 58.1984 91.6329C57.0824 90.2219 55.6477 89.2539 53.8961 88.7297C52.1427 88.2073 50.2871 87.9448 48.33 87.9448H43.7537V106.727C44.5272 106.773 45.2897 106.819 46.0413 106.863C46.7929 106.909 47.5546 106.931 48.33 106.931Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M90.47 109.733H73.5997V107.547C75.102 107.547 76.1951 107.41 76.8782 107.137C77.5613 106.863 77.9933 106.363 78.1759 105.634C78.3567 104.907 78.449 103.905 78.449 102.63V84.12C78.449 82.6177 78.186 81.6958 77.6636 81.3542C77.1394 81.0126 76.354 80.8419 75.3074 80.8419C74.8517 80.8419 74.2827 80.8876 73.5996 80.9784V78.7245L82.7521 76.8122H85.4151V102.561C85.4151 103.883 85.5174 104.907 85.7229 105.634C85.9275 106.363 86.3941 106.863 87.1229 107.137C87.8508 107.41 88.9667 107.547 90.4699 107.547L90.47 109.733ZM81.9321 71.8263C80.6572 71.8263 79.6097 71.4058 78.7905 70.5628C77.9704 69.7208 77.5613 68.6847 77.5613 67.455C77.5613 66.2253 77.9595 65.2011 78.7558 64.3815C79.5521 63.5619 80.6106 63.1523 81.9321 63.1523C83.3431 63.1523 84.4362 63.5619 85.2106 64.3815C85.9841 65.2011 86.3713 66.2258 86.3713 67.455C86.3713 68.6842 85.9841 69.7208 85.2106 70.5628C84.4362 71.4057 83.343 71.8263 81.9321 71.8263Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M108.365 110.418C103.401 110.418 99.543 108.961 96.7886 106.046C94.0324 103.133 92.6562 98.8747 92.6562 93.2747C92.6562 89.9962 93.2818 87.1053 94.5347 84.6003C95.7858 82.0971 97.5959 80.1386 99.9639 78.7268C102.331 77.3158 105.155 76.6094 108.433 76.6094C113.351 76.6094 117.164 78.0555 119.874 80.9464C122.582 83.8386 123.937 87.788 123.937 92.7962C123.937 96.6665 123.299 99.9113 122.025 102.53C120.749 105.148 118.939 107.117 116.595 108.436C114.249 109.757 111.507 110.418 108.365 110.418ZM108.638 107.481C110.368 107.481 111.814 107.026 112.975 106.115C114.137 105.204 114.99 103.713 115.537 101.641C116.083 99.5697 116.356 96.7578 116.356 93.2062C116.356 89.0172 115.673 85.671 114.307 83.166C112.941 80.6628 110.869 79.4098 108.092 79.4098C105.633 79.4098 103.721 80.5258 102.355 82.7564C100.989 84.9879 100.306 88.2203 100.306 92.4546C100.306 97.6911 101.012 101.516 102.423 103.929C103.833 106.343 105.907 107.527 108.638 107.481Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M143.469 109.731H126.394V107.545C127.898 107.545 128.99 107.398 129.673 107.101C130.356 106.805 130.776 106.294 130.937 105.565C131.096 104.836 131.175 103.835 131.175 102.56V68.7514C131.175 67.3404 130.89 66.4975 130.322 66.2245C129.752 65.9514 129.034 65.8145 128.171 65.8145C127.624 65.8145 126.918 65.8606 126.053 65.9515V63.8341L135.547 61.5117H138.142V102.56C138.142 103.881 138.245 104.906 138.449 105.633C138.655 106.362 139.132 106.862 139.884 107.136C140.634 107.408 141.83 107.545 143.469 107.545L143.469 109.731Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M161.09 110.418C156.126 110.418 152.268 108.961 149.513 106.046C146.757 103.133 145.381 98.8747 145.381 93.2747C145.381 89.9962 146.006 87.1053 147.259 84.6003C148.51 82.0971 150.321 80.1386 152.689 78.7268C155.056 77.3158 157.879 76.6094 161.158 76.6094C166.076 76.6094 169.889 78.0555 172.598 80.9464C175.307 83.8386 176.662 87.788 176.662 92.7962C176.662 96.6665 176.024 99.9113 174.75 102.53C173.474 105.148 171.664 107.117 169.32 108.436C166.974 109.757 164.231 110.418 161.09 110.418ZM161.363 107.481C163.092 107.481 164.539 107.026 165.7 106.115C166.861 105.204 167.714 103.713 168.261 101.641C168.807 99.5697 169.08 96.7578 169.08 93.2062C169.08 89.0172 168.397 85.671 167.032 83.166C165.666 80.6628 163.594 79.4098 160.816 79.4098C158.358 79.4098 156.446 80.5258 155.079 82.7564C153.713 84.9879 153.03 88.2203 153.03 92.4546C153.03 97.6911 153.736 101.516 155.148 103.929C156.558 106.343 158.631 107.527 161.363 107.481Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M191.689 125.782C188.683 125.782 186.315 125.441 184.585 124.758C182.855 124.075 181.636 123.164 180.931 122.026C180.225 120.887 179.873 119.68 179.873 118.407C179.873 117.178 180.328 115.981 181.238 114.821C182.149 113.66 183.492 112.259 185.268 110.621V109.8L187.659 110.416C186.976 111.553 186.474 112.589 186.156 113.523C185.837 114.456 185.679 115.333 185.679 116.153C185.679 117.973 186.498 119.351 188.137 120.284C189.776 121.218 192.348 121.685 195.855 121.685C198.495 121.685 200.602 121.377 202.173 120.763C203.743 120.147 204.87 119.385 205.553 118.474C206.237 117.563 206.578 116.653 206.578 115.743C206.578 114.558 206.213 113.66 205.485 113.044C204.756 112.431 203.834 111.987 202.719 111.713C201.603 111.44 200.396 111.269 199.099 111.201C197.801 111.132 196.538 111.098 195.309 111.098C193.304 111.052 191.757 111.03 190.664 111.03C189.572 111.03 188.774 111.019 188.274 110.996C187.772 110.973 187.34 110.962 186.976 110.962L185.815 110.552C185.223 110.369 184.573 110.051 183.868 109.596C183.162 109.141 182.547 108.549 182.025 107.821C181.5 107.092 181.238 106.25 181.238 105.293C181.238 104.246 181.489 103.267 181.99 102.356C182.49 101.446 183.174 100.569 184.039 99.7265C184.903 98.8845 185.859 98.0534 186.908 97.2343V96.4142L189.23 97.7119C188.956 98.0763 188.66 98.5311 188.342 99.0772C188.023 99.6242 187.772 100.194 187.591 100.785C187.408 101.378 187.318 101.901 187.318 102.356C187.318 102.995 187.533 103.495 187.966 103.859C188.398 104.224 189.206 104.485 190.391 104.644C191.574 104.804 193.328 104.907 195.65 104.951C198.837 104.951 201.592 105.123 203.914 105.464C206.237 105.805 208.035 106.557 209.31 107.718C210.584 108.878 211.222 110.734 211.222 113.284C211.222 115.606 210.618 117.563 209.412 119.158C208.205 120.751 206.635 122.037 204.7 123.017C202.763 123.995 200.647 124.701 198.348 125.134C196.048 125.567 193.828 125.782 191.689 125.782ZM194.967 99.2142C193.738 99.2142 192.587 99.101 191.518 98.8726C190.447 98.6461 189.411 98.3502 188.41 97.9849L187.385 97.2342C186.338 96.6424 185.393 95.9484 184.551 95.1502C183.709 94.3539 183.025 93.3639 182.502 92.1794C181.978 90.9958 181.717 89.5392 181.717 87.8082C181.717 85.4415 182.298 83.4265 183.458 81.7639C184.619 80.1023 186.179 78.8388 188.137 77.9735C190.094 77.1091 192.279 76.6758 194.694 76.6758C196.014 76.6758 197.334 76.79 198.655 77.0174C199.975 77.2457 201.226 77.5873 202.412 78.0416C203.595 78.4973 204.597 79.0439 205.416 79.6809V81.8663C205.871 82.5494 206.361 83.4375 206.885 84.5302C207.408 85.6229 207.67 87.0348 207.67 88.7649C207.67 91.0425 207.112 92.9649 205.997 94.5366C204.881 96.1074 203.368 97.28 201.456 98.0535C199.543 98.8279 197.38 99.2142 194.967 99.2142ZM195.036 96.5512C196.628 96.5512 197.949 95.9704 198.996 94.8087C200.044 93.648 200.567 91.4973 200.567 88.3548C200.567 85.532 200.021 83.3347 198.928 81.7639C197.836 80.1931 196.287 79.4077 194.284 79.4077C192.645 79.4077 191.301 80.0566 190.254 81.3543C189.206 82.652 188.683 84.7128 188.683 87.5351C188.683 90.4954 189.24 92.7374 190.357 94.2625C191.472 95.7885 193.031 96.5512 195.036 96.5512ZM211.837 77.837V81.7297L204.392 81.5932L202.07 78.2466L211.837 77.837Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M232.394 109.733H215.523V107.547C217.026 107.547 218.119 107.41 218.802 107.137C219.485 106.863 219.917 106.363 220.1 105.634C220.281 104.907 220.373 103.905 220.373 102.63V84.12C220.373 82.6177 220.11 81.6958 219.587 81.3542C219.063 81.0126 218.278 80.8419 217.231 80.8419C216.776 80.8419 216.207 80.8876 215.523 80.9784V78.7245L224.676 76.8122H227.339V102.561C227.339 103.883 227.441 104.907 227.647 105.634C227.851 106.363 228.318 106.863 229.047 107.137C229.775 107.41 230.891 107.547 232.394 107.547L232.394 109.733ZM223.856 71.8263C222.581 71.8263 221.533 71.4058 220.714 70.5628C219.894 69.7208 219.485 68.6847 219.485 67.455C219.485 66.2253 219.883 65.2011 220.68 64.3815C221.476 63.5619 222.534 63.1523 223.856 63.1523C225.267 63.1523 226.36 63.5619 227.134 64.3815C227.908 65.2011 228.295 66.2258 228.295 67.455C228.295 68.6842 227.908 69.7208 227.134 70.5628C226.36 71.4057 225.267 71.8263 223.856 71.8263Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M261.146 99.1486L262.581 100.173C261.715 102.04 260.713 103.759 259.576 105.329C258.437 106.9 257.003 108.141 255.273 109.052C253.542 109.961 251.356 110.418 248.716 110.418C245.802 110.418 243.286 109.757 241.169 108.436C239.052 107.117 237.413 105.25 236.251 102.836C235.091 100.424 234.51 97.5779 234.51 94.2994C234.51 90.7469 235.124 87.6514 236.354 85.0103C237.584 82.3701 239.393 80.3094 241.784 78.829C244.175 77.35 247.1 76.6094 250.56 76.6094C254.02 76.6094 256.73 77.3158 258.688 78.7268C260.645 80.1387 261.625 81.8684 261.625 83.9177C261.625 85.0561 261.305 85.9218 260.669 86.5131C260.03 87.1053 259.188 87.4008 258.142 87.4008C257.049 87.4008 256.218 87.1277 255.649 86.5812C255.079 86.0351 254.635 85.3638 254.317 84.5666C253.997 83.7703 253.679 82.973 253.361 82.1762C253.041 81.3799 252.575 80.7077 251.96 80.1611C251.345 79.615 250.424 79.3415 249.194 79.3415C246.644 79.3415 244.697 80.3438 243.354 82.347C242.011 84.3511 241.34 87.2644 241.34 91.0886C241.34 95.1416 242.113 98.4092 243.662 100.889C245.209 103.372 247.76 104.612 251.312 104.612C253.587 104.612 255.432 104.168 256.844 103.28C258.254 102.393 259.689 101.015 261.146 99.1486Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M275.627 110.277C273.032 110.277 270.994 109.594 269.515 108.228C268.035 106.862 267.295 104.995 267.295 102.628C267.295 100.761 267.716 99.1906 268.559 97.9157C269.401 96.6408 270.505 95.5705 271.871 94.7047C273.237 93.8408 274.728 93.123 276.345 92.5531C277.961 91.9851 279.543 91.4956 281.091 91.0846C282.639 90.6755 284.028 90.2892 285.257 89.9239V86.7823C285.257 83.8691 284.814 81.8421 283.926 80.7038C283.038 79.5659 281.638 78.996 279.726 78.996C277.95 78.996 276.799 79.3718 276.277 80.1229C275.752 80.8745 275.491 82.2745 275.491 84.3234C275.491 85.5079 275.172 86.3841 274.535 86.9531C273.897 87.523 273.055 87.8065 272.008 87.8065C271.233 87.8065 270.493 87.5111 269.788 86.9188C269.082 86.3275 268.73 85.3937 268.73 84.1183C268.73 82.8443 269.23 81.6256 270.232 80.4644C271.233 79.3032 272.657 78.3708 274.5 77.6644C276.345 76.9589 278.519 76.6055 281.024 76.6055C284.939 76.6055 287.785 77.4489 289.561 79.1324C291.337 80.8178 292.225 83.4813 292.225 87.1237V102.423C292.225 103.834 292.384 104.745 292.702 105.154C293.02 105.565 293.544 105.769 294.273 105.769C294.91 105.769 295.491 105.599 296.015 105.257C296.538 104.916 297.05 104.494 297.552 103.994L298.713 105.223C297.574 106.862 296.436 108.104 295.298 108.946C294.159 109.788 292.588 110.209 290.585 110.209C288.718 110.209 287.489 109.765 286.897 108.876C286.305 107.989 285.895 106.681 285.668 104.949L285.258 103.925V92.3137C283.3 92.816 281.512 93.3968 279.897 94.0562C278.28 94.7165 276.982 95.5822 276.004 96.6516C275.024 97.7219 274.535 99.1219 274.535 100.852C274.535 102.536 274.922 103.846 275.696 104.779C276.469 105.713 277.54 106.179 278.906 106.179C279.999 106.179 281.126 105.906 282.287 105.359C283.448 104.813 284.643 103.971 285.873 102.832L286.351 105.701H285.463C284.415 106.612 283.425 107.421 282.492 108.126C281.558 108.833 280.556 109.367 279.487 109.731C278.416 110.095 277.131 110.277 275.627 110.277Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M319.954 109.731H302.879V107.545C304.382 107.545 305.474 107.398 306.157 107.101C306.84 106.805 307.26 106.294 307.421 105.565C307.58 104.836 307.66 103.835 307.66 102.56V68.7514C307.66 67.3404 307.375 66.4975 306.807 66.2245C306.237 65.9514 305.519 65.8145 304.655 65.8145C304.108 65.8145 303.402 65.8606 302.537 65.9515V63.8341L312.031 61.5117H314.627V102.56C314.627 103.881 314.729 104.906 314.933 105.633C315.139 106.362 315.617 106.862 316.368 107.136C317.119 107.408 318.314 107.545 319.954 107.545L319.954 109.731Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M53.4536 171.998C48.6728 171.998 44.6874 171.007 41.5011 169.027C38.3139 167.046 35.923 164.315 34.3294 160.831C32.7358 157.348 31.9395 153.398 31.9395 148.981C31.9395 143.927 32.9065 139.659 34.8417 136.175C36.7769 132.692 39.4518 130.052 42.8673 128.252C46.2819 126.454 50.1979 125.555 54.6144 125.555C57.0272 125.555 58.9514 125.748 60.3861 126.136C61.8199 126.523 62.9578 126.921 63.8007 127.33C64.6427 127.74 65.3596 127.946 65.9523 127.946C66.5897 127.946 67.0455 127.706 67.3185 127.228C67.5915 126.749 67.8865 126.192 68.2062 125.555H70.5286V141.536H67.9332C67.1579 137.166 65.6218 133.933 63.3231 131.838C61.0226 129.745 58.1204 128.696 54.6144 128.696C49.924 128.696 46.3505 130.393 43.892 133.785C41.4326 137.177 40.2034 141.902 40.2034 147.957C40.2034 152.42 40.8408 156.05 42.1157 158.85C43.3897 161.651 45.1997 163.712 47.5458 165.031C49.8901 166.353 52.6563 167.012 55.8435 167.012C59.0764 167.012 61.8307 166.42 64.1084 165.236C66.3842 164.053 68.502 162.413 70.46 160.318L72.2354 161.889C70.9148 163.801 69.4116 165.521 67.7275 167.046C66.0426 168.572 64.0398 169.778 61.7174 170.666C59.395 171.554 56.6399 171.998 53.4536 171.998Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M91.0173 171.929C86.0538 171.929 82.1954 170.474 79.441 167.559C76.6848 164.645 75.3086 160.388 75.3086 154.786C75.3086 151.508 75.9342 148.618 77.1871 146.112C78.4382 143.61 80.2483 141.651 82.6163 140.239C84.9834 138.828 87.8072 138.121 91.0857 138.121C96.0035 138.121 99.8163 139.568 102.526 142.459C105.235 145.35 106.59 149.3 106.59 154.308C106.59 158.18 105.951 161.423 104.677 164.041C103.402 166.66 101.592 168.629 99.2474 169.949C96.9013 171.269 94.1589 171.929 91.0173 171.929ZM91.2903 168.992C93.02 168.992 94.4666 168.538 95.6273 167.627C96.7889 166.717 97.6419 165.226 98.1889 163.153C98.735 161.082 99.0081 158.27 99.0081 154.718C99.0081 150.53 98.325 147.183 96.9597 144.678C95.5935 142.175 93.5213 140.922 90.7442 140.922C88.2857 140.922 86.3734 142.038 85.0072 144.269C83.641 146.5 82.9579 149.732 82.9579 153.968C82.9579 159.204 83.6638 163.029 85.0757 165.442C86.4857 167.855 88.5588 169.039 91.2903 168.992Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M125.985 171.246H109.252V169.062C110.709 169.062 111.767 168.925 112.427 168.651C113.087 168.379 113.509 167.889 113.691 167.182C113.872 166.477 113.964 165.465 113.964 164.143V145.498C113.964 144.223 113.736 143.392 113.281 143.005C112.825 142.619 112.12 142.424 111.164 142.424C110.617 142.424 110.003 142.47 109.319 142.561V140.307L118.472 138.326H120.726V144.678L120.93 146.317V164.28C120.93 165.555 121.056 166.534 121.307 167.217C121.556 167.9 122.046 168.378 122.775 168.651C123.502 168.925 124.573 169.062 125.985 169.062V171.246ZM146.202 171.246H129.195V169.062C130.742 169.062 131.858 168.902 132.541 168.583C133.225 168.265 133.668 167.695 133.873 166.875C134.078 166.055 134.181 164.895 134.181 163.392V150.825C134.181 147.776 133.691 145.737 132.712 144.713C131.732 143.688 130.446 143.176 128.854 143.176C127.669 143.176 126.565 143.414 125.541 143.893C124.517 144.371 123.571 144.941 122.707 145.601C121.841 146.261 121.089 146.932 120.453 147.615L119.906 143.859H121.067C122.797 142.311 124.517 140.968 126.224 139.829C127.931 138.691 129.946 138.121 132.268 138.121C134.636 138.121 136.513 138.77 137.903 140.068C139.291 141.366 140.259 143.063 140.805 145.157C140.897 145.475 140.965 145.805 141.011 146.147C141.056 146.488 141.101 146.842 141.147 147.206V163.392C141.147 164.85 141.25 165.988 141.455 166.808C141.659 167.627 142.126 168.207 142.855 168.548C143.583 168.89 144.699 169.062 146.202 169.062L146.202 171.246ZM166.008 171.246H149.479V169.062C150.983 169.062 152.063 168.868 152.724 168.481C153.384 168.094 153.794 167.49 153.953 166.671C154.112 165.851 154.193 164.759 154.193 163.392V151.098C154.193 148.959 153.953 147.331 153.475 146.215C152.997 145.1 152.337 144.315 151.495 143.859C150.651 143.404 149.685 143.176 148.592 143.176C147.134 143.176 145.7 143.653 144.29 144.611C142.878 145.566 141.626 146.546 140.532 147.548L139.645 143.995H140.738C142.558 142.128 144.368 140.683 146.167 139.659C147.965 138.634 149.844 138.121 151.802 138.121C154.67 138.121 156.947 139.043 158.632 140.888C160.316 142.732 161.159 145.771 161.159 150.006V163.392C161.159 164.758 161.249 165.863 161.432 166.705C161.614 167.547 162.047 168.15 162.73 168.515C163.413 168.879 164.506 169.062 166.008 169.062L166.008 171.246Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M185.608 186.273H167.031V184.086C169.171 184.086 170.537 183.745 171.129 183.062C171.721 182.379 172.017 181.082 172.017 179.169V145.84C172.017 144.474 171.869 143.54 171.573 143.04C171.276 142.539 170.559 142.287 169.422 142.287C168.966 142.287 168.237 142.334 167.236 142.424V140.17L176.457 138.258H178.847V143.995H179.12C180.804 142.128 182.489 140.683 184.175 139.659C185.859 138.634 187.726 138.121 189.775 138.121C192.051 138.121 194.032 138.737 195.717 139.966C197.401 141.195 198.722 142.949 199.678 145.224C200.634 147.502 201.113 150.234 201.113 153.421C201.113 157.292 200.441 160.603 199.098 163.358C197.754 166.114 195.945 168.231 193.668 169.71C191.39 171.19 188.863 171.929 186.087 171.929C184.811 171.929 183.605 171.793 182.467 171.52C181.328 171.246 180.258 170.769 179.257 170.086H178.984V178.691C178.984 180.149 179.165 181.263 179.53 182.038C179.894 182.812 180.555 183.336 181.511 183.609C182.467 183.882 183.833 184.019 185.608 184.019V186.273ZM185.813 168.925C188.044 168.925 189.888 167.843 191.345 165.681C192.802 163.518 193.531 160.069 193.531 155.333C193.531 151.144 192.905 148.094 191.653 146.181C190.4 144.269 188.636 143.312 186.36 143.312C184.675 143.312 183.195 143.756 181.921 144.644C180.645 145.532 179.667 146.386 178.984 147.206V164.758C179.393 165.213 179.916 165.772 180.555 166.431C181.191 167.093 181.943 167.673 182.808 168.173C183.672 168.674 184.675 168.925 185.813 168.925Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M217.095 171.928C214.09 171.928 211.778 171.018 210.162 169.196C208.546 167.376 207.738 164.165 207.738 159.566V145.906C207.738 144.632 207.612 143.697 207.362 143.106C207.111 142.514 206.645 142.139 205.962 141.979C205.279 141.82 204.323 141.739 203.094 141.739V139.554L212.724 138.598H214.705V158.337C214.705 160.614 214.954 162.355 215.455 163.561C215.956 164.768 216.639 165.61 217.505 166.088C218.369 166.567 219.349 166.806 220.442 166.806C222.081 166.806 223.481 166.464 224.642 165.781C225.803 165.098 227.043 164.188 228.364 163.049V145.769C228.364 144.539 228.204 143.641 227.887 143.071C227.567 142.503 227.009 142.139 226.213 141.979C225.415 141.82 224.266 141.739 222.764 141.739V139.554L233.35 138.598H235.33V163.117C235.33 165.166 235.626 166.464 236.219 167.011C236.81 167.557 237.949 167.83 239.634 167.83H240.248V169.879L230.55 171.586H228.706V166.123H228.364C227.089 167.444 225.871 168.536 224.71 169.401C223.55 170.266 222.354 170.903 221.125 171.314C219.895 171.723 218.551 171.928 217.095 171.928Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M264.356 164.62L265.791 165.986C264.925 167.215 264.071 168.274 263.229 169.162C262.386 170.05 261.43 170.744 260.361 171.244C259.29 171.745 257.868 171.996 256.092 171.996C253.724 171.996 251.961 171.314 250.799 169.948C249.638 168.581 249.057 166.236 249.057 162.912V142.559H245.164V140.579C246.848 139.531 248.362 138.143 249.707 136.412C251.049 134.682 252.358 132.36 253.633 129.445H256.023V139.281H264.015V142.559H256.023V160.795C256.023 163.254 256.251 164.95 256.707 165.884C257.161 166.817 258.049 167.284 259.37 167.284C260.554 167.284 261.476 167.056 262.137 166.601C262.796 166.146 263.537 165.485 264.356 164.62Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M285.734 171.247H268.863V169.063C270.366 169.063 271.459 168.926 272.142 168.652C272.825 168.379 273.257 167.879 273.44 167.15C273.62 166.421 273.713 165.42 273.713 164.144V145.635C273.713 144.133 273.45 143.21 272.927 142.869C272.403 142.527 271.618 142.357 270.571 142.357C270.115 142.357 269.546 142.403 268.863 142.494V140.24L278.016 138.327H280.679V164.076C280.679 165.397 280.781 166.421 280.987 167.15C281.191 167.879 281.658 168.379 282.387 168.652C283.114 168.926 284.23 169.063 285.734 169.063L285.734 171.247ZM277.196 133.342C275.921 133.342 274.873 132.921 274.054 132.078C273.234 131.236 272.825 130.2 272.825 128.97C272.825 127.741 273.223 126.716 274.019 125.897C274.816 125.077 275.874 124.668 277.196 124.668C278.607 124.668 279.7 125.077 280.474 125.897C281.248 126.716 281.635 127.741 281.635 128.97C281.635 130.2 281.248 131.236 280.474 132.078C279.7 132.921 278.607 133.342 277.196 133.342Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M307.248 171.246H290.447V169.062C291.95 169.062 293.031 168.914 293.691 168.617C294.35 168.322 294.76 167.809 294.92 167.08C295.079 166.353 295.16 165.373 295.16 164.143V145.43C295.16 144.2 294.92 143.392 294.443 143.005C293.964 142.619 293.269 142.424 292.36 142.424C291.767 142.424 291.152 142.47 290.515 142.561V140.307L299.736 138.326H301.99V144.678L302.194 146.249V164.143C302.194 165.373 302.285 166.353 302.467 167.08C302.649 167.809 303.093 168.322 303.8 168.617C304.505 168.914 305.655 169.062 307.248 169.062V171.246ZM327.875 171.246H311.073V169.062C312.621 169.062 313.737 168.914 314.42 168.617C315.103 168.322 315.535 167.822 315.717 167.115C315.899 166.41 315.991 165.419 315.991 164.143V152.26C315.991 149.756 315.717 147.843 315.171 146.523C314.624 145.202 313.884 144.315 312.951 143.859C312.018 143.404 311.005 143.176 309.912 143.176C308.683 143.176 307.578 143.404 306.6 143.859C305.62 144.315 304.732 144.883 303.936 145.566C303.138 146.249 302.353 146.91 301.58 147.548L301.17 143.859H302.263C304.083 142.22 305.814 140.853 307.454 139.761C309.093 138.668 310.982 138.121 313.122 138.121C316.355 138.121 318.802 139.18 320.465 141.297C322.126 143.414 322.957 146.523 322.957 150.62V164.143C322.957 165.373 323.06 166.353 323.265 167.08C323.469 167.809 323.924 168.322 324.631 168.617C325.336 168.914 326.417 169.062 327.875 169.062V171.246Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M343.378 187.298C340.373 187.298 338.005 186.957 336.275 186.274C334.544 185.591 333.326 184.679 332.621 183.541C331.914 182.403 331.562 181.196 331.562 179.921C331.562 178.692 332.017 177.498 332.928 176.336C333.838 175.175 335.182 173.775 336.958 172.135V171.317L339.349 171.93C338.666 173.068 338.163 174.104 337.846 175.038C337.527 175.971 337.368 176.848 337.368 177.667C337.368 179.488 338.187 180.866 339.827 181.8C341.466 182.732 344.038 183.2 347.544 183.2C350.185 183.2 352.291 182.893 353.862 182.277C355.433 181.664 356.56 180.9 357.243 179.991C357.926 179.079 358.268 178.168 358.268 177.258C358.268 176.073 357.902 175.175 357.174 174.56C356.446 173.945 355.523 173.501 354.408 173.229C353.292 172.955 352.086 172.784 350.788 172.716C349.49 172.648 348.227 172.613 346.998 172.613C344.994 172.568 343.447 172.546 342.353 172.546C341.261 172.546 340.464 172.533 339.963 172.511C339.461 172.487 339.029 172.476 338.666 172.476L337.504 172.067C336.912 171.885 336.263 171.565 335.558 171.111C334.851 170.656 334.236 170.064 333.714 169.335C333.19 168.608 332.928 167.764 332.928 166.809C332.928 165.761 333.178 164.783 333.679 163.872C334.18 162.96 334.863 162.086 335.729 161.242C336.593 160.4 337.549 159.569 338.597 158.749V157.929L340.92 159.227C340.646 159.592 340.35 160.047 340.031 160.593C339.712 161.139 339.461 161.709 339.28 162.301C339.098 162.893 339.007 163.417 339.007 163.872C339.007 164.509 339.223 165.01 339.656 165.374C340.088 165.739 340.896 166 342.08 166.16C343.264 166.319 345.017 166.422 347.34 166.467C350.526 166.467 353.281 166.637 355.604 166.979C357.926 167.32 359.724 168.072 360.999 169.233C362.273 170.394 362.911 172.248 362.911 174.8C362.911 177.121 362.308 179.079 361.101 180.673C359.895 182.266 358.324 183.552 356.389 184.531C354.453 185.51 352.336 186.215 350.037 186.649C347.738 187.081 345.518 187.298 343.378 187.298ZM346.657 160.729C345.427 160.729 344.277 160.617 343.207 160.389C342.137 160.161 341.1 159.865 340.1 159.5L339.075 158.749C338.027 158.158 337.083 157.463 336.241 156.666C335.398 155.87 334.715 154.879 334.192 153.695C333.668 152.511 333.406 151.055 333.406 149.324C333.406 146.957 333.987 144.942 335.148 143.279C336.309 141.618 337.869 140.354 339.826 139.488C341.784 138.624 343.969 138.191 346.384 138.191C347.703 138.191 349.024 138.305 350.344 138.533C351.665 138.761 352.916 139.103 354.101 139.557C355.285 140.012 356.287 140.559 357.106 141.196V143.381C357.561 144.065 358.05 144.953 358.574 146.045C359.098 147.138 359.36 148.549 359.36 150.28C359.36 152.557 358.802 154.48 357.687 156.051C356.571 157.622 355.058 158.794 353.145 159.569C351.233 160.343 349.069 160.729 346.657 160.729ZM346.725 158.065C348.318 158.065 349.638 157.486 350.686 156.325C351.733 155.163 352.257 153.012 352.257 149.87C352.257 147.047 351.711 144.85 350.617 143.279C349.525 141.708 347.976 140.923 345.974 140.923C344.334 140.923 342.991 141.572 341.943 142.869C340.896 144.168 340.373 146.228 340.373 149.05C340.373 152.011 340.93 154.254 342.047 155.778C343.162 157.304 344.721 158.065 346.725 158.065ZM363.526 139.352V143.245L356.081 143.108L353.76 139.762L363.526 139.352Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M401.704 171.998C396.923 171.998 392.937 171.007 389.751 169.027C386.564 167.046 384.173 164.315 382.579 160.831C380.986 157.348 380.189 153.398 380.189 148.981C380.189 143.927 381.157 139.659 383.092 136.175C385.027 132.692 387.702 130.052 391.117 128.252C394.532 126.454 398.448 125.555 402.865 125.555C405.277 125.555 407.201 125.748 408.636 126.136C410.07 126.523 411.208 126.921 412.051 127.33C412.893 127.74 413.61 127.946 414.202 127.946C414.84 127.946 415.296 127.706 415.569 127.228C415.842 126.749 416.137 126.192 416.456 125.555H418.779V141.536H416.183C415.408 137.166 413.872 133.933 411.573 131.838C409.273 129.745 406.371 128.696 402.865 128.696C398.174 128.696 394.601 130.393 392.142 133.785C389.683 137.177 388.453 141.902 388.453 147.957C388.453 152.42 389.091 156.05 390.366 158.85C391.64 161.651 393.45 163.712 395.796 165.031C398.14 166.353 400.906 167.012 404.094 167.012C407.326 167.012 410.081 166.42 412.358 165.236C414.634 164.053 416.752 162.413 418.71 160.318L420.485 161.889C419.165 163.801 417.662 165.521 415.978 167.046C414.293 168.572 412.29 169.778 409.967 170.666C407.645 171.554 404.89 171.998 401.704 171.998Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M439.267 171.929C434.304 171.929 430.445 170.474 427.691 167.559C424.935 164.645 423.559 160.388 423.559 154.786C423.559 151.508 424.184 148.618 425.437 146.112C426.688 143.61 428.498 141.651 430.866 140.239C433.233 138.828 436.057 138.121 439.336 138.121C444.254 138.121 448.066 139.568 450.776 142.459C453.485 145.35 454.84 149.3 454.84 154.308C454.84 158.18 454.201 161.423 452.928 164.041C451.652 166.66 449.842 168.629 447.497 169.949C445.151 171.269 442.409 171.929 439.267 171.929ZM439.54 168.992C441.27 168.992 442.717 168.538 443.877 167.627C445.039 166.717 445.892 165.226 446.439 163.153C446.985 161.082 447.258 158.27 447.258 154.718C447.258 150.53 446.575 147.183 445.21 144.678C443.844 142.175 441.771 140.922 438.994 140.922C436.536 140.922 434.624 142.038 433.257 144.269C431.891 146.5 431.208 149.732 431.208 153.968C431.208 159.204 431.914 163.029 433.326 165.442C434.736 167.855 436.809 169.039 439.54 168.992Z' fill='%23000'%3E%3C/path%3E%3Cpath d='M462.693 171.859C461.236 171.859 460.132 171.437 459.381 170.595C458.629 169.753 458.254 168.695 458.254 167.419C458.254 166.145 458.652 165.063 459.449 164.175C460.246 163.288 461.35 162.844 462.762 162.844C464.218 162.844 465.333 163.288 466.109 164.175C466.882 165.063 467.269 166.168 467.269 167.488C467.269 168.672 466.882 169.697 466.109 170.561C465.333 171.425 464.196 171.859 462.693 171.859Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E"); width: 5.95rem; height: 2.39rem; }
.nav-links { display: flex; gap: 2.4rem; margin-left: auto; margin-right: auto; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: .9375rem; opacity: .92; transition: opacity .3s var(--ease); }
.nav-links a:hover { opacity: .6; }
.nav-cta { display: flex; align-items: center; gap: .5rem; }
.nav-menu { display: none; }

/* ---------- buttons: one system (Story's ink and hairline glass pills) ---------- */
.pill { --pb: var(--n950); --pf: #fff; --pe: inset 0 1px 0 rgba(255,255,255,.13); --ps: 0 1px 1px rgba(15,17,19,.16), 0 2px 5px -1px rgba(15,17,19,.14), 0 10px 20px -12px rgba(15,17,19,.5);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1.125rem; border: 0; border-radius: 100vw; cursor: pointer;
  font: 500 .9375rem/1 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; background-color: var(--pb); color: var(--pf); box-shadow: var(--pe), var(--ps);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease); -webkit-tap-highlight-color: transparent; }
.pill-i { width: .875rem; height: .875rem; flex: 0 0 auto; margin-right: -.1875rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.pill:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover: hover) { .pill:hover { transform: translateY(-1px); } .pill:hover .pill-i { transform: translateX(2px); } }
.pill:active { transform: translateY(0) scale(.98); transition-duration: .15s; }
.pill--ghost { --pb: rgba(255,255,255,.62); --pf: var(--n950); --pe: inset 0 0 0 1px var(--n300); --ps: 0 1px 2px rgba(15,17,19,.04); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.nav .pill--ghost { --pb: rgba(250,252,253,.84); }   /* r8: denser glass on the bar, so neither Login turns the field's grey when the other field passes under it */
body[data-theme="dark"] .nav .pill--ghost { --pb: rgba(13,15,18,.46); --pf: #fff; --pe: inset 0 0 0 1px rgba(255,255,255,.3); }   /* r8: charcoal glass (a navy tint at .2 took the field's grey) */
@media (hover: hover) { body[data-theme="dark"] .nav .pill--ghost:hover { --pb: rgba(255,255,255,.1); --pe: inset 0 0 0 1px rgba(255,255,255,.5); } .pill--ghost:hover { --pb: rgba(243,247,250,.96); } }
/* the nav's try pill: ink on the light chapters, brand lime on the night (the Vivid accent) */
.pill--try { --pb: var(--n950); --pf: #fff; }
body[data-theme="dark"] .pill--try { --pb: #fff; --pf: var(--n950); --pe: inset 0 1px 0 rgba(255,255,255,.5); --ps: 0 8px 22px -12px rgba(0,0,0,.6); }   /* v4: Story's white pill on the dark chapters */
/* r8: the nav's pills turn with the theme in the nav's one step. On the hero (which carries its own "Try the model") the pill is
   away and Login stands in its place at the right margin (--try-w: the pill and its gap, 06-dom.js); as the hero leaves, Login
   eases left to make room and the pill fades in after it with a short slide, and the reverse on the way back */
.nav .pill { transition: transform .6s var(--ease), box-shadow var(--nav-t) var(--nav-e), background-color var(--nav-t) var(--nav-e), color var(--nav-t) var(--nav-e); }
.nav .pill--try { transition: transform .6s var(--ease) .06s, box-shadow var(--nav-t) var(--nav-e), background-color var(--nav-t) var(--nav-e), color var(--nav-t) var(--nav-e), opacity .42s var(--nav-e) .14s, visibility 0s linear 0s; }
body.at-hero .nav .pill--try { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(14px) scale(.96);
  transition: transform .5s var(--ease), box-shadow var(--nav-t) var(--nav-e), background-color var(--nav-t) var(--nav-e), color var(--nav-t) var(--nav-e), opacity .22s var(--nav-e), visibility 0s linear .22s; }
body.at-hero .nav .pill--ghost { transform: translateX(var(--try-w, 0px)); transition: transform .6s var(--ease) .04s, box-shadow var(--nav-t) var(--nav-e), background-color var(--nav-t) var(--nav-e), color var(--nav-t) var(--nav-e); }
.nav .pill:active { transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) {   /* (no slide: Login and the pill simply trade places) */
  .nav .pill, body.at-hero .nav .pill--try, body.at-hero .nav .pill--ghost { transition-property: opacity, visibility, background-color, color, box-shadow; transition-duration: .2s, 0s, var(--nav-t), var(--nav-t), var(--nav-t); transition-delay: 0s; }
  body.at-hero .nav .pill--try { transform: none; }
}

/* the hero's buttons (Vivid): a lime pill with an ink disc, and frosted glass with a ghost disc */
.pill--hero { height: 3.6rem; padding: 0 .45rem 0 1.7rem; gap: 1.1rem; font: 600 1.0625rem/1 var(--sans); letter-spacing: -.005em; background: #fff; color: var(--n950);   /* v4: Story's white pill (BF: Story is the base); the lime arrow disc is the one Vivid accent */
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08); }
@media (hover: hover) { .pill--hero:hover { box-shadow: 0 18px 48px -14px rgba(0,0,0,.75), 0 0 0 5px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.7); } .pill--hero:hover .pill-ic { transform: translateX(4px) rotate(-8deg); } }
.pill-ic { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--n950); color: var(--lime); flex: none; transition: transform .5s var(--spring), background-color .4s var(--ease); }
.pill--glass { height: 3.6rem; padding: 0 1.6rem 0 .45rem; gap: .95rem; font: 500 1.0625rem/1 var(--sans); color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%), rgba(22,24,28,.35); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(216,226,236,.24), inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px -14px rgba(0,0,0,.6); }
@media (hover: hover) { .pill--glass:hover { box-shadow: inset 0 0 0 1px rgba(216,226,236,.5), inset 0 1px 0 rgba(255,255,255,.3), 0 14px 36px -14px rgba(0,0,0,.6); } .pill--glass:hover .pill-ic--ghost { transform: translateY(3px); } }
.pill-ic--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(216,226,236,.26); }
.pill--hero:active, .pill--glass:active { transform: scale(.97); }

/* ---------- chapters ---------- */
main { position: relative; z-index: 3; }
.ch { position: relative; height: calc(var(--len, 1.6) * 100svh); }
.ch--cut { height: 0; overflow: hidden; }   /* v4: a chapter cut in Round 2 keeps its index, not its scroll (03-conductor.js) */
.stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: var(--nav-h) var(--margin) 0; pointer-events: none; }
/* r8: a chapter's copy never runs under the bar: as its sticky frame scrolls up and away, the copy dissolves under a soft edge just
   below the nav (06-dom.js sets where, in the frame's own px; the hero and 01 keep their own edges from 11-night.js) */
.stick.nv-cut { -webkit-mask-image: linear-gradient(to bottom, transparent var(--cutY, 0px), #000 calc(var(--cutY, 0px) + var(--cutB, 1px))); mask-image: linear-gradient(to bottom, transparent var(--cutY, 0px), #000 calc(var(--cutY, 0px) + var(--cutB, 1px))); }
.copy { position: relative; width: min(36rem, 39vw); pointer-events: auto; color: var(--fg); }
.copy::before { content: ""; position: absolute; inset: -4.5rem -6rem; z-index: -1; pointer-events: none; border-radius: 50%; opacity: var(--halo, 1);
  background: radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,.5) 55%, rgba(255,255,255,0)); }
.ch[data-theme="dark"] .copy { --fg: #fff; --fg2: #b9c6d3; --fg3: #8fa2b5; --line: rgba(255,255,255,.24); }
.ch[data-theme="dark"] .copy::before { background: radial-gradient(closest-side, rgba(5,8,14,.5), rgba(5,8,14,.24) 55%, rgba(5,8,14,0)); }
/* v4: the bench's real board runs under the copy column (its rim's glass, its silkscreen): a deeper shade behind the type there */
#encode[data-theme="dark"] .copy::before, #decode[data-theme="dark"] .copy::before, #software[data-theme="dark"] .copy::before { background: radial-gradient(closest-side, rgba(5,8,14,.72), rgba(5,8,14,.4) 55%, rgba(5,8,14,0)); }

/* the step label (Story): an outline numeral, its count, the coral dot, a hairline that draws in, the name */
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; font: 500 var(--fs-8)/1.2 var(--sans); letter-spacing: .01em; color: var(--fg); }
.dot { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 20%, transparent); flex: 0 0 auto; }
.step-label { gap: .55rem; }
.step-label .num { font: 400 clamp(2.4rem, 2rem + 1.4vw, 3.4rem)/.8 var(--serif); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--fg3); paint-order: stroke; }
.step-label .of { align-self: flex-start; margin: -.35rem 1rem 0 -.1rem; font: 500 .6875rem/1 var(--sans); letter-spacing: .02em; color: var(--fg3); }
.step-label .rule { width: 3.25rem; height: 1px; flex: 0 0 auto; background: var(--line); transform-origin: left center; transform: scaleX(var(--rv, 1)); }
.step-label .nm, .eyebrow .nm { font-weight: 500; color: var(--fg); }
.ch--next .eyebrow { gap: .6rem; color: var(--fg2); }

.title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h); line-height: 1.02; letter-spacing: -.018em; margin: 0; color: var(--fg); text-wrap: balance; }
.title em { font-style: italic; letter-spacing: -.005em; }
.title .ind { display: inline-block; width: .55em; }
:is(.body, .ch-body) { margin: 1.4rem 0 0; font-size: var(--fs-6); line-height: 1.55; color: var(--fg2); max-width: 30rem; text-wrap: pretty; }
:is(.body, .ch-body) b { color: var(--fg); }
.body--lime { color: var(--lime); font-size: var(--fs-5); margin-top: 1.2rem; }
:is(.body, .ch-body) + :is(.body, .ch-body) { margin-top: .85rem; }
/* v4 (Round 2, Ship): the stats callout, two figures in Story's serif over their names, and the footnote */
.stats { display: flex; width: fit-content; gap: clamp(1.5rem, 3vw, 2.75rem); margin: 1.9rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.stat { display: grid; gap: .4rem; margin: 0; }
.stat b { font: 400 clamp(2.6rem, 2rem + 1.9vw, 3.75rem)/.9 var(--serif); letter-spacing: -.025em; color: var(--lime); }
.stat span { font: 500 .875rem/1.3 var(--sans); color: var(--fg); }
.stats-note { margin: 1rem 0 0; font: 400 .75rem/1.4 var(--sans); color: var(--fg3); }
.legend { display: flex; gap: 1.3rem; margin: 1.4rem 0 0; font: 500 .8125rem/1 var(--sans); color: var(--fg2); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend i { width: .45rem; height: .45rem; border-radius: 50%; }
.legend .k-stim { background: var(--coral); box-shadow: 0 0 8px rgba(244,95,74,.7); }
.legend .k-resp { background: var(--lime); box-shadow: 0 0 8px rgba(239,255,66,.6); }
.cta-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }

/* heading reveal (main.js): each word rises out of a mask the height of its line */
.reveal .wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.reveal .w { display: inline-block; will-change: transform, opacity; }
.reveal .wj { white-space: nowrap; }
.reveal.wj-free .wj { white-space: normal; }

/* ---------- the step rail (Story): a quiet list on the left edge, the current step in coral ---------- */
.rail { position: fixed; z-index: 6; left: 1.1rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .15rem; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
/* r8: the rail sits in a quiet glass capsule in the field's tone (the nav's Login glass): all but unseen on its own field, it
   keeps the steps legible where a hand-off brings the other field (or the Mist's darker fall-off) to the left edge first */
.rail::before { content: ""; position: absolute; inset: -.55rem -.6rem -.55rem -.5rem; z-index: -1; border-radius: 1rem; pointer-events: none;
  background: rgb(18 20 23 / calc(.55 + .22 * var(--nav-k, 0))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); -webkit-backdrop-filter: blur(18px) saturate(.55); backdrop-filter: blur(18px) saturate(.55);
  transition: background-color var(--nav-t) var(--nav-e), box-shadow var(--nav-t) var(--nav-e); }
body[data-theme="light"] .rail::before { background: rgb(236 241 246 / calc(.8 + .12 * var(--nav-k, 0))); box-shadow: inset 0 0 0 1px rgba(15,17,19,.08); }
/* (r9: a deeper frost, and through a hand-off (--nav-k, 06-dom.js) a denser glass, so a subject passing under the capsule is a
   soft wash behind the steps, never a picture through them) */
body.rail-on .rail { opacity: 1; pointer-events: auto; }
.rail a { display: flex; align-items: center; gap: .5rem; padding: .32rem 0; font: 500 .6875rem/1 var(--sans); color: var(--n500); text-decoration: none; transition: color var(--nav-t) var(--nav-e); }
.rail a span { font-variant-numeric: tabular-nums; width: 1.1rem; }
.rail a em { font-style: normal; display: none; opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease), transform .4s var(--ease); white-space: nowrap; }
.rail a::before { content: ""; order: -1; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; opacity: .5; transition: background .3s var(--ease), transform .3s var(--ease), opacity .3s; }
.rail a.on { color: var(--fg-rail, #fff); }
.rail a.on::before { background: var(--coral); opacity: 1; transform: scale(1.35); }
.rail:hover a em { display: inline; opacity: 1; transform: none; }
.rail:hover { padding: 0 .5rem 0 0; }   /* (r8: the capsule opens to the names) */
body[data-theme="dark"] .rail:hover::before { background: rgba(18,20,23,.7); }
body[data-theme="light"] .rail:hover::before { background: rgba(240,244,248,.86); }
body[data-theme="light"] .rail { --fg-rail: var(--n950); }
body[data-theme="light"] .rail a { color: rgba(15,17,19,.62); }   /* r8: ink, not a mid grey: it reads on the Mist and on the darker fall-off at its left edge */
@media (max-width: 1279px) { .rail { display: none; } }

/* ---------- labels anchored to 3D points (main.js places them) ---------- */
.labels { position: fixed; inset: 0; z-index: 4; pointer-events: none; transition: opacity .4s var(--ease); }
body.gl-wait .labels { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ld-r, .ld-bd, .ld-glow { animation: none; } .pill:hover, .pill:active { transform: none; } }

/* ---------- the hero (Vivid's "bleed" layout): a huge left-aligned headline, "neurons." in lime italic ---------- */
.ch--hero .copy { width: min(60rem, 56vw); }
.ch--hero .copy::before { inset: -6rem -8rem -5rem -10rem; background: radial-gradient(closest-side, rgba(8,10,12,.26), rgba(8,10,12,.1) 60%, rgba(8,10,12,0)); }   /* r5: lighter, so Story's charcoal stays even round the copy */
#shape .copy::before { inset: -4.5rem -2.5rem -4.5rem -6rem; background: radial-gradient(closest-side, rgba(8,10,12,.26), rgba(8,10,12,.1) 55%, rgba(8,10,12,0)); }   /* (and stays off the picture node)*/
.hero-title { font-family: var(--serif); font-weight: 400; margin: 0; color: #fff; font-size: clamp(3.2rem, 7.5vw, 8.8rem); line-height: .92; letter-spacing: -.03em; word-spacing: .04em; }
.hero-title > span { display: block; opacity: 0; filter: blur(12px); transform: translateY(.22em); transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1.2s var(--ease); }
.hero-title > span:nth-child(2) { transition-delay: .1s; }
.hero-title > span:nth-child(3) { transition-delay: .2s; }
.hero-title.in > span { opacity: 1; filter: blur(0); transform: none; }
.ht-a { white-space: nowrap; }
.ht-n { font-style: italic; color: var(--lime); font-size: 1.1em; line-height: .86; letter-spacing: -.02em; text-shadow: 0 0 .32em rgba(239,255,66,.38), 0 0 .08em rgba(239,255,66,.35); }
.ch--hero .lede.lede--2 { margin-top: .8rem; }
.ch--hero .lede { max-width: 33rem; margin: 1.7rem 0 0; font-size: 1.1875rem; line-height: 1.5; color: #dfe6ee; text-wrap: pretty; }
.ch--hero .lede, .ch--hero .cta-row { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) .45s, transform 1.2s var(--ease) .45s; }
.ch--hero.in .lede, .ch--hero.in .cta-row { opacity: 1; transform: none; }
.ch--hero .cta-row { margin-top: 2.2rem; transition-delay: .6s; }
/* (v4: the hero's copy plays its entrance as the loader leaves; the boot rule that skipped it was for the old word intro, gone in v4) */
/* r5: the hero copy never runs under the nav (or, on a phone, over the bright dish): it dissolves under a soft edge set by 11-night.js */
#top .stick { -webkit-mask-image: linear-gradient(to bottom, transparent var(--mY, 0px), #000 calc(var(--mY, 0px) + var(--mB, 64px))); mask-image: linear-gradient(to bottom, transparent var(--mY, 0px), #000 calc(var(--mY, 0px) + var(--mB, 64px))); }
/* the ring's word (Vivid): while the beads hold "neurons." on the headline the type steps back, and fades in as they leave */
body.word-fx .hero-title .ht-n { transition: opacity .7s var(--ease), filter .7s var(--ease), transform 1.2s var(--ease) .2s; }
body.intro-on .hero-title .ht-n { opacity: 0; filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .hero-title > span { filter: none; transform: none; transition: opacity .4s; } .ch--hero .lede, .ch--hero .cta-row { transform: none; } }

/* the closing chapter's buttons are the hero's */
.ch--next .cta-row { margin-top: 2rem; }
.ch--next .pill--hero, .ch--next .pill--glass { height: 3.3rem; }
.ch--next .pill-ic { width: 2.45rem; height: 2.45rem; }

/* ---------- callouts: a dot on the object, a hairline leader, a pill (main.js keeps them on screen and off the copy) ---------- */
.co { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: opacity; }
.co svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.co line { stroke-linecap: round; }
.co .ln { stroke: rgba(15,17,19,.62); stroke-width: 1.1; }
.co .hl { stroke: rgba(255,255,255,.85); stroke-width: 3.2; }
.co .pin { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #0F1113; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15,17,19,.35); }
.co .pin::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.co .tag { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.co .tag > span { display: inline-block; vertical-align: top; padding: .5rem .85rem; border-radius: .75rem; background: rgba(255,255,255,.96); color: #0F1113; font: 500 .9375rem/1.25 var(--sans); letter-spacing: -.005em;
  box-shadow: 0 0 0 1px rgba(195,205,215,.9), 0 10px 24px -12px rgba(15,17,19,.35); }
.co .tag > span.two { white-space: normal; width: max-content; max-width: 19rem; }
.co .tag > span.mea { max-width: 15.5rem; }
/* on the night: hairline glass pills, lime leaders */
.co.dk .ln { stroke: rgba(216,226,236,.55); stroke-width: 1; }
.co.dk .hl { display: none; }
.co.dk .pin { background: var(--lime); box-shadow: 0 0 10px 2px rgba(239,255,66,.6); width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
.co.dk .pin::after { display: none; }
.co.dk .tag > span { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(12,17,26,.72); color: #fff; font-size: .875rem; padding: .48rem .9rem; border-radius: 100vw;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(216,226,236,.24), 0 10px 26px -12px rgba(0,0,0,.6); }
.co.dk .tag .k { color: var(--lime); }
.co.dk .tag > span.two { border-radius: .9rem; padding: .55rem .95rem; }
.co.coral .tag > span { background: rgba(232,92,74,.92); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,180,165,.45), 0 10px 26px -12px rgba(244,95,74,.6); }
.co.coral .ln { stroke: rgba(255,140,120,.75); }
.co.coral .pin { background: var(--lime); }
.co.min .tag > span { font-size: .75rem; padding: .38rem .7rem; }
.co.bare .tag > span { background: none; box-shadow: none; padding: 0; color: #fff; font-size: .8125rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
.co.bare .pin { display: none; }
/* numbered sites (decode): a small ink disc with its number */
.co.num .tag > span { width: 1.05rem; height: 1.05rem; padding: 0; border-radius: 50%; display: grid; place-items: center; font: 600 .625rem/1 var(--sans); background: #1a1d21; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.co.num .pin { display: none; }
/* stack headings (ship): two lines, centred over the stacks */
.co.head .tag > span { background: none; box-shadow: none; padding: 0; text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none; }
.co.head .tag b { display: block; font: 500 1.125rem/1.2 var(--sans); color: #fff; letter-spacing: -.005em; }
.co.head .tag small { display: block; margin-top: .3rem; font: 400 .875rem/1.2 var(--sans); color: #9fb0c2; }
.co.head.lime .tag b { color: var(--lime); }
.co.head .pin, .co.head svg { display: none; }
/* the same-shape and finale captions: quiet, under their object */
.co.cap .tag > span { background: none; box-shadow: none; padding: 0; font: 500 .8125rem/1.3 var(--sans); color: #c6d2de; text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none; }
.co.cap .tag small { display: block; color: #7f93a8; font-size: .75rem; }
.co.cap .pin, .co.cap svg { display: none; }
.co.cap.lime .tag > span { color: var(--lime); }
.co.cap.sig .tag > span { color: #8fa2b5; font-weight: 400; letter-spacing: .01em; }   /* r5: the same shape's signal labels in Story's grey */
.co.cap.pill .tag > span { padding: .32rem .6rem .36rem; border-radius: .55rem; background: rgba(6,10,16,.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(216,226,236,.12); }
.co.cap.pill.lime .tag small { color: #dfe9a0; }
.co.row .tag > span { background: none; box-shadow: none; padding: 0; font: 500 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8ea3b8; -webkit-backdrop-filter: none; backdrop-filter: none; }
.co.row .pin, .co.row svg { display: none; }

/* ---------- the decode chapter's recording card ---------- */
.trace-card { position: fixed; z-index: 4; left: 0; top: 0; transform-origin: 0 0; width: 20.75rem; padding: .85rem .9rem .8rem; border-radius: .6rem; color: #fff; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(13,16,21,.82); box-shadow: inset 0 0 0 1px rgba(216,226,236,.16), 0 24px 48px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tc-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(216,226,236,.12); }
.tc-head span { display: block; font: 500 .6875rem/1.2 var(--sans); color: #9fb0c2; }
.tc-head b { display: block; margin-top: .3rem; font: 500 1.25rem/1 var(--serif); letter-spacing: -.01em; }
.tc-plot { display: block; width: 100%; height: 6.3rem; margin-top: .55rem; overflow: visible; }
.tc-plot text { font: 500 11px/1 var(--sans); fill: #c6d2de; }
.tc-cap { margin: .45rem 0 0; font: 400 .7rem/1.4 var(--sans); color: #c6d2de; }

/* the dish chapter's magnified inset: a micrograph in a glass ring (the night's hairline, a dark glass band) */
.mag { position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; opacity: 0; visibility: hidden; will-change: transform, opacity;
  box-shadow: 0 0 0 1px rgba(216,226,236,.34), 0 0 0 5px rgba(12,17,26,.72), 0 0 0 6px rgba(216,226,236,.14), 0 22px 44px -18px rgba(0,0,0,.7); }
.mag canvas { display: block; width: 100%; height: 100%; }
.co.nolead .pin, .co.nolead svg { display: none; }
/* ship: our layer's callout, a small lime stat */
.co.dk.lime .tag > span { color: var(--lime); box-shadow: inset 0 0 0 1px rgba(239,255,66,.4), 0 10px 26px -12px rgba(0,0,0,.6); }
.co.dk.lime .tag > span.stat { display: grid; gap: .15rem; padding: .5rem .85rem .55rem; border-radius: .9rem; text-align: left; }
.co.dk.lime .tag .stat b { font: 600 1.0625rem/1 var(--sans); letter-spacing: -.01em; }
.co.dk.lime .tag .stat small { font: 500 .75rem/1.1 var(--sans); color: #d6e3b0; }
.co.dk.lime .ln { stroke: rgba(239,255,66,.6); }

/* (v4: the site footer is tbc.co's own: style-foot.css) */

/* ---------- responsive ---------- */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) { #dish .copy { width: min(28rem, 32vw); } }
@media (max-width: 1100px) and (min-width: 768px) { .copy { width: min(30rem, 44vw); } }
@media (max-width: 991px) {
  .nav-links { display: none; }
  .nav { justify-content: space-between; }
}
/* phones and tall tablets: the copy sits at the foot of the screen over a scrim; the scene frames itself above it */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .stick { align-items: flex-end; padding: var(--nav-h) 1.25rem calc(2rem + env(safe-area-inset-bottom)); }
  .copy, .ch--hero .copy { width: 100%; max-width: 36rem; }
  .copy::before { display: none; }
  .scrim { opacity: 1; height: 60svh; }
  body[data-theme="light"] .scrim { background: linear-gradient(to top, rgba(240,245,250,.97) 0%, rgba(240,245,250,.9) 52%, rgba(240,245,250,.4) 74%, rgba(240,245,250,0) 90%); }
  body[data-theme="dark"] .scrim { background: linear-gradient(to top, rgba(6,9,14,calc(.95 * var(--sk))) 0%, rgba(6,9,14,calc(.86 * var(--sk))) 55%, rgba(6,9,14,calc(.45 * var(--sk))) 78%, rgba(6,9,14,0) 100%); }
  body.no-scrim .scrim { opacity: 0; }
  .eyebrow { margin-bottom: .9rem; }
  .step-label .num { font-size: 2.3rem; }
  .title { font-size: clamp(2.1rem, 8.6vw, 3.2rem); }
  :is(.body, .ch-body) { margin-top: .9rem; font-size: 1rem; }
  .hero-title { font-size: clamp(2.6rem, 11.6vw, 4.2rem); line-height: .95; }
  .ht-a { white-space: normal; }
  .ch--hero .lede { font-size: 1rem; margin-top: 1rem; color: #dde5ee; }
  .ch--hero .cta-row, .ch--next .cta-row { margin-top: 1.4rem; flex-direction: column; align-items: stretch; gap: .6rem; }
  .pill--hero { justify-content: space-between; height: 3.25rem; }
  .pill--glass { justify-content: flex-start; height: 3.25rem; }
  .pill-ic { width: 2.45rem; height: 2.45rem; }
  .trace-card { width: min(21rem, calc(100vw - 2rem)); padding: .8rem .9rem .75rem; }
  .tc-plot { height: 6.4rem; }
  .tc-head b { font-size: 1.125rem; }
}
@media (max-width: 767px) {
  :root { --nav-h: 4rem; }
  .nav-scrim { height: calc(var(--nav-h) + 2.5rem); }   /* (a shorter fall-off: the phone's pictures sit close under the bar) */
  .brand-mark { width: 3.3rem; height: 1.76rem; }
  .brand-word { display: none; }
  .nav-cta .pill--ghost { display: none; }
  .nav .pill { height: 2.5rem; padding: 0 1rem; font-size: .875rem; }
  .nav-menu { display: grid; place-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(13,15,18,.46); color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
    transition: background-color var(--nav-t) var(--nav-e), box-shadow var(--nav-t) var(--nav-e); }
  body[data-theme="light"] .nav-menu { background: rgba(250,252,253,.84); box-shadow: inset 0 0 0 1px var(--n300); }
  .nav-menu i { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease); }
  body.menu-open .nav-menu i:first-child { transform: translateY(3.25px) rotate(45deg); }
  body.menu-open .nav-menu i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav-links { position: fixed; top: calc(var(--nav-h) + .5rem); left: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .1rem; margin: 0; padding: .5rem; border-radius: 1rem; background: rgba(12,16,24,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 48px -20px rgba(0,0,0,.6);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .3s; }
  body.menu-open .nav-links { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s var(--ease), transform .4s var(--ease); }
  body.menu-open .nav-links a { padding: .8rem .9rem; font-size: 1rem; color: #fff; border-radius: .55rem; }
  .co .tag > span { font-size: .8125rem; padding: .4rem .7rem; }
  .co.dk:where(:not(.num, .bare, .lime)) .tag > span { font-size: .8125rem; padding: .42rem .78rem; }   /* (the glass pills only: not 05's number badges or bare labels) */
  .co.dk.cul .tag > span { font-size: .75rem; padding: .34rem .66rem; white-space: normal; width: max-content; max-width: 6.6rem; text-align: center; border-radius: .7rem; line-height: 1.2; }
  .co.cap.lime:not(.pill) .tag > span, .co.cap.sig .tag > span { font-size: .6875rem; }
  .co.dk .tag > span.two, .co.dk .tag > span.wrap-p { padding: .45rem .8rem; border-radius: .85rem; }
  .co.dk .tag > span.wrap-p { white-space: normal; width: max-content; max-width: 11rem; }
  .co.head .tag b { font-size: .9375rem; }
  .co.head .tag small { font-size: .75rem; }
}
/* v4 step 5: short phones (an iPhone SE's 375 × 667, and most phones in Safari with its bars showing). Round 2's copy is about twice
   v10.1's, so at full size it took up to 460 of 667 px and left the scenes 120–150 px. A tighter scale for the copy gives them
   ~100 px more; Ship's rows and What's next's tiles take the compact layouts (40-ship.js, 11-night.js). */
@media (max-width: 767px) and (max-height: 760px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px) and (max-height: 760px) {
  .stick { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .eyebrow { margin-bottom: .6rem; }
  .title { font-size: clamp(1.75rem, 7.5vw, 2.4rem); }
  :is(.body, .ch-body) { margin-top: .7rem; font-size: .9375rem; line-height: 1.5; }
  :is(.body, .ch-body) + :is(.body, .ch-body) { margin-top: .55rem; }
  .ch--hero .lede { font-size: .9375rem; line-height: 1.5; }
  .legend { margin-top: .9rem; }
  .stats { margin-top: .9rem; padding-top: .75rem; gap: 1.75rem; }
  .stat { gap: .25rem; }
  .stat b { font-size: 2.1rem; }
  .stat span { font-size: .8125rem; }
  .stats-note { margin-top: .45rem; font-size: .6875rem; }
  /* What's next: its two pills side by side */
  body[data-theme] :is(#next) .cta-row { flex-direction: row; margin-top: 1rem; gap: .5rem; }
  body[data-theme] :is(#next) .cta-row .pill { flex: 1 1 0; min-width: 0; height: 2.85rem; font-size: .9375rem; }
  body[data-theme] :is(#next) .cta-row .pill--hero { padding: 0 .3rem 0 1rem; gap: .5rem; }
  body[data-theme] :is(#next) .cta-row .pill--glass { padding: 0 .9rem; justify-content: center; }
  body[data-theme] :is(#next) .cta-row .pill-ic { width: 2.2rem; height: 2.2rem; }
  /* Ship: each row's name and its sublabel on one line */
  .co.shiphd .tag b, .co.shiphd .tag small { display: inline; }
  .co.shiphd .tag small { margin: 0 0 0 .4rem; }
}
/* (and an iPhone SE in Safari with both bars showing, ~375 × 553: the hero's headline and pills smaller and its pills side by side,
   so its first line keeps clear of the bar and the board keeps a place above it) */
@media (max-width: 767px) and (max-height: 600px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px) and (max-height: 600px) {
  .hero-title { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .ch--hero .lede { font-size: .875rem; margin-top: .8rem; }
  body[data-theme] :is(#top) .cta-row { flex-direction: row; margin-top: 1rem; gap: .5rem; }
  body[data-theme] :is(#top) .cta-row .pill { flex: 1 1 0; min-width: 0; height: 2.85rem; font-size: .9375rem; }
  body[data-theme] :is(#top) .cta-row .pill--hero { padding: 0 .3rem 0 1rem; gap: .5rem; }
  body[data-theme] :is(#top) .cta-row .pill--glass { padding: 0 .9rem; justify-content: center; }
  body[data-theme] :is(#top) .cta-row .pill-ic { width: 2.2rem; height: 2.2rem; }
}
/* v5: and upright, every chapter's copy a step smaller again, which gives Ship's rows and What's next's tiles about 36 px more for
   their own layouts there (40-ship.js tightLayout, 11-night.js). A phone on its side keeps the scale above. */
@media (max-width: 767px) and (max-height: 600px) and (orientation: portrait) {
  .eyebrow { margin-bottom: .45rem; }
  .title { font-size: clamp(1.5rem, 6.4vw, 1.75rem); }
  :is(.body, .ch-body) { margin-top: .55rem; font-size: .875rem; line-height: 1.45; }
  :is(.body, .ch-body) + :is(.body, .ch-body) { margin-top: .45rem; }
  .stats { margin-top: .7rem; padding-top: .6rem; }
  .stat b { font-size: 1.75rem; }
  .stat span { font-size: .75rem; }
  .stats-note { margin-top: .35rem; font-size: .625rem; }
  body[data-theme] :is(#next) .cta-row { margin-top: .75rem; }
  body[data-theme] :is(#next) .cta-row .pill { height: 2.6rem; font-size: .875rem; }
}
/* v5: a phone on its side (landscape, at most 500 px tall: 667 × 375 to 932 × 430). The phone blocks above leave it out (their
   copy at the foot would fill the screen), and 99-main.js gives it the desktop's paths (view.land): the copy in a column on the
   left, the scene right of it. The copy is a compact scale so every chapter's fits under the bar. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --margin: clamp(1.25rem, 3.6vw, 2.25rem); }
  .stick { padding: var(--nav-h) var(--margin) .5rem; }
  .copy { width: min(25rem, 45vw); }
  .copy::before { inset: -3rem -4rem; }
  /* (the bench's rim and silkscreen run under the narrower column: a deeper shade behind the type) */
  #encode[data-theme="dark"] .copy::before, #decode[data-theme="dark"] .copy::before, #software[data-theme="dark"] .copy::before { inset: -3rem -5rem -3rem -4rem; background: radial-gradient(closest-side, rgba(5,8,14,.84), rgba(5,8,14,.55) 55%, rgba(5,8,14,0)); }
  .eyebrow { margin-bottom: .5rem; font-size: .75rem; }
  .step-label .num { font-size: 1.5rem; }
  .title { font-size: clamp(1.375rem, 3.1vw, 1.75rem); line-height: 1.04; }
  :is(.body, .ch-body) { margin-top: .55rem; font-size: .8125rem; line-height: 1.45; }
  :is(.body, .ch-body) + :is(.body, .ch-body) { margin-top: .4rem; }
  .legend { margin-top: .65rem; font-size: .75rem; }
  .stats { margin-top: .65rem; padding-top: .55rem; gap: 1.5rem; }
  .stat { gap: .2rem; }
  .stat b { font-size: 1.6rem; }
  .stat span { font-size: .75rem; }
  .stats-note { margin-top: .35rem; font-size: .625rem; }
  .ch--hero .copy { width: min(30rem, 52vw); }
  .hero-title { font-size: clamp(2rem, 4.9vw, 2.6rem); line-height: .95; }
  .hero-title > .ht-b, .hero-title > .ht-n { display: inline-block; }   /* (two lines: "with living neurons." on one) */
  .ch--hero .lede { margin-top: .6rem; font-size: .8125rem; line-height: 1.45; max-width: none; }
  .ch--hero .lede.lede--2 { margin-top: .4rem; }
  body[data-theme] .ch--hero .cta-row, body[data-theme] .ch--next .cta-row { flex-direction: row; flex-wrap: nowrap; margin-top: .85rem; gap: .5rem; }
  body[data-theme] :is(.ch--hero, .ch--next) .cta-row .pill { flex: 0 1 auto; min-width: 0; height: 2.5rem; font-size: .875rem; }
  body[data-theme] :is(.ch--hero, .ch--next) .cta-row .pill--hero { padding: 0 .25rem 0 1rem; gap: .6rem; }
  body[data-theme] :is(.ch--hero, .ch--next) .cta-row .pill--glass { padding: 0 1rem 0 .25rem; gap: .6rem; }
  body[data-theme] :is(.ch--hero, .ch--next) .cta-row .pill-ic { width: 2rem; height: 2rem; }
}
/* (and on its side in Safari with the address bar showing, ~667 × 320: a step smaller again, so the hero's and What's next's copy,
   the tallest, keep clear of the bar) */
@media (orientation: landscape) and (max-height: 340px) {
  .stick { padding-bottom: .25rem; }
  .eyebrow { margin-bottom: .4rem; }
  .title { font-size: 1.25rem; }
  :is(.body, .ch-body), .ch--hero .lede { font-size: .75rem; line-height: 1.4; }
  :is(.body, .ch-body) + :is(.body, .ch-body) { margin-top: .3rem; }
  .hero-title { font-size: 1.75rem; }
  body[data-theme] .ch--hero .cta-row, body[data-theme] .ch--next .cta-row { margin-top: .65rem; }
  body[data-theme] :is(.ch--hero, .ch--next) .cta-row .pill { height: 2.25rem; font-size: .8125rem; }
  body[data-theme] :is(.ch--hero, .ch--next) .cta-row .pill-ic { width: 1.75rem; height: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .reveal .w { transition: none; } }


/* v4 step 3 (the light page preview, ?tone=white|mist): the relit chapters' labels and figures in ink */
body[data-theme="light"] .co.head .tag b, body[data-theme="light"] .co.head .tag b { color: var(--n950); }
body[data-theme="light"] .co.head .tag small, body[data-theme="light"] .co.head .tag small, body[data-theme="light"] .co.dit .tag > span, body[data-theme="light"] .co.dit .tag > span { color: #4f687e; }
.ch[data-theme="light"] .stat b { color: var(--n950); }
.ch[data-theme="light"] .stats { border-top-color: rgba(15, 17, 19, .16); }

/* v4 (the light page, on Story's Mist): the hero's copy in ink; its lime glow gone (lime on the Mist does not read); the halos behind
   the copy in the Mist's own light. v5 (Round 3): "Let's use our brand blue for "neurons" instead of green. Either: #5C7891 or
   #AAC0D1 based on readability": Deep Blue, 3.8:1 on the Mist's light end and 4.6:1 on white (Soft Blue is 1.5:1 and 1.9:1) */
.ch--hero[data-theme="light"] .hero-title { color: var(--n950); }
.ch--hero[data-theme="light"] .ht-n { color: #5C7891; font-weight: 500; text-shadow: none; }   /* (a step heavier: the lighter blue holds its own beside the black) */
.ch--hero[data-theme="light"] .lede { color: #33475a; }
.ch--hero[data-theme="light"] .copy::before { background: radial-gradient(closest-side, rgba(226,233,240,.6), rgba(226,233,240,.28) 60%, rgba(226,233,240,0)); }
.ch[data-theme="light"]:not(.ch--hero):not(#next) .copy::before { background: radial-gradient(closest-side, rgba(226,233,240,.7), rgba(226,233,240,.35) 55%, rgba(226,233,240,0)); }
/* v5 (the white page): the halos behind the copy in white, the page's own field */
.tone-white .ch[data-theme="light"] .copy::before { background: radial-gradient(closest-side, rgba(255,255,255,.72), rgba(255,255,255,.34) 55%, rgba(255,255,255,0)) !important; }
.ch[data-theme="light"] .copy { --fg: var(--n950); --fg2: #33475a; --fg3: #4f687e; --line: rgba(15,17,19,.2); }
/* the lime legend dot and the coral one keep their colour; the lime loses its glow on the Mist */
.ch[data-theme="light"] .legend .k-resp { background: #A4B458; box-shadow: none; }   /* (v5, Round 3: the brand's Olive, as Record's answering cells) */
.ch[data-theme="light"] .legend .k-stim { box-shadow: none; }
/* the dark glass callouts (software, compare, process) as Story's light tags on the Mist */
body[data-theme="light"] .co.dk:not(.lime) .tag > span, body[data-theme="light"] .co.dk:not(.lime) .tag > span { background: rgba(255,255,255,.9); color: var(--n950); box-shadow: 0 0 0 1px rgba(15,17,19,.06), 0 10px 24px -14px rgba(28,44,62,.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-theme="light"] .co.dk .ln, body[data-theme="light"] .co.dk .ln { stroke: rgba(15,17,19,.4); }
body[data-theme="light"] .co.dk .tag .k, body[data-theme="light"] .co.dk .tag .k { color: #3f6a43; }
body[data-theme="light"] .co.bare .tag > span, body[data-theme="light"] .co.bare .tag > span { color: var(--n950); }
body[data-theme="light"] .co.num .tag > span, body[data-theme="light"] .co.num .tag > span { background: var(--n950); color: #fff; }
body[data-theme="light"] .co.dk .pin, body[data-theme="light"] .co.dk .pin { width: 9px; height: 9px; left: -4.5px; top: -4.5px; background: radial-gradient(circle, var(--lime) 0 38%, var(--n950) 44%); box-shadow: none; }
/* v4 (Mist): the page's first paint is the Mist, not the charcoal (the canvas comes up over it) */
body[data-theme="light"] { background: #DCE4EC; }
body[data-theme="light"] .poster { background: linear-gradient(160deg, #eef3f8, #cfdbe7); }
/* v5 (the white page): the first paint and the loader on the page's own white, not the Mist. shell.html sets .tone-white before the
   first paint; the gl-wait rule above only took effect once the page's script had run, ~3 s in */
.tone-white body[data-theme="light"] { background: #fff; }
.tone-white body[data-theme="light"] .poster { background: linear-gradient(160deg, #ffffff, #eef1f4); }
body[data-theme="light"] .co.dk.lime .tag > span, body[data-theme="light"] .co.dk.lime .tag > span { background: rgba(15,17,19,.9); }   /* (the lime figure keeps its dark pill: lime on the Mist does not read) */
/* v5 (one field, Round 3): on the light page the lime figures ("5x faster", "+0.1% parameters") are the site's white pills, their
   figure in the brand's Forest Green: a dark pill read as a leftover of the old black chapters */
body[data-theme="light"] .co.dk.lime .tag > span { background: rgba(255,255,255,.94) !important; color: var(--n950); box-shadow: 0 0 0 1px rgba(15,17,19,.07), 0 10px 24px -14px rgba(28,44,62,.45); }
body[data-theme="light"] .co.dk.lime .tag .k { color: #507753; }
body[data-theme="light"] .co.dk.lime .ln { stroke: rgba(80,119,83,.6); }
/* (the white page: the bar's band and the ink's halo in white, the page's own field; they were the Mist's) */
.tone-white body[data-theme="light"] .nav { --nsc: rgb(255 255 255 / .3); --nsh: rgb(255 255 255 / .6); }
/* v4 (Record): a label whose leader ends on the cell it names, no pin of its own */
.co.nopin .pin { display: none; }
/* v4 (Record): the label sits in a soft clearing of the Mist, so no cell peeks out from under it; the paragraph's lines balanced */
body[data-theme="light"] .co.nopin .tag > span { box-shadow: 0 0 0 1px rgba(15,17,19,.06), 0 0 18px 14px rgba(224,231,239,.92), 0 10px 24px -14px rgba(28,44,62,.45); }
#process :is(.body, .ch-body) { text-wrap: balance; }

/* 05 Decode: the type at the 11px minimum. The five site numbers in their ink discs (were 10px; the discs grow a hair to hold
   them), and the recording card's row numbers: the plot is drawn with preserveAspectRatio="none", so one of its units is
   .69px tall on desktop (.70 on phones) and 16 units set them at 11px (they were 11 units, 7.6px) */
.co.num .tag > span { width: 1.15rem; height: 1.15rem; font-size: .6875rem; }
.tc-plot text { font-size: 16px; }

/* r10 · 03 Encode on phones and upright tablets: the board's near pad row lies under the copy, so the copy carries a scrim in
   the studio field's own charcoal (not the page's navy scrim): it rises from clear to near-solid over the 3.5rem above the
   eyebrow, and the gold pads no longer show through the headline */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  #encode .copy::before { display: block; inset: -4rem -1.25rem -3rem; border-radius: 0; opacity: var(--halo, 1);
    background: linear-gradient(to bottom, rgba(15,17,19,0), rgba(15,17,19,.8) 3.5rem, rgba(15,17,19,.93) 6rem, rgba(15,17,19,.95)); }
}

/* r7 · 05 Decode: the recording card, crisp. A true 1 px hairline (a border on the pixel grid, the card placed on whole device
   pixels), a faint top light and a soft grounding shadow; the plot is drawn at its own pixel size (buildDecodeTrace), so its
   strokes stay 1.25 px and its numerals 11 px */
#traceCard { border: 1px solid rgba(216,226,236,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 24px 48px -24px rgba(0,0,0,.8);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 46%), rgba(12,15,19,.84); }
#traceCard .tc-head { border-bottom-color: rgba(216,226,236,.14); }
#traceCard .tc-plot { shape-rendering: geometricPrecision; }
#traceCard .tc-plot text { font-size: 11px; font-variant-numeric: tabular-nums; }
/* v5 (Round 3: "Let's keep this to either a white background or the blue. Don't think we need to transition to a black
   background"): on the light page the card is white glass on the field, its type in ink (36-decode.js draws its traces to match) */
body[data-theme="light"] #traceCard { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); border-color: rgba(15,17,19,.08);
  box-shadow: 0 1px 2px rgba(28,44,62,.08), 0 24px 48px -24px rgba(28,44,62,.32); color: var(--n950); }
body[data-theme="light"] #traceCard .tc-head { border-bottom-color: rgba(15,17,19,.1); }
body[data-theme="light"] #traceCard .tc-head span { color: #4f687e; }
body[data-theme="light"] #traceCard .tc-plot text { fill: #4f687e; }
body[data-theme="light"] #traceCard .tc-cap { color: #33475a; }

/* ---------- 02 · the dish on Story's Mist (a light chapter, as in the Story site the client approved) ----------
   The copy is Story's light ink (its --ink, --ink-2, --ink-3 and Mist halo); the callouts are Story's light tags: a white pill
   with ink text, a hairline leader, a lime pin ringed in ink. 20-dish.js only shows them on the Mist. */
#dish .copy { --fg: var(--n950); --fg2: rgba(15, 17, 19, .72); --fg3: rgba(15, 17, 19, .5); --line: rgba(15, 17, 19, .22); }
#dish .copy::before { background: radial-gradient(closest-side, rgba(216, 226, 236, .62), rgba(216, 226, 236, 0)); }

.co.mist .ln { stroke: rgba(15, 17, 19, .34); stroke-width: 1; }
.co.mist .hl { display: none; }
.co.mist .pin { width: 9px; height: 9px; left: -4.5px; top: -4.5px; background: radial-gradient(circle, var(--lime) 0 38%, var(--n950) 44%); box-shadow: none; }
.co.mist .pin::after { display: none; }
.co.mist .tag > span { padding: .48rem .9rem; border-radius: 100vw; background: rgba(255, 255, 255, .94); color: var(--n950); font: 500 .875rem/1.25 var(--sans); letter-spacing: -.005em;
  box-shadow: 0 0 0 1px rgba(15, 17, 19, .05), 0 10px 24px -14px rgba(28, 44, 62, .45); }
.co.mist .tag > span.two { border-radius: .9rem; padding: .55rem .95rem; }
/* v4 (Round 2): the array named as the whole device, set apart from the part labels: no pill, a title in Story's serif over a
   line of ink, right-aligned at the top right; its hairline runs down to a small open ring on the board's far corner */
.co.mist.dev .tag > span.dev { display: grid; justify-items: end; gap: .3rem; padding: 0; border-radius: 0; background: none; box-shadow: none; text-align: right; }
.co.mist.dev .dev b { font: 400 clamp(1.375rem, 1.1rem + .6vw, 1.75rem)/1 var(--serif); letter-spacing: -.012em; color: var(--n950); }
.co.mist.dev .dev small { font: 500 .8125rem/1.25 var(--sans); color: rgba(15, 17, 19, .62); }
.co.mist.dev .pin { width: 11px; height: 11px; left: -5.5px; top: -5.5px; background: none; border: 1.25px solid var(--n950); border-radius: 50%; }

/* the magnified inset (r7): a lens on the paper. A crisp white bezel with an ink hairline outside it, a soft two-part shadow;
   under the glass the live view drifts slowly and a few cells fire (calcium flashes: a quick rise, a slow fade); the glass
   itself has a curved reflection at the top left, a cool rim light at the foot and a dark rim (the lens's vignette) */
.mag.mist { transform-origin: 50% 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .97), 0 0 0 3px rgba(15, 17, 19, .13), 0 26px 44px -20px rgba(28, 44, 62, .56), 0 8px 16px -10px rgba(28, 44, 62, .3); }
.mag .mag-v { position: absolute; inset: -7%; animation: magDrift 34s ease-in-out infinite alternate; }
.mag .mag-v canvas { display: block; width: 100%; height: 100%; }
@keyframes magDrift { 0% { transform: translate3d(-2.6%, 1.8%, 0) rotate(-1.2deg) scale(1); } 50% { transform: translate3d(1.4%, -2.2%, 0) rotate(.6deg) scale(1.03); } 100% { transform: translate3d(2.6%, 1.2%, 0) rotate(1.4deg) scale(1.01); } }
.mag .mag-f { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(250, 253, 255, .95), rgba(214, 232, 250, .42) 38%, rgba(214, 232, 250, 0)); animation: magFire var(--d) linear var(--w) infinite; }
@keyframes magFire { 0%, 52% { opacity: 0; transform: scale(.7); } 57% { opacity: 1; transform: scale(1); } 76% { opacity: .35; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.16); } }
.mag .mag-g { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(70% 52% at 32% 20%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 30% at 62% 100%, rgba(186, 214, 240, .16), rgba(186, 214, 240, 0) 70%),
    radial-gradient(closest-side, rgba(3, 7, 12, 0) 76%, rgba(3, 7, 12, .5) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 2px 5px rgba(255, 255, 255, .16); }
/* the cone: two hairlines from the lens to the spot it magnifies, a small ring there */
.mag-cone { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; visibility: hidden; pointer-events: none; }
.mag-cone line { stroke: rgba(15, 17, 19, .3); stroke-width: 1; }
.mag-cone circle { fill: rgba(255, 255, 255, .06); stroke: rgba(15, 17, 19, .55); stroke-width: 1.25; }
@media (prefers-reduced-motion: reduce) { .mag .mag-v, .mag .mag-f { animation: none; } .mag .mag-f { opacity: 0; } }

@media (max-width: 767px) {
  .co.mist .tag > span { font-size: .8125rem; padding: .42rem .78rem; }
  .co.mist.cul .tag > span { font-size: .75rem; padding: .34rem .66rem; white-space: normal; width: max-content; max-width: 6.6rem; text-align: center; border-radius: .7rem; line-height: 1.2; }
  .co.mist .tag > span.two { padding: .45rem .8rem; border-radius: .85rem; }
  .co.mist.dev .dev b { font-size: 1.1875rem; }   /* (v4: so the title and the culture's pill sit side by side under the board) */
  .co.mist.dev .dev small { font-size: .6875rem; }
}
/* v5: a phone on its side has the phone's labels (20-dish.js: the array's title and the culture's pill in a row under the board) */
@media (orientation: landscape) and (max-height: 500px) {
  .co.mist .tag > span { font-size: .8125rem; padding: .42rem .78rem; }
  .co.mist.cul .tag > span { font-size: .75rem; padding: .34rem .66rem; white-space: normal; width: max-content; max-width: 6.6rem; text-align: center; border-radius: .7rem; line-height: 1.2; }
  .co.mist.dev .dev b { font-size: 1.1875rem; }
  .co.mist.dev .dev small { font-size: .65625rem; }
}

/* the light theme's chrome on this chapter (body.dish-mist, set by 20-dish.js while it is on screen on the Mist): Mist glass
   under the phone's nav and Story's Mist scrim under the copy, so neither reads as a white band on the field */
body.dish-mist[data-theme="light"] .nav::before { background: rgba(220, 229, 238, .82); }
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  body.dish-mist[data-theme="light"] .scrim { background: linear-gradient(to top, rgba(216, 226, 236, .95) 0%, rgba(216, 226, 236, .86) 50%, rgba(216, 226, 236, .42) 74%, rgba(216, 226, 236, 0) 92%); }
}

/* v4 step 3 (the light page): Encode's lens, the sensor magnified: the whole 64 × 64 array, still (no drift), with its hairline */
.enc-lens .mag-v { inset: 0; animation: none; }
.enc-cone { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .55)); }   /* (it runs over the black board: a light line, with a shade to hold it on the field too) */
.enc-cone line { stroke: rgba(255, 255, 255, .88); stroke-width: 1.2; }
.enc-cone circle { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.5; }
/* v5 (Round 3, plan step 4, Meng's pick A; 20-dish.js): the array named as the whole board, a fine bracket the board's width
   with the title centred on it; no ring, its short leader a tick from the bracket. The chip named by its square: a fine outline round
   the gold frame, the chip's leader ending on it, no dot */
.dev-brk path { fill: none; stroke: rgba(15, 17, 19, .6); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.dev-brk path.sq { stroke: rgba(15, 17, 19, .6); stroke-width: 1; }
.co.mist.dev.brk .pin { display: none; }
.co.mist.cul.sqp .pin { width: 9px; height: 9px; left: -4.5px; top: -4.5px; background: none; border: 1.5px solid var(--n950); border-radius: 50%; }   /* (the chip's end: a ring on the outline's corner) */
.co.mist.dev.brk .tag > span.dev { justify-items: center; text-align: center; }
/* (A on a phone: the lens's pill, the culture's and the chip's one stack of one-line capsules beside the lens; the pins a size smaller) */
@media (max-width: 767px) {
  .co.mist.cul.one .tag > span { max-width: none; white-space: nowrap; border-radius: 100vw; }
  .co.mist .pin { width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
  /* (a short phone: the stack in the column right of the board, each on two balanced lines, one shape for all three) */
  .co.mist.cul.sqp .pin { width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
  .co.mist.side .tag > span { font-size: .6875rem; padding: .28rem .58rem; white-space: normal; width: max-content; max-width: 7.4rem; text-wrap: balance; text-align: right; border-radius: .62rem; line-height: 1.2; }
}

/* ---------- the site footer: tbc.co's own (v4, Round 2, Module 10: "Delete this section. Should match our current footer.") ----------
   Measured on tbc.co at 1201 px: Nero #0F1113; a top row 64 px under the edge (the logo and wordmark, three columns of two
   links in 13 px Inter in Light Grey #D8E2EC, the three social icons in Blue Grey #889CAF at 32 px, 16 px apart, at the right);
   then a hairline (Deep Blue at half strength) and the base row: the company and its cities in 13 px Blue Grey on the left,
   "Evolve how you compute." in 17 px STIX on two lines at the right. */
.tbc-foot { position: relative; z-index: 5; background: #0F1113; color: #D8E2EC; padding: 0 var(--margin); font-family: var(--sans); }
.tbc-foot a { color: inherit; text-decoration: none; }
.tf-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.2rem; align-items: start; max-width: 80rem; margin: 0 auto; padding: 4rem 0 2rem; }
.tf-logo { grid-column: 1 / 5; display: inline-flex; align-items: flex-start; gap: .1rem; justify-self: start; padding-top: .375rem; color: #fff; }
.tf-logo .brand-mark { width: 6.07rem; height: 3.25rem; }
.tf-logo .brand-word { width: 5.2rem; height: 2.06rem; }
.tf-links { grid-column: 5 / 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.2rem; }
.tf-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tf-links li { display: block; padding: .25rem 0; }
.tf-links a { font: 400 .8125rem/1.5 var(--sans); transition: color .2s cubic-bezier(.165, .84, .44, 1); }
.tf-social { grid-column: 9 / -1; display: flex; justify-content: flex-end; gap: 1rem; padding-top: 1rem; }
.tf-social a { display: flex; width: 2rem; height: 2rem; color: #889CAF; transition: color .2s cubic-bezier(.165, .84, .44, 1); }
.tf-social svg { width: 100%; height: 100%; }
@media (hover: hover) { .tf-links a:hover, .tf-social a:hover { color: #fff; } }
.tbc-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
.tf-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; max-width: 80rem; margin: 0 auto; padding: 2rem 0 3rem; border-top: 1px solid rgba(79, 104, 126, .5); }
.tf-sig { display: grid; gap: .125rem; }
.tf-sig p { margin: 0; font: 400 .8125rem/1.5 var(--sans); color: #889CAF; }
.tf-tag { margin: 0; font: 400 1.0625rem/1.3 var(--serif); color: #889CAF; text-align: right; }
@media (max-width: 991px) {
  .tf-top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2.5rem; padding-top: 3rem; }
  .tf-logo { grid-column: 1; }
  .tf-social { grid-column: 2; padding-top: .6rem; }
  .tf-links { grid-column: 1 / -1; grid-row: 2; max-width: 26rem; }
}
@media (max-width: 767px) {
  .tf-bottom { flex-direction: column; gap: 1.5rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .tf-tag { text-align: left; }
}

/* ---------- v5, the discovery loop (07-loop.js) ----------
   A · the loop mark: on Encode, Record, Compare and Software the label's dot and rule are a 44 px ring of the four steps (38 px on
   phones), its name over "The discovery loop". Ink on the Mist, white in the dark lab; the lit step is the label's own coral. */
.step-label.loop { gap: .85rem; }
.lm { width: 44px; height: 44px; flex: 0 0 auto; overflow: visible; --lm-fg: #fff; --lm-mute: #a3b3c4; --lm-line: rgba(255,255,255,.3); --lm-hollow: #181c21; }
.ch[data-theme="light"] .lm { --lm-fg: var(--n950); --lm-mute: #6b8094; --lm-line: rgba(15,17,19,.2); --lm-hollow: #dfe6ee; }   /* (the stills' tones) */
.lm-ring { fill: none; stroke: var(--lm-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-arc { fill: none; stroke: var(--lm-fg); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lm-arc.lm-back { opacity: .55; }   /* (Encode's: the way back from Software, the loop having run before) */
.lm-chev { fill: none; stroke: var(--lm-mute); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lm-chev.on { stroke: var(--lm-fg); }
.lm-st.done { fill: var(--lm-fg); }
.lm-st.ahead { fill: var(--lm-hollow); stroke: var(--lm-mute); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-halo { fill: rgba(244,95,74,.2); }   /* (the stills' soft coral disc) */
.lm-dot { fill: var(--coral); }
.lm-t { display: flex; flex-direction: column; gap: .3rem; }
.lm-sub { font: 400 .75rem/1.1 var(--sans); letter-spacing: .01em; color: var(--fg3); }
.ch[data-theme="light"] .lm-sub { color: var(--fg2); }   /* (a step darker on the Mist, so it reads at 1x) */
/* (phones: the ring's own clear margin may overhang the label by 3 px, so the label is 6 px shorter and Compare's card keeps its gap
   to the sites' pins) */
@media (max-width: 767px) { .lm { width: 38px; height: 38px; margin: -3px 0; } .step-label.loop { gap: .75rem; } }
/* (a phone on its side: the label is the landscape block's compact eyebrow, so the ring is too) */
@media (orientation: landscape) and (max-height: 500px) { .lm { width: 32px; height: 32px; margin: -3px 0; } .step-label.loop { gap: .6rem; } .lm-t { gap: .15rem; } .lm-sub { font-size: .6875rem; } }

/* C · the loop closes: Software's closing line stands in its copy's place (99-main.js brings it in as the copy goes; its words are
   our placeholder). The two share the frame's one cell, each where the page puts a chapter's copy. */
#software .stick { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start; }
#software .stick > .copy { grid-area: 1 / 1; }
.copy--again { opacity: 0; visibility: hidden; }
/* (phones upright and upright tablets; a phone on its side takes the desktop's layout: style.css's landscape block) */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  #software .stick { align-items: end; }
  /* (Software's scrim on phones rises 1.5rem higher, for the mark's taller label: style-software.css's, moved up) */
  #software .stick > .copy::before { inset: -5.5rem -1.25rem -3rem; background: linear-gradient(to bottom, rgba(16,18,21,0), rgba(16,18,21,.8) 5rem, rgba(16,18,21,.93) 7.5rem, rgba(16,18,21,.95)); }
}

/* C · the hoop's tags (30-chip.js): the page's dark glass pills, pinned by the hoop's own marks (no pin or leader of their own);
   the step names a size smaller. Phones keep the short half: "Back to the dish", "Back to Encode". */
.co.loop .pin, .co.loop svg { display: none; }
.co.dk.loop.nm .tag > span { font-size: .8125rem; padding: .32rem .62rem .34rem; border-radius: .5rem; color: #c6d2de; background: rgba(6,10,16,.8); box-shadow: inset 0 0 0 1px rgba(216,226,236,.12); }
@media (max-width: 767px) { .co.loop .lp-long { display: none; } }
/* (phones: Software's "Optimization layer added to the TBC model" in two lines, so it and "The neurons stay in the lab" under it end well
   above the hoop's top. v5, Round 3: the longer words take a little more width and an even break, "Optimization layer" over "added
   to the TBC model", where 10.5rem left "model" alone on a third line) */
@media (max-width: 767px) { #labels .co.dk .tag > span.wrap-p { max-width: 11.75rem; text-wrap: balance; } }
/* (v5, Round 3 step 6b, proposal B: ?sw=b): the ring's pills stand off the board, each with a fine leader to its mark, in Story's
   grey-blue (it reads over the black board and on the white); "Back to Encode" its short half */
.co.loop.ring svg { display: block; }
body[data-theme] .co.dk.loop.ring .hl { display: block; stroke: rgba(15,17,19,.24); stroke-width: 3.4; }   /* (a soft dark edge: the pale line reads over the black board and on the white) */
body[data-theme] .co.dk.loop.ring .ln { stroke: #AAC0D1; stroke-width: 1.5; }   /* (over the theme's ink leader; Soft Blue, which holds over the black board) */
.co.loop.ring .lp-long { display: none; }
/* (the wide proposals, ?sw=: on phones the closing line stands under the board, not at the foot of the screen) */
@media (max-width: 767px) and (orientation: portrait) { .sw-wide #software .stick > .copy--again { align-self: start; margin-top: calc(54svh - var(--nav-h) + 5.5rem); } }

/* 08 What's next on Story's Mist (the client's approved end card): the night set declares the light theme from p 7.5, so
   the nav already turns ink; here the closing chapter's copy, its buttons and the six captions follow it. (The section's
   own data-theme stays "dark" in the shell; these rules key off the body's theme.) */
body[data-theme="light"] #next .copy { --fg: var(--n950); --fg2: #33475a; --fg3: var(--n600); --line: var(--n300); }
body[data-theme="light"] #next .copy::before { background: radial-gradient(closest-side, rgba(226,233,240,.55), rgba(226,233,240,.25) 55%, rgba(226,233,240,0)); }
/* Story's black pill and its thin outline pill */
body[data-theme="light"] :is(#next, #top) .pill--hero { background: var(--n950); color: #fff; box-shadow: 0 16px 34px -20px rgba(15,17,19,.6), inset 0 1px 0 rgba(255,255,255,.12); }
body[data-theme="light"] :is(#next, #top) .pill--hero .pill-ic { background: transparent; color: #fff; }
body[data-theme="light"] :is(#next, #top) .pill--glass { padding: 0 1.7rem; color: var(--n950); background: transparent; box-shadow: inset 0 0 0 1px rgba(15,17,19,.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-theme="light"] :is(#next, #top) .pill--glass .pill-ic--ghost { display: none; }
@media (hover: hover) {
  body[data-theme="light"] :is(#next, #top) .pill--hero:hover { box-shadow: 0 20px 40px -18px rgba(15,17,19,.65), 0 0 0 5px rgba(15,17,19,.06), inset 0 1px 0 rgba(255,255,255,.12); }
  body[data-theme="light"] :is(#next, #top) .pill--glass:hover { background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(15,17,19,.8); }
}
/* the six captions: ink on a frosted white chip */
body[data-theme="light"] .co.nx.cap.pill .tag > span { background: rgba(255,255,255,.6); color: var(--n950); box-shadow: inset 0 0 0 1px rgba(15,17,19,.07), 0 6px 16px -12px rgba(30,45,60,.45); }
body[data-theme="light"] .co.nx.cap.pill .tag small { color: #4f687e; }
body[data-theme="light"] .co.nx.cap.pill.lime .tag > span { color: var(--n950); }
body[data-theme="light"] .co.nx.cap.pill.lime .tag small { color: #4a6609; }
/* phones and tall tablets: the copy's scrim in the Mist's own colour (a white one read as a band) */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  body[data-theme="light"] .scrim { background: linear-gradient(to top, rgba(196,209,222,.96) 0%, rgba(200,212,224,.88) 52%, rgba(204,216,228,.42) 76%, rgba(206,218,230,0) 92%); }
  /* (v5, the white page: in the white field's own colour, so the page stays one field under the copy too) */
  .tone-white body[data-theme="light"] .scrim { background: linear-gradient(to top, rgba(240,243,246,.96) 0%, rgba(244,246,248,.88) 52%, rgba(250,251,252,.42) 76%, rgba(255,255,255,0) 92%); }
}
/* the footer follows the Mist now: its long dark fade above it (made to melt into a dark chapter) read as a smoky band on
   the pale field. The page meets the footer at a clean edge, as Story's does. */
.site-foot::after { display: none; }

/* v4: on a phone a tile's caption may take two lines ("Language Models"), so the four fit in a row under the card */
@media (max-width: 767px) { .co.nx.cap.pill .tag > span { white-space: normal; width: max-content; max-width: 5.6rem; } }
.co.nx.cap.pill.nw .tag > span { white-space: normal; width: max-content; max-width: 5.6rem; }   /* v4: a narrow window's What's next (11-night.js: no room for the orbit), the long caption on two lines */
@media (max-width: 374px) { .co.nx.cap.pill .tag > span { max-width: 4.9rem; padding-left: .45rem; padding-right: .45rem; } }   /* (v4 step 5: four in a row on a 360 px phone without touching) */
/* v5: a phone under 600 px tall (11-night.js: the four down the card's right) puts each caption on one line beside its tile */
.co.nx.cap.pill.one .tag > span { white-space: nowrap; max-width: none; padding-top: .26rem; padding-bottom: .3rem; }
.co.nx.cap.pill.one .tag small { display: inline; margin-left: .3rem; }

/* v5, Round 3 step 7 (Meng's pick B of step 6c; 11-night.js capHtml, the light page, ?nx=old as it was): each tile's stage, on the
   field under its tile, with no card of its own (the rings clear round it). The name, Video's play mark hung left of it so the four
   names keep their tiles' axis; their three-stop track, filled in Olive up to the stage and lit there (Video on the third stop, the
   three on the second); and under it "Available now" in a soft lime pill for Video, "In development" in N600 for the three */
body[data-theme="light"] .co.nx.cap.pill.prog .tag > span { display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0; font-size: .875rem; line-height: 1.2; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.co.nx.cap.pill.prog .nm { position: relative; }
.co.nx.cap.pill.prog .pl { position: absolute; right: calc(100% + .38rem); bottom: calc(.6em - .45rem); width: .9rem; height: .9rem; border-radius: 50%; background: #A4B458; }
.co.nx.cap.pill.prog .pl::after { content: ""; position: absolute; left: 36%; top: 26%; border-left: .34rem solid #fff; border-top: .22rem solid transparent; border-bottom: .22rem solid transparent; }
.co.nx.cap.pill.prog .pg { position: relative; display: flex; justify-content: space-between; align-items: center; width: 5.25rem; height: 10px; }
.co.nx.cap.pill.prog .pg::before, .co.nx.cap.pill.prog .pg::after { content: ""; position: absolute; left: 4px; top: 4px; height: 2px; border-radius: 1px; }
.co.nx.cap.pill.prog .pg::before { right: 4px; background: var(--n300); }
.co.nx.cap.pill.prog .pg::after { width: calc((100% - 8px) * var(--f)); background: #A4B458; }
.co.nx.cap.pill.prog .pg b { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--n500); }
.co.nx.cap.pill.prog .pg b.done { background: #A4B458; box-shadow: none; }
.co.nx.cap.pill.prog .pg b.on { width: 10px; height: 10px; margin: -1px; background: #EFFF42; box-shadow: inset 0 0 0 2px #A4B458; }
body[data-theme="light"] .co.nx.cap.pill.prog .tag small { display: block; margin: 0; font-size: .75rem; white-space: nowrap; }
body[data-theme="light"] .co.nx.cap.pill.prog .tag small.now { padding: .14rem .55rem .18rem; border-radius: 100vw; background: rgba(215,233,143,.6); color: #3f5a06; font-weight: 500; }
body[data-theme="light"] .co.nx.cap.pill.prog .tag small.dev { color: var(--n600); }
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {   /* (a phone's four in a row, upright or on its side: a size down; each name in a two-line block over its track, so the four tracks and notes line up) */
  body[data-theme="light"] .co.nx.cap.pill.prog .tag > span { max-width: 4.7rem; gap: .3rem; font-size: .75rem; }
  .co.nx.cap.pill.prog .nm { display: flex; align-items: flex-end; justify-content: center; min-height: 2.4em; }
  .co.nx.cap.pill.prog .pl { right: calc(100% + .3rem); bottom: calc(.6em - .375rem); width: .75rem; height: .75rem; } .co.nx.cap.pill.prog .pl::after { border-left-width: .28rem; border-top-width: .18rem; border-bottom-width: .18rem; }
  .co.nx.cap.pill.prog .pg { width: 4.25rem; }
  body[data-theme="light"] .co.nx.cap.pill.prog .tag small { font-size: .625rem; }
  body[data-theme="light"] .co.nx.cap.pill.prog .tag small.now { padding: .1rem .3rem .13rem; }
}
@media (max-width: 374px) {   /* (a 360 px phone) */
  body[data-theme="light"] .co.nx.cap.pill.prog .tag > span { max-width: 4.4rem; }
  .co.nx.cap.pill.prog .pg { width: 4rem; }
  body[data-theme="light"] .co.nx.cap.pill.prog .tag small { font-size: .59375rem; }
  body[data-theme="light"] .co.nx.cap.pill.prog .tag small.now { padding-left: .25rem; padding-right: .25rem; }
}
@media (min-width: 768px) and (min-height: 501px) {   /* (a narrow window's four round the board, .nw: a long name on two lines) */
  body[data-theme="light"] .co.nx.cap.pill.prog.nw .tag > span { max-width: none; }
  .co.nx.cap.pill.prog.nw .nm { max-width: 6.5rem; }
}
/* (a phone under 600 px tall, the four down the card's right: beside each tile its name, and under it the track and the note) */
body[data-theme="light"] .co.nx.cap.pill.prog.one .tag > span { display: inline-grid; grid-template-columns: auto auto; justify-items: start; align-items: center; column-gap: .45rem; row-gap: .25rem; max-width: none; }
.co.nx.cap.pill.prog.one .nm { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .3rem; min-height: 0; }
.co.nx.cap.pill.prog.one .pl { position: relative; right: auto; bottom: auto; flex: none; }

/* ---------- v6, the hero opens on TBC's people (08-people.js) ----------
   Their scientist from their Round 3 doc photo: the lab behind the words, muted, and her cut out in front of it in full colour.
   Over the canvas and its poster, under the copy; 08-people.js places her, fades the photo as the 3D board leaves her hands, and
   cuts the hole the board comes through. */
.hero-photo, .hero-hold { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; visibility: hidden; contain: strict; }
.hero-photo .hp-base { position: absolute; inset: 0; background: linear-gradient(160deg, #ffffff, #eef1f4); }   /* (the white page's own field, as the scene under it) */
/* her and the lab as one picture: 08-people.js fades it out under the bar and at its foot (one gradient, so her coat never thins
   over the room behind it) */
.hero-photo .hp-in { position: absolute; inset: 0; }
/* the room behind her: the lab, muted (hero-plate), feathered out toward the words */
.hero-photo .hp-plate { position: absolute; top: 0; bottom: 0; left: var(--hp-pl, 40%); right: 0; background: center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hp-fade, 300px)); mask-image: linear-gradient(90deg, transparent 0, #000 var(--hp-fade, 300px)); }
/* a breath of the brand's Mist Blue behind her shoulders, so her white coat stands off the pale room */
.hero-photo .hp-haze { position: absolute; inset: 0; background: radial-gradient(var(--hp-hr, 300px) calc(var(--hp-hr, 300px) * 1.2) at var(--hp-hz, 70% 50%), rgba(184,200,216,.34), rgba(216,226,236,.16) 55%, rgba(216,226,236,0) 100%); }
.hero-photo .hp-person { position: absolute; display: block; max-width: none; filter: drop-shadow(0 0 1px rgba(79,104,126,.26)) drop-shadow(0 22px 34px rgba(15,17,19,.12)); }   /* (a faint slate edge round her, so her white coat keeps its edge on white; round 7: a little firmer, her left sleeve had read as fading into the page) */
.hero-photo .hp-person.noboard, .hero-photo .hp-person.blur { opacity: 0; }   /* (her holding hands, her out of focus: 08-people.js fades them in; opacity, never visibility, under a parent that hides by visibility) */
/* the 3D board's soft shadow on her coat while it is near her (08-people.js places it under the board) */
.hero-photo .hp-shade { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,17,19,.26), rgba(15,17,19,.1) 55%, rgba(15,17,19,0)); filter: blur(10px); }
/* its contact shadow in her hands: the board's box, its shadow falling down and right (the key is upper left) on her coat and on
   the gloves under its lower edge; the board itself covers the box (the photo's hole) */
/* the board's own dark edge, under the photo's last 1.5 px over it (08-people.js clips it to the board's outline) */
.hero-photo .hp-edge { position: absolute; inset: 0; background: rgb(40, 43, 44); opacity: 0; }
.hero-photo .hp-contact { position: absolute; border-radius: 2px; box-shadow: 1px 3px 4px rgba(15,17,19,.36), .5px 1.2px 1.2px rgba(15,17,19,.34); }
/* phones and upright tablets: the lab runs the full width, edge to edge, its top feathered out under the bar */
/* (round 5: a phone's sides had feathered too, and with its top and foot it read as a box with soft edges all round; its top is a
   short fade now, so the photo meets the bar as one clean edge) */
/* (people-pt, set by 08-people.js: she stands over the headline, by the layout's own rule, not the screen's orientation) */
body.people-pt .hero-photo .hp-plate { -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--hp-nb, 64px) - 8px), #000 calc(var(--hp-nb, 64px) + 56px)); mask-image: linear-gradient(180deg, transparent calc(var(--hp-nb, 64px) - 8px), #000 calc(var(--hp-nb, 64px) + 56px)); }
@media (max-width: 599px) {
  body.people-pt .hero-photo .hp-plate { -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--hp-nb, 64px) - 8px), #000 calc(var(--hp-nb, 64px) + 14px)); mask-image: linear-gradient(180deg, transparent calc(var(--hp-nb, 64px) - 8px), #000 calc(var(--hp-nb, 64px) + 14px)); }
}
/* her board, named as the dish names it */
.hero-photo .hp-tag { position: absolute; display: flex; align-items: center; transform: translateY(-50%); white-space: nowrap; }
.hero-photo .hp-tag > i { width: 46px; height: 1px; background: rgba(15,17,19,.45); }
.hero-photo .hp-tag > span { font: 500 13px/1 var(--sans); color: var(--n950); background: #E8EEF4; padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 0 0 1px #AAC0D1, 0 6px 16px -6px rgba(15,17,19,.2); }   /* (in the brand's Mist with a Soft Blue edge: white on her white coat had no edge) */
/* over the 3D board while it is in her hands: her own board crossfading into it, and her fingertips holding it */
.hero-hold .hh-patch { position: absolute; overflow: hidden; }
.hero-hold img { position: absolute; display: block; max-width: none; }

/* a phone: the hero's pills side by side, as a shorter phone has them (style.css), so she has room to stand over the headline with
   her board in her hands (round 5: every phone, not only those up to 700 px tall: a taller one's stacked pills had pushed the
   headline up under her hands, and her board was 30 px) */
@media (max-width: 767px) {
  body.people.people-pt[data-theme] :is(#top) .cta-row { flex-direction: row; margin-top: 1rem; gap: .5rem; }
  body.people.people-pt[data-theme] :is(#top) .cta-row .pill { flex: 1 1 0; min-width: 0; height: 2.85rem; font-size: .9375rem; }
  body.people.people-pt[data-theme] :is(#top) .cta-row .pill--hero { padding: 0 .3rem 0 1rem; gap: .5rem; }
  body.people.people-pt[data-theme] :is(#top) .cta-row .pill--glass { padding: 0 .9rem; justify-content: center; }
  body.people.people-pt[data-theme] :is(#top) .cta-row .pill-ic { width: 2.2rem; height: 2.2rem; }
}
/* (the hero copy's legibility glow stops short of her: it had washed her sleeve out on a desktop) */
@media (min-width: 768px) { body.people:not(.people-pt) .ch--hero .copy::before { right: 32%; } }
/* (a phone's copy glow stays under the headline, off her hands and the board) */
@media (max-width: 599px) { body.people.people-pt .ch--hero .copy::before { top: -1.25rem; } body.people-pt .hero-photo .hp-plate { background-position: 72% 30%; } }

/* ---------- v6, Record: the reader stimulates a neuron (37-micro.js) ----------
   A line of its own in the legend says it can be done, with the invite's ring as its glyph (pointing at the culture on a
   desktop); until the first click a Deep Blue tag sits on the invite's ring; over a cell the pointer is a hand. On
   a desktop a small card traces the pulse and the answer as they run (their pulse in Coral, the answer in Olive) on a seconds
   scale, on the field at the view's lower right; elsewhere, after a click, a strip at the field's foot does, on one line. */
#process .legend { flex-wrap: wrap; row-gap: .6rem; }
#process .legend .try { flex-basis: 100%; color: var(--n950); font-weight: 500; gap: .4rem; }
.legend .try svg { flex: none; color: var(--deep); }
.legend .try b { font-weight: 400; color: var(--n600); }
body.try-hover { cursor: pointer; }
.try-tag { position: absolute; left: 0; top: 0; padding: 4px 9px; border-radius: 999px; background: var(--deep); color: #fff; font: 500 11px/1 var(--sans); white-space: nowrap;
  box-shadow: 0 4px 10px -6px rgba(15,17,19,.35); pointer-events: none; visibility: hidden; will-change: transform, opacity; }
.rec-strip { position: absolute; left: 0; top: 0; padding: 10px 12px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(15,17,19,.07), 0 12px 24px -16px rgba(15,17,19,.28);
  font: 500 12px/1 var(--sans); color: var(--n950); pointer-events: none; visibility: hidden; will-change: transform, opacity; }
.rec-strip .rs-h { display: flex; justify-content: space-between; align-items: center; }
.rec-strip .rs-h i { display: inline-block; width: 10px; height: 2px; border-radius: 1px; margin: 0 6px 0 0; vertical-align: middle; }
.rec-strip .rs-h i.c { background: var(--coral); }
.rec-strip .rs-h i.o { background: #A4B458; margin-left: 12px; }
.rec-strip .rs-n { color: var(--n600); font-weight: 400; font-variant-numeric: tabular-nums; }
.rec-strip canvas { display: block; width: 100%; height: 24px; margin: 6px 0 3px; }
.rec-strip .rs-t { position: relative; height: 11px; font: 400 11px/1 var(--sans); color: var(--n600); font-variant-numeric: tabular-nums; }
.rec-strip.short { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 7px 12px; }   /* (a short phone: one line, the trace and the count) */
.rec-strip.short .rs-h { display: contents; }
.rec-strip.short .rs-h > span:first-child, .rec-strip.short .rs-t { display: none; }
.rec-strip.short canvas { grid-row: 1; grid-column: 1; margin: 0; }
.rec-strip .rs-t span, .rec-trace .rt-t span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rec-strip .rs-t span i, .rec-trace .rt-t span i { position: absolute; left: 100%; padding-left: 2px; font-style: normal; }   /* (the unit after the last numeral, which stays centred on its tick) */
.rec-trace { position: absolute; left: 0; top: 0; width: 252px; padding: 12px 16px 10px; border-radius: 14px; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(15,17,19,.07), 0 16px 32px -18px rgba(15,17,19,.28); visibility: hidden; will-change: transform, opacity; }
.rec-trace .rt-h { display: flex; justify-content: space-between; font: 500 12px/1 var(--sans); color: var(--n950); }
.rec-trace .rt-s, .rec-trace .rt-n { color: var(--n600); font-weight: 400; font-size: 11px; font-variant-numeric: tabular-nums; }
.rec-trace canvas { display: block; margin: 6px 0 10px; }
.rec-trace canvas.rt-b { margin-bottom: 4px; }
.rec-trace .rt-t { position: relative; height: 11px; margin: 0 -16px; font: 400 11px/1 var(--sans); color: var(--n600); font-variant-numeric: tabular-nums; }

/* r6 · 01 The same shape in Story's call-out tags: the five node names and the two signals wear Software's dark glass pill
   (.co.dk), without a pin or leader. The node names are white; the signals are Story's grey and a size smaller. */
.co.dk.sh .tag > span { font-size: .8125rem; padding: .4rem .78rem; }
.co.dk.sh.sig .tag > span { font-size: .75rem; padding: .36rem .72rem; color: #b9c6d3; }
/* as 01 scrolls on into 02 its copy dissolves under a soft edge (11-night.js sets where): off by default */
#shape .stick { -webkit-mask-image: linear-gradient(to bottom, transparent var(--mY, -200px), #000 calc(var(--mY, -200px) + var(--mB, 64px))); mask-image: linear-gradient(to bottom, transparent var(--mY, -200px), #000 calc(var(--mY, -200px) + var(--mB, 64px))); }
@media (max-width: 767px) {
  .co.dk.sh .tag > span { font-size: .75rem; padding: .32rem .62rem; }
  /* phones: each signal in two short lines, so it sits between its row's tiles with room on both sides */
  .co.dk.sh.sig .tag > span { font-size: .6875rem; line-height: 1.2; padding: .34rem .62rem; white-space: normal; width: min-content; text-align: center; border-radius: .75rem; }
}

/* 07 Ship (phones and tall tablets): the diagram sits wholly above the copy, so the copy's scrim only needs to reach the
   copy. At its full height it dimmed the TBC model's row of clips below the base's, and the clips are the same quality. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .scrim { transition: opacity .5s var(--ease), background .6s var(--ease), height .7s var(--ease); }
  body.ship-on .scrim { height: 30svh; }
}
/* 07 Ship: the small muted name under each row's blocks (what the blocks are) */
.co.dit .tag > span { background: none; box-shadow: none; padding: 0; font: 500 max(13px, .8125rem)/1.25 var(--sans); letter-spacing: .01em; color: #aab7c4; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* (Story's light grey: r6, 4.5:1+ on the floor) */
@media (max-width: 767px) { .co.dit .tag > span { font-size: max(11px, .75rem); } }
.co.dit .pin, .co.dit svg { display: none; }
/* 07 Ship (r6): each row's name with the team's sublabel under it ("1 clip", "5 clips in the same time"), left-aligned with the row */
.co.shiphd .tag > span { text-align: left; }
.co.shiphd .tag small { margin-top: .25rem; color: #aab7c4; }
/* 07 Ship (v5, a phone under 600 px tall: 40-ship.js tightLayout): each row's name on two lines over its clips, and the 0.1% pill a
   little smaller, so it fits beside ours */
.co.shiphd.two .tag b, .co.shiphd.two .tag small { display: block; }
.co.shiphd.two .tag small { margin: .2rem 0 0; }
.co.dk.lime.sm .tag > span { font-size: .75rem; padding: .3rem .62rem; }
/* 07 Ship (v5, the same clock): "Same time", the clock's finish, a step brighter than the blocks' names; and a phone under 600 px
   tall's row names a size down, so ours' stays inside its clips and clear of the finish line */
.co.dit.clk .tag > span { color: #d6dee6; }
.co.shiphd.two .tag b { font-size: .75rem; }
.co.dit.clk .tag { line-height: 0; }   /* (its box is its text's: the page's line box left it 10 px taller, so anchored by its foot it rode high) */
/* 07 Ship (v5, Round 3, A · one clock: 41-ship-a.js): "Next 5", the batch ours is already making, in the brand's Forest Green */
body[data-theme="light"] .co.dit.nx .tag > span { color: #507753; }
.co.dit.nx .tag { line-height: 0; }   /* (its box is its text's, as "Same time": anchored by its foot it rode high, onto ours' bars) */
/* (and its rows' names over their sublabels on every screen, so "5x faster" stands beside the name's first line: a short phone's
   block in style.css sets them on one line) */
.co.shiphd.blk .tag b, .co.shiphd.blk .tag small { display: block; }
.co.shiphd.blk .tag small { margin: .2rem 0 0; }
body[data-theme="light"] .co.dit.clk .tag > span { color: #33475a; }   /* ("Same time" a step stronger on the light page: the shared end of both rows' clock) */
/* 07 Ship (v7, Round 4: "more obvious that the top one is open-source and the below one is TBC optimized", 41-ship-a.js): each
   row's name has its bar's colour beside it, the Slate grey of the base's one bar and the Forest Green of ours */
.co.shiphd .tag b .sw { display: inline-block; width: .5rem; height: .5rem; margin: 0 .5rem .08em 0; border-radius: 50%; background: #889CAF; vertical-align: middle; }
.co.shiphd .tag b .sw.ours { background: #507753; }

/* 06 Software: "The neurons stay in the lab" wears the same dark glass tag as the other two; its pin is coral (what stays),
   the other two are lime (what leaves) */
.co.dk.stay .pin { background: var(--coral); box-shadow: 0 0 8px 1px rgba(244,95,74,.55); }
/* phones (the page's portrait test: narrower than 768px, or taller than wide): "Leaves the lab" in three short lines and
   "The neurons stay in the lab" in two, so both fit in the dark at the top left, off the dish's rim */
@media (max-width: 767px), (max-aspect-ratio: 20/21) {
  .co.dk .tag > span.wrap-p, .co.dk .tag > span.sw-n { white-space: normal; width: max-content; max-width: 8rem; }
  .co.dk .tag > span.sw-n { border-radius: .85rem; padding: .45rem .8rem; }
}

/* r10 · 06 Software on phones and upright tablets: as 03's, the board's near pad rows lie under the copy, so it carries a scrim in
   the studio's own charcoal that rises from clear over the 3.5rem above the eyebrow (the gold no longer shows through "06 /07") */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 501px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  #software .copy::before { display: block; inset: -4rem -1.25rem -3rem; border-radius: 0; opacity: var(--halo, 1);
    background: linear-gradient(to bottom, rgba(16,18,21,0), rgba(16,18,21,.8) 3.5rem, rgba(16,18,21,.93) 6rem, rgba(16,18,21,.95)); }
}
/* v6: a phone under 600 px tall: the tag on one line, so it has its own band under the bar, clear of the board (30-chip.js pbox) */
@media (orientation: portrait) and (max-height: 599px) { #labels .co.dk .tag > span.wrap-p { max-width: none; white-space: nowrap; font-size: .75rem; padding: .4rem .7rem; } }
/* v6: the wide view's tag is opaque, so the beam and its end never show through it */
html.sw-wide #labels .co.dk .tag > span.wrap-p { background: #fff; }

/* ---------- Webflow: the chapters' lengths (v7 sets them inline) ---------- */
.ch { --len: initial; }
#top { --len: 1.25; }
#dish { --len: 2; }
#encode { --len: 2.5; }
#process { --len: 2.5; }
#decode { --len: 2.1; }
#software { --len: 2; }
#ship { --len: 2.1; }
#next { --len: 2.2; }

/* ---------- tbc.co: the site's main holds the story, clear; its footer follows the story ---------- */
.page_main:has(> #story) { background-color: transparent; z-index: 3; }
:is(#story, .page_main:has(> #story)) ~ .footer_wrap { position: relative; }

/* ---------- tbc.co: v7's dark colour scheme on its own parts only ---------- */
:root:has(> body > .page_wrap) { color-scheme: normal; }
:where(body:has(> .page_wrap) > :not(.page_wrap), #story, #traceCard) { color-scheme: dark; }

/* ---------- tbc.co: the site's Paragraph colour stays off v7's paragraphs, which inherit as in v7 ---------- */
:where(body:not(:has(> .page_wrap)), body:has(> .page_wrap) > :not(.page_wrap), #story, #traceCard) p { color: inherit; }