/* Layout: one quiet column under a sticky bar (handle, sections, presence switch).
   Anything that identifies the person sits under a redaction bar until the visitor
   chooses to reveal. Ballpoint blue marks what can be opened. Dark mode is pure black. */
:root {
  --paper: #ffffff;
  --text: #111320;
  --muted: #5b6180;
  --faint: #9096ad;
  --line: #e3e6ef;
  --wash: #f3f5fa;
  --ink: #2540b5;
  --under: #9ea8dc;
  --bar: #111320;
  --online: #1f8a5b;
  --idle: #b7791f;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ipa: "Noto Sans Mono", "IBM Plex Mono", ui-monospace, monospace;
  --bar-h: 3.4rem;
  --beat: .4615s; /* one beat at the tempo in the transport; 130 BPM to start */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000; --text: #f1f2f6; --muted: #8b90a5; --faint: #5d6277; --line: #23252e; --wash: #0c0d12;
    --ink: #8ea0ff; --under: #46508c; --bar: #e3e5ec; --online: #3ccf8e; --idle: #e0a83a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #000000; --text: #f1f2f6; --muted: #8b90a5; --faint: #5d6277; --line: #23252e; --wash: #0c0d12;
  --ink: #8ea0ff; --under: #46508c; --bar: #e3e5ec; --online: #3ccf8e; --idle: #e0a83a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1rem/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline 1px var(--under); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }

.mono, .sub-label, .section-head h2 {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.when { color: var(--muted); white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: none) { .hover-only { display: none; } }
@media (hover: hover) { .touch-only { display: none; } }

.page { max-width: 50rem; margin: 0 auto; padding-inline: clamp(1rem, 5vw, 3rem); padding-bottom: 6rem; }

/* ── Bar ─────────────────────────────────────────────────────────────── */
/* Three columns: handle, sections spread across the middle, presence. The presence pill has a
   fixed width, so a long track name never pushes the sections around. */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.75rem;
  min-height: var(--bar-h);
  background: var(--paper);
  /* The paper runs the full width of the window and up into a phone's status-bar area (a spread
     shadow, clipped at the bar's bottom edge), so nothing scrolling underneath shows around it.
     The hairline stays column-wide. */
  box-shadow: inset 0 -1px 0 var(--line), 0 0 0 100vmax var(--paper);
  clip-path: inset(-100vmax -100vmax 0);
}
.handle, .nav a { padding-block: .35rem; line-height: 1.2; }
.handle { color: var(--text); text-decoration: none; }
.nav { display: flex; justify-content: space-between; gap: .9rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav.clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
.nav a { color: var(--muted); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -1px 0 transparent; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="true"] { color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }

/* Your status, written into the page's type: a dot and a word, in whatever line it sits.
   It's only a working button while you're away or asleep, when it turns the lights off. */
.status {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.status:disabled { color: inherit; opacity: 1; cursor: default; }
.status:not(:disabled) { cursor: pointer; }
.status:not(:disabled) .status-text { border-bottom: 1px dotted var(--faint); }
.status:not(:disabled):hover .status-text { color: var(--ink); border-bottom-color: var(--ink); }
.status-dot { flex-shrink: 0; align-self: center; width: .45rem; height: .45rem; border-radius: 50%; background: var(--online); }
.status[data-state="busy"] .status-dot { background: var(--idle); }
.status[data-state="away"] .status-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--idle); }
.status[data-state="asleep"] .status-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

/* Footer: the handle, your status and the time where you are, on every page. */
.foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.75rem; margin-top: 6rem; color: var(--faint); }
.foot .status { color: var(--muted); }

@media (max-width: 44rem) {
  .bar { column-gap: 1.25rem; }
  .nav { justify-content: flex-start; gap: 1.1rem; }
}

/* Equalizer bars, used by the playlist and the mini-player. */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { display: block; width: 3px; height: 100%; border-radius: 1px; background: var(--ink); transform-origin: bottom; transform: scaleY(.25); }
.eq.flat i { transform: scaleY(.12); background: var(--faint); }
/* One full rise and fall per beat of the transport's tempo. */
.is-playing .eq i { animation: eq calc(var(--beat) / 2) ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: calc(var(--beat) * -.45) !important; }
.eq i:nth-child(3) { animation-delay: calc(var(--beat) * -.8) !important; }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .is-playing .eq i { animation: none; transform: scaleY(.7); }
}

/* ── Redaction ───────────────────────────────────────────────────────── */
/* The overhang is in rem, so bars of any size start at the same point: the name's and the
   pronunciation's under it line up. */
.r {
  padding-inline: .1rem;
  margin-inline: -.1rem;
  border-radius: 0; /* square corners, focused or not */
  background-color: var(--bar);
  color: transparent;
  text-decoration-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  user-select: none;
  transition: background-color .45s ease, color .45s ease, text-decoration-color .45s ease;
  transition-delay: calc(min(var(--i, 0), 14) * 45ms);
}
.revealed .r {
  background-color: transparent;
  color: inherit;
  text-decoration-color: var(--under);
  user-select: text;
}
.revealed .r:hover { text-decoration-color: var(--ink); }
/* Some bars stay put after the reveal. */
.revealed .r.kept { background-color: var(--bar); color: transparent; user-select: none; }
/* Clicking a bar clears them all. On hover it turns ballpoint blue, the mark of what can be opened
   (a background image, so it shows at once instead of waiting out the bar's stagger). */
.page:not(.revealed) .r:not(.kept) { cursor: pointer; }
.page:not(.revealed) .r:not(.kept):is(:hover, :focus-visible) { background-image: linear-gradient(var(--ink), var(--ink)); }
@media (prefers-reduced-motion: reduce) { .r { transition: none; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
/* Two columns: the profile, and the drawing in the page's own ink (a CSS mask, so it follows the
   theme switch). On phones the drawing sits small above the name. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-top: clamp(2.5rem, 9vh, 5rem);
}
.hero-text { min-width: 0; }
.portrait { margin: .2rem 0 0; }
.portrait-art {
  display: block;
  width: 100%;
  aspect-ratio: 1620 / 1920;
  background-color: var(--text);
  -webkit-mask: var(--art, url("avatar.svg")) center / contain no-repeat;
  mask: var(--art, url("avatar.svg")) center / contain no-repeat;
}
/* The caption owns up on hover: the face isn't the person behind the bars. */
.portrait figcaption { display: grid; margin-top: .5rem; color: var(--faint); }
.portrait figcaption > span { grid-area: 1 / 1; transition: opacity .25s ease; }
.portrait figcaption > span + span { opacity: 0; color: var(--ink); }
.portrait:hover figcaption > span:first-child { opacity: 0; }
.portrait:hover figcaption > span + span { opacity: 1; }
@media (max-width: 44rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .portrait { order: -1; width: 7.5rem; margin: 0 0 1.25rem; }
  .portrait figcaption { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .portrait figcaption > span { transition: none; } }
.name { margin: 0; font-size: clamp(2.25rem, 7vw, 3.25rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.pron { margin: .45rem 0 0; color: var(--muted); }
.alias { margin: .4rem 0 0; font-size: 1.0625rem; color: var(--muted); }
.revealed .alias .who { color: var(--text); }

/* Pronunciation in IPA. Its colors come from .r until the reveal; the padding grows its bar to
   the height of the alias bar beside it, top and bottom edges level. */
.say { font-family: var(--font-ipa); font-size: .8125rem; vertical-align: .05em; padding-block: .18em .125em; }

.meta { margin: 1.35rem 0 0; color: var(--muted); }
/* "UTC+4" turns into the local time on hover or focus. */
.tz { display: inline-grid; cursor: help; border-bottom: 1px dotted var(--faint); }
.tz > span { grid-area: 1 / 1; }
.tz-b { visibility: hidden; color: var(--ink); }
.tz:hover .tz-a, .tz:focus-visible .tz-a { visibility: hidden; }
.tz:hover .tz-b, .tz:focus-visible .tz-b { visibility: visible; }
.bio { margin: .4rem 0 0; max-width: 35rem; text-wrap: pretty; }


.now { display: flex; gap: .9rem; align-items: baseline; margin: 2rem 0 0; max-width: 38rem; font-size: .9375rem; }
.now-label { flex-shrink: 0; color: var(--muted); }

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding-top: 3.75rem; scroll-margin-top: calc(var(--bar-h) + .5rem); }
.single .section { padding-top: 2.5rem; }
.section-head { display: flex; align-items: baseline; gap: .55rem; margin-bottom: 1rem; }
.section-head h2 { margin: 0; color: var(--text); }
.count { color: var(--faint); }

.subs { display: grid; gap: 1.1rem; }
.sub { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.5rem; align-items: baseline; }
.sub-label { margin: 0; color: var(--muted); }
.sub-body { min-width: 0; }
.sub.entries .sub-body { display: grid; gap: .55rem; }
@media (max-width: 36rem) { .sub { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; } }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-top: 1px solid var(--line); }
.list > li:last-child { border-bottom: 1px solid var(--line); }
.more { margin: .9rem 0 0; }

/* Underlined words that open a note. */
.u {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--under);
  text-decoration-thickness: max(1px, .07em);
  text-underline-offset: .17em;
}
.u:hover { text-decoration-color: var(--ink); }
.u[aria-expanded="true"] { color: var(--ink); text-decoration-color: var(--ink); }
.note { margin: .5rem 0 .2rem; max-width: 34rem; font-size: .875rem; line-height: 1.55; color: var(--text); }

/* Writing */
.post-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: .85rem;
  text-decoration: none;
}
.post-row time, .post-min { color: var(--muted); }
.post-title { font-weight: 500; }
.post-row:hover .post-title { color: var(--ink); }
.post-row:hover .post-min::after { content: " \2192"; }
@media (max-width: 30rem) { .post-row { grid-template-columns: minmax(0, 1fr) auto; } .post-row time { grid-column: 1 / -1; } }

/* Projects */
.project { padding-block: .95rem; }
.project-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.project-name { font-size: 1.0625rem; font-weight: 600; }
.project-desc { margin: .3rem 0 0; max-width: 36rem; font-size: .9375rem; color: var(--muted); }
.project-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .55rem 0 0; color: var(--faint); }
.project-meta a { color: var(--muted); }

/* Studio */
.song { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; }
.play {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.play:hover { background: var(--text); color: var(--paper); }
.play .icon { width: .7rem; height: .8rem; margin-left: .15rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.is-playing .play .icon { margin-left: 0; clip-path: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.song-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; }
.song-title { font-weight: 600; }
.song-meta { color: var(--muted); }
.wave { height: 32px; margin-top: .45rem; cursor: pointer; }
.wave svg { display: block; width: 100%; height: 32px; }
.wave-base rect { fill: var(--faint); opacity: .55; }
.wave-played rect { fill: var(--ink); }
.wave:hover .wave-base rect { opacity: .8; }
.song-note { margin: .5rem 0 0; font-size: .875rem; color: var(--muted); }

/* Playlist */
/* Each row plays a 30-second preview: the number turns into a play/pause mark, and a thin
   line along the bottom shows how far it has played. */
.track { position: relative; display: flex; align-items: center; gap: 1rem; }
.track-btn {
  flex: 1;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  padding: .75rem 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.track-btn[disabled] { cursor: default; }
.n { color: var(--faint); }
.track-lead { display: inline-grid; align-items: center; justify-items: start; }
.track-lead > span { grid-area: 1 / 1; }
.track-icon { visibility: hidden; width: .55rem; height: .65rem; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.track-btn:not([disabled]):hover .n, .track-btn:focus-visible .n, .track.is-playing .n { visibility: hidden; }
.track-btn:not([disabled]):hover .track-icon, .track-btn:focus-visible .track-icon, .track.is-playing .track-icon { visibility: visible; }
.track.is-playing .track-icon { clip-path: none; background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%); }
.track-btn:not([disabled]):hover .track-title { color: var(--ink); }
.track-progress { position: absolute; z-index: 1; left: 0; bottom: -1px; width: var(--p, 0%); height: 2px; background: var(--ink); pointer-events: none; }
.track-text { display: grid; min-width: 0; }
.track-title { font-weight: 500; }
.track-artist { font-size: .875rem; color: var(--muted); }
.track .eq { opacity: 0; transition: opacity .2s; }
.track.is-playing .eq { opacity: 1; }
.track.is-playing .track-title { color: var(--ink); }
.listen { color: var(--muted); }
.listen::after { content: " \2197"; }
.hint { margin: .8rem 0 0; color: var(--faint); }

/* Skills, work, links */
.words { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6em; margin: 0; padding: 0; list-style: none; }
.words-l { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.words-m { font-size: 1.0625rem; font-weight: 500; }
.words-s { gap: .1rem .75em; font-size: .9375rem; color: var(--muted); }
.speaks { gap: .1rem 1.25em; }
.entry { margin: 0; }
.copy-text { font-family: var(--font-mono); font-size: .875rem; }
.copy { margin-left: .5rem; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; vertical-align: .1em; }

/* Hovering a skill lights up the roles and projects that used it, and the other way round. */
[data-skill], .job, .project { transition: opacity .2s ease, color .2s ease; }
.linking [data-skill]:not(.lit), .linking .job:not(.lit), .linking .project:not(.lit) { opacity: .25; }
.linking [data-skill].lit { color: var(--ink); }

/* ── Empty states ────────────────────────────────────────────────────── */
.empty { margin: 0; color: var(--muted); }
.empty-line { margin: 0; color: var(--text); }
.empty-sub { margin: .2rem 0 0; font-size: .875rem; color: var(--muted); }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: .2em; vertical-align: -.15em; background: var(--ink); animation: caret calc(var(--beat) * 2) steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.empty-git { display: grid; gap: .2rem; padding: .9rem 1rem; border-radius: 6px; background: var(--wash); text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.empty-git p { margin: 0; }
.prompt { color: var(--ink); }

/* An empty FL Studio pattern: 16 steps, and on hover a playhead that runs one bar at the current tempo. */
.empty-studio { display: grid; gap: .2rem; }
.steps { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; max-width: 26rem; margin-bottom: .8rem; }
.steps span { height: 1.4rem; border-radius: 3px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.steps span:nth-child(8n + 5), .steps span:nth-child(8n + 6), .steps span:nth-child(8n + 7), .steps span:nth-child(8n + 8) { background: var(--line); }
.steps::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; border-radius: 1px; background: var(--ink); opacity: 0; }
.empty-studio:hover .steps::after { opacity: 1; animation: playhead calc(var(--beat) * 4) linear infinite; }
@keyframes playhead { to { left: 100%; } }

.empty-tracks { display: flex; align-items: center; gap: .7rem; }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .empty-studio:hover .steps::after { animation: none; opacity: 0; }
}

/* ── Single pages ────────────────────────────────────────────────────── */
.back { margin: 2.5rem 0 0; }
.back a { color: var(--muted); text-decoration: none; }
.back a::before { content: "\2190  "; }
.back a:hover { color: var(--text); }
.post-h { margin: 1.4rem 0 0; font-size: clamp(1.75rem, 5vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.post-meta { margin: .7rem 0 0; color: var(--muted); }
.post-summary { margin: 1.4rem 0 0; font-size: 1.125rem; color: var(--muted); max-width: 36rem; }
.prose { margin-top: 2rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote { margin-bottom: 0; }
.prose h2 { margin-top: 2.2em; font-size: 1.3rem; letter-spacing: -.01em; }
.prose h3 { margin-top: 1.8em; font-size: 1.1rem; }
.prose code { font-family: var(--font-mono); font-size: .88em; padding: .1em .3em; border-radius: 4px; background: var(--wash); }
.prose pre { overflow-x: auto; padding: 1rem; border-radius: 6px; background: var(--wash); font-size: .875rem; line-height: 1.55; }
.prose pre code { padding: 0; background: none; }
.prose blockquote { margin-left: 0; padding-left: 1rem; color: var(--muted); box-shadow: inset 2px 0 0 var(--line); }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }

.lost { padding-top: 5rem; }
.lost-code { margin: 0; color: var(--muted); }
.lost-h { margin: .6rem 0 1rem; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }

/* ── Away: the lights go out and the pointer becomes a flashlight ───── */
.away {
  --x: -9999px;
  --y: -9999px;
  --r: 140px;
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent 55%, #000 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent 55%, #000 100%);
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.is-away .away { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.away-msg { text-align: center; }
.away-msg p { margin: 0; }
.away-label { color: #8b90a5; }
.away-line { margin-top: .4rem !important; font-size: 1.375rem; color: #f1f2f6; }
.away-hint { margin-top: .6rem !important; color: #5d6277; }
.away-note { margin-top: .5rem !important; color: #8b90a5; }
.lights-on {
  margin-top: 1.4rem;
  padding: .45rem .9rem;
  border: 1px solid #2b2e3a;
  border-radius: 999px;
  background: none;
  color: #f1f2f6;
  cursor: pointer;
  pointer-events: auto;
}
.lights-on:hover { border-color: #8b90a5; }
.is-away .bar { background: #000000; box-shadow: inset 0 -1px 0 #1c1e26, 0 0 0 100vmax #000000; }
.is-away .bar .handle, .is-away .nav a:hover, .is-away .nav a[aria-current="true"] { color: #f1f2f6; border-bottom-color: #f1f2f6; }
.is-away .nav a { color: #8b90a5; }
@media (prefers-reduced-motion: reduce) { .away, .is-away .away { transition: none; } }

/* ── Dock, bottom right: the mini-player (while something is loaded) above the transport ── */
.dock {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  max-width: calc(100vw - 2rem);
}
.now-playing {
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: min(21rem, 100%);
  padding: .2rem .2rem .2rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.now-playing[hidden] { display: none; }
.now-playing .eq { flex-shrink: 0; }
.now-playing:not(.is-playing) .eq i { background: var(--faint); }
.np-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.np-toggle {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.np-toggle:hover { background: var(--wash); }
.np-toggle .icon { width: .55rem; height: .65rem; margin-left: .12rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.now-playing.is-playing .np-toggle .icon { margin-left: 0; clip-path: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }

/* ── Transport: a tempo, and a play button that scrolls the page at it ── */
.transport {
  display: flex;
  align-items: center;
  gap: .1rem;
  padding: .2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
}
.transport button {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: .875rem;
  cursor: pointer;
}
.transport button:hover { background: var(--wash); color: var(--text); }
.t-play .icon { width: .55rem; height: .65rem; margin-left: .12rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.t-play[aria-pressed="true"] { color: var(--ink); }
.t-play[aria-pressed="true"] .icon { margin-left: 0; clip-path: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.t-bpm { padding: .2rem .3rem; border-radius: 4px; white-space: nowrap; cursor: ns-resize; user-select: none; touch-action: none; }
.t-bpm:hover { color: var(--text); }
.t-bpm b { display: inline-block; min-width: 3ch; font-weight: 400; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.t-beat { width: .4rem; height: .4rem; margin: 0 .55rem 0 .25rem; border-radius: 50%; background: var(--line); }
.tempo-on .t-beat { animation: beat var(--beat) linear infinite; }
@keyframes beat { 0%, 18% { background: var(--ink); transform: scale(1.4); } 19%, 100% { background: var(--line); transform: none; } }
/* Theme: half-filled for "match the system", hollow for light, filled for dark. */
.t-sep { width: 1px; height: 1rem; margin-inline: .1rem .15rem; background: var(--line); }
/* Puts the bars back; only there while the names are revealed. */
.t-hide[hidden] { display: none; }
.t-hide .icon { width: .85rem; height: .4rem; background: currentColor; }
.t-theme .icon { width: .75rem; height: .75rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.t-theme[data-mode="system"] .icon { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.t-theme[data-mode="dark"] .icon { background: currentColor; }
.is-away .transport, .is-away .now-playing { border-color: #2b2e3a; background: #000000; color: #8b90a5; }
.is-away .np-text, .is-away .np-toggle { color: #f1f2f6; }
.is-away .t-bpm b { color: #f1f2f6; }
@media (prefers-reduced-motion: reduce) { .tempo-on .t-beat { animation: none; background: var(--ink); } }