.tarot-feature {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  border-color: #5d4679;
  padding: 22px;
  color: #f6eefe;
  background:
    radial-gradient(circle at 78% 24%, rgba(241, 199, 117, 0.15), transparent 23%),
    linear-gradient(145deg, #17101f, #332044 58%, #11101b);
}

.tarot-feature::after {
  position: absolute;
  right: 24px;
  bottom: -38px;
  width: 128px;
  height: 190px;
  border: 1px solid rgba(244, 213, 148, 0.65);
  border-radius: 7px;
  background:
    radial-gradient(circle at center, transparent 20%, rgba(244, 213, 148, 0.25) 21%, transparent 23%),
    repeating-radial-gradient(circle at center, transparent 0 12px, rgba(244, 213, 148, 0.18) 13px 14px),
    #24162f;
  box-shadow: -16px -10px 0 -2px #3b2850, -16px -10px 0 0 rgba(244, 213, 148, 0.35);
  content: "";
  transform: rotate(12deg);
}

.tarot-feature > * { position: relative; z-index: 1; }
.tarot-feature p { max-width: 36ch; color: #cabdd8; }
.tarot-feature .secondary-button { border-color: #745f8c; color: #f8eecf; background: rgba(255,255,255,0.06); }

.tarot-world {
  min-height: 100vh;
  color: #f5effb;
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 74, 152, 0.3), transparent 33%),
    radial-gradient(circle at 12% 38%, rgba(231, 192, 104, 0.08), transparent 22%),
    linear-gradient(180deg, #0d0912, #17101f 60%, #09080d);
}

.tarot-world::before {
  position: fixed;
  z-index: 0;
  inset: -220px 0 0;
  pointer-events: none;
  content: "";
  opacity: 0.58;
  background-image:
    radial-gradient(circle, rgba(255, 239, 174, .94) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(225, 186, 96, .82) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 249, 214, .88) 0 1.8px, transparent 2.6px);
  background-position: 0 0, 44px 68px, 112px 28px;
  background-size: 97px 113px, 131px 149px, 211px 187px;
  animation: tarot-stars-rise 23s linear infinite, tarot-stars-twinkle 6s ease-in-out infinite;
  mix-blend-mode: screen;
  will-change: background-position, opacity;
}

.tarot-world::after {
  position: fixed;
  z-index: 0;
  inset: -320px 0 0;
  pointer-events: none;
  content: "";
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(246, 211, 128, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 240, 171, .72) 0 1.6px, transparent 2.4px);
  background-position: 18px 38px, 90px 120px;
  background-size: 173px 229px, 307px 271px;
  animation: tarot-stars-rise-slow 37s linear infinite, tarot-stars-glimmer 8s ease-in-out infinite;
  mix-blend-mode: screen;
  will-change: background-position, opacity;
}

@keyframes tarot-stars-rise {
  from { background-position: 0 0, 44px 68px, 112px 28px; }
  to { background-position: 0 -113px, 44px -81px, 112px -159px; }
}

@keyframes tarot-stars-rise-slow {
  from { background-position: 18px 38px, 90px 120px; }
  to { background-position: 18px -191px, 90px -151px; }
}

@keyframes tarot-stars-twinkle {
  0%, 100% { opacity: .42; }
  50% { opacity: .72; }
}

@keyframes tarot-stars-glimmer {
  0%, 100% { opacity: .2; transform: translateY(0); }
  50% { opacity: .38; transform: translateY(-8px); }
}

.tarot-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 40px));
  min-height: 70px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(228, 198, 130, 0.24);
}

.tarot-brand { font-family: var(--font-ui); color: #ead49b; font-size: 19px; }
.tarot-close { border-color: #5b4669; color: #f5effb; background: rgba(255,255,255,0.05); }

.tarot-page {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 80px;
}

.tarot-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.tarot-intro h1 { margin-bottom: 12px; color: #f2deb0; font-family: var(--font-ui); font-size: clamp(34px, 7vw, 62px); }
.tarot-intro p { color: #bdb1c7; }
.tarot-guide-button { margin-top: 4px; border: 0; padding: 6px 10px; color: #e8cd8d; background: transparent; font-size: 14px; font-weight: 800; }
.tarot-guide-button:hover { color: #fff0b9; text-decoration: underline; text-underline-offset: 4px; }

.tarot-form {
  display: grid;
  max-width: 700px;
  gap: 20px;
  margin: 32px auto 0;
  border: 1px solid rgba(217, 183, 111, 0.3);
  border-radius: 8px;
  padding: 24px;
  background: rgba(31, 21, 41, 0.86);
  box-shadow: 0 28px 80px rgba(0,0,0,0.35);
}

.tarot-form .field > span { color: #e1d5e9; }
.tarot-form .textarea { border-color: #5a4668; color: #f6effb; background: #17111f; }
.tarot-form .primary-button { border-color: #d9bd7b; color: #24172e; background: #e8cf91; box-shadow: 4px 4px 0 #6f4a80; }

.tarot-guide-open { overflow: hidden; }
.tarot-guide-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(7, 4, 11, .78); backdrop-filter: blur(10px); }
.tarot-guide-panel { width: min(980px, 100%); max-height: min(90vh, 860px); overflow: hidden; border: 1px solid rgba(226, 193, 119, .46); border-radius: 9px; color: #efe4f6; background: #1a1123; box-shadow: 0 30px 100px rgba(0,0,0,.52); }
.tarot-guide-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 24px 26px 10px; }
.tarot-guide-header h2 { margin: 0; color: #f0dca5; font-family: var(--font-ui); font-size: clamp(24px, 4vw, 36px); }
.tarot-guide-header .tarot-close { flex: 0 0 40px; }
.tarot-guide-lead { margin: 0; padding: 0 26px 18px; color: #c6b8d0; line-height: 1.7; }
.tarot-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 26px 14px; }
.tarot-guide-grid > div { display: grid; gap: 4px; border: 1px solid rgba(222,190,117,.2); border-radius: 6px; padding: 12px; background: rgba(67, 44, 81, .42); }
.tarot-guide-grid strong { color: #e9ce8c; }
.tarot-guide-grid span { color: #b7a6c0; font-size: 12px; line-height: 1.55; }
.spread-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 26px 18px; }
.spread-notes span { color: #ad9db9; font-size: 11px; line-height: 1.55; }
.spread-notes b { display: block; margin-bottom: 3px; color: #ead39a; font-size: 13px; }
.guide-toolbar { display: grid; gap: 12px; padding: 16px 26px; border-top: 1px solid rgba(222,190,117,.16); border-bottom: 1px solid rgba(222,190,117,.16); background: rgba(11,7,16,.28); }
.guide-search .input { border-color: #5a4668; color: #f5eefa; background: #21152b; }
.guide-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.guide-filter { min-height: 32px; border: 1px solid #5a4668; border-radius: 4px; padding: 0 10px; color: #b8a8c3; background: transparent; font-size: 12px; }
.guide-filter:hover, .guide-filter.is-active { border-color: #dfc27d; color: #f0d99b; background: rgba(105, 76, 123, .35); }
.guide-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-height: 46vh; overflow-y: auto; padding: 18px 26px 24px; }
.guide-card { display: grid; grid-template-columns: 56px 1fr; gap: 11px; border: 1px solid rgba(222,190,117,.18); border-radius: 6px; padding: 10px; background: rgba(36, 23, 47, .62); }
.guide-card-mark { position: relative; width: 56px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(222,190,117,.62); border-radius: 3px; background: #25162f; }
.guide-card-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-card-mark small { position: absolute; right: 3px; bottom: 3px; min-width: 18px; border-radius: 3px; padding: 2px 3px; color: #21152a; background: rgba(240,217,155,.9); font: 700 8px var(--font-ui); text-align: center; }
.guide-card-body { min-width: 0; }
.guide-card-body h3 { margin: 0; color: #ead39a; font-size: 14px; }
.guide-card-body .tag { min-height: 20px; padding: 0 6px; font-size: 9px; }
.guide-meaning { display: grid; gap: 4px; margin-top: 7px; }
.guide-meaning p { display: grid; grid-template-columns: 30px 1fr; gap: 5px; margin: 0; color: #b9a9c2; font-size: 11px; line-height: 1.45; }
.guide-meaning b { color: #d9b969; }

.card-reveal-open { overflow: hidden; }
.card-reveal-overlay { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; overflow: hidden; background: rgba(7, 4, 12, .84); backdrop-filter: blur(12px); }
.card-reveal-overlay::before { position: absolute; inset: 0; content: ""; opacity: .32; background: radial-gradient(circle at 50% 45%, rgba(223,190,112,.22), transparent 30%), radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(122,91,167,.17) 25%, transparent 45%); }
.reveal-stage { position: relative; z-index: 2; display: grid; width: 165px; place-items: center; transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(.34); transform-origin: center; }
.reveal-stage.is-animating { animation: reveal-flight 3.25s cubic-bezier(.2,.75,.16,1) forwards; }
.reveal-stage.is-complete { transform: translate(0, 0) scale(1); }
.reveal-card-inner { position: relative; width: 165px; aspect-ratio: 2 / 3; transform-style: preserve-3d; }
.reveal-stage.is-animating .reveal-card-inner { animation: card-spin 3.25s cubic-bezier(.16,.72,.16,1) forwards; }
.reveal-card-face { position: absolute; inset: 0; overflow: hidden; border: 2px solid #efd187; border-radius: 8px; backface-visibility: hidden; box-shadow: 0 0 30px rgba(229,197,124,.32), 0 24px 50px rgba(0,0,0,.45); }
.reveal-card-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reveal-card-back { transform: rotateY(180deg); background: #25162f; }
.reveal-card-front { background: #25162f; }
.reveal-stage.is-reversed.is-complete .reveal-card-front img { transform: rotate(180deg); }
.reveal-reading { position: absolute; top: calc(100% + 22px); left: 50%; width: min(340px, 76vw); padding: 17px 18px; border: 1px solid rgba(229,197,124,.48); border-radius: 8px; background: rgba(27,17,36,.96); box-shadow: 0 15px 35px rgba(0,0,0,.35); text-align: center; transform: translateX(-50%); animation: reading-fade 650ms ease both; }
.reveal-reading h2 { margin: 10px 0 4px; color: #f0dca5; font-family: var(--font-ui); font-size: 23px; }
.reveal-reading p { margin: 4px 0 0; color: #c9bbd1; font-size: 13px; line-height: 1.6; }
.reveal-meanings { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.reveal-meaning-row { display: grid; grid-template-columns: 38px 1fr; gap: 8px; border: 1px solid rgba(222,190,117,.2); border-radius: 5px; padding: 9px 10px; background: rgba(61,39,76,.42); }
.reveal-meaning-row b { color: #d9b969; font-size: 12px; }
.reveal-meaning-row span { color: #c9bbd1; font-size: 12px; line-height: 1.55; }
.reveal-meaning-row.is-current { border-color: rgba(229,197,124,.65); background: rgba(100,72,115,.5); box-shadow: inset 3px 0 0 #e0c47e; }
.reveal-meaning-row.is-current span { color: #f3e5ad; }
.reveal-close { position: absolute; z-index: 4; top: 24px; right: 28px; border-color: #70567f; color: #f5effb; background: rgba(255,255,255,.06); }
.reveal-particle-field { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.reveal-particle { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #f8e2a1; box-shadow: 0 0 8px 2px #f1ca6d; opacity: 0; animation: particle-orbit 1.5s ease-out var(--particle-delay) both; }
@keyframes reveal-flight { 0% { transform: translate(var(--start-x), var(--start-y)) scale(.34); } 65% { transform: translate(0, -18px) scale(1.1); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes card-spin { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(calc(var(--spin-angle) * .35)); } 58% { transform: rotateY(calc(var(--spin-angle) * .76)); } 83% { transform: rotateY(calc(var(--spin-angle) * .93)); } 100% { transform: rotateY(var(--spin-angle)); } }
@keyframes particle-orbit { 0% { opacity: 0; transform: rotate(0) translateX(18px) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) scale(0); } }
@keyframes reading-fade { from { opacity: 0; transform: translate(-50%, 9px); } to { opacity: 1; transform: translate(-50%, 0); } }

.spread-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.spread-option { position: relative; display: grid; min-height: 94px; place-items: center; border: 1px solid #5b4869; border-radius: 7px; padding: 10px; color: #c9bed2; background: #1b1324; text-align: center; cursor: pointer; }
.spread-option input { position: absolute; opacity: 0; }
.spread-option strong { display: block; color: #ead398; font-family: var(--font-ui); font-size: 24px; }
.spread-option:has(input:checked) { border-color: #e0c47e; color: #fff; background: #392647; box-shadow: inset 0 0 0 1px #e0c47e; }

.ritual-stage { display: grid; min-height: calc(100vh - 170px); place-items: center; }
.ritual-content { width: 100%; text-align: center; }
.ritual-copy { margin-bottom: 22px; }
.ritual-copy h2 { color: #ead49b; font-family: var(--font-ui); font-size: clamp(25px, 4vw, 38px); }
.ritual-copy p { color: #b9aec4; }

.deck-table {
  position: relative;
  width: min(940px, 96vw);
  aspect-ratio: 1.75;
  margin: 0 auto;
  perspective: 1000px;
}

.deck-grid {
  position: absolute;
  inset: 4% 7%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 5px;
}

.ritual-card {
  position: relative;
  border: 1px solid rgba(229, 197, 126, 0.58);
  border-radius: 4px;
  background:
    radial-gradient(circle at center, transparent 14%, rgba(229, 197, 126, 0.2) 15%, transparent 18%),
    linear-gradient(135deg, #362345, #17101f);
  opacity: 0;
  transform: translateY(20px) rotateX(35deg);
  animation: deal-in 480ms ease forwards;
}

.ritual-card::after { position: absolute; inset: 16%; border: 1px solid rgba(229, 197, 126, 0.38); content: ""; transform: rotate(45deg); }

.major-card {
  position: absolute;
  width: 7.4%;
  aspect-ratio: 0.67;
  border: 1px solid #e5c57c;
  border-radius: 4px;
  background: linear-gradient(135deg, #51365e, #1b1224);
  box-shadow: 0 0 14px rgba(225, 190, 112, 0.2);
  opacity: 0;
  animation: spiral-in 2.3s cubic-bezier(.2,.72,.2,1) forwards;
  animation-delay: var(--delay);
}

@keyframes deal-in { to { opacity: 1; transform: translateY(0) rotateX(0); } }
@keyframes spiral-in {
  0% { left: 50%; top: -32%; opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(1.2); }
  18% { opacity: 1; }
  38% { left: 93%; top: 42%; transform: translate(-50%, -50%) rotate(210deg) scale(1); }
  68% { left: 12%; top: 72%; transform: translate(-50%, -50%) rotate(430deg) scale(.9); }
  100% { left: var(--left); top: var(--top); opacity: 1; transform: translate(-50%, -50%) rotate(540deg) scale(.82); }
}

.skip-ritual { position: absolute; right: 0; bottom: -10px; border-color: #5f4a6d; color: #c9bed2; background: rgba(255,255,255,0.04); }
.ritual-stage.is-skipped .ritual-card,
.ritual-stage.is-skipped .major-card { animation: none; opacity: 1; transform: none; }

.selection-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(32px, 1fr));
  gap: 8px;
  max-width: 1080px;
  margin: 26px auto;
}

.selectable-card {
  position: relative;
  width: 100%;
  aspect-ratio: .67;
  border: 1px solid #765f84;
  border-radius: 5px;
  background: #392549 url("../assets/tarot-card-back.svg") center / cover no-repeat;
  box-shadow: 0 8px 15px rgba(0,0,0,.24);
  transition: transform 150ms ease, border-color 150ms ease;
}

.selectable-card:hover { border-color: #f0d58d; transform: translateY(-8px); }
.selectable-card.is-selected { border-color: #fff1b9; box-shadow: 0 0 22px rgba(230,198,124,.52); transform: translateY(-12px); }
.selectable-card.is-selected::after { position: absolute; top: 50%; left: 50%; color: #f4d98f; content: "✦"; font-size: 22px; transform: translate(-50%, -50%); }

.selection-counter { color: #dbc88e; font-weight: 800; }
.tarot-actions { display: flex; justify-content: center; gap: 10px; }

.reading-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.reading-summary { position: sticky; top: 18px; border: 1px solid rgba(222,190,117,.28); border-radius: 8px; padding: 22px; background: rgba(31,21,41,.86); }
.reading-summary h1 { color: #ead49b; font-family: var(--font-ui); }
.reading-summary p { color: #c4b7ce; }
.reading-intent { margin: 12px 0 0; color: #9f91a9 !important; font-size: 12px; line-height: 1.65; }
.summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 22px; padding-bottom: 10px; border-bottom: 1px solid rgba(222,190,117,.2); }
.summary-heading h2 { margin: 0; color: #ead49b; font-size: 16px; }
.summary-heading span { color: #9988a7; font-size: 11px; white-space: nowrap; }
.summary-cards { display: grid; max-height: 420px; gap: 8px; margin: 10px -7px 18px; padding: 0 7px 3px; overflow-y: auto; }
.summary-card { display: grid; grid-template-columns: 29px minmax(0, 1fr) 14px; gap: 8px; width: 100%; align-items: start; border: 1px solid rgba(222,190,117,.17); border-radius: 6px; padding: 9px; color: #d9cde2; background: rgba(15,10,21,.42); text-align: left; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.summary-card:hover { border-color: rgba(222,190,117,.55); background: rgba(74,49,91,.5); transform: translateX(2px); }
.summary-glyph { display: block; width: 28px; height: 42px; overflow: hidden; border: 1px solid rgba(222,190,117,.62); border-radius: 3px; background: #25162f; }
.summary-glyph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.summary-glyph.is-reversed { transform: rotate(180deg); }
.summary-card-copy { display: grid; min-width: 0; gap: 3px; }
.summary-card-copy strong { overflow: hidden; color: #f1dfaa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.summary-card-copy span { color: #d0c0d7; font-size: 11px; }
.summary-card-copy small { color: #a99bb2; font-size: 11px; line-height: 1.45; }
.summary-arrow { align-self: center; color: #b89550; font-size: 15px; }
.reading-cards { display: grid; gap: 14px; }
.reading-card { scroll-margin-top: 22px; display: grid; grid-template-columns: 90px 1fr; gap: 16px; border: 1px solid rgba(222,190,117,.24); border-radius: 8px; padding: 15px; background: rgba(24,16,32,.88); transition: border-color 180ms ease, box-shadow 180ms ease; }
.reading-card:target { border-color: #e5c57c; box-shadow: 0 0 24px rgba(229,197,124,.2); }
.card-face { display: block; width: 90px; aspect-ratio: 2 / 3; overflow: hidden; border: 2px solid #d8b96e; border-radius: 6px; color: #f3dc9d; background: #25162f; }
.card-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-face.is-reversed { transform: rotate(180deg); }
.card-glyph { font-size: 32px; }
.reading-card h3 { margin: 0 0 7px; color: #ead49b; }
.reading-card p { margin: 0; color: #c4b7ce; font-size: 14px; }
.tarot-world .tag { color: #2a1a34; background: #e4c77e; }

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

.reading-analysis { display: grid; gap: 13px; margin: 16px 0 4px; }
.three-card-analysis { gap: 18px; }
.three-card-analysis .analysis-lead { border-left-color: #d6b56b; }
.three-position-list, .three-echo-list { display: grid; gap: 10px; }
.three-position-list p, .three-echo-list p { margin: 0; border: 1px solid rgba(210,182,112,.2); border-radius: 6px; padding: 11px 13px; color: #d7c8dc; line-height: 1.75; background: rgba(107,77,123,.12); }
.three-card-analysis .analysis-advice ol { margin: 0; padding-left: 22px; color: #d7c8dc; }
.three-card-analysis .analysis-advice li { margin-bottom: 8px; line-height: 1.7; }
.three-summary { border-left: 3px solid #d6b56b; padding-left: 13px; }
.three-summary p { margin-bottom: 0; color: #f0d99b; font-family: var(--font-ui); font-size: 18px; }
.sequential-page { min-height: calc(100vh - 70px); }
.sequential-status { margin-top: 16px; color: #e4c77e; font-weight: 800; }
.sequential-board { margin-top: 26px; border: 1px solid rgba(222,190,117,.28); border-radius: 10px; padding: 24px; background: rgba(31,21,41,.8); }
.sequential-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sequential-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 152px; border: 1px solid rgba(222,190,117,.22); border-radius: 8px; padding: 13px; background: rgba(15,10,21,.48); }
.sequential-card-face { width: 82px; aspect-ratio: 2 / 3; overflow: hidden; border: 2px solid #d8b96e; border-radius: 6px; background: #25162f; box-shadow: 0 8px 20px rgba(0,0,0,.25); }.sequential-card-face img { display: block; width: 100%; height: 100%; object-fit: cover; }.sequential-card-face.is-reversed { transform: rotate(180deg); }
.sequential-card-copy { min-width: 0; }.sequential-position { color: #d9b972; font-size: 12px; }.sequential-card-copy h3 { margin: 8px 0 5px; color: #ead49b; font-size: 16px; }.sequential-card-copy p { margin: 0; color: #c4b7ce; font-size: 13px; line-height: 1.65; }.sequential-card.is-covered { opacity: .78; }.sequential-card.is-covered .sequential-card-face { border-color: #765f84; }
.sequential-action { display: flex; justify-content: center; margin-top: 24px; }.sequential-next { min-width: 240px; }
@media (max-width: 900px) { .sequential-cards { grid-template-columns: 1fr; }.sequential-card { grid-template-columns: 82px minmax(0, 1fr); } }
.analysis-lead, .analysis-section { border-left: 2px solid rgba(222,190,117,.48); padding: 11px 13px; background: rgba(15,10,21,.25); }
.analysis-lead { border: 1px solid rgba(222,190,117,.32); border-left: 3px solid #e4c77e; border-radius: 6px; background: linear-gradient(135deg, rgba(88,57,104,.3), rgba(25,16,34,.55)); }
.analysis-lead h2, .analysis-section h3 { margin: 0 0 6px; color: #ead49b; font-size: 15px; }
.analysis-lead p, .analysis-section p { margin: 0; color: #d6c9dc; font-size: 13px; line-height: 1.75; }
.analysis-card-list { display: grid; gap: 7px; }
.analysis-card { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; border: 1px solid rgba(222,190,117,.16); border-radius: 5px; background: rgba(15,10,21,.3); }
.analysis-card-index { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #2a1a34; background: #e4c77e; font-size: 11px; font-weight: 800; }
.analysis-card strong { color: #f1dfaa; font-size: 12px; }
.analysis-card p { margin-top: 3px; font-size: 12px; line-height: 1.55; }
.analysis-advice { border-left-color: #e4c77e; }

.analysis-direct { border: 1px solid rgba(228,199,126,.55); border-left: 3px solid #e4c77e; border-radius: 6px; background: linear-gradient(135deg, rgba(103,73,55,.28), rgba(42,25,38,.54)); }
.analysis-direct h3 { color: #f1d78e; }