/* LIKELURK — personal music archive. Cream paper, ink header/footer, signal orange,
   monospace everything, dashed panels with corner brackets. */
:root {
  --ink: #131313;
  --ink-2: #1d1d1d;
  --ink-3: #2a2a2a;
  --paper: #f1ede4;
  --paper-2: #e9e4d8;
  --card: #f7f4ed;
  --line: #d8d0c1;
  --line-2: #c9c0ae;
  --text: #161616;
  --muted: #706a60;
  --o: #ff4f17;
  --o-2: #ff6a33;
  --o-soft: rgba(255, 79, 23, .12);
  --wave-off: #c4bdb0;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pixel: "Silkscreen", "JetBrains Mono", monospace;
  --side: 420px;
  --hdr: 64px;
  --ftr: 62px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--text);
  font: 13px/1.35 var(--mono);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--ftr) + 8px);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.hidden { display: none !important; }
.dim { color: var(--muted); }
.sl { color: var(--o); font-weight: 700; margin-right: 6px; letter-spacing: -1px; }
.ic { width: 16px; height: 16px; fill: currentColor; flex: none; }
.center { text-align: center; }
::selection { background: var(--o); color: #fff; }

/* ---------------- header ---------------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  height: var(--hdr);
  display: flex; align-items: center; gap: 22px;
  padding: 0 16px 0 40px;
  background: var(--ink); color: #f2efe8;
  border-bottom: 1px solid #000;
}
.hdr-noise {
  position: absolute; left: 0; top: 0; bottom: 0; width: 46px; pointer-events: none;
  background-image:
    radial-gradient(var(--o) 1px, transparent 1.4px),
    radial-gradient(rgba(255,79,23,.5) 1px, transparent 1.4px);
  background-size: 6px 6px, 9px 9px;
  background-position: 0 0, 3px 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent);
          mask-image: linear-gradient(90deg, #000 10%, transparent);
  opacity: .8;
}
.logo { display: flex; align-items: center; gap: 12px; flex: none; position: relative; }
.logo-mark { width: 44px; height: 40px; fill: var(--o); }
.logo-word {
  font-family: var(--pixel); font-weight: 700; font-size: 36px; letter-spacing: 1px;
  line-height: 1; color: #fff; text-shadow: 2px 0 0 rgba(255,79,23,.35);
}
.tagline { font-size: 12.5px; letter-spacing: .06em; line-height: 1.6; flex: none; }
.tagline .dim { color: #a9a39a; font-size: 11.5px; }
.search {
  flex: 1 1 340px; max-width: 460px; min-width: 200px;
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 8px 0 12px;
  border: 1px solid #5b5750; background: #0b0b0b; border-radius: 2px;
}
.search:focus-within { border-color: var(--o); }
.search .ic { color: var(--o); width: 17px; height: 17px; }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #eee; font-size: 12.5px; letter-spacing: .02em;
}
.search input::placeholder { color: #b8b2a8; }
.search input::-webkit-search-cancel-button { filter: invert(1); }
.search kbd { font: inherit; color: #ddd; border-left: 1px solid #444; padding-left: 9px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > button, .nav-drop > button {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 9px; color: #f2efe8; white-space: nowrap;
}
.nav button:hover { color: var(--o); }
.nav button.on { color: var(--o); }
.nav button.on::before { content: "[ "; white-space: pre; }
.nav button.on::after { content: " ]"; white-space: pre; }
.nav .chev { width: 11px; height: 11px; }
.nav-drop { position: relative; }
.me {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid #3a3a3a; background: #333;
}
.me:hover { border-color: var(--o); }
.me img { width: 100%; height: 100%; object-fit: cover; }
.hdr-cta {
  flex: none; height: 34px; padding: 0 12px;
  border: 1.5px solid var(--o); color: #fff; font-weight: 700; letter-spacing: .04em; font-size: 12.5px;
}
.hdr-cta:hover { background: var(--o); }

/* ---------------- shell + panels ---------------- */
.shell {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--side);
  gap: 14px; padding: 14px 14px 0;
  align-items: start;
}
.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--hdr) + 14px);
        max-height: calc(100vh - var(--hdr) - var(--ftr) - 28px); overflow-y: auto; scrollbar-width: thin; }
.main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.panel {
  --c: var(--o);
  position: relative;
  background: var(--card);
  border: 1px dashed rgba(255, 79, 23, .55);
  padding: 14px 16px;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.ph {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .06em;
  display: flex; align-items: baseline; gap: 2px; white-space: nowrap;
}
.ph .dim { font-weight: 500; margin-left: 6px; }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.viewall { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.viewall:hover { color: var(--o); }
.viewall .ic { width: 13px; height: 13px; }

/* ---------------- index (years + genre) ---------------- */
.index { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 12px 0 14px; }
.index-years { padding: 0 16px; min-width: 0; }
.index-genre { padding: 0 16px; border-left: 1px dashed var(--line-2); width: 220px; }
.index .ph { margin-bottom: 12px; }
.erabar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.erabar button {
  flex: none; min-width: 58px; padding: 7px 8px 6px;
  background: var(--paper); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.erabar button b { font-size: 14px; font-weight: 600; }
.erabar button span { font-size: 11px; color: var(--muted); }
.erabar button:hover { border-color: var(--o); }
.erabar button.on { background: var(--o); border-color: var(--o); color: #fff; }
.erabar button.on span { color: rgba(255,255,255,.85); }
.erabar button.all b, .erabar button.all span { color: inherit; }
.erabar button.zero { opacity: .4; }
.genre-select { position: relative; }
.genre-select select {
  appearance: none; -webkit-appearance: none; width: 100%;
  height: 46px; padding: 0 36px 0 14px;
  background: var(--ink); color: var(--o); border: 2px solid var(--o);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  outline: none;
}
.genre-select select option { text-transform: none; color: #eee; background: var(--ink); }
.genre-select .ic { position: absolute; right: 12px; top: 15px; color: var(--o); pointer-events: none; }

/* ---------------- list panel ---------------- */
.listpanel { padding: 0; }
.tabsbar {
  display: flex; align-items: center; gap: 0;
  padding: 0 16px; height: 52px; border-bottom: 1px dashed var(--line-2);
}
.tabsbar .gridicon { color: var(--o); margin-right: 26px; }
.tabsbar .gridicon .ic { width: 20px; height: 20px; }
.tabs { display: flex; height: 100%; }
.tabs button {
  position: relative; padding: 0 22px; font-size: 12px; font-weight: 600; letter-spacing: .06em; height: 100%;
}
.tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; border-left: 1px solid var(--line-2);
}
.tabs button:hover { color: var(--o); }
.tabs button.on { color: var(--o); }
.tabs button.on::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; background: var(--o);
}
.tabsbar .sortwrap { margin-left: auto; position: relative; }
.sortbtn { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.sortbtn .ic { width: 12px; height: 12px; }
.sortbtn:hover { color: var(--o); }
.count { margin-left: 26px; color: var(--muted); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }

.rows { padding: 0 8px 0 0; }
.row {
  display: grid;
  grid-template-columns: 52px 94px 62px minmax(0, 1fr) 240px 34px;
  align-items: center; gap: 0;
  min-height: 100px; padding: 6px 0;
  border-bottom: 1px dashed var(--line-2);
  cursor: pointer;
}
.row:hover { background: rgba(255, 79, 23, .035); }
.row.current { background: rgba(255, 79, 23, .07); }
.r-num {
  position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: var(--o); letter-spacing: .02em;
}
.r-num::before { /* the little stitched marker above each index */
  content: ""; position: absolute; top: 6px; left: 50%; height: 14px;
  border-left: 2px dotted var(--o); opacity: .8;
}
.r-art { width: 94px; height: 88px; overflow: hidden; background: var(--paper-2); position: relative; }
.r-art img { width: 100%; height: 100%; object-fit: cover; }
.r-art .kind { position: absolute; left: 4px; bottom: 4px; background: var(--ink); color: #fff; font-size: 9.5px; padding: 1px 4px; letter-spacing: .06em; }
.r-play {
  justify-self: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--o); color: #fff;
  display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .12s;
}
.r-play .ic { width: 20px; height: 20px; margin-left: 2px; }
.row.playing .r-play .ic { margin-left: 0; }
.r-play:hover { transform: scale(1.07); background: var(--o-2); }
.r-body { min-width: 0; padding-right: 26px; }
.r-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.r-title a:hover { color: var(--o); }
.r-artist { font-size: 12.5px; color: #3d3a35; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-artist:hover { color: var(--o); }
.r-wave { position: relative; height: 34px; margin-top: 3px; }
.r-wave canvas { width: 100%; height: 100%; display: block; }
.r-wave.playlist::after, .r-wave.gone::after {
  position: absolute; left: 0; top: 9px; font-size: 10.5px; letter-spacing: .1em; color: var(--muted);
  background: var(--card); padding: 0 6px 0 0;
}
.r-wave.playlist::after { content: "PLAYLIST — OPEN TO SEE ALL TRACKS"; }
.r-wave.gone::after { content: "NO LONGER ON SOUNDCLOUD"; }
.r-time {
  position: absolute; right: 0; bottom: 3px;
  background: var(--ink); color: #fff; font-size: 11.5px; padding: 2px 6px; letter-spacing: .03em;
  pointer-events: none;
}
.r-av { display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 4px; overflow: hidden; }
.r-av img { width: 17px; height: 17px; object-fit: cover; background: var(--paper-2); flex: none; }
.r-av .plus { font-size: 11.5px; color: #3d3a35; margin-left: 10px; white-space: nowrap; }
.r-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 4px; }
.r-stats { display: flex; gap: 16px; font-size: 12px; }
.r-stats span { display: flex; align-items: center; gap: 7px; }
.r-stats .ic { width: 15px; height: 15px; }
.tag {
  display: inline-block; padding: 4px 13px; border: 1px solid var(--line-2); background: var(--paper);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.tag:hover { border-color: var(--o); color: var(--o); }
.r-date { font-size: 11.5px; color: var(--muted); letter-spacing: .05em; }
.r-date button:hover { color: var(--o); }
.r-more { align-self: start; margin-top: 12px; color: #2b2925; width: 28px; height: 22px; display: grid; place-items: center; }
.r-more .ic { width: 18px; }
.r-more:hover { color: var(--o); }

/* grid mode */
.rows.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px; padding: 16px;
}
.card { cursor: pointer; min-width: 0; }
.card .c-art { position: relative; aspect-ratio: 1; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.card .c-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.card:hover .c-art img { transform: scale(1.04); }
.card .c-num { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--o); font-weight: 700; font-size: 12px; padding: 3px 7px; }
.card .r-play { position: absolute; right: 10px; bottom: 10px; opacity: 0; transform: translateY(4px); transition: .15s; }
.card:hover .r-play, .card.current .r-play { opacity: 1; transform: none; }
.card .c-meta { padding: 8px 2px 0; }
.card .r-title { font-size: 13px; }
.card .c-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.card .tag { padding: 2px 7px; font-size: 10.5px; max-width: 120px; }
.card.current .c-art { outline: 3px solid var(--o); outline-offset: -3px; }

.empty { padding: 50px 20px; text-align: center; color: var(--muted); letter-spacing: .04em; }
.sentinel { height: 1px; }

/* ---------------- sidebar: view toggle ---------------- */
.viewtoggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.viewtoggle button {
  height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px solid var(--line-2); background: var(--paper-2);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.viewtoggle .ic { width: 20px; height: 20px; }
.viewtoggle button.on { border-color: var(--o); color: var(--o); background: var(--card); }
.viewtoggle button:not(.on):hover { border-color: var(--text); }

.mini-toggle { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; }
.mini-toggle button { display: flex; align-items: center; gap: 5px; }
.mini-toggle button.on { color: var(--o); }
.mini-toggle button.on::before { content: "[ "; white-space: pre; }
.mini-toggle button.on::after { content: " ]"; white-space: pre; }
.mini-toggle .ic { width: 13px; height: 13px; }

/* ---------------- sidebar: profile ---------------- */
.profile { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 16px; }
.p-avatar { position: relative; width: 124px; height: 124px; padding: 3px; }
.p-avatar img { width: 100%; height: 100%; object-fit: cover; background: var(--paper-2); }
.p-avatar::before, .p-avatar::after {
  content: ""; position: absolute; width: 16px; height: 16px; border: 3px solid var(--o);
}
.p-avatar::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.p-avatar::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.p-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.p-name { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: baseline; }
.p-name a:hover { color: var(--o); }
.p-name .you { font-size: 10px; color: #fff; background: var(--o); padding: 1px 5px; letter-spacing: .08em; }
.p-loc { font-size: 12px; color: #3d3a35; }
.p-counts { display: flex; gap: 22px; margin: 6px 0 8px; font-size: 13px; font-weight: 600; }
.p-counts span { display: flex; align-items: center; gap: 8px; }
.p-counts .ic { width: 17px; height: 17px; }
.p-acts { display: flex; gap: 8px; align-items: center; }
.p-acts .btn { height: 30px; padding: 0 10px; font-size: 11.5px; }
.p-acts .icon-btn { color: var(--text); }
.p-bio {
  grid-column: 1 / -1; margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: #2b2925;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line; word-break: break-word;
}
.p-bio.open { -webkit-line-clamp: unset; }
.p-more { grid-column: 1 / -1; justify-self: end; color: var(--o); font-size: 12px; font-weight: 600; text-decoration: underline; margin-top: 2px; }
.skeleton { grid-column: 1 / -1; color: var(--muted); padding: 30px 0; text-align: center; letter-spacing: .05em; }

/* following */
.fol-list { display: flex; flex-direction: column; }
.fol-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto 26px; gap: 14px; align-items: center; padding: 5px 0; }
.fol-row img { width: 50px; height: 50px; object-fit: cover; background: var(--paper-2); }
.fol-row .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fol-row .nm:hover { color: var(--o); }
.fol-row .st { display: flex; gap: 18px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.fol-row .st span { display: flex; align-items: center; gap: 7px; }
.fol-row .st .ic { width: 15px; height: 15px; color: #9a948a; }
.fol-row .btn { height: 32px; font-size: 12px; padding: 0 14px; }
.fol-list.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fol-list.grid .fol-row { grid-template-columns: 1fr; text-align: center; gap: 6px; }
.fol-list.grid .fol-row img { width: 100%; height: auto; aspect-ratio: 1; }
.fol-list.grid .fol-row .st, .fol-list.grid .fol-row .btn, .fol-list.grid .fol-row .icon-btn { display: none; }
.fol-list.grid .fol-row .nm { font-size: 12px; }

/* latest likes */
.latest-list { display: flex; flex-direction: column; }
.ll-row { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 0; cursor: pointer; }
.ll-row:hover .ti { color: var(--o); }
.ll-row .n { color: var(--o); font-weight: 700; font-size: 14px; }
.ll-row img { width: 40px; height: 40px; object-fit: cover; background: var(--paper-2); }
.ll-row .ti { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ll-row .ar { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-row .when { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }

/* ---------------- buttons, menus ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1.5px solid var(--line-2); background: var(--card); color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; white-space: nowrap;
}
.btn:hover { border-color: var(--o); color: var(--o); }
.btn.solid { background: var(--o); border-color: var(--o); color: #fff; }
.btn.solid:hover { background: var(--o-2); color: #fff; }
.btn.accent { color: var(--o); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 11px; }
.btn.big { height: 44px; padding: 0 22px; font-size: 13px; }
.btn.danger:hover { border-color: #c62828; color: #c62828; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.icon-btn:hover { color: var(--o); }
.icon-btn .ic { width: 18px; }

.menu {
  position: absolute; z-index: 60; min-width: 220px; max-height: 60vh; overflow-y: auto;
  background: var(--ink); color: #eee; border: 1.5px solid var(--o);
  padding: 6px 0; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.menu .mh { padding: 6px 14px 4px; color: var(--o); font-size: 10.5px; letter-spacing: .1em; }
.menu button, .menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 14px; font-size: 12px; letter-spacing: .03em; color: #eee;
}
.menu button:hover, .menu a:hover { background: var(--ink-3); color: var(--o); }
.menu button.on { color: var(--o); }
.menu button.on::after { content: "●"; margin-left: auto; font-size: 8px; }
.menu hr { border: 0; border-top: 1px dashed #444; margin: 5px 0; }
.menu .n { margin-left: auto; color: #8a857c; }
#crates-menu { right: 0; top: calc(100% + 12px); }
.sortwrap .menu { right: 0; top: calc(100% + 8px); }
.pop { position: fixed; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--ftr) + 18px); transform: translateX(-50%);
  background: var(--ink); color: #fff; border: 1.5px solid var(--o);
  padding: 10px 16px; font-size: 12.5px; letter-spacing: .03em; z-index: 90; max-width: 90vw;
}

/* ---------------- player ---------------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--ftr);
  display: grid; grid-template-columns: minmax(220px, 330px) auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 20px; padding: 0 18px 0 30px;
  background: var(--ink); color: #f2efe8; border-top: 1px solid #000;
}
.p-now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.p-now img { width: 48px; height: 48px; object-fit: cover; background: #333; flex: none; }
.p-meta { min-width: 0; flex: 1; }
.p-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-artist { font-size: 12px; color: #b5afa5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.p-artist:hover { color: var(--o); }
.p-btn { width: 34px; height: 34px; display: grid; place-items: center; color: #f2efe8; position: relative; flex: none; }
.p-btn .ic { width: 22px; height: 22px; }
.p-btn:hover { color: var(--o); }
.p-btn.on { color: var(--o); }
#p-heart { color: var(--o); }
.rep1 { position: absolute; right: 3px; top: 3px; font-size: 9px; font-weight: 800; color: var(--o); display: none; }
.p-btn.one .rep1 { display: block; }
.p-ctrl { display: flex; align-items: center; gap: 16px; }
.p-play { width: 50px; height: 50px; border-radius: 50%; background: var(--o); color: #fff; display: grid; place-items: center; }
.p-play .ic { width: 24px; height: 24px; }
.p-play:hover { background: var(--o-2); }
.p-wave { height: 40px; min-width: 0; cursor: pointer; }
.p-wave canvas { width: 100%; height: 100%; display: block; }
.p-time { font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; }
.p-vol { display: flex; align-items: center; gap: 8px; }
.p-vol input { width: 120px; accent-color: var(--o); height: 4px; }
.p-vol input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.p-vol input::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--o) var(--v, 80%), #555 var(--v, 80%)); }
.p-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -5px; }
.p-vol input::-moz-range-track { height: 4px; background: #555; }
.p-vol input::-moz-range-progress { height: 4px; background: var(--o); }
.p-vol input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.queue-pop { right: 12px; bottom: calc(var(--ftr) + 8px); width: 380px; position: fixed; }
.queue-pop .q-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.queue-pop .q-row img { width: 34px; height: 34px; object-fit: cover; }
.queue-pop .q-row .a { color: #8a857c; font-size: 11px; }
/* the real widget lives here, invisible — our controls drive it */
#sc-frame { position: absolute; width: 1px; height: 1px; left: 0; bottom: 0; opacity: 0; pointer-events: none; border: 0; }

/* ---------------- explore (watcher) ---------------- */
.subtabs { display: flex; gap: 6px; }
.subtabs button { padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: .05em; border: 1.5px solid var(--line-2); background: var(--paper); }
.subtabs button:hover { border-color: var(--o); }
.subtabs button.on { background: var(--o); border-color: var(--o); color: #fff; }
.subtabs.small button { padding: 5px 9px; font-size: 11px; }
.hint { color: var(--muted); font-size: 12px; margin: 2px 0 10px; letter-spacing: .02em; }
.watch-add { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.watch-add input, #discover-q, .crate-new input {
  height: 34px; padding: 0 12px; border: 1.5px solid var(--line-2); background: var(--paper); outline: none; min-width: 0;
}
.watch-add input { flex: 1 1 320px; }
.watch-add input:focus, #discover-q:focus, .crate-new input:focus { border-color: var(--o); }
.prog { color: var(--o); font-size: 12px; letter-spacing: .03em; }
.plist { display: flex; flex-direction: column; }
.p-row {
  display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 8px 4px; border-bottom: 1px dashed var(--line-2); cursor: pointer;
}
.p-row:hover { background: rgba(255,79,23,.04); }
.p-row img { width: 52px; height: 52px; object-fit: cover; background: var(--paper-2); }
.p-row .rk { color: var(--o); font-weight: 700; min-width: 40px; text-align: right; }
.p-row .ti { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .ar { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .meta { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.p-row .meta b { color: var(--text); }
.p-row .acts { display: flex; gap: 6px; }
.p-row .who { color: var(--o); font-size: 12px; }
.discover-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.discover-head > div:first-child { flex: 1 1 100%; }
.disc-title { font-weight: 700; letter-spacing: .06em; }
#discover-q { width: 200px; }
.wprof-head { display: flex; align-items: center; gap: 16px; }
.wprof-head img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--o); }
.wprof-name { font-size: 17px; font-weight: 700; }
.wprof-head .hint { margin: 2px 0 0; }
#wprof-view { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* ---------------- drawer + modals ---------------- */
.drawer {
  position: fixed; right: 0; top: var(--hdr); bottom: var(--ftr); width: 440px; max-width: 100vw; z-index: 70;
  background: var(--card); border-left: 2px solid var(--o); overflow-y: auto; padding: 16px;
  box-shadow: -16px 0 40px rgba(0,0,0,.18);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.crate-new { display: flex; gap: 8px; margin-bottom: 14px; }
.crate-new input { flex: 1; }
.crate-row { display: flex; justify-content: space-between; padding: 12px 6px; border-bottom: 1px dashed var(--line-2); cursor: pointer; font-weight: 600; }
.crate-row:hover { color: var(--o); }
.crate-row .n { color: var(--muted); font-weight: 400; }
.crate-detail-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.crate-detail-head h3 { margin: 4px 0 0; font-size: 16px; }
.export-row { display: flex; gap: 6px; }
.ct-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line-2); cursor: pointer; }
.ct-row img { width: 44px; height: 44px; object-fit: cover; }
.ct-row .ti { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row .ar { color: var(--muted); font-size: 12px; }

.modal { position: fixed; inset: 0; z-index: 80; background: rgba(19,19,19,.6); display: grid; place-items: center; padding: 20px; }
.modal-card { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background-color: var(--card); padding: 20px 22px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--line); background: var(--paper); padding: 12px; }
.stat .v { font-size: 22px; font-weight: 700; color: var(--o); }
.stat .k { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.sec-h { margin: 18px 0 6px; font-size: 11.5px; color: var(--muted); letter-spacing: .1em; }
.timeline { display: flex; align-items: flex-end; gap: 1px; height: 110px; border-bottom: 1px solid var(--line-2); }
.timeline div { flex: 1; background: var(--o); min-width: 1px; }
.timeline div:hover { background: var(--ink); }
.timeline-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two-col h4 { margin: 18px 0 6px; font-size: 11.5px; color: var(--muted); letter-spacing: .1em; font-weight: 600; }
.rank-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.rank-row .c { color: var(--o); font-weight: 600; }

.dig-card { width: min(560px, 100%); }
.dig-field { margin-bottom: 16px; }
.dig-field label { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .1em; margin-bottom: 8px; }
.dig-field select { width: 100%; height: 38px; padding: 0 10px; border: 1.5px solid var(--line-2); background: var(--paper); }
.dig-eras { display: flex; flex-wrap: wrap; gap: 6px; }
.dig-eras label { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 12px; color: var(--text); letter-spacing: 0; margin: 0; }
.dig-eras input { accent-color: var(--o); }
.dig-eras-quick { display: flex; gap: 8px; margin-top: 8px; }
#dig-start { width: 100%; }
.dig-stage-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); margin-bottom: 12px; }
#dig-art { width: 260px; height: 260px; object-fit: cover; margin: 0 auto; background: var(--paper-2); border: 1px solid var(--line); }
.dig-depth { text-align: center; color: var(--o); font-size: 12px; margin-top: 12px; letter-spacing: .03em; }
.dig-title { text-align: center; font-size: 17px; font-weight: 700; margin-top: 6px; }
.dig-artist { text-align: center; color: var(--muted); }
.dig-tags { display: flex; justify-content: center; gap: 10px; align-items: center; margin-top: 10px; }
.dig-controls { display: flex; justify-content: center; gap: 10px; margin: 18px 0 8px; }
.dig-done { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--o); }
.dig-deepest { margin: 14px 0; }
.dig-again-row { display: flex; gap: 10px; }

/* =====================================================================
   LIKELURK — 16-bit layer. Kept mostly subconscious: stepped corners,
   pixel icons, pixel numerals in tiny places, chunky waveforms.
   ===================================================================== */
:root {
  --step: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 3px, 100% 3px,
    100% calc(100% - 3px), calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) calc(100% - 1px), calc(100% - 3px) calc(100% - 1px),
    calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 3px), 0 calc(100% - 3px),
    0 3px, 1px 3px, 1px 1px, 3px 1px);
  --pxcircle: polygon(30% 0, 70% 0, 70% 6%, 82% 6%, 82% 12%, 88% 12%, 88% 18%, 94% 18%, 94% 30%, 100% 30%, 100% 70%,
    94% 70%, 94% 82%, 88% 82%, 88% 88%, 82% 88%, 82% 94%, 70% 94%, 70% 100%, 30% 100%, 30% 94%, 18% 94%, 18% 88%,
    12% 88%, 12% 82%, 6% 82%, 6% 70%, 0 70%, 0 30%, 6% 30%, 6% 18%, 12% 18%, 12% 12%, 18% 12%, 18% 6%, 30% 6%);
}
.ic { shape-rendering: crispEdges; }
.btn, .tag, .erabar button, .viewtoggle button, .subtabs button, .seg button, .r-time, .hdr-cta, .search,
.genre-select select, .fsel select, .p-row img, .wl-row img, .menu, .toast, .stat, .nav-box { clip-path: var(--step); }
.r-play, .p-play { border-radius: 0; clip-path: var(--pxcircle); }
.r-num, .r-time, .tag, .c-num, .r-art .kind, .menu .mh, .ll-row .n, .rk, .o-br, .nav-badge, .logo-chip,
.sysbar .px, .t-badge, .rep1, .erabar button span, .ra-row .n { font-family: var(--pixel); letter-spacing: .04em; }
.r-num { font-size: 17px; }
.tag { font-weight: 400; font-size: 11px; }
.r-time { font-size: 10.5px; padding: 3px 6px 2px; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--o); }

/* brand */
.logo-mark { width: 46px; height: 32px; }
.logo-chip { align-self: flex-start; margin: 2px 0 0 -6px; font-size: 9px; color: var(--ink); background: var(--o); padding: 1px 3px; line-height: 1.2; }
.nav .ic { width: 13px; height: 13px; }
.nav-box { border: 1.5px solid var(--o); color: var(--o) !important; margin-left: 6px; position: relative; padding: 7px 11px !important; }
.nav-box.on { background: var(--o); color: #fff !important; }
.nav-box.on::before, .nav-box.on::after { content: none !important; }
.nav-badge { position: absolute; top: 1px; right: 1px; background: #fff; color: var(--ink); font-size: 8px; padding: 0 3px; line-height: 1.3; }
.crate-ic { color: var(--o); width: 18px; height: 18px; margin-right: 6px; }

/* footer: smaller controls, the waveform gets the room */
.player { grid-template-columns: minmax(200px, 300px) auto minmax(0, 1fr) auto auto auto auto; gap: 14px; padding: 0 12px 0 20px; }
.p-now img { width: 42px; height: 42px; }
.p-title { display: block; }
a.p-title:hover { color: var(--o); text-decoration: underline; text-underline-offset: 3px; }
.p-btn { width: 28px; height: 28px; }
.p-btn .ic { width: 17px; height: 17px; }
.p-ctrl { gap: 8px; }
.p-play { width: 38px; height: 38px; }
.p-play .ic { width: 18px; height: 18px; }
.p-wave { height: 38px; }
.p-time { font-size: 11.5px; }
.p-vol { gap: 4px; }
.p-vol input { width: 72px; }
#p-crate { color: var(--o); }

/* row extras */
.row .r-crate { align-self: start; margin-top: 12px; color: #2b2925; width: 26px; height: 22px; display: grid; place-items: center; }
.row .r-crate:hover { color: var(--o); }
.row .r-crate .ic { width: 16px; height: 16px; }
.row { grid-template-columns: 52px 94px 62px minmax(0, 1fr) 240px 26px 30px; }

/* crate pop: name a new crate inline */
.pop-new { display: flex; gap: 6px; padding: 6px 10px 4px; }
.pop-new input { flex: 1; min-width: 0; height: 28px; background: #0b0b0b; color: #eee; border: 1px solid #555; padding: 0 8px; outline: none; font-size: 12px; }
.pop-new input:focus { border-color: var(--o); }
.menu .pop-new button { width: auto; padding: 0 10px; background: var(--o); color: #fff; }
.dig-name { display: none; width: 100%; height: 38px; margin-top: 8px; padding: 0 10px; border: 1.5px solid var(--line-2); background: var(--paper); outline: none; }
.dig-name.show { display: block; }
.dig-name:focus { border-color: var(--o); }

/* shortcuts */
.keys-card { width: min(620px, 100%); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
.keys div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.keys kbd { font-family: var(--pixel); font-size: 11px; background: var(--ink); color: #fff; padding: 2px 6px; white-space: nowrap; }

/* ---------------- watcher ---------------- */
.shell.watch-mode { grid-template-columns: minmax(0, 1fr); }
.shell.watch-mode .side { display: none; }
.wtop { display: grid; grid-template-columns: auto minmax(0, 1fr) 190px auto; gap: 14px; }
.wtop .panel { padding: 12px 14px 14px; min-width: 0; }
.wtop .ph { margin-bottom: 10px; }
.seg { display: flex; gap: 8px; }
.seg button { height: 34px; padding: 0 14px; border: 1.5px solid var(--line-2); background: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: .05em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.seg button:hover { border-color: var(--o); }
.seg button.on { background: var(--o); border-color: var(--o); color: #fff; }
.seg .ic { width: 16px; height: 16px; }
.erabar.small button { flex-direction: row; min-width: 0; height: 34px; padding: 0 12px; gap: 6px; }
.erabar.small button b { font-size: 12.5px; }
.erabar.small button span { display: none; }
.genre-select.small select { height: 34px; font-size: 12px; }
.genre-select.small .ic { top: 9px; }
.wbody { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 14px; align-items: start; }
.wside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--hdr) + 14px); max-height: calc(100vh - var(--hdr) - var(--ftr) - 28px); overflow-y: auto; scrollbar-width: thin; }
.feedpanel .tabsbar { gap: 14px; }
.feed-mark { width: 20px; height: 20px; background: var(--o); color: #fff; display: grid; place-items: center; clip-path: var(--step); flex: none; }
.feed-mark .ic { width: 14px; height: 14px; }
.feed-title { font-weight: 700; letter-spacing: .06em; font-size: 13px; white-space: nowrap; }
.feed-sub { color: #3d3a35; font-size: 12px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-br { color: var(--o); font-weight: 400; margin-left: 10px; font-size: 13px; }

/* the "system monitor" strip */
.sysbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 9px 16px; border-bottom: 1px dashed var(--line-2); background: var(--paper); font-size: 11.5px; color: #3d3a35; letter-spacing: .04em; }
.sysbar .px { color: var(--ink); font-size: 12px; }
.sysbar .px.o { color: var(--o); }
.sysbar button { color: var(--o); font-weight: 600; letter-spacing: .04em; }
.sysbar button:hover { text-decoration: underline; }
.sysbar .blink { animation: blink 1.1s steps(2, start) infinite; color: var(--o); }
@keyframes blink { to { visibility: hidden; } }
.sysbar .spacer { flex: 1; }

/* tree */
.feed { padding: 6px 12px 10px 12px; }
.t-group { position: relative; padding-left: 40px; }
.t-node { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0 4px; }
.t-tog { position: absolute; left: 4px; top: 24px; width: 15px; height: 15px; background: var(--ink); color: #fff; font: 700 12px/15px var(--mono); text-align: center; }
.t-tog:hover { background: var(--o); }
.t-node img { width: 50px; height: 50px; object-fit: cover; background: var(--paper-2); clip-path: var(--step); cursor: pointer; }
.t-name { font-size: 17px; font-weight: 700; cursor: pointer; }
.t-name:hover { color: var(--o); }
.t-handle { color: var(--muted); font-size: 14px; }
.t-verb { font-size: 14px; color: #2b2925; }
.t-verb .ic { width: 13px; height: 13px; color: var(--o); vertical-align: -1px; margin-right: 4px; }
.t-badge { background: var(--o); color: #fff; font-size: 9.5px; padding: 2px 5px; }
.t-when { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.t-node .icon-btn { color: var(--text); }
.t-kids { position: relative; margin-left: 24px; padding-left: 24px; }
.t-kids::before { content: ""; position: absolute; left: 0; top: -6px; bottom: 28px; border-left: 2px dotted #9c958a; }
.t-group.collapsed .t-kids { display: none; }
.t-group + .t-group { border-top: 1px dashed var(--line-2); }
.t-more { padding: 4px 0 8px 132px; }
.t-more button { color: var(--o); font-size: 12px; font-weight: 600; letter-spacing: .04em; }

/* compact track row (tree + timeline) */
.row.compact {
  grid-template-columns: 78px 50px minmax(140px, 1.05fr) minmax(120px, 1.3fr) 56px 104px 170px 26px 28px;
  min-height: 0; padding: 4px 0; gap: 0; border-bottom: 1px solid rgba(201,192,174,.45); position: relative;
}
.t-kids .row.compact::before { content: ""; position: absolute; left: -24px; top: 32px; width: 20px; border-top: 2px dotted #9c958a; }
.t-kids .row.compact::after { content: ""; position: absolute; left: -6px; top: 29px; width: 6px; height: 6px; background: #9c958a; }
.row.compact .r-art { width: 70px; height: 52px; }
.row.compact .r-play { width: 34px; height: 34px; }
.row.compact .r-play .ic { width: 15px; height: 15px; }
.row.compact .r-body { padding: 0 14px 0 2px; }
.row.compact .r-title { font-size: 13.5px; }
.row.compact .r-artist { font-size: 12px; }
.row.compact .r-wave { height: 30px; margin: 0; }
.row.compact .c-dur { justify-self: start; background: var(--ink); color: #fff; font: 10.5px var(--pixel); padding: 3px 6px 2px; clip-path: var(--step); margin-left: 4px; }
.row.compact .tag { padding: 3px 8px; font-size: 10px; max-width: 96px; text-transform: lowercase; justify-self: start; }
.row.compact .r-stats { gap: 12px; font-size: 11.5px; padding-left: 6px; }
.row.compact .r-stats .ic { width: 13px; height: 13px; }
.row.compact .r-more, .row.compact .r-crate { margin-top: 0; align-self: center; }
.row.compact .r-who { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); padding: 2px 0 4px 0; }
.row.compact .r-who img { width: 18px; height: 18px; object-fit: cover; clip-path: var(--step); }
.row.compact .r-who b { color: var(--text); }
.row.compact .r-who .ic { width: 12px; height: 12px; color: var(--o); }
.row.compact .r-who .when { margin-left: auto; }
.row.compact.isnew .r-title a::after { content: "NEW"; font: 9px var(--pixel); background: var(--o); color: #fff; padding: 1px 4px; margin-left: 8px; vertical-align: 2px; }
.also { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px 132px; font-size: 12px; color: var(--muted); position: relative; }
.t-kids .also::before { content: ""; position: absolute; left: -24px; top: 50%; width: 120px; border-top: 2px dotted #c9c0ae; }
.also img { width: 22px; height: 22px; object-fit: cover; clip-path: var(--step); position: relative; background: var(--paper-2); }
.also b { color: var(--text); font-size: 13px; cursor: pointer; }
.also .you { color: var(--o); }
.also .when { margin-left: auto; padding-right: 60px; }
.feed .rows.grid { padding: 10px 4px; }
.card .c-who { position: absolute; left: 0; bottom: 0; right: 0; display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(19,19,19,.82); color: #fff; font-size: 11px; }
.card .c-who img { width: 16px; height: 16px; object-fit: cover; }
.card .c-who .ic { width: 11px; height: 11px; color: var(--o); margin-left: auto; }
.card .c-you { position: absolute; right: 0; top: 0; background: var(--o); color: #fff; font: 9.5px var(--pixel); padding: 3px 6px; }
.feed-empty { font-family: var(--mono); white-space: pre; line-height: 1.55; padding: 26px 22px; color: #2b2925; font-size: 13px; overflow-x: auto; }
.feed-empty .o { color: var(--o); }
.feed-empty .add { display: flex; gap: 8px; margin-top: 4px; white-space: normal; }
.feed-empty input { height: 34px; width: 340px; max-width: 100%; padding: 0 10px; border: 1.5px solid var(--line-2); background: var(--paper); outline: none; }

/* watch list sidebar */
.wl-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.wl-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 26px; gap: 12px; align-items: center; padding: 6px 4px; cursor: pointer; }
.wl-row:hover { background: rgba(255,79,23,.05); }
.wl-row.on { background: var(--o-soft); box-shadow: inset 3px 0 0 var(--o); }
.wl-row img { width: 46px; height: 46px; object-fit: cover; background: var(--paper-2); }
.wl-row .nm { font-weight: 700; font-size: 13.5px; line-height: 1.15; }
.wl-row .hd { color: var(--muted); font-size: 12px; }
.wl-row .st { display: flex; gap: 14px; font-size: 11.5px; margin-top: 2px; }
.wl-row .st span { display: flex; align-items: center; gap: 5px; }
.wl-row .st .ic { width: 12px; height: 12px; }
.wl-row .btn { height: 30px; font-size: 11px; padding: 0 12px; }
.wl-add { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.wl-add input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 1.5px solid var(--line-2); background: var(--paper); outline: none; font-size: 12px; }
.wl-add input:focus { border-color: var(--o); }
.filters { display: flex; flex-direction: column; gap: 8px; }
.fsel { position: relative; display: block; }
.fsel select { appearance: none; -webkit-appearance: none; width: 100%; height: 32px; padding: 0 30px 0 12px; border: 1.5px solid var(--line-2); background: var(--paper); font-size: 12.5px; cursor: pointer; outline: none; }
.fsel select:focus, .fsel select.set { border-color: var(--o); }
.fsel select.set { color: var(--o); font-weight: 600; }
.fsel .ic { position: absolute; right: 10px; top: 9px; width: 13px; height: 13px; pointer-events: none; }
.ra-list { display: flex; flex-direction: column; }
.ra-row { display: grid; grid-template-columns: 28px 24px minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; cursor: pointer; }
.ra-row:hover b { color: var(--o); }
.ra-row .n { color: var(--o); font-size: 13px; }
.ra-row img { width: 24px; height: 24px; object-fit: cover; clip-path: var(--step); }
.ra-row .nw { color: #3d3a35; white-space: nowrap; }
.ra-row .when { color: var(--muted); text-align: right; white-space: nowrap; }

@media (max-width: 1500px) {
  .wtop { grid-template-columns: auto minmax(0, 1fr) 170px; }
  .wtop > .panel:last-child { grid-column: 1 / -1; }
  .row.compact { grid-template-columns: 70px 46px minmax(120px, 1fr) minmax(100px, 1fr) 54px 96px 26px 28px; }
  .row.compact .r-stats { display: none; }
}
@media (max-width: 1080px) {
  .wtop { grid-template-columns: 1fr; }
  .wbody { grid-template-columns: 1fr; }
  .wside { position: static; max-height: none; order: -1; }
  .row.compact { grid-template-columns: 64px 42px minmax(0, 1fr) 54px 28px; }
  .row.compact .r-wave, .row.compact .tag, .row.compact .r-crate { display: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1500px) {
  .tagline { display: none; }
}
@media (max-width: 1280px) {
  :root { --side: 360px; }
  .row { grid-template-columns: 44px 80px 54px minmax(0, 1fr) 200px 26px 30px; }
  .r-art { width: 80px; height: 76px; }
  .r-stats { gap: 10px; }
  .nav > button, .nav-drop > button { padding: 7px 6px; }
}
@media (max-width: 1080px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; order: -1; display: grid; grid-template-columns: 1fr 1fr; }
  .side > .panel:first-child { grid-column: 1 / -1; }
  .search { display: none; }
}
@media (max-width: 760px) {
  :root { --hdr: auto; }
  .hdr { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
  .hdr-noise { display: none; }
  .logo-word { font-size: 26px; }
  .nav { order: 3; width: 100%; overflow-x: auto; margin: 0; }
  .search { display: flex; order: 4; flex-basis: 100%; max-width: none; }
  .shell { padding: 12px 16px 0; }
  .side { grid-template-columns: 1fr; }
  .index { grid-template-columns: 1fr; }
  .index-genre { border: 0; width: auto; padding-top: 12px; }
  .row { grid-template-columns: 34px 64px minmax(0, 1fr) 28px; grid-template-areas: "n a b m" "n a s m"; min-height: 0; }
  .r-num { grid-area: n; font-size: 14px; } .r-num::before { display: none; }
  .r-art { grid-area: a; width: 64px; height: 64px; }
  .r-play { display: none; }
  .r-body { grid-area: b; padding: 0 10px; }
  .r-side { grid-area: s; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 4px 10px 0; gap: 8px; }
  .r-stats { display: none; }
  .r-more { grid-area: m; }
  .tabsbar { overflow-x: auto; }
  .tabs button { padding: 0 12px; }
  .count { display: none; }
  .player { grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; gap: 10px; }
  .p-wave, .p-time, .p-vol, #p-more, #p-shuffle, #p-repeat, #p-queue, #p-keys, .row .r-crate { display: none; }
  .p-ctrl { gap: 6px; }
  .p-play { width: 42px; height: 42px; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .row.compact { grid-template-areas: none; }
  .row.compact > * { grid-area: auto; }
  .row.compact .r-play { display: grid; }
  .wtop .seg { flex-wrap: wrap; }
  .feed-sub { display: none; }
  .t-group { padding-left: 26px; }
  .t-kids { margin-left: 6px; padding-left: 14px; }
  .also { padding-left: 20px; }
}

/* =====================================================================
   genre chips above the year index · person pages · search jump menu
   ===================================================================== */
.nav > button .ic, .nav-drop > button .ic:not(.chev) { width: 12px; height: 12px; margin-right: 2px; }
.tabs button .ic { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

.index2 { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.index2 .ph { margin-bottom: 8px; }
.genre-row .ph-row { margin-bottom: 8px; }
.gchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.gchip {
  height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #ece8df; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; clip-path: var(--step); white-space: nowrap;
}
.gchip span { font: 9.5px var(--pixel); color: #8f8a80; letter-spacing: .03em; }
.gchip:hover { background: #2c2a27; color: var(--o); }
.gchip.on { background: var(--o); color: #fff; }
.gchip.on span { color: rgba(255,255,255,.8); }
.gchip.zero { opacity: .35; }
.gchip.all { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ink); }
.gchip.all.on { background: var(--ink); color: var(--o); box-shadow: none; }
.gmore { position: relative; display: inline-flex; }
.gmore select {
  appearance: none; -webkit-appearance: none; height: 24px; padding: 0 22px 0 8px; max-width: 150px;
  background: var(--paper); border: 1.5px dashed var(--line-2); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; outline: none; color: var(--muted);
}
.gmore select.set { border-style: solid; border-color: var(--o); color: var(--o); }
.gmore .ic { position: absolute; right: 6px; top: 6px; width: 11px; height: 11px; pointer-events: none; }
.dice { gap: 7px; height: 26px; padding: 0 10px; font-size: 11px; background: var(--ink); color: #fff; border-color: var(--ink); }
.dice:hover { background: var(--o); border-color: var(--o); color: #fff; }
.dice .ic { width: 12px; height: 12px; }
.dice.roll .ic { animation: roll .4s steps(4) 1; }
@keyframes roll { to { transform: rotate(360deg); } }
.picked { font: 10px var(--pixel); color: var(--o); letter-spacing: .04em; }

/* person page */
.person-head { display: grid; grid-template-columns: auto 104px minmax(0, 1fr) auto; gap: 0 18px; align-items: center; padding: 16px 18px 0; }
.person-head .back { align-self: start; }
.person-head .p-avatar { width: 104px; height: 104px; }
.ph-info { min-width: 0; }
.ph-name { font-size: 22px; font-weight: 800; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-name .badge { font: 9.5px var(--pixel); padding: 2px 6px; background: var(--ink); color: var(--o); letter-spacing: .05em; }
.ph-name .badge.w { background: var(--o); color: #fff; }
.ph-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ph-info .p-counts { margin: 8px 0 0; }
.ph-acts { display: flex; gap: 8px; align-self: start; flex-wrap: wrap; justify-content: flex-end; }
.ph-acts .btn .ic { width: 12px; height: 12px; }
.lurkbar { grid-column: 1 / -1; margin: 14px -18px 0; border-top: 1px dashed var(--line-2); border-bottom: 0; }
.pbar { display: inline-flex; gap: 2px; vertical-align: -2px; }
.pbar i { width: 6px; height: 10px; background: var(--line-2); display: block; }
.pbar i.f { background: var(--o); }
.pbar.busy i.f:last-of-type { animation: blink 0.8s steps(2, start) infinite; }
.person-head .skeleton { grid-column: 2 / -1; text-align: left; padding: 30px 0; }
#person-view { display: flex; flex-direction: column; gap: 14px; }
.p-name a.inapp:hover { color: var(--o); }
.p-acts .btn .ic { width: 12px; height: 12px; }
.p-name .fchip { font: 9px var(--pixel); color: var(--o); border: 1px solid var(--o); padding: 0 4px; letter-spacing: .04em; }
.fol-row .nm { cursor: pointer; }

/* search: paste a url / type a name → jump */
.search { position: relative; }
.search-menu { left: -1px; right: -1px; top: calc(100% + 6px); min-width: 0; }
.search-menu .row-p { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.search-menu img { width: 28px; height: 28px; object-fit: cover; clip-path: var(--step); background: #333; }
.search-menu .sub { color: #8a857c; font-size: 11px; }
.search-menu .k { font: 9px var(--pixel); color: #8a857c; }
.search-menu button.hot { color: var(--o); }
.search-menu .ic { width: 12px; height: 12px; }

/* toast with an action */
.toast { display: flex; align-items: center; gap: 14px; }
.toast button { color: var(--o); font-weight: 700; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .person-head { grid-template-columns: 72px minmax(0, 1fr); }
  .person-head .back { grid-column: 1 / -1; margin-bottom: 10px; }
  .person-head .p-avatar { width: 72px; height: 72px; }
  .ph-acts { grid-column: 1 / -1; justify-content: flex-start; margin-top: 10px; }
}
.search { clip-path: none; }

/* =====================================================================
   DENSITY PASS — one spacing scale (4 · 8 · 10 · 12 · 16), smaller type,
   tighter rows. Overrides the sizes above; keep new UI on these tokens.
   ===================================================================== */
:root { --hdr: 50px; --ftr: 54px; --side: 340px; --g: 10px; --pad: 12px; }
body { font-size: 12px; padding-bottom: calc(var(--ftr) + 6px); }
.shell { gap: var(--g); padding: var(--g) var(--g) 0; }
.main, .view, .side, .wside, #person-view, #wprof-view { gap: var(--g); }
.side, .wside { top: calc(var(--hdr) + var(--g)); max-height: calc(100vh - var(--hdr) - var(--ftr) - 2 * var(--g)); }
.panel { padding: 10px var(--pad); }
.ph { font-size: 12px; letter-spacing: .07em; }
.ph-row { margin-bottom: 8px; }
.viewall { font-size: 10.5px; }
.hint { font-size: 11.5px; margin: 0 0 8px; }

/* header */
.hdr { gap: 16px; padding: 0 12px 0 30px; }
.hdr-noise { width: 34px; }
.logo { gap: 8px; }
.logo-mark { width: 30px; height: 20px; }
.logo-word { font-size: 22px; letter-spacing: .5px; }
.logo-chip { font-size: 8px; margin-left: -4px; }
.tagline { font-size: 11px; line-height: 1.5; }
.tagline .dim { font-size: 10.5px; }
.search { height: 30px; max-width: 420px; }
.search input { font-size: 12px; }
.nav > button, .nav-drop > button { font-size: 11px; padding: 6px 7px; }
.nav-box { padding: 6px 9px !important; }
.me { width: 30px; height: 30px; }
.hdr-cta { height: 30px; font-size: 11px; padding: 0 10px; }

/* buttons + chips */
.btn { height: 28px; padding: 0 10px; font-size: 11px; }
.btn.sm { height: 24px; padding: 0 8px; font-size: 10.5px; }
.btn.big { height: 36px; padding: 0 16px; font-size: 12px; }
.icon-btn { width: 24px; height: 24px; }
.tag { padding: 3px 8px; font-size: 10px; }
.gchip { height: 22px; padding: 0 7px; font-size: 10.5px; gap: 5px; }
.gchip span { font-size: 9px; }
.dice { height: 22px; font-size: 10.5px; padding: 0 8px; }
.gmore select { height: 22px; font-size: 10.5px; }
.gmore .ic { top: 5px; }
.subchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.subchips .sub-l { font: 9.5px var(--pixel); color: var(--o); letter-spacing: .05em; margin-right: 4px; }
.gchip.sub { background: #3a3732; }
.gchip.sub.on { background: var(--o); }

/* index panel */
.index2 { padding: 10px var(--pad); gap: 10px; }
.erabar { gap: 5px; }
.erabar button { min-width: 50px; padding: 5px 6px 4px; gap: 2px; }
.erabar button b { font-size: 12px; }
.erabar button span { font-size: 9.5px; }

/* list panel */
.tabsbar { height: 40px; padding: 0 var(--pad); }
.tabsbar .gridicon { margin-right: 16px; }
.tabsbar .gridicon .ic { width: 16px; height: 16px; }
.tabs button { padding: 0 14px; font-size: 11px; }
.tabs button + button::before { top: 13px; bottom: 13px; }
.tabs button.on::after { left: 12px; right: 12px; bottom: 6px; height: 2px; }
.sortbtn { font-size: 11px; }
.count { margin-left: 16px; font-size: 11px; }
.sortwrap { display: flex; align-items: center; gap: 8px; }
.shufbtn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text); clip-path: var(--step); }
.shufbtn .ic { width: 14px; height: 14px; }
.shufbtn:hover { color: var(--o); }
.shufbtn.on { background: var(--o); color: #fff; }
.shufbtn.on:active { transform: translateY(1px); }

.row { grid-template-columns: 40px 72px 48px minmax(0, 1fr) 200px 24px 26px; min-height: 0; padding: 6px 0; }
.r-num { font-size: 14px; }
.r-num::before { top: 4px; height: 10px; }
.r-art { width: 72px; height: 66px; }
.r-play { width: 34px; height: 34px; }
.r-play .ic { width: 15px; height: 15px; }
.r-body { padding-right: 18px; }
.r-title { font-size: 13px; }
.r-artist { font-size: 11.5px; }
.r-wave { height: 28px; margin-top: 2px; }
.r-time { font-size: 9.5px; padding: 2px 5px 1px; bottom: 2px; }
.r-av { height: 16px; margin-top: 3px; }
.r-av img { width: 14px; height: 14px; }
.r-av .plus { font-size: 10.5px; margin-left: 6px; }
.r-side { gap: 5px; }
.r-stats { gap: 12px; font-size: 11px; }
.r-stats span { gap: 5px; }
.r-stats .ic { width: 12px; height: 12px; }
.r-date { font-size: 10.5px; }
.r-more, .row .r-crate { margin-top: 8px; }
.r-more .ic, .row .r-crate .ic { width: 14px; height: 14px; }
.rows.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: var(--pad); }
.card .r-title { font-size: 12px; }
.empty { padding: 32px 16px; font-size: 12px; }

/* sidebar */
.viewtoggle { gap: 8px; margin-top: 8px; }
.viewtoggle button { height: 34px; font-size: 11px; gap: 8px; }
.viewtoggle .ic { width: 16px; height: 16px; }
.mini-toggle { font-size: 10.5px; gap: 8px; }
.profile { grid-template-columns: 88px minmax(0, 1fr); gap: 0 12px; }
.p-avatar { width: 88px; height: 88px; }
.p-avatar::before, .p-avatar::after { width: 12px; height: 12px; border-width: 2px; }
.p-name { font-size: 14px; }
.p-loc { font-size: 11px; }
.p-counts { gap: 14px; margin: 4px 0 6px; font-size: 11.5px; }
.p-counts .ic { width: 13px; height: 13px; }
.p-acts { gap: 6px; flex-wrap: wrap; }
.p-acts .btn { height: 26px; padding: 0 8px; font-size: 10.5px; }
.p-bio { font-size: 11px; margin-top: 10px; }
.fol-row { grid-template-columns: 38px minmax(0, 1fr) auto 22px; gap: 10px; padding: 4px 0; }
.fol-row img { width: 38px; height: 38px; }
.fol-row .nm { font-size: 12.5px; }
.fol-row .st { gap: 12px; font-size: 11px; margin-top: 2px; }
.fol-row .btn { height: 26px; font-size: 10.5px; padding: 0 8px; }
.ll-row { grid-template-columns: 22px 32px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; }
.ll-row .n { font-size: 12px; }
.ll-row img { width: 32px; height: 32px; }
.ll-row .ti { font-size: 11.5px; }
.ll-row .ar, .ll-row .when { font-size: 10.5px; }

/* player */
.player { gap: 12px; padding: 0 10px 0 14px; grid-template-columns: minmax(180px, 280px) auto minmax(0, 1fr) auto auto auto auto; }
.p-now { gap: 10px; }
.p-now img { width: 38px; height: 38px; }
.p-title { font-size: 12.5px; }
.p-artist { font-size: 11px; }
.p-btn { width: 26px; height: 26px; }
.p-btn .ic { width: 15px; height: 15px; }
.p-ctrl { gap: 6px; }
.p-play { width: 34px; height: 34px; }
.p-play .ic { width: 16px; height: 16px; }
.p-wave { height: 34px; }
.p-time { font-size: 11px; }
.p-vol input { width: 64px; }

/* modals: stats / dig / shortcuts */
.modal-card { padding: 14px 16px; }
.modal-head { margin-bottom: 10px; }
.stat-grid { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stat { padding: 8px 10px; }
.stat .v { font-size: 17px; }
.stat .k { font-size: 10px; }
.sec-h { margin: 12px 0 4px; font-size: 10.5px; }
.timeline { height: 80px; }
.two-col { gap: 16px; }
.two-col h4 { margin: 12px 0 4px; font-size: 10.5px; }
.rank-row { padding: 3px 0; font-size: 11.5px; }
.keys { gap: 2px 20px; }
.keys div { padding: 4px 0; font-size: 11.5px; }
#dig-art { width: 220px; height: 220px; }
.dig-field { margin-bottom: 12px; }
.dig-field select, .dig-name { height: 32px; }
.drawer { width: 380px; padding: 12px; }
.crate-row { padding: 9px 4px; }
.ct-row { grid-template-columns: 38px minmax(0, 1fr) 24px; gap: 8px; padding: 5px 0; }
.ct-row img { width: 38px; height: 38px; }
.toast { padding: 8px 12px; font-size: 11.5px; }
.menu button, .menu a { padding: 6px 12px; font-size: 11.5px; }

/* person page */
.person-head { grid-template-columns: auto 72px minmax(0, 1fr) auto; gap: 0 14px; padding: 12px var(--pad) 0; }
.person-head .p-avatar { width: 72px; height: 72px; }
.ph-name { font-size: 17px; }
.ph-sub { font-size: 11.5px; }
.ph-info .p-counts { margin-top: 4px; }
.lurkbar { margin: 10px calc(-1 * var(--pad)) 0; }

/* ---------------- watcher ---------------- */
.wtabs { display: flex; gap: 4px; }
.wtabs button {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.wtabs button .ic { width: 12px; height: 12px; }
.wtabs button:hover { color: var(--text); }
.wtabs button.on { color: var(--o); border-bottom-color: var(--o); }
.wtop { gap: var(--g); grid-template-columns: auto minmax(0, 1fr) 170px auto; }
.wtop .panel { padding: 8px 10px 10px; }
.wtop .ph { margin-bottom: 8px; }
.seg { gap: 5px; }
.seg button { height: 28px; padding: 0 10px; font-size: 11px; gap: 6px; }
.seg .ic { width: 13px; height: 13px; }
.erabar.small button { height: 28px; padding: 0 9px; }
.erabar.small button b { font-size: 11.5px; }
.genre-select.small select { height: 28px; font-size: 11px; }
.genre-select.small .ic { top: 7px; }
.wbody { gap: var(--g); }
.sysbar { padding: 6px var(--pad); gap: 4px 14px; font-size: 10.5px; }
.sysbar .px { font-size: 10.5px; }
.feed-title { font-size: 12px; }
.feed-sub { font-size: 11px; }
.wl-row { grid-template-columns: 38px minmax(0, 1fr) auto 22px; gap: 10px; padding: 4px; }
.wl-row img { width: 38px; height: 38px; }
.wl-row .nm { font-size: 12.5px; }
.wl-row .hd { font-size: 11px; }
.wl-row .st { font-size: 10.5px; gap: 10px; }
.wl-row .btn { height: 26px; font-size: 10.5px; padding: 0 8px; }
.wl-add { margin-top: 8px; padding-top: 8px; }
.wl-add input { height: 26px; }
.fsel select { height: 28px; font-size: 11.5px; }
.fsel .ic { top: 8px; }
.filters { gap: 6px; }
.ra-row { padding: 3px 0; font-size: 11.5px; grid-template-columns: 22px 22px minmax(0, 1fr) auto 56px; gap: 8px; }
.ra-row img { width: 22px; height: 22px; }
.p-row { padding: 6px 4px; gap: 10px; grid-template-columns: auto 40px minmax(0, 1fr) auto auto; }
.p-row img { width: 40px; height: 40px; }
.watch-add, .discover-head { margin-bottom: 10px; gap: 8px; }
.watch-add input, #discover-q { height: 28px; }

/* Tree geometry: avatar -> activity -> track -> shared likes. */
.feed { padding: 0 var(--pad) 8px; }
.t-group { padding: 0; }
.t-group + .t-group { border-top: 1px solid var(--line); }
.t-node { min-height: 48px; gap: 9px; padding: 6px 0 2px; flex-wrap: wrap; }
.t-node img { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 3px; clip-path: none; }
.t-name { font-size: 13px; }
.t-handle, .t-verb { font-size: 11px; }
.t-verb { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.t-verb .ic { width: 11px; height: 11px; margin: 0; }
.t-when { font-size: 10px; margin-left: auto; }
.t-car { font-size: 9px; }
.t-kids { --branch: #a49d91; --elbow: 36px; position: relative; margin: 0 0 6px 17px; padding: 0; }
.t-kids::before { content: none; }
.t-kids > .t-item { position: relative; padding: 0; }
.t-kids > .t-item::before { content: ""; position: absolute; left: 0; top: 0; width: var(--elbow); height: 28px; border-left: 1px dashed var(--branch); border-bottom: 1px dashed var(--branch); }
.t-kids > .t-item:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 28px; bottom: 0; border-left: 1px dashed var(--branch); }
.t-kids .row.compact { position: relative; padding: 4px 0 4px 48px; min-height: 56px; border-bottom: 1px solid rgba(201,192,174,.35); grid-template-columns: 80px 40px minmax(100px, 1fr) minmax(70px, .5fr) 44px 22px 24px; }
.t-kids .row.compact::before, .t-kids .row.compact::after { content: none; }
.t-kids .row.compact > .tn { position: absolute; left: calc(var(--elbow) - 3px); top: 25px; width: 6px; height: 6px; border: 1px solid var(--branch); background: var(--card); box-shadow: none; }
.row.compact .r-art { width: 80px; height: 46px; border-radius: 3px; overflow: hidden; }
.row.compact .r-art img { clip-path: none; }
.row.compact .r-play { width: 30px; height: 30px; }
.row.compact .r-play .ic { width: 13px; height: 13px; }
.row.compact .r-title { font-size: 12px; }
.row.compact .r-artist { font-size: 11px; }
.row.compact .r-wave { height: 24px; }
.row.compact .c-dur { font-size: 9.5px; }
.row.compact .r-who { font-size: 10.5px; padding: 0 0 3px; }
.t-kids .row.compact > .tag, .t-kids .row.compact > .r-stats, .t-kids .row.compact > span:empty { display: none; }
.t-overlaps { margin-left: 36px; }
.t-kids .t-overlaps .also { position: relative; min-height: 30px; padding: 3px 0 3px 48px; gap: 6px; font-size: 10.5px; flex-wrap: wrap; }
.t-kids .t-overlaps .also::before { content: ""; position: absolute; left: 0; top: 0; height: 15px; width: 34px; border-left: 1px dashed var(--branch); border-bottom: 1px dashed var(--branch); }
.t-kids .t-overlaps .also:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 15px; bottom: 0; border-left: 1px dashed var(--branch); }
.t-kids .t-overlaps .tn { position: absolute; left: 31px; top: 12px; width: 7px; height: 7px; border: 1px solid var(--branch); border-radius: 50%; background: var(--card); box-shadow: none; }
.also img { width: 22px; height: 22px; border-radius: 3px; clip-path: none; }
.also b { font-size: 11px; }
.also .h { color: var(--muted); }
.also .when { font-size: 10px; padding-right: 4px; }
.t-kids > .t-more { min-height: 28px; padding: 5px 0 5px 48px; font-size: 10.5px; }
.t-kids > .t-more::before { left: 0; top: 0; height: 14px; width: 36px; border-left: 1px dashed var(--branch); border-bottom: 1px dashed var(--branch); }
.t-more .tn { left: 33px; top: 11px; }
.timeline-feed .row.compact { grid-template-columns: 80px 40px minmax(100px, 1fr) minmax(70px, .6fr) 44px 84px 22px 24px; padding: 5px 0; }
.timeline-feed .r-stats { display: none; }
.feed-empty { font-size: 12px; padding: 16px; }

/* Shared density and responsive controls. */
.wtop { display: flex; flex-wrap: wrap; gap: 8px; }
.wtop > .panel { flex: 0 0 auto; padding: 8px 10px; }
.wtop > .w-years { flex: 1 1 200px; min-width: 0; }
.wtop > .panel:has(#w-genre) { flex-basis: 150px; }
.wtop .ph { margin-bottom: 6px; }
.erabar.small { flex-wrap: wrap; }
.wbody { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.wside { gap: 8px; }
.feed-sub { display: none; }
.feedpanel { min-width: 0; }
.subchips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; }
.subchips .sub-l { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.subchips select { max-width: 260px; height: 28px; padding: 0 26px 0 8px; background: var(--card); border: 1px solid var(--line-2); font-size: 11px; }
.subchips .hint { margin: 0; font-size: 10px; }
#stats-modal .modal-card { max-width: 720px; }
#stats-modal .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#stats-modal .stat { padding: 8px; }
#stats-modal .timeline { height: 64px; }
.p-acts { flex-wrap: nowrap; }
.p-acts .btn { min-width: 0; }
#view-explore .panel { padding: 12px; }
#view-explore .discover-head { flex-wrap: wrap; align-items: center; }
#view-explore .disc-title { font-size: 13px; }
#view-explore .plist { max-width: 100%; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
@media (max-width: 1280px) {
  .hdr { gap: 10px; padding-left: 12px; }
  .hdr-cta { display: none; }
  .nav > button, .nav-drop > button { padding: 6px; font-size: 10.5px; }
  .search { min-width: 150px; }
  .wbody { grid-template-columns: minmax(0, 1fr) 250px; }
  .t-kids .row.compact { grid-template-columns: 72px 38px minmax(100px, 1fr) 44px 22px 24px; }
  .t-kids .row.compact .r-wave { display: none; }
  .row.compact .r-art { width: 72px; height: 46px; }
  .row { grid-template-columns: 36px 64px 44px minmax(0, 1fr) 180px 22px 24px; }
}
@media (max-width: 1080px) {
  .wbody { grid-template-columns: minmax(0, 1fr); }
  .wside { position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wside > .panel:last-child { display: none; }
  .timeline-feed .row.compact { grid-template-columns: 72px 38px minmax(0, 1fr) 44px 24px; }
  .timeline-feed .r-wave, .timeline-feed .tag, .timeline-feed .r-crate { display: none; }
}
@media (max-width: 760px) {
  .hdr { height: auto; min-height: var(--hdr); flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .logo-word { font-size: 20px; }
  .search { order: 2; flex: 1 1 calc(100% - 44px); max-width: none; }
  .nav { order: 3; width: 100%; justify-content: space-between; overflow-x: auto; }
  .nav > button, .nav-drop > button { font-size: 10px; white-space: nowrap; }
  .me { margin-left: auto; }
  .wtop > .panel { flex: 1 1 45%; }
  .wtop > .w-years { order: 4; flex-basis: 100%; }
  .wside { grid-template-columns: minmax(0, 1fr); }
  .t-node { column-gap: 6px; }
  .t-node img { width: 32px; height: 32px; }
  .t-handle { display: none; }
  .t-name { font-size: 12px; }
  .t-when { font-size: 9px; }
  .t-kids { --elbow: 20px; margin-left: 15px; }
  .t-kids .row.compact { padding-left: 30px; grid-template-columns: 56px 34px minmax(0, 1fr) 24px; }
  .row.compact .r-art { width: 56px; height: 44px; }
  .t-kids .row.compact .c-dur, .t-kids .row.compact .r-crate { display: none; }
  .t-overlaps { margin-left: 20px; }
  .t-kids .t-overlaps .also { padding-left: 28px; font-size: 10px; }
  .t-kids .t-overlaps .also::before { width: 20px; }
  .t-kids .t-overlaps .tn { left: 17px; }
  .also .h, .also .when { display: none; }
  .row { grid-template-columns: 28px 56px minmax(0, 1fr) 24px; }
  .person-head { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
  .person-head .back { grid-column: 1 / -1; margin: 0; }
  .person-head .p-avatar { width: 48px; height: 48px; }
  .person-head .ph-acts { grid-column: 1 / -1; justify-content: flex-start; }
  #stats-modal .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-row { grid-template-columns: 20px 32px minmax(0, 1fr) auto; gap: 7px; }
  .p-row img { width: 32px; height: 32px; }
  .p-row .meta { display: none; }
  .sortbtn { max-width: 180px; font-size: 10px; }
}

/* Compact watchlist identities leave room for names and counts. */
.wl-row { grid-template-columns: 34px minmax(0, 1fr) 18px 20px; gap: 7px; }
.wl-row img { width: 34px; height: 34px; }
.wl-row .nm, .wl-row .hd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-row .nm { font-size: 11.5px; }
.wl-row .st { gap: 9px; font-size: 10px; }
.wl-external { color: var(--muted); }
.wl-external .ic { width: 12px; height: 12px; }
.wside .ph-row { gap: 6px; }
.wside .ph { font-size: 11px; white-space: nowrap; }
.wside .viewall { white-space: nowrap; font-size: 9px; }
.wside .o-br { margin-left: 4px; font-size: 10px; }

@media (max-width: 1080px) {
  .side { order: 0; }
}
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; overflow: visible; justify-content: flex-start; gap: 3px; }
  .nav > button, .nav > .nav-drop { flex: 1 1 30%; margin: 0; min-height: 28px; }
  .nav-drop > button { width: 100%; min-height: 28px; }
  .nav-box { margin-left: 0; }
  .main { min-width: 0; }
  .wtop > .panel { flex-basis: 100%; }
  .feedpanel .tabsbar { flex-wrap: wrap; overflow: visible; gap: 8px; }
  .feedpanel .sortwrap { margin-left: auto; }
}

@media (max-width: 1080px) {
  .wside { order: 0; }
}
@media (max-width: 760px) {
  .wtop { gap: 6px; }
  .wtop .panel { padding: 6px 8px; }
  .wtop .ph { display: none; }
  .wtop .seg { flex-wrap: nowrap; gap: 4px; }
  .wtop .seg button { padding: 0 7px; font-size: 10px; height: 28px; }
  .wtop > .panel:has(#w-genre) { flex: 1 1 40%; }
  .wtop > .panel:has(#w-mode) { flex: 1 1 50%; }
  .erabar.small { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .erabar.small button { flex-shrink: 0; }
}

@media (max-width: 760px) {
  .wtop .viewseg .ic { display: none; }
  .feedpanel .tabsbar { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .feedpanel .sortwrap { flex-basis: 100%; justify-content: flex-end; }
}

/* Explore: compact people list beside a distinct personal watchlist. */
.explore-layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(270px, 330px); gap: 12px; align-items: start; justify-content: start; }
.explore-network { min-width: 0; }
#view-explore .discover-head { gap: 6px; }
#view-explore .discover-head > div:first-child { flex-basis: 100%; }
#view-explore #discover-q { flex: 1 1 150px; width: 150px; }
#view-explore .subtabs { gap: 4px; }
#view-explore .subtabs button { padding: 5px 6px; font-size: 10px; }
#discover-list .p-row { grid-template-columns: 24px 32px minmax(0, 1fr) 94px 86px; gap: 8px; padding: 6px 0; }
#discover-list .p-row img { width: 32px; height: 32px; }
#discover-list .rk { min-width: 0; font-size: 10px; }
#discover-list .ti { font-size: 12px; }
#discover-list .ar { font-size: 10px; }
#discover-list .meta { display: block; font-size: 10px; line-height: 1.5; }
#discover-list .btn { padding: 0 6px; width: 86px; font-size: 10px; }
#view-explore .explore-watchlist { background: #f8eee0; border: 1px solid var(--o); position: sticky; top: calc(var(--hdr) + 10px); scroll-margin-top: 65px; }
.explore-watchlist .ph-row { border-bottom: 1px solid #ff4f1740; padding-bottom: 8px; align-items: center; }
.explore-watchlist .ph { color: var(--o); font-size: 12px; }
.explore-watchlist .ph span { font-size: 10px; }
.explore-watchlist .hint { margin: 0; font-size: 10px; }
.explore-watchlist .watch-add { gap: 5px; margin-bottom: 6px; }
.explore-watchlist .watch-add input { flex: 1 1 160px; padding: 0 7px; font-size: 10px; }
#watchlist-list .p-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; }
#watchlist-list .rk { display: none; }
#watchlist-list img { width: 28px; height: 28px; }
#watchlist-list .ti { font-size: 11px; }
#watchlist-list .ar { font-size: 9px; white-space: normal; line-height: 1.5; }
#watchlist-list .meta { grid-column: 2; grid-row: 2; font-size: 10px; text-align: left; }
#watchlist-list .meta br { display: none; }
#watchlist-list .acts { grid-column: 3; grid-row: 1 / 3; flex-direction: column; gap: 3px; }
#watchlist-list .acts .btn { font-size: 9px; height: 22px; padding: 0 6px; }

/* Header-attached loading popup, with a deliberately low-resolution canvas. */
.loading-arcade { position: fixed; z-index: 90; right: 14px; top: var(--arcade-top, 58px); width: 330px; color: #171510; background: #ff8d34; border: 2px solid #ff4f17; box-shadow: 4px 4px 0 #131313; font-size: 11px; }
.arcade-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-bottom: 1px solid #17151050; font: 10px var(--mono); }
.arcade-head strong { letter-spacing: .1em; }
.arcade-led { width: 6px; height: 6px; background: #171510; }
#arcade-count { margin-left: auto; font-size: 9px; }
.arcade-head button { width: 20px; height: 20px; font-size: 17px; }
.arcade-head button:hover { background: #17151020; }
.arcade-body { padding: 8px 10px 6px; }
.arcade-status { min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.arcade-progress { height: 5px; margin: 5px 0 8px; background: #17151030; overflow: hidden; }
.arcade-progress span { height: 100%; display: block; background: #171510; transition: width .25s; }
.arcade-progress.indeterminate span { animation: arcade-progress 1.2s linear infinite; }
@keyframes arcade-progress { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
#arcade-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
.arcade-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; padding-top: 5px; }
.arcade-controls button { font-size: 9px; padding: 3px 0; text-align: left; }
.arcade-chip { position: fixed; z-index: 90; right: 14px; top: var(--arcade-top, 58px); background: var(--o); color: #fff; padding: 8px 10px; font-size: 10px; border: 1px solid #171510; box-shadow: 2px 2px 0 #171510; }
@media (max-width: 1000px) {
  .explore-layout { grid-template-columns: minmax(0, 1fr); }
  #view-explore .explore-watchlist { position: static; grid-row: 1; }
  #watchlist-list { max-height: 220px; overflow-y: auto; }
  #watchlist-list .p-row { grid-template-columns: 28px minmax(0, 1fr) 100px auto; }
  #watchlist-list .meta { grid-column: 3; grid-row: 1; }
  #watchlist-list .acts { grid-column: 4; grid-row: 1; flex-direction: row; }
}
@media (max-width: 600px) {
  .loading-arcade { right: 10px; width: min(330px, calc(100vw - 24px)); }
  #discover-list .p-row { grid-template-columns: 20px 28px minmax(0, 1fr) 74px; gap: 6px; }
  #discover-list .p-row img { width: 28px; height: 28px; grid-row: 1 / 3; }
  #discover-list .p-row .rk { grid-row: 1 / 3; }
  #discover-list .meta { grid-column: 3; grid-row: 2; text-align: left; font-size: 9px; }
  #discover-list .meta br { display: none; }
  #discover-list .btn { grid-column: 4; grid-row: 1 / 3; width: 74px; font-size: 9px; }
  #watchlist-list .p-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  #watchlist-list .meta { grid-column: 2; grid-row: 2; }
  #watchlist-list .acts { grid-column: 3; grid-row: 1 / 3; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .arcade-progress.indeterminate span { animation: none; width: 100% !important; } }

#discover-list .meta { display: flex; flex-direction: column; gap: 0; }
#watchlist-list .meta { display: block; }
@media (max-width: 600px) {
  #discover-list .meta { flex-direction: row; gap: 6px; flex-wrap: wrap; }
  #watchlist-list { max-height: 180px; }
}
/* Dusty hardware accents stay on the frame; the data surface stays quiet. */
:root { --hdr: 56px; --card: #f6f3e9; --muted: #707367; }
.hdr, .player { background-color: #11150f; background-image: linear-gradient(#11150f80,#11150fb0), url('/web/circuits.svg'); background-size: auto,800px 96px; border-color: #777b604d; }
.hdr { gap: 12px; padding-left: 14px; }
.hdr-noise, .tagline { display: none; }
.logo { gap: 10px; flex-shrink: 0; }
.logo-mark.chip-mark { width: 32px; height: 32px; fill: none; }
.chip-frame { fill: #11150f; stroke: #d7ceba; stroke-width: 1; }
.chip-pins { stroke: #777b60; stroke-width: 1; }
.chip-thumb { fill: none; stroke: var(--o); stroke-width: 1.5; }
.logo-word { font-size: 25px; color: #ded8c8; letter-spacing: 1px; text-shadow: 1px 1px #777b6070; background: repeating-linear-gradient(0deg,#ded8c8 0 2px,#b1b09d 2px 3px); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-like { color: var(--o); font-size: 14px; align-self: start; margin-left: -6px; }
.hdr .search { background: #13170fe8; border-color: #777b60; max-width: 430px; }
.hdr .search input { color: #e5e0d3; }
.hdr .me { border-color: #777b60; }
.hdr .nav-box { border-color: #666e55; }
.hdr .nav-box.on { border-color: var(--o); }
.hdr-cta.song-dice { display: inline-flex; gap: 6px; align-items: center; justify-content: center; color: #f8f1e0; border: 1px solid var(--o); background: #302014; height: 30px; padding: 0 8px; white-space: nowrap; }
.song-dice .ic { width: 15px; height: 15px; }
.song-dice kbd { font: 10px var(--mono); color: #e9e2cf; border: 1px solid #8f8b74; padding: 0 3px; line-height: 16px; }
.song-dice:hover { background: #5f3018; }
.filter-dice.btn { background: #e6e8da; border: 1px solid #8c9176; color: #343e29; font-size: 10px; }
.filter-dice.btn:hover { background: #d5dac4; border-color: #343e29; color: #1b2416; }
.panel { --c: #8a8e766e; border-color: #a9aa944d; }
.gchip { background: #ecebdf; color: #515747; box-shadow: inset 0 0 0 1px #babda840; }
.gchip.on, .gchip.all.on { background: #232a1d; color: #f5e8cf; }
.gchip:hover { background: #dde1ce; color: #252f1b; }
.gchip.on:hover { background: #232a1d; color: #f5e8cf; }
#view-explore .explore-watchlist { background-color: #f0efdf; border-color: #9ca581; border-top: 2px solid var(--o); }
#view-explore .explore-watchlist .ph { color: #424f2c; }
.player { grid-template-columns: minmax(160px,250px) auto minmax(40px,1fr) auto auto auto auto auto; gap: 10px; }
.seek-step.p-btn { width: 32px; color: #d7ceba; font: 11px var(--mono); border: 1px solid #777b604a; border-radius: 3px; }
.seek-step.p-btn:hover { color: var(--o); border-color: var(--o); }
#p-random { width: 43px; display: inline-flex; gap: 3px; align-items: center; justify-content: center; color: #ff804a; }
#p-random kbd { font-size: 8px; line-height: 13px; padding: 0 2px; }

/* The arcade borrows the dark, dithered loading-screen frame. */
.loading-arcade { width: 362px; color: #d7ceba; background: #10130f url('/web/circuits.svg') left bottom / 800px 96px no-repeat; border: 1px solid #9a9a7a; outline: 2px solid #171b13; box-shadow: 4px 5px 0 #1e241a70; clip-path: polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 3px,100% 3px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 3px),0 calc(100% - 3px),0 4px,4px 4px); }
.arcade-head { cursor: grab; touch-action: none; user-select: none; padding: 7px 10px; gap: 6px; border-color: #777b6070; background: #10130fdb; }
.arcade-head.dragging { cursor: grabbing; }
.arcade-head strong { letter-spacing: .13em; font-size: 10px; }
.arcade-led { background: var(--o); width: 5px; height: 5px; box-shadow: 0 0 4px #ff4f1745; }
.arcade-head button { color: #c5c4ac; width: 19px; height: 20px; font-size: 15px; }
.arcade-head button:hover { color: #ff7040; background: #c9d09410; }
#arcade-reroll { font-size: 22px; color: var(--o); }
#arcade-home { font-size: 17px; }
.arcade-body { padding: 7px 12px; background: #10130fbc; }
.arcade-status { color: #aeb098; font-size: 9px; min-height: 12px; }
.arcade-status:empty { display: none; }
.arcade-progress { height: 4px; margin: 4px 0 7px; background: #32382b; }
.arcade-progress span { background: var(--o); }
#arcade-canvas { border: 1px solid #777b6040; width: 100%; touch-action: none; }
.arcade-controls { padding: 7px 0 3px; gap: 6px; font-size: 9px; }
#arcade-game-name { color: #d7ceba; font-size: 9px; letter-spacing: .1em; }
#arcade-score { color: #989f87; font-size: 9px; }
#arcade-jump { color: #ff7b43; font-size: 9px; border: 1px solid #777b6050; padding: 3px 9px; }
.arcade-touch { display: flex; gap: 5px; justify-content: center; padding: 3px 0; }
.arcade-touch button { background: #20271b; color: #d7ceba; border: 1px solid #777b6055; min-width: 28px; min-height: 25px; padding: 0 7px; font-size: 9px; touch-action: manipulation; }
.arcade-touch button:active { background: #52603c; }
.arcade-help { font-size: 8px; color: #8f987e; text-align: center; padding: 3px 0; letter-spacing: .03em; }
.arcade-chip { background: #171d12; color: #f1854d; border-color: #777b60; }
@media (hover: hover) { .arcade-touch { display: none; } }
@media (max-width: 1200px) {
  .hdr { gap: 7px; }
  .logo-word { font-size: 21px; }
  .logo-mark.chip-mark { width: 27px; height: 27px; }
  .hdr .search { flex: 1 1 160px; min-width: 120px; }
  .hdr .nav > button, .hdr .nav-drop > button { font-size: 10px; padding: 6px 4px; }
  .hdr-cta.song-dice { padding: 0 6px; }
  .hdr-cta.song-dice span { display: none; }
  .p-vol input { width: 48px; }
}
@media (max-width: 760px) {
  :root { --ftr: 92px; }
  .hdr .search { display: flex; order: 3; flex: 1 1 100%; max-width: none; }
  .hdr .nav { order: 4; }
  .hdr .me { margin-left: auto; }
  .hdr .song-dice { order: 1; }
  .hdr .logo { order: 0; }
  .hdr .me { order: 2; }
  .hdr .song-dice span { display: inline; font-size: 10px; }
  .hdr .logo-word { font-size: 20px; }
  .player { height: 92px; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 34px 40px; padding: 6px 10px; row-gap: 3px; }
  .p-now { grid-column: 1; grid-row: 1; }
  .p-now img { width: 30px; height: 30px; }
  .p-title { font-size: 11px; }
  .p-artist { font-size: 10px; }
  #p-random { grid-column: 2; grid-row: 1; }
  .p-ctrl { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 10px; }
  .loading-arcade { width: min(362px,calc(100vw - 20px)); }
  .arcade-touch { display: flex; }
}
/* Keep SoundCloud's internal waveform renderer at a valid layout size. */
#sc-frame { position: absolute; width: 400px; height: 166px; left: -10000px; bottom: 0; opacity: 0; pointer-events: none; }
/* Index panels have distinct identities without competing with the artwork. */
.logo-wordmark { width: 158px; height: 26px; object-fit: contain; }
.logo { gap: 8px; }
.index2 { gap: 8px; padding: 8px; }
.genre-row, .year-row { padding: 8px 10px; border: 1px solid #a4aa8b65; border-left: 3px solid #78865a; background: #edf0e3; }
.year-row { border-left-color: #bf714d; background: #f3eee2; border-color: #b7a98b65; }
.index2 .ph { font-weight: 800; font-size: 11px; letter-spacing: .08em; }
.index-marker { display: inline-grid; place-items: center; width: 20px; height: 18px; margin-right: 5px; font-size: 9px; background: #4c5c35; color: #f1eee1; }
.year-row .index-marker { background: #805d44; }
.index2 .ph-row, .index2 .ph { margin-bottom: 6px; }
.genre-row .ph-row .ph { margin-bottom: 0; }
.sortbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; background: #ebeede; color: #222d18; border: 1px solid #85916d; border-radius: 3px; font-size: 10px; font-weight: 700; box-shadow: 0 1px 0 #ffffff; }
.sortbtn:hover { background: #dce4ca; border-color: #536c34; }
.sortbtn .ic { width: 12px; height: 12px; flex-shrink: 0; }
.sortbtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shufbtn { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #8d9876; border-radius: 3px; background: #e5e9d8; color: #384c25; clip-path: none; }
.shufbtn .ic { width: 14px; height: 14px; }
.shufbtn:hover { background: #ced9ba; border-color: #52683b; }
.shufbtn.on { background: #354725; border-color: #354725; color: #f1f0df; }
.nav .surprise-nav { border: 1px solid #ad643e; border-radius: 3px; background: #38271b; color: #f2dfc9; padding: 5px 8px; white-space: nowrap; }
.nav .surprise-nav:hover { border-color: #ff8246; background: #54351f; }
.nav .surprise-nav kbd { font: 9px var(--mono); color: #bdbca3; border: 1px solid #7c7e65; padding: 0 3px; margin-left: 3px; }
.people-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding-left: 8px; border: 1px solid #85916d; border-radius: 3px; background: #ebeede; color: #344826; font-size: 10px; font-weight: 700; }
.people-sort select { height: 28px; padding: 0 5px; max-width: 125px; font-size: 10px; background: transparent; border: none; }
.user-since { display: inline-block; margin-left: 8px; color: #465335; font-size: 10px; letter-spacing: .05em; }
#p-shuffle { border: 1px solid #777b6060; border-radius: 3px; }

/* Bottom-right by default; canvas keeps its aspect ratio at any window size. */
.loading-arcade { display: flex; flex-direction: column; min-width: 260px; min-height: 230px; }
.arcade-head { flex-shrink: 0; }
.arcade-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-bottom: 12px; }
.arcade-status, .arcade-progress { flex-shrink: 0; }
.arcade-playfield { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#arcade-canvas { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: contain; background: #10130f; }
.arcade-controls, .arcade-touch, .arcade-help { flex-shrink: 0; }
.arcade-resize { position: absolute; bottom: 1px; right: 1px; width: 17px; height: 17px; touch-action: none; cursor: nwse-resize; background: repeating-linear-gradient(135deg,transparent 0 3px,#c0c3a3 3px 4px,transparent 4px 6px); clip-path: polygon(100% 0,100% 100%,0 100%); }
@media (max-width: 1200px) {
  .logo-wordmark { width: 135px; height: 24px; }
  .hdr .nav .surprise-nav { font-size: 9px; padding: 5px; }
  .hdr .search { min-width: 100px; }
}
@media (max-width: 760px) {
  .logo-wordmark { width: 145px; }
  .hdr .nav .surprise-nav { font-size: 10px; }
  .nav > button, .nav > .nav-drop { flex-basis: 23%; }
  .genre-row, .year-row { padding: 7px 8px; }
  .user-since { display: block; margin: 3px 0 0; }
  .sortbtn { padding: 0 7px; max-width: 190px; }
  .index2 { padding: 6px; }
}
.year-row .erabar { flex-wrap: wrap; overflow: visible; gap: 4px; }
.t-stamp { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; color: #48543a; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.t-stamp span { color: var(--muted); font-weight: 400; }
.t-node .t-menu { margin-left: auto; }
/* A quiet launcher in the paper area; loading never opens the arcade. */
.arcade-chip { display: grid; place-items: center; width: 42px; height: 44px; padding: 3px 7px; background: #eeedde; color: #536340; border: 1px solid #a9ae93; border-radius: 4px; box-shadow: 0 2px 5px #292f1720; }
.arcade-chip svg { display: block; width: 26px; height: 34px; overflow: visible; }
.handheld-shell { fill: #d6dbc5; stroke: currentColor; stroke-width: 1.5; }
.handheld-screen { fill: #465337; stroke: #eff0de; stroke-width: 1; }
.handheld-controls { stroke: currentColor; stroke-width: 2; fill: none; }
.handheld-led { fill: #a4ac91; }
.arcade-chip:hover, .arcade-chip:focus-visible { border-color: var(--o); color: #2c4025; background: #faf7ed; }
.arcade-chip.is-loading .handheld-led { fill: var(--o); }
.arcade-chip.is-loading { border-color: #ce8b5b; box-shadow: 0 0 0 2px #edbd822b; }
.person-modes, .blend-directions { display: flex; gap: 5px; margin: 9px 0; }
.person-modes button, .blend-directions button { padding: 7px 12px; font-size: 10px; font-weight: 700; border: 1px solid #a9ae93; border-radius: 3px; background: #eeedde; color: #52613f; }
.person-modes button.on, .blend-directions button.on { color: #f7f2df; background: #465337; border-color: #465337; }
.person-modes [data-person-mode="blend"]:not(.on) { color: #a14d26; border-color: #bf906c; background: #f5e8d8; }
.blend-summary { padding: 14px 16px; border-top: 2px solid #cb6b36; background: #f2f0e4; }
.blend-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.blend-kicker { color: #8b512e; font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.blend-heading h2 { margin: 3px 0 0; font-size: 16px; font-weight: 700; }
.blend-heading h2 > span { color: var(--o); padding: 0 6px; }
.blend-numbers { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; padding: 15px 0 9px; }
.blend-numbers > div:not(.blend-pair) { display: flex; flex-direction: column; gap: 4px; }
.blend-numbers b { font-size: 20px; line-height: 1; color: #475239; }
.blend-numbers .blend-common b { color: #b34c1f; }
.blend-numbers span { font-size: 9px; color: #646951; letter-spacing: .035em; }
.blend-pair { display: flex; min-width: 76px; }
.blend-pair img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #f2f0e4; background: #d5dbc7; object-fit: cover; }
.blend-pair img + img { margin-left: -14px; outline: 1px solid #cb6b36; }
.blend-coverage, .blend-note, .blend-pool-caption { margin: 5px 0; font-size: 10px; color: #69705b; line-height: 1.5; }
.blend-note { color: #484e3a; }
.blend-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.blend-signals > span:first-child { color: #7d7865; font-size: 9px; margin-right: 4px; }
.blend-signals .tag { font-size: 9px; background: #e6ead9; border-color: #adb799; color: #50613b; }
.blend-signals .tag b { font-weight: 400; opacity: .65; margin-left: 3px; }
.blend-directions { margin-bottom: 5px; }
.blend-pool-caption { margin-bottom: 10px; }
.blend-reason { font-size: 8px; color: #64784c; margin-left: 10px; vertical-align: 1px; }
.blend-loading { padding: 15px 0; color: #6c7759; font-size: 11px; }
/* WATCHER: discovery controls live beside the music, on the same paper/circuit system. */
.discovery-heading { margin-bottom: 10px; border: 1px solid #aba68e; background: #f3efdf; }
.discovery-art { min-height: 143px; padding: 20px 18px; background: url('/web/observer-city.jpg') center 58% / cover no-repeat; }
.eyebrow { color: #745b3b; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.discovery-art h1, .blend-chooser h1 { margin: 8px 0; font-family: var(--pixel); font-size: 23px; line-height: 1.25; letter-spacing: -.04em; }
.discovery-art p { max-width: 280px; margin: 5px 0; font-size: 10px; line-height: 1.6; }
.discovery-switch { display: flex; gap: 4px; padding: 6px 10px; border-top: 1px solid #c8bfa7; background: #f3f0e4; }
.discovery-switch button { padding: 6px 18px; font-size: 10px; font-weight: 700; border: 1px solid transparent; }
.discovery-switch button.on { border-color: #b37852; color: #ae461e; background: #f8e5d4; }
.discovery-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; margin: 8px 0; }
.archive-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.discovery-tools .subtabs { flex-wrap: wrap; gap: 5px; }
.discovery-tools .subtabs button { font-size: 9px; padding: 6px 8px; }
#discovery-scope { font-size: 9px; line-height: 1.6; margin: 5px 0 10px; color: #677055; }
.pick-control { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.surprise-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 31px; padding: 0 12px; border: 1px solid #a73b13; border-radius: 3px; color: #fff8e4; background: #e95018; box-shadow: inset 0 1px #ffb07a, 2px 2px 0 #a65a3226; font-size: 10px; font-weight: 800; letter-spacing: .035em; }
.surprise-button:hover { background: #f36826; border-color: #7d330f; }
.surprise-button:active { transform: translateY(1px); }
.surprise-button .ic { width: 15px; height: 15px; }
.surprise-button kbd { color: #ffe8d2; border: 1px solid #f9af7d; padding: 0 3px; font: 8px var(--mono); }
.pick-control small { color: #6e715e; font-size: 8px; line-height: 1.2; white-space: nowrap; letter-spacing: 0; }
.listpanel .tabsbar { min-height: 55px; height: auto; flex-wrap: wrap; gap: 5px 0; padding-top: 5px; padding-bottom: 5px; }
.listpanel .sortwrap { gap: 7px; }
.listpanel .tabsbar { position: relative; }
.listpanel .tabsbar > .count { position: absolute; right: 14px; bottom: 3px; margin: 0; font-size: 8px; }
.listpanel .tabsbar .tabs, .listpanel .tabsbar .tabs button { height: 42px; }
.card-people { margin: 4px 0; }
.r-people { display: inline-flex; align-items: center; gap: 2px; min-width: 35px; max-width: 100%; height: 17px; padding: 0; color: #606e4d; cursor: pointer; }
.r-people > .ic { width: 10px; height: 10px; }
.r-people .people-label, .r-people > span { display: inline-flex; align-items: center; gap: 5px; padding-left: 5px; font-size: 8px; white-space: nowrap; }
.r-people .people-label .ic { width: 8px; height: 8px; }
.r-people:hover { color: #d34e1e; }
.r-people:hover img { outline: 1px solid #d34e1e; }
.r-people:focus-visible { outline: 1px solid var(--o); outline-offset: 2px; }
.people-card { width: min(850px,calc(100vw - 28px)); max-height: calc(100vh - 95px); overflow: auto; }
.people-tools { display: flex; gap: 10px; justify-content: space-between; margin: 10px 0; }
.people-tools input { width: 220px; min-width: 0; }
.people-card .track-person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.person-open { display: flex; align-items: center; text-align: left; gap: 9px; min-width: 150px; flex: 1 1 200px; }
.person-open img { width: 34px; height: 34px; flex: none; object-fit: cover; }
.person-open b { font-size: 11px; }
.person-open small { display: block; margin-top: 4px; color: #777762; font-size: 9px; }
.person-open:hover b { color: var(--o); }
.people-count { color: #6d745b; font-size: 10px; min-width: 72px; }
.people-card #people-more { margin-top: 12px; }
#people-status { line-height: 1.5; }
#taste-panel { background: #f2f0e5; border-top: 2px solid #ab6b41; }
#taste-panel .ph { font-size: 11px; }
#taste-panel .ph-row { margin-bottom: 0; }
#taste-panel .btn.sm { min-height: 23px; font-size: 9px; }
.taste-map { min-height: 190px; }
.taste-orbits { display: block; width: 100%; max-height: 260px; overflow: visible; }
.taste-orbit { fill: none; stroke: #b1b69f; stroke-width: .6; stroke-dasharray: 1.5 5; }
.taste-cross { fill: none; stroke: #c9c7b4; stroke-width: .5; }
.taste-edges { stroke: #8c9b6b; }
.taste-node { cursor: pointer; }
.taste-node > circle:not(.taste-hit) { fill: #71805d; stroke: #f4f1e5; stroke-width: 1.5; }
.taste-node:first-of-type > circle:not(.taste-hit), .taste-node.selected > circle:not(.taste-hit), .taste-node:hover > circle:not(.taste-hit) { fill: #e95b22; }
.taste-hit { fill: transparent; stroke: none; }
.taste-node text { fill: #414d35; font: 7.5px var(--mono); pointer-events: none; }
.taste-node .taste-n { fill: #8c876e; font-size: 7px; }
.taste-node:focus { outline: none; }
.taste-node:focus > circle:not(.taste-hit) { stroke: #d35022; stroke-width: 3; }
#taste-map-scope { font-size: 9px; line-height: 1.5; margin: 4px 0; }
.taste-empty { padding: 55px 15px; text-align: center; color: #7f826c; font-size: 11px; }
.taste-card { width: min(850px,calc(100vw - 28px)); max-height: calc(100vh - 95px); overflow: auto; }
#taste-large .taste-orbits { max-height: 360px; }
.taste-method { font-size: 10px; line-height: 1.7; padding: 8px 0; border-top: 1px solid var(--line); color: #626951; }
.taste-method summary { cursor: pointer; font-weight: 700; }
.taste-category-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.taste-category-list button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 7px; border: 1px solid #babfa9; font-size: 10px; background: #eeefdf; }
.taste-category-list button span { font-size: 9px; color: #777d63; }
.blend-chooser { padding: 20px; min-height: 280px; background: linear-gradient(90deg,#f2efdfed,#f2efdf9c),url('/web/observer-city.jpg') right bottom / auto 100% no-repeat; }
.blend-chooser > p { color: #626f4f; font-size: 11px; line-height: 1.7; }
.blend-choose-fields { display: flex; align-items: flex-end; gap: 14px; margin: 20px 0; flex-wrap: wrap; }
.blend-choose-fields label { display: flex; flex-direction: column; flex: 1; min-width: 170px; gap: 7px; font-size: 10px; font-weight: 700; color: #6c7256; }
.blend-choose-fields select { height: 35px; width: 100%; min-width: 0; font-size: 11px; }
.blend-orbit { color: #cd582a; font-size: 35px; line-height: 1; }
.blend-choose-fields .solid { min-height: 35px; }
.blend-candidates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.blend-candidate { display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid #b3b99f; background: #f2f1e4; text-align: left; }
.blend-candidate img { width: 36px; height: 36px; object-fit: cover; }
.blend-candidate b { display: block; font-size: 11px; }
.blend-candidate small { display: block; margin-top: 4px; font-size: 9px; color: #747d62; }
.blend-candidate > span:last-child { margin-left: auto; color: #c0592b; font-size: 9px; }
.blend-candidate:hover { border-color: #c36334; }
.shell.blend-setup { grid-template-columns: minmax(0,1fr); }
.shell.blend-setup > .side { display: none; }
.shell.blend-mode { grid-template-columns: minmax(0,1fr) 290px; }
.shell.blend-mode > .side { display: block; }
.shell.blend-mode > .side > section:not(#taste-panel) { display: none; }
.blend-mode .person-head { grid-template-columns: auto 48px minmax(0,1fr) auto; padding-top: 8px; padding-bottom: 8px; }
.blend-mode .person-head .p-avatar { width: 48px; height: 48px; }
.blend-mode .person-head .lurkbar { display: none; }
.blend-summary { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 4px 20px; position: relative; padding: 10px 12px; }
.blend-heading { display: block; align-self: center; }
.blend-heading > .btn { position: absolute; top: 12px; right: 12px; }
.blend-heading h2 { font-size: 15px; }
.blend-numbers { gap: 18px; padding: 0 90px 0 0; }
.blend-pair { display: none; }
.blend-coverage { grid-column: 1; }
.blend-note { grid-column: 2; max-width: 510px; }
.blend-signals { grid-column: 1 / -1; margin-top: 2px; padding-right: 85px; }
@media (max-width: 760px) {
  .blend-mode .person-head { grid-template-columns: 48px minmax(0,1fr); }
  .shell.blend-mode { grid-template-columns: minmax(0,1fr); }
  .shell.blend-mode > .side { order: 1; }
  .discovery-art { min-height: 132px; padding: 15px 12px; background-position: 55% center; }
  .discovery-art h1 { font-size: 18px; max-width: 190px; }
  .discovery-art p { max-width: 190px; }
  .listpanel .tabsbar .sortwrap { flex-wrap: wrap; justify-content: flex-end; }
  .pick-control { margin-right: 2px; }
  .surprise-button { min-height: 32px; padding: 0 8px; font-size: 9px; }
  .surprise-button kbd { display: none; }
  .people-tools { flex-wrap: wrap; }
  .people-card .track-person { gap: 6px; }
  .person-open { flex-basis: 65%; }
  .people-card .track-person .btn { margin-left: 0; }
  .blend-candidates { grid-template-columns: 1fr; }
  .blend-orbit { display: none; }
  .taste-category-list { grid-template-columns: 1fr; }
  .blend-summary { display: block; }
  .blend-numbers { padding: 12px 0 4px; }
  .blend-signals { padding-right: 0; }
  .blend-summary { padding: 12px; }
  .blend-numbers { gap: 12px 18px; }
  .blend-pair { display: none; }
  .blend-numbers b { font-size: 18px; }
  .blend-numbers span { font-size: 8px; }
  .blend-heading h2 { font-size: 14px; }
  .blend-reason { display: none; }
}
.year-row .erabar button { flex: 1 0 38px; min-width: 38px; padding: 0 5px; }
@media (max-width: 760px) {
  .tabsbar { height: auto; min-height: 40px; overflow: visible; flex-wrap: wrap; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .tabsbar .gridicon { margin-right: 2px; }
  .tabsbar .tabs button { padding: 0 7px; font-size: 10px; }
  .tabsbar .sortwrap { max-width: 100%; margin-left: auto; }
  .sortwrap .menu { z-index: 70; }
}
@media (max-width: 760px) {
  .year-row .erabar { display: grid; grid-template-columns: repeat(auto-fit,minmax(40px,1fr)); }
}

/* =====================================================================
   SCENE LAYER — art backdrop, the observer's face + lore, loading HUD + runner
   ===================================================================== */
.scene { position: relative; border: 1px solid #aba68e; background: #f3efdf; margin-bottom: var(--g); }
.discovery-heading .scene, .boot .scene { border: 0; margin: 0; }
.scene-art { position: relative; min-height: 150px; padding: 18px 18px 30px; overflow: hidden;
  background: url('/web/observer-city.jpg') center 58% / cover no-repeat; }
.scene-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(19,19,19,.16) 1px, transparent 1.2px); background-size: 3px 3px; }
.scene-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(243,239,223,.94) 0, rgba(243,239,223,.78) 36%, rgba(243,239,223,0) 62%); }
.scene-copy { position: relative; z-index: 1; max-width: 440px; }
.scene-copy h1 { margin: 8px 0; font-family: var(--pixel); font-size: 23px; line-height: 1.25; letter-spacing: -.04em; }
.scene-copy p { max-width: 300px; margin: 5px 0; font-size: 10px; line-height: 1.6; }
.scene--compact .scene-art { min-height: 92px; padding: 12px 16px 24px; }
.scene--compact .scene-copy h1 { font-size: 17px; margin: 4px 0; }
.scene--loading .scene-art { min-height: 128px; }
.scene-hud { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3px 14px; align-items: center; margin: 2px 0 8px; }
.scene-hud-title { grid-column: 1; font-family: var(--pixel); font-size: 15px; letter-spacing: .04em; }
.scene-hud-title b { font-weight: 400; }
.scene-hud-sub { grid-column: 1; font-size: 9.5px; letter-spacing: .12em; color: #4b4535; }
.scene-bar { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 2px; padding: 3px; border: 1.5px solid var(--ink); background: #fff8ea; }
.scene-bar i { width: 9px; height: 14px; background: #d7ceba; display: block; }
.scene-bar i.f { background: var(--o); }
.scene--loading:not(.scene--done) .scene-bar i.f:last-of-type { animation: blink .8s steps(2, start) infinite; }
.scene-pct { grid-column: 3; grid-row: 1 / span 2; font-family: var(--pixel); font-size: 26px; color: var(--o); }
.scene--done .scene-pct { color: var(--ink); }
.scene-run { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26px; display: block; z-index: 1; image-rendering: pixelated; }
.scene:not(.scene--loading) .scene-run { display: none; }
.scene-foot { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 12px; border-top: 1px solid #c8bfa7; background: #f3f0e4; }
.scene-face { position: relative; width: 60px; height: 60px; padding: 3px; background: var(--ink); }
.scene-face canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.scene-face::before, .scene-face::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--o); }
.scene-face::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.scene-face::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.scene-lore { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scene-kicker { font-family: var(--pixel); font-size: 10px; color: var(--o); letter-spacing: .06em; }
.scene-lore b { font-family: var(--pixel); font-size: 12px; letter-spacing: .04em; line-height: 1.3; }
.scene-lore > span:last-child { font-size: 10px; color: #5b5547; letter-spacing: .04em; }
.scene-legend { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .06em; color: #4b4535; white-space: nowrap; }
.scene-legend kbd { font-family: var(--pixel); font-size: 10px; border: 1.5px solid var(--ink); padding: 3px 7px; background: #fff8ea; }
.scene-play { color: var(--o); font-weight: 700; letter-spacing: .06em; font-size: 10px; margin-left: 10px; }
.scene-play:hover { text-decoration: underline; text-underline-offset: 3px; }
#archive-scene { order: -1; }
#archive-scene:empty, #view-library.hidden + #archive-scene { display: none; }
/* boot: the loading-profile screen, under the header, above the player */
.boot { position: fixed; left: 0; right: 0; top: var(--hdr); bottom: var(--ftr); z-index: 45; background: var(--paper); padding: var(--g); overflow: auto; }
.boot .scene-art { min-height: 380px; padding-top: 22px; }
.boot .scene-hud-title { font-size: 20px; }
.boot .scene-pct { font-size: 34px; }
.boot .scene-foot { padding: 12px 16px; }
.boot.fade { opacity: 0; transition: opacity .35s; pointer-events: none; }
@media (max-width: 760px) {
  .scene-foot { grid-template-columns: 46px minmax(0, 1fr); }
  .scene-legend { display: none; }
  .scene-face { width: 46px; height: 46px; }
  .boot .scene-art { min-height: 220px; }
  .scene-hud { grid-template-columns: minmax(0, 1fr) auto; }
  .scene-bar { display: none; }
}

/* =====================================================================
   REACTIVE LAYER — manga bubbles, the lore strip, smooth motion.
   UI chrome moves smoothly (short ease-out); pixel art keeps steps().
   ===================================================================== */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); }
.rbubble { position: fixed; z-index: 120; pointer-events: none; padding: 6px 10px 5px; background: var(--ink); color: #fff8ea;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--o); transform-origin: var(--tail, 50%) 100%;
  animation: rb-pop .22s var(--ease-pop) both; }
.rbubble::after { content: ""; position: absolute; left: calc(var(--tail, 50%) - 6px); bottom: -9px; width: 12px; height: 9px; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 30% 100%); }
.rbubble.below { transform-origin: var(--tail, 50%) 0; }
.rbubble.below::after { bottom: auto; top: -9px; clip-path: polygon(30% 0, 100% 100%, 0 100%); }
.rb-text { display: inline-block; font-family: var(--pixel); font-size: 13px; letter-spacing: .04em; white-space: nowrap; transform: skewX(-8deg); }
.rbubble.burst { padding: 16px 22px; background: var(--o); color: var(--ink); box-shadow: none; border: 0;
  clip-path: polygon(50% 0, 61% 18%, 82% 6%, 78% 30%, 100% 34%, 84% 52%, 98% 72%, 74% 70%, 70% 96%, 52% 80%, 34% 100%, 28% 74%, 4% 78%, 16% 56%, 0 36%, 22% 30%, 16% 6%, 38% 18%); }
.rbubble.burst::after { display: none; }
.rbubble.burst .rb-text { font-size: 18px; text-shadow: 1px 1px 0 #fff8ea; }
.rbubble.out { animation: rb-out .2s var(--ease-out) both; }
.rbubble.still, .rbubble.still.out { animation: none; }
@keyframes rb-pop { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 70% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes rb-out { to { opacity: 0; transform: translateY(-8px) scale(.92); } }

/* the lore strip: one quiet line where a whole scene used to be */
.scene--strip { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 3px 10px 3px 4px; margin-bottom: var(--g);
  border: 1px dashed rgba(255, 79, 23, .45); background: var(--card); overflow: hidden; white-space: nowrap; }
.scene--strip .scene-face { width: 24px; height: 24px; padding: 2px; flex: none; }
.scene--strip .scene-face::before, .scene--strip .scene-face::after { width: 6px; height: 6px; border-width: 1.5px; }
.scene-face { border: 0; cursor: pointer; }
.scene-face:hover { box-shadow: 0 0 0 2px var(--o); }
.scene--strip .scene-kicker { font-size: 9px; flex: none; }
.scene--strip b { font-family: var(--pixel); font-size: 10px; letter-spacing: .05em; font-weight: 400; flex: none; }
.scene--strip .scene-strip-sub { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* views slide in instead of snapping */
.v-enter { animation: v-enter .2s var(--ease-out) both; }
@keyframes v-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* artwork fades in as it arrives instead of popping */
.r-art img, .c-art img, .p-avatar img, .ll-row img, .fol-row img, .wl-row img { opacity: 0; transition: opacity .28s var(--ease-out); }
.r-art img.ld, .c-art img.ld, .p-avatar img.ld, .ll-row img.ld, .fol-row img.ld, .wl-row img.ld { opacity: 1; }
/* rows and controls answer the pointer */
.row { transition: background-color .14s var(--ease-out); }
.r-play { transition: transform .14s var(--ease-pop), background-color .14s; }
.r-play:active { transform: scale(.92); }
.btn, .gchip, .tag, .seg button, .subtabs button, .erabar button { transition: background-color .14s var(--ease-out), border-color .14s, color .14s, transform .1s; }
.btn:active, .gchip:active, .erabar button:active { transform: translateY(1px); }
/* skeleton rows while a pool or a profile loads */
.skel-row { display: grid; grid-template-columns: 40px 72px 48px minmax(0, 1fr) 200px; gap: 0 10px; align-items: center; height: 78px; border-bottom: 1px dashed var(--line-2); }
.skel-row i { display: block; height: 10px; background: linear-gradient(90deg, var(--paper-2) 0, #f6f2e9 50%, var(--paper-2) 100%); background-size: 200% 100%; animation: skel 1.1s linear infinite; }
.skel-row i.art { width: 72px; height: 66px; }
.skel-row i.dot { width: 34px; height: 34px; border-radius: 50%; }
.skel-row i.n { width: 18px; }
.skel-row .lines { display: flex; flex-direction: column; gap: 7px; }
.skel-row .lines i:nth-child(1) { width: 55%; }
.skel-row .lines i:nth-child(2) { width: 30%; }
.skel-row .lines i:nth-child(3) { height: 22px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .v-enter, .skel-row i { animation: none; }
  .r-art img, .c-art img, .p-avatar img, .ll-row img, .fol-row img, .wl-row img { transition: none; opacity: 1; }
}

/* =====================================================================
   BLEND — the duel: two collections face off across a dithered Venn
   ===================================================================== */
.bduel { display: grid; grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0 10px; }
.bduel-side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.bduel-side b { font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bduel-side > span:not(.bduel-avatar) { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.bduel-side .bduel-pct { font-family: var(--pixel); font-size: 10px; color: var(--o); }
.bduel-avatar { position: relative; width: 64px; height: 64px; padding: 3px; background: var(--ink); }
.bduel-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: grayscale(.35) contrast(1.05); }
.bduel-avatar::before, .bduel-avatar::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--o); }
.bduel-avatar::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.bduel-avatar::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.bduel-side.a { animation: duel-in-a .5s var(--ease-out) both; }
.bduel-side.b { animation: duel-in-b .5s var(--ease-out) both; }
@keyframes duel-in-a { from { opacity: 0; transform: translateX(-18px); } }
@keyframes duel-in-b { from { opacity: 0; transform: translateX(18px); } }
.bduel-mid { position: relative; display: flex; flex-direction: column; align-items: center; }
.bvenn { width: 340px; height: 132px; image-rendering: pixelated; }
.bduel-score { display: flex; flex-direction: column; align-items: center; margin-top: -4px; }
.bduel-n { font-family: var(--pixel); font-size: 30px; color: var(--o); line-height: 1; letter-spacing: -.02em; }
.bduel-score span { font-size: 9px; letter-spacing: .14em; color: var(--muted); margin-top: 3px; }
.bduel-tier { margin-top: 6px; padding: 3px 9px; background: var(--ink); color: #fff8ea; font-family: var(--pixel); font-size: 10px; letter-spacing: .06em; clip-path: var(--step); }
.bduel-tier i { font-style: normal; color: #b8b0a0; }
.blend-heading-old { margin-top: 4px; }
.blend-heading-old .blend-kicker, .blend-heading-old h2 { display: none; }
.blend-artists button.tag { cursor: pointer; text-transform: none; }
.blend-artists button.tag.on { background: var(--o); border-color: var(--o); color: #fff; }
/* direction cards instead of three bare tabs */
.blend-directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: var(--g) 0 6px; }
.blend-directions button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1.5px solid var(--line-2); background: var(--card); text-align: left; clip-path: var(--step); transition: border-color .14s var(--ease-out), background-color .14s; }
.blend-directions button b { font-size: 11.5px; letter-spacing: .06em; }
.blend-directions button span { font-size: 10px; color: var(--muted); }
.blend-directions button:hover { border-color: var(--o); }
.blend-directions button.on { border-color: var(--o); background: #fbe9dc; box-shadow: inset 3px 0 0 var(--o); }
.blend-directions button.on b { color: #ae3f14; }
/* chooser: taste twins */
.twin-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 8px; flex-wrap: wrap; }
.twin-head .hint { margin: 0; }
.blend-candidate.twin { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; text-align: left; border-bottom: 1px dashed var(--line-2); background: transparent; transition: background-color .14s var(--ease-out); }
.blend-candidate.twin:hover { background: rgba(255, 79, 23, .06); }
.blend-candidate.twin img { width: 40px; height: 40px; object-fit: cover; clip-path: var(--step); }
.twin-rank { font-family: var(--pixel); font-size: 12px; color: var(--o); }
.twin-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.twin-body b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twin-body small { font-size: 10px; color: var(--muted); }
.twin-bar { display: block; height: 4px; width: var(--w); background: repeating-linear-gradient(90deg, var(--o) 0 3px, transparent 3px 4px); animation: twin-grow .6s var(--ease-out) both; }
@keyframes twin-grow { from { width: 0; } }
.twin-tier { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--pixel); font-size: 9.5px; letter-spacing: .05em; }
.twin-tier em { font-style: normal; font-size: 14px; color: var(--o); }
@media (max-width: 900px) {
  .bduel { grid-template-columns: 1fr 1fr; }
  .bduel-mid { grid-column: 1 / -1; order: -1; }
  .blend-directions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bduel-side.a, .bduel-side.b, .twin-bar { animation: none; } }
.blend-candidate.twin { background: rgba(247, 244, 237, .94); }
.blend-candidate.twin:hover { background: #fbeee3; }

/* =====================================================================
   KEY · BPM — Camelot chips, the filter row, the analyzer panel
   ===================================================================== */
.r-tags { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.kchip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-family: var(--pixel); font-size: 9.5px; letter-spacing: .04em;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); clip-path: var(--step); cursor: pointer; white-space: nowrap; }
.kchip.ver { background: var(--ink); color: #fff8ea; }
.kchip.mix { border-color: var(--o); color: var(--o); box-shadow: inset 0 -2px 0 var(--o); }
.kchip.ver.mix { background: var(--o); color: #fff; }
.kchip:hover { border-color: var(--o); }
.kchip.big { height: 30px; padding: 0 10px; font-size: 15px; cursor: default; background: var(--ink); color: #fff8ea; border-color: var(--ink); }
.key-row .ph { display: flex; align-items: center; gap: 10px; }
.key-row .kd-open { height: 22px; font-size: 10px; margin-left: auto; }
.kchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.gchip.kc { font-family: var(--pixel); font-weight: 400; }
.gchip.kc.near { box-shadow: inset 0 -2px 0 var(--o); }
.gchip.harm { background: var(--o); color: #fff; }
.gchip.harm.on { background: var(--ink); color: var(--o); }
.kd-card { width: min(860px, 100%); }
.kd-note, .kd-honest { font-size: 11px; color: #4b4535; line-height: 1.6; margin: 0 0 10px; }
.kd-honest { color: var(--muted); margin: 0; }
.kd-target { padding: 6px 10px; margin-bottom: 8px; background: #fbe9dc; border-left: 3px solid var(--o); font-size: 11px; }
.kd-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border: 2px dashed var(--line-2); background: var(--paper); cursor: pointer;
  transition: border-color .14s var(--ease-out), background-color .14s; }
.kd-drop input { display: none; }
.kd-drop b { font-family: var(--pixel); font-size: 14px; letter-spacing: .06em; }
.kd-drop span { font-size: 10.5px; color: var(--muted); }
.kd-drop:hover, .kd-drop.over { border-color: var(--o); background: #fbe9dc; }
.kd-list { display: flex; flex-direction: column; max-height: 52vh; overflow: auto; margin-top: 10px; }
.kd-item { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 6px 12px; padding: 9px 4px; border-bottom: 1px dashed var(--line-2); animation: v-enter .2s var(--ease-out) both; }
.kd-item.saved { background: rgba(255, 79, 23, .04); }
.kd-file { display: flex; flex-direction: column; gap: 3px; min-width: 0; grid-column: 1 / -1; }
.kd-file b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-stage { font-size: 10px; color: var(--muted); letter-spacing: .05em; }
.kd-item.error .kd-stage { color: #b3261e; }
.kd-busy { display: block; height: 4px; background: repeating-linear-gradient(90deg, var(--o) 0 6px, transparent 6px 10px); background-size: 20px 4px; animation: kd-busy .5s steps(5) infinite; }
@keyframes kd-busy { to { background-position: 20px 0; } }
.kd-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd-keyname { font-size: 12px; font-weight: 600; }
.kd-bpm { font-size: 11px; color: var(--muted); }
.kd-bpm b { font-family: var(--pixel); font-size: 14px; color: var(--ink); font-weight: 400; }
.kd-mini { height: 22px; padding: 0 7px; font-size: 10px; border: 1px solid var(--line-2); background: var(--card); clip-path: var(--step); }
.kd-mini:hover { border-color: var(--o); color: var(--o); }
.kd-conf { width: 60px; height: 6px; background: var(--paper-2); }
.kd-conf i { display: block; height: 100%; background: var(--o); }
.kd-match { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.kd-match select { max-width: 320px; height: 28px; font-size: 11px; border: 1.5px solid var(--line-2); background: var(--paper); }
.kd-ok { font-family: var(--pixel); font-size: 10px; color: var(--o); }
.kd-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.kd-count { font-family: var(--pixel); font-size: 10px; letter-spacing: .05em; }
@media (max-width: 760px) { .kd-item { grid-template-columns: 1fr; } .kd-match { justify-content: flex-start; } }

/* =====================================================================
   LIVE LAYERS — parallax scene depth, header/player sparks, tDR stamp
   ===================================================================== */
.scene-art { will-change: background-position; }
.live-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; image-rendering: pixelated; }
.scene-copy, .scene-hud { z-index: 2; }
.scene-run { z-index: 2; }
.hdr, .player { isolation: isolate; } /* sparks paint above the bar's own background, below everything in it */
.live-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; image-rendering: pixelated; }
.tdr-stamp { position: fixed; right: 18px; top: calc(var(--hdr) + 14px); z-index: 110; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end;
  padding: 8px 14px 7px 26px; background: var(--ink); color: #fff8ea; transform: translateX(120%); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.tdr-stamp .tdr-hz { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(-45deg, var(--o) 0 4px, var(--ink) 4px 8px); }
.tdr-stamp b { font-family: var(--pixel); font-size: 22px; letter-spacing: .02em; line-height: 1; font-weight: 400; }
.tdr-stamp span { font-size: 9px; letter-spacing: .18em; color: var(--o); margin-top: 3px; }
.tdr-stamp.in { animation: tdr-in .18s var(--ease-out) forwards; }
.tdr-stamp.out { animation: tdr-out .22s var(--ease-out) forwards; }
@keyframes tdr-in { from { transform: translateX(120%) skewX(-12deg); } to { transform: translateX(0) skewX(0); } }
@keyframes tdr-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(30%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tdr-stamp { display: none; } }

/* =====================================================================
   VOICE OF THE SITE — JRPG text box, lantern on the playing row, empty-state observer
   ===================================================================== */
.toast { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
  background: var(--ink); color: #fff8ea; border: 0; box-shadow: inset 0 0 0 2px #fff8ea, inset 0 0 0 4px var(--ink), 4px 4px 0 var(--o);
  font-size: 12px; letter-spacing: .02em; min-width: 260px; max-width: min(560px, 92vw); clip-path: var(--step); }
.toast:not(.hidden) { animation: toast-in .18s var(--ease-pop) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.t-face { width: 28px; height: 28px; padding: 2px; background: #131313; box-shadow: 0 0 0 1px var(--o); }
.t-face canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.t-text { min-height: 1.3em; line-height: 1.35; }
.t-caret { color: var(--o); font-size: 9px; animation: blink .9s steps(2, start) infinite; }
.toast.typing .t-caret { visibility: hidden; }
.t-act button { color: var(--o); font-weight: 700; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 3px; }
.t-act:empty { display: none; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the playing row carries a lantern: a warm edge that breathes */
.row.current.playing { background: linear-gradient(90deg, rgba(255, 79, 23, .14), rgba(255, 79, 23, .04) 45%, transparent 72%); box-shadow: inset 3px 0 0 var(--o); animation: lantern 2.8s ease-in-out infinite; }
@keyframes lantern { 50% { box-shadow: inset 3px 0 0 var(--o), inset 26px 0 28px -22px rgba(255, 79, 23, .38); } }
.row.current.playing .r-art { box-shadow: 0 0 0 2px var(--o), 0 0 16px rgba(255, 79, 23, .4); }
.row.current:not(.playing) { box-shadow: inset 3px 0 0 rgba(255, 79, 23, .5); }
/* empty states: the observer looked, too */
.empty::before { content: ""; display: block; width: 30px; height: 37px; margin: 0 auto 10px; background: url('/web/observer.svg') center / contain no-repeat;
  image-rendering: pixelated; opacity: .85; animation: watcher-bob 2.4s steps(2) infinite; }
@keyframes watcher-bob { 50% { transform: translateY(-2px); } }
/* the sound toggle */
#p-sfx.off { opacity: .4; }
#p-sfx.off .ic { filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) { .row.current.playing, .empty::before, .t-caret, .toast:not(.hidden) { animation: none; } }