:root {
  --site-highlight: #c8ff52;
  --site-highlight-hover: #a5ed20;
  --site-violet: #7667f3;
  --site-violet-soft: #eff0ff;
  --site-ink-2: #222842;
  --site-line-dark: #303650;
  --site-red: #c63f55;
  --site-orange: #f3a533;
}

body {
  background: var(--site-background);
  color: var(--site-text);
}

.site-header {
  background: rgba(247, 246, 240, .92);
  border-bottom-color: rgba(16, 19, 41, .1);
}

.brand-logo,
.footer-brand img {
  filter: drop-shadow(0 8px 14px rgba(118, 103, 243, .25));
}

.desktop-nav-list .nav-link {
  color: #3f455d;
}

.desktop-nav-list .nav-link:hover,
.desktop-nav-list .nav-link.active {
  border-bottom-color: var(--site-violet);
  color: var(--site-text);
}

.dropdown-menu {
  box-shadow: 0 18px 48px rgba(16, 19, 41, .14);
}

.dropdown-item:active {
  background: var(--site-violet);
}

.header-search input,
.mobile-search input,
.library-filters input,
.library-filters select,
.form-control,
.form-select,
.editor-settings input,
.editor-settings select,
.note-inspector select {
  background: #fff;
  border-color: #cfd2dc;
}

.header-search input:focus,
.mobile-search input:focus,
.form-control:focus,
.form-select:focus,
.code-textarea:focus {
  border-color: var(--site-violet);
  box-shadow: 0 0 0 3px rgba(118, 103, 243, .18);
}

.header-search button,
.mobile-search button {
  color: #5d657c;
}

.avatar {
  background: var(--site-violet-soft);
  color: #5446cf;
}

.mobile-menu-button {
  background: #ebeae4;
  color: var(--site-text);
}

.mobile-navigation {
  background: var(--site-primary);
}

.mobile-brand > span > span,
.footer-brand strong span {
  color: var(--site-highlight);
}

.mobile-nav-group li a {
  color: #c0c6da;
}

.button-primary,
.btn-primary {
  background: var(--site-primary);
  border-color: var(--site-primary);
  color: #fff;
}

.button-primary:hover,
.btn-primary:hover {
  background: var(--site-ink-2);
  border-color: var(--site-ink-2);
  color: #fff;
  box-shadow: 0 8px 22px rgba(16, 19, 41, .18);
}

.button-secondary:hover,
.btn-outline-secondary:hover {
  background: #fafaf6;
  border-color: #aeb2c0;
}

.surface-card {
  box-shadow: 0 10px 30px rgba(16, 19, 41, .045);
}

.eyebrow {
  color: var(--site-violet);
}

.eyebrow.light {
  color: var(--site-highlight);
}

.live-dot {
  background: var(--site-highlight-hover);
  box-shadow: 0 0 0 5px rgba(165, 237, 32, .16);
}

.play-symbol {
  border-left-color: currentColor;
}

.format-chip {
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--site-violet);
}

.player-progress-track {
  background: #e3e4ea;
}

.player-progress-track > span {
  background: var(--site-highlight-hover);
}

.hero-grid {
  isolation: isolate;
  overflow: hidden;
  background: var(--site-primary);
  color: #fff;
}

.hero-grid::before {
  inset: 0 0 0 50%;
  width: auto;
  z-index: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(circle at 60% 42%, rgba(118, 103, 243, .23) 0, transparent 48%);
  pointer-events: none;
}

.hero-copy,
.hero-player {
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  color: #fff;
}

.hero-copy h1 em {
  color: var(--site-highlight);
}

.hero-lead {
  color: #b9bfd4;
}

.hero-stats dd {
  color: #99a1bb;
}

.hero-actions .button-primary {
  background: var(--site-highlight);
  border-color: var(--site-highlight);
  color: var(--site-primary);
}

.hero-actions .button-primary:hover {
  background: var(--site-highlight-hover);
  border-color: var(--site-highlight-hover);
  color: var(--site-primary);
}

.hero-actions .button-secondary {
  border-color: var(--site-line-dark);
  background: var(--site-ink-2);
  color: #fff;
}

.hero-player {
  background: #171b34;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}

.terminal-top {
  background: #11152b;
  border-bottom-color: var(--site-line-dark);
}

.terminal-top > span {
  background: #3f4664;
}

.terminal-line {
  color: #9099b7;
}

.terminal-line code {
  color: #dbe1ff;
}

.line-no {
  color: #606a89;
}

.signal-visual span,
.mini-signal span,
.large-signal span {
  background: linear-gradient(to top, var(--site-highlight-hover), var(--site-violet));
}

.round-play {
  background: var(--site-highlight);
  color: var(--site-primary);
}

.hero-player-controls div span {
  color: #8f97b3;
}

.hero-player-controls .format-chip {
  color: var(--site-highlight);
}

.feature-strip {
  box-shadow: 0 24px 70px rgba(16, 19, 41, .1);
}

.feature-strip > a:hover,
.ringtone-card-footer,
.ringtone-card-manage {
  background: #fafaf6;
}

.feature-icon,
.dashboard-tools a > span {
  background: var(--site-violet-soft);
  color: var(--site-violet);
}

.format-callout {
  background: var(--site-violet);
}

.format-callout p {
  color: #e3e0ff;
}

.text-link-light,
.text-link-light:hover {
  color: var(--site-highlight);
}

.ringtone-card:hover {
  box-shadow: 0 18px 40px rgba(16, 19, 41, .1);
}

.genre-badge {
  background: #eff0f7;
  color: #414962;
}

.tag-list a {
  background: #f2f2ec;
  color: #5e6680;
}

.card-play {
  color: var(--site-primary);
}

.favorite-button {
  background: #eff0f4;
  color: #9ba0af;
}

.favorite-button.active {
  background: #fff0f3;
  color: #d34263;
}

.active-filter,
.filter-tabs a.active {
  background: var(--site-violet-soft);
  color: #5446cf;
}

.empty-state > span {
  background: var(--site-violet-soft);
  color: var(--site-violet);
}

.detail-description,
.guide-article p,
.guide-checklist li,
.report-admin-card p {
  color: #444b61;
}

.detail-player {
  box-shadow: 0 25px 60px rgba(16, 19, 41, .1);
}

.code-panel,
.code-textarea,
.code-block,
.anatomy-code,
.notation-cards div {
  background: #0e1122;
}

.code-panel {
  color: #d9def6;
}

.code-panel-header,
.code-block > div {
  color: #9ca4bf;
}

.code-panel-header button,
.code-block button {
  color: var(--site-highlight);
}

.code-textarea,
.code-block pre,
.anatomy-code code {
  color: #d9def6;
}

.tool-draft-banner,
.publish-section,
.info-note {
  border-color: #d8d5ff !important;
  background: #f1f0ff;
}

.tool-draft-banner > span {
  background: var(--site-violet);
}

.converter-aside,
.guide-hero {
  background: var(--site-primary);
}

.converter-aside p,
.converter-aside li,
.guide-hero p {
  color: #c0c6da;
}

.timeline-wrap {
  border-color: #b8bdca;
  background: #fff;
  scrollbar-color: #747e9e #e9eaf0;
}

.pitch-ruler {
  border-right-color: #343b58;
  background: #171b30;
  color: #7f89aa;
  box-shadow: 5px 0 12px rgba(4, 6, 18, .2);
}

.pitch-row {
  border-bottom-color: #2d344d;
}

.pitch-row.accidental {
  background: #0a0d1b;
  color: #5c6580;
}

.pitch-row.octave-start {
  border-bottom-color: #596483;
  color: #c8cee3;
}

.pitch-row.rest-row {
  background: #20263d;
  color: #8790ad;
}

.editor-timeline {
  background-color: #0d1021;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 19px, rgba(255, 255, 255, .065) 19px, rgba(255, 255, 255, .065) 20px), repeating-linear-gradient(to right, transparent 0, transparent 159px, rgba(255, 255, 255, .04) 159px, rgba(255, 255, 255, .04) 160px);
}

.editor-timeline::after {
  border-top-color: #343b58;
  background: rgba(32, 38, 61, .94);
  color: #8790ad;
}

.timeline-note {
  border-color: var(--site-highlight-hover);
  background: linear-gradient(90deg, var(--site-highlight-hover), #d8ff80);
  color: #17220b;
}

.timeline-note:hover {
  box-shadow: 0 2px 8px rgba(165, 237, 32, .25);
}

.timeline-note:focus-visible {
  outline-color: #fff;
}

.timeline-note.selected {
  border-color: #fff;
  background: var(--site-violet);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(118, 103, 243, .3);
}

.timeline-note.rest {
  border-color: #737c99;
  background: #565e79;
  color: #fff;
}

.note-resize-handle {
  border-left-color: rgba(16, 19, 41, .28);
  background: rgba(16, 19, 41, .1);
}

.note-inspector {
  background: #f4f4ef;
}

.editor-stats span,
.recaptcha-widget-disabled {
  background: #f0f0eb;
}

.guide-toc {
  border-left-color: #d9dbe4;
}

.info-note {
  border-left-color: var(--site-violet) !important;
}

.source-note {
  border-left-color: #7d8499;
  background: #f0f1f4;
}

.guide-checklist li::before,
.steps li::before {
  background: var(--site-primary);
  color: var(--site-highlight);
}

.support-badge.direct {
  background: #e3f3cd;
  color: #355b0c;
}

.support-badge.firmware {
  background: #e7e8ff;
  color: #4339a1;
}

.signal-map code,
.use-case-grid article > span,
.implementation-paths article > span {
  color: var(--site-violet);
}

.ringtone-card-manage a,
.ringtone-card-manage button {
  border-color: #d5d7df;
  color: #4d556c;
}

.filter-tabs a.active {
  border-color: var(--site-violet);
}

.site-footer {
  background: var(--site-primary);
  color: #fff;
}

.footer-grid {
  grid-template-columns: minmax(250px, 1.35fr) minmax(0, 3.65fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: 3.6rem 1.8rem;
}

.footer-brand {
  align-items: flex-start;
}

.footer-brand img {
  width: 44px;
}

.footer-brand strong {
  font-size: 1.25rem;
}

.footer-brand div > span {
  margin-top: .45rem;
  color: #929bb8;
  font-size: .78rem;
}

.footer-link-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.footer-grid .footer-link-group {
  display: grid;
  align-content: start;
  gap: .5rem;
}

.footer-link-group strong {
  margin-bottom: .35rem;
  color: #fff;
  font-size: .78rem;
}

.footer-link-group strong a {
  color: inherit;
  font-size: inherit;
}

.footer-grid .footer-link-group a {
  color: #bfc5da;
  font-size: .76rem;
  text-decoration: none;
}

.footer-grid .footer-link-group a:hover {
  color: var(--site-highlight);
}

.footer-bottom {
  grid-column: 1 / -1;
  margin-top: .9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--site-line-dark);
}

.footer-bottom p {
  margin: 0;
  color: #858eaa;
  font-size: .7rem;
}

@media (max-width: 1050px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-link-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px), (orientation: portrait) {
  .hero-grid {
    overflow: visible;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .footer-link-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }
}

@media (max-width: 420px) {
  .footer-link-columns {
    grid-template-columns: 1fr;
  }
}