.command-button,
.tool-button,
.pill-button,
.icon-button {
  border: 1px solid var(--line);
  background: rgba(124, 247, 212, .055);
  color: var(--text);
  min-height: 2.4rem;
  padding: .55rem .85rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.icon-button {
  min-width: 2.4rem;
  padding-inline: .55rem;
}

.command-button:hover,
.tool-button:hover,
.pill-button:hover,
.icon-button:hover,
.pill-button.active,
.icon-button.active {
  border-color: rgba(124, 247, 212, .72);
  background: rgba(124, 247, 212, .12);
}

.command-button:hover,
.stage-card:hover,
.track-card:hover,
.trajectory-node:hover {
  transform: translateY(-2px);
}

.stage-card,
.track-card,
.idea-panel,
.map-card,
.terminal-panel,
.search-frame,
.trajectory-node {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.stage-card,
.track-card a,
.trajectory-node,
.related-link {
  display: block;
}

.stage-card,
.track-card a,
.idea-panel,
.map-card,
.terminal-panel,
.search-frame,
.trajectory-node {
  padding: calc(1.2rem * var(--space-scale));
}

.stage-card,
.track-card,
.trajectory-node {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.stage-card:hover,
.track-card:hover,
.trajectory-node:hover {
  border-color: rgba(124, 247, 212, .55);
  background: var(--panel-strong);
}

.stage-number,
.favorite-indicator,
.favorite-button.active {
  color: var(--accent-2);
}

.tag-row span,
.tag-row a,
.theme-cloud a {
  border: 1px solid rgba(134, 163, 155, .28);
  color: #b6d1ca;
  padding: .25rem .55rem;
  font-size: .78rem;
  background: rgba(255, 255, 255, .025);
}

.tag-row a:hover,
.theme-cloud a:hover,
.theme-cloud a.active {
  color: var(--accent);
  border-color: var(--accent);
}

.reader-shell {
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 4vw, 2rem);
}

.reader-shell h1 {
  font-size: clamp(2.3rem, 6vw, 5.5rem);
}

.track-idea {
  color: #c4ddd6;
  font-size: 1.14rem;
}

/* HaploLogic player appearance: adjust this block to change the custom audio UI. */
.haplo-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
}

.haplo-player-button {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(124, 247, 212, .42);
  background: rgba(124, 247, 212, .08);
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.haplo-player-button:hover,
.haplo-player[data-state="playing"] .haplo-player-button {
  border-color: rgba(124, 247, 212, .86);
  background: rgba(124, 247, 212, .14);
}

.haplo-player-button:hover {
  transform: translateY(-1px);
}

.haplo-player-title {
  color: var(--text);
  font-weight: 700;
}

.haplo-player-status,
.haplo-player-time {
  color: var(--muted);
  font-size: .78rem;
}

.haplo-player[data-state="loading"] .haplo-player-status {
  color: var(--accent-2);
}

.haplo-player[data-state="error"] {
  border-color: rgba(255, 111, 111, .42);
}

.haplo-player[data-state="error"] .haplo-player-status {
  color: #ff9a9a;
}

.haplo-player-progress {
  height: 4px;
  margin-top: .55rem;
  background: rgba(134, 163, 155, .18);
  cursor: pointer;
}

.haplo-player-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.haplo-player-time {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
}

.lyrics-frame {
  position: relative;
  margin-top: 2rem;
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--line);
}

.reaction-counts {
  position: absolute;
  top: .8rem;
  right: .9rem;
  display: flex;
  gap: .45rem;
  color: var(--muted);
  font-size: .78rem;
  z-index: 1;
}

.reaction-counts span {
  border: 1px solid rgba(134, 163, 155, .24);
  background: rgba(6, 16, 15, .82);
  padding: .22rem .45rem;
}

.lyrics {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: clamp(3.2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2.4rem);
  background: transparent;
  border: 0;
  color: #edfdf8;
  font-family: var(--read);
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  line-height: 1.9;
}

.reading-progress {
  position: sticky;
  top: var(--site-header-height, 70px);
  z-index: 3;
  height: 2px;
  background: rgba(134, 163, 155, .18);
  margin-top: 1rem;
  backdrop-filter: blur(10px);
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.reaction-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  justify-content: flex-end;
  margin-top: .85rem;
}

.reaction-button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line);
  background: rgba(124, 247, 212, .04);
  color: var(--text);
  padding: 0;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.reaction-button:hover,
.reaction-button.active {
  border-color: rgba(124, 247, 212, .72);
  background: rgba(124, 247, 212, .12);
}

.reaction-button:hover {
  transform: translateY(-1px);
}

.favorite-button {
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.related-link {
  border-top: 1px solid var(--line);
  padding: .9rem 0;
}

.related-link span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}

.theme-cloud {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.search-overlay {
  width: min(760px, calc(100vw - 2rem));
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}

.search-overlay::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
}

.search-frame {
  background: rgba(6, 16, 15, .97);
}

.search-frame input {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .26);
  color: var(--text);
  outline: none;
}

.search-results a {
  display: grid;
  gap: .2rem;
  padding: .8rem 0;
  border-top: 1px solid var(--line);
}

.search-results span {
  color: var(--muted);
}

.article-body {
  font-family: var(--read);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.9;
}

.article-body h1,
.article-body h2 {
  font-family: var(--mono);
  margin-top: 2.6rem;
}

blockquote {
  margin: 2rem 0;
  padding: 1rem 0 1rem 1.2rem;
  border-left: 2px solid var(--accent);
  color: #def7ef;
}

.idea-map-svg {
  width: 100%;
  height: clamp(360px, 62vw, 720px);
  display: block;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
}

.idea-link {
  stroke: rgba(124, 247, 212, .22);
  stroke-width: 1;
  transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease;
}

.idea-node {
  cursor: pointer;
  transition: opacity .18s ease;
}

.idea-node-halo {
  fill: rgba(124, 247, 212, .08);
  stroke: rgba(124, 247, 212, .12);
  stroke-width: 1;
  opacity: .7;
  transition: opacity .18s ease, r .18s ease;
}

.idea-node-dot {
  fill: var(--bg-2);
  stroke: var(--accent);
  stroke-width: 2;
  transition: fill .18s ease, r .18s ease, stroke-width .18s ease;
}

.idea-node:hover .idea-node-halo,
.idea-node:focus .idea-node-halo,
.idea-node.is-selected .idea-node-halo,
.idea-node.is-related .idea-node-halo {
  opacity: 1;
  r: 24;
}

.idea-node:hover .idea-node-dot,
.idea-node:focus .idea-node-dot,
.idea-node.is-selected .idea-node-dot {
  fill: var(--accent);
  r: 10;
  stroke-width: 3;
}

.idea-node.is-related .idea-node-dot {
  fill: rgba(124, 247, 212, .22);
  r: 9;
  stroke-width: 3;
}

.has-map-selection .idea-node.is-dimmed {
  opacity: .18;
}

.idea-link.is-active {
  stroke: var(--accent);
  stroke-width: 2.4;
  opacity: .95;
}

.has-map-selection .idea-link.is-dimmed {
  opacity: .08;
}

.group-1 .idea-node-dot {
  stroke: #7cf7d4;
}

.group-2 .idea-node-dot {
  stroke: #d7ff79;
}

.group-3 .idea-node-dot {
  stroke: #7fb7ff;
}

.group-4 .idea-node-dot {
  stroke: #ffb86b;
}

.group-5 .idea-node-dot {
  stroke: #d99cff;
}

.group-6 .idea-node-dot {
  stroke: #ff7f9f;
}

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.75;
}

.site-footer p {
  margin: .45rem 0 0;
}

body.text-only #site-header,
body.text-only .idea-panel,
body.text-only .track-meta,
body.text-only .reader-tools,
body.text-only .tag-row,
body.text-only .track-idea {
  display: none;
}