:root {
  --bg: #ffffff;
  --ink: #000000;
  --muted: #000000;
  --soft: #ffffff;
  --line: #ededed;
  --rose: #5d819b;
  --rose-dark: #3f6178;
  --plum: #3f6178;
  --green: #458c78;
  --gold: #b08a4a;
  --shadow: 0 6px 22px rgba(40, 80, 68, .04);
}

* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 21px; white-space: nowrap; flex-shrink: 0; }
.brand-mark {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
}
.nav-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
.nav-links a:hover { color: var(--rose); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.nav-links button, .ghost-btn, .primary-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 20px;
  background: rgba(255,255,255,.74);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.primary-btn, .ghost-btn {
  color: #496f8a;
  background: #fbfdff;
  border-color: #bed8e8;
  box-shadow: 0 3px 9px rgba(96, 139, 168, .08);
}
.primary-btn:hover, .ghost-btn:hover, .nav-links button:hover {
  color: #3e6680;
  background: #eaf6fd;
  border-color: #9cc5dd;
}

.hero { padding: 58px 0 34px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 28px; align-items: start; }
.hero-grid > *, .result-grid > *, .admin-layout > * { min-width: 0; }
.kicker { color: var(--rose-dark); font-size: 14px; font-weight: 800; letter-spacing: 0; }
h1 { margin: 10px 0 16px; font-size: 44px; line-height: 1.2; }
h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.4; }
h3 { margin: 0 0 8px; font-size: 20px; }
p { line-height: 1.75; }
.lead { color: var(--muted); font-size: 18px; max-width: 640px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.stat {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  border-radius: 8px;
  padding: 14px;
}
.stat strong { display: block; font-size: 22px; }
.stat span { color: var(--muted); font-size: 13px; }

.panel, .project-card, .type-card, .question-card, .admin-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel { padding: 24px; }
.code-sample {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 260px);
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  background: #ffffff;
  border: 1px solid #e5e5e2;
  color: #414347;
  border-radius: 8px;
  padding: 22px;
}
.code-sample .code { display: block; font-size: 38px; font-weight: 800; letter-spacing: 0; }
.sample-caption { font-size: 14px; color: #707378; }
.sample-description h3 { font-size: 20px; margin: 0; }
.sample-description p { font-size: 14px; color: #707378; margin: 8px 0 0; }
.code-sample .badges { margin: 0; gap: 8px; }
.history-empty { grid-template-columns: minmax(0, 1fr) auto; }
.history-empty h3 { margin: 12px 0 0; font-size: 20px; }
.history-empty p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.history-list { margin-top: 16px; }
.history-list summary { padding: 12px 0; cursor: pointer; color: var(--muted); font-size: 14px; }
.history-list ul { list-style: none; padding: 0; margin: 0; }
.history-list li { border-bottom: 1px solid var(--line); }
.history-list a { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding: 18px 0; font-size: 14px; }
.history-list a > span:first-child { flex: 1 1 240px; }
.history-list time { color: var(--muted); }
.history-list a:hover { color: var(--rose-dark); }
.home-hero { padding: 30px 0 0; }
.home-heading { display: flex; align-items: center; gap: 16px; }
.home-heading h1 { margin: 4px 0 0; }
.home-mascot { width: 96px; height: 96px; flex: 0 0 96px; }
.home-hero .lead { margin: 12px 0 0; max-width: none; font-size: 16px; }
.home-hero .hero-actions { margin-top: 20px; }
.home-hero .primary-btn {
  background: #fff1f6;
  border-color: #f1cad8;
  color: #000000;
}
.home-hero .primary-btn:hover {
  background: #ffe7f0;
  border-color: #e9b7ca;
  color: #000000;
}
.discover-section { padding-top: 34px; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.badge {
  border: 1px solid #e5e5e2;
  background: #ffffff;
  color: #60676e;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 14px;
}
.section { padding: 46px 0; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 18px; }
.section-head p { margin: 0; color: var(--muted); max-width: 560px; }
.grid { display: grid; gap: 16px; }
.project-grid { grid-template-columns: repeat(3, 1fr); }
.project-card {
  padding: 22px;
  min-height: 282px;
  gap: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.project-card h3 { margin: 18px 0 12px; font-size: 20px; line-height: 1.4; }
.project-card p { margin: 0; font-size: 16px; }
.project-card .primary-btn { text-align: center; }
.project-card:not(.coming-soon) {
  background: #fff3f7;
  border-color: #efd9e3;
}
.project-card:not(.coming-soon) .tag {
  color: #9a627b;
  background: #fde7ef;
  border-color: #efccd9;
}
.project-card.coming-soon { box-shadow: none; background: #ffffff; border-color: #e5e5e2; }
.project-card.coming-soon .tag { color: #707378; background: #f2f2ef; border-color: #e5e5e2; }
.coming-label { color: #707378; display: block; padding: 11px 0; font-size: 14px; border-top: 1px solid #e5e5e2; }
.card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 32px; }
.tag {
  color: var(--rose-dark);
  background: #f2f2ef;
  border: 1px solid #e5e5e2;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.muted { color: var(--muted); }

.type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.type-card {
  display: block;
  min-width: 0;
  min-height: 186px;
  padding: 22px;
  overflow: hidden;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease;
  text-align: left;
}
.type-card:hover { transform: translateY(-2px); border-color: #a8b0b8; }
.type-code { overflow-wrap: anywhere; font-size: 13px; color: #667078; font-weight: 500; letter-spacing: 0; }
.type-name { overflow-wrap: anywhere; margin-top: 8px; font-size: 19px; font-weight: 900; }
.type-desc {
  display: -webkit-box;
  margin: 10px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.redeem-box { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 18px; }
.input { width: 100%; border: 1px solid var(--line); background: white; border-radius: 8px; padding: 12px 14px; outline: none; }
.input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(100,112,124,.10); }
.notice { margin-top: 12px; color: var(--rose-dark); font-weight: 700; }
.quiz-shell { padding: 34px 0 54px; }
.progress-wrap { height: 8px; border-radius: 999px; background: rgba(73,52,71,.10); overflow: hidden; margin: 18px 0; }
.progress { height: 100%; background: linear-gradient(90deg, var(--rose), var(--green)); width: 0; transition: width .2s ease; }
.question-card { padding: 28px; }
.question-card h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; }
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.option { min-width: 0; min-height: 116px; display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1px solid var(--line); background: #ffffff; border-radius: 8px; padding: 18px; line-height: 1.7; }
.option-index { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #edf6fc; color: #4f7897; font-size: 13px; font-weight: 800; }
.option-1, .option-2 { background: #f8fcff; border-color: #d7e8f2; }
.option-3, .option-4 { background: #fff9fb; border-color: #f0dce5; }
.option-3 .option-index, .option-4 .option-index { background: #fbeaf1; color: #9a627b; }
.option:hover { border-color: #8eb8d0; background: #f1f9fd; }
.option-3:hover, .option-4:hover { border-color: #d5a6b9; background: #fff4f8; }
.quiz-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.result-hero { padding: 34px 0; }
.result-code { font-size: 72px; font-weight: 900; letter-spacing: 0; line-height: 1.1; color: var(--plum); }
.result-name { font-size: 32px; font-weight: 900; margin: 12px 0; }
.result-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; }
.result-section { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.7); }
.result-section ul { margin: 10px 0 0; padding-left: 20px; line-height: 1.8; }
.analysis-card { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); }
.analysis-list { display: grid; gap: 20px; margin-top: 22px; }
.analysis-row { display: grid; gap: 7px; }
.analysis-labels { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 700; }
.analysis-left-label { color: #3f84ab; }
.analysis-right-label { color: #b56282; text-align: right; }
.analysis-track { display: flex; height: 16px; overflow: hidden; border-radius: 4px; background: #f2f2ef; }
.analysis-bar-left { min-width: 0; background: #8fcce9; }
.analysis-bar-right { min-width: 0; background: #efb7cc; }
.analysis-row p { margin: 0; color: var(--muted); font-size: 13px; }
.roast { border-left: 4px solid var(--rose); padding-left: 14px; color: var(--rose-dark); font-weight: 800; }
.admin-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-card { padding: 20px; box-shadow: none; }
.admin-tools { display: grid; gap: 10px; }
.permanent-panel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.permanent-panel h3 { font-size: 18px; margin: 0 0 8px; }
.permanent-panel p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.permanent-code { display: grid; gap: 10px; margin-bottom: 14px; overflow-wrap: anywhere; }
.permanent-code strong { font-size: 15px; letter-spacing: 0; }
.toggle-row { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.toggle-row input { margin-top: 3px; accent-color: var(--rose); }
.admin-container { max-width: 1440px; width: calc(100% - 40px); }
.admin-login { max-width: 420px; margin: 20px auto; padding: 28px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.admin-login h1 { font-size: 28px; line-height: 1.4; }
.admin-tools label { font-size: 14px; margin-top: 6px; }
.admin-tools button[type="submit"] { margin-top: 12px; }
.code-search { display: grid; grid-template-columns: minmax(130px, 1fr) 128px auto auto; gap: 10px; align-items: end; margin-top: 22px; }
.code-search label { display: block; margin-bottom: 8px; font-size: 14px; }
.code-search button { min-height: 46px; white-space: nowrap; }
.search-summary { color: var(--muted); font-size: 14px; margin: 16px 0; }
.empty-codes { text-align: center; padding: 48px 20px; color: var(--muted); }
.row-actions { display: flex; gap: 8px; }
.row-actions button { white-space: nowrap; }
button:disabled { cursor: not-allowed; opacity: .5; }
select { font: inherit; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; background: white; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
th { background: #f5f5f2; color: var(--rose-dark); }
.status { font-weight: 900; }
.status.unused { color: var(--green); }
.status.redeemed { color: var(--rose-dark); }
.status.disabled { color: #8a6d34; }
.small-btn { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 8px 10px; }
.small-btn:hover { border-color: var(--rose); }
.footer { padding: 32px 0 54px; color: var(--muted); }
.footer-inner { border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.page-content { animation: page-arrive 360ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-arrive { from { opacity: .5; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.primary-btn, .ghost-btn, .small-btn, .option, .type-card, .nav-links a, .code-sample { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease, transform 180ms cubic-bezier(.2,.7,.2,1); -webkit-tap-highlight-color: transparent; }
.nav-links a { position: relative; border-radius: 6px; }
.nav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .primary-btn:not(:disabled):hover, .ghost-btn:not(:disabled):hover, .small-btn:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(57,64,73,.13); }
  .type-card:hover, .code-sample:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(83,65,74,.07); }
  .option:not(:disabled):hover { transform: translateX(3px); }
}
.primary-btn:not(:disabled):active, .ghost-btn:not(:disabled):active, .small-btn:not(:disabled):active, .type-card:active, .option:not(:disabled):active { transform: translateY(1px) scale(.97); box-shadow: none; transition-duration: 100ms; }
.personality-intro { max-width: 900px; }
.personality-intro .result-code { margin-top: 18px; }
.personality-intro .result-name { margin: 12px 0 18px; line-height: 1.4; }
.personality-story { max-width: 760px; margin-top: 28px; font-size: 17px; color: var(--ink); }
.personality-story p { margin: 0 0 22px; line-height: 1.95; }
.letter-explanation { background: #ffffff; border-block: 1px solid var(--line); }
.result-letters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 26px 0 0; }
.result-letter-item { min-width: 0; }
.result-letter-item dt { display: flex; align-items: start; gap: 12px; }
.result-letter-symbol { width: 40px; height: 48px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 6px; font-size: 26px; font-weight: 700; }
.letter-c .result-letter-symbol, .letter-o .result-letter-symbol, .letter-q .result-letter-symbol, .letter-b .result-letter-symbol { background: #dceefa; color: #4f7897; }
.letter-a .result-letter-symbol, .letter-d .result-letter-symbol, .letter-g .result-letter-symbol, .letter-m .result-letter-symbol { background: #f8e1eb; color: #a56f89; }
.result-letter-item small, .result-letter-item strong, .letter-english { display: block; }
.result-letter-item small, .letter-english { color: var(--muted); font-size: 14px; line-height: 1.6; }
.result-letter-item strong { margin-block: 4px; font-size: 16px; line-height: 1.5; }
.result-letter-item dd { margin: 16px 0 0; font-size: 15px; line-height: 1.8; color: var(--muted); }
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cp-card { padding: 26px; border: 1px solid #e5e5e2; background: #ffffff; border-radius: 8px; min-width: 0; }
.cp-card:nth-child(2) { border-color: #e5e5e2; background: #ffffff; }
.cp-combination { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; font-size: 29px; font-weight: 700; }
.cp-combination a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.cp-connector { font-size: 21px; font-weight: 400; color: var(--muted); }
.cp-card h3 { font-size: 19px; line-height: 1.5; }
.cp-card p { font-size: 15px; line-height: 1.85; color: var(--muted); }
.cp-practice { padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--line); }
.cp-practice strong { font-size: 15px; }
.cp-practice p { margin: 8px 0 20px; }
.cp-detail-link { color: var(--rose-dark); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.same-type-note { margin-top: 0; }
.matching-context { font-size: 14px; color: var(--muted); margin: -4px 0 22px; line-height: 1.8; }
.matching-method { margin-top: 24px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.matching-method summary { cursor: pointer; font-size: 15px; color: var(--rose-dark); padding: 10px 0; }
.matching-method p { max-width: 850px; font-size: 14px; color: var(--muted); }
.method-sources { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.partner-invite { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.partner-invite h3 { font-size: 22px; }
.partner-invite p { margin: 0; color: var(--muted); font-size: 15px; }
.author-roast { border-left: 3px solid #b7bec4; padding: 4px 0 4px 20px; margin-top: 28px; }
.author-roast h3 { font-size: 16px; color: var(--rose-dark); }
.author-roast p { margin: 8px 0 0; font-size: 17px; }
.result-actions { padding-top: 0; }
.result-actions .hero-actions { margin-top: 0; }
.result-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.result-action-grid .primary-btn,
.result-action-grid .ghost-btn { width: 100%; min-width: 0; justify-content: center; }
.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(35, 31, 34, .38);
  animation: fade-in 180ms ease;
}
.share-dialog {
  width: min(100%, 470px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #eadbe2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(55, 38, 46, .18);
}
.share-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 2px 2px 12px; }
.share-dialog-head strong { font-size: 15px; }
.share-close { border: 0; background: transparent; color: var(--muted); padding: 7px 4px; font-size: 14px; }
.share-close:hover { color: var(--ink); }
.share-preview-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 530px;
  padding: 34px 28px 26px;
  border: 1px solid #efdae4;
  border-radius: 8px;
  background: #fff3f7;
  color: #29282b;
}
.share-preview-card::after {
  content: "♥";
  position: absolute;
  z-index: -1;
  top: 22px;
  right: -54px;
  color: #f3c7d7;
  font-family: Georgia, serif;
  font-size: 190px;
  line-height: 1;
  transform: rotate(-12deg);
}
.share-brand { margin: 0; color: #5d819b; font-size: 13px; font-weight: 800; }
.share-caption { margin: 50px 0 4px; color: #756a70; font-size: 14px; }
.share-preview-code { font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: 2px; }
.share-preview-card h2 { margin: 10px 0 22px; font-size: 30px; }
.share-preview-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.share-preview-tags span { padding: 7px 10px; border: 1px solid #cde1ed; border-radius: 999px; background: #f8fcff; color: #547890; font-size: 13px; }
.share-preview-tags span:nth-child(even) { border-color: #efd0dc; background: #fff9fb; color: #9a627b; }
.share-roast { margin: 34px 0 0; padding: 18px 0 0 16px; border-left: 3px solid #d5a8bc; }
.share-roast strong { color: #9a627b; font-size: 14px; }
.share-roast p { margin: 8px 0 0; font-size: 17px; line-height: 1.8; }
.share-preview-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid #efd6e1; color: #7b7275; font-size: 12px; }
.share-save { width: 100%; margin-top: 12px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 960px) { .result-letters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cp-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .result-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .cp-card { padding: 20px; }
  .cp-combination { font-size: 26px; }
  .result-letters { gap: 24px 18px; }
  .result-letter-item dt { display: block; }
  .result-letter-symbol { margin-bottom: 12px; }
  .personality-story { font-size: 16px; }
  .partner-invite .primary-btn { width: 100%; }
  body[data-theme="love"] .love-intro::after { right: -102px; font-size: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-content { animation: none; }
  .primary-btn, .ghost-btn, .small-btn, .option, .type-card, .nav-links a, .nav-links a::after, .code-sample, .progress { transition: none; }
  .primary-btn:not(:disabled):hover, .ghost-btn:not(:disabled):hover, .small-btn:not(:disabled):hover, .type-card:hover, .code-sample:hover, .option:not(:disabled):hover,
  .primary-btn:not(:disabled):active, .ghost-btn:not(:disabled):active, .small-btn:not(:disabled):active, .type-card:active, .option:not(:disabled):active { transform: none; }
}

body[data-theme="love"] {
  --bg: #ffffff;
  --ink: #414347;
  --muted: #707378;
  --line: #e5e5e2;
  --rose: #727a82;
  --rose-dark: #555d65;
  --plum: #555d65;
  --green: #86bea8;
  --shadow: none;
}
body[data-theme="love"] :focus-visible { outline-color: #65747f; }
body[data-theme="love"] .input:focus { border-color: #555d65; }
body[data-theme="love"] .tag { color: #555d65; background: #f2f2ef; border-color: #e5e5e2; }
body[data-theme="love"] .type-card:nth-child(4n + 1),
body[data-theme="love"] .type-card:nth-child(4n + 4) { background: #ffffff; border-color: #e5e5e2; }
body[data-theme="love"] .type-card:nth-child(4n + 2),
body[data-theme="love"] .type-card:nth-child(4n + 3) { background: #ffffff; border-color: #e5e5e2; }
body[data-theme="love"] .type-card:hover { border-color: #a8b0b8; }
body[data-theme="love"] .question-card { background: transparent; border: 0; box-shadow: none; }
body[data-theme="love"] .option:hover { background: #f6f6f3; border-color: #a8b0b8; }
body[data-theme="love"] .progress-wrap { background: #eaeae7; }
body[data-theme="love"] .progress { background: #a9b9c4; }
.love-intro { background: #fff0f4; padding: 38px 0 28px; border-bottom: 1px solid var(--line); }
.love-intro h1 { font-size: 42px; line-height: 1.3; margin: 10px 0 14px; }
.love-intro .lead { margin: 0; max-width: 720px; font-size: 17px; }
.love-intro .hero-actions { margin-top: 22px; }
.love-facts { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-top: 24px; color: #806572; font-size: 14px; }
.love-facts span + span { border-left: 1px solid #e4cbd5; padding-left: 24px; }
.dimensions-section { padding: 34px 0 12px; }
.dimensions-section .kicker { font-size: 13px; margin-bottom: 8px; }
.dimensions-section .section-head { margin-bottom: 24px; }
.dimensions-section .section-head p { max-width: none; font-size: 16px; }
.dimension-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dimension-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.dimension-heading { display: flex; align-items: center; gap: 12px; }
.dimension-heading h3 { font-size: 19px; line-height: 1.5; margin: 0; }
.dimension-index { font-size: 14px; color: #777b80; }
.dimension-pair { margin-left: auto; color: #777b80; font-size: 14px; white-space: nowrap; }
.dimension-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 20px; }
.dimension-option { min-width: 0; position: relative; padding-left: 54px; }
.dimension-option dt { margin: 0; }
.dimension-letter { position: absolute; left: 0; top: 0; width: 42px; height: 50px; display: grid; place-items: center; font-size: 26px; font-weight: 700; border-radius: 6px; }
.mint .dimension-letter { color: #555d65; background: #f2f2ef; }
.pink .dimension-letter { color: #555d65; background: #f2f2ef; }
.dimension-label { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; }
.dimension-option dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.dimension-note { border-top: 1px solid #e5e5e2; padding-top: 16px; margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }

@media (max-width: 740px) {
  .dimension-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 860px) {
  .hero-grid, .result-grid, .admin-layout { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .type-grid .type-card { min-height: 172px; padding: 16px; }
  .type-grid .type-code { font-size: 12px; }
  .type-grid .type-name { font-size: 17px; }
  .type-grid .type-desc { font-size: 13px; }
  .code-sample { grid-template-columns: auto minmax(0, 1fr); }
  .code-sample .badges { grid-column: 1 / -1; }
  .redeem-box { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }
  .nav { height: auto; padding: 10px 0; gap: 8px; flex-wrap: wrap; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 6px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 42px; height: 42px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  .home-mascot { width: 80px; height: 80px; flex-basis: 80px; }
  .code-sample { gap: 14px; padding: 18px; grid-template-columns: 1fr; }
  .history-empty { grid-template-columns: 1fr; }
  .sample-type { display: flex; align-items: center; gap: 14px; }
  .code-sample .code { font-size: 32px; }
  .project-card { min-height: 260px; }
  .section-head { align-items: start; flex-wrap: wrap; }
  .hero { padding-top: 28px; }
  .love-intro h1 { font-size: 32px; }
  .love-intro .lead { font-size: 16px; }
  .love-facts { gap: 8px 12px; }
  .love-facts span + span { padding-left: 12px; }
  .dimension-card { padding: 20px; }
  .dimension-options { gap: 12px; }
  .dimension-option { padding-left: 46px; }
  .dimension-letter { width: 36px; height: 48px; font-size: 24px; }
  .section { padding-bottom: 28px; }
  .result-code { font-size: 52px; }
  .result-name { font-size: 26px; }
  .nav-links button, .ghost-btn, .primary-btn { padding: 9px 12px; font-size: 14px; }
  .project-grid, .stat-row { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .panel, .question-card { padding: 20px; }
  .quiz-shell .question-card { padding: 16px 0 0; }
  .quiz-shell .question-card h2 { font-size: 20px; }
  .options { grid-template-columns: 1fr; }
  .admin-container { width: calc(100% - 32px); }
  .admin-login { padding: 22px; }
  .code-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .code-search > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .dimension-options { grid-template-columns: 1fr; gap: 18px; }
  .love-facts span + span { border: 0; padding-left: 0; }
}

/* Love test: a quiet pastel palette with blue as the single interaction color. */
:root,
body[data-theme="home"] {
  --bg: #ffffff;
  --soft: #ffffff;
  --line: #ededed;
}

body[data-theme="love"] {
  --bg: #fff9fb;
  --soft: #ffffff;
  --ink: #000000;
  --muted: #000000;
  --line: #efdee7;
  --rose: #6f9fbd;
  --rose-dark: #5685a4;
  --plum: #5f849f;
  --green: #6f9fbd;
}

body[data-theme="love"] .topbar,
body[data-theme="love"] .footer,
body[data-theme="love"] .section {
  background: #fff9fb;
}

body[data-theme="love"] .love-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff0f4;
  border-color: #efdbe5;
}

body[data-theme="love"] .love-intro::after {
  content: "♥";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -150px;
  color: #f4cad9;
  font-family: Georgia, serif;
  font-size: 340px;
  line-height: 1;
  transform: translateY(-50%) rotate(-10deg);
  opacity: .8;
  pointer-events: none;
}

body[data-theme="love"] .love-intro .container { position: relative; z-index: 1; }

body[data-theme="love"] .love-intro .kicker,
body[data-theme="love"] .dimensions-section .kicker {
  color: #000000;
}

body[data-theme="love"] .love-intro h1,
body[data-theme="love"] .love-intro .lead,
body[data-theme="love"] .love-facts,
body[data-theme="love"] .section h2,
body[data-theme="love"] .section h3,
body[data-theme="love"] .type-name,
body[data-theme="love"] .dimension-label {
  color: #29282b;
}

body[data-theme="love"] .love-facts span + span {
  border-color: #cbddeb;
}

body[data-theme="love"] .primary-btn {
  color: #496f8a;
  background: #fbfdff;
  border-color: #bed8e8;
}

body[data-theme="love"] .primary-btn:hover {
  color: #3e6680;
  background: #eaf6fd;
  border-color: #9cc5dd;
}

body[data-theme="love"] .ghost-btn {
  color: #496f8a;
  background: #fbfdff;
  border-color: #bed8e8;
}

body[data-theme="love"] .ghost-btn:hover {
  color: #3e6680;
  background: #eaf6fd;
  border-color: #9cc5dd;
}

body[data-theme="love"] .dimension-card {
  background: #ffffff;
  border-color: #e7e4dc;
}

body[data-theme="love"] .dimension-card:hover {
  border-color: #cfcbc1;
  box-shadow: 0 8px 22px rgba(70, 66, 56, .07);
}

body[data-theme="love"] .dimension-index,
body[data-theme="love"] .dimension-pair,
body[data-theme="love"] .dimension-option dd,
body[data-theme="love"] .dimension-note {
  color: #000000;
}

body[data-theme="love"] .dimension-note {
  border-color: #eadfe5;
}

body[data-theme="love"] .mint .dimension-letter {
  color: #3f84ab;
  background: #dceefa;
}

body[data-theme="love"] .pink .dimension-letter {
  color: #b56282;
  background: #f8e1eb;
}

body[data-theme="love"] .type-card:nth-child(4n + 1),
body[data-theme="love"] .type-card:nth-child(4n + 4) {
  background: #fff7fa;
  border-color: #efdce6;
}

body[data-theme="love"] .type-card:nth-child(4n + 2),
body[data-theme="love"] .type-card:nth-child(4n + 3) {
  background: #f7fbff;
  border-color: #dbeaf3;
}

body[data-theme="love"] .type-card:hover,
body[data-theme="love"] .type-card:focus-visible {
  border-color: #a9c8dc;
}

body[data-theme="love"] .type-code,
body[data-theme="love"] .type-card:hover .type-code {
  color: #000000;
}

body[data-theme="love"] .tag {
  color: #5a7f99;
  background: #edf6fc;
  border-color: #d1e3ef;
}

body[data-theme="love"] .option:hover {
  background: #f2f8fd;
  border-color: #a9c8dc;
}

body[data-theme="love"] .progress-wrap { background: #e8f0f5; }
body[data-theme="love"] .progress { background: #9bc3de; }

body[data-theme="home"] .primary-btn,
body[data-theme="home"] .ghost-btn {
  color: #252525;
  background: #ffffff;
  border-color: #dfdfdf;
  box-shadow: 0 4px 12px rgba(70, 66, 56, .06);
}
body[data-theme="home"] .primary-btn:hover,
body[data-theme="home"] .ghost-btn:hover {
  color: #171717;
  background: #f7f7f7;
  border-color: #c8c8c8;
}
body[data-theme="love"] .love-intro .primary-btn,
body[data-theme="love"] .love-intro .ghost-btn {
  color: #252525;
  background: #ffffff;
  border-color: #dfdfdf;
  box-shadow: 0 4px 12px rgba(70, 66, 56, .06);
}
body[data-theme="love"] .love-intro .primary-btn:hover,
body[data-theme="love"] .love-intro .ghost-btn:hover {
  color: #171717;
  background: #f7f7f7;
  border-color: #c8c8c8;
}
body[data-theme="love"] .primary-btn,
body[data-theme="love"] .ghost-btn {
  color: #252525;
  background: #ffffff;
  border-color: #dfdfdf;
  box-shadow: 0 4px 12px rgba(70, 66, 56, .06);
}
body[data-theme="love"] .primary-btn:hover,
body[data-theme="love"] .ghost-btn:hover {
  color: #171717;
  background: #f7f7f7;
  border-color: #c8c8c8;
}
body[data-theme="home"] .code-sample:not(.history-empty) {
  background: #fff1f6;
  border-color: #f0d0df;
  color: #000000;
}
body[data-theme="home"] .code-sample,
body[data-theme="home"] .sample-caption,
body[data-theme="home"] .sample-description p,
body[data-theme="home"] .history-list summary,
body[data-theme="home"] .history-list time,
body[data-theme="home"] .badge,
body[data-theme="home"] .type-code,
body[data-theme="home"] .project-card.coming-soon .tag,
body[data-theme="home"] .coming-label {
  color: #000000;
}

/* Affirmation studio */
.affirmation-page { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0 76px; }
.affirmation-intro { padding: 34px 38px; border: 1px solid #e5ddef; border-left: 5px solid #aa91bf; background: #faf8fc; }
.affirmation-intro.compact { padding-block: 24px; }
.affirmation-intro h1, .affirmation-crisis h1 { margin: 8px 0 12px; font-size: clamp(30px, 5vw, 46px); }
.affirmation-intro p:not(.eyebrow), .affirmation-audio-panel p { margin: 0; max-width: 650px; line-height: 1.8; color: #51485b; }
.eyebrow { margin: 0; color: #7d6494; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.affirmation-form { margin-top: 24px; border-top: 1px solid #e8e1ee; }
.affirmation-section { padding: 26px 0; border-bottom: 1px solid #e8e1ee; }
.affirmation-section h2, .panel-heading h2, .affirmation-audio-panel h2 { margin: 0 0 18px; font-size: 19px; }
.affirmation-direction-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.affirmation-direction { min-height: 48px; display: grid; place-items: center; border: 1px solid #e1d9e9; background: #fff; color: #51485b; cursor: pointer; }
.affirmation-direction.selected { background: #f0eaf5; border-color: #ad91c2; color: #664b7d; font-weight: 700; }
.affirmation-direction input { position: absolute; opacity: 0; pointer-events: none; }
.affirmation-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.affirmation-field { display: grid; gap: 8px; font-weight: 700; font-size: 14px; color: #443b4e; }
.affirmation-field em { color: #847b8c; font-weight: 400; font-style: normal; }
.affirmation-field textarea, .affirmation-field input, .affirmation-chat-form textarea, .affirmation-editor { width: 100%; resize: vertical; border: 1px solid #ded5e6; border-radius: 6px; background: #fff; padding: 12px; color: #29232f; line-height: 1.65; }
.affirmation-field select { width: 100%; min-height: 48px; border: 1px solid #ded5e6; border-radius: 6px; background: #fff; padding: 0 12px; color: #29232f; }
.affirmation-field textarea:focus, .affirmation-field input:focus, .affirmation-chat-form textarea:focus, .affirmation-editor:focus { outline: 2px solid #c3aed4; outline-offset: 1px; }
.affirmation-relationship-fields { max-width: 650px; }
.affirmation-subheading { margin: 28px 0 13px !important; }
.affirmation-intent-list { display: flex; flex-wrap: wrap; gap: 10px; }
.affirmation-intent { position: relative; display: flex; align-items: center; min-height: 42px; padding: 8px 14px; border: 1px solid #e1d9e9; border-radius: 999px; background: #fff; color: #554a60; cursor: pointer; font-size: 14px; }
.affirmation-intent.selected { border-color: #ad91c2; background: #f0eaf5; color: #654a7b; font-weight: 700; }
.affirmation-intent input { position: absolute; opacity: 0; pointer-events: none; }
.affirmation-other-field { margin-top: 14px; }
.affirmation-relationship-note { margin-top: 20px; }
.is-hidden { display: none; }
.affirmation-options { display: flex; flex-wrap: wrap; gap: 42px; }
.affirmation-options fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.affirmation-options legend { margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.affirmation-options label { font-size: 14px; color: #385047; }
.affirmation-options input { accent-color: #8766a0; }
.affirmation-privacy { margin: 24px 0; color: #655b6e; font-size: 13px; line-height: 1.7; }
.affirmation-privacy summary { cursor: pointer; font-weight: 700; color: #684f7e; }
.affirmation-submit { width: 100%; margin-top: 4px; }
.affirmation-workspace { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; margin-top: 24px; }
.affirmation-draft-panel, .affirmation-chat-panel { border: 1px solid #e3dbea; padding: 24px; background: #fff; }
.panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid #eee8f2; padding-bottom: 14px; }
.panel-heading h2 { margin: 0; }
.text-action { border: 0; background: transparent; color: #72558a; padding: 4px 0; font-size: 13px; }
.affirmation-draft-text { white-space: pre-wrap; margin: 22px 0 12px; line-height: 2; font-size: 17px; color: #382f42; }
.affirmation-note { margin: 0; color: #786d83; font-size: 13px; line-height: 1.6; }
.affirmation-editor { margin: 20px 0 12px; min-height: 240px; }
.secondary-btn { border: 1px solid #bba7cb; border-radius: 6px; background: #fff; color: #674b7f; padding: 10px 14px; }
.affirmation-messages { min-height: 230px; max-height: 340px; overflow: auto; padding: 18px 0; }
.affirmation-message { margin: 0 0 16px; }
.affirmation-message span { display: block; margin-bottom: 5px; color: #806a92; font-size: 12px; font-weight: 700; }
.affirmation-message p { margin: 0; padding: 10px 12px; background: #f4f0f7; color: #473b51; line-height: 1.65; font-size: 14px; }
.affirmation-message.user p { background: #fbf7f8; }
.quiet-copy { color: #81768b; font-size: 14px; line-height: 1.7; }
.affirmation-chat-form { display: grid; gap: 10px; border-top: 1px solid #eee8f2; padding-top: 16px; }
.affirmation-chat-form .primary-btn { justify-self: start; padding: 10px 14px; }
.affirmation-audio-panel { display: flex; justify-content: space-between; align-items: end; gap: 22px; border-top: 1px solid #e3dbea; border-bottom: 1px solid #e3dbea; margin-top: 24px; padding: 26px 0; }
.affirmation-audio-panel h2 { margin: 7px 0; }
.affirmation-notice { margin: 14px 0 0; color: #715689; font-size: 14px; }
.affirmation-crisis { max-width: 700px; margin: 40px auto; padding: 42px; border: 1px solid #ead8d9; border-left: 5px solid #b35c64; background: #fffafb; }
.affirmation-crisis p { line-height: 1.8; color: #4f3336; }
@media (max-width: 760px) {
  .affirmation-page { width: min(100% - 24px, 920px); padding-top: 24px; }
  .affirmation-intro { padding: 26px 22px; }
  .affirmation-direction-list { grid-template-columns: repeat(3, 1fr); }
  .affirmation-detail-grid, .affirmation-workspace { grid-template-columns: 1fr; }
  .affirmation-options { display: grid; gap: 20px; }
  .affirmation-audio-panel { align-items: flex-start; flex-direction: column; }
  .affirmation-draft-panel, .affirmation-chat-panel { padding: 19px; }
}

/* Astrology chart prototype */
.astro-view-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #e8e4eb; gap: 0; padding-top: 10px; }
.astro-view-tabs button { appearance: none; width: 100%; min-width: 0; text-align: center; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 18px 8px 14px; color: #77707e; font: inherit; cursor: pointer; }
.astro-view-tabs button[aria-selected="true"] { color: #76598f; border-bottom-color: #9678b0; font-weight: 600; }
.astro-view-tabs button:focus-visible { outline: 2px solid #9678b0; outline-offset: 4px; }
.astro-page [role="tabpanel"][hidden] { display: none; }
@media (max-width: 480px) { .astro-view-tabs button { font-size: 14px; } }
.astro-input-section, .astro-data-section { padding: 28px 0; border-bottom: 1px solid #e8e4eb; }
.astro-input-section h2, .astro-data-section h2 { margin: 0 0 20px; font-size: 20px; font-weight: 600; }
.astro-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.astro-form-grid label { display: grid; gap: 8px; color: #625a68; font-size: 13px; }
.astro-form-grid input, .astro-form-grid select { width: 100%; min-width: 0; height: 42px; border: 1px solid #ded9e4; border-radius: 6px; padding: 8px 10px; background: #fff; color: #302936; font: inherit; }
.astro-paste-panel { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(260px, 1.25fr) auto; align-items: end; gap: 14px 18px; padding: 18px; margin: 0 0 22px; border: 1px solid #e4deea; background: #faf8fc; }
.astro-paste-panel strong { display: block; color: #413649; font-size: 15px; }
.astro-paste-panel p { margin: 6px 0 0; color: #817789; font-size: 12px; line-height: 1.6; }
.astro-paste-panel textarea { width: 100%; min-height: 76px; resize: vertical; border: 1px solid #ded9e4; border-radius: 6px; padding: 9px 10px; background: #fff; color: #302936; font: inherit; line-height: 1.5; }
.astro-paste-actions { display: flex; gap: 8px; padding-bottom: 1px; }
.astro-paste-actions button, .astro-place-field button { white-space: nowrap; }
.astro-place-field { grid-column: span 2; }
.astro-place-field > div { display: flex; gap: 8px; }
.astro-place-field small { min-height: 16px; color: #877b90; font-size: 11px; line-height: 1.5; }
.astro-place-results { display: grid; gap: 1px; margin-top: 12px; border: 1px solid #e3dfe8; background: #e3dfe8; }
.astro-place-results button { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; padding: 12px 14px; background: #fff; color: #403747; text-align: left; cursor: pointer; }
.astro-place-results button:hover { background: #f7f4fa; }
.astro-place-results span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.astro-place-results strong { font-size: 13px; }
.astro-place-results small, .astro-place-results em { color: #80768a; font-size: 11px; font-style: normal; }
.astro-method { font-size: 12px; line-height: 1.8; color: #817889; margin: 16px 0; }
.astro-error { color: #aa535a; font-size: 14px; }
.astro-report-options { display: flex; flex-wrap: wrap; gap: 16px 22px; margin: 0 0 20px; }
.astro-report-options label { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.astro-report-options input { accent-color: #8c75a2; }
.astro-report-output { max-width: 760px; margin: 30px auto 0; border-top: 1px solid #e8e4eb; padding-top: 20px; }
.astro-report-output p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 2; }
.astro-report-output h2 { margin-top: 30px; }
.astro-table-scroll { max-width: 100%; overflow-x: auto; }
.astro-table-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.astro-table-scroll th { font-weight: 500; color: #62586e; }
.astro-state-table th, .astro-state-table td { padding: 14px 12px; border-bottom: 1px solid #eae6ef; text-align: left; white-space: nowrap; }
.astro-state-table thead { background: #f7f5fa; }
.astro-matrix { min-width: 720px; table-layout: fixed; }
.astro-matrix td, .astro-matrix th { height: 70px; text-align: center; padding: 4px; }
.astro-matrix td:not(.astro-matrix-empty) { border: 1px solid #e5e0eb; }
.astro-matrix small { display: block; font-size: 10px; color: #827a89; margin-top: 2px; }
.astro-aspect-symbol { font-family: 'Segoe UI Symbol', sans-serif; font-size: 20px; }
.astro-aspect-symbol.trine { color: #628ba0; }
.astro-aspect-symbol.square, .astro-aspect-symbol.opposition { color: #ae7881; }
.astro-aspect-symbol.soft { color: #9a86aa; }
.astro-empty, .astro-matrix-empty { color: #d6d0dc; }
.astro-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.astro-stat-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 18px; font-size: 13px; }
.astro-stat-row strong { font-weight: 500; }
.astro-stat-row small { color: #89808e; font-weight: 400; }
.astro-stat-track { grid-column: 1/-1; height: 5px; background: #edeaf0; border-radius: 3px; overflow: hidden; }
.astro-stat-track i { display: block; height: 100%; }
.astro-stat-row p { grid-column: 1/-1; color: #89808e; margin: 0; line-height: 1.6; font-size: 11px; }
.astro-studio-page { max-width: 980px; }
.astro-studio-guide { display: grid; gap: 6px; margin: 22px 0; padding: 18px 20px; border-left: 3px solid #9f8bb8; background: #faf8fc; color: #574c62; line-height: 1.7; }
.astro-studio-form { display: grid; gap: 22px; padding: 26px 0; border-top: 1px solid #e8e4eb; }
.astro-studio-field { display: grid; gap: 7px; color: #3e3446; font-weight: 600; }
.astro-studio-field small { color: #82788c; font-weight: 400; line-height: 1.6; }
.astro-studio-field textarea, .astro-studio-field input { width: 100%; border: 1px solid #ddd6e5; border-radius: 6px; padding: 12px; color: #302937; background: #fff; font: inherit; line-height: 1.7; resize: vertical; }
.astro-studio-field textarea:focus, .astro-studio-field input:focus { outline: 2px solid #c7b7d8; outline-offset: 1px; }
.astro-studio-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.astro-version-list { margin-top: 34px; padding-top: 26px; border-top: 1px solid #e8e4eb; }
.astro-version-list h2 { margin: 0 0 16px; font-size: 20px; }
.astro-version-list article { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid #eeeaf1; }
.astro-version-list article p { margin: 5px 0 0; color: #81788a; font-size: 13px; }
.astro-version-list article > span { color: #6c5583; font-size: 13px; }
@media (max-width: 760px) {
  .astro-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .astro-paste-panel { grid-template-columns: 1fr; }
  .astro-place-field { grid-column: span 2; }
  .astro-place-results button { align-items: flex-start; flex-direction: column; gap: 5px; }
  .astro-stat-grid { grid-template-columns: 1fr; gap: 16px; }
}
.astro-page { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0 80px; color: #25212b; }
.astro-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; border-bottom: 1px solid #ded9e2; padding: 0 0 30px; }
.astro-kicker { margin: 0 0 9px; color: #756a82; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; }
.astro-intro h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: 0; font-weight: 600; }
.astro-intro p:not(.astro-kicker), .astro-next p:not(.astro-kicker) { max-width: 600px; margin: 0; color: #615b68; line-height: 1.8; }
.astro-theme-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.astro-theme { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d8d3de; background: transparent; color: #675f6f; padding: 9px 11px; font-size: 13px; cursor: pointer; }
.astro-theme i { width: 13px; height: 13px; display: block; border: 1px solid #c9c2d0; background: #fff; }
.astro-theme.lilac i { background: #eee8f8; }
.astro-theme.aqua i { background: #75c9c8; }
.astro-theme.mist i { background: #d3dff2; }
.astro-theme.lake i { background: #b0d2ec; }
.astro-theme.selected { border-color: #877893; color: #413748; box-shadow: inset 0 -2px 0 #877893; font-weight: 700; }
.astro-workbench { margin-top: 24px; border: 0; padding: 24px; background: #fff; }
.astro-lilac .astro-workbench { background: #f8f5fc; border-color: #d9d1e8; }
.astro-chart-header { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 4px 4px 20px; border-bottom: 1px solid #e8e4eb; }
.astro-chart-header div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; }
.astro-chart-header span { grid-column: 1 / -1; color: #827a89; font-size: 12px; }
.astro-chart-header strong { font-size: 20px; }
.astro-chart-header small { color: #756d7c; font-size: 12px; }
.astro-line-toggle { border: 1px solid #ddd6e3; background: transparent; color: #645b70; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.astro-line-toggle.on { background: #f0ebf6; border-color: #b6a7c6; color: #5a486c; }
.astro-stage { width: min(100%, 620px); margin: 22px auto 0; }
.astro-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: Georgia, "Times New Roman", serif; }
.astro-ring { fill: none; stroke: #91899a; stroke-width: .8; }
.astro-ring.zodiac { stroke: #bbb3c1; }
.astro-ring.house { stroke: #cac2cf; }
.astro-tick { stroke: #b8afbf; stroke-width: .65; }
.astro-tick.major { stroke: #8c8296; stroke-width: .9; }
.astro-house-line { stroke: #c6bfca; stroke-width: .65; }
.astro-house-number { text-anchor: middle; dominant-baseline: central; fill: #8b8990; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 8px; font-weight: 400; font-variant-numeric: tabular-nums; }
.astro-sign text { text-anchor: middle; dominant-baseline: central; fill: #5d5563; font-size: 19px; }
.astro-axis { stroke: #7e6f8b; stroke-width: 1.2; }
.astro-angle-label { text-anchor: middle; dominant-baseline: central; fill: #6e6179; font-family: Arial, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.astro-aspect { stroke-width: .6; opacity: .48; }
.astro-aspect.active { stroke-width: .95; opacity: .9; }
.astro-aspect.trine { stroke: #628ba0; }
.astro-aspect.square { stroke: #ae7881; }
.astro-aspect.opposition { stroke: #aa7379; }
.astro-aspect.soft { stroke: #9a86aa; }
.astro-planet { cursor: pointer; outline: none; }
.astro-planet circle { fill: #fff; stroke: #71667b; stroke-width: .9; transition: .18s ease; }
.astro-lilac .astro-planet circle { fill: #fcfaff; }
.astro-planet:hover circle, .astro-planet.selected circle { fill: #efe9f5; stroke: #5d4a6d; stroke-width: 1.5; }
.astro-planet-guide { stroke: #a69dab; stroke-width: .65; }
.astro-planet text:not(.astro-degree) { text-anchor: middle; dominant-baseline: central; fill: #332c38; font-size: 19px; }
.astro-degree { text-anchor: middle; dominant-baseline: central; fill: #6a6171; font-family: Arial, sans-serif; font-size: 8px; }
.astro-center { fill: #fff; stroke: #bfb6c5; stroke-width: .8; }
.astro-lilac .astro-center { fill: #f4effa; }
.astro-center-word, .astro-center-sub { text-anchor: middle; fill: #514758; font-family: Arial, sans-serif; }
.astro-center-word { font-size: 12px; font-weight: 700; }
.astro-center-sub { font-size: 9px; fill: #837a89; }
.astro-caption { margin: 2px 4px 0; padding: 16px 0 2px; border-top: 1px solid #e8e4eb; color: #79717f; font-size: 13px; line-height: 1.7; }
.astro-details { display: grid; grid-template-columns: .78fr 1.22fr; gap: 16px; margin-top: 16px; }
.astro-detail-card, .astro-list-card { border: 1px solid #dcd7e1; padding: 24px; background: #fff; }
.astro-lilac .astro-detail-card, .astro-lilac .astro-list-card { background: #f8f5fc; border-color: #d9d1e8; }
.astro-detail-title { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.astro-detail-title span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #a99cb5; border-radius: 50%; color: #4c3c59; font-family: Georgia, serif; font-size: 25px; }
.astro-detail-title h2 { margin: 0; font-size: 24px; }
.astro-placement { margin: 0; color: #625a68; line-height: 1.7; }
.astro-related { display: grid; gap: 8px; margin-top: 25px; border-top: 1px solid #e5e0e8; padding-top: 16px; }
.astro-related small { color: #837a8a; font-size: 11px; }
.astro-related span { color: #554c5c; font-size: 13px; }
.astro-list-header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #e5e0e8; }
.astro-list-header h2 { margin: 0; font-size: 19px; }
.astro-list-header span { color: #837a8a; font-size: 12px; }
.astro-planet-list { display: grid; grid-template-columns: 1fr 1fr; }
.astro-planet-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; text-align: left; gap: 8px; min-height: 55px; border: 0; border-bottom: 1px solid #eeeaf0; background: transparent; padding: 7px 5px; color: #362f3b; cursor: pointer; }
.astro-planet-row:nth-last-child(-n + 2) { border-bottom: 0; }
.astro-planet-row:nth-child(odd) { margin-right: 14px; }
.astro-planet-row.selected { background: #f1ecf6; }
.astro-lilac .astro-planet-row.selected { background: #ece4f4; }
.astro-row-glyph { font-family: Georgia, serif; font-size: 20px; text-align: center; }
.astro-planet-row strong, .astro-planet-row small { display: block; }
.astro-planet-row strong { font-size: 13px; }
.astro-planet-row small, .astro-planet-row time { color: #847b8b; font-size: 11px; }
.astro-planet-row time { white-space: nowrap; }
.astro-next { max-width: 730px; padding: 44px 0 0; }
.astro-next h2 { margin: 0 0 12px; font-size: 28px; }

/* Palette options: the chart stays precise and quiet while each surface shifts tone. */
.astro-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
.astro-page .astro-kicker { letter-spacing: 0; }
.astro-theme { border-radius: 6px; border-color: transparent; padding: 8px; }
.astro-theme i { border-radius: 50%; width: 16px; height: 16px; }
.astro-theme.selected { box-shadow: none; background: #f3f3f5; border-color: #dcdce0; }
.astro-zodiac-divider { stroke: #c9c8ce; stroke-width: .55; }
.astro-sign, .astro-celestial-glyph, .astro-planet-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.astro-celestial-glyph { color: #514b59; pointer-events: none; }
.astro-planet-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: none; }
.astro-detail-title .astro-planet-icon { width: 24px; height: 24px; }
.astro-related .astro-planet-icon { width: 15px; height: 15px; }
.astro-related > span { display: flex; align-items: center; gap: 5px; }
.astro-planet:hover .astro-celestial-glyph, .astro-planet.selected .astro-celestial-glyph { color: #665184; }
.astro-aqua .astro-celestial-glyph { color: #315b6c; }
.astro-mist .astro-celestial-glyph { color: #3f526c; }
.astro-lake .astro-celestial-glyph { color: #365c7d; }
.astro-page .element-0 { color: #b67668; }
.astro-page .element-1 { color: #81947e; }
.astro-page .element-2 { color: #b49a64; }
.astro-page .element-3 { color: #738eae; }
.astro-ring.aspect-boundary { stroke: #b9b8c0; stroke-width: .6; }
.astro-page .astro-planet .astro-hit { fill: transparent; stroke: none; }
.astro-page .astro-planet .astro-anchor { fill: #8a8592; stroke: none; }
.astro-page .astro-planet.selected .astro-anchor { fill: #5b4e70; }
.astro-page .astro-planet:focus-visible .astro-hit { stroke: #8d7da8; stroke-width: .8; }
.astro-page .astro-planet:hover text, .astro-page .astro-planet.selected text { fill: #665184; }
.astro-position-tick { stroke: #81798e; stroke-width: 1; }
.astro-planet-guide { fill: none; stroke: #b9b4c2; stroke-width: .55; }
.astro-angle-label { font-size: 7px; font-weight: 600; letter-spacing: 0; }
.astro-axis { stroke-width: .8; }
.astro-caption { display: flex; align-items: center; justify-content: center; gap: 18px; }
.astro-caption small { color: #8c8891; font-size: 11px; }
.astro-details { border-top: 1px solid #e8e7eb; gap: 32px; }
.astro-detail-card, .astro-list-card { border: 0; padding: 24px 0; }
.astro-next { display: none; }
.astro-aqua { color: #253f4a; }
.astro-aqua .astro-intro { border-color: #c5dce0; }
.astro-aqua .astro-kicker { color: #5d8b97; }
.astro-aqua .astro-workbench { background: #f7f4ea; border-color: #c8e2e2; }
.astro-aqua .astro-detail-card, .astro-aqua .astro-list-card { background: #f7f4ea; border-color: #c8e2e2; }
.astro-aqua .astro-ring.outer { stroke: #6ba9ad; }
.astro-aqua .astro-ring.zodiac, .astro-aqua .astro-ring.house, .astro-aqua .astro-house-line { stroke: #a8c7d5; }
.astro-aqua .astro-tick { stroke: #9eb9d0; }
.astro-aqua .astro-tick.major, .astro-aqua .astro-axis { stroke: #6b95c1; }
.astro-aqua .astro-sign text, .astro-aqua .astro-planet text:not(.astro-degree) { fill: #315b6c; }
.astro-aqua .astro-planet circle, .astro-aqua .astro-center { fill: #f7f4ea; stroke: #75a9b6; }
.astro-aqua .astro-planet:hover circle, .astro-aqua .astro-planet.selected circle { fill: #dce9ea; stroke: #478d91; }
.astro-aqua .astro-planet-row.selected { background: #e2eeed; }

.astro-mist { color: #283342; }
.astro-mist .astro-intro { border-color: #d9dfe7; }
.astro-mist .astro-kicker { color: #74849b; }
.astro-mist .astro-workbench { background: #e7e8e4; border-color: #c9ced6; }
.astro-mist .astro-detail-card, .astro-mist .astro-list-card { background: #eef0ed; border-color: #c9ced6; }
.astro-mist .astro-ring.outer { stroke: #718097; }
.astro-mist .astro-ring.zodiac, .astro-mist .astro-ring.house, .astro-mist .astro-house-line { stroke: #aab4c4; }
.astro-mist .astro-tick { stroke: #a1adbd; }
.astro-mist .astro-tick.major, .astro-mist .astro-axis { stroke: #7189ad; }
.astro-mist .astro-sign text, .astro-mist .astro-planet text:not(.astro-degree) { fill: #3f526c; }
.astro-mist .astro-planet circle, .astro-mist .astro-center { fill: #eef0ed; stroke: #8799b5; }
.astro-mist .astro-planet:hover circle, .astro-mist .astro-planet.selected circle { fill: #dbe5f2; stroke: #647a9d; }
.astro-mist .astro-planet-row.selected { background: #dce4ef; }

.astro-lake { color: #2c3f50; }
.astro-lake .astro-intro { border-color: #cedbe5; }
.astro-lake .astro-kicker { color: #6686a0; }
.astro-lake .astro-workbench { background: #eee7da; border-color: #c2d6e7; }
.astro-lake .astro-detail-card, .astro-lake .astro-list-card { background: #f6f1e8; border-color: #c2d6e7; }
.astro-lake .astro-ring.outer { stroke: #638ebc; }
.astro-lake .astro-ring.zodiac, .astro-lake .astro-ring.house, .astro-lake .astro-house-line { stroke: #a9c3dc; }
.astro-lake .astro-tick { stroke: #a7bfd3; }
.astro-lake .astro-tick.major, .astro-lake .astro-axis { stroke: #648ec0; }
.astro-lake .astro-sign text, .astro-lake .astro-planet text:not(.astro-degree) { fill: #365c7d; }
.astro-lake .astro-planet circle, .astro-lake .astro-center { fill: #f6f1e8; stroke: #7ba2c7; }
.astro-lake .astro-planet:hover circle, .astro-lake .astro-planet.selected circle { fill: #dce8f4; stroke: #547ca7; }
.astro-lake .astro-planet-row.selected { background: #e0ebf4; }

@media (max-width: 760px) {
  .astro-page { width: min(100% - 24px, 1080px); padding-top: 26px; }
  .astro-intro { display: block; padding-bottom: 24px; }
  .astro-theme-switch { margin-top: 20px; }
  .astro-workbench { padding: 12px; margin-inline: -4px; }
  .astro-chart-header { align-items: flex-start; }
  .astro-chart-header strong { font-size: 17px; }
  .astro-chart-header small { display: block; max-width: 145px; line-height: 1.5; }
  .astro-line-toggle { font-size: 12px; }
  .astro-details { grid-template-columns: 1fr; }
  .astro-detail-card, .astro-list-card { padding: 19px; }
  .astro-planet-list { grid-template-columns: 1fr; }
  .astro-planet-row:nth-child(odd) { margin-right: 0; }
  .astro-planet-row:nth-last-child(-n + 2) { border-bottom: 1px solid #eeeaf0; }
  .astro-planet-row:last-child { border-bottom: 0; }
}