/* Musebot Agents: one stylesheet, no build step.
   Design tokens first (colour for the light and the dark theme, type, space, shape), then layout, then the parts of the page. */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-hero: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --measure: 62ch;
}

/* Dark theme: the default for everyone. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg-glow: rgba(109, 141, 255, .10);
  --surface: #121722;
  --surface-2: #181e2b;
  --surface-3: #212939;
  --ink: #e9edf5;
  --ink-2: #c3cada;
  --muted: #8f9bb3;
  --line: #232b3b;
  --line-strong: #354058;
  --primary: #6f90ff;
  --primary-hover: #8aa5ff;
  --primary-ink: #0b0e14;
  --primary-soft: #1c2745;
  --focus: #8aa5ff;
  --band: rgba(111, 144, 255, .12);
  --band-strong: rgba(111, 144, 255, .34);
  --ok: #4ade80;
  --warn: #f2b84b;
  --danger: #ff6b6b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f9bb3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Light theme: only when the visitor chooses it with the toggle. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f4f0;
  --bg-glow: rgba(47, 91, 234, .07);
  --surface: #ffffff;
  --surface-2: #f2f0ea;
  --surface-3: #e9e6de;
  --ink: #141925;
  --ink-2: #394150;
  --muted: #667085;
  --line: #e3e0d7;
  --line-strong: #cbc6b8;
  --primary: #2a56e6;
  --primary-hover: #1f46cc;
  --primary-ink: #ffffff;
  --primary-soft: #e8edff;
  --focus: #2a56e6;
  --band: rgba(42, 86, 230, .09);
  --band-strong: rgba(42, 86, 230, .30);
  --ok: #178a4a;
  --warn: #b7791f;
  --danger: #cf3030;
  --shadow: 0 1px 2px rgba(20, 25, 37, .06), 0 8px 24px -12px rgba(20, 25, 37, .16);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Dark theme: chosen with the toggle, or followed from the system until a choice is made. */

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(60rem 28rem at 50% -8rem, var(--bg-glow), transparent 70%), var(--bg);
  background-attachment: fixed;
  color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55;
  font-feature-settings: "cv11", "ss03", "tnum" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }
::selection { background: var(--band-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
output, .readout, .position, .where, .field-value { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: var(--space-3); top: -4rem; z-index: 20; padding: var(--space-2) var(--space-3);
  background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--space-3); }

/* ---- the top bar: brand, status, transport ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4);
  max-width: 72rem; margin: 0 auto; padding: var(--space-3) var(--space-4);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.topbar-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.navlink { white-space: nowrap; padding: .3rem .6rem; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); }
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.topbar-inner.simple { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.btn { text-decoration: none; }
.brand img { display: block; }

.status {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
}
.status::before {
  content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent);
}
.status[data-state="ready"]::before { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.status[data-state="busy"]::before { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
.status[data-state="error"]::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.status[data-state="live"]::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 6%, transparent); } }

.transport { display: flex; gap: var(--space-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0 var(--space-4); font: inherit; font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); box-shadow: 0 6px 18px -8px var(--primary); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn .icon-sun { display: none; }
.icon-btn[aria-pressed="true"] .icon-sun { display: block; }
.icon-btn[aria-pressed="true"] .icon-moon { display: none; }

/* ---- page ---- */
main { max-width: 72rem; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-5); }

.hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; margin-bottom: var(--space-6); }
.hero h1 { margin: 0; font-size: var(--text-hero); font-weight: 800; letter-spacing: -.035em; }
.hero h1 .by { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lead { margin: var(--space-4) 0 0; max-width: var(--measure); font-size: var(--text-lg); line-height: 1.55; color: var(--ink-2); }
.research { margin: var(--space-3) 0 0; max-width: var(--measure); color: var(--muted); }
.paper {
  margin: 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2);
}
.paper .label { display: block; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.paper a { font-weight: 600; }

/* ---- the controls ---- */
.console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4); margin-bottom: var(--space-3); }
.group {
  margin: 0; min-width: 0; padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.group legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fields { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); align-content: start; }
.field { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.band .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
.field-label { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.field-value { font-weight: 500; color: var(--muted); }
select, input[type=number] {
  width: 100%; min-height: 2.5rem; padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.25rem; text-overflow: ellipsis;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem;
  cursor: pointer;
}
select:hover:not(:disabled), input[type=number]:hover:not(:disabled) { border-color: var(--line-strong); }
select:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
input[type=range] { width: 100%; height: 2.5rem; margin: 0; accent-color: var(--primary); cursor: pointer; }

.note { margin: var(--space-2) var(--space-1) var(--space-1); max-width: 60rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted); }
.note[hidden] { display: none; }

/* ---- the band ---- */
.stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.card {
  --level: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art art" "name role" "readout readout" "level level" "mix mix";
  align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow);
  transition: opacity .25s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card .art { grid-area: art; }
.card .name { grid-area: name; }
.card .role { grid-area: role; }
.card .readout { grid-area: readout; }
.card .level { grid-area: level; }
.card .mix { grid-area: mix; }
.card.absent { opacity: .28; filter: grayscale(1); pointer-events: none; }
.card.playing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px -14px var(--accent); transform: translateY(-2px); }
.card .art {
  position: relative; display: grid; place-items: center; height: 11.5rem; border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface-2)), var(--surface-2));
}
.card .name { margin: 0; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.role {
  margin: 0; padding: .2rem .7rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.role.leading { background: var(--accent); color: #fff; }
.role.accompanying { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.role.soft { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--muted); }
.role.ending { background: var(--ink); color: var(--bg); }
.role.out { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
.readout { min-height: 1.35rem; margin: 0; font: 600 var(--text-sm) var(--font-mono); color: var(--ink-2); }
.level {
  height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
  mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
}
.level i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }
.mix { display: grid; grid-template-columns: auto minmax(0, 1fr) 2.8rem; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.mix input[type=range] { height: 1.75rem; accent-color: var(--accent); }
.mix button {
  min-height: 1.9rem; padding: 0 var(--space-3); font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mix button:hover:not(:disabled) { background: var(--surface-3); }
.mix button:disabled { opacity: .4; cursor: not-allowed; }
.mix output { font-size: var(--text-xs); text-align: right; color: var(--muted); }
.card.muted .mix button { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---- the robots: each part is a class that moves only while the musician plays, speaks or listens ---- */
.robot { width: 10.5rem; height: 10.5rem; overflow: visible; transition: filter .2s, opacity .25s; }
.robot .shell { fill: #dfe5ec; stroke: #53606f; stroke-width: 2.5; }
.robot .shell.body { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 55%, #000); }
.robot .visor { fill: #1c2633; }
.robot .eye { fill: #7ff3ff; transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; }
.robot .grille { stroke: #7f8b99; stroke-width: 2; stroke-linecap: round; }
.robot .ear { fill: #9aa6b4; }
.robot .antenna { stroke: #53606f; stroke-width: 3; }
.robot .bulb { fill: #8a97a6; stroke: #53606f; stroke-width: 2; }
.robot .chest { fill: #1c2633; stroke: #e9f6ff; stroke-width: 2; }
.robot .belt { fill: color-mix(in srgb, var(--accent) 55%, #000); }
.robot .limb { fill: none; stroke: #6b7886; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.robot .limb-fill { fill: #6b7886; }
.robot .joint { fill: #dfe5ec; }
.robot .hand { fill: #dfe5ec; stroke: #53606f; stroke-width: 2; }
.robot .bob { transform-box: fill-box; transform-origin: 50% 100%; }

/* instruments */
.robot .tube, .robot .mouthpiece { fill: none; stroke: #8a5a00; stroke-width: 11; stroke-linecap: round; }
.robot .mouthpiece { stroke: #2a2a2a; stroke-width: 6; }
.robot .bell { fill: #f0bd3a; stroke: #8a5a00; stroke-width: 3; }
.robot .key { fill: #fde7a3; stroke: #8a5a00; stroke-width: 2; }
.robot .prop.sax .tube { stroke: #f0bd3a; paint-order: stroke; filter: drop-shadow(0 0 0 #8a5a00); }
.robot .case { fill: #2b2f36; }
.robot .white { fill: #fbfbf8; stroke: #8b8f96; stroke-width: 1.5; }
.robot .black { fill: #20232a; }
.robot .neck { fill: #3b2410; }
.robot .scroll { fill: none; stroke: #3b2410; stroke-width: 6; stroke-linecap: round; }
.robot .belly { fill: #b4672a; stroke: #5a2f0c; stroke-width: 3; }
.robot .hole { fill: #3b2410; }
.robot .string { stroke: #f3e6c7; stroke-width: 1.4; transform-box: fill-box; transform-origin: 50% 0; }
.robot .stand { stroke: #6b7886; stroke-width: 3; }
.robot .cymbal { fill: #e8c14b; stroke: #8a6d12; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.robot .drum { fill: #f2f2ee; stroke: #53606f; stroke-width: 2.5; }
.robot .drum-side { fill: var(--accent); stroke: #53606f; stroke-width: 2; }
.robot .drum.kick { fill: var(--accent); }
.robot .stick { stroke: #e9d3a3; stroke-width: 3.5; stroke-linecap: round; }

/* waiting: breathing, blinking */
.card .robot .bob { animation: breathe 3.4s ease-in-out infinite; }
.card.muted .robot { opacity: .4; filter: grayscale(1); }
.card.muted .robot .bob, .card.muted .robot .eye { animation: none; }

/* playing: the whole robot sways with the music, and the arms and instrument move */
.card.playing .robot { filter: drop-shadow(0 0 calc(var(--level) * 10px) var(--accent)); }
.card.playing .robot .bob { animation: sway .9s ease-in-out infinite; }
.card.playing .robot .eye { animation: none; fill: #b8ffd0; }
.card.playing .robot .chest { fill: var(--accent); }
.card.playing .robot .arm.left { animation: play-left .45s ease-in-out infinite alternate; }
.card.playing .robot .arm.right { animation: play-right .45s ease-in-out .22s infinite alternate; }
.card.playing .robot .key { animation: key .45s steps(2) infinite; }
.card.playing .robot .key.k2 { animation-delay: .15s; }
.card.playing .robot .key.k3 { animation-delay: .3s; }
.card.playing .robot .white:nth-child(odd) { animation: press .45s steps(2) infinite; }
.card.playing .robot .white:nth-child(even) { animation: press .45s steps(2) .22s infinite; }
.card.playing .robot .string { animation: pluck .12s linear infinite alternate; }
.card.playing .robot .prop.sax { animation: sax-sway 1.8s ease-in-out infinite; transform-origin: 128px 74px; }
.card.playing .robot.drums .arm.left { animation: hit-left .22s ease-in infinite alternate; }
.card.playing .robot.drums .arm.right { animation: hit-right .22s ease-in .11s infinite alternate; }
.card.playing .robot .cymbal { animation: shimmer .25s linear infinite alternate; }
.card.playing .robot.piano .arm.left, .card.playing .robot.piano .arm.right { animation-duration: .6s; }
.card.playing .robot.bass .arm.left { animation: none; }
.card.playing .robot.bass .arm.right { animation: pluck-arm .5s ease-in-out infinite alternate; }

/* talking: the antenna bulb blinks and a speech bubble appears; listening: head tilts toward the speaker, eyes widen */
.card.talking .robot .bulb { animation: signal .35s steps(2) infinite; }
.card.talking .robot .mouth { animation: chatter .25s steps(2) infinite; transform-box: fill-box; transform-origin: center; }
.card.listening .robot .head { animation: tilt .5s ease-out forwards; transform-origin: 100px 88px; }
.card.listening .robot .eye { animation: none; transform: scale(1.25); fill: #ffe98a; }
.card.listening .robot .ear { fill: #ffe98a; }
.bubble {
  position: absolute; z-index: 1; top: -.15rem; left: 50%; max-width: 12rem; transform: translateX(-50%); margin: 0;
  padding: .25rem .6rem; border-radius: 12px; background: #fff; color: #1b1f24; font-size: .8rem; font-weight: 700;
  line-height: 1.2; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); border: 2px solid var(--accent);
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -.55rem; width: .6rem; height: .6rem; transform: translateX(-50%) rotate(45deg);
  background: #fff; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}
.bubble[hidden] { display: none; }

@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.015); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.8deg) translateY(0); } 50% { transform: rotate(1.8deg) translateY(-2px); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes play-left { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes play-right { from { transform: rotate(4deg); } to { transform: rotate(-5deg); } }
@keyframes hit-left { from { transform: rotate(-16deg); } to { transform: rotate(8deg); } }
@keyframes hit-right { from { transform: rotate(16deg); } to { transform: rotate(-8deg); } }
@keyframes pluck-arm { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes key { 0% { fill: #fde7a3; } 100% { fill: #ffffff; } }
@keyframes press { 0% { fill: #fbfbf8; } 100% { fill: color-mix(in srgb, var(--accent) 45%, #fff); } }
@keyframes pluck { from { transform: scaleX(1); } to { transform: scaleX(1.0) translateX(1.3px); } }
@keyframes shimmer { from { transform: scale(1); } to { transform: scale(1.06, .8); } }
@keyframes sax-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes signal { 0% { fill: #8a97a6; } 100% { fill: #ffd447; } }
@keyframes chatter { from { transform: scaleY(1); } to { transform: scaleY(1.5); } }
@keyframes tilt { to { transform: rotate(7deg); } }

@media (prefers-reduced-motion: reduce) {
  .card .robot *, .card.playing .robot *, .card.talking .robot *, .card.listening .robot * { animation: none !important; }
}

/* ---- the chord chart, laid out like a lead sheet ---- */
.chart-panel { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
.chart-head h2 { margin: 0; font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.03em; }
.position { font-size: var(--text-lg); font-weight: 700; color: var(--primary); }
.chart { --columns: 4; display: grid; gap: var(--space-2); }
.section-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--radius-lg); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.section-row .badge {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  font-size: var(--text-xl); font-weight: 800; color: var(--ink-2); border: 2px solid var(--line-strong); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.section-row.active { background: var(--band); box-shadow: inset 3px 0 0 var(--primary); }
.section-row.active .badge { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.bars { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); }
.bar { --progress: 0; position: relative; padding: .7rem .4rem; text-align: center; border-left: 2px solid var(--line-strong); overflow: hidden; }
.bars .bar:last-child { border-right: 2px solid transparent; }
.bar .chord { position: relative; font-size: clamp(1.1rem, .8rem + 1.2vw, 1.65rem); font-weight: 750; letter-spacing: -.02em; transition: color .15s var(--ease); }
.bar .fill { position: absolute; inset: 0; width: calc(var(--progress) * 100%); background: var(--band-strong); opacity: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.bar.current .fill { opacity: 1; }
.bar.current .chord { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.caption {
  margin: var(--space-4) 0 var(--space-2); min-height: 3.6rem; padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg); line-height: 1.5; color: var(--ink); background: var(--surface-2); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.caption:empty { visibility: hidden; }
.where { margin: 0; min-height: 1.4rem; font: 600 var(--text-sm) var(--font-mono); color: var(--muted); }

/* ---- the conversation and the credits ---- */
.log, .credits { margin-top: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.log summary, .credits summary { padding: var(--space-3) var(--space-4); font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); }
.log summary::-webkit-details-marker, .credits summary::-webkit-details-marker { display: none; }
.log summary::before, .credits summary::before {
  content: ''; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s var(--ease);
}
.log[open] summary::before, .credits[open] summary::before { transform: rotate(45deg); }
.log > :not(summary), .credits > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
.hint { margin-top: 0; margin-bottom: var(--space-3); max-width: var(--measure); font-size: var(--text-sm); color: var(--muted); }
.credits ul { margin-top: 0; margin-bottom: var(--space-4); padding-left: 1.2rem; font-size: var(--text-sm); line-height: 1.6; color: var(--ink-2); }
.conversation { margin-bottom: var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-1); max-height: 28rem; overflow-y: auto; }
.conversation li {
  --perf: var(--muted);
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border-left: 3px solid var(--perf); border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.conversation .who { font-weight: 600; }
.conversation .performative {
  display: inline-block; margin-top: 2px; padding: 0 .45rem; border-radius: 999px; font: 600 .7rem var(--font-mono); letter-spacing: .02em;
  color: var(--perf); background: color-mix(in srgb, var(--perf) 14%, transparent);
}
.conversation li[data-performative="CFP"] { --perf: #d98e04; }
.conversation li[data-performative="PROPOSE"] { --perf: #3b82f6; }
.conversation li[data-performative="ACCEPT-PROPOSAL"] { --perf: #16a34a; }
.conversation li[data-performative="REJECT-PROPOSAL"], .conversation li[data-performative="REFUSE"] { --perf: #dc2626; }
.conversation li[data-performative="REQUEST"] { --perf: #8b5cf6; }
.conversation li[data-performative="QUERY-REF"] { --perf: #0ea5e9; }
.conversation li[data-part="composer"], .conversation li[data-part="synchronizer"], .conversation li[data-part="assistant"] { margin-left: var(--space-4); }

.footer { max-width: 72rem; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); font-size: var(--text-sm); color: var(--muted); }
.footer p { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* ---- the About page ---- */
.about { max-width: 64rem; }
.profile { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.avatar {
  flex: none; display: block; width: 9.5rem; height: 9.5rem; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-xl); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55);
}
.profile h1 { margin: 0; font-size: var(--text-hero); font-weight: 800; letter-spacing: -.035em; }
.role-line { margin: var(--space-2) 0 0; font-size: var(--text-xl); font-weight: 650; letter-spacing: -.01em; }
.profile-sub { margin: var(--space-1) 0 0; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.facts svg { color: var(--muted); }

.about-grid { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.toc { position: sticky; top: 5.5rem; font-size: var(--text-sm); }
.toc-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.toc a { display: block; padding: .3rem 0 .3rem var(--space-3); margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; transition: color .15s var(--ease), border-color .15s var(--ease); }
.toc a:hover { color: var(--ink); border-left-color: var(--primary); }

.about-content { display: grid; gap: var(--space-4); min-width: 0; }
.about-video { display: block; width: 100%; height: auto; border-radius: var(--radius, 12px); background: #000; }
.block { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.block h2 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.03em; }
.block h3 { margin: 0; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.prose { max-width: 66ch; margin: 0 0 var(--space-3); color: var(--ink-2); }
.prose:last-child { margin-bottom: 0; }
.subhead { margin: var(--space-5) 0 var(--space-2) !important; }
.points { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2); color: var(--ink-2); }
.points strong { color: var(--ink); }

/* the career path at Salling Group */
.steps { position: relative; margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.steps::before { content: ''; position: absolute; left: .5rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--line-strong); }
.step { position: relative; padding-left: var(--space-6); }
.step::before { content: ''; position: absolute; left: 0; top: .35rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.step.current::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); }
.step-date { display: inline-block; margin-bottom: 2px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.step p { margin: var(--space-1) 0 0; max-width: 62ch; color: var(--ink-2); }

.skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.skill-group h3 { margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chips li { padding: .3rem .8rem; font-size: var(--text-sm); font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }

.timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.tl-item { padding-left: var(--space-4); border-left: 2px solid var(--line-strong); }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.tl-date { font-size: var(--text-sm); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-org { margin: 2px 0 0; font-weight: 600; color: var(--ink-2); }
.tl-item p:not(.tl-org) { margin: var(--space-2) 0 0; max-width: 62ch; color: var(--ink-2); }

.publication .pub-meta { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.publication h3 { font-size: var(--text-xl); line-height: 1.25; }
.publication .pub-authors { margin: var(--space-2) 0; font-size: var(--text-sm); color: var(--muted); }
.publication p { max-width: 66ch; color: var(--ink-2); }

@media (max-width: 62rem) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 40rem) {
  .profile { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
  .avatar { width: 7rem; height: 7rem; }
  .block { padding: var(--space-4); }
  .skill-groups { grid-template-columns: minmax(0, 1fr); }
}

/* On paper: the content only, in the light theme's colours. */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f4f4f4; --ink: #111; --ink-2: #222; --muted: #555; --line: #ccc; --line-strong: #999; --shadow: none; }
  .topbar, .toc, .skip, .footer .navlink, .btn { display: none !important; }
  body { background: #fff; }
  .block, .profile { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  a { color: inherit; text-decoration: none; }
}

/* ---- smaller screens ---- */
@media (max-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .console { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .status { grid-column: 1 / -1; grid-row: 2; }
  /* The band page's top bar on a phone: the page's own heading names it, so the logo goes; and the status line only appears
     when something is wrong. It is still read out by screen readers, which follow it as it changes. */
  .topbar-inner:not(.simple) .brand { display: none; }
  .topbar-inner:not(.simple) .status:not([data-state="error"]) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .brand span { display: none; }
  .navlink-wide { display: none; } /* no room on a phone: the footer links to it too */
  .topbar-left { grid-column: 1; }
  .topbar-inner.simple { grid-template-columns: minmax(0, 1fr) auto auto; }
  .topbar-inner.simple .spacer { display: none; }
  .transport { grid-column: 2; grid-row: 1; }
  .icon-btn { grid-column: 3; grid-row: 1; }
  main { padding-top: var(--space-5); }
  .fields, .band .fields { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .chart-panel { padding: var(--space-4); }
  .section-row { grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-2); }
  .section-row .badge { width: 2.3rem; height: 2.3rem; font-size: var(--text-base); }
  .conversation li { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}