/* akindoflikeness.net — one stylesheet for every page.
   1 face · 2 colours · 3 base · 4 chrome · 5 play buttons · 6 music, home · 7 music, a release
   8 player · 9 detail pages (blow your phase off, transmutation) · 10 smaller screens */

/* 1 · face — Likeness, cut from Redaction 35 by tools/likeness.py */
@font-face {
  font-family: "Likeness";
  src: url("/assets/fonts/Likeness-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2 · colours — every colour on the site. A release page sets --accent to its album's colour;
   the player takes the accent of whatever is playing. */
:root {
  --ground: #090909;
  --raised: #111;
  --rule: #303030;
  --ink: #e5e5e5;
  --dim: #aaa;
  --faint: #555;
  --accent: #a82b43;
  --site-font: "Likeness", "Redaction 35", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}

/* blow your phase off is 1-bit: black, white, and nothing else */
body.onebit {
  --ground: #000;
  --raised: #000;
  --rule: #fff;
  --ink: #fff;
  --dim: rgba(255, 255, 255, .62);
  --faint: rgba(255, 255, 255, .35);
  --accent: #fff;
}

/* 3 · base */
* { box-sizing: border-box }
/* The loading veil's tiny critical styles live inline in base.html. */
:root { color-scheme: dark }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 var(--site-font) }
body.has-player { padding-bottom: 100px }
a { color: inherit; text-decoration: none }
a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent) }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px }
::selection { background: var(--accent); color: var(--ground) }
h1, h2, h3, h4, p, figure, ol, ul, dl { margin: 0 }
h1, h2, h3, h4 { font: inherit }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
img { max-width: 100% }
.fine { color: var(--dim); font-size: 14px }
.eyebrow { color: var(--dim); letter-spacing: .06em }
.skip { position: absolute; top: 8px; left: 40px; transform: translateY(-200%); background: var(--ground); padding: 4px }
.skip:focus { transform: none }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
#main:focus { outline: none }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* 4 · chrome — the sidebar every page shares */
.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; max-width: 1560px; margin: auto; padding: 40px }
.sidebar { align-self: start; position: sticky; top: 40px }
.identity { font-size: 24px; letter-spacing: .04em }
.nav { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 48px }
.nav a[aria-current="page"] { color: var(--accent) }
.nav a[aria-current="page"]::before { content: "> " }
.elsewhere { margin-top: 64px; color: var(--dim) }
.elsewhere a { display: block; width: fit-content }
.elsewhere a[href*="bandcamp.com"] { --accent: #789da3; color: var(--accent) }
.elsewhere a[href*="youtube.com"] { --accent: #ba5968; color: var(--accent) }
.elsewhere a[href*="discord.gg"] { --accent: #8985b5; color: var(--accent) }
.contact { margin-top: 24px; overflow-wrap: anywhere }
.contact:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent) }
.contact-status { display: block; overflow-wrap: anywhere }
.content { min-width: 0 }
.empty h1 { margin-bottom: 12px }
.empty a { text-decoration: underline; text-underline-offset: 4px }

/* 5 · play buttons — a triangle at rest, three moving bars while playing, a pause sign when you
   hover the bars. player.js sets .is-playing / .is-paused. */
.play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 28px; height: 28px; color: var(--dim); vertical-align: middle; transition: color .15s, border-color .15s }
.play svg { display: block; width: 14px; height: 14px; fill: currentColor; flex: none }
.play .i-pause, .play .i-eq, .play .l-pause { display: none }
.play:hover, .play:focus-visible, .play.is-playing, .play.is-paused { color: var(--accent) }
.play.is-playing .i-play, .play.is-playing .l-play { display: none }
.play.is-playing .i-eq { display: flex }
.play.is-playing .l-pause { display: inline }
.play.is-playing:hover .i-eq { display: none }
.play.is-playing:hover .i-pause { display: block }
.i-eq { width: 14px; height: 14px; align-items: flex-end; gap: 2px; flex: none }
.i-eq i { display: block; flex: 1; height: 100%; background: currentColor; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate }
.i-eq i:nth-child(2) { animation-delay: -.4s }
.i-eq i:nth-child(3) { animation-delay: -.8s }
@keyframes eq { from { transform: scaleY(.25) } to { transform: scaleY(1) } }
.play-text { height: 40px; padding: 0 18px 0 14px; border: 1px solid var(--rule); color: var(--ink) }
.play-text:hover, .play-text:focus-visible, .play-text.is-playing, .play-text.is-paused { border-color: var(--accent) }
.play-text svg, .play-text .i-eq { width: 12px; height: 12px }

/* 6 · music, home — the latest release large, everything else in a grid */
.prose { max-width: 34em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.65; overflow-wrap: break-word }
.prose p + p { margin-top: 1.15em }
.home-intro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; max-width: 1040px; margin-bottom: clamp(56px, 7vw, 96px) }
.home-word { grid-column: 1; grid-row: 1; min-width: 0 }
.intro-title { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.2; letter-spacing: .04em; margin-bottom: 36px }
/* Shared image treatment; placement belongs to the containing page. Preserve each image's ratio. */
.content-image { min-width: 0 }
.content-image picture, .content-image img { display: block }
.content-image img { width: 100%; height: auto }
.content-image figcaption { margin-top: 12px; color: var(--dim); font-size: 14px; line-height: 1.5 }
.home-portrait { grid-column: 2; grid-row: 1 }
.home-portrait img { image-rendering: pixelated }
/* A quiet collection beneath the introduction, rendered only when images are supplied. */
.home-gallery { display: flex; flex-wrap: nowrap; gap: clamp(8px, 1.5vw, 24px); align-items: start; max-width: 1040px; padding: 32px 0 16px; border-top: 1px solid var(--rule) }
.home-gallery .content-image { flex: 1 1 0; max-width: 120px }
.home-gallery figcaption { margin-top: 10px; font-size: 11px; overflow-wrap: anywhere }
@media (max-width: 1100px) {
  .home-intro { grid-template-columns: minmax(0, 1fr); gap: 56px }
  .home-portrait { grid-column: 1; grid-row: 1; width: 280px; max-width: 100% }
  .home-word { grid-row: 2 }
}
.music { max-width: 1120px; min-width: 0 }
.latest { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: center; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--rule) }
.latest-cover, .record-cover { display: block }
.latest-cover img, .record-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--raised); transition: filter .25s }
.latest-cover:hover img, .record-cover:hover img { filter: brightness(1.12) }
.latest-word { min-width: 0 }
.latest-title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.05; margin: 8px 0 12px; text-wrap: balance }
.latest-sub { color: var(--dim) }
.latest-about { margin-top: 20px; max-width: 34em; line-height: 1.6 }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px }
.act-link, .get a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint) }
.act-link:hover, .get a:hover { text-decoration-color: var(--accent) }
.records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px }
.record[hidden] { display: none }
.record { min-width: 0 }
.caption { display: flex; align-items: center; gap: 8px; margin-top: 8px }
.caption .play { margin-left: -7px }
.record-title { min-width: 0; overflow-wrap: anywhere }
.caption .year { margin-left: auto; padding-left: 8px; color: var(--dim); flex: none }
.record.is-playing .record-title, .record.is-paused .record-title, .latest.is-playing .latest-title, .latest.is-paused .latest-title { color: var(--accent) }

/* 7 · music, a release — cover and tracks together, followed by prose and downloads */
.release { position: relative; max-width: 1050px; min-width: 0 }
.release::before { content: ""; position: absolute; left: -40px; right: 0; top: -40px; height: 560px; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 25% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%) }
.release-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start }
.release-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--raised) }
.release-word { min-width: 0; padding-top: 6px }
.release-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; text-wrap: balance }
.release-sub { color: var(--dim); margin-top: 10px }
.release-about { margin-top: 48px }
.about-title { font: 24px/1.2 var(--site-font); margin-bottom: 24px }
.prose-quote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.75 }
.prose-quote p:first-child::before { content: "“" }
.prose-quote p:last-child::after { content: "”" }
.artist-notes { margin: 56px 0 64px }
.artist-ai { margin: 32px 0 40px }
.tracks { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--rule) }
.release-word .tracks { margin-top: 28px }
.track { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: pointer }
.track .n { width: 2.4em; color: var(--dim); font-variant-numeric: tabular-nums; flex: none }
.track .t { flex: 1; min-width: 0; overflow-wrap: anywhere }
.track .d { color: var(--dim); font-variant-numeric: tabular-nums; flex: none }
.track:hover .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint) }
.track:hover .play { color: var(--accent) }
.track.is-playing .t, .track.is-paused .t { color: var(--accent) }
.get { display: grid; gap: 6px; max-width: 34em; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule) }
.get h2 { color: var(--dim); margin-bottom: 4px }
.release-nav { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 56px }
.release-nav .fine { display: block }

/* 8 · player — fixed to the bottom, hidden until something plays */
.player { --ground: #090909; --ink: #e5e5e5; --dim: #aaa; --rule: #303030; --faint: #555; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; color: var(--ink); background: var(--ground); border-top: 1px solid var(--rule) }
.player[hidden] { display: none }
.player-bar { position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--accent) }
.player-seek { position: absolute; top: -10px; left: 0; right: 0; height: 20px; cursor: pointer }
.player-inner { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; gap: 24px; align-items: center; max-width: 1560px; margin: auto; padding: 14px 40px }
.player-cover img { display: block; width: 52px; height: 52px; object-fit: cover; background: var(--raised) }
.player-what { min-width: 0; line-height: 1.35 }
.player-what .track, .player-what .album { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.player-what .track { padding: 0; border: 0; cursor: default }
.player-what .album { color: var(--dim) }
.player-note { color: var(--faint) }
.player-ctl { display: flex; gap: 4px }
.player-ctl button, .player-vol button { padding: 6px 10px; line-height: 0 }
.player-ctl button:hover, .player-vol button:hover { color: var(--accent) }
.player-ctl svg, .player-vol svg { width: 16px; height: 16px; fill: currentColor }
#p-play .i-pause, #p-play.is-playing .i-play { display: none }
#p-play.is-playing .i-pause { display: block }
.player-vol { display: flex; align-items: center; gap: 4px }
.player-vol button { color: var(--dim) }
#p-mute .i-mute, #p-mute.is-muted .i-vol { display: none }
#p-mute.is-muted .i-mute { display: block }
/* the slider: a hairline filled to the level in the accent, with a round thumb */
#p-vol { --vol: 100%; -webkit-appearance: none; appearance: none; width: 96px; height: 20px; margin: 0; background: transparent; cursor: pointer }
#p-vol::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--vol), var(--faint) var(--vol)) }
#p-vol::-moz-range-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--vol), var(--faint) var(--vol)) }
#p-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink) }
#p-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink) }
#p-vol:hover::-webkit-slider-thumb, #p-vol:focus-visible::-webkit-slider-thumb { background: var(--accent) }
#p-vol:hover::-moz-range-thumb, #p-vol:focus-visible::-moz-range-thumb { background: var(--accent) }
#p-vol:focus-visible { outline: 1px solid currentColor; outline-offset: 4px }
.player-time { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap }
.player-ctl button:disabled { opacity: .3; cursor: default }

/* 9 · detail pages */
.detail { max-width: 780px; min-width: 0 }
.detail h1 { margin-bottom: 32px }
.bypo-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px }
.bypo-header h1 { margin: 0 }
.bypo-header a { color: var(--dim); text-decoration: underline; text-underline-offset: 4px }

/* blow your phase off: artist notes and demonstration */
.writing-list { list-style: none; padding: 0; margin: 0 }
.writing-entry { border-top: 1px solid var(--rule); padding: 28px 0 32px; max-width: 680px }
.writing-entry h2 { font-size: 28px; line-height: 1.3; margin-bottom: 8px }
.writing-excerpt { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.7; margin-top: 18px; max-width: 34em }
.essay-header { margin-bottom: 36px }
.essay-header .intro-title { margin-bottom: 12px }
.essay-prose { font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.75 }
.essay-back { display: inline-block; margin-top: 48px }
.essay-nav { display: flex; flex-wrap: wrap; gap: 24px 36px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 16px }
.essay-nav .fine { display: block; margin-bottom: 4px }
.essay-prose a, .release-about .prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent) }
.instrument-image { margin-bottom: 48px }
.tool-browser-frame { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 16px; align-items: center }
.tool-card { border: 1px solid var(--rule); padding: clamp(16px, 3vw, 28px) }
.tool-card[hidden] { display: none }
.tool-media { aspect-ratio: 3 / 2; display: grid; place-items: center; background: #000; margin-bottom: 28px }
.tool-media picture { display: contents }
.tool-media img { width: 100%; height: 100%; object-fit: contain; min-height: 0 }
.tool-card h2 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; margin-bottom: 24px }
.tool-actions { display: flex; flex-wrap: wrap; gap: 12px }
.card-subtitle { margin: -12px 0 16px }
.card-description { margin-bottom: 24px; line-height: 1.65 }
.tool-actions a { border: 1px solid var(--rule); padding: 8px 20px }
.tool-actions a:hover, .tool-actions a:focus-visible { border-color: var(--ink) }
.tool-arrow { min-height: 44px; border: 1px solid var(--rule); font-size: 24px }
.tool-arrow:disabled { opacity: .3; cursor: default }
.tool-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.tool-position { text-align: center; margin-top: 18px }
@media (max-width: 600px) {
  .tool-browser-frame { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px }
  .tool-actions a { padding: 8px 12px }
}
.bypo .artist-notes + .artist-notes { margin-top: 48px }
.bypo .artist-notes .intro-title { font-size: 24px; letter-spacing: normal; margin-bottom: 24px }
.bypo .prose-quote { border: 0; padding: 0; color: var(--ink) }
.bypo .artist-ai .prose + .prose-quote { margin-top: 28px }

/* sample pack notes */
.readme { overflow-wrap: break-word; line-height: 1.65 }
.readme a { text-decoration: underline; text-underline-offset: 4px }
.readme p { margin: 0 0 20px }
.readme h1, .readme h2, .readme h3, .readme h4 { margin: 32px 0 16px; font: inherit }
.readme h2 { padding-top: 20px; border-top: 1px solid var(--rule) }
.readme h3, .readme h4 { color: var(--dim) }
.readme ul, .readme ol { padding-left: 24px; margin: 0 0 24px }
.readme li { margin: 8px 0 }
.readme li > p { margin-bottom: 8px }
.readme img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle }
.readme pre { max-width: 100%; overflow: auto; padding: 16px; margin: 20px 0; background: var(--raised); border: 1px solid var(--rule); font: 12px/1.6 var(--mono); white-space: pre; overflow-wrap: normal; tab-size: 4 }
.readme pre code { font: inherit }
.readme code, .readme kbd { font: 13px/1.7 var(--mono) }
.readme blockquote { border-left: 1px solid var(--faint); padding-left: 20px; margin: 24px 0; color: var(--dim) }
.readme .prose-quote { border: 0; padding: 0; margin: 0; color: var(--ink) }
.readme .prose-quote p { margin: 0 }
.readme .prose-quote p + p { margin-top: 1.15em }
.readme .artist-notes .intro-title { font: 24px/1.2 var(--site-font); letter-spacing: normal; margin: 0 0 24px; padding: 0; border: 0 }
.readme .artist-ai { margin: 32px 0 40px }
.readme table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; margin: 24px 0 }
.readme th, .readme td { padding: 10px 16px; border-bottom: 1px solid var(--rule); text-align: left; font-weight: normal; vertical-align: top; min-width: 90px }
.readme td p:last-child { margin-bottom: 0 }
.readme th { color: var(--dim) }
.readme hr { border: 0; border-top: 1px solid var(--rule); margin: 28px 0 }
.readme summary { cursor: pointer; margin: 16px 0 }
.readme [id] { scroll-margin-top: 24px }
.readme .align-center { text-align: center }
.readme .align-right { text-align: right }
.readme .readme-badge { display: inline-block; white-space: nowrap; font-size: 14px }
.readme .image-unavailable { display: block; color: var(--dim); font-size: 14px }
.readme .layout-table { display: table; width: 100%; table-layout: fixed }
.readme .layout-table td { border: 0; padding: 0 16px 0 0 }
.readme .layout-table td:last-child { padding-right: 0 }
.readme .diagram-grid { display: block; overflow: visible }
.readme .diagram-grid tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.readme .diagram-grid tr { display: contents }
.readme .diagram-grid td { display: block; padding: 0; min-width: 0; border: 0 }
.readme .diagram-grid pre { margin: 0; height: 100% }
.readme .download-table { width: 100% }
.readme .download-table td { white-space: nowrap; min-width: 115px }

/* transmutation: the sample pack speaks the site's face; only the naming block stays typewritten */
.pack { --gold: var(--accent) }
.pack .readme code { font: inherit }
.pack-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 40px }
.pack-hero img { display: block; width: 100%; max-width: 220px; height: auto }
.pack-word { min-width: 0 }
.pack-title { font-size: 28px; letter-spacing: .3em; line-height: 1.2 }
.pack-sub { color: var(--dim); letter-spacing: .14em; margin-top: 6px }
.pack-lede { margin-top: 22px; max-width: 34em; line-height: 1.6 }
.pack-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 22px 0 0; font-variant-numeric: tabular-nums }
.pack-facts div { display: flex; gap: 12px; border-top: 1px solid var(--rule); padding-top: 6px }
.pack-facts dt { color: var(--dim); min-width: 4.5em }
.pack-facts dd { margin: 0 }
.pack .readme table.pack-contents, .pack .readme table.pack-modes { display: table; width: 100%; font-variant-numeric: tabular-nums }
.pack .readme .pack-contents td, .pack .readme .pack-contents th { min-width: 0; padding: 10px 12px }
.pack .readme .pack-contents .sig { color: var(--gold); font-size: 18px; line-height: 1; width: 1.4em; padding-right: 0 }
.pack .readme .num { text-align: right; white-space: nowrap }
.pack .readme tfoot td { color: var(--dim); border-bottom: 0 }
.pack .readme .pack-modes td { min-width: 0; padding: 8px 12px }
.pack .readme .pack-modes td:first-child { width: 4em }
.pack .readme .deg { color: var(--dim); white-space: nowrap }
.pack-sign { color: var(--gold); margin-top: 40px; letter-spacing: .04em }
.pack .readme h3 { margin-top: 28px }

/* 10 · smaller screens */
@media (min-width: 1400px) {
  .records { gap: 48px 32px }
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: 210px minmax(0, 1fr); gap: 36px; padding: 28px }
  .sidebar { top: 28px }
  .records { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px }
  .latest { gap: 32px }
}
@media (max-width: 700px) {
  .latest, .release-head, .pack-hero { grid-template-columns: 1fr; gap: 24px }
  .release-cover { max-width: 420px }
  .pack-hero img { max-width: 180px }
  .pack-facts { grid-template-columns: 1fr }
  .pack .readme .pack-contents { display: block; overflow-x: auto }
  .player-inner { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 20px; gap: 14px }
  .player-cover img { width: 44px; height: 44px }
  .player-time, .player-vol { display: none }
  body.has-player { padding-bottom: 84px }
}
@media (max-width: 600px) {
  .layout { display: flex; flex-direction: column; gap: 36px; padding: 20px }
  .sidebar { position: static; display: contents }
  .identity { order: 0 }
  .nav { order: 1; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; margin: 0 }
  .content { order: 2 }
  .elsewhere { order: 3; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0 12px }
  .contact { width: 100%; margin-top: 12px }
  .records { gap: 28px 16px }
  .caption { flex-wrap: wrap }
  .caption .year { margin-left: 0; width: 100%; padding-left: 21px; margin-top: -4px; font-size: 14px }
  .release::before { left: -20px }
  .readme .layout-table, .readme .layout-table tbody, .readme .layout-table tr, .readme .layout-table td { display: block; width: 100% }
  .readme .layout-table td { padding: 0; margin-bottom: 20px }
  .readme .diagram-grid tbody { grid-template-columns: 1fr }
  .readme .download-table td { padding: 10px }
}

/* NZBT follows the one-bit tool pages. */
.nzbt { max-width:900px }
.nzbt .intro-title { margin-bottom:8px }
.nzbt-subtitle { margin-bottom:32px; font-size:clamp(22px, 2vw, 26px); line-height:1.4; color:var(--ink); max-width:32em }
.nzbt-intro { max-width:36em; margin-bottom:28px }
.nzbt-disclaimer { margin:24px 0 40px; max-width:42em }
.nzbt section { padding:28px 0; border-top:1px solid var(--rule) }
.nzbt h2 { font-size:24px; margin-bottom:20px }
.nzbt section>p,.nzbt-notes>p { margin:18px 0; max-width:45em; font-size:16px; line-height:1.65 }
.nzbt label { display:inline-block; margin:18px 28px 18px 0; font-size:16px }
.nzbt input { width:160px; max-width:100%; accent-color:var(--ink); margin-top:12px }
.nzbt button { padding:9px 14px; min-height:44px; border:1px solid var(--rule); margin:6px 8px 6px 0; height:auto; color:var(--ink); display:inline-block }
.nzbt button:disabled { opacity:.4; cursor:default }
.nzbt button:hover:not(:disabled) { background:var(--ink); color:var(--ground) }
.nzbt canvas { display:block; width:100%; height:230px; background:var(--ground); border:1px solid var(--rule); margin-top:22px }
.nzbt .legend,.nzbt .muted { color:var(--dim); font-size:14px }
.nzbt .legend { margin:10px 0 24px }
.nzbt-notes { padding:22px 0; border-top:1px solid var(--rule) }
.nzbt summary { cursor:pointer; font-size:18px; min-height:32px }
.nzbt .math { padding:18px 0; overflow:auto; font:14px/1.8 var(--mono) }
.nzbt table { width:100%; border-collapse:collapse; margin:18px 0; font:14px/1.6 var(--mono) }
.nzbt th,.nzbt td { text-align:left; padding:10px 6px; border-bottom:1px solid var(--rule); overflow-wrap:anywhere }
.nzbt #status { display:inline-block; font-size:14px }
.nzbt input:focus-visible,.nzbt summary:focus-visible { outline:1px solid var(--ink); outline-offset:5px }
@media(max-width:600px){.nzbt canvas{height:170px}.nzbt th,.nzbt td{font-size:12px;padding:8px 3px}.nzbt .math{font-size:13px}}

.nzbt progress { display:block; width:100%; height:8px; accent-color:var(--ink); margin:18px 0 }
.nzbt #listen-status { font:14px/1.6 var(--mono); color:var(--dim); min-height:24px }
.nzbt button[aria-pressed="true"] { background:var(--ink); color:var(--ground) }

.nzbt-links{display:flex;flex-wrap:wrap;gap:16px 28px;margin:24px 0;font-size:16px}.nzbt-links a,.nzbt-research a{text-decoration:underline;text-underline-offset:4px}.nzbt-research{max-width:900px}.nzbt-research h3{font-size:21px;margin:28px 0 14px}.nzbt-source-list,.nzbt-contents{padding-left:24px;line-height:1.8}.nzbt-source-list li,.nzbt-contents li{margin:8px 0}.nzbt-original h2{margin:40px 0 20px;font-size:26px}.nzbt-original h3{margin:28px 0 14px;font-size:22px}.nzbt-original h4{margin:24px 0 12px;font-size:20px}.nzbt-original p,.nzbt-original li{font:17px/1.8 Georgia,serif;max-width:48em;overflow-wrap:anywhere}.nzbt-original p{margin:18px 0}.nzbt-original blockquote{margin:20px 0;padding-left:18px;border-left:1px solid var(--rule)}.nzbt-original img{background:white;filter:invert(1);padding:3px;max-width:100%;height:auto;vertical-align:middle}.nzbt-original ul,.nzbt-original ol{padding-left:24px}.nzbt-table-scroll{overflow:auto;margin:24px 0}.nzbt-original table{min-width:620px;font:15px/1.6 Georgia,serif}.nzbt-original td,.nzbt-original th{padding:12px;vertical-align:top}.nzbt-original strong{font-weight:700}

.nzbt-section-number { display:block; font:16px/1.5 var(--mono); color:var(--dim); margin-bottom:10px }
.nzbt-offering section>p { font-size:18px; max-width:39em }
.nzbt-offering section { padding:32px 0 }