/* Tool Library (docs/tool-library-spec.md, section 6). All values come from tokens.css; chips and corners are 3px. */
.tl-page { max-width: 1240px; margin: 0 auto; }
.tl-page h1 { max-width: none; text-wrap: balance; }
.tl-page .lead { max-width: none; font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.tl-kicker { margin: 0 0 var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.tl-crumb { margin: 0 0 var(--space-4); font: var(--type-small); color: var(--text-secondary); }
.tl-crumb a { color: inherit; }
.tl-credit { margin: var(--space-8) 0 0; color: var(--text-secondary); font: italic 400 15px/22px var(--font-display); }


/* the switch between the flipbook and the tiles: the same spot, top right, on both pages */
.tl-page { position: relative; }
.lv-switch { position: absolute; top: 0; right: 0; z-index: 4; display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--chart-white) 92%, transparent); box-shadow: 0 6px 20px rgba(0, 0, 0, .25), inset 0 0 0 1px color-mix(in srgb, var(--midnight) 12%, transparent); }
.lv-switch a { padding: 7px 14px; border-radius: 999px; font: 600 13px / 1.2 var(--font-ui); color: var(--midnight); text-decoration: none; white-space: nowrap; }
.lv-switch a:hover { background: color-mix(in srgb, var(--midnight) 10%, transparent); }
.lv-switch a[aria-current="page"] { background: var(--midnight); color: var(--chart-white); }
.lv-switch a:focus-visible { outline: 2px solid var(--midnight); outline-offset: 2px; }
.bk .lv-switch { top: 12px; right: 16px; }
@media (max-width: 760px) { .tl-page .lv-switch { position: static; margin-bottom: var(--space-4); } .bk .lv-switch { top: 10px; right: 10px; } .bk .lv-switch a { padding: 6px 10px; font-size: 12px; } }

/* search bar */
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.tl-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 0; color: var(--text-secondary); }
.tl-search > svg { position: absolute; left: 12px; pointer-events: none; }
.tl-search-in { width: 100%; min-height: var(--control-h); padding: 10px 76px 10px 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); font: var(--type-body); font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.tl-search-in::-webkit-search-cancel-button { display: none; }
.tl-search-in:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.tl-search-clear { position: absolute; right: 40px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-ui); background: transparent; color: var(--text-secondary); cursor: pointer; }
.tl-search-clear:hover { background: var(--surface-raised); color: var(--text-primary); }
.tl-kbd { position: absolute; right: 10px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: var(--type-keycap); color: var(--text-secondary); }
.tl-sort { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-small); font-weight: 600; color: var(--text-secondary); }
.tl-select { min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); font: 600 14px/20px var(--font-ui); }
.tl-count { margin: var(--space-3) 0 0; font: var(--type-small); color: var(--text-secondary); }

/* buttons */
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-primary); text-decoration: none; font: 600 14px/20px var(--font-ui); cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.tl-btn:hover { background: var(--surface-raised); }
.tl-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
.tl-btn-main { border-color: var(--text-primary); background: var(--text-primary); color: var(--surface-page); }
.tl-btn-main:hover { background: color-mix(in srgb, var(--text-primary) 85%, var(--surface-page)); }
.tl-btn-own { border-color: var(--amber); background: var(--amber); color: var(--midnight); }
.tl-btn-own:hover { background: color-mix(in srgb, var(--amber) 85%, var(--chart-white)); }
.tl-btn-quiet { border-color: var(--border-strong); }
.tl-btn-big { min-height: 48px; padding: 0 var(--space-5); font-size: 15px; }
.tl-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.tl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tl-link .ext { vertical-align: -2px; margin-left: 4px; color: var(--text-secondary); }
mark { background: color-mix(in srgb, var(--amber) 45%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* filters */
.tl-ftoggle[aria-expanded="true"] { background: var(--surface-raised); }
.tl-filters { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); }
.tl-fgroup { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-2) var(--space-3); align-items: start; }
.tl-ftitle { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); padding-top: 7px; }
.tl-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-primary); font: 500 13px/18px var(--font-ui); cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.tl-fchip:hover { background: var(--surface-raised); }
.tl-fchip[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-page); }
.tl-fn { font: var(--type-keycap); color: var(--text-secondary); }
.tl-fchip[aria-pressed="true"] .tl-fn { color: color-mix(in srgb, var(--surface-page) 75%, transparent); }
.tl-fclear { justify-self: start; }
@media (max-width: 700px) { .tl-fgroup { grid-template-columns: 1fr; } .tl-ftitle { padding-top: 0; } }

/* the grid */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); align-items: stretch; margin-top: var(--space-4); }
.tl-cell { display: flex; min-width: 0; }
.tl-tile { --edge: var(--border-subtle); display: flex; flex-direction: column; flex: 1; min-width: 0; border: 1px solid var(--edge); border-radius: var(--radius-ui); background: var(--surface-card); overflow: hidden; transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.tl-tile:focus-within { border-color: var(--text-secondary); }
html[data-motion="full"] .tl-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--midnight) 40%, transparent); }
.tl-tile-shot { position: relative; display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); cursor: pointer; overflow: hidden; }
.tl-tile-shot:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -4px; }
.tl-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: var(--shot, var(--surface-raised)); }
.tl-shot-gen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--chart-white); background: var(--shot, var(--midnight)); font: 600 15px/20px var(--font-ui); }
.tl-shot-gen b { font: var(--type-numeral); letter-spacing: .04em; }
.tl-tile-logo { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: var(--radius-ui); background: var(--surface-logo); padding: 4px; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--midnight) 60%, transparent); }
.tl-tile-body { display: flex; flex-direction: column; flex: 1; gap: var(--space-2); padding: var(--space-4); }
.tl-tile-name { margin: 0; font: 700 19px/26px var(--font-ui); text-wrap: balance; }
.tl-tile-by { margin: 0; font: var(--type-small); color: var(--text-secondary); }
.tl-tile-tag { margin: 0; font: italic 400 15px/22px var(--font-display); text-wrap: pretty; }
.tl-tile-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.tl-tile-go .hu-bm-wrap { margin-left: auto; }

/* chips and badges: 3px rectangles */
.tl-chips, .tl-badges { list-style: none; margin: 0; padding: 0; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: var(--type-keycap); font-family: var(--font-ui); font-weight: 600; letter-spacing: .02em; color: var(--text-secondary); }
.tl-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: var(--radius-ui); background: color-mix(in srgb, var(--verde) 14%, transparent); color: color-mix(in srgb, var(--verde) 70%, var(--text-primary)); font: 600 12px/16px var(--font-ui); }

/* the family's own tools: Midnight fill, a thin Amber edge, the logo on the shot */
.tl-tile[data-kind="own"] { --edge: var(--amber); background: var(--midnight); color: var(--chart-white); border-width: 1px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.tl-tile[data-kind="own"] .tl-tile-shot { border-bottom-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.tl-tile[data-kind="own"] .tl-tile-by { color: var(--amber); font-weight: 600; }
.tl-tile[data-kind="own"] .tl-tile-tag { color: color-mix(in srgb, var(--chart-white) 85%, var(--midnight)); }
.tl-tile[data-kind="own"] .tl-chip { border-color: color-mix(in srgb, var(--chart-white) 30%, transparent); color: color-mix(in srgb, var(--chart-white) 80%, transparent); }
.tl-tile[data-kind="own"] .tl-badge { background: color-mix(in srgb, var(--verde) 30%, transparent); color: var(--chart-white); }
.tl-tile[data-kind="own"] .tl-btn-quiet { border-color: color-mix(in srgb, var(--chart-white) 35%, transparent); color: var(--chart-white); }
.tl-tile[data-kind="own"] .tl-btn-quiet:hover { background: color-mix(in srgb, var(--chart-white) 12%, transparent); }
.tl-tile[data-kind="own"] .hu-bm { color: var(--chart-white); border-color: color-mix(in srgb, var(--chart-white) 35%, transparent); }
.tl-tile[data-kind="own"] mark { background: color-mix(in srgb, var(--amber) 55%, transparent); }
html[data-motion="full"] .tl-tile[data-kind="own"]:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--amber) 55%, transparent); }
:root[data-theme="dark"] .tl-tile[data-kind="own"] { background: color-mix(in srgb, var(--midnight) 70%, var(--ink-1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tl-tile[data-kind="own"] { background: color-mix(in srgb, var(--midnight) 70%, var(--ink-1)); } }

/* module lists: the first two show, the rest fade behind "Show all" so tiles keep about one height */
.tl-mods-head { margin: var(--space-1) 0 0; font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.tl-mods { position: relative; }
.tl-mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tl-mod-list li { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid var(--border-subtle); font: 600 14px/20px var(--font-ui); }
.tl-mod-name { color: inherit; }
.tl-mod-name .ext { vertical-align: -2px; margin-left: 4px; color: var(--text-secondary); }
.tl-mod-tag { font: italic 400 13px/18px var(--font-display); color: var(--text-secondary); }
.tl-mods-folded .tl-mod-list { max-height: 112px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.tl-mods-more { display: block; margin: -6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--text-primary); font: 600 13px/18px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl-tile[data-kind="own"] .tl-mods-head, .tl-tile[data-kind="own"] .tl-mod-tag { color: color-mix(in srgb, var(--chart-white) 75%, transparent); }
.tl-tile[data-kind="own"] .tl-mod-list li { border-top-color: color-mix(in srgb, var(--chart-white) 18%, transparent); }
.tl-tile[data-kind="own"] .tl-mods-more { color: var(--amber); }
.tl-tile[data-kind="own"] .tl-mod-name .ext { color: color-mix(in srgb, var(--chart-white) 60%, transparent); }
.tl-detail-left { display: grid; gap: var(--space-4); align-content: start; }
.tl-detail-mods h3 { margin: 0 0 var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.tl-staff { position: relative; }
.tl-staff-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--amber); border-radius: var(--radius-ui); font: var(--type-keycap); letter-spacing: 0; text-transform: none; color: var(--text-secondary); vertical-align: middle; }
.tl-meta { margin: 0; font: var(--type-small); color: var(--text-secondary); }

/* suite tile: four shots in a mosaic and the matching modules */
.tl-mosaic { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; }
.tl-mosaic .tl-shot { aspect-ratio: auto; height: 100%; }
.tl-mosaic .tl-shot:only-child { grid-column: span 2; }


.tl-empty { grid-column: 1 / -1; padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-ui); color: var(--text-secondary); }
.tl-empty p { margin: 0 0 var(--space-2); }
.tl-empty .tl-link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* the note folds */
.tl-note { margin-top: var(--space-8); max-width: 72ch; border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); }
.tl-note summary { padding: var(--space-3) var(--space-4); cursor: pointer; font: 600 14px/20px var(--font-ui); list-style: none; }
.tl-note summary::-webkit-details-marker { display: none; }
.tl-note summary::after { content: 'Hide'; float: right; color: var(--text-secondary); font-weight: 500; }
.tl-note:not([open]) summary::after { content: 'Show'; }
.tl-note p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); font: var(--type-small); line-height: 1.5; }

/* detail: dialog and page */
.tl-dialog { width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); overflow: auto; }
.tl-dialog::backdrop { background: color-mix(in srgb, var(--midnight) 55%, transparent); }
html[data-motion="full"] .tl-dialog[open] { animation: tl-in 220ms var(--ease) both; }
@keyframes tl-in { from { opacity: 0; transform: translateY(8px); } }
.tl-detail { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
.tl-detail-page { padding: 0; }
@media (max-width: 900px) { .tl-detail { grid-template-columns: 1fr; } }
.tl-detail-close { position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); cursor: pointer; }
.tl-detail-shot { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); overflow: hidden; background: var(--surface-raised); }
.tl-detail-shot .tl-shot { object-position: top left; }
.tl-detail-logo { position: absolute; left: 14px; bottom: 14px; width: 64px; height: 64px; border-radius: var(--radius-ui); background: var(--surface-logo); padding: 6px; }
.tl-detail[data-kind="own"] .tl-detail-shot { border-color: var(--amber); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.tl-detail-body { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.tl-detail-name { margin: 0; font: var(--type-h1); letter-spacing: var(--type-h1-tracking); text-wrap: balance; }
h2.tl-detail-name { font: var(--type-h2); }
.tl-detail-tag { margin: 0; font: italic 400 18px/26px var(--font-display); text-wrap: pretty; }
.tl-detail-by { margin: 0; color: var(--text-secondary); }
.tl-detail-by b { color: var(--text-primary); font-weight: 600; }
.tl-detail-by a { color: inherit; }
.tl-detail-by .ext, .tl-why .ext, .tl-detail-stores .ext { vertical-align: -3px; margin-left: 2px; }
.tl-detail-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0; }
.tl-host { font: 400 13px/18px var(--font-code); color: var(--text-secondary); overflow-wrap: anywhere; }
.tl-detail-stores { display: flex; gap: var(--space-4); margin: 0; font: 600 14px/20px var(--font-ui); }
.tl-detail-stores a { color: inherit; }
.tl-detail-sum { margin: 0; text-wrap: pretty; }
.tl-detail-sec { display: grid; gap: 4px; }
.tl-detail-sec h3 { margin: 0; font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.tl-detail-sec p { margin: 0; text-wrap: pretty; }
.tl-why { margin: 0; padding: 0 0 0 1.1em; font: var(--type-small); color: var(--text-secondary); }
.tl-why a { color: inherit; }
.tl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-raised); font: var(--type-small); }
.tl-facts div { display: grid; gap: 2px; min-width: 0; }
.tl-facts dt { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.tl-facts dd { margin: 0; }
.tl-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }

/* suggestion form */
.tl-suggest { display: grid; gap: var(--space-3); padding: var(--space-5); }
.tl-suggest h2 { margin: 0; font: var(--type-h2); }
.tl-suggest-lead { margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.tl-f { display: grid; gap: 4px; font: var(--type-small); font-weight: 600; }
.tl-in { display: block; width: 100%; min-height: var(--control-h); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-page); color: var(--text-primary); font: var(--type-body); }
textarea.tl-in { resize: vertical; }
.tl-fieldset { margin: 0; padding: 0; border: 0; }
.tl-fieldset legend { padding: 0; margin-bottom: 4px; }
.tl-fieldset label { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-4); font-weight: 400; }
.tl-suggest-h { margin: var(--space-2) 0 0; font: var(--type-h3); }
.tl-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tl-checks label, .tl-check { display: inline-flex; align-items: center; gap: 6px; font: var(--type-small); font-weight: 400; }
.tl-check-owner { font-weight: 600; }
.tl-f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-items: end; }
.tl-small { margin: 0; font: var(--type-small); color: var(--text-secondary); }
.tl-dialog-sm { width: min(680px, calc(100vw - 32px)); }
.tl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tl-msg { margin: 0; padding: var(--space-3); border-left: var(--stroke-indicator) solid var(--signal-red); background: color-mix(in srgb, var(--signal-red) 8%, transparent); font: var(--type-small); }
.tl-suggest-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acct-captcha { min-height: 65px; }

/* motion tiers */
html[data-motion="static"] .tl-tile, html[data-motion="static"] .tl-btn, html[data-motion="static"] .tl-fchip { transition: none; }
html[data-motion="lite"] .tl-tile { transition: border-color var(--duration-fast) var(--ease); }

@media (max-width: 600px) {
  .tl-bar { gap: var(--space-2); }
  .tl-search { flex-basis: 100%; }
  .tl-kbd { display: none; }
  .tl-search-in { padding-right: 44px; }
  .tl-search-clear { right: 6px; }
  .tl-grid { gap: var(--space-4); }
  .tl-detail { padding: var(--space-4); }
}

/* the whole card opens the details */
.tl-tile { cursor: pointer; position: relative; isolation: isolate; }
.tl-tile a, .tl-tile button, .tl-tile .hu-bm-wrap { cursor: pointer; }
.tl-tile-foot { margin: 0; }
.tl-report { padding: 0; border: 0; background: none; font: var(--type-small); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tl-report:hover { color: var(--text-primary); }
.tl-report:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.tl-tile[data-kind="own"] .tl-report { color: color-mix(in srgb, var(--chart-white) 70%, transparent); }
.tl-tile[data-kind="own"] .tl-report:hover { color: var(--chart-white); }

/* a silver glint sweeps across the card when the pointer arrives (full motion only; never on touch or when motion is reduced) */
.tl-tile::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%; z-index: 3; pointer-events: none; opacity: 0; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent 0%, rgba(196, 206, 220, .22) 30%, rgba(255, 255, 255, .8) 50%, rgba(196, 206, 220, .22) 70%, transparent 100%); }
@media (hover: hover) {
  html[data-motion="full"] .tl-tile:hover::after { animation: tl-glint 1000ms cubic-bezier(.45, .05, .35, 1) 1 both; }
  html[data-motion="full"] .tl-tile:hover { border-color: color-mix(in srgb, #c7d0db 70%, var(--edge)); }
}
@keyframes tl-glint { 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%) skewX(-18deg); } }

/* what's new */
.tl-new { margin: 0 0 var(--space-5); }
.tl-new-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.tl-new-head h2 { margin: 0; font: var(--type-h3); }
.tl-new-list { display: flex; gap: var(--space-3); margin: 0; padding: 0 0 var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.tl-new-list li { flex: 0 0 168px; scroll-snap-align: start; }
.tl-new-item { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); text-align: left; cursor: pointer; overflow: hidden; color: inherit; font: inherit; }
.tl-new-item:hover { border-color: var(--text-secondary); }
.tl-new-item:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.tl-new-item .tl-shot { border-bottom: 1px solid var(--border-subtle); }
.tl-new-name { padding: 2px var(--space-2) var(--space-2); font: 700 15px/20px var(--font-ui); }

.tl-c-intro2echo{--shot:#BDBFBF}
.tl-c-angioview{--shot:#272729}
.tl-c-learncoronary{--shot:#434B4F}
.tl-c-cathpan{--shot:#ACAFB3}
.tl-c-cathsim{--shot:#D1D4D8}
.tl-c-mioatlas{--shot:#1F1C21}
.tl-c-ecg-sweep{--shot:#F3EEEF}
.tl-c-echoworkflows{--shot:#141913}
.tl-c-ventriculus-ecg{--shot:#D4CBCD}
.tl-c-cardiomechanics{--shot:#F9F7F2}
.tl-c-nmcsn-shock-staging{--shot:#E1DED9}
.tl-c-prostate-cvd-triage{--shot:#F2F0F1}
.tl-c-ddxschemas-rhc{--shot:#F5F6F8}
.tl-c-bedside-reference{--shot:#F1F1EF}
.tl-c-cardiorender-congenital{--shot:#F5F4EF}
.tl-c-cardiorender-mechanics{--shot:#F1F1EE}
.tl-c-cardiorender-electricity-to-ecg{--shot:#D7D8DA}
.tl-c-cardiorender-ecg-anatomy{--shot:#EEEAE4}
.tl-c-cardiorender-electrode-to-ecg{--shot:#968C8D}
.tl-c-cardiorender-pacemaker{--shot:#EBE4E0}
.tl-c-cardiorender-ultrasound-doppler{--shot:#F3F4F3}
.tl-c-cardiorender-stemi{--shot:#645362}
.tl-c-cardiorender-einthoven{--shot:#F3F6F7}
.tl-c-cardiorender-rhythm{--shot:#776E71}
.tl-c-cathmath-rhc{--shot:#282B34}
.tl-c-cathmath-hemodynamics{--shot:#1A1E29}
.tl-c-cathmath-pvloop{--shot:#1B1E25}
.tl-c-cathmath-ekg{--shot:#25272D}
.tl-c-cathmath-embryology{--shot:#0F1624}
.tl-c-cathmath-action-potential{--shot:#202532}
.tl-c-cathmath-echocalc{--shot:#1C1D27}
.tl-c-cathmath-angio{--shot:#1A202C}
.tl-c-cathmath-intracoronary{--shot:#161B25}
.tl-c-cathmath-pressors{--shot:#1A1F2D}
.tl-c-depolarize{--shot:#0E1518}
.tl-c-vadpath{--shot:#161C2B}
.tl-c-cardiacwindow{--shot:#13171A}
.tl-c-ejectionpoint{--shot:#EFEEEA}
.tl-c-truelumen{--shot:#343435}
.tl-c-anesthbeta-tee{--shot:#22222A}
.tl-c-nrp-sim-lite{--shot:#F4F8F9}
.tl-c-sistole{--shot:#CACCCC}
.tl-c-cctcore{--shot:#F9F9F9}
.tl-c-simvt{--shot:#EFE7E5}
.tl-c-ascvd{--shot:#E1E4EB}
.tl-c-stressingwisely{--shot:#E8EAF0}
.tl-c-tablemanners{--shot:#464C55}
.tl-c-heartgram{--shot:#ACAFB6}
.tl-c-troponin{--shot:#E3E5EC}
.tl-c-eureka{--shot:#E0E3EB}
.tl-c-gdmt{--shot:#E2E5EB}
.tl-c-diurese{--shot:#BEC4C9}
.tl-c-swanology{--shot:#E3E3EB}
.tl-c-cardsonc{--shot:#E2E4E5}
.tl-c-cardioob{--shot:#DADDE6}
.tl-c-findinghemo{--shot:#DFE2EA}
.tl-c-musicoftheheart{--shot:#E2DFE2}
.tl-c-pulmonary-pocus{--shot:#B9B9BA}
.tl-c-resusbuddy{--shot:#0E131D}
.tl-c-learnpvcs{--shot:#202E37}
.tl-c-dipole-ecg{--shot:#E6E5E5}
.tl-c-heart-in-twelve-leads{--shot:#F2F1F4}
.tl-c-ventriculus-eplab{--shot:#141C24}
.tl-c-lbbap-simulator{--shot:#24282B}
.tl-c-sandoval-physiology-lab{--shot:#191A1E}
.tl-c-ventriculus-cath{--shot:#292F35}
.tl-c-closure-device-trainers{--shot:#AEAEAD}
.tl-c-coronary-culprit{--shot:#B2AEB5}
.tl-c-ecg-toolkit{--shot:#E7E1E4}
.tl-c-laa-tee-lab{--shot:#242022}
.tl-c-ventriculus-shock-sim{--shot:#E0E4EA}
.tl-c-night-float-cardiology{--shot:#E5E9EB}
.tl-c-cardiolads-trials{--shot:#EEEAE7}
.tl-c-ventriculus-exam{--shot:#E5E3E7}
.tl-c-ventriculus-device-programmer{--shot:#10171E}
.tl-c-ventriculus-echo-guide{--shot:#F3F2F3}
.tl-c-ventriculus-pharmacy{--shot:#F1F1F2}
.tl-c-ventriculus-preop{--shot:#ECEDEA}
.tl-c-echo-wizard-lv-function{--shot:#1C1F22}
.tl-c-perpetua-pulse{--shot:#F4F4F5}
.tl-c-echocompass{--shot:#D0D2D5}
.tl-c-eplab-simulator{--shot:#0D1216}
.tl-c-pump-and-circuit{--shot:#F8F8F9}
.tl-c-aortic-root-viewer{--shot:#151616}
.tl-c-echo-wizard-rv-function{--shot:#1B1E21}
.tl-c-echo-wizard-stress-echo{--shot:#1B1F21}
.tl-c-echo-wizard-mitral{--shot:#1A1D1F}
.tl-c-stressingwisely-preop{--shot:#E4E5EA}
.tl-c-troponin-ecg-simulator{--shot:#D9DCE3}

/* The Flipbook of Cardiology Tools (docs/tool-library-flipbook-plan.md). A hardback on a desk, drawn with CSS 3D:
   paper and ink in the family palette (paper is Chart White warmed with a little Amber; ink is Midnight; the accent is
   Amber). Sizes on a page are in em from .bk-content, whose font size follows the page width (--s), the reader's text
   size (--hu-scale) and a per-page fit factor (--fit) set when a page would overflow. --pw, --ph, --s, --p, --shade and
   --turn are set from the page's own code; nothing here needs a style attribute. */

body[data-page="book"] main { max-width: none; padding: 0; }
.bk-noscript { max-width: 60ch; margin: var(--space-8) auto; padding: 0 var(--space-4); }

.bk {
  --pw: 420px; --ph: 571px; --s: .875; --p: 0; --shade: 0; --tilt: 11deg;
  --bk-paper: color-mix(in srgb, var(--chart-white) 87%, var(--amber));
  --bk-paper-2: color-mix(in srgb, var(--bk-paper) 92%, var(--midnight));
  --bk-ink: var(--midnight);
  --bk-ink-2: color-mix(in srgb, var(--midnight) 64%, var(--bk-paper));
  --bk-rule: color-mix(in srgb, var(--midnight) 24%, var(--bk-paper));
  --bk-accent: var(--amber);
  --bk-accent-ink: color-mix(in srgb, var(--amber) 62%, var(--midnight));
  --bk-cloth: var(--midnight);
  --bk-desk: color-mix(in srgb, var(--midnight) 86%, #000);
  --bk-shadow: 10 18 46;
  position: relative; height: calc(100dvh - 118px); min-height: 560px; overflow: hidden;
  background: var(--bk-desk); color: var(--bk-ink); user-select: none; -webkit-user-select: none;
}
.bk .bk-paper, .bk .bk-paper * { user-select: text; -webkit-user-select: text; }
:root[data-theme="dark"] .bk { --bk-desk: color-mix(in srgb, var(--midnight) 38%, var(--ink-0)); --bk-paper: color-mix(in srgb, color-mix(in srgb, var(--chart-white) 87%, var(--amber)) 90%, var(--ink-0)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bk { --bk-desk: color-mix(in srgb, var(--midnight) 38%, var(--ink-0)); --bk-paper: color-mix(in srgb, color-mix(in srgb, var(--chart-white) 87%, var(--amber)) 90%, var(--ink-0)); } }

/* the family's colors, for the index tabs and the covers */
.bk-c-cobalt { --c: var(--cobalt); } .bk-c-sky { --c: var(--sky); } .bk-c-verde { --c: var(--verde); } .bk-c-amber { --c: var(--amber); } .bk-c-ember { --c: var(--ember); } .bk-c-rose { --c: var(--rose); } .bk-c-orchid { --c: var(--orchid); }

/* the room */
.bk-scene { position: absolute; inset: 0; overflow: hidden; perspective: 2600px; perspective-origin: 50% 26%; touch-action: pan-y; }
.bk-desk { position: absolute; inset: -12%; background:
  radial-gradient(60% 46% at calc(50% + var(--px, 0) * 7%) calc(42% + var(--py, 0) * 5%), color-mix(in srgb, var(--amber) 18%, transparent), transparent 72%),
  radial-gradient(130% 100% at 50% 110%, transparent 45%, rgba(0, 0, 0, .55)),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 9px),
  var(--bk-desk); }
.bk-tilt { position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 2); height: var(--ph); transform: translate(-50%, -52%) rotateX(calc(var(--tilt) + var(--py, 0) * -1.6deg)) rotateY(calc(var(--px, 0) * 2.6deg)); transform-style: preserve-3d; will-change: transform; }
html[data-motion="full"] .bk[data-mounted]:not([data-instant]) .bk-tilt { animation: bk-settle 1000ms cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes bk-settle { from { transform: translate(-50%, -58%) rotateX(var(--tilt)) scale(1.05); opacity: 0; } }
.bk-book { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(0); transition: transform 1100ms cubic-bezier(.6, 0, .2, 1); }
.bk[data-cover="closed"] .bk-book, .bk[data-cover="shutting"] .bk-book { transform: translateX(calc(var(--pw) * -.5)); }

/* the block: boards, the shadow on the desk, the thickness of the pages on each side */
.bk-shadow { position: absolute; top: 2%; bottom: -1%; left: -1%; right: -1%; transform: translateZ(-7px); border-radius: 6px; background: rgba(0, 0, 0, .25); box-shadow: 0 30px 60px 14px rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .35); transition: left 1100ms cubic-bezier(.6, 0, .2, 1); }
.bk[data-cover="closed"] .bk-shadow, .bk[data-cover="shutting"] .bk-shadow { left: calc(var(--pw) - 1%); }
.bk-board { position: absolute; top: -8px; bottom: -8px; left: var(--pw); right: -8px; transform: translateZ(-4px); border-radius: 2px 5px 5px 2px; background:
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), var(--bk-cloth); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bk-edge { position: absolute; background: repeating-linear-gradient(to bottom, var(--bk-paper) 0 1px, color-mix(in srgb, var(--bk-paper) 78%, var(--midnight)) 1px 2px); }
.bk-edge-bottom-l, .bk-edge-bottom-r { top: var(--ph); height: calc(4px + 14px * var(--p)); width: var(--pw); transform-origin: 50% 0; transform: rotateX(-90deg); }
.bk-edge-bottom-l { left: 0; }
.bk-edge-bottom-r { left: var(--pw); height: calc(4px + 14px * (1 - var(--p))); }
.bk-edge-side-l, .bk-edge-side-r { top: 0; height: var(--ph); width: calc(4px + 14px * var(--p)); transform-origin: 0 50%; transform: rotateY(90deg); background: repeating-linear-gradient(to right, var(--bk-paper) 0 1px, color-mix(in srgb, var(--bk-paper) 78%, var(--midnight)) 1px 2px); }
.bk-edge-side-l { left: 0; }
.bk-edge-side-r { left: calc(var(--pw) * 2); width: calc(4px + 14px * (1 - var(--p))); }
.bk[data-cover="closed"] .bk-side-left, .bk[data-cover="opening"] .bk-side-left, .bk[data-cover="closed"] .bk-edge-bottom-l, .bk[data-cover="opening"] .bk-edge-bottom-l, .bk[data-cover="closed"] .bk-edge-side-l, .bk[data-cover="opening"] .bk-edge-side-l { visibility: hidden; }

/* the two pages on the desk */
.bk-side { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; }
.bk[data-cover="open"][data-mode="spread"] .bk-side { cursor: pointer; }
.bk[data-cover="open"][data-mode="spread"] .bk-side a, .bk[data-cover="open"][data-mode="spread"] .bk-side button { cursor: pointer; }
.bk[data-cover="open"][data-mode="spread"] .bk-side .bk-content-in { cursor: auto; }
.bk-side-left { left: 0; }
.bk-side-right { left: var(--pw); }
.bk-paper { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(118deg, rgba(255, 255, 255, .34), transparent 42%), var(--bk-paper); color: var(--bk-ink); transform: translateZ(1px); transition: opacity 160ms var(--ease); }
.bk[data-fading] .bk-side .bk-paper { opacity: 0; }
.bk-gutter { position: absolute; top: 0; bottom: 0; width: 16%; pointer-events: none; transform: translateZ(2px); }
.bk-side-left .bk-gutter { right: 0; background: linear-gradient(to right, transparent, rgba(var(--bk-shadow), .17)); }
.bk-side-right .bk-gutter { left: 0; background: linear-gradient(to left, transparent, rgba(var(--bk-shadow), .17)); }
.bk-cast { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateZ(2px); }
.bk[data-turning] .bk-cast { opacity: calc(var(--shade) * .55); }
.bk-cast-l { background: linear-gradient(to left, rgba(var(--bk-shadow), .55), transparent 65%); }
.bk-cast-r { background: linear-gradient(to right, rgba(var(--bk-shadow), .55), transparent 65%); }

/* what is printed on a page */
.bk-running { position: absolute; top: calc(20px * var(--s)); margin: 0; font: 600 calc(8.5px * var(--s) * var(--hu-scale, 1)) / 1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-paper-left .bk-running { left: calc(40px * var(--s)); }
.bk-paper-right .bk-running { right: calc(40px * var(--s)); }
.bk-folio { position: absolute; bottom: calc(18px * var(--s)); margin: 0; font: 500 calc(10px * var(--s) * var(--hu-scale, 1)) / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--bk-ink-2); }
.bk-paper-left .bk-folio { left: calc(40px * var(--s)); }
.bk-paper-right .bk-folio { right: calc(40px * var(--s)); }
.bk-content { position: absolute; top: calc(46px * var(--s)); bottom: calc(42px * var(--s)); overflow: hidden; font-size: calc(13.5px * var(--s) * var(--hu-scale, 1) * var(--fit, 1)); line-height: 1.5; font-family: var(--font-ui); }
.bk-paper-left .bk-content { left: calc(38px * var(--s)); right: calc(46px * var(--s)); }
.bk-paper-right .bk-content { left: calc(46px * var(--s)); right: calc(38px * var(--s)); }
.bk-paper[data-kind="title"] .bk-content, .bk-paper[data-kind="opener"] .bk-content { top: calc(54px * var(--s)); }
.bk-content p { margin: 0; }
.bk-content a { color: inherit; }
.bk-content-in { height: 100%; }
.bk-h { margin: 0 0 .8em; font: 600 1.9em / 1.15 var(--font-display); letter-spacing: -.01em; }
.bk-h-small { font-size: 1.35em; }
.bk-rule { width: 3.2em; height: 2px; margin: 1.2em auto; background: var(--bk-accent); }
.bk-ornament { display: block; margin-top: 1.4em; text-align: center; font-size: 1.4em; color: var(--bk-accent-ink); }
.bk-content .ext { vertical-align: -.12em; margin-left: .2em; }

/* title page */
.bk-title { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 8%; }
.bk-title-kicker { font: 700 .68em / 1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-title-name { margin: .5em 0 0; font: 600 2.55em / 1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.bk-title-name em, .bk-cover-title em { font-style: italic; color: var(--bk-accent-ink); }
.bk-title-sub { max-width: 26em; font: italic 400 1.02em / 1.5 var(--font-display); color: var(--bk-ink-2); text-wrap: pretty; }
.bk-title-count { margin-top: 1.8em; font: 600 .82em / 1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.bk-title-ed { margin-top: .4em; font: .8em / 1.4 var(--font-ui); color: var(--bk-ink-2); }

/* contents and lists */
.bk-contents-title { margin: .2em 0 0; font: 600 1.7em / 1.1 var(--font-display); letter-spacing: -.015em; }
.bk-contents-title em { font-style: italic; color: var(--bk-accent-ink); }
.bk-contents-count { margin: .5em 0 1.4em; padding-bottom: .9em; border-bottom: 1px solid var(--bk-rule); font: .8em / 1.4 var(--font-ui); color: var(--bk-ink-2); }
.bk-h-contents { font-size: 1.3em; margin-bottom: .6em; }
.bk-toc, .bk-list { list-style: none; margin: 0; padding: 0; }
.bk-toc li { margin-bottom: .45em; }
.bk-toc-row, .bk-list-row { display: flex; align-items: baseline; gap: .5em; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
span.bk-toc-row, span.bk-list-row { cursor: default; }
.bk-toc-row:hover .bk-toc-name, .bk-list-row:hover .bk-list-name { color: var(--bk-accent-ink); }
.bk-toc-row:focus-visible, .bk-list-row:focus-visible, .bk-btn:focus-visible, .bk-flap-tab:focus-visible, .bk-print-link:focus-visible { outline: 2px solid var(--bk-ink); outline-offset: 2px; border-radius: 2px; }
.bk-toc-num { flex: 0 0 2.2em; font: 600 1em / 1.3 var(--font-display); color: var(--bk-accent-ink); }
.bk-toc-name { font: 600 1.05em / 1.3 var(--font-display); }
.bk-toc-dots { flex: 1; min-width: 1em; border-bottom: 1px dotted var(--bk-rule); transform: translateY(-.25em); }
.bk-toc-page, .bk-list-page { font: 500 .9em / 1.3 var(--font-display); font-variant-numeric: tabular-nums; color: var(--bk-ink-2); }
.bk-toc-count { display: block; margin-left: 2.7em; font: .72em / 1.3 var(--font-ui); color: var(--bk-ink-2); }
.bk-contents-note { margin-top: 1.2em; padding-top: .8em; border-top: 1px solid var(--bk-rule); font: italic .82em / 1.45 var(--font-display); color: var(--bk-ink-2); }
.bk-list { font-size: .86em; }
.bk-list li { break-inside: avoid; margin-bottom: .28em; }
.bk-list li[data-kind="own"] .bk-list-name::after { content: "●"; margin-left: .4em; font-size: .6em; vertical-align: .2em; color: var(--bk-accent); }
.bk-list-name { min-width: 0; }
.bk-list-room { font: .8em / 1.3 var(--font-ui); color: var(--bk-ink-2); white-space: nowrap; }
.bk-opener .bk-list { columns: 2; column-gap: 1.4em; margin-top: 1em; }
.bk-opener .bk-list li { margin-bottom: .32em; }

/* a chapter opens */
.bk-opener-kicker { font: 700 .68em / 1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-opener-numeral { margin: .05em 0 0; font: 400 5.2em / 1 var(--font-display); letter-spacing: -.03em; color: var(--bk-accent); text-shadow: 1px 1px 0 var(--bk-accent-ink), 2px 2px 0 var(--bk-accent-ink), 3px 3px 0 var(--bk-accent-ink), 4px 4px 0 color-mix(in srgb, var(--bk-accent-ink) 85%, #000), 5px 5px 0 color-mix(in srgb, var(--bk-accent-ink) 70%, #000), 9px 14px 18px rgba(var(--bk-shadow), .35); transform: translate(-2px, -3px); }
html[data-motion="full"] .bk-side .bk-opener-numeral { animation: bk-raise 900ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bk-raise { from { transform: none; text-shadow: 0 0 0 var(--bk-accent-ink), 0 0 0 var(--bk-accent-ink), 0 0 0 var(--bk-accent-ink), 0 0 0 var(--bk-accent-ink), 0 0 0 var(--bk-accent-ink), 0 0 0 rgba(var(--bk-shadow), 0); } }
.bk-opener-name { margin: .1em 0 0; font: 600 1.85em / 1.1 var(--font-display); letter-spacing: -.01em; }
.bk-opener-count { margin-top: .4em; padding-bottom: .9em; border-bottom: 1px solid var(--bk-rule); font: 600 .78em / 1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-also-empty { height: 100%; display: flex; align-items: center; justify-content: center; }
.bk-cards { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: .55em; }
.bk-card { display: flex; align-items: center; gap: .75em; width: 100%; padding: .35em; border: 1px solid var(--bk-rule); border-radius: 3px; background: color-mix(in srgb, var(--bk-paper) 60%, #fff); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
span.bk-card { cursor: default; }
.bk-card:hover .bk-card-name { color: var(--bk-accent-ink); }
.bk-card:focus-visible { outline: 2px solid var(--bk-ink); outline-offset: 2px; }
.bk-thumb { flex: 0 0 38%; display: block; border: 1px solid var(--bk-rule); background: #fff; padding: 2px; }
.bk-thumb .tl-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.bk-thumb .tl-shot-gen { height: auto; }
.bk-card-text { display: grid; gap: .15em; min-width: 0; }
.bk-card-name { font: 600 .92em / 1.25 var(--font-display); }
.bk-card-sub { font: .72em / 1.3 var(--font-ui); letter-spacing: .02em; color: var(--bk-ink-2); }
.bk-card-tag { font: italic .78em / 1.35 var(--font-display); color: var(--bk-ink-2); text-wrap: pretty; }
li[data-kind="own"] .bk-card { border-left: 3px solid var(--bk-accent); }
.bk-also-lead { margin-bottom: 1em; font: italic .92em / 1.45 var(--font-display); color: var(--bk-ink-2); }

/* the trace that draws itself across a chapter opener */
.bk-ecg { display: block; width: 100%; height: 2.4em; margin: .6em 0 .2em; stroke: var(--bk-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--amber) 60%, transparent)); }
html[data-motion="full"] .bk-side .bk-ecg path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: bk-draw 1800ms cubic-bezier(.4, 0, .3, 1) 250ms forwards; }
@keyframes bk-draw { to { stroke-dashoffset: 0; } }

/* a tool's text page */
.bk-text { position: relative; height: 100%; display: flex; flex-direction: column; gap: .6em; perspective: 900px; font-size: 1.1em; }
.bk-toolpage .bk-text { font-size: 1em; }
.bk-kicker { font: 700 .66em / 1.3 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-name { margin: 0; padding-right: 2.6em; font: 600 1.95em / 1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.bk-by { font: .86em / 1.4 var(--font-ui); color: var(--bk-ink-2); }
.bk-by b { font-weight: 600; color: var(--bk-ink); }
.bk-tagline { font: italic 400 1.08em / 1.4 var(--font-display); text-wrap: pretty; }
.bk-summary { font-size: .94em; line-height: 1.52; text-wrap: pretty; }
.bk-chips { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: .2em 0 0; padding: 0; }
.bk-chip { padding: .15em .55em; border: 1px solid var(--bk-rule); border-radius: 2px; font: 600 .66em / 1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-text .tl-badges { margin-top: .1em; font-size: .9em; }
.bk-actions { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .9em; }
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 2.5em; padding: 0 .95em; border: 1px solid var(--bk-ink); border-radius: 2px; background: transparent; color: var(--bk-ink); font: 600 .8em / 1 var(--font-ui); text-decoration: none; cursor: pointer; }
.bk-btn:hover { background: color-mix(in srgb, var(--bk-ink) 8%, transparent); }
.bk-btn-main, .bk-content a.bk-btn-main { background: var(--bk-ink); color: var(--bk-paper); }
.bk-btn-main:hover { background: color-mix(in srgb, var(--bk-ink) 86%, var(--bk-paper)); }
.bk-btn-own, .bk-content a.bk-btn-own { border-color: var(--bk-accent); background: var(--bk-accent); color: var(--midnight); }
.bk-btn-own:hover { background: color-mix(in srgb, var(--bk-accent) 85%, var(--chart-white)); }
span.bk-btn { cursor: default; }
.bk-colophon-actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1.2em; }
.bk-colophon p + p { margin-top: .8em; }
.bk-credit { margin-top: 1.2em; font: italic 400 1em / 1.5 var(--font-display); color: var(--bk-ink-2); }

/* a sticky note on tools added this month */
.bk-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em; padding-right: 2.6em; }
.bk-name-row .bk-name { padding-right: 0; }
.bk-sticky { display: inline-block; padding: .4em .7em .5em; background: var(--bk-accent); color: var(--midnight); font: 700 .62em / 1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-5deg); box-shadow: 0 3px 8px -2px rgba(var(--bk-shadow), .45), inset 0 -1.2em 0 rgba(255, 255, 255, .18); }

/* the stamp (the Fave star) and the seal (the team's own tools) */
.bk-stamp { position: absolute; top: -.2em; right: -.3em; }
.bk-stamp .hu-bm, .bk-stamp-flat { display: inline-flex; align-items: center; justify-content: center; width: 2.7em; height: 2.7em; border: 2px solid var(--bk-accent-ink); border-radius: 50%; background: transparent; color: var(--bk-accent-ink); transform: rotate(-9deg); cursor: pointer; }
.bk-stamp .hu-bm:hover { background: color-mix(in srgb, var(--bk-accent) 18%, transparent); }
html[data-motion="full"] .bk-stamp .hu-bm[aria-pressed="true"] { animation: bk-press 460ms cubic-bezier(.3, 1.5, .4, 1); }
@keyframes bk-press { 0% { transform: rotate(-9deg) scale(1.35); } 50% { transform: rotate(-9deg) scale(.9); } 100% { transform: rotate(-9deg) scale(1); } }
.bk-stamp .hu-bm[aria-pressed="true"] { background: color-mix(in srgb, var(--bk-accent) 28%, transparent); box-shadow: inset 0 0 0 .3em var(--bk-paper), inset 0 0 0 .38em var(--bk-accent-ink); }
.bk-stamp .hu-bm .hu-ico { width: 1.2em; height: 1.2em; }
.bk-stamp .hu-popover { font-size: .85em; }
.bk-seal { position: relative; align-self: flex-end; display: grid; place-items: center; width: 5.4em; height: 5.4em; margin: .6em .4em 0 0; color: var(--bk-accent-ink); opacity: .9; transform: rotate(-12deg); pointer-events: none; }
.bk-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-seal img { width: 1.9em; height: 1.9em; border-radius: 50%; }

/* the flap: who built it */
.bk-flap-tab { align-self: flex-start; margin-top: .7em; padding: .35em 0 0; border: 0; border-top: 1px dashed var(--bk-rule); background: none; color: var(--bk-ink-2); font: italic .8em / 1.3 var(--font-display); cursor: pointer; }
.bk-flap-tab:hover { color: var(--bk-ink); }
span.bk-flap-tab { cursor: default; }
.bk-flap { position: absolute; left: -.6em; right: -.6em; bottom: 0; max-height: 70%; padding: 1em .8em .9em; border-top: 2px solid var(--bk-accent); background: var(--bk-paper-2); box-shadow: 0 -10px 24px -14px rgba(var(--bk-shadow), .6); transform-origin: 50% 100%; transform: rotateX(-92deg); opacity: 0; transition: transform 420ms cubic-bezier(.2, .8, .2, 1), opacity 200ms; overflow: auto; }
.bk-flap-open .bk-flap { transform: rotateX(0); opacity: 1; }
.bk-flap[aria-hidden="true"] { pointer-events: none; }
.bk-facts { display: grid; grid-template-columns: auto 1fr; gap: .35em .9em; margin: 0; font-size: .84em; }
.bk-facts div { display: contents; }
.bk-facts dt { font: 700 .78em / 1.6 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bk-ink-2); }
.bk-facts dd { margin: 0; line-height: 1.35; }

/* a tool's picture page: the mounted print, in a fixed slot so the floating tablet can rise from exactly there */
.bk-side-right { --slot-top: calc(var(--ph) * .17); }
.bk-paper[data-kind="shot"] .bk-content { top: var(--slot-top); }
.bk-shotpage { height: 100%; display: flex; flex-direction: column; }
.bk-print-link { display: block; color: inherit; text-decoration: none; }
.bk-print { position: relative; margin: 0; }
.bk-print-mat { position: relative; display: block; padding: 4.2%; background: #fff; border: 1px solid var(--bk-rule); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 5px 16px -6px rgba(var(--bk-shadow), .3); }
.bk-print-mat .tl-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 1px solid color-mix(in srgb, var(--midnight) 14%, transparent); }
.bk-print-mat .tl-shot-gen { height: auto; }
/* with the tablet above it, the slot is only a pale trace of the print */
.bk-shotpage[data-pop] .bk-print-mat { background: color-mix(in srgb, var(--bk-paper) 70%, #fff); box-shadow: none; border-style: dashed; }
.bk-shotpage[data-pop] .bk-print-mat .tl-shot { opacity: .14; filter: saturate(0); border-color: transparent; }
.bk-caption { margin: .75em .2em 0; font: italic 400 .8em / 1.45 var(--font-display); color: var(--bk-ink-2); text-wrap: pretty; }
.bk-caption-fig { font-style: normal; font-weight: 700; color: var(--bk-ink); }
.bk-modules { margin-top: 1em; padding-top: .7em; border-top: 1px solid var(--bk-rule); font-size: .8em; line-height: 1.45; color: var(--bk-ink-2); }
.bk-modules b { color: var(--bk-ink); font-weight: 600; }
.bk-host { margin-top: auto; padding-top: .6em; font: .72em / 1.4 var(--font-code); color: var(--bk-ink-2); }

/* the tablet floating above the picture page */
.bk-pop { position: absolute; top: var(--slot-top); left: calc(46px * var(--s)); right: calc(38px * var(--s)); --tx: 0; --ty: 0; --hover: 0; --z: calc(38px * var(--s)); --t: 7px; transform-style: preserve-3d; pointer-events: none; }
.bk-pop-glow { position: absolute; left: -6%; right: -6%; top: 4%; bottom: -14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--shot, var(--amber)) 55%, var(--amber)), transparent); opacity: .28; filter: blur(14px); transform: translateZ(1.4px); animation: bk-pop-glow 900ms var(--ease) both; }
.bk-pop-shadow { position: absolute; left: 3%; right: 3%; top: 8%; bottom: -4%; border-radius: 6px; background: rgba(var(--bk-shadow), .5); filter: blur(12px); transform: translateZ(1.6px) translate(calc(var(--tx) * 12px), calc(var(--ty) * 9px + 10px)); transition: transform 320ms var(--ease); animation: bk-pop-shadow 900ms var(--ease) both; }
.bk-pop-rise { position: relative; transform-style: preserve-3d; transform: translateZ(var(--z)); animation: bk-rise 900ms cubic-bezier(.2, .75, .2, 1) both; }
.bk-pop-tilt { position: relative; display: block; aspect-ratio: 16 / 10; box-sizing: content-box; padding: 4.2%; transform-style: preserve-3d; transform: translateZ(calc(var(--hover) * 10px)) rotateX(calc(var(--ty) * -7deg)) rotateY(calc(var(--tx) * 9deg)); transition: transform 320ms var(--ease); pointer-events: auto; cursor: pointer; }
.bk-tab { position: absolute; }
.bk-tab-front { inset: 0; padding: inherit; border-radius: 9px; background: #0c0f16; transform: translateZ(calc(var(--t) / 2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.bk-tab-front .tl-shot { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 4px; }
.bk-tab-sheen { position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 32%, transparent 48%); pointer-events: none; }
.bk-tab-back { inset: 0; border-radius: 9px; background: linear-gradient(135deg, #dfe3e9, #aeb5bf); transform: translateZ(calc(var(--t) / -2)) rotateY(180deg); }
.bk-tab-side { background: linear-gradient(to bottom, #cfd4db, #8f97a3); backface-visibility: hidden; }
.bk-tab-top { left: 0; right: 0; top: 0; height: var(--t); transform-origin: 50% 0; transform: translateZ(calc(var(--t) / 2)) rotateX(-90deg); }
.bk-tab-bottom { left: 0; right: 0; bottom: 0; height: var(--t); transform-origin: 50% 100%; transform: translateZ(calc(var(--t) / 2)) rotateX(90deg); background: linear-gradient(to bottom, #8f97a3, #6f7681); }
.bk-tab-left { top: 0; bottom: 0; left: 0; width: var(--t); transform-origin: 0 50%; transform: translateZ(calc(var(--t) / 2)) rotateY(90deg); background: linear-gradient(to right, #cfd4db, #9aa2ad); }
.bk-tab-right { top: 0; bottom: 0; right: 0; width: var(--t); transform-origin: 100% 50%; transform: translateZ(calc(var(--t) / 2)) rotateY(-90deg); background: linear-gradient(to right, #9aa2ad, #7d8591); }
/* the loupe: a magnified circle of the screenshot under the pointer */
.bk-loupe { position: absolute; left: calc(var(--lx, 50%) - 18%); top: calc(var(--ly, 50%) - 28.8%); width: 36%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background-color: #fff; background-repeat: no-repeat; background-size: 240% auto; background-position: var(--lx, 50%) var(--ly, 50%); box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .25); opacity: var(--loupe, 0); transform: translateZ(14px) scale(calc(.6 + var(--loupe, 0) * .4)); transition: opacity 160ms var(--ease), transform 160ms var(--ease); pointer-events: none; }
@keyframes bk-rise { 0% { transform: translateZ(0) rotateX(-16deg); } 100% { transform: translateZ(var(--z)) rotateX(0); } }
@keyframes bk-pop-shadow { 0% { opacity: 0; filter: blur(2px); } 100% { opacity: 1; filter: blur(12px); } }
@keyframes bk-pop-glow { 0% { opacity: 0; } 100% { opacity: .28; } }
html[data-motion="lite"] .bk-pop-rise, html[data-motion="lite"] .bk-pop-shadow, html[data-motion="lite"] .bk-pop-glow { animation: none; }
html[data-motion="lite"] .bk-pop-tilt, html[data-motion="lite"] .bk-pop-shadow { transition: none; }

/* the page in the air */
.bk-leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform: translateZ(3px); transform-style: preserve-3d; pointer-events: none; }
.bk-leaf[data-dir="1"] { left: var(--pw); }
.bk-leaf[data-dir="-1"] { left: 0; }
.bk-strip { position: absolute; top: 0; width: calc(var(--pw) / 10 + 1.5px); height: var(--ph); transform-style: preserve-3d; }
.bk-leaf[data-dir="1"] .bk-strip { left: 0; transform-origin: 0 50%; transform: rotateY(var(--a, 0deg)); }
.bk-leaf[data-dir="1"] .bk-strip .bk-strip { left: calc(100% - 1.5px); }
.bk-leaf[data-dir="-1"] .bk-strip { right: 0; transform-origin: 100% 50%; transform: rotateY(var(--a, 0deg)); }
.bk-leaf[data-dir="-1"] .bk-strip .bk-strip { right: calc(100% - 1.5px); }
.bk-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--bk-paper); }
.bk-face-back { transform: rotateY(180deg); }
.bk-face-in { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.bk-face-in .bk-paper { transform: none; }
.bk-face-in[data-slice="0"] { left: 0; }
.bk-face-in[data-slice="1"] { left: calc(var(--pw) / -10); }
.bk-face-in[data-slice="2"] { left: calc(var(--pw) * -2 / 10); }
.bk-face-in[data-slice="3"] { left: calc(var(--pw) * -3 / 10); }
.bk-face-in[data-slice="4"] { left: calc(var(--pw) * -4 / 10); }
.bk-face-in[data-slice="5"] { left: calc(var(--pw) * -5 / 10); }
.bk-face-in[data-slice="6"] { left: calc(var(--pw) * -6 / 10); }
.bk-face-in[data-slice="7"] { left: calc(var(--pw) * -7 / 10); }
.bk-face-in[data-slice="8"] { left: calc(var(--pw) * -8 / 10); }
.bk-face-in[data-slice="9"] { left: calc(var(--pw) * -9 / 10); }
.bk-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--shade); }
.bk-leaf[data-dir="1"] .bk-face-front::after { background: linear-gradient(to right, rgba(var(--bk-shadow), .32), transparent 70%); }
.bk-leaf[data-dir="1"] .bk-face-back::after { background: linear-gradient(to left, rgba(var(--bk-shadow), .26), transparent 70%); }
.bk-leaf[data-dir="-1"] .bk-face-front::after { background: linear-gradient(to left, rgba(var(--bk-shadow), .32), transparent 70%); }
.bk-leaf[data-dir="-1"] .bk-face-back::after { background: linear-gradient(to right, rgba(var(--bk-shadow), .26), transparent 70%); }

/* the cover */
.bk-cover { position: absolute; top: -8px; bottom: -8px; left: var(--pw); width: calc(var(--pw) + 8px); transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(5px) rotateY(0deg); transition: transform 1100ms cubic-bezier(.6, 0, .2, 1); }
.bk[data-cover="opening"] .bk-cover, .bk[data-cover="open"] .bk-cover, .bk[data-cover="closing"] .bk-cover, .bk[data-cover="back"] .bk-cover { transform: translateZ(-2px) rotateY(-180deg); }
.bk-cover-front, .bk-cover-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 5px 5px 2px; }
.bk-cover-front { --mx: 50%; --my: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 10% 9%; text-align: center; color: var(--bk-accent); font-size: calc(13px * var(--s) * var(--hu-scale, 1)); cursor: pointer; overflow: hidden; background:
  radial-gradient(70% 50% at 50% 30%, rgba(255, 255, 255, .07), transparent 70%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), var(--bk-cloth); box-shadow: inset 10px 0 16px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bk-cover-frame { position: absolute; inset: 5.5%; border: 1px solid color-mix(in srgb, var(--amber) 72%, transparent); border-radius: 2px; box-shadow: inset 0 0 0 3px transparent, 0 0 0 3px transparent, inset 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent); pointer-events: none; }
html[data-motion="full"] .bk[data-cover="closed"] .bk-cover-front:hover { box-shadow: inset 10px 0 16px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 2px color-mix(in srgb, var(--amber) 30%, transparent); }
.bk-cover-front:focus-visible { outline: 3px solid var(--amber); outline-offset: -6px; }
.bk-cover-sheen { position: absolute; inset: 0; background: radial-gradient(42% 36% at var(--mx) var(--my), rgba(255, 255, 255, .13), transparent 70%); pointer-events: none; mix-blend-mode: screen; }
.bk-cover-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 -1px 0 rgba(0, 0, 0, .35); }
.bk-cover-ecg { width: 62%; height: 2.2em; margin: .4em 0 .2em; stroke: color-mix(in srgb, var(--amber) 75%, transparent); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--amber) 55%, transparent)); }
.bk-cover-open { position: absolute; bottom: 18%; padding: .5em 1.2em; border: 1px solid color-mix(in srgb, var(--amber) 60%, transparent); border-radius: 999px; font: 600 .78em / 1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--amber) 85%, var(--chart-white)); }
html[data-motion="full"] .bk[data-cover="closed"] .bk-cover-open { animation: bk-breathe 2600ms ease-in-out infinite; }
@keyframes bk-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
html[data-motion="full"] .bk-side .bk-ecg path { stroke: var(--bk-accent); }
.bk-cover-mark { width: 3.2em; height: 3.2em; margin-bottom: .2em; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.bk-cover-band { display: flex; gap: .45em; margin: .2em 0 .6em; }
.bk-cover-band i { display: block; width: 1.1em; height: .5em; border-radius: 999px; background: var(--c); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
.bk-cover-spine { position: absolute; top: 6%; bottom: 6%; left: 0; width: 6px; opacity: .92; background: linear-gradient(to bottom, var(--cobalt) 0 13%, transparent 13% 14.5%, var(--sky) 14.5% 27.5%, transparent 27.5% 29%, var(--verde) 29% 42%, transparent 42% 43.5%, var(--amber) 43.5% 56.5%, transparent 56.5% 58%, var(--ember) 58% 71%, transparent 71% 72.5%, var(--rose) 72.5% 85.5%, transparent 85.5% 87%, var(--orchid) 87% 100%); }
.bk-cover-print { position: absolute; top: 8px; bottom: 8px; left: 8px; right: 0; overflow: hidden; }
.bk-cover-print .bk-paper { transform: none; background: var(--bk-paper); }
.bk-backboard { position: absolute; top: -8px; bottom: -8px; left: var(--pw); width: calc(var(--pw) + 8px); transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(-4px) rotateY(0deg); transition: transform 1100ms cubic-bezier(.6, 0, .2, 1); pointer-events: none; }
.bk[data-cover="closing"] .bk-backboard, .bk[data-cover="back"] .bk-backboard { transform: translateZ(6px) rotateY(-180deg); pointer-events: auto; }
/* the hinged back board exists only while the book closes onto it; at rest the plain board under the pages is enough (two coplanar layers confuse the browser's depth sorting) */
.bk-backboard { visibility: hidden; }
.bk[data-cover="closing"] .bk-backboard, .bk[data-cover="back"] .bk-backboard { visibility: visible; }
.bk[data-cover="closing"] .bk-board, .bk[data-cover="back"] .bk-board { visibility: hidden; }
.bk-backboard-in, .bk-backboard-out { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 5px 5px 2px; }
.bk-backboard-in { background: var(--bk-paper-2); }
.bk-backboard-out { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7em; padding: 12% 11%; text-align: center; color: var(--bk-accent); font-size: calc(13px * var(--s) * var(--hu-scale, 1)); transform: rotateY(180deg); cursor: pointer; overflow: hidden; background:
  radial-gradient(70% 50% at 50% 30%, rgba(255, 255, 255, .06), transparent 70%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), var(--bk-cloth); box-shadow: inset -10px 0 16px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bk-backboard-out:focus-visible { outline: 3px solid var(--amber); outline-offset: -6px; }
.bk-back-title { margin: 0; font: 600 1.7em / 1.1 var(--font-display); letter-spacing: -.01em; }
.bk-back-title em { font-style: italic; color: var(--chart-white); }
.bk-back-blurb { max-width: 26em; font: italic 400 1em / 1.5 var(--font-display); color: color-mix(in srgb, var(--amber) 78%, var(--chart-white)); text-wrap: pretty; }
.bk-back-url { font: 600 .82em / 1.3 var(--font-code); letter-spacing: .04em; color: var(--chart-white); }
.bk[data-cover="back"] .bk-book, .bk[data-cover="closing"] .bk-book { transform: translateX(calc(var(--pw) * .5)); }
.bk[data-cover="back"] .bk-shadow, .bk[data-cover="closing"] .bk-shadow { right: calc(var(--pw) - 1%); }
.bk[data-cover="back"] .bk-side-right, .bk[data-cover="back"] .bk-edge-bottom-r, .bk[data-cover="back"] .bk-edge-side-r { visibility: hidden; }
.bk-shadow { transition: left 1100ms cubic-bezier(.6, 0, .2, 1), right 1100ms cubic-bezier(.6, 0, .2, 1); }
.bk-cover-kicker { font: 700 .72em / 1.3 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--amber) 70%, var(--chart-white)); }
.bk-cover-title { margin: .3em 0; font: 600 2.7em / 1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.bk-cover-title em { color: var(--chart-white); }
.bk-cover-url { font: 500 .74em / 1.3 var(--font-code) !important; font-style: normal !important; letter-spacing: .04em; color: color-mix(in srgb, var(--amber) 80%, var(--chart-white)); }
.bk-cover-sub { font: italic 400 1em / 1.4 var(--font-display); color: color-mix(in srgb, var(--amber) 75%, var(--chart-white)); }
.bk-cover-foot { position: absolute; left: 9%; right: 9%; bottom: 7.5%; margin: 0; font: 600 .66em / 1.6 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--amber) 70%, var(--chart-white)); }
.bk-cover-back { transform: rotateY(180deg); background: var(--bk-paper); box-shadow: inset -10px 0 16px -10px rgba(var(--bk-shadow), .35); }

/* the ribbon: tucked under the paper, its tail hanging past the bottom edge where the reader left off */
.bk-ribbon { position: absolute; top: 62%; width: 13px; height: calc(38% + 44px); padding: 0; border: 0; transform: translateZ(.5px); background: linear-gradient(to right, color-mix(in srgb, var(--amber) 70%, #000), var(--amber) 45%, color-mix(in srgb, var(--amber) 80%, #000)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%); cursor: pointer; }
.bk-ribbon[data-side="left"] { left: calc(var(--pw) * .42); }
.bk-ribbon[data-side="right"] { left: calc(var(--pw) * 1.58); }
.bk-ribbon[data-side="here"] { left: calc(var(--pw) - 6px); top: 40%; height: calc(60% + 44px); transform: translateZ(2.5px); box-shadow: 2px 3px 6px rgba(0, 0, 0, .3); }
.bk-ribbon:focus-visible { outline: 2px solid var(--chart-white); }

/* big targets beside the book turn the pages; the page corner curls while the pointer rests on one */
.bk-zone { position: absolute; top: 0; bottom: 0; width: clamp(56px, calc((100% - var(--pw) * 2) / 2 - 24px), 220px); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--chart-white); cursor: pointer; z-index: 2; }
.bk-zone-prev { left: 0; }
.bk-zone-next { right: 0; }
.bk-zone-btn { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: color-mix(in srgb, var(--chart-white) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-white) 25%, transparent); opacity: .55; transition: opacity var(--duration-base) var(--ease), background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.bk-zone-btn svg { width: 26px; height: 26px; }
.bk-zone:hover .bk-zone-btn, .bk-zone:focus-visible .bk-zone-btn { opacity: 1; background: color-mix(in srgb, var(--chart-white) 92%, transparent); color: var(--midnight); transform: scale(1.06); }
.bk-zone:focus-visible { outline: none; }
.bk-zone:disabled { cursor: default; }
.bk-zone:disabled .bk-zone-btn { opacity: .12; }
.bk-zone:disabled:hover .bk-zone-btn { background: color-mix(in srgb, var(--chart-white) 14%, transparent); color: var(--chart-white); transform: none; }
.bk-corner { position: absolute; bottom: 0; width: 0; height: 0; pointer-events: none; transform: translateZ(2.6px); transition: width 260ms var(--ease), height 260ms var(--ease); }
.bk-corner-r { right: 0; background: linear-gradient(to top left, var(--bk-desk) 0 49.5%, color-mix(in srgb, var(--bk-paper) 82%, var(--midnight)) 50%, var(--bk-paper-2) 70%, var(--bk-paper) 100%); box-shadow: -3px -3px 8px -3px rgba(var(--bk-shadow), .45); }
.bk-corner-l { left: 0; background: linear-gradient(to top right, var(--bk-desk) 0 49.5%, color-mix(in srgb, var(--bk-paper) 82%, var(--midnight)) 50%, var(--bk-paper-2) 70%, var(--bk-paper) 100%); box-shadow: 3px -3px 8px -3px rgba(var(--bk-shadow), .45); }
.bk[data-peek="next"] .bk-corner-r, .bk[data-peek="prev"] .bk-corner-l { width: calc(56px * var(--s)); height: calc(56px * var(--s)); }
html[data-motion="static"] .bk-corner { transition: none; }

/* the chapters' index tabs on the fore-edge: ahead of the reader on the right, behind on the left */
.bk-tabs { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.bk-tab-ix { position: absolute; display: flex; align-items: center; justify-content: center; width: 24px; height: calc(44px * var(--s)); padding: 0; border: 0; color: var(--chart-white); background: var(--c); font: 700 11px / 1 var(--font-display); cursor: pointer; pointer-events: auto; transform: translateZ(.6px); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: filter 160ms var(--ease); }
.bk-tab-ix[data-side="right"] { left: calc(var(--pw) * 2); border-radius: 0 4px 4px 0; }
.bk-tab-ix[data-side="left"] { left: -24px; border-radius: 4px 0 0 4px; }
.bk-tab-ix:hover { filter: brightness(1.12); }
.bk-tab-ix[aria-current="true"] { box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .55); }
.bk-tab-ix:focus-visible { outline: 2px solid var(--chart-white); outline-offset: -3px; }
.bk-tab-ix[data-n="0"] { top: 7%; } .bk-tab-ix[data-n="1"] { top: 15%; } .bk-tab-ix[data-n="2"] { top: 23%; } .bk-tab-ix[data-n="3"] { top: 31%; } .bk-tab-ix[data-n="4"] { top: 39%; } .bk-tab-ix[data-n="5"] { top: 47%; } .bk-tab-ix[data-n="6"] { top: 55%; } .bk-tab-ix[data-n="7"] { top: 63%; } .bk-tab-ix[data-n="8"] { top: 71%; } .bk-tab-ix[data-n="9"] { top: 79%; } .bk-tab-ix[data-n="10"] { top: 87%; } .bk-tab-ix[data-n="11"] { top: 95%; }
.bk[data-cover="back"] .bk-tab-ix[data-side="right"] { left: calc(var(--pw) * 1); }
.bk-zone-prev { left: 0; }

/* above and around the book */
.bk-pill { position: absolute; top: 12px; left: 50%; z-index: 3; margin: 0; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--chart-white) 90%, transparent); color: var(--midnight); font: 600 13px / 1.2 var(--font-ui); letter-spacing: .01em; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); pointer-events: none; }
.bk-rail { position: absolute; left: 14px; top: 50%; z-index: 3; transform: translateY(-50%); }
.bk-rail ol { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 6px; list-style: none; border-radius: 999px; background: color-mix(in srgb, var(--chart-white) 90%, transparent); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.bk-rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--midnight); font: 600 13px / 1 var(--font-display); cursor: pointer; }
.bk-rail-btn:hover { background: color-mix(in srgb, var(--midnight) 10%, transparent); }
.bk-rail-btn[aria-current="true"] { background: var(--midnight); color: var(--amber); }
.bk-rail-btn:focus-visible, .bk-bar-btn:focus-visible, .bk-find-in:focus-visible { outline: 2px solid var(--midnight); outline-offset: 2px; }
.bk-bar { position: absolute; left: 50%; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--chart-white) 92%, transparent); color: var(--midnight); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); transform: translateX(-50%); }
.bk-bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: 600 14px / 1 var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.bk-bar-btn:hover { background: color-mix(in srgb, var(--midnight) 10%, transparent); }
.bk-bar-btn:disabled { opacity: .35; cursor: default; }
.bk-bar-btn:disabled:hover { background: transparent; }
.bk-bar-icon { width: 42px; padding: 0; }
.bk-bar-icon svg { width: 22px; height: 22px; }
.bk-bar-main { background: var(--midnight); color: var(--chart-white); }
.bk-bar-main:hover { background: color-mix(in srgb, var(--midnight) 85%, var(--chart-white)); }
.bk-bar-pages { min-width: 9.5ch; text-align: center; font: 500 13px / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.bk-find { position: relative; }
.bk-find-label { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--midnight) 7%, transparent); color: var(--midnight); }
.bk-find-in { width: 11em; min-height: 40px; border: 0; background: transparent; color: inherit; font: 500 14px / 1 var(--font-ui); }
.bk-find-in::-webkit-search-cancel-button { display: none; }
.bk-find-in::placeholder { color: color-mix(in srgb, var(--midnight) 55%, transparent); }
.bk-find-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--chart-white); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.bk-find-list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--midnight); font: 500 14px / 1.2 var(--font-ui); text-align: left; cursor: pointer; }
.bk-find-list button:hover, .bk-find-list button:focus-visible { background: color-mix(in srgb, var(--midnight) 8%, transparent); outline: none; }
.bk-find-page { color: color-mix(in srgb, var(--midnight) 60%, transparent); font-family: var(--font-display); }

/* a phone reads one page at a time */
.bk[data-mode="single"] { --tilt: 5deg; }
.bk[data-mode="single"] .bk-tilt { width: var(--pw); }
.bk[data-mode="single"] .bk-side-left, .bk[data-mode="single"] .bk-edge-bottom-l, .bk[data-mode="single"] .bk-edge-side-l, .bk[data-mode="single"] .bk-rail, .bk[data-mode="single"] .bk-leaf { display: none; }
.bk[data-mode="single"] .bk-side-right, .bk[data-mode="single"] .bk-edge-bottom-r, .bk[data-mode="single"] .bk-board, .bk[data-mode="single"] .bk-cover { left: 0; }
.bk[data-mode="single"] .bk-edge-side-r { left: var(--pw); }
.bk[data-mode="single"] .bk-book, .bk[data-mode="single"][data-cover="closed"] .bk-book { transform: none; }
.bk[data-mode="single"] .bk-shadow, .bk[data-mode="single"][data-cover="closed"] .bk-shadow { left: -1%; }
.bk[data-mode="single"] .bk-side-right .bk-gutter { display: none; }
.bk[data-mode="single"][data-cover="open"] .bk-cover, .bk[data-mode="single"][data-cover="closing"] .bk-cover, .bk[data-mode="single"][data-cover="back"] .bk-cover { visibility: hidden; }
.bk[data-mode="single"] .bk-backboard { left: 0; }
.bk[data-mode="single"][data-cover="closing"] .bk-backboard, .bk[data-mode="single"][data-cover="back"] .bk-backboard { transform: translateZ(6px); }
.bk[data-mode="single"] .bk-backboard-out { transform: none; }
.bk[data-mode="single"] .bk-backboard-in { display: none; }
.bk[data-mode="single"][data-cover="closing"] .bk-backboard { animation: bk-fade-in 320ms var(--ease) both; }
@keyframes bk-fade-in { from { opacity: 0; } }
.bk[data-mode="single"] .bk-side-right { --slot-top: calc(46px * var(--s)); }
.bk[data-mode="single"] .bk-pop { left: calc(30px * var(--s)); right: calc(30px * var(--s)); --z: calc(22px * var(--s)); }
.bk[data-mode="single"] .bk-zone { width: 44px; }
.bk[data-mode="single"] .bk-zone-prev { left: 0; }
.bk[data-mode="single"] .bk-zone-btn { width: 40px; height: 40px; opacity: .35; }
.bk[data-mode="single"] .bk-corner { display: none; }
.bk[data-mode="single"] .bk-paper-right .bk-content { left: calc(30px * var(--s)); right: calc(30px * var(--s)); font-size: calc(15px * var(--s) * var(--hu-scale, 1) * var(--fit, 1)); }
.bk[data-mode="single"] .bk-paper-right .bk-running { left: calc(30px * var(--s)); right: auto; }
.bk-toolpage { display: flex; flex-direction: column; gap: 1em; height: 100%; }
.bk-toolpage .bk-shotpage { height: auto; flex: 0 0 auto; }
.bk-toolpage .bk-host, .bk-toolpage .bk-modules { display: none; }
.bk-toolpage .bk-seal { position: absolute; right: -.4em; top: -.2em; width: 4.4em; height: 4.4em; margin: 0; }
.bk-toolpage .bk-shotpage { position: relative; }
.bk-toolpage .bk-print { margin-top: 0; }
.bk-toolpage .bk-text { flex: 1; min-height: 0; }
.bk-toolpage .bk-text .bk-kicker { display: none; }
.bk-toolpage .bk-name { font-size: 1.5em; }
.bk[data-mode="single"] .bk-bar { gap: 2px; padding: 4px; }
.bk[data-mode="single"] .bk-find-in { width: 7em; }
.bk[data-mode="single"] .bk-pill { left: 10px; transform: none; font-size: 12px; max-width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .bk { height: calc(100dvh - 104px); min-height: 480px; } .bk-ribbon { display: none; } }

/* opened by the address: the cover is already open when the page paints */
.bk[data-instant] .bk-book, .bk[data-instant] .bk-cover, .bk[data-instant] .bk-shadow { transition: none; }

/* motion tiers: Reduced crossfades, Off swaps at once */
html[data-motion="static"] .bk-book, html[data-motion="static"] .bk-cover, html[data-motion="static"] .bk-shadow, html[data-motion="static"] .bk-paper, html[data-motion="static"] .bk-flap, html[data-motion="static"] .bk-corner { transition: none; }
html[data-motion="lite"] .bk-book, html[data-motion="lite"] .bk-cover, html[data-motion="lite"] .bk-shadow { transition-duration: 320ms; }
@media (prefers-reduced-motion: reduce) { .bk-book, .bk-cover, .bk-shadow, .bk-flap { transition: none; } }