:root {
  color-scheme: dark;
  --bg: #09090b;
  --surface: rgba(22, 22, 25, 0.82);
  --surface-solid: #161619;
  --surface-raised: #1d1d21;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f6f6f2;
  --muted: #96969e;
  --lime: #d9ff43;
  --violet: #a58aff;
  --orange: #ff8d4d;
  --cyan: #62d9ff;
  --pink: #ff7eb6;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "Syne", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 48% -10%, rgba(165, 138, 255, 0.14), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .16; }
.ambient-a { width: 28rem; height: 28rem; top: 22rem; left: -18rem; background: var(--lime); }
.ambient-b { width: 25rem; height: 25rem; right: -15rem; top: 55rem; background: var(--violet); }

.topbar {
  width: min(1420px, calc(100% - 56px));
  height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em; font-size: 1.14rem; }
.brand-mark { width: 26px; height: 22px; display: flex; align-items: flex-end; gap: 3px; }
.brand-mark i { width: 4px; border-radius: 4px; background: var(--lime); animation: equalize 1.3s ease-in-out infinite alternate; }
.brand-mark i:nth-child(1) { height: 45%; }
.brand-mark i:nth-child(2) { height: 100%; animation-delay: -.7s; }
.brand-mark i:nth-child(3) { height: 72%; animation-delay: -.25s; }
.brand-mark i:nth-child(4) { height: 36%; animation-delay: -.9s; }
@keyframes equalize { to { height: 35%; } }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-profile { display: inline-flex; min-width: 0; align-items: center; gap: 9px; padding: 4px 5px 4px 4px; border-radius: 999px; color: var(--text); transition: background .2s; }
.user-profile:hover { background: rgba(255,255,255,.06); }
.user-profile-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--lime)); color: #0a0a0c; font-size: .7rem; font-weight: 800; }
.user-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-profile-name { max-width: 150px; overflow: hidden; font-size: .86rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mode-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .82rem; }
.mode-pill > span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.mode-pill.live > span { background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.connect-button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; background: var(--text); color: #0a0a0c; font-size: .88rem; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.connect-button svg { width: 19px; height: 19px; fill: #1ed760; }
.connect-button:hover { transform: translateY(-2px); background: var(--lime); }
.connect-button.logout { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.connect-button.logout svg { display: none; }
.connect-button.logout:hover { background: rgba(255,255,255,.08); }
.connect-button:focus-visible, .range-button:focus-visible, .artist-portrait:focus-visible, .utility-button:focus-visible, .list-toggle:focus-visible, .history-file-button:focus-visible, .history-range:focus-visible, .history-more:focus-visible, .history-clear:focus-visible, .history-search input:focus-visible { outline: 3px solid rgba(217,255,67,.65); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.shell { width: min(1420px, calc(100% - 56px)); margin: 0 auto; padding: 72px 0 40px; }
.intro-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.eyebrow, .card-kicker { margin: 0 0 8px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-family: var(--font-display); font-size: clamp(2.7rem, 6vw, 5.9rem); line-height: .9; letter-spacing: -.075em; }
.intro-copy { margin-bottom: 0; color: var(--muted); font-size: 1.02rem; }
.intro-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.range-switcher { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
.range-button { border: 0; border-radius: 999px; padding: 10px 16px; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
.range-button:hover { color: var(--text); }
.range-button.active { background: var(--text); color: #0b0b0d; font-weight: 700; }
.range-button:disabled { cursor: wait; opacity: .55; }
.report-actions { display: flex; gap: 8px; }
.utility-button, .list-toggle { border: 1px solid var(--line-strong); background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.utility-button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 13px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.utility-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.utility-button:hover, .list-toggle:hover { border-color: rgba(217,255,67,.5); background: rgba(217,255,67,.07); color: var(--lime); transform: translateY(-1px); }
.utility-button.accent { border-color: transparent; background: var(--lime); color: #0b0b0d; }
.utility-button.accent:hover { background: #e4ff76; color: #0b0b0d; }
.utility-button:disabled { cursor: wait; opacity: .55; transform: none; }
.utility-button.loading svg { animation: spin-button .8s linear infinite; }
@keyframes spin-button { to { transform: rotate(360deg); } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .8fr) minmax(270px, .8fr); gap: 16px; }
.card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); backdrop-filter: blur(22px); }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.055); }
.dna-card { min-height: 520px; padding: 28px; background: linear-gradient(140deg, rgba(24,24,27,.95), rgba(15,15,17,.86)); }
.card-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; position: relative; z-index: 2; }
.card-heading h2, .section-heading h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; letter-spacing: -.035em; }
.card-heading.compact h2 { font-size: 1.65rem; }
.period-label, .section-meta { color: var(--muted); font-size: .8rem; }
.dna-stage { position: relative; width: min(430px, 92%); aspect-ratio: 1; margin: 6px auto -20px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.orbit-outer { width: 96%; height: 96%; border-style: dashed; animation: spin 30s linear infinite; }
.orbit-middle { width: 71%; height: 71%; }
.orbit-inner { width: 45%; height: 45%; border-color: rgba(217,255,67,.25); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.dna-core { position: absolute; top: 50%; left: 50%; width: 145px; height: 145px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 25%, #2a2a2f, #111113 70%); border: 1px solid rgba(217,255,67,.34); box-shadow: 0 0 70px rgba(217,255,67,.1); }
.core-label { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.dna-core strong { max-width: 122px; margin: 4px auto; font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.34rem); line-height: 1.02; letter-spacing: -.045em; overflow-wrap: anywhere; }
.core-unit { color: var(--muted); font-size: .75rem; }
.genre-node { --node-scale: 1; position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%) scale(var(--node-scale)); border-radius: 50%; color: #0a0a0c; font-weight: 700; font-size: .72rem; text-align: center; box-shadow: 0 12px 38px rgba(0,0,0,.32); animation: float 5s ease-in-out infinite; }
.genre-node span { max-width: 72%; line-height: 1.05; overflow-wrap: anywhere; }
.node-a { width: 92px; height: 92px; top: 7%; left: 50%; background: var(--lime); }
.node-b { width: 74px; height: 74px; top: 50%; left: 7%; background: var(--violet); animation-delay: -1.2s; }
.node-c { width: 82px; height: 82px; top: 50%; left: 93%; background: var(--orange); animation-delay: -2.6s; }
.node-d { width: 64px; height: 64px; top: 93%; left: 50%; background: var(--cyan); animation-delay: -3.7s; font-size: .66rem; }
@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--node-scale)); }
  50% { transform: translate(-50%, calc(-50% - 6px)) scale(var(--node-scale)); }
}
.dna-legend { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; gap: 20px; color: var(--muted); font-size: .73rem; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.dot-lime { background: var(--lime); }.dot-violet { background: var(--violet); }.dot-orange { background: var(--orange); }

.lead-artist-card, .pulse-card { min-height: 520px; padding: 24px; }
.lead-artist-card { display: flex; flex-direction: column; }
.rank-change { border-radius: 999px; padding: 6px 10px; background: rgba(217,255,67,.12); color: var(--lime); font-weight: 700; font-size: .78rem; }
.rank-change.down { background: rgba(255,141,77,.12); color: var(--orange); }
.artist-portrait { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 300px; margin: 28px 0 20px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg, #9e73ff, #3c1f6e 48%, #ff7547); isolation: isolate; }
.artist-portrait::before, .artist-portrait::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); mix-blend-mode: overlay; }
.artist-portrait::before { width: 240px; height: 240px; top: -80px; right: -80px; background: var(--lime); }
.artist-portrait::after { width: 180px; height: 180px; bottom: -80px; left: -50px; background: #171719; }
.portrait-noise { position: absolute; inset: 0; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.artist-portrait > span { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(4rem, 7vw, 7rem); font-weight: 800; letter-spacing: -.12em; text-shadow: 0 8px 35px rgba(0,0,0,.28); }
.portrait-caption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(10,10,12,.42); backdrop-filter: blur(12px); font-size: .76rem; }
.portrait-caption svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.artist-note { margin: 0; color: var(--muted); font-size: .85rem; }
.pulse-card { display: flex; flex-direction: column; background: linear-gradient(165deg, rgba(27,27,30,.95), rgba(18,18,20,.92)); }
.pulse-card h2 { color: var(--text); font-size: 1.65rem !important; }
.pulse-badge { padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(217,255,67,.22); color: var(--lime); font-size: .68rem; }
.pulse-copy { margin: 0; color: var(--muted); font-size: .9rem; }
.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 34px 0 24px; }
.comparison-grid > div { min-width: 0; padding: 18px 6px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); text-align: center; }
.comparison-grid strong { display: block; color: var(--lime); font-family: var(--font-display); font-size: 2.25rem; line-height: 1; }
.comparison-grid span { display: block; margin-top: 8px; color: var(--muted); font-size: .78rem; }
.comparison-detail { margin: 0 0 18px; color: var(--muted); font-size: .88rem; }
.comparison-detail strong { color: var(--text); }
.rank-change.new { background: rgba(98,217,255,.12); color: var(--cyan); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.metric-card { position: relative; min-height: 188px; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(27,27,31,.82), rgba(14,14,16,.88)); }
.metric-card::before { content: ""; position: absolute; width: 120px; height: 120px; right: -64px; bottom: -68px; border-radius: 50%; background: var(--metric-color, var(--violet)); filter: blur(48px); opacity: .25; }
.metric-card:nth-child(2) { --metric-color: var(--lime); }
.metric-card:nth-child(3) { --metric-color: var(--cyan); }
.metric-card:nth-child(4) { --metric-color: var(--orange); }
.metric-index { position: absolute; top: 20px; right: 21px; color: rgba(255,255,255,.18); font-family: var(--font-display); font-size: .72rem; }
.metric-value { margin: 28px 0 8px; font-family: var(--font-display); line-height: 1; }
.metric-value strong { font-size: clamp(2.1rem, 4vw, 3.25rem); letter-spacing: -.07em; }
.metric-value small { margin-left: 4px; color: var(--muted); font-family: var(--font-body); font-size: .72rem; }
.metric-card > p:last-child { margin: 0; max-width: 220px; color: var(--muted); font-size: .78rem; }

.science-lab { margin-top: 16px; padding: 30px; background: linear-gradient(145deg, rgba(25,25,29,.94), rgba(14,14,17,.91)); }
.science-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.science-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.45rem); letter-spacing: -.055em; }
.science-heading > p { margin: 0; color: var(--muted); font-size: .86rem; text-align: right; }
.science-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 24px; }
.science-grid article { min-width: 0; min-height: 170px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); }
.science-grid span { display: block; min-height: 42px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.science-grid strong { display: block; margin: 10px 0 8px; color: var(--lime); font-family: var(--font-display); font-size: clamp(1.55rem, 2.5vw, 2.35rem); line-height: 1; letter-spacing: -.055em; }
.science-grid p { margin: 0; color: var(--muted); font-size: .8rem; }
.science-method { margin-top: 16px; color: var(--muted); font-size: .88rem; }
.science-method summary { width: fit-content; color: var(--text); cursor: pointer; font-weight: 700; }
.science-method p { max-width: 900px; margin: 10px 0 0; }

.history-lab { margin-top: 16px; padding: 34px; background: linear-gradient(135deg, rgba(26,27,24,.96), rgba(17,16,23,.94) 52%, rgba(27,21,38,.94)); isolation: isolate; }
.history-glow { position: absolute; z-index: -1; width: 28rem; height: 28rem; right: -12rem; top: -18rem; border-radius: 50%; background: var(--violet); filter: blur(110px); opacity: .15; }
.history-intro { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.history-intro h2 { max-width: 780px; margin: 4px 0 12px; font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: .98; letter-spacing: -.065em; }
.history-intro > div > p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: .96rem; }
.privacy-badge { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(217,255,67,.24); border-radius: 999px; background: rgba(217,255,67,.07); color: var(--lime); font-size: .75rem; }
.privacy-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-upload { position: relative; display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; align-items: center; gap: 20px; min-height: 152px; margin-top: 30px; padding: 24px; border: 1px dashed rgba(217,255,67,.34); border-radius: 20px; background: rgba(255,255,255,.025); transition: border-color .2s, background .2s, transform .2s; }
.history-upload.is-dragging { border-color: var(--lime); background: rgba(217,255,67,.08); transform: scale(1.005); }
.history-upload.loading { opacity: .6; pointer-events: none; }
.history-upload.compact { min-height: 104px; padding-block: 16px; }
.upload-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--lime); color: #0a0a0c; }
.upload-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-upload h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.16rem; letter-spacing: -.03em; }
.history-upload p { margin: 0; color: var(--muted); font-size: .82rem; }
.history-file-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 999px; background: var(--text); color: #0b0b0d; font-weight: 700; font-size: .82rem; cursor: pointer; transition: transform .2s, background .2s; }
.history-file-button:hover { transform: translateY(-2px); background: var(--lime); }
.history-help { position: absolute; right: 24px; bottom: 10px; color: var(--muted); font-size: .68rem; text-decoration: underline; text-underline-offset: 3px; }
.history-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: history-steps; }
.history-steps li { position: relative; min-height: 92px; padding: 16px 16px 16px 48px; border: 1px solid var(--line); border-radius: 15px; background: rgba(8,8,10,.26); counter-increment: history-steps; }
.history-steps li::before { content: counter(history-steps); position: absolute; left: 16px; top: 17px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: #0a0a0c; font-size: .7rem; font-weight: 800; }
.history-steps strong { display: block; margin-bottom: 3px; font-size: .88rem; }
.history-steps span { display: block; color: var(--muted); font-size: .8rem; }
.history-results { scroll-margin-top: 20px; margin-top: 22px; }
.history-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.history-summary article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8,8,10,.34); }
.history-summary span { display: block; margin-bottom: 9px; color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; }
.history-summary strong { display: block; overflow: hidden; color: var(--text); font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
#history-date-range { font-size: clamp(.82rem, 1.35vw, 1.12rem); line-height: 1.2; white-space: normal; }
.history-toolbar { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
.history-ranges { display: flex; flex: none; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,7,9,.45); }
.history-range, .history-more, .history-clear { border: 0; color: var(--muted); cursor: pointer; }
.history-range { padding: 7px 11px; border-radius: 999px; background: transparent; font-size: .72rem; }
.history-range.active { background: var(--lime); color: #0b0b0d; font-weight: 700; }
.history-search { position: relative; flex: 1; }
.history-search svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
.history-search input { width: 100%; min-height: 42px; padding: 9px 13px 9px 40px; border: 1px solid var(--line); border-radius: 999px; outline: 0; background: rgba(7,7,9,.44); color: var(--text); font: inherit; font-size: .8rem; }
.history-search input::placeholder { color: #717178; }
.history-clear { flex: none; padding: 9px 4px; background: transparent; font-size: .72rem; text-decoration: underline; text-underline-offset: 4px; }
.history-insights { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 12px; margin-bottom: 14px; }
.history-insights > article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(8,8,10,.32); }
.history-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.history-panel-heading span, .history-panel-heading small { color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.history-panel-heading h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: -.03em; }
.history-years { display: flex; align-items: flex-end; gap: 9px; min-height: 176px; margin-top: 14px; padding: 18px 2px 0; overflow-x: auto; }
.history-year { flex: 1 0 45px; height: 145px; display: grid; grid-template-rows: 28px 1fr 20px; align-items: end; text-align: center; }
.history-year strong { align-self: start; overflow: hidden; color: var(--muted); font-size: .58rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.history-year > span { display: block; width: min(30px, 72%); height: var(--bar-height); min-height: 7px; margin: auto auto 5px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--lime), #789600); box-shadow: 0 0 18px rgba(217,255,67,.1); }
.history-year small { color: var(--muted); font-size: .62rem; }
.history-artists { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; list-style: none; margin: 14px 0 0; padding: 0; }
.history-artists li { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 0 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.history-artists li > span { grid-row: span 2; color: var(--muted); font-family: var(--font-display); font-size: .66rem; }
.history-artists strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.history-artists small { color: var(--muted); font-size: .62rem; }
.history-panel-empty { grid-column: 1 / -1; align-self: center; margin: auto; color: var(--muted); font-size: .72rem; text-align: center; }
.history-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 17px; background: rgba(8,8,10,.32); }
.history-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: .82rem; }
.history-table th { padding: 13px 15px; color: var(--muted); font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.history-table th:nth-last-child(-n+2), .history-table td:nth-last-child(-n+2) { text-align: right; }
.history-table td { padding: 13px 15px; border-top: 1px solid var(--line); vertical-align: middle; }
.history-table tbody tr { transition: background .18s; }
.history-table tbody tr:hover { background: rgba(255,255,255,.035); }
.history-rank { width: 56px; color: var(--muted); font-family: var(--font-display); }
.history-song { max-width: 330px; font-weight: 700; }
.history-song a { display: inline-flex; align-items: center; gap: 7px; }
.history-song a span { color: var(--lime); font-size: .68rem; }
.history-table td:nth-child(3) strong, .history-table td:nth-child(3) span, .history-plays strong, .history-plays span { display: block; }
.history-table td:nth-child(3) strong { font-size: .78rem; font-weight: 500; }
.history-table td:nth-child(3) span, .history-plays span { color: var(--muted); font-size: .68rem; }
.history-plays strong { color: var(--lime); font-family: var(--font-display); font-size: 1rem; }
.history-empty { padding: 38px !important; color: var(--muted); text-align: center !important; }
.history-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--muted); font-size: .74rem; }
.history-more { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); }
.history-more:hover { border-color: var(--lime); color: var(--lime); }

.content-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 16px; margin-top: 16px; }
.ranking-card, .genres-card, .tracks-card { padding: 28px; }
.tracks-card { grid-column: 1 / -1; }
.list-toggle { padding: 7px 10px; border-radius: 999px; color: var(--muted); font-size: .72rem; }
.artist-list, .track-list { list-style: none; padding: 0; margin: 22px 0 0; }
.artist-row { border-bottom: 1px solid var(--line); }
.artist-row-content { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-radius: 12px; transition: background .2s ease, padding .2s ease; }
.artist-row-content:hover { background: rgba(255,255,255,.04); padding-inline: 10px; }
.artist-row:last-child, .track-row:last-child { border-bottom: 0; }
.position { color: var(--muted); font-family: var(--font-display); font-size: .85rem; }
.artist-avatar, .track-cover { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; background: var(--accent, var(--violet)); color: #0b0b0d; font-family: var(--font-display); font-weight: 800; }
.artist-avatar { width: 52px; height: 52px; border-radius: 50%; }
.artist-avatar img, .track-cover img { width: 100%; height: 100%; object-fit: cover; }
.artist-name, .track-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.artist-genre, .track-artist { display: block; color: var(--muted); font-size: .78rem; }
.movement { min-width: 44px; text-align: right; font-size: .76rem; font-weight: 700; }
.movement.up { color: var(--lime); }.movement.down { color: var(--orange); }.movement.steady { color: var(--muted); }.movement.new { color: var(--cyan); }
.data-explainer { margin: 16px 0 0; padding: 12px 14px; border-left: 2px solid var(--cyan); border-radius: 0 10px 10px 0; background: rgba(98,217,255,.055); color: var(--muted); font-size: .88rem; }
.data-explainer strong { color: var(--text); }
.genre-cloud { min-height: 256px; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 28px 6px 20px; }
.genre-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: var(--muted); font-size: var(--size, .82rem); transform: translateY(var(--lift, 0)); transition: border-color .2s, color .2s, transform .2s; }
.genre-chip small { color: currentColor; font-size: .7em; opacity: .72; }
.genre-chip.primary { border-color: rgba(217,255,67,.36); color: var(--lime); background: rgba(217,255,67,.06); }
.genre-chip.secondary { color: var(--violet); border-color: rgba(165,138,255,.3); }
.genre-chip:hover { transform: translateY(calc(var(--lift, 0px) - 3px)); border-color: var(--line-strong); color: var(--text); }
.genre-insight { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.genre-insight span { color: var(--lime); font-family: var(--font-display); font-size: .74rem; }
.genre-empty { max-width: 420px; margin: auto; color: var(--muted); font-size: .9rem; text-align: center; }
.genre-breakdown { display: grid; gap: 12px; margin-top: 22px; }
.genre-breakdown-row { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(130px, 1fr) minmax(110px, .7fr); align-items: center; gap: 12px; }
.genre-breakdown-row > div:first-child strong { display: block; font-size: .86rem; }
.genre-breakdown-row > div:first-child span { display: block; color: var(--muted); font-size: .72rem; }
.genre-bar { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.075); }
.genre-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--lime)); }
.genre-breakdown-row p { margin: 0; overflow: hidden; color: var(--muted); font-size: .72rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.track-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: tracks; }
.track-row { min-width: 0; }
.artist-row.is-hidden, .track-row.is-hidden { display: none; }
.track-cover { width: 100%; aspect-ratio: 1; margin-bottom: 12px; border-radius: 14px; font-size: 2rem; }
.track-rank { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(7,7,9,.68); color: var(--text); font-family: var(--font-body); font-size: .68rem; backdrop-filter: blur(6px); }
.track-meta { min-width: 0; }
.track-name { font-size: .9rem; }.track-artist { margin-top: 2px; }
.track-details { display: block; margin-top: 4px; overflow: hidden; color: #74747c; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.empty-result { grid-column: 1 / -1; padding: 30px 0; color: var(--muted); text-align: center; }

.insight-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: rgba(255,255,255,.025); }
.insight-strip article { position: relative; min-height: 310px; padding: 28px; border-right: 1px solid var(--line); }
.insight-strip article:last-child { border-right: 0; }
.insight-number { position: absolute; right: 24px; top: 22px; color: rgba(255,255,255,.16); font-family: var(--font-display); font-weight: 700; }
.insight-strip h3 { max-width: 280px; margin: 52px 0 10px; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.04em; line-height: 1.05; }
.insight-strip article > p { max-width: 360px; color: var(--muted); font-size: .88rem; }
.insight-facts { display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.insight-facts li { position: relative; padding-left: 15px; color: var(--muted); font-size: .84rem; }
.insight-facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.footer { width: min(1420px, calc(100% - 56px)); margin: 34px auto 0; padding: 28px 0 40px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.footer p { margin: 0; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 340px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #202024; color: var(--text); box-shadow: 0 18px 60px rgba(0,0,0,.4); transform: translateY(140%); opacity: 0; transition: .3s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }
.shell[aria-busy="true"] .card, .shell[aria-busy="true"] .metric-card { opacity: .66; }
.shell[aria-busy="true"] .pulse-line { stroke-dasharray: 10 8; animation: loading-line .8s linear infinite; }
@keyframes loading-line { to { stroke-dashoffset: -18; } }

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1.35fr 1fr; }
  .dna-card { grid-row: span 2; }
  .lead-artist-card, .pulse-card { min-height: 410px; }
  .track-list { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .science-grid { grid-template-columns: repeat(3, 1fr); }
  .history-intro { flex-direction: column; }
  .history-summary { grid-template-columns: repeat(3, 1fr); }
  .history-insights { grid-template-columns: 1fr; }
  .history-toolbar { flex-wrap: wrap; }
  .history-search { order: 3; flex-basis: 100%; }
}
@media (max-width: 780px) {
  .topbar, .shell, .footer { width: min(100% - 28px, 1420px); }
  .topbar { height: 74px; }
  .mode-pill { display: none; }
  .connect-button { padding: 10px 13px; }
  .connect-button svg { width: 18px; }
  .shell { padding-top: 48px; }
  .intro-row { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .intro-controls { width: 100%; justify-content: flex-start; }
  .range-switcher { width: 100%; }
  .range-button { flex: 1; padding-inline: 8px; }
  .hero-grid, .content-grid { grid-template-columns: 1fr; }
  .dna-card { min-height: 500px; grid-row: auto; }
  .lead-artist-card, .pulse-card { min-height: 430px; }
  .tracks-card { grid-column: auto; }
  .track-list { grid-template-columns: repeat(2, 1fr); }
  .history-lab { padding: 24px; }
  .history-upload { grid-template-columns: auto 1fr; }
  .history-file-button { grid-column: 1 / -1; }
  .history-help { position: static; grid-column: 1 / -1; text-align: center; }
  .history-steps { grid-template-columns: 1fr; }
  .history-ranges { width: 100%; }
  .history-range { flex: 1; }
  .history-clear { margin-left: auto; }
  .insight-strip { grid-template-columns: 1fr; }
  .insight-strip article { min-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); }
  .insight-strip article:last-child { border-bottom: 0; }
  .footer { flex-direction: column; }
  .science-heading { align-items: flex-start; flex-direction: column; }
  .science-heading > p { text-align: left; }
  .science-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .brand > span:last-child { display: none; }
  .connect-button { font-size: .78rem; }
  .topbar-actions { gap: 6px; }
  .user-profile-name { max-width: 86px; }
  .user-profile-avatar { width: 31px; height: 31px; }
  h1 { font-size: 3.2rem; }
  .report-actions { width: 100%; }
  .utility-button { flex: 1; justify-content: center; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 168px; }
  .history-lab { padding: 20px; }
  .history-intro h2 { font-size: 2.25rem; }
  .privacy-badge { white-space: normal; }
  .history-upload { grid-template-columns: 1fr; text-align: center; }
  .upload-icon { margin: 0 auto; }
  .history-summary { grid-template-columns: 1fr 1fr; }
  .history-summary article { padding: 14px; }
  .history-summary strong { font-size: 1.25rem; }
  .history-file-button, .history-help { grid-column: auto; }
  .history-ranges { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .history-range { border-radius: 12px; }
  .history-artists { grid-template-columns: 1fr; }
  .dna-card, .ranking-card, .genres-card, .tracks-card { padding: 21px; }
  .dna-stage { width: 108%; margin-left: -4%; }
  .dna-legend { left: 21px; right: 21px; gap: 10px; justify-content: space-between; }
  .dna-legend span { font-size: .63rem; }
  .genre-node { --node-scale: .88; }
  .science-lab { padding: 22px; }
  .science-grid { grid-template-columns: 1fr; }
  .science-grid article { min-height: 130px; }
  .genre-breakdown-row { grid-template-columns: minmax(100px, 1fr) minmax(90px, 1fr); }
  .genre-breakdown-row p { display: none; }
  .track-list { gap: 16px 10px; }
  .artist-row-content { grid-template-columns: 26px 46px minmax(0,1fr) auto; gap: 10px; }
  .artist-avatar { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Data lab: accessible controls and compact, responsive historical analysis. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: 16px; clip-path: inset(50%); z-index: 100; padding: 12px 18px; background: var(--lime); color: #111; border-radius: 8px; }
.skip-link:focus { clip-path: none; }
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.section-nav a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; color: var(--muted); }
.section-nav a:hover { color: var(--lime); border-color: var(--lime); }
.data-notice { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin-bottom: 20px; border: 1px solid var(--orange); border-radius: 16px; background: #281c16; }
.data-notice p { flex: 1; margin: 0; }
.history-preferences { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: .83rem; }
.history-preferences label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.history-preferences input { accent-color: var(--lime); width: 18px; height: 18px; }
.history-preferences > span { color: var(--muted); }
.history-sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.history-sort select { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #19191d; color: var(--text); font: inherit; }
.history-file-button { border: 0; font: inherit; cursor: pointer; }
.history-upload.loading .history-file-button { pointer-events: none; opacity: .5; }
.history-habits-heading { margin: 30px 0 16px; }
.history-habits-heading h3 { margin: 0; font-family: var(--font-display); font-size: 1.7rem; }
.history-habits-heading > span { color: var(--muted); font-size: .8rem; }
.history-habits { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.history-habits article { min-width: 0; }
.history-hours-panel { margin: 22px 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; }
.history-hours-panel h3 { margin: 0; }
.history-hours { height: 160px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 5px; margin: 26px 0 32px; }
.hour-column { position: relative; display: flex; align-items: flex-end; min-width: 0; }
.hour-column > span:not(.sr-only) { width: 100%; background: linear-gradient(var(--lime), #647d2e); border-radius: 5px 5px 0 0; min-height: 2px; }
.hour-column > small { position: absolute; top: 100%; left: 0; margin-top: 6px; color: var(--muted); font-size: .68rem; }
.history-lab, #artistas { scroll-margin-top: 24px; }
.genre-node span { overflow-wrap: anywhere; max-width: 78%; }
.genre-node { text-align: center; }
.dna-card { display: flex; flex-direction: column; }
.dna-stage { flex: none; margin: 20px auto 22px; }
.dna-legend { position: static; margin-top: auto; flex-wrap: wrap; gap: 9px 16px; }
.node-a { top: 12%; }
.node-b { left: 12%; }
.node-c { left: 88%; }
.node-d { top: 88%; width: 78px; height: 78px; }
.artist-portrait.has-image::before, .artist-portrait.has-image::after, .artist-portrait.has-image .portrait-noise { display: none; }
.card-heading h2, .period-label { overflow-wrap: anywhere; min-width: 0; }
.history-toolbar, .science-grid, .history-summary { min-width: 0; }
.history-summary strong, .science-grid strong { overflow-wrap: anywhere; }
@media (max-width: 780px) {
  .mode-pill { display: inline-flex; font-size: .65rem; padding: 5px 7px; }
  .topbar { min-height: 74px; height: auto; padding-block: 14px; flex-wrap: wrap; gap: 12px; }
  .topbar-actions { flex-wrap: wrap; }
  .data-notice { flex-direction: column; align-items: flex-start; }
  .genre-breakdown-row p { display: block; grid-column: 1 / -1; white-space: normal; text-align: left; }
  .history-hours { gap: 3px; }
}
@media (max-width: 480px) {
  .dna-stage { width: 100%; margin: 24px auto; }
  .dna-core { width: 118px; height: 118px; }
  .dna-core strong { max-width: 100px; font-size: 1rem; }
  .core-unit { font-size: .65rem; }
  .genre-node { font-size: .64rem; }
  .history-habits { grid-template-columns: 1fr 1fr; }
  .history-habits article { padding: 14px; }
}

/* Evolution lab: genre families, taste shift and ranking stability */
.evolution-lab { margin-top: 16px; padding: 30px; background: linear-gradient(160deg, rgba(27,22,40,.94), rgba(14,14,17,.92)); }
.evolution-stats { grid-template-columns: repeat(4, 1fr); }
.evolution-stats strong { color: var(--violet); }
.evolution-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.evolution-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(8,8,10,.32); }
.family-legend { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.family-bars { display: grid; gap: 12px; margin-top: 16px; }
.family-row { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(0, 1.4fr) 44px; align-items: center; gap: 12px; }
.family-name { min-width: 0; }
.family-name strong { display: block; font-size: .84rem; }
.family-name span { display: block; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.family-meter { display: grid; gap: 4px; }
.family-bar { display: block; height: 7px; min-width: 2px; border-radius: 999px; }
.family-bar.artists { background: linear-gradient(90deg, #6d55c7, var(--violet)); }
.family-bar.songs { background: linear-gradient(90deg, #7a9a12, var(--lime)); }
.family-values { display: grid; gap: 1px; color: var(--muted); font-size: .64rem; text-align: right; }
.family-moves, .bridge-list { list-style: none; margin: 12px 0 0; padding: 0; }
.family-moves li, .bridge-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .82rem; }
.family-moves li span, .bridge-list li span { color: var(--muted); font-size: .72rem; text-align: right; }
.family-moves li.up span { color: var(--lime); }
.family-moves li.down span { color: var(--orange); }
.bridge-heading { margin-top: 18px; }

/* History heatmap */
.heatmap-title { margin-top: 8px !important; }
.history-heatmap { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; margin: 14px 0 18px; }
.history-heatmap small { color: var(--muted); font-size: .6rem; }
.history-heatmap .heatmap-day { color: var(--muted); font-size: .66rem; align-self: center; }
.history-heatmap i { display: block; aspect-ratio: 1; min-height: 10px; border-radius: 3px; background: rgba(217,255,67, calc(.05 + var(--heat) * .95)); }

/* History story: eras, songs per year, forgotten favorites */
.history-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.history-story-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(8,8,10,.32); }
.story-wide { grid-column: span 1; }
.story-eras { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.story-eras li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 12px; padding: 10px 12px; border-left: 3px solid var(--violet); border-radius: 8px; background: rgba(255,255,255,.025); }
.story-eras li.longest { border-left-color: var(--lime); background: rgba(217,255,67,.06); }
.story-eras .era-dates { grid-row: span 2; color: var(--muted); font-size: .7rem; align-self: center; }
.story-eras strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.story-eras .era-meta { color: var(--muted); font-size: .68rem; }
.story-table-wrap { max-height: 360px; margin-top: 12px; overflow: auto; }
.story-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.story-table th { position: sticky; top: 0; padding: 6px 8px; background: var(--surface-solid); color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.story-table td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.story-table td span { display: block; color: var(--muted); font-size: .68rem; }
.story-table a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); }
.story-year { color: var(--lime); font-family: var(--font-display); font-weight: 700; }
.story-list { list-style: none; margin: 12px 0 0; padding: 0; }
.story-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.story-list strong { display: block; overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.story-list strong a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); }
.story-list span { color: var(--muted); font-size: .7rem; }
.story-subheading { margin-top: 18px; }

@media (max-width: 1120px) {
  .evolution-body, .history-story { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .evolution-lab { padding: 20px; }
  .evolution-stats { grid-template-columns: repeat(2, 1fr); }
  .family-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .family-meter { grid-column: 1 / -1; grid-row: 2; }
  .family-values { grid-row: 1; grid-column: 2; }
  .story-eras li { grid-template-columns: 1fr; }
  .story-eras .era-dates { grid-row: auto; }
  .history-heatmap { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .history-heatmap i { min-height: 6px; border-radius: 2px; }
}
@media (max-width: 480px) {
  .evolution-panel .history-panel-heading { flex-direction: column; gap: 6px; }
}