/* Case pages: a single column as wide as the home page, text narrower, media at full width */
:root { --bg: #efe4d0; --ink: #060606; --body: #434445; --mute: #5f5f5a; --blue: #2f55e8; --line: rgba(23,22,15,.14);
  --sans: 'Geist', system-ui, sans-serif; --head: 'Geist', system-ui, sans-serif; --text: 'Geist', system-ui, sans-serif; --mono: 'Geist', system-ui, sans-serif; }
:root[data-theme="dark"] { color-scheme: dark; --bg: #0f1014; --ink: #f6f3ed; --body: #c4c3bf; --mute: #92918c; --blue: #86a2ff; --line: rgba(242,239,233,.16); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); transition: background-color .5s ease; }
body { font: 16px/1.6 var(--text); color: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
.mono { font: 500 12px/1.8 var(--mono); letter-spacing: .153em; text-transform: uppercase; }
.id, .links { display: none; }
.id { color: var(--mute); }
.id p:first-child { color: var(--ink); margin-bottom: 2px; }
.flag { display: inline-block; width: 15px; height: 10px; margin-left: 2px; border-radius: 1.5px; vertical-align: -1px; }
.moon { display: none; }
:root[data-theme="dark"] .moon { display: inline; }
:root[data-theme="dark"] .sun { display: none; }
.links a { color: var(--mute); text-decoration: none; transition: color .2s; }
.links a:hover { color: var(--ink); }
@media (min-width: 1280px) {
  .id { display: block; position: fixed; z-index: 9; top: 99px; left: clamp(24px, calc(50% - 569px), 99px); width: 220px; }
  .links { display: flex; position: fixed; z-index: 9; top: 99px; right: clamp(24px, calc(50% - 583px), 85px); flex-direction: column; align-items: flex-end; }
  .id, .links { font-size: 13px; line-height: 24px; }
}
@media (min-width: 900px) { .cord { left: min(calc(50% + 415px + clamp(16px, calc((100vw - 1330px) / 2), 72px)), calc(100% - 40px)); right: auto; } }
main { position: relative; display: flow-root; overflow: clip; }
main::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .16; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='a' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.2 0 0 0 -.92'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23a)' opacity='.14'/%3E%3Crect width='600' height='600' filter='url(%23b)' opacity='.9'/%3E%3C/svg%3E") 0 0 / 600px 600px; filter: invert(1); }
:root[data-theme="dark"] main::before { opacity: .1; filter: none; }

/* the cover is where the flying postcard ends: same picture, same place */
.cs-cover { position: relative; z-index: 111; width: min(100vw - 48px, 820px); aspect-ratio: 1200 / 628; margin: 60px auto 0; overflow: hidden; border-radius: 2px; }
.cs-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* one simple article: a short header row, plain headings, text and pictures */
.page { position: relative; z-index: 111; width: min(100% - 48px, 820px); margin: 22px auto 0; padding-bottom: 170px; animation: page-in .6s ease backwards; font-size: 16px; line-height: 1.65; }
@keyframes page-in { from { opacity: 0; translate: 0 12px; } }
.cs-head { display: grid; grid-template-columns: 1.1fr .8fr 2fr; gap: 12px 24px; font-size: 15px; line-height: 1.45; }
.cs-who .company { display: flex; align-items: center; height: 22px; margin-bottom: 2px; }
.cs-who .mark { display: block; height: var(--logo); width: auto; filter: brightness(0); opacity: .6; }
:root[data-theme="dark"] .cs-who .mark { filter: brightness(0) invert(1); opacity: .7; }
.cs-who span, .cs-when, .cs-sub { color: var(--mute); }
.cs-who span { display: block; }
.cs-title { font: 600 15px/1.45 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.cs-sub { margin-top: 4px; }
.page section { margin-top: 64px; scroll-margin-top: 90px; }
.page h2 { font: 600 16px/1.4 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.page h3 { margin-top: 36px; font: 600 16px/1.4 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.page h2 + h3 { margin-top: 14px; }
.page section p, .page section ul { margin-top: 12px; }
.page ul { padding-left: 20px; }
.page li + li { margin-top: 6px; }



.shot { margin-top: 20px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.shot figcaption { margin-top: 8px; font-size: 13px; color: var(--mute); }
.diagram { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.diagram svg { display: block; width: 100%; height: auto; min-width: 640px; }
.diagram text { font-family: var(--sans); }
.d-box { fill: rgba(127,120,105,.1); stroke: var(--line); }
.d-code { fill: rgba(92,194,187,.1); stroke: #5cc2bb; }
.d-acc { fill: rgba(47,85,232,.07); stroke: var(--blue); }
.d-t { fill: var(--ink); font-size: 14px; font-weight: 500; }
.d-s { fill: var(--body); font-size: 12px; }
.d-m { fill: var(--mute); font-size: 11px; font-family: var(--mono) !important; letter-spacing: .06em; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.d-line { stroke: var(--mute); stroke-width: 1.4; fill: none; }
.d-line-acc { stroke: var(--blue); stroke-width: 1.6; fill: none; }
.d-dash { stroke: var(--mute); stroke-width: 1.2; fill: none; stroke-dasharray: 4 4; }
.d-arrow { fill: var(--mute); }
.d-arrow-acc { fill: var(--blue); }
@media (max-width: 700px) { .cs-head { grid-template-columns: minmax(0, 1fr); } .cs-title { margin-top: 6px; } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

/* the page dissolves into the bottom edge; case navigation floats on top */
.edge-blur { position: fixed; z-index: 115; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; }
.edge-blur i { position: absolute; inset: 0; }
.edge-blur i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.edge-blur i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(transparent 25%, #000 65%); mask-image: linear-gradient(transparent 25%, #000 65%); }
.edge-blur i:nth-child(3) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(transparent 50%, #000 90%); mask-image: linear-gradient(transparent 50%, #000 90%); }
.edge-blur i:nth-child(4) { background: linear-gradient(transparent, var(--bg)); opacity: .55; }
.cs-nav { position: fixed; z-index: 116; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(88,80,68,.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 28px -10px rgba(30,22,12,.5); color: #f8f3e8; }
.cs-nav a { display: block; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: inherit; text-decoration: none; transition: background-color .2s; }
.cs-nav a:hover { background: rgba(255,255,255,.14); }
.cs-nav a:focus-visible { outline: 2px solid #f8f3e8; outline-offset: 1px; }
.cs-side { min-width: 142px; padding: 7px 22px 8px; }
.cs-side .mono { display: flex; align-items: center; gap: 5px; font-size: 9.5px; line-height: 1.5; opacity: .75; }
.cs-side b { display: block; font: 400 18px/1.15 var(--head); white-space: nowrap; }
.cs-prev { text-align: right; }
.cs-prev .mono { justify-content: flex-end; }
.cs-nav .mono svg { width: 5px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cs-home { display: grid !important; place-items: center; flex: none; width: 50px; }
.cs-home svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
@media (max-width: 420px) { .cs-side { min-width: 0; flex: 1; padding-inline: 14px; } .cs-nav { width: calc(100% - 20px); } }
.cs-side b { font: 500 14px/1.3 var(--sans); letter-spacing: -.01em; }

/* results: two small cards beside one large card */
.metrics { --card: rgba(23,22,15,.045); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 8px; margin-top: 24px; }
:root[data-theme="dark"] .metrics { --card: rgba(242,239,233,.06); }
.metric { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; margin: 0; padding: 18px 20px; min-height: 128px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 14px; line-height: 1.4; color: var(--mute); }
.metric b { font: 500 22px/1.2 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.metric--big { grid-column: 2; grid-row: 1 / 3; }
.metric--big b { font-size: 44px; line-height: 1; letter-spacing: -.04em; }
.metric strong { display: block; font-weight: 500; font-size: 16px; color: var(--ink); }
.metric--big span { display: block; margin-top: 4px; }
.metric--quote blockquote { margin: 0; font: 500 19px/1.35 var(--sans); letter-spacing: -.015em; color: var(--ink); }
@media (max-width: 700px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric--big { grid-column: 1 / -1; grid-row: auto; }
  .metric { min-height: 112px; padding: 16px; }
}
.metric b { font-size: 34px; line-height: 1.05; letter-spacing: -.04em; }
.metric--big b { font-size: 44px; line-height: 1; }
@media (max-width: 700px) { .metric b { font-size: 28px; } .metric--big b { font-size: 44px; } }

/* two clear levels: the section heading is larger, the sub-heading stays at text size */
.page h2 { font: 600 24px/1.25 var(--sans); letter-spacing: -.025em; }
.page h3 { font: 500 16px/1.4 var(--sans); letter-spacing: -.005em; }
.page h2 + h3 { margin-top: 20px; }

/* lighter headings */
.cs-title, .page h2 { font-weight: 500; }
.metric--quote blockquote { font-weight: 400; }
.metric b, .metric--big b { font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -.04em; }
@media (max-width: 900px) { .metric b, .metric--big b { font-size: 44px; } }
@media (max-width: 700px) { .metric b, .metric--big b { font-size: clamp(36px, 10.5vw, 44px); } }

/* live Quick Buy demo, in Trady's own colours in both themes */
.qb { position: relative; margin-top: 24px; padding-bottom: 12px; overflow: hidden; border-radius: 10px; background: #080808; color: #fff; font-size: 14px; line-height: 1.3; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 34px -18px rgba(0,0,0,.6); }
.qb-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.qb-tag { padding: 3px 8px; border-radius: 6px; background: #fff200; color: #080808; font-size: 12px; font-weight: 500; }
.qb-clock { flex: 1; min-width: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.qb-clock.done { color: #26de5f; }
.qb-set { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(38,222,95,.3); border-radius: 10px; background: #061b0d; color: #26de5f; font-size: 12px; font-weight: 500; }
.qb-amount { width: 38px; border: 0; outline: 0; background: none; color: #fff; font: inherit; text-align: center; }
.qb-set:focus-within { border-color: #26de5f; }
.no-amount .qb-set { border-color: #f7523b; }
.qb-head, .qb-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px 74px 74px; align-items: center; column-gap: 12px; padding-inline: 16px; }
.qb-head { grid-template-columns: minmax(0, 1fr) 110px 160px; padding-block: 10px 6px; color: rgba(255,255,255,.45); font-size: 12px; }
.qb-head span:last-child { text-align: right; }
.qb-row { padding-block: 10px; border-top: 1px solid rgba(255,255,255,.06); transition: background-color .3s; }
.qb-row.held { background: rgba(38,222,95,.05); }
.qb-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: #080808; font-weight: 500; }
.qb-row b { display: block; font-weight: 500; }
.qb-row i { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: 12px; font-style: normal; }
.qb-mc i { color: #26de5f; }
.qb-mc i.down { color: #f7523b; }
.qb-mc.tick i { animation: qb-tick .6s ease; }
@keyframes qb-tick { 0% { opacity: .35; } }
.qb-buy, .qb-sell { height: 40px; border-radius: 10px; font: 500 12px var(--sans); cursor: pointer; transition: background-color .15s, opacity .2s, transform .1s; }
.qb-buy { border: 1px solid rgba(38,222,95,.3); background: #061b0d; color: #26de5f; }
.qb-sell { border: 1px solid rgba(247,82,59,.3); background: #220e0b; color: #f7523b; }
.qb-buy:hover:enabled { background: #0a2c15; }
.qb-sell:hover:enabled { background: #36150f; }
.qb-buy:active:enabled, .qb-sell:active:enabled { transform: scale(.96); }
.qb-buy:disabled, .qb-sell:disabled { opacity: .35; cursor: default; }
.qb-buy:focus-visible, .qb-sell:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.qb-toast { position: absolute; right: 16px; bottom: 44px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: #1a1a1a; font-size: 12px; opacity: 0; translate: 0 6px; transition: opacity .2s, translate .2s; pointer-events: none; }
.qb-toast.on { opacity: 1; translate: 0 0; }
.qb figcaption { margin: 10px 16px 0; color: rgba(255,255,255,.45); font-size: 13px; }
@media (max-width: 700px) {
  .qb-head { grid-template-columns: minmax(0, 1fr) 124px; }
  .qb-head span:nth-child(2) { display: none; }
  .qb-row { grid-template-columns: 32px minmax(0, 1fr) 58px 58px; column-gap: 8px; padding-inline: 12px; }
  .qb-head, .qb-top { padding-inline: 12px; }
  .qb-logo { width: 32px; height: 32px; }
  .qb-mc { display: none; }
  .qb-clock { font-size: 12px; }
}

/* live Custom Radar demo */
.rd-bar { padding: 14px 16px 4px; }
.rd-presets, .rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-presets button { padding: 7px 12px; border: 1px solid transparent; border-radius: 8px; background: #161616; color: rgba(255,255,255,.75); font: 500 13px var(--sans); cursor: pointer; transition: border-color .15s, color .15s; }
.rd-presets button:hover { color: #fff; }
.rd-presets button[aria-pressed="true"] { border-color: rgba(255,255,255,.8); color: #fff; }
.rd-chips { min-height: 28px; margin-top: 10px; }
.rd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: #1a1a1a; color: rgba(255,255,255,.75); font: 400 12px var(--sans); cursor: pointer; animation: rd-in .2s ease; }
.rd-chip:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.rd-chip svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@keyframes rd-in { from { opacity: 0; scale: .92; } }
.rd-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 10px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rd-sliders label { display: block; color: rgba(255,255,255,.55); font-size: 12px; }
.rd-sliders b { float: right; font-weight: 500; color: #fff; }
.rd-sliders input { display: block; width: 100%; margin-top: 8px; accent-color: #fff200; cursor: pointer; }
.rd-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease, opacity .2s ease; }
.rd-row > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 0; overflow: hidden; padding-inline: 16px; }
.rd-row > div > * { margin-block: 9px; }
.rd-row.off { grid-template-rows: 0fr; opacity: 0; }
.rd-row b { display: block; font-weight: 500; }
.rd-row i { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: 12px; font-style: normal; }
.rd-num { text-align: right; white-space: nowrap; }
.rd-none { margin: 16px !important; color: rgba(255,255,255,.55); font-size: 13px; }
.rd figcaption { margin-top: 10px; }
@media (max-width: 700px) { .rd-sliders { gap: 14px; } .rd-row > div { padding-inline: 12px; } .rd-bar, .rd-sliders { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .rd-row, .rd-chip { transition: none; animation: none; } }

/* Quick Buy with the full set of columns from the real list; it reaches past the text column on wide screens so they fit */
.qb-logo { object-fit: cover; }
.qb-head, .qb-row { grid-template-columns: 36px 112px 74px 58px 58px 52px minmax(0, 1fr) 58px 58px; column-gap: 10px; }
.qb-head { padding-block: 10px 6px; }
.qb-head > span:first-child { grid-column: 1 / 3; }
.qb-head > span:last-child { grid-column: 8 / 10; white-space: nowrap; }
.qb-row { font-size: 13px; }
.qb-col, .qb-tx { font-size: 13px; }
.qb-head .qb-col, .qb-head .qb-tx, .qb-head .qb-info { font-size: 12px; }
.qb-name i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-tx u { display: block; width: 28px; height: 3px; margin-top: 4px; border-radius: 2px; background: linear-gradient(90deg, #26de5f var(--b), #f7523b var(--b)); }
.qb-row .qb-info { display: grid; gap: 5px; min-width: 0; font-size: 11px; color: rgba(255,255,255,.8); }
.qb-row .qb-info > span { display: flex; gap: 7px; white-space: nowrap; }
.qb-row .qb-info > span + span { color: #26de5f; }
.qb-info > span > span { display: inline-flex; align-items: center; gap: 2px; }
.qb-info em { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .55; }
.qb-info .i-h em, .qb-info .i-w em { border-radius: 50%; }
.qb-info .i-t { color: #f7c948; }
.qb-info .bad { color: #f7523b; }
.qb-buy, .qb-sell { height: 36px; }
@media (min-width: 1000px) { #qb-demo { --w: min(100vw - 500px, 1040px); left: 50%; width: var(--w); translate: -50% 0; } }
@media (max-width: 999px) { .qb-head, .qb-row { grid-template-columns: 36px minmax(0, 1fr) 74px 58px 58px 52px 58px 58px; } .qb-head > span:last-child { grid-column: 7 / 9; } .qb-info { display: none !important; } }
@media (max-width: 760px) { .qb-col, .qb-tx { display: none; } .qb-head, .qb-row { grid-template-columns: 32px minmax(0, 1fr) 58px 58px; column-gap: 8px; } .qb-head > span:nth-child(2) { display: none; } .qb-head > span:last-child { grid-column: 3 / 5; text-align: right; } }
.qb-toast { top: auto; bottom: 6px; right: 12px; }
@media (min-width: 1000px) { #qb-demo { left: 0; width: 100%; translate: none; } }
@media (max-width: 1379px) { .qb-head, .qb-row { grid-template-columns: 36px minmax(0, 1fr) 74px 58px 58px 52px 58px 58px; } .qb-head > span:last-child { grid-column: 7 / 9; } .qb-info { display: none !important; } }
@media (min-width: 1380px) { #qb-demo { --w: min(100vw - 520px, 1040px); left: 50%; width: var(--w); translate: -50% 0; } }
@media (max-width: 760px) { .qb-head, .qb-row { grid-template-columns: 32px minmax(0, 1fr) 58px 58px; } .qb-head > span:last-child { grid-column: 3 / 5; } }

/* Quick Buy keeps the same width as Radar; the name column takes the spare room, so nothing gapes before the buttons */
@media (min-width: 761px) { #qb-demo { left: 0; width: 100%; translate: none; } }
@media (min-width: 900px) {
  .qb-head, .qb-row { grid-template-columns: 36px minmax(0, 1fr) 70px 60px 60px 48px 160px 56px 56px; column-gap: 8px; }
  .qb-head > span:last-child { grid-column: 8 / 10; }
  .qb-info { display: grid !important; }
  .qb-head .qb-info { display: block !important; }
}
@media (max-width: 899px) and (min-width: 761px) {
  .qb-head, .qb-row { grid-template-columns: 36px minmax(0, 1fr) 70px 60px 60px 48px 56px 56px; column-gap: 8px; }
  .qb-head > span:last-child { grid-column: 7 / 9; }
  .qb-info { display: none !important; }
}

/* live KOL Alpha demo */
.kol-head, .kol-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 90px 210px 70px; align-items: center; column-gap: 12px; padding-inline: 16px; }
.kol-head { grid-template-columns: minmax(0, 1fr) 90px 210px 70px; padding-block: 10px 6px; color: rgba(255,255,255,.45); font-size: 12px; }
.kol-row { padding-block: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.kol-row.hit { animation: kol-hit 1.2s ease; }
@keyframes kol-hit { 0% { background: rgba(255,242,0,.1); } }
.kol-mc b, .kol-row .rd-name b { display: block; font-weight: 500; }
.kol-mc i, .kol-row .rd-name i { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: 12px; font-style: normal; }
.kol-mc i { color: #26de5f; }
.kol-mc i.down { color: #f7523b; }
.kol-cell { display: flex; align-items: center; gap: 8px; }
.kol-count { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; font-size: 12px; }
.kol-count svg { width: 12px; height: 12px; fill: none; stroke: #fff200; stroke-width: 1; }
.kol-count b { font-weight: 500; }
.kol-stack { display: flex; }
.kol-face { flex: none; width: 26px; height: 26px; margin-left: -7px; padding: 0; overflow: hidden; border: 2px solid #080808; border-radius: 50%; background: #222; cursor: pointer; transition: translate .15s; }
.kol-face:first-child { margin-left: 0; }
.kol-face:hover, .kol-face:focus-visible { z-index: 1; translate: 0 -3px; outline: 0; }
.kol-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kol-face.fresh { animation: kol-in .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes kol-in { from { scale: 0; opacity: 0; } }
.kol-row .qb-buy { width: 100%; height: 36px; }
.kol-tip { position: absolute; z-index: 3; padding: 6px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: #1a1a1a; font-size: 12px; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 8px)); transition: opacity .15s; pointer-events: none; }
.kol-tip.on { opacity: 1; }
.kol figcaption { margin-top: 10px; }
@media (max-width: 700px) {
  .kol-head, .kol-row { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 8px; padding-inline: 12px; }
  .kol-head { display: none; }
  .kol-mc, .kol-row .qb-buy { display: none; }
  .kol-count { padding: 2px 5px; }
  .kol-face { width: 24px; height: 24px; }
}

/* live multi-wallet demo */
.qb-clock.warn { color: #f7523b; }
.mw-run { flex: none; padding: 7px 12px; border: 0; border-radius: 8px; background: #fff200; color: #080808; font: 500 13px var(--sans); cursor: pointer; }
.mw-run:disabled { opacity: .5; cursor: default; }
.mw-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mw-settings { padding: 16px; border-right: 1px solid rgba(255,255,255,.08); }
.mw-set { display: block; margin-bottom: 20px; }
.mw-label { display: flex; justify-content: space-between; font-weight: 500; }
.mw-label b { padding: 2px 8px; border-radius: 6px; background: #1a1a1a; font-size: 12px; font-weight: 500; }
.mw-set input { display: block; width: 100%; margin-top: 10px; accent-color: #fff; cursor: pointer; }
.mw-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: rgba(255,255,255,.4); font-size: 11px; }
.mw-ticks i { font-style: normal; }
.mw small { display: block; margin-top: 6px; color: rgba(255,255,255,.5); font-size: 12px; }
.mw-toggle { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.mw-toggle b { font-weight: 500; }
.mw-toggle input { position: absolute; opacity: 0; }
.mw-toggle u { flex: none; position: relative; width: 36px; height: 20px; border-radius: 99px; background: #2a2a2a; transition: background-color .2s; }
.mw-toggle u::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate .2s; }
.mw-toggle input:checked + u { background: #26de5f; }
.mw-toggle input:checked + u::after { translate: 16px 0; }
.mw-toggle input:focus-visible + u { outline: 2px solid #fff; outline-offset: 2px; }
.mw-list { padding: 8px 16px; }
.mw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding-block: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.mw-row:first-child { border-top: 0; }
.mw-name b { font-weight: 500; }
.mw-name i { margin-left: 6px; color: rgba(255,255,255,.45); font-size: 12px; font-style: normal; }
.mw-amt { font-size: 13px; color: #26de5f; }
.mw-row.low .mw-amt { color: #f7523b; }
.mw-bar { grid-column: 1 / -1; order: 3; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.mw-bar u { display: block; height: 100%; border-radius: 3px; background: #26de5f; transition: width .35s ease, opacity .25s; }
.mw-row.low .mw-bar u { background: #f7523b; }
.mw-bar u.pending { opacity: .18; }
.mw-row.done .mw-bar { animation: mw-done .5s ease; }
@keyframes mw-done { 0% { box-shadow: 0 0 0 2px rgba(38,222,95,.5); } }
.mw figcaption { margin-top: 10px; }
@media (max-width: 700px) { .mw-body { grid-template-columns: minmax(0, 1fr); } .mw-settings { padding: 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } .mw-list { padding: 4px 12px; } }
@media (prefers-reduced-motion: reduce) { .kol-face.fresh, .kol-row.hit, .mw-row.done .mw-bar { animation: none; } .mw-bar u { transition: none; } }

/* KOL Alpha also carries liquidity and volume */
.kol-head, .kol-row { grid-template-columns: 36px minmax(0, 1fr) 72px 176px 62px 62px 60px; column-gap: 10px; }
.kol-head { grid-template-columns: minmax(0, 1fr) 72px 176px 62px 62px 60px; }
.kol-row .qb-col { font-size: 13px; }
@media (max-width: 899px) { .kol-head .qb-col, .kol-row .qb-col { display: none; } .kol-head { grid-template-columns: minmax(0, 1fr) 72px 176px 60px; } .kol-row { grid-template-columns: 36px minmax(0, 1fr) 72px 176px 60px; } }
@media (max-width: 700px) { .kol-row { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 8px; } }

/* animated tour on the Trady cover, drawn at 1000px wide and scaled to fit */
.tc { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; background: #fff64b; }
.tc.on { opacity: 1; }
.tc-stage { --g: #26de5f; --r: #f7523b; position: absolute; left: 0; top: 0; width: 1000px; height: 524px; transform-origin: 0 0; overflow: hidden; color: #fff; font: 400 13px/1.3 var(--sans); }
.tc-win { position: absolute; left: 28px; right: 28px; top: 26px; height: 560px; overflow: hidden; border-radius: 14px; background: #080808; box-shadow: 0 18px 40px -14px rgba(40,30,0,.5); }
.tc-stage i { font-style: normal; }
.tc-nav { display: flex; align-items: center; gap: 22px; height: 46px; padding-inline: 18px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.tc-nav img { height: 16px; filter: brightness(0) invert(1); }
.tc-nav b { font-weight: 500; color: #fff200; }
.tc-search { margin-left: auto; padding: 5px 34px 5px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; font-size: 12px; }
.tc-wallets { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; font-size: 12px; }
.tc-wallets u { width: 11px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.tc-stage h4 { margin: 14px 18px 8px; font-size: 17px; font-weight: 500; }
.tc-stage h4 small { color: rgba(255,255,255,.45); font-size: 10px; vertical-align: 6px; }
.tc-movers { display: flex; gap: 8px; padding-inline: 18px; }
.tc-movers > div { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: 11px; }
.tc-movers img { width: 26px; height: 26px; border-radius: 6px; }
.tc-movers b { display: block; font-weight: 500; }
.tc-movers i { color: rgba(255,255,255,.45); font-size: 10px; white-space: nowrap; }
.tc-movers .r { margin-left: auto; text-align: right; }
.tc-stage .up { color: var(--g); }
.tc-stage .dn { color: var(--r); }
.tc-tabs { display: flex; align-items: center; gap: 6px; padding: 12px 18px 8px; }
.tc-tabs > span { padding: 5px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: rgba(255,255,255,.55); font-size: 12px; transition: color .2s, border-color .2s; }
.tc-tabs em { margin-left: 8px; font-style: normal; color: rgba(255,255,255,.55); font-size: 12px; transition: color .2s; }
.tc-tabs .on { border-color: rgba(255,255,255,.85); color: #fff; }
.tc-tabs em.on { color: #fff200; }
.tc-amt { margin-left: auto; padding: 5px 11px; border: 1px solid rgba(38,222,95,.3); border-radius: 99px; color: var(--g); font-size: 12px; transition: border-color .2s; }
.tc-amt b { display: inline-block; min-width: 18px; color: rgba(255,255,255,.45); font-weight: 500; text-align: center; }
.tc-amt.live { border-color: var(--g); }
.tc-amt.live b { color: #fff; }
.tc-radar { display: grid; grid-template-rows: 0fr 0fr; opacity: 0; transition: grid-template-rows .4s ease, opacity .3s ease; }
.tc-radar > * { min-height: 0; overflow: hidden; }
.is-radar .tc-radar { grid-template-rows: 1fr 1fr; opacity: 1; }
.tc-presets, .tc-chips { display: flex; gap: 6px; padding: 2px 18px 4px; }
.tc-presets span { padding: 5px 10px; border: 1px solid transparent; border-radius: 7px; background: #161616; color: rgba(255,255,255,.7); font-size: 12px; white-space: nowrap; }
.tc-presets .on { border-color: rgba(255,255,255,.8); color: #fff; }
.tc-chips span { padding: 3px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: #1a1a1a; color: rgba(255,255,255,.7); font-size: 11px; white-space: nowrap; }
.tc-head, .tc-row > div { display: grid; grid-template-columns: 30px minmax(0, 1fr) 88px 110px 76px 60px 58px 58px; align-items: center; column-gap: 10px; padding-inline: 18px; }
.tc-head { grid-template-columns: minmax(0, 1fr) 88px 110px 76px 60px 126px; padding-block: 6px 5px; color: rgba(255,255,255,.45); font-size: 11px; }
.tc-head span:last-child { text-align: right; }
.tc-row { display: grid; grid-template-rows: 1fr; border-top: 1px solid rgba(255,255,255,.06); transition: grid-template-rows .35s ease, opacity .25s ease, background-color .3s; }
.tc-row > div { min-height: 0; overflow: hidden; }
.tc-row > div > * { margin-block: 6px; }
.tc-row.off { grid-template-rows: 0fr; opacity: 0; border-color: transparent; }
.tc-row.held { background: rgba(38,222,95,.07); }
.tc-logo { width: 30px; height: 30px; border-radius: 7px; }
.tc-name b, .tc-mc b { display: block; font-weight: 500; }
.tc-name i { color: rgba(255,255,255,.5); font-size: 11px; white-space: nowrap; }
.tc-mc i { font-size: 11px; }
.tc-c3 { position: relative; height: 24px; line-height: 24px; }
.tc-liq, .tc-kol { position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 24px; transition: opacity .25s, translate .3s; }
.tc-kol { opacity: 0; translate: -8px 0; }
.is-kol .tc-kol { opacity: 1; translate: 0 0; }
.is-kol .tc-liq { opacity: 0; }
.tc-kol img { width: 22px; height: 22px; margin-left: -6px; border: 2px solid #080808; border-radius: 50%; }
.tc-kol img:first-child { margin-left: 0; }
.tc-row button { height: 30px; padding: 0; border-radius: 8px; font: 500 11px var(--sans); }
.tc-buy { border: 1px solid rgba(38,222,95,.25); background: #061b0d; color: rgba(38,222,95,.55); transition: color .2s, border-color .2s; }
.tc-buy.live { border-color: rgba(38,222,95,.6); color: var(--g); }
.tc-sell { border: 1px solid rgba(247,82,59,.15); background: #220e0b; color: rgba(247,82,59,.3); transition: color .2s, border-color .2s; }
.tc-sell.live { border-color: rgba(247,82,59,.6); color: var(--r); }
.tc-hit { scale: .95; transition: scale .12s; }
.tc-toast { position: absolute; right: 16px; top: 56px; padding: 8px 12px; border: 1px solid rgba(38,222,95,.4); border-radius: 8px; background: #0f1f14; font-size: 12px; opacity: 0; translate: 0 -8px; transition: opacity .2s, translate .25s; }
.tc-toast.on { opacity: 1; translate: 0 0; }
.tc-tip { position: absolute; z-index: 2; padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: #1a1a1a; font-size: 11px; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .15s; }
.tc-tip.on { opacity: 1; }
.tc-modal { position: absolute; z-index: 3; right: 16px; top: 58px; width: 320px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #161616; box-shadow: 0 20px 40px rgba(0,0,0,.6); opacity: 0; translate: 0 14px; scale: .98; transition: opacity .25s, translate .3s, scale .3s; }
.is-modal .tc-modal { opacity: 1; translate: 0 0; scale: 1; }
.tc-modal h5 { margin-bottom: 14px; font-size: 15px; font-weight: 500; }
.tc-set { margin-bottom: 16px; }
.tc-set p { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 500; }
.tc-set b { padding: 1px 7px; border-radius: 5px; background: #262626; font-size: 11px; font-weight: 500; }
.tc-track { position: relative; height: 3px; border-radius: 2px; background: #333; }
.tc-track u { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--var) * 100%); border-radius: 2px; background: #fff; transition: width .7s ease; }
.tc-track i { position: absolute; top: -6px; left: calc(var(--var) * 100%); width: 15px; height: 15px; margin-left: -7px; border-radius: 4px; background: #fff; transition: left .7s ease; }
.tc-track.fixed u { width: 50%; }
.tc-track.fixed i { left: 50%; }
.tc-bars p { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; margin-top: 7px; color: rgba(255,255,255,.65); font-size: 11px; }
.tc-bars u { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.tc-bars s { display: block; height: 100%; border-radius: 3px; background: var(--g); transition: width .7s ease; }
.tc-bars p:nth-child(1) s { width: calc(45% + var(--var) * 45%); }
.tc-bars p:nth-child(2) s { width: calc(45% - var(--var) * 40%); }
.tc-bars p:nth-child(3) s { width: calc(45% + var(--var) * 10%); }
.tc-steps { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 3px; padding: 4px; border-radius: 99px; background: rgba(30,30,30,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.4); }
.tc-steps span { padding: 5px 13px; border-radius: 99px; color: rgba(255,255,255,.6); font-size: 12px; white-space: nowrap; transition: background-color .25s, color .25s; }
.tc-steps .on { background: #fff200; color: #080808; }
.tc-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 20px; height: 24px; transition: translate .65s cubic-bezier(.45,.05,.2,1), scale .12s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.tc-cursor path { fill: #fff; stroke: #080808; stroke-width: 1.3; stroke-linejoin: round; }
.tc-cursor.press { scale: .82; }

/* filtered rows are moved by list-flip.js */
.rd-row, .tc-row { display: block; transition: background-color .3s; }
.rd-row.off, .tc-row.off { display: none; }
.tc-row > div, .rd-row > div { overflow: visible; }

/* cover: even filter chips, and a buy that actually runs in the wallet modal */
.tc-chips span { display: inline-flex; align-items: center; gap: 5px; line-height: 1; padding: 5px 8px 5px 9px; }
.tc-chips b { font-weight: 400; }
.tc-chips svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.tc-bars.buying s { opacity: .2; }
.tc-bars.buying .done s { opacity: 1; }
.tc-bars.buying .done { color: #fff; }
.tc-bars s { transition: width .7s ease, opacity .25s; }
.tc-run { display: block; width: 100%; height: 34px; margin-top: 14px; border: 0; border-radius: 8px; background: #fff200; color: #080808; font: 500 13px var(--sans); transition: background-color .2s, color .2s; }
.tc-run.done { background: #061b0d; color: var(--g); box-shadow: inset 0 0 0 1px rgba(38,222,95,.5); }
.qb-tag { flex: none; }

/* the tour sits on neutral grey, with the same corners as the demos */
.tc { background: #c8c7c3; }
.tc-win { box-shadow: 0 18px 40px -14px rgba(20,20,20,.5); }
.cs-cover:has(.tc) { border-radius: 10px; }

/* the cover poster is the tour's first frame */
.tc { background: #63625f; transition: none; }
.tc-steps, .tc-cursor { opacity: 0; transition-property: translate, scale, opacity; }
.tc-steps { transition: opacity .4s ease; }
.tc.run .tc-steps, .tc.run .tc-cursor { opacity: 1; }

/* the tour keeps its yellow */
.tc { background: #fff64b; }
.tc-win { box-shadow: 0 18px 40px -14px rgba(40,30,0,.5); }

/* case header: larger logo, role and dates stacked beside the title */
.cs-head { grid-template-columns: 1fr 2fr; row-gap: 2px; }
.cs-who .company { height: 32px; margin-bottom: 6px; }
.cs-who .mark { height: calc(var(--logo) * 1.5); }
.cs-what { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 700px) { .cs-head { grid-template-columns: minmax(0, 1fr); } .cs-what { grid-column: 1; grid-row: auto; margin-top: 10px; } }

/* the same corners as the cover on the postcard, in proportion, so the picture keeps its shape as it flies in: 10px at full width */
.cs-cover, .cs-cover:has(.tc) { border-radius: 1.22% / 2.33%; }
.tc-win { box-shadow: none; }
/* results as cards: a statement sits where the big number would, a small card can hold a sentence or fill both rows */
.metric b.say { font-size: 32px; line-height: 1.15; letter-spacing: -.025em; }
.metric--note strong { font-size: 16px; line-height: 1.35; font-weight: 400; }
.metric--tall { grid-row: 1 / 3; }
@media (max-width: 760px) { .metric b.say { font-size: 26px; } .metric--note, .metric--tall { grid-column: 1 / -1; grid-row: auto; } }
/* the mouse in the self-playing demos */
.dcur { position: absolute; z-index: 9; top: 0; left: 0; width: 20px; height: 24px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transition: translate .7s cubic-bezier(.45,.05,.2,1), scale .12s; }
.dcur path { fill: #fff; stroke: #080808; stroke-width: 1.3; stroke-linejoin: round; }
.dcur.press { scale: .82; }
/* tabs on the covers match the tabs in the blocks: a 30px capsule with 12px above and below */
.tc-steps { bottom: 14.6px; }
.tc-steps { padding: 3.66px; gap: 3.66px; }
.tc-steps span { padding: 3.66px 14.6px; font-size: 14.6px; line-height: 22px; }
/* Trady's tabs sit on top like every other cover */
.tc-steps { top: 14.6px; bottom: auto; background: rgba(8,8,8,.1); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.tc-steps span { color: rgba(8,8,8,.72); }
.tc-steps .on { background: #080808; color: #fff64b; }
.tc-win { top: 66px; }


/* numbers stand out in Geist Mono */
.metric b:not(.say), .cs-when { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 400; letter-spacing: -.04em; }
.cs-when { font-size: .92em; letter-spacing: -.02em; }
/* the animations keep their own type */
.cs-cover, .page figure > :not(figcaption) { --sans: 'Figtree', system-ui, sans-serif; --head: 'Figtree', system-ui, sans-serif; --text: 'Figtree', system-ui, sans-serif; font-family: 'Figtree', system-ui, sans-serif; }

/* the browser holds the old page until the new one can paint, so the change of page never shows an empty wall */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}

/* headings speak in the same voice as the home page; the demos inside figures keep their own type */
.cs-head { grid-template-rows: auto 1fr; }
.cs-sub { margin-top: 14px; }
.cs-title { font: 400 clamp(34px, 4.4vw, 46px)/1.1 'Fraunces', Georgia, serif; letter-spacing: -.018em; text-wrap: balance; }
.page h2:not(figure *) { font: 400 clamp(28px, 3.4vw, 36px)/1.15 'Fraunces', Georgia, serif; letter-spacing: -.015em; text-wrap: balance; }
.page h3:not(figure *) { font: 500 clamp(20px, 2.2vw, 22px)/1.3 'Fraunces', Georgia, serif; letter-spacing: -.008em; text-wrap: balance; }

/* the postcard that flew off the board stays a postcard: the same paper, stamp and postmark around the cover, the pin left behind on the wall */
main { --k: calc(min(100vw - 48px, 820px) * .15 / 54); --pb: calc(64 * var(--k)); }
.cs-card { --paper: 23px; position: relative; z-index: 111; width: min(100vw - 48px, 820px); margin: 60px auto 0; }
@media (max-width: 900px) { .cs-card { --paper: 12px; } }
/* a deep lower edge, like a Polaroid, to carry the stamp and postmark */
.cs-card::before { content: ''; position: absolute; inset: calc(var(--paper) * -1) calc(var(--paper) * -1) calc(var(--pb) * -1); border-radius: 3px; background: #efe7d6; box-shadow: none; filter: drop-shadow(0 1px 1px rgba(40,30,15,.14)) drop-shadow(0 9px 13px rgba(40,30,15,.24)); }
:root[data-theme="dark"] .cs-card::before { background: #e3dbc9; box-shadow: none; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.cs-card .cs-cover { margin: 0; }
.cs-stamp { position: absolute; z-index: 112; right: calc(2 * var(--k)); top: calc(100% - 34 * var(--k)); width: calc(54 * var(--k)); height: auto; rotate: 3deg; filter: drop-shadow(0 2px 3px rgba(40,30,15,.3)); pointer-events: none; }
.cs-postmark { position: absolute; z-index: 113; right: calc(26 * var(--k)); top: calc(100% - 12 * var(--k)); width: calc(70 * var(--k)); height: calc(70 * var(--k)); color: rgba(38,36,60,.72); rotate: -14deg; pointer-events: none; }
.cs-postmark text { font: 500 11.5px 'Geist', system-ui, sans-serif; letter-spacing: .16em; fill: currentColor; }
.cs-card + .page { margin-top: calc(48px + var(--pb)); }
@media (max-width: 900px) { .cs-card + .page { margin-top: calc(32px + var(--pb)); } }

/* what isn't carried over from the board comes in with the page, so nothing appears in a single frame */
@keyframes grain-in { from { opacity: 0; } }
main::before { animation: grain-in .6s ease backwards; }
@keyframes nav-in { from { opacity: 0; } }
.cs-nav { animation: nav-in .5s ease .1s backwards; }
@media (prefers-reduced-motion: reduce) { main::before, .cs-nav { animation: none; } }
#clock { font-family: 'Geist Mono', ui-monospace, monospace; }
/* below these widths the home page has already scrolled them away, so here they come in with the page */
@media (max-width: 1279px) { .id, .links { animation: nav-in .5s ease backwards; } }
@media (max-width: 800px) { .cord { animation: nav-in .5s ease backwards; } }
/* leaving for the board: the page clears away first, the cover stays for the postcard to take over */
.case-leaving .page, .case-leaving .cs-nav, .case-leaving main::before, .case-leaving.case-scrolled .cs-card { opacity: 0 !important; transition: opacity .24s ease; animation: none; }
@media (prefers-reduced-motion: reduce) { .id, .links, .cord { animation: none; } }

@keyframes deal-next { from { translate: calc(50vw + 60%) 40px; rotate: 8deg; } }
@keyframes deal-prev { from { translate: calc(-50vw - 60%) 40px; rotate: -8deg; } }
.deal-next .cs-card { animation: deal-next .8s cubic-bezier(.16,1,.3,1) backwards; }
.deal-prev .cs-card { animation: deal-prev .8s cubic-bezier(.16,1,.3,1) backwards; }
.deal-next .page, .deal-prev .page { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .deal-next .cs-card, .deal-prev .cs-card { animation: none; } }
/* the live demo on the cover steps back to its still picture before the page goes home, so the postcard that flies back shows the same picture and nothing flickers between them */
.case-leaving .cs-cover > :not(img) { opacity: 0 !important; transition: opacity .2s ease !important; }

/* the pin was pulled out to bring the postcard here: it left a small hole in the paper */
.cs-card::after { content: ''; position: absolute; z-index: 1; left: 50%; top: calc(var(--paper) * -.6); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, rgba(30,22,12,.7) 0 38%, rgba(30,22,12,.25) 58%, rgba(30,22,12,0) 72%); box-shadow: 0 .5px 0 rgba(255,255,255,.55); pointer-events: none; }
:root[data-theme="dark"] .cs-card::after { opacity: .85; }
.cs-nav { transition: opacity .3s ease, translate .3s ease; }
.nav-wait .cs-nav { opacity: 0; translate: -50% 12px; pointer-events: none; }