:root {
  --ink: #f1eef7;
  --ink-dim: #b8b2c9;
  --accent: #f0c978;
  --accent-2: #88c7d8;
  --accent-3: #df98b4;
  --panel: rgba(15, 18, 34, 0.68);
  --panel-br: rgba(218, 214, 238, 0.16);
  --surface: rgba(13, 16, 31, 0.76);
  --surface-strong: rgba(19, 23, 42, 0.88);
  --line: rgba(218, 214, 238, 0.14);
  --shadow-soft: 0 18px 58px rgba(0, 0, 0, 0.34);
  --shadow-small: 0 10px 30px rgba(0, 0, 0, 0.26);
}

html {
  background: #070912 !important;
  color-scheme: dark;
  text-size-adjust: 100%;
}

body {
  color: var(--ink) !important;
  background:
    linear-gradient(180deg, #070912 0%, #111226 42%, #0b1520 100%) fixed !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(136, 199, 216, 0.055), transparent 28%, rgba(240, 201, 120, 0.045) 72%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 48px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.26));
}

#sky {
  opacity: 0.62;
}

.wrap {
  max-width: 760px !important;
  padding-left: clamp(20px, 4vw, 34px) !important;
  padding-right: clamp(20px, 4vw, 34px) !important;
}

a {
  text-underline-offset: 0.22em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(136, 199, 216, 0.9);
  outline-offset: 3px;
}

.back-link {
  color: var(--ink-dim) !important;
  border-bottom: 1px solid transparent !important;
}

.back-link:hover {
  color: var(--ink) !important;
  border-bottom-color: rgba(136, 199, 216, 0.38) !important;
}

.page-title,
h1 {
  letter-spacing: 0.02em !important;
  text-wrap: balance;
}

.page-sub,
.sub,
header.hero .lead {
  color: var(--ink-dim) !important;
  text-wrap: pretty;
}

header.hero {
  padding-top: clamp(112px, 20vh, 190px) !important;
}

header.hero .site-label,
.label {
  color: rgba(184, 178, 201, 0.72) !important;
}

header.hero .headline {
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.36);
}

.article,
.card,
.song,
.letter,
.quote-card,
.cta-box,
.hotline,
.disclaimer,
.clinic-box,
.reason-card,
.voice-card,
.post,
.guide-card {
  background: var(--surface) !important;
  border: 1px solid var(--panel-br) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(14px) saturate(1.05);
}

.article,
.letter,
.quote-card {
  padding: clamp(26px, 5vw, 42px) !important;
}

.article h2,
.seo-block h2,
.cat > h2 {
  color: var(--accent) !important;
  letter-spacing: 0.02em !important;
  text-wrap: balance;
}

.article h2.blue,
.seo-block h3,
.related h3 {
  color: var(--accent-2) !important;
}

.highlight {
  background: rgba(240, 201, 120, 0.09) !important;
  border-left-color: var(--accent) !important;
  border-radius: 0 10px 10px 0 !important;
}

.highlight.blue {
  background: rgba(136, 199, 216, 0.09) !important;
  border-left-color: var(--accent-2) !important;
}

.card,
.song {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.card:hover,
.song:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(136, 199, 216, 0.42) !important;
  background: var(--surface-strong) !important;
  box-shadow: var(--shadow-soft);
}

.card .t,
.s-title,
.quote-text {
  color: var(--ink) !important;
}

.card.warm .t,
.s-title {
  color: var(--accent) !important;
}

.card .d,
.s-note,
.quote-note,
.note,
.player-song,
footer {
  color: var(--ink-dim) !important;
}

.cat-tabs,
.word-tabs,
.sit-tabs,
.cats,
.cta-row {
  gap: 10px !important;
}

.cat-tab,
.word-tab,
.sit-tab,
.cat-btn,
.ctl-btn,
.shuffle-btn,
.cta-link,
.line-btn,
#shLine,
#shX,
#shCopy {
  border-radius: 10px !important;
  min-height: 40px;
}

.cat-tab,
.word-tab,
.sit-tab,
.cat-btn,
.ctl-btn,
.shuffle-btn,
#shX,
#shCopy {
  background: rgba(16, 19, 36, 0.62) !important;
  border-color: rgba(218, 214, 238, 0.17) !important;
}

.cat-tab:hover,
.word-tab:hover,
.sit-tab:hover,
.cat-btn:hover,
.ctl-btn:hover,
.shuffle-btn:hover {
  border-color: rgba(136, 199, 216, 0.45) !important;
  color: var(--ink) !important;
}

.cat-tab.active,
.cat-tab.active-all,
.cat-tab.active-quote,
.cat-tab.active-lyric,
.word-tab.active-all,
.word-tab.active-quote,
.word-tab.active-lyric,
.sit-tab.active,
.cat-btn.active {
  background: rgba(240, 201, 120, 0.12) !important;
  border-color: rgba(240, 201, 120, 0.44) !important;
  color: var(--accent) !important;
}

.cta-link,
.line-btn,
#shLine {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.site-nav {
  gap: 8px !important;
  justify-content: center !important;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink-dim) !important;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink) !important;
  text-decoration: none !important;
  background: rgba(136, 199, 216, 0.08);
  border-color: rgba(136, 199, 216, 0.24);
}

.related {
  border-top-color: var(--line) !important;
}

.related a {
  border-radius: 8px;
  padding: 8px 10px !important;
  margin-left: -10px;
}

.related a:hover {
  background: rgba(136, 199, 216, 0.07);
  text-decoration: none !important;
}

.seo-block {
  padding: clamp(18px, 3vw, 28px) 0 0 !important;
}

.word {
  text-wrap: balance;
}

.mini-player {
  background: rgba(8, 10, 21, 0.96) !important;
  border-top-color: rgba(218, 214, 238, 0.16) !important;
}

::selection {
  color: #090a16;
  background: rgba(240, 201, 120, 0.82);
}

@media (max-width: 620px) {
  body {
    line-height: 1.9 !important;
  }

  .wrap {
    padding-bottom: 96px !important;
  }

  header.hero {
    padding-top: 96px !important;
  }

  .article,
  .letter,
  .quote-card,
  .seo-block {
    padding: 24px 20px !important;
  }

  .cat-tabs,
  .word-tabs,
  .sit-tabs,
  .cats {
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .cat-tabs::-webkit-scrollbar,
  .word-tabs::-webkit-scrollbar,
  .sit-tabs::-webkit-scrollbar,
  .cats::-webkit-scrollbar {
    display: none;
  }

  .cat-tab,
  .word-tab,
  .sit-tab,
  .cat-btn {
    flex: 0 0 auto;
  }

  .site-nav {
    justify-content: flex-start !important;
  }
}

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