:root {
  --paper: #fbfaf6;
  --ink: #28302b;
  --muted: #8e938c;
  --line: #e8e5dc;
  --sage: #9cb8a2;
  --sage-deep: #5c8066;
  --clay: #d98d72;
  --cream: #f4efe7;
  --yellow: #f4c975;
  --shadow: 0 22px 55px rgba(69, 65, 52, 0.08);
}
[hidden] {
  display: none !important;
}
button,
a,
input,
summary,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #967848;
  outline-offset: 4px;
}
.history-link {
  color: #4b6e53;
  text-decoration: none;
  border-bottom: 1px solid #9ab397;
  padding: 10px 2px;
  font-size: 13px;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.history-link:hover {
  color: #283e2e;
}
.save-notice {
  margin: 0 0 23px;
  padding: 20px 22px;
  background: #e9efe4;
  border: 1px solid #cfd9c7;
  border-radius: 18px;
}
.save-notice strong {
  font-size: 15px;
  color: #4f6846;
}
.save-notice p {
  font-size: 12px;
  line-height: 1.9;
  margin: 5px 0;
  color: #64765a;
}
.save-notice a {
  color: #426638;
  text-underline-offset: 3px;
}
.save-notice .sync-status {
  font-size: 12px;
  color: #3f6439;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #cfd9c7;
}
.sync-status[data-state="attention"] {
  color: #8b533c;
}
.draft-conflict {
  padding-top: 12px;
}
.draft-conflict button {
  font: inherit;
  font-size: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid #aabd9f;
  border-radius: 12px;
  color: #435a3d;
  background: #fbfaf6;
  margin: 6px 8px 0 0;
  cursor: pointer;
}
.input-label {
  display: block;
  font-size: 12px;
  color: #6e7569;
  margin-bottom: 7px;
}
.copy-fallback {
  position: fixed;
  left: -10000px;
  top: 0;
}
@media (max-width: 700px) {
  .topline {
    align-items: flex-start;
    gap: 9px;
  }
  .brand {
    font-size: 13px;
    white-space: nowrap;
  }
  .topline-actions {
    max-width: 210px;
  }
  .history-link {
    font-size: 12px;
  }
  .nickname-toggle,
  .audio-toggle {
    min-height: 36px;
  }
  .save-notice {
    padding: 17px;
  }
  .save-notice p {
    font-size: 12px;
  }
  .custom-quote input,
  .task-entry input {
    font-size: 16px;
  }
  .choice,
  .pill,
  .candidate,
  .task-chip,
  .quote-choice,
  .refresh-copy {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  z-index: 5;
}
.site-shell {
  max-width: 930px;
  margin: 0 auto;
  padding: 28px 28px 48px;
  position: relative;
  z-index: 1;
}
.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(120, 116, 101, 0.18);
  padding-bottom: 17px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #f8db98;
}
.tiny-note {
  font-size: 12px;
  color: var(--muted);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  align-items: center;
  gap: 38px;
  padding: 46px 16px 36px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--clay);
  margin: 0;
}
.hero h1 {
  font-size: clamp(44px, 5.6vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.08em;
  margin: 13px 0 20px;
  font-weight: 900;
}
.hero h1 em {
  font-style: normal;
  color: var(--sage-deep);
}
.hero-text {
  max-width: 440px;
  color: #737a72;
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
}
.hero-photo {
  width: 100%;
  margin: 0;
  padding: 8px 8px 0;
  border: 1px solid #e5d9c8;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(111, 76, 43, 0.12);
}
.hero-photo picture {
  display: block;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8/9;
  object-fit: cover;
  border-radius: 15px;
  background: #dfb496;
}
.hero-photo figcaption {
  padding: 11px 4px 12px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #83705c;
}
.flow {
  display: grid;
  gap: 15px;
}
.step-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(232, 229, 220, 0.96);
  border-radius: 22px;
  padding: 25px 27px;
  box-shadow: var(--shadow);
}
.step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
}
.step-number {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8f0e7;
  color: var(--sage-deep);
  font-size: 11px;
  font-weight: 900;
}
.step-head h2 {
  font-size: 21px;
  letter-spacing: -0.04em;
  margin: 2px 0 0;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.choice,
.pill,
.refresh-copy,
.primary-button,
.secondary-button,
.music-button {
  font: inherit;
  cursor: pointer;
  border: 0;
}
.choice {
  min-height: 118px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 15px;
  padding: 14px;
  transition: 0.2s ease;
}
.choice:hover,
.choice.selected {
  border-color: var(--sage);
  background: #eef5ed;
  transform: translateY(-2px);
}
.choice span {
  font-size: 22px;
  color: var(--sage-deep);
  display: block;
  margin-bottom: 7px;
}
.choice strong {
  display: block;
  font-size: 14px;
}
.choice small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}
.pill-grid {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.pill {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 9px 15px;
  border-radius: 999px;
  color: #596058;
  transition: 0.2s ease;
}
.pill:hover,
.pill.selected {
  border-color: var(--sage);
  color: var(--sage-deep);
  background: #eef5ed;
}
.music-pills .pill:nth-child(1),
.music-pills .pill:nth-child(2) {
  border-color: #ead4cc;
}
.copy-card {
  background: #f5f1e8;
}
.copy-card .step-head {
  margin-bottom: 15px;
}
.refresh-copy {
  margin-left: auto;
  background: transparent;
  color: var(--sage-deep);
  font-size: 12px;
}
.quote-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 19px;
  background: #fffdf8;
  border-radius: 14px;
  border: 1px solid rgba(222, 212, 195, 0.75);
}
.quote-mark {
  font-family: Georgia, serif;
  color: var(--clay);
  font-size: 31px;
  line-height: 0.9;
}
.quote-mark.end {
  align-self: flex-end;
}
.quote-box p {
  margin: 0;
  color: #5e665e;
  font-size: 16px;
  line-height: 1.7;
  flex: 1;
}
.result-section {
  margin-top: 42px;
}
.result-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0 6px 13px;
}
.result-top h2 {
  margin: 4px 0 0;
  font-size: 27px;
  letter-spacing: -0.06em;
}
.result-status {
  font-size: 11px;
  color: var(--muted);
}
.result-card {
  background: var(--ink);
  color: #f8f5ec;
  border-radius: 25px;
  padding: 28px;
  box-shadow: 0 28px 55px rgba(40, 48, 43, 0.18);
}
.result-main {
  display: flex;
  gap: 17px;
  align-items: flex-start;
}
.result-sun {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #edc875;
  color: #5c4a25;
  border-radius: 14px;
  font-size: 22px;
}
.result-kicker {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #a7c3ad;
  margin: 0;
}
.result-main h3 {
  font-size: 24px;
  letter-spacing: -0.05em;
  margin: 4px 0 7px;
}
.result-main p:not(.result-kicker) {
  color: #c0c9bd;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  max-width: 600px;
}
.result-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.result-details div {
  padding: 13px 5px;
}
.result-details div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.result-details span {
  display: block;
  color: #8f9d91;
  font-size: 11px;
}
.result-details strong {
  display: block;
  color: #f7e2ae;
  font-size: 15px;
  margin-top: 3px;
}
.result-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.primary-button,
.secondary-button,
.music-button {
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 12px;
}
.primary-button {
  background: #f5d286;
  color: #544627;
  font-weight: 800;
}
.secondary-button {
  background: rgba(255, 255, 255, 0.1);
  color: #eef1e8;
}
.music-button {
  background: #9fc3a6;
  color: #26362c;
}
.primary-button:hover,
.secondary-button:hover,
.music-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.share-hint {
  color: #88958b;
  font-size: 10px;
  margin: 13px 0 0;
}
.local-note {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 4px;
  color: #777f77;
  font-size: 11px;
}
.local-note span {
  font-size: 22px;
  color: var(--clay);
}
.local-note p {
  margin: 0;
  flex: 1;
}
.local-note strong {
  font-size: 10px;
  color: #8d958d;
  font-weight: 500;
}
.site-shell footer {
  border-top: 1px solid rgba(120, 116, 101, 0.18);
  display: flex;
  justify-content: space-between;
  padding-top: 17px;
  color: #a2a59e;
  font-size: 10px;
  letter-spacing: 0.08em;
}
@media (max-width: 700px) {
  .site-shell {
    padding: 18px 15px 35px;
  }
  .tiny-note {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 8px 24px;
  }
  .hero h1 {
    font-size: 46px;
    margin: 12px 0 16px;
  }
  .hero-text {
    font-size: 14px;
    line-height: 1.85;
  }
  .hero-photo {
    max-width: 420px;
    justify-self: center;
    padding: 6px 6px 0;
    border-radius: 18px;
  }
  .hero-photo img {
    aspect-ratio: 16/9;
    border-radius: 12px;
  }
  .hero-photo figcaption {
    padding: 8px 3px 9px;
    font-size: 11px;
  }
  .step-card {
    padding: 20px 17px;
    border-radius: 18px;
  }
  .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .choice {
    min-height: 104px;
  }
  .result-card {
    padding: 21px;
    border-radius: 20px;
  }
  .result-main h3 {
    font-size: 20px;
  }
  .result-details {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .result-details div + div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }
  .result-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .result-actions > * {
    flex: 1;
    text-align: center;
  }
  .local-note {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .local-note strong {
    width: 100%;
    margin-left: 31px;
  }
  .site-shell footer {
    font-size: 9px;
  }
}

.topline-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.audio-toggle {
  border: 1px solid rgba(92, 128, 102, 0.28);
  background: rgba(255, 255, 255, 0.55);
  color: var(--sage-deep);
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.audio-toggle:hover {
  background: #eef5ed;
}
.memory-line {
  font-size: 11px;
  color: #9a8e7d;
  margin: -7px 0 14px;
}
.special-pill {
  border-color: #d7b76e;
}
.reveal-panel {
  display: none;
  margin-top: 16px;
  padding: 14px;
  background: #f4f7f1;
  border: 1px dashed #cbd9ca;
  border-radius: 14px;
}
.reveal-panel.visible {
  display: block;
  animation: reveal-in 0.25s ease;
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.reveal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--sage-deep);
  font-size: 12px;
  margin-bottom: 10px;
}
.reveal-head small {
  color: var(--muted);
  font-size: 10px;
}
.candidate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.candidate {
  border: 1px solid #dfe8dc;
  background: #fffdf8;
  text-align: left;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  transition: 0.2s ease;
}
.candidate:hover,
.candidate.selected {
  border-color: var(--sage);
  background: #eaf3e8;
  transform: translateY(-1px);
}
.candidate strong {
  display: block;
  font-size: 13px;
}
.candidate small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  margin-top: 3px;
}
.music-candidate small {
  color: var(--clay);
}
.quote-tools {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.quote-suggestions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.quote-choice {
  border: 1px solid #e5d8c6;
  background: #fffdf8;
  color: #726858;
  border-radius: 999px;
  padding: 7px 11px;
  text-align: left;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.quote-choice:hover {
  border-color: var(--clay);
  color: var(--clay);
}
.custom-quote,
.task-entry {
  display: flex;
  gap: 8px;
}
.custom-quote input,
.task-entry input {
  min-width: 0;
  flex: 1;
  border: 1px solid #e1d8ca;
  background: #fffdf8;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 12px;
  outline: 0;
}
.custom-quote input:focus,
.task-entry input:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(156, 184, 162, 0.18);
}
.custom-quote button,
.task-entry button {
  border: 0;
  border-radius: 10px;
  padding: 0 13px;
  background: var(--sage-deep);
  color: #fff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.quote-tools > small {
  color: var(--muted);
  font-size: 10px;
}
.task-card {
  background: #eef3ec;
}
.task-entry button {
  background: var(--ink);
}
.task-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.task-chip {
  border: 1px solid #cddbcf;
  background: #f9fcf8;
  color: var(--sage-deep);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.task-chip:hover,
.task-chip.selected {
  background: #dcebdc;
  border-color: var(--sage);
}
.result-details {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
  .topline-actions {
    gap: 5px;
  }
  .topline-actions .tiny-note {
    display: none;
  }
  .audio-toggle {
    font-size: 10px;
    padding: 6px 8px;
  }
  .candidate-grid {
    grid-template-columns: 1fr 1fr;
  }
  .reveal-head {
    display: block;
  }
  .reveal-head small {
    display: block;
    margin-top: 3px;
  }
  .result-details {
    grid-template-columns: 1fr;
  }
  .custom-quote,
  .task-entry {
    align-items: stretch;
  }
  .custom-quote button,
  .task-entry button {
    padding: 0 10px;
  }
}
.nickname-toggle {
  border: 1px solid rgba(217, 141, 114, 0.28);
  background: rgba(255, 255, 255, 0.55);
  color: #9a6755;
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.nickname-toggle:hover {
  background: #fff1eb;
}
@media (max-width: 700px) {
  .nickname-toggle {
    font-size: 10px;
    padding: 6px 8px;
  }
  .topline-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.audio-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(40, 48, 43, 0.35);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.audio-modal.visible {
  opacity: 1;
  visibility: visible;
}
.audio-modal-card {
  max-width: 390px;
  width: 100%;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 28px 80px rgba(30, 38, 30, 0.24);
  text-align: center;
}
.audio-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #f5d286;
  color: #5c4a25;
  font-size: 25px;
}
.audio-modal-card h2 {
  margin: 7px 0 9px;
  font-size: 24px;
  letter-spacing: -0.06em;
}
.audio-modal-card > p:not(.eyebrow) {
  color: #737a72;
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
}
.audio-modal-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 21px;
}
.audio-modal-actions button {
  min-width: 125px;
}
.audio-modal-actions .secondary-button {
  background: #edf1eb;
  color: var(--sage-deep);
}

.tool-picker {
  margin-top: 5px;
}
.tool-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin: 0 6px 15px;
}
.tool-picker-heading h2 {
  margin: 4px 0 0;
  font-size: 28px;
  letter-spacing: -0.06em;
}
.tool-picker-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.surprise-feature{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:132px;margin:0 0 14px;padding:22px 24px;border:1px solid rgba(221,118,80,.28);border-radius:24px;background:linear-gradient(120deg,#fff5e5,#f7e9df);box-shadow:0 18px 38px rgba(111,76,43,.1);color:var(--ink);text-decoration:none;overflow:hidden;transition:.2s ease}.surprise-feature:hover,.surprise-feature:focus-visible{transform:translateY(-3px);box-shadow:0 24px 48px rgba(111,76,43,.15)}.surprise-feature-kicker{position:absolute;top:12px;left:24px;color:var(--clay);font-size:10px;font-weight:900;letter-spacing:.12em}.surprise-feature-icon{font-size:48px;margin-top:10px}.surprise-feature h3{margin:10px 0 4px;font-size:25px;letter-spacing:-.05em}.surprise-feature p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.surprise-feature .tool-link{color:var(--clay)}
.tool-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.tool-choice-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 0 14px;
  min-height: 188px;
  padding: 20px 21px;
  border: 1px solid rgba(232, 229, 220, 0.96);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.tool-choice-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -48px;
  top: -55px;
  border-radius: 50%;
  background: var(--tool-accent, rgba(156, 184, 162, 0.2));
}
.tool-choice-card:hover,
.tool-choice-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--sage);
  box-shadow: 0 26px 54px rgba(69, 65, 52, 0.12);
}
.tool-step {
  position: relative;
  z-index: 1;
  color: var(--sage-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.tool-symbol {
  position: relative;
  z-index: 1;
  grid-column: 1/-1;
  font-size: 29px;
  line-height: 1;
  margin: 10px 0 12px;
}
.tool-choice-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.tool-choice-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 29ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.tool-link {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  color: var(--sage-deep);
  font-size: 11px;
  font-weight: 800;
}
.tool-choice-card--meal {
  --tool-accent: rgba(221, 118, 80, 0.2);
}
.tool-choice-card--drink {
  --tool-accent: rgba(217, 152, 135, 0.23);
}
.tool-choice-card--wheel {
  --tool-accent: rgba(240, 189, 104, 0.25);
}
.tool-choice-card--mood {
  --tool-accent: rgba(120, 145, 126, 0.2);
}
.tool-choice-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 13px;
}
.tool-choice-mini {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 14px 17px;
  border: 1px solid #e8e5dc;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--ink);
  text-decoration: none;
  transition: 0.2s ease;
}
.tool-choice-mini:hover,
.tool-choice-mini:focus-visible {
  border-color: var(--sage);
  background: #f4f8f2;
  transform: translateY(-2px);
}
.tool-choice-mini > span {
  font-size: 24px;
  color: var(--clay);
}
.tool-choice-mini div {
  min-width: 0;
  flex: 1;
}
.tool-choice-mini strong,
.tool-choice-mini small {
  display: block;
}
.tool-choice-mini strong {
  font-size: 14px;
}
.tool-choice-mini small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.tool-choice-mini b {
  color: var(--sage-deep);
  font-size: 15px;
}
.legacy-link {
  margin-top: 15px;
}
.legacy-link > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border: 1px dashed #cddbcf;
  border-radius: 15px;
  color: var(--sage-deep);
  text-decoration: none;
  background: rgba(238, 245, 237, 0.5);
}
.legacy-link > a > span {
  font-size: 20px;
  color: var(--clay);
}
.legacy-link div {
  min-width: 0;
  flex: 1;
}
.legacy-link strong,
.legacy-link small {
  display: block;
}
.legacy-link strong {
  font-size: 13px;
}
.legacy-link small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.legacy-link b {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .surprise-feature{grid-template-columns:auto 1fr;min-height:124px;padding:22px 18px}.surprise-feature-kicker{left:18px}.surprise-feature .tool-link{grid-column:2}
  .tool-picker-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .tool-choice-grid {
    grid-template-columns: 1fr;
  }
  .tool-choice-secondary {
    grid-template-columns: 1fr;
  }
  .tool-choice-card {
    min-height: 166px;
    padding: 18px;
  }
  .tool-choice-mini {
    min-height: 70px;
  }
  .legacy-link > a {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .legacy-link b {
    width: 100%;
    padding-left: 33px;
  }
}
.sparkle-photo{position:relative;cursor:pointer;outline:none}.sparkle-photo:focus-visible{outline:3px solid #967848;outline-offset:6px}.sparkle-photo::after{content:"这里有惊喜";position:absolute;right:15px;top:15px;padding:5px 9px;border-radius:999px;background:rgba(255,253,248,.78);color:#83705c;font-size:10px;opacity:0;transform:translateY(-4px);transition:.25s ease;pointer-events:none}.sparkle-photo:hover::after,.sparkle-photo:focus-visible::after{opacity:1;transform:none}.sparkle-photo.is-sparkling img{animation:photo-wiggle .72s ease-in-out both}.sparkle-star{position:absolute;left:var(--sparkle-x);top:var(--sparkle-y);z-index:4;color:#e7ad52;font-size:clamp(22px,3vw,38px);line-height:1;text-shadow:0 0 5px rgba(255,248,210,.98),0 0 14px rgba(236,175,73,.9),0 0 28px rgba(236,175,73,.58);filter:drop-shadow(0 0 4px rgba(255,210,110,.7));pointer-events:none;animation:star-pop .72s var(--sparkle-delay) ease-out both}@keyframes photo-wiggle{0%,100%{transform:rotate(0) scale(1)}16%{transform:rotate(-1.4deg) scale(1.015)}34%{transform:rotate(1.2deg) scale(1.015)}52%{transform:rotate(-.8deg) scale(1.01)}70%{transform:rotate(.55deg) scale(1.005)}}@keyframes star-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-20deg)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-85%) scale(.55) rotate(28deg)}}@media(prefers-reduced-motion:reduce){.sparkle-photo.is-sparkling img{animation:none}.sparkle-star{animation:none;opacity:1}.sparkle-photo::after{transition:none}}

/* 常驻彩蛋提示：放在照片外侧，指向可点击图片 */
.sparkle-photo::after{right:50%;top:-34px;opacity:1;transform:translateX(50%);z-index:6;white-space:nowrap;padding:7px 14px;border:1px solid rgba(217,168,108,.38);background:rgba(255,252,243,.94);color:#756047;font-size:14px;font-weight:700;letter-spacing:.08em;box-shadow:0 6px 18px rgba(118,87,53,.12)}.sparkle-photo::before{right:calc(50% - 5px);top:-8px;opacity:1;z-index:6;transform:rotate(55deg)}
@media(max-width:700px){.sparkle-photo::after{top:-32px;right:50%;font-size:13px;padding:6px 12px}.sparkle-photo::before{right:calc(50% - 5px);top:-7px}}
.photo-message{position:absolute;left:0;right:0;top:-27px;text-align:center;color:rgba(92,128,102,.78);font-size:12px;letter-spacing:.14em;font-weight:600;pointer-events:none}.sparkle-photo .photo-message::after{content:"";display:block;width:34px;height:1px;margin:4px auto 0;background:rgba(217,141,114,.45)}
@media(max-width:700px){.photo-message{top:-25px;font-size:10px;letter-spacing:.1em}}
.photo-message{top:-47px}@media(max-width:700px){.photo-message{top:-43px}}
.beauty-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(248,225,192,.0);pointer-events:none;animation:beauty-fade 2.5s ease both}.beauty-overlay.is-visible{background:rgba(248,225,192,.28)}.beauty-glow{position:absolute;width:min(72vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,250,224,.68),rgba(248,213,150,.18) 45%,transparent 70%);filter:blur(5px);animation:beauty-glow 2.4s ease both}.beauty-message{position:relative;color:#627665;font-size:clamp(24px,4.2vw,44px);font-weight:700;letter-spacing:.09em;text-shadow:0 2px 12px rgba(255,255,255,.86);opacity:0;transform:scale(.28);animation:beauty-message 2.35s cubic-bezier(.2,.8,.25,1) both}.beauty-message span{display:inline-block;margin-left:.16em;color:#d9a86c;font-size:.68em;animation:beauty-star 2s ease both}@keyframes beauty-fade{0%,100%{opacity:0}13%,78%{opacity:1}}@keyframes beauty-message{0%{opacity:0;transform:scale(.28)}22%{opacity:1;transform:scale(1.05)}38%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}@keyframes beauty-glow{0%{opacity:0;transform:scale(.35)}25%{opacity:.95;transform:scale(1)}75%{opacity:.7;transform:scale(1.08)}100%{opacity:0;transform:scale(1.24)}}@keyframes beauty-star{0%,30%{opacity:0;transform:rotate(-30deg) scale(.2)}55%{opacity:1;transform:rotate(12deg) scale(1.25)}100%{opacity:0;transform:rotate(28deg) scale(.8)}}
@media(prefers-reduced-motion:reduce){.beauty-overlay,.beauty-glow,.beauty-message,.beauty-message span{animation:none}.beauty-overlay.is-visible{opacity:1}.beauty-message{opacity:1;transform:none}}

/* 手机端单独收紧：提示不出屏，星光和祝福语保持清楚 */
@media (max-width: 520px) {
  html, body { overflow-x: hidden; }
  .hero-photo { width: min(100%, 360px); margin-inline: auto; }
  .sparkle-photo::after { top: -38px; font-size: 13px; letter-spacing: .06em; padding: 6px 11px; }
  .sparkle-photo::before { top: -11px; }
  .sparkle-star { font-size: clamp(24px, 8vw, 32px); text-shadow: 0 0 5px rgba(255,248,210,.98), 0 0 16px rgba(236,175,73,.92), 0 0 30px rgba(236,175,73,.62); }
  .beauty-glow { width: 88vw; }
  .beauty-message { max-width: 90vw; text-align: center; font-size: clamp(25px, 7vw, 34px); letter-spacing: .07em; }
  .beauty-overlay.beauty-photo-overlay { inset: auto; top: var(--photo-top); left: var(--photo-left); width: var(--photo-width); height: var(--photo-height); overflow: hidden; background: transparent; border-radius: 16px; }
  .beauty-overlay.beauty-photo-overlay .beauty-glow { width: 145%; max-width: none; }
  .beauty-overlay.beauty-photo-overlay .beauty-message { max-width: 92%; font-size: clamp(22px, 6.8vw, 32px); color: #5e7162; text-shadow: 0 2px 10px rgba(255,255,255,.95), 0 0 18px rgba(255,236,177,.7); }
}
.photo-pop{position:absolute;z-index:7;color:#e4aa56;font-size:clamp(18px,3vw,30px);line-height:1;pointer-events:none;text-shadow:0 0 6px #fff5c9,0 0 16px rgba(231,173,82,.9);animation:photo-pop .95s var(--pop-delay) cubic-bezier(.2,.8,.25,1) both}@keyframes photo-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-34px) scale(.45)}}
/* 提示牌下方的指向箭头 */
.sparkle-photo::before{content:"";position:absolute;left:50%;right:auto;top:-11px;width:11px;height:11px;border-right:2px solid #b58a55;border-bottom:2px solid #b58a55;opacity:1;z-index:7;transform:translateX(-50%) rotate(45deg);filter:drop-shadow(0 2px 2px rgba(118,87,53,.16));pointer-events:none}
@media(max-width:700px){.sparkle-photo::before{left:50%;right:auto;top:-10px;transform:translateX(-50%) rotate(45deg)}}