:root {
  color-scheme: dark;
  --page: #0d1026;
  --paper: #171a37;
  --felt: #1b1d3f;
  --card: #272143;
  --face: #121632;
  --ink: #f6edff;
  --muted: #d1c5de;
  --line: #8a76ad;
  --gold: #efcb83;
  --focus: #ffe0a0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
button, input { font: inherit; }
select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.site-shell { max-width: 1180px; min-height: 100vh; margin: auto; padding: 0 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 18px; border-bottom: 2px dashed var(--line); }
.brand { color: var(--gold); text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: 1px; white-space: nowrap; }
.topbar nav { display: flex; gap: 18px; align-items: center; }
.nav-button { color: var(--muted); background: none; border: none; padding: 7px 0; font-size: 13px; }
.nav-button.is-current { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--gold); }
.nav-button span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 3px; background: var(--felt); color: var(--ink); }
.intro { text-align: center; margin: 34px auto 27px; max-width: 760px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: clamp(27px, 4vw, 44px); line-height: 1.18; margin: 0 0 12px; letter-spacing: 1px; }
.intro > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.spread-picker { max-width: 790px; margin: 42px auto 58px; text-align: center; }
.spread-picker h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 25px; }
.spread-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.spread-choice { position: relative; min-height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px; border: 2px solid var(--line); background: radial-gradient(circle at 50% 0, #332b50, var(--paper) 68%); color: var(--ink); box-shadow: 5px 6px 0 #090b1d; transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s; }
.spread-choice:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-5px); border-color: var(--gold); box-shadow: 5px 10px 0 #090b1d, 0 0 21px #c293ff88; }
.spread-choice-number { color: var(--gold); font-size: 28px; font-weight: 900; line-height: 1; }
.spread-choice strong { font-size: 16px; letter-spacing: 1.2px; }
.spread-choice > span:last-of-type { color: var(--muted); font-size: 11px; line-height: 1.45; }
.spread-choice-wide { grid-column: 1 / -1; min-height: 128px; }
.five-surface { position: relative; min-height: 970px; margin: 0 20px; padding: 28px 14px 38px; border: 3px solid var(--line); background: var(--felt); background-image: radial-gradient(color-mix(in srgb, var(--gold), transparent 78%) 1px, transparent 1px); background-size: 19px 19px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.five-surface > .deck { width: 92px; }
.five-slots { position: relative; z-index: 1; width: min(100%, 790px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: '. hidden .' 'obstacle current advice' '. outcome .'; justify-items: center; align-items: start; gap: 30px 12px; }
.five-slot { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.five-slot[data-role="current"] { grid-area: current; }
.five-slot[data-role="obstacle"] { grid-area: obstacle; }
.five-slot[data-role="hidden_influence"] { grid-area: hidden; }
.five-slot[data-role="advice"] { grid-area: advice; }
.five-slot[data-role="possible_outcome"] { grid-area: outcome; }
.five-table.is-love .five-slots { grid-template-areas: 'self . signals' '. connection .' 'tension . nextstep'; }
.five-slot[data-role="self"] { grid-area: self; }
.five-slot[data-role="other_signals"] { grid-area: signals; }
.five-slot[data-role="connection"] { grid-area: connection; }
.five-slot[data-role="tension"] { grid-area: tension; }
.five-slot[data-role="next_step"] { grid-area: nextstep; }
.five-guidance { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.five-slot .tarot-card { width: clamp(120px, 16vw, 162px); }
.five-slot .position-label { min-height: 26px; }
.five-slot .card-orientation { margin-top: 0; }
.five-clarifier { max-width: 880px; margin: 30px auto 0; text-align: center; }
#five-clarifier-open, #five-journal-save { width: min(100%, 270px); min-height: 50px; }
#five-clarifier-open { position: relative; isolation: isolate; overflow: visible; border-color: var(--gold); background: #2d2548; color: #ffe3a8; box-shadow: 3px 3px 0 var(--line), 0 0 10px #efcb8338; transition: transform .35s ease-out, border-color .45s ease-out, color .45s ease-out, box-shadow .5s ease-out, text-shadow .5s ease-out; }
#five-clarifier-open:is(:hover, :focus-visible) { border-color: #fff1c3; background: radial-gradient(circle 75px at var(--spark-x, 50%) var(--spark-y, 50%), #846389, #493757 48%, #2d2548 100%); color: #fff7de; box-shadow: 3px 5px 0 var(--line), 0 0 9px #fff3c7, 0 0 25px #f4d891dd, 0 0 58px #c293ffbb; text-shadow: 0 0 8px #fff6d5, 0 0 18px #eacb96; }
#five-clarifier-open::before, #five-clarifier-open::after { position: absolute; z-index: 2; content: '✦'; color: #fff3c1; opacity: 0; pointer-events: none; text-shadow: 0 0 9px #fff1b9, 0 0 18px #d3a8ff; }
#five-clarifier-open::before { top: -14px; left: -13px; font-size: 18px; }
#five-clarifier-open::after { right: -13px; bottom: -13px; font-size: 13px; }
#five-clarifier-open:is(:hover, :focus-visible)::before, #five-clarifier-open:is(:hover, :focus-visible)::after { animation: clarifier-twinkle 2.6s ease-in-out infinite alternate; }
#five-clarifier-open:is(:hover, :focus-visible)::after { animation-delay: 1.2s; }
#five-clarifier-open .clarifier-sparkle { position: absolute; z-index: 3; pointer-events: none; color: #fff9da; font-size: var(--spark-size); line-height: 1; text-shadow: 0 0 7px #fff3bd, 0 0 16px #d8abff; animation: clarifier-sparkle 1.25s ease-in-out forwards; }
@keyframes clarifier-twinkle { 0% { opacity: .18; transform: scale(.5) rotate(-15deg); } 55% { opacity: 1; transform: scale(1.08) rotate(6deg); } 100% { opacity: .3; transform: scale(.7) rotate(16deg); } }
@keyframes clarifier-sparkle { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-25deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-drift)), calc(-50% - 26px)) scale(.25) rotate(35deg); } }
.five-clarifier-picker, .five-clarifier-result { margin-top: 16px; padding: clamp(18px, 3vw, 28px); border: 2px solid var(--line); background: radial-gradient(circle at 50% 0, #2b254c, var(--paper) 70%); }
.five-clarifier-picker h2 { margin: 4px 0 8px; font-size: 22px; }
.five-clarifier-picker > p:not(.eyebrow), .five-clarifier-asked { color: var(--muted); font-size: 12px; line-height: 1.6; }
.five-clarifier-positions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 22px 0; }
.five-clarifier-position { min-height: 48px; padding: 10px; border: 1px solid var(--line); background: var(--face); color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.4; }
.five-clarifier-position:is(:hover, :focus-visible), .five-clarifier-position.is-selected { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 16px #c293ff66; }
.five-clarifier-question-row { max-width: 720px; margin: 0 auto; text-align: left; }
.five-clarifier-question-row label { display: block; margin-bottom: 9px; color: var(--gold); font-size: 12px; font-weight: 800; }
.five-slots .five-slot.is-clarifier-target .tarot-card { outline: 3px solid var(--gold); outline-offset: 5px; box-shadow: 0 0 25px #c293ffaa; }
.five-slots .five-slot .tarot-card[aria-pressed="false"] { cursor: pointer; }
.five-clarifier-result { display: grid; justify-items: center; gap: 12px; }
.five-clarifier-result .eyebrow { line-height: 1.5; }
.five-clarifier-asked { margin: 0; }
.five-clarifier-card { display: grid; justify-items: center; gap: 10px; margin: 5px 0 10px; }
.five-clarifier-card .tarot-card { width: clamp(136px, 19vw, 178px); }
.five-clarifier-result .ai-content { width: 100%; max-width: 720px; padding: 15px 18px; border: 1px solid var(--line); background: var(--face); text-align: left; }
.five-clarifier-result .spread-complete { margin: 4px 0 0; }
.five-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; }
.five-results .reading-item { min-width: 0; }
.five-table.is-celtic .five-surface { min-height: 0; gap: 23px; }
.celtic-board { position: relative; z-index: 1; width: min(100%, 790px); display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: clamp(16px, 3vw, 36px); align-items: center; }
.celtic-board .card-front { grid-template-columns: minmax(0, 1fr); grid-template-rows: 5.5% 79.5% 15%; }
.celtic-board .card-topline { min-width: 0; width: 100%; padding: 0 2px; gap: 1px; font-size: clamp(5.5px, .5vw, 6.5px); }
.celtic-board .card-nameplate { min-width: 0; width: 100%; padding: 0 2px; font-size: clamp(7px, .8vw, 9px); line-height: 1.05; text-align: center; white-space: normal; text-wrap: balance; }
.celtic-cross-group { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr); grid-template-rows: 230px 290px 230px; grid-template-areas: '. goal .' 'past center future' '. foundation .'; gap: 8px 10px; justify-items: center; align-items: center; }
.celtic-staff-group { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.celtic-zone-label { position: absolute; top: -28px; left: 0; width: 100%; margin: 0; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-align: center; }
.celtic-board .five-slot { width: 100%; max-width: 100%; min-width: 0; }
.celtic-board .five-slot .position-label { max-width: 100%; min-height: 18px; overflow-wrap: anywhere; }
.celtic-position-trigger { border: 0; padding: 2px; background: transparent; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .3px; line-height: 1.35; }
.celtic-position-trigger:is(:hover, :focus-visible) { color: var(--ink); text-decoration: underline; }
.celtic-position-help { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }
.celtic-cross-group > .five-slot { min-height: 225px; align-content: center; }
.celtic-cross-group > .five-slot .tarot-card { width: min(100%, 105px); }
.celtic-cross-group > .five-slot[data-role="present"], .celtic-cross-group > .five-slot[data-role="challenge"] { position: relative; height: 290px; display: block; }
.celtic-cross-group > .five-slot[data-role="present"] { z-index: 2; }
.celtic-cross-group > .five-slot[data-role="challenge"] { z-index: 1; }
.celtic-cross-group > .five-slot[data-role="challenge"].is-ready { z-index: 3; }
.celtic-cross-group > .five-slot[data-role="challenge"].is-crossed { z-index: 4; }
.celtic-cross-group > .five-slot[data-role="present"] .position-label, .celtic-cross-group > .five-slot[data-role="challenge"] .position-label { position: absolute; left: 0; width: 100%; }
.celtic-cross-group > .five-slot[data-role="present"] .position-label { top: 0; }
.celtic-cross-group > .five-slot[data-role="challenge"] .position-label { bottom: 25px; }
.celtic-cross-group > .five-slot[data-role="present"] .tarot-card, .celtic-cross-group > .five-slot[data-role="challenge"] .tarot-card { position: absolute; left: 50%; top: 34px; width: 115px; transition: transform .5s ease-out, filter .25s; }
.celtic-cross-group > .five-slot[data-role="present"] .tarot-card { transform: translateX(-50%) scale(1.05); }
.celtic-cross-group > .five-slot[data-role="challenge"] .tarot-card { transform: translateX(-50%) translateX(45px) scale(.96); }
.celtic-cross-group > .five-slot[data-role="challenge"].is-crossed .tarot-card { transform: translateX(-50%) rotate(90deg) scale(1.05); }
.celtic-cross-group > .five-slot[data-role="present"] .card-orientation, .celtic-cross-group > .five-slot[data-role="challenge"] .card-orientation { position: absolute; bottom: 0; margin: 0; }
.celtic-cross-group > .five-slot[data-role="present"] .card-orientation { left: 4px; }
.celtic-cross-group > .five-slot[data-role="challenge"] .card-orientation { right: 4px; }
.celtic-cross-group > .five-slot[data-role="conscious_goal"] { grid-area: goal; }
.celtic-cross-group > .five-slot[data-role="recent_past"] { grid-area: past; }
.celtic-cross-group > .five-slot[data-role="present"], .celtic-cross-group > .five-slot[data-role="challenge"] { grid-area: center; }
.celtic-cross-group > .five-slot[data-role="near_future"] { grid-area: future; }
.celtic-cross-group > .five-slot[data-role="foundation"] { grid-area: foundation; }
.celtic-staff-group > .five-slot { min-height: 194px; align-content: center; }
.celtic-staff-group > .five-slot .tarot-card { width: 90px; }
.celtic-board .five-slot.is-dealing { animation: celtic-place .35s both; }
@keyframes celtic-place { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.celtic-board .celtic-cross-group > .five-slot[data-role="present"] .tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) { transform: translateX(-50%) translateY(-6px) scale(1.08); }
.celtic-board .celtic-cross-group > .five-slot[data-role="challenge"]:not(.is-crossed) .tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) { transform: translateX(-50%) translateX(45px) translateY(-6px) scale(1.01); }
@media (max-width: 760px) { .five-surface { margin: 0 10px; min-height: 800px; } .five-slot .tarot-card { width: clamp(104px, 19vw, 135px); } .five-slots { gap: 20px 5px; } }
@media (max-width: 760px) { .celtic-board { width: min(100%, 420px); display: flex; flex-direction: column; gap: 43px; } .celtic-cross-group { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr); grid-template-rows: 178px 245px 178px; gap: 8px 5px; } .celtic-cross-group > .five-slot { min-height: 170px; } .celtic-cross-group > .five-slot .tarot-card { width: min(100%, 82px); } .celtic-cross-group > .five-slot[data-role="present"], .celtic-cross-group > .five-slot[data-role="challenge"] { height: 245px; } .celtic-cross-group > .five-slot[data-role="present"] .tarot-card, .celtic-cross-group > .five-slot[data-role="challenge"] .tarot-card { width: clamp(90px, 27vw, 108px); top: 30px; } .celtic-cross-group > .five-slot[data-role="challenge"] .tarot-card { transform: translateX(-50%) translateX(30px) scale(.96); } .celtic-board .celtic-cross-group > .five-slot[data-role="challenge"]:not(.is-crossed) .tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) { transform: translateX(-50%) translateX(30px) translateY(-5px) scale(1.01); } .celtic-staff-group { width: 100%; gap: 6px; } .celtic-staff-group > .five-slot { min-height: 175px; } .celtic-staff-group > .five-slot .tarot-card { width: 83px; } .celtic-board .orientation-tooltip { width: min(210px, 60vw); } .reading-item .orientation-tooltip { left: 0; transform: none; } }
@media (max-width: 560px) { .spread-picker { margin: 34px auto 48px; } .spread-picker-grid { gap: 9px; } .spread-choice { min-height: 145px; padding: 10px; } .spread-choice strong { font-size: 12px; } .five-surface { min-height: auto; gap: 39px; padding: 18px 4px 28px; } .five-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'hidden hidden' 'obstacle current' 'advice outcome'; row-gap: 23px; } .five-table.is-love .five-slots { grid-template-areas: 'self signals' 'connection connection' 'tension nextstep'; } .five-slot .tarot-card { width: clamp(124px, 34vw, 165px); } .five-slot[data-role="hidden_influence"], .five-slot[data-role="connection"] { justify-self: center; } }
@media (max-width: 420px) { .celtic-cross-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); } }
.home-deck-preview { display: flex; align-items: center; gap: 14px; width: min(100%, 410px); margin: -4px auto 26px; padding: 8px 13px; border: 1px solid var(--gold); background: linear-gradient(110deg, #2b2245, #1b1b36); color: var(--ink); text-align: left; box-shadow: 0 0 18px #b98ad833; }
.home-deck-preview:hover, .home-deck-preview:focus-visible { box-shadow: 0 0 24px #ebd79c99, 0 0 45px #b98ad855; transform: translateY(-2px); }
.home-deck-preview img { width: 46px; aspect-ratio: 3 / 5; object-fit: cover; border: 1px solid var(--gold); }
.home-deck-preview span { display: grid; gap: 2px; }
.home-deck-preview small { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.home-deck-preview strong { font-size: 13px; }
.home-deck-preview em { color: var(--muted); font-size: 11px; font-style: normal; }
.decks-view .intro { max-width: 750px; margin: 25px auto 28px; }
.deck-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.deck-option { min-width: 0; padding: 14px; border: 2px solid var(--line); background: var(--paper); box-shadow: 5px 6px 0 #0b0d22; }
.deck-option.is-selected { border-color: var(--gold); box-shadow: 0 0 22px #d6aaff55, 5px 6px 0 #0b0d22; }
.deck-option-images { display: flex; justify-content: center; align-items: center; height: 220px; overflow: hidden; padding: 10px; background: #13172b; border: 1px solid var(--line); }
.deck-option-images img { width: 93px; height: 155px; object-fit: cover; border: 1px solid var(--gold); box-shadow: 4px 7px 10px #0008; }
.deck-option-images img:first-child { transform: translate(13px, 7px) rotate(-9deg); }
.deck-option-images img:nth-child(2) { z-index: 2; transform: translateY(-5px) rotate(3deg); }
.deck-option-images img.deck-option-back { transform: translate(-13px, 9px) rotate(10deg); }
.deck-option-copy { display: grid; align-content: start; min-height: 160px; }
.deck-option-copy .eyebrow { margin: 14px 0 0; font-size: 10px; }
.deck-option-copy h2 { margin: 2px 0 5px; font-size: 20px; }
.deck-option-copy p { min-height: 42px; margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.deck-select-button { width: 100%; margin-top: auto; }
.deck-option.is-selected .deck-select-button { border-color: var(--gold); color: var(--gold); opacity: 1; }
.deck-selection-status { min-height: 20px; margin: 18px 0; color: var(--gold); text-align: center; font-size: 12px; }
.question-row { max-width: 820px; margin: 0 auto 22px; }
.question-row label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 9px; }
.question-row label span { font-weight: 400; color: var(--muted); }
.question-controls { display: flex; gap: 10px; }
.question-controls input { flex: 1; min-width: 0; background: var(--card); border: 2px solid var(--line); color: var(--ink); padding: 13px 14px; border-radius: 0; font-size: 14px; }
.question-controls input::placeholder { color: var(--muted); opacity: .9; }
.primary-button, .secondary-button { border-radius: 0; font-size: 12px; font-weight: 800; letter-spacing: .3px; min-height: 45px; padding: 10px 14px; }
.primary-button { background: var(--gold); border: 2px solid var(--line); color: var(--page); box-shadow: 4px 4px 0 var(--line); }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled) { transform: translateY(-2px); }
.secondary-button { background: var(--card); color: var(--ink); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line); }
.table-wrap { border: 3px solid var(--line); background: var(--paper); box-shadow: 6px 6px 0 var(--line); }
.table-top { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; font-size: 12px; font-weight: 800; letter-spacing: .6px; }
.table-options { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 18px; }
.reverse-toggle { padding: 6px 9px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.reverse-toggle[aria-pressed="true"] { border-color: var(--gold); background: #392d4d; color: var(--gold); box-shadow: 0 0 12px #c293ff77; }
.reverse-toggle:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); }
.reverse-toggle-holder { position: relative; display: inline-flex; }
.reverse-toggle-holder.is-locked .reverse-toggle { opacity: .6; }
.setting-tooltip { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: min(265px, 72vw); padding: 10px; border: 1px solid var(--gold); background: #272143; box-shadow: 4px 5px 0 #0b0d22; color: var(--ink); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.reverse-toggle-holder.is-locked:is(:hover, :focus-within) .setting-tooltip { opacity: 1; visibility: visible; }
.reverse-help { position: absolute; top: calc(100% - 3px); right: 16px; z-index: 8; display: flex; align-items: flex-start; gap: 10px; max-width: min(360px, calc(100vw - 48px)); padding: 12px; border: 2px solid var(--gold); background: #272143; box-shadow: 5px 6px 0 #0b0d22, 0 0 16px #c293ff77; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.reverse-help button { flex: none; border: 0; background: transparent; color: var(--gold); font-size: 20px; line-height: 1; padding: 0 2px; }
.table-surface { position: relative; margin: 0 20px; min-height: 510px; padding: 26px 18px; border: 3px solid var(--line); background-color: var(--felt); background-image: radial-gradient(color-mix(in srgb, var(--gold), transparent 78%) 1px, transparent 1px); background-size: 19px 19px; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px); }
.shuffle-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.shuffle-card { display: block; position: absolute; border: 2px solid var(--gold); background: #0f1430 var(--deck-back-image, url('/static/cards/back.png')) center / 100% 100% no-repeat; image-rendering: pixelated; box-shadow: 5px 7px 0 #0a0d21, 0 0 14px #c293ff99; transform-origin: center; }
.deck { flex: none; width: 116px; aspect-ratio: 3 / 5; position: relative; z-index: 2; border: 0; padding: 0; background: transparent; color: var(--gold); transform: rotate(-5deg); transition: transform .2s; }
.deck:not(:disabled):hover { transform: rotate(-2deg) translateY(-5px); }
.deck:disabled { opacity: 1; }
.deck-stack, .deck-card { display: block; position: absolute; inset: 0; }
.deck-card { border: 3px solid var(--gold); background: #0f1430 var(--deck-back-image, url('/static/cards/back.png')) center / 100% 100% no-repeat; image-rendering: pixelated; box-shadow: 5px 5px 0 #0b0d22; transform-origin: 50% 82%; }
.deck-card-left { z-index: 1; transform: translate(-5px, 3px) rotate(-2deg); }
.deck-card-right { z-index: 2; transform: translate(5px, -2px) rotate(2deg); }
.deck-card-main { z-index: 3; background: #0f1430; }
.deck-card-main img { display: block; width: 100%; height: 100%; object-fit: fill; image-rendering: auto; }
.deck.is-pixel-deck .deck-card-main img { image-rendering: pixelated; }
.deck small { position: absolute; bottom: -39px; left: -16px; right: -16px; color: var(--gold); text-align: center; font-size: 9px; font-weight: 800; line-height: 1.4; transform: rotate(5deg); }
.deck.is-shuffling .deck-card-left { animation: shuffle-left .5s ease-in-out both; }
.deck.is-shuffling .deck-card-right { animation: shuffle-right .5s ease-in-out both; }
.deck.is-shuffling .deck-card-main { animation: shuffle-main .5s ease-in-out both; }
@keyframes shuffle-left {
  0%, 100% { transform: translate(-5px, 3px) rotate(-2deg); }
  25% { transform: translate(-70px, -25px) rotate(-22deg); }
  50% { transform: translate(20px, -4px) rotate(8deg); }
  75% { transform: translate(-52px, -13px) rotate(-18deg); }
}
@keyframes shuffle-right {
  0%, 100% { transform: translate(5px, -2px) rotate(2deg); }
  25% { transform: translate(68px, -30px) rotate(22deg); }
  50% { transform: translate(-22px, -7px) rotate(-8deg); }
  75% { transform: translate(54px, -18px) rotate(17deg); }
}
@keyframes shuffle-main {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(7px, -12px) rotate(4deg); }
  50% { transform: translate(-8px, -6px) rotate(-5deg); }
  75% { transform: translate(7px, -10px) rotate(4deg); }
}
.card-slots { display: flex; align-items: start; justify-content: center; gap: clamp(12px, 2.4vw, 30px); min-width: 0; transition: opacity .18s, transform .18s; }
.card-slots.is-resetting { opacity: 0; transform: translateY(12px); }
.card-slot { display: grid; justify-items: center; gap: 11px; min-width: 0; }
.card-orientation { align-self: start; border: 1px solid var(--line); background: var(--face); color: var(--muted); padding: 5px 8px; font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.card-orientation.is-reversed { border-color: var(--gold); background: #392a54; color: #ffe3a6; box-shadow: inset 0 0 0 1px #efcb8340, 0 0 12px #b98ad866; text-shadow: 0 0 8px #efcb8377; }
.card-orientation.is-new { animation: orientation-show 1.2s both; }
@keyframes orientation-show { 0%, 90% { opacity: 0; } 100% { opacity: 1; } }
.card-orientation.is-reversed, .orientation.is-reversed { position: relative; cursor: help; }
.orientation-tooltip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 10; width: min(255px, 70vw); padding: 10px; border: 1px solid var(--gold); background: #272143; box-shadow: 4px 5px 0 #0b0d22, 0 0 14px #c293ff77; color: var(--ink); font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-align: left; white-space: normal; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; }
.orientation-tooltip strong { display: block; margin-bottom: 5px; color: var(--gold); }
.is-reversed:is(:hover, :focus-visible) > .orientation-tooltip { opacity: 1; visibility: visible; }
.position-label { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .6px; min-height: 22px; }
.tarot-card { width: clamp(156px, 19.8vw, 225px); aspect-ratio: 3 / 5; display: block; position: relative; border: 0; padding: 0; background: transparent; color: var(--gold); text-align: center; perspective: 1000px; filter: drop-shadow(5px 6px 0 #0a0d21); transition: transform .25s, filter .25s; flex: none; }
.tarot-card:disabled { cursor: default; opacity: 1; }
.tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-8px) scale(1.025); filter: drop-shadow(0 0 7px #ffe5a8) drop-shadow(0 0 20px #c293ff) drop-shadow(0 0 34px #7c4ed6) drop-shadow(7px 12px 3px #090b1d); }
.tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) .card-face { border-color: #ffe5a8; }
.tarot-card.is-empty { display: grid; place-content: center; gap: 9px; border: 2px dashed var(--line); background: #161833; box-shadow: inset 0 0 0 8px #1d2040; }
.empty-symbol { font-size: 44px; line-height: 1; }
.empty-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.card-rotator { display: block; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.22,.7,.2,1); }
.tarot-card.is-revealed .card-rotator { transform: rotateY(180deg); }
.card-face { display: block; position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid var(--gold); background: #0f1430; }
.card-back img { width: 100%; height: 100%; display: block; object-fit: fill; image-rendering: auto; }
.tarot-card.is-pixel-deck .card-back img { image-rendering: pixelated; }
.card-front { transform: rotateY(180deg); display: grid; grid-template-rows: 5.6% 86.7% 7.7%; box-shadow: inset 0 0 0 4px #171a36; transition: transform .5s ease-out .63s; }
.tarot-card.is-reversed.is-revealed .card-front { transform: rotateY(180deg) rotate(180deg); }
.card-topline { padding: 0 5px; display: flex; align-items: center; justify-content: space-between; gap: 2px; color: #f7dc9c; font-size: clamp(6px, .62vw, 9px); line-height: 1; white-space: nowrap; }
.card-topline span:last-child { color: var(--suit-accent, #f7dc9c); }
.suit-cups { --suit-accent: #a9c9eb; }
.suit-swords { --suit-accent: #cad1e0; }
.suit-pentacles { --suit-accent: #bbd192; }
.suit-wands { --suit-accent: #e6b66d; }
.card-art-wrap { display: grid; place-items: center; min-height: 0; }
.card-art { width: 86.7%; height: 100%; display: block; object-fit: fill; image-rendering: auto; }
.tarot-card.is-pixel-deck .card-art { image-rendering: pixelated; }
.card-nameplate { display: grid; place-items: center; padding: 0 3px; border-top: 2px solid var(--gold); color: #f8e8c5; background: #0c1028; font-size: clamp(9px, 1.1vw, 13px); line-height: 1.05; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.tarot-card.is-full-face .card-front, .celtic-board .tarot-card.is-full-face .card-front { display: block; border: 0; box-shadow: none; }
.tarot-card.is-full-face .card-topline, .tarot-card.is-full-face .card-nameplate { display: none; }
.tarot-card.is-full-face .card-art-wrap { display: block; width: 100%; height: 100%; }
.tarot-card.is-full-face .card-art { width: 100%; height: 100%; object-fit: fill; }
.tarot-card.is-entering { animation: deal-in .38s both; }
@keyframes deal-in { from { opacity: 0; transform: translate(-48px, -14px) rotate(-5deg) scale(.9); } to { opacity: 1; transform: none; } }
.table-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px 18px; }
.table-bottom p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.interpretation { margin: 38px 0 0; }
.section-heading { text-align: center; }
.section-heading h2 { font-size: 24px; margin: 0 0 18px; }
.reading-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reading-item { background: var(--paper); border: 2px solid var(--line); padding: 15px; }
.reading-item.is-reversed { border-color: #bb9bcf; background: linear-gradient(145deg, #29213f, #1c1b3b 72%); box-shadow: inset 3px 0 0 var(--gold), 0 0 15px #a471db30; }
.reading-item.is-reversed h3 { color: #ffe4ad; }
.reading-item.is-reversed .meaning { padding: 9px 10px; border-left: 2px solid var(--gold); background: #34284c; color: #fff2db; }
.reading-item .eyebrow { font-size: 10px; }
.reading-item h3 { font-size: 17px; margin: 8px 0 5px; }
.reading-card-link { color: inherit; text-decoration: none; }
.reading-card-link:is(:hover, :focus-visible) { color: var(--gold); text-decoration: underline; }
.reading-item .original-name { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.orientation { display: inline-block; background: var(--felt); color: var(--ink); padding: 5px 7px; font-size: 11px; font-weight: 800; }
.orientation.is-reversed { border: 1px solid var(--gold); background: #392a54; color: #ffe3a6; box-shadow: 0 0 10px #b98ad855; letter-spacing: .4px; }
.reading-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.reading-keyword { border: 1px solid var(--line); background: var(--felt); color: var(--gold); padding: 5px 7px; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.reading-item .meaning { font-size: 13px; line-height: 1.6; margin: 13px 0 0; }
.detailed-meaning { border-left: 2px solid var(--gold); margin-top: 13px; padding: 2px 0 2px 11px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.detailed-meaning summary { color: var(--gold); cursor: pointer; font-size: 11px; font-weight: 800; }
.detailed-meaning p { margin: 9px 0 0; }
.original-meaning { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 10px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.original-meaning summary { cursor: pointer; color: var(--gold); font-weight: 700; }
.original-meaning p { margin-bottom: 0; }
.ai-panel { max-width: 880px; margin: 32px auto 0; padding: clamp(20px, 3vw, 32px); border: 2px solid var(--gold); background: radial-gradient(circle at 50% 0%, #352c56 0%, #171a37 55%); box-shadow: 5px 6px 0 var(--line), 0 0 24px #a471db33; }
.ai-panel h2 { margin: 4px 0 16px; font-size: clamp(20px, 2.7vw, 28px); }
.ai-content { color: var(--ink); font-size: 14px; line-height: 1.8; }
.ai-content p { margin: 0 0 13px; white-space: pre-line; }
.ai-content p:last-child { margin-bottom: 0; }
.ai-content .ai-loading { color: var(--gold); }
.ai-content .ai-error { color: var(--muted); }
.ai-retry { margin-top: 12px; }
.followup { max-width: 880px; margin: 40px auto 34px; }
.followup-divider { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; color: var(--gold); text-align: center; }
.followup-divider::before, .followup-divider::after { content: ''; flex: 1; border-top: 2px dashed var(--line); }
.clarifier-controls { padding: 18px; border: 2px solid var(--line); background: var(--paper); }
.clarifier-controls label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 800; }
.clarifier-row { display: flex; gap: 10px; }
.clarifier-row input { flex: 1; min-width: 0; padding: 12px 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-size: 13px; }
.clarifier-row input::placeholder { color: var(--muted); }
.followup-button { min-height: 46px; padding: 10px 16px; border: 2px solid var(--gold); background: var(--gold); color: var(--page); font-size: 12px; font-weight: 900; letter-spacing: .4px; box-shadow: 0 0 9px #efcb8344, 4px 4px 0 var(--line); transition: box-shadow .18s, transform .18s, opacity .18s; }
.followup-button:disabled { border-color: var(--line); background: var(--card); color: var(--muted); box-shadow: none; opacity: .42; }
.followup-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 0 12px #ffe5a8, 0 0 26px #c293ff, 4px 6px 0 var(--line); }
.additional-sequence { display: grid; gap: 28px; }
.additional-stage { padding: 27px 20px 26px; border: 2px solid var(--line); background: var(--paper); text-align: center; }
.additional-stage h3 { margin: 4px 0 12px; font-size: 19px; }
.clarifier-asked { margin: 0 auto 17px; max-width: 610px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.additional-card-slot { display: grid; justify-items: center; gap: 12px; margin: 0 auto 20px; }
.additional-card-slot .tarot-card { width: clamp(170px, 23vw, 215px); }
.additional-card-link { color: var(--gold); font-size: 11px; font-weight: 800; text-decoration: none; }
.additional-card-link:is(:hover, :focus-visible) { text-decoration: underline; }
.additional-stage .ai-content { max-width: 690px; margin: 22px auto 0; padding-top: 18px; border-top: 1px dashed var(--line); text-align: left; }
.additional-button { display: block; margin: 22px auto 0; }
.spread-complete { margin: 28px auto 0; color: var(--gold); text-align: center; font-size: 13px; line-height: 1.6; }
a { color: var(--gold); }
.how-it-works { padding: 27px 0 32px; margin-top: 25px; border-top: 2px dashed var(--line); }
.how-it-works h2 { text-align: center; font-size: 18px; }
.how-it-works > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.how-it-works p { margin: 0; border-left: 3px solid var(--gold); padding-left: 12px; display: grid; gap: 7px; font-size: 12px; line-height: 1.5; }
.how-it-works span { color: var(--muted); }
.history-view { max-width: 900px; margin: auto; }
.history-list { display: grid; gap: 10px; margin-bottom: 16px; }
.history-entry { text-align: left; width: 100%; background: var(--paper); color: var(--ink); border: 2px solid var(--line); padding: 14px 16px; display: grid; gap: 6px; }
.history-entry:hover { background: var(--felt); }
.history-entry small, .empty-history { color: var(--muted); font-size: 12px; }
.empty-history { text-align: center; padding: 50px 10px; border: 2px dashed var(--line); }
.journal-save { max-width: 880px; margin: 25px auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
.journal-save .secondary-button { border-color: var(--gold); color: var(--gold); }
#five-journal-actions { flex-direction: column; }
#five-journal-save { transition: transform .35s ease-out, background .45s ease-out, border-color .45s ease-out, color .45s ease-out, box-shadow .5s ease-out, text-shadow .5s ease-out; }
#five-journal-save:not(:disabled):is(:hover, :focus-visible) { border-color: #b7f4ad; background: #245041; color: #eaffdc; box-shadow: 3px 5px 0 #547a67, 0 0 15px #8bedb0aa, 0 0 40px #4ac989aa; text-shadow: 0 0 9px #b7ffbd; }
.journal-inline-link { border: 0; padding: 0; background: none; color: var(--gold); text-decoration: underline; }
.journal-view { max-width: 940px; margin: 0 auto; }
.journal-tabs { display: flex; justify-content: center; gap: 10px; margin: 0 0 24px; }
.journal-tab { min-width: 165px; padding: 12px 18px; border: 2px solid var(--line); background: var(--paper); color: var(--muted); font-size: 12px; font-weight: 800; }
.journal-tab.is-current { border-color: var(--gold); background: var(--felt); color: var(--gold); box-shadow: 0 0 18px #b884ff44; }
.journal-panel { min-height: 260px; }
.journal-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.journal-list-toolbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.journal-tool-button { padding: 8px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--gold); font-size: 10px; font-weight: 800; }
.journal-tool-button:hover { border-color: var(--gold); background: var(--felt); }
.journal-transfer-status { min-height: 1em; margin: 0 0 12px; color: var(--gold); font-size: 11px; }
.journal-count, .journal-date, .journal-muted { color: var(--muted); font-size: 12px; line-height: 1.6; }
.journal-count { margin: 0; }
.journal-list { display: grid; gap: 12px; }
.journal-list-entry { width: 100%; display: grid; gap: 7px; padding: 18px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); text-align: left; box-shadow: 4px 5px 0 #090b1d; }
.journal-list-entry:is(:hover, :focus-visible) { border-color: var(--gold); box-shadow: 4px 5px 0 #090b1d, 0 0 18px #b884ff55; }
.journal-list-entry strong { font-size: 16px; line-height: 1.45; }
.journal-list-entry small, .journal-entry-tags { color: var(--muted); font-size: 11px; line-height: 1.6; }
.journal-entry-tags { color: var(--gold); }
.journal-detail { padding: clamp(18px, 3vw, 30px); border: 2px solid var(--line); background: var(--paper); }
.journal-detail h2 { margin: 6px 0; font-size: clamp(20px, 3vw, 28px); }
.journal-clarifier { color: var(--gold); font-size: 12px; line-height: 1.6; }
.journal-cards { display: flex; gap: 12px; overflow-x: auto; padding: 12px 0 18px; margin: 16px 0; border-block: 1px solid var(--line); }
.journal-card { flex: 0 0 105px; margin: 0; text-align: center; }
.journal-card img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); }
.journal-card.is-reversed img { transform: rotate(180deg); }
.journal-card figcaption { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.journal-card-role { display: block; margin-top: 5px; color: var(--gold); font-size: 9px; line-height: 1.35; }
.journal-interpretations { display: grid; gap: 12px; }
.journal-interpretation { padding: 16px; border: 1px solid var(--line); background: var(--face); }
.journal-interpretation h3 { margin: 0 0 8px; color: var(--gold); font-size: 14px; }
.journal-interpretation p { margin: 0 0 8px; color: var(--ink); font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.journal-interpretation p:last-child { margin-bottom: 0; }
.journal-form { display: grid; gap: 17px; margin-top: 25px; }
.journal-form label { display: grid; gap: 8px; color: var(--gold); font-size: 12px; font-weight: 700; }
.journal-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.journal-form select, .journal-form textarea, .stats-toolbar select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--face); color: var(--ink); }
.journal-form textarea { resize: vertical; line-height: 1.6; }
.journal-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.journal-form-status { min-height: 1em; margin: 0; color: var(--gold); font-size: 12px; }
.stats-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
.stats-toolbar select { width: auto; }
.stats-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stats-metric { min-height: 105px; display: grid; place-content: center; gap: 8px; padding: 14px; border: 2px solid var(--line); background: var(--paper); text-align: center; }
.stats-metric strong { color: var(--gold); font-size: clamp(22px, 3vw, 30px); }
.stats-metric span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.stats-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 15px; }
.stats-card { padding: 19px; border: 2px solid var(--line); background: var(--paper); }
.stats-card h2 { margin: 0 0 18px; font-size: 17px; }
.stats-bar-row { display: grid; grid-template-columns: 50px 1fr 90px; align-items: center; gap: 9px; margin: 12px 0; font-size: 11px; }
.stats-bar-row strong { text-align: right; color: var(--gold); font-size: 10px; }
.stats-bar-track { height: 12px; background: var(--face); border: 1px solid var(--line); }
.stats-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #a376d7, var(--gold)); }
.stats-top-card { padding: 8px 0; border-bottom: 1px solid #8a76ad55; color: var(--ink); font-size: 12px; }
.stats-topic { margin-top: 18px; color: var(--gold); font-size: 11px; line-height: 1.6; }
.archetype-profile { position: relative; overflow: hidden; margin: 0 0 27px; padding: clamp(20px, 4vw, 36px); border: 2px solid #b699ce; background: radial-gradient(circle at 12% 8%, #43345e 0, transparent 36%), radial-gradient(circle at 94% 94%, #2d3157 0, transparent 40%), #17172f; box-shadow: 7px 8px 0 #090b1d, inset 0 0 0 1px #efcb8330; }
.archetype-profile::before { content: '✧'; position: absolute; top: 20px; right: 29px; color: #efcb8366; font-size: 48px; pointer-events: none; }
.archetype-heading { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 22px; }
.archetype-heading h2 { margin: 0 0 7px; font-size: clamp(22px, 3vw, 30px); }
.archetype-intro { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.archetype-preview-toggle { position: relative; z-index: 1; flex: none; padding: 10px 12px; border: 1px solid var(--gold); background: #292442; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .5px; transition: background .2s, box-shadow .2s; }
.archetype-preview-toggle:hover { background: #433257; box-shadow: 0 0 16px #efcb8370; }
.archetype-empty { margin: 0; padding: 27px 20px; border: 1px dashed var(--line); color: var(--muted); text-align: center; font-size: 12px; line-height: 1.7; }
.archetype-hero { display: grid; grid-template-columns: minmax(125px, 175px) 1fr; align-items: center; gap: clamp(20px, 4vw, 42px); padding: 19px; border: 1px solid #d2af795c; background: linear-gradient(125deg, #25203d, #1b1c38); }
.archetype-art { width: 100%; aspect-ratio: 3 / 5; padding: 5px; border: 1px solid var(--gold); background: #100f20; box-shadow: 0 0 25px #b998d849, 5px 6px 0 #090b1d; }
.archetype-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.archetype-kicker, .archetype-detail-label { display: block; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.archetype-story h3 { margin: 12px 0 3px; color: #fff6df; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; text-transform: uppercase; }
.archetype-translation { margin: 0; color: #d5b9ee; font-size: 13px; }
.archetype-description { max-width: 52ch; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.archetype-link { display: inline-block; margin-top: 19px; color: var(--gold); font-size: 11px; text-decoration: none; border-bottom: 1px solid currentColor; }
.archetype-link:hover { color: #fff2c5; text-shadow: 0 0 12px #efcb83; }
.archetype-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.archetype-detail, .archetype-reflection { min-width: 0; padding: 18px; border: 1px solid #8a76ad8c; background: #151730c7; }
.archetype-detail > strong, .archetype-reflection > strong { display: block; margin-top: 13px; color: #fff3d5; font-size: clamp(16px, 2vw, 21px); line-height: 1.25; }
.archetype-detail > p, .archetype-reflection > p { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.archetype-list { margin: 11px 0 0; padding: 0; list-style: none; }
.archetype-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #8a76ad55; font-size: 11px; }
.archetype-list li:last-child { border: 0; }
.archetype-list strong { color: var(--gold); white-space: nowrap; }
.archetype-reflections { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.archetype-reflection { border-color: #b699ce80; background: linear-gradient(135deg, #25213d, #191a35); }
.archetype-footnote { margin: 18px 0 0; color: #c0b1d1; font-size: 10px; line-height: 1.7; }
@media (max-width: 650px) { .archetype-heading { align-items: flex-start; flex-direction: column; } .archetype-grid { grid-template-columns: 1fr 1fr; } .archetype-recurring { grid-column: 1 / -1; } }
@media (max-width: 480px) { .archetype-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .archetype-art { width: 145px; } .archetype-grid, .archetype-reflections { grid-template-columns: 1fr; } .archetype-recurring { grid-column: auto; } }
@media (max-width: 560px) { .journal-form-row, .stats-columns { grid-template-columns: 1fr; } .stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journal-tab { min-width: 0; flex: 1; padding: 10px 6px; } .stats-bar-row { grid-template-columns: 45px 1fr 78px; } }
.single-view { max-width: 900px; margin: 0 auto; padding-bottom: 48px; }
.single-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 700px; margin: 0 auto 25px; }
.single-mode { min-width: 0; padding: 14px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); text-align: left; font-size: 12px; font-weight: 900; letter-spacing: .4px; }
.single-mode span { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0; }
.single-mode.is-current { border-color: var(--gold); color: var(--gold); box-shadow: 3px 4px 0 var(--line), 0 0 12px #c293ff55; }
.single-mode:is(:hover, :focus-visible) { border-color: var(--gold); }
.single-controls { max-width: 700px; margin: 0 auto; padding: 20px; border: 2px solid var(--line); background: var(--paper); }
.single-controls label { display: block; margin-bottom: 11px; font-size: 13px; font-weight: 800; }
.single-controls input { display: block; width: 100%; padding: 12px 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-size: 13px; }
.single-controls input::placeholder { color: var(--muted); }
.single-privacy, .single-reverse-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.single-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.single-actions .primary-button { min-width: 175px; }
.single-actions .primary-button:not(:disabled) { box-shadow: 4px 4px 0 var(--line), 0 0 12px #efcb8355; }
.single-actions .primary-button:not(:disabled):hover { box-shadow: 4px 6px 0 var(--line), 0 0 22px #efcb83aa; }
.single-empty { display: grid; place-items: center; margin: 28px auto 0; min-height: 225px; border: 2px dashed var(--line); background: radial-gradient(circle, #30284d, transparent 70%); }
.single-empty img { display: block; width: 115px; aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); transform: rotate(-5deg); box-shadow: 5px 7px 0 #090b1c; image-rendering: pixelated; }
.single-result { max-width: 750px; margin: 0 auto; padding: clamp(20px, 4vw, 38px); border: 2px solid var(--gold); background: radial-gradient(circle at 50% 15%, #30284d, var(--paper) 58%); box-shadow: 5px 6px 0 var(--line), 0 0 24px #a471db33; text-align: center; }
.single-result.is-reversed { background: radial-gradient(circle at 50% 15%, #3b2a56, var(--paper) 62%); box-shadow: 5px 6px 0 var(--line), 0 0 28px #bd91d94d; }
.single-result.is-reversed .single-ai > p:not(.ai-error):not(.ai-loading) { padding: 11px 13px; border-left: 2px solid var(--gold); background: #34284c; color: #fff2db; }
.single-result > .eyebrow { margin-bottom: 12px; }
.single-context { max-width: 580px; margin: 0 auto 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.single-card-slot { display: flex; justify-content: center; }
.single-card-slot .tarot-card { width: clamp(210px, 28vw, 275px); }
.single-result h2 { margin: 22px 0 4px; font-size: 24px; }
.single-card-vi { margin: 0 0 11px; color: var(--gold); font-size: 15px; }
.single-orientation { display: flex; justify-content: center; min-height: 30px; }
.single-ai { max-width: 590px; margin: 25px auto 0; padding-top: 18px; border-top: 1px dashed var(--line); text-align: left; }
.single-ai h3, .single-keywords h3, .single-reflection h3 { margin: 0 0 12px; color: var(--gold); font-size: 13px; text-align: center; }
.single-ai p { margin: 0 0 12px; font-size: 14px; line-height: 1.8; }
.single-ai .ai-loading { color: var(--gold); text-align: center; }
.single-ai .ai-error, .single-static-meaning { color: var(--muted); }
.single-keywords, .single-reflection { max-width: 590px; margin: 22px auto 0; }
.single-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.single-reflection { padding: 18px 20px; border: 1px solid var(--line); background: var(--face); }
.single-reflection p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.7; }
.single-library-link { display: inline-block; margin-top: 22px; color: var(--gold); font-size: 11px; text-decoration: none; }
.single-library-link:is(:hover, :focus-visible) { text-decoration: underline; }
.single-new { display: block; margin: 24px auto 0; }
.single-daily-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.explore-view, .library-view, .card-detail-view { padding-bottom: 42px; }
.explore-intro { max-width: 800px; }
.explore-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); overflow: hidden; min-height: 365px; border: 3px solid var(--line); background: radial-gradient(circle at 80% 42%, #49345f 0, transparent 43%), linear-gradient(130deg, #252244, #12152d 78%); box-shadow: 7px 8px 0 #090b1d; }
.explore-hero::before { content: '✦ · · ✧ · · ✦'; position: absolute; top: 24px; right: 25px; color: #efcb8380; font-size: 16px; letter-spacing: 6px; }
.explore-hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(25px, 5vw, 55px); }
.explore-overline { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; }
.explore-hero h2 { margin: 17px 0 14px; color: #fff4df; font-size: clamp(31px, 4.4vw, 54px); line-height: 1.07; letter-spacing: .5px; }
.explore-hero-copy > p { max-width: 56ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.explore-hero-numbers { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 25px 0; color: var(--muted); font-size: 10px; }
.explore-hero-numbers span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.explore-hero-numbers strong { color: var(--gold); font-size: 20px; }
.explore-hero-link, .matrix-card-link { display: inline-block; padding: 12px 16px; border: 2px solid var(--gold); background: #473655; color: #fff1d2; text-decoration: none; font-size: 11px; font-weight: 800; box-shadow: 4px 4px 0 #0b0b1d; transition: transform .18s, box-shadow .18s, background .18s; }
.explore-hero-link:is(:hover, :focus-visible), .matrix-card-link:is(:hover, :focus-visible) { transform: translateY(-3px); background: #634678; box-shadow: 4px 7px 0 #0b0b1d, 0 0 20px #eacb9899; }
.explore-hero-art { position: relative; min-height: 365px; }
.explore-hero-art img { position: absolute; width: clamp(145px, 17vw, 205px); aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 15px 26px #070815aa, 0 0 31px #ad82d35e; }
.explore-art-back { top: 47px; left: 16%; transform: rotate(-15deg); opacity: .85; }
.explore-art-front { top: 39px; left: 36%; transform: rotate(10deg); }
.explore-jumps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 55px; }
.explore-jumps a { padding: 15px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--gold); text-decoration: none; font-size: 11px; font-weight: 800; text-align: center; transition: border-color .2s, background .2s, box-shadow .2s; }
.explore-jumps a:hover { border-color: var(--gold); background: #332a4d; box-shadow: 0 0 17px #b98ddd77; }
.explore-section { scroll-margin-top: 24px; margin: 0 0 62px; }
.explore-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 20px; padding-bottom: 17px; border-bottom: 2px dashed #8a76ad8c; }
.explore-section-heading h2 { margin: 0; font-size: clamp(21px, 3vw, 30px); }
.explore-section-heading > p { max-width: 43ch; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.foundations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.foundation-card { min-width: 0; border: 2px solid #8a76ad8f; background: var(--paper); box-shadow: 4px 5px 0 #090b1d; }
.foundation-card[open] { border-color: var(--gold); background: #22203d; }
.foundation-card summary { display: flex; align-items: flex-start; gap: 14px; min-height: 115px; padding: 19px; cursor: pointer; list-style: none; }
.foundation-card summary::-webkit-details-marker { display: none; }
.foundation-number { flex: none; color: var(--gold); font-size: 20px; font-weight: 900; }
.foundation-summary { display: grid; gap: 5px; min-width: 0; }
.foundation-summary small { color: #ba98dd; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.foundation-summary strong { color: var(--ink); font-size: 14px; line-height: 1.35; }
.foundation-summary > span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.foundation-toggle { margin-left: auto; color: var(--gold); font-size: 20px; line-height: 1; }
.foundation-card[open] .foundation-toggle { transform: rotate(45deg); }
.foundation-body { padding: 0 20px 20px 53px; border-top: 1px solid #8a76ad55; }
.foundation-body p { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.foundation-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 17px; }
.foundation-examples > span { width: 100%; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.foundation-example-link { padding: 7px 9px; border: 1px solid #a58fbc; color: #f3e6ff; text-decoration: none; font-size: 10px; }
.foundation-example-link:hover { border-color: var(--gold); color: var(--gold); }
.foundation-article-link { display: flex; align-items: flex-start; gap: 14px; min-height: 115px; padding: 19px; color: inherit; text-decoration: none; background: radial-gradient(circle at 100% 0, #4a315d, var(--paper) 65%); transition: border-color .2s, transform .2s, box-shadow .2s; }
.foundation-article-link:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: var(--gold); box-shadow: 4px 8px 0 #090b1d, 0 0 20px #cfaaee6b; }
.foundation-article-link .foundation-summary em { margin-top: 4px; color: var(--gold); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .5px; }
.lesson-view { max-width: 1000px; margin: 30px auto 75px; }
.lesson-view > .detail-back { margin-bottom: 20px; }
.lesson-article { border: 1px solid #8a76ad9c; background: linear-gradient(180deg, #25223e 0, #1a1d38 330px, #171a32 100%); box-shadow: 8px 10px 0 #080a1c; }
.lesson-header { max-width: 800px; margin: 0 auto; padding: clamp(30px, 6vw, 66px) 28px 28px; text-align: center; }
.lesson-header h1 { margin: 13px 0 18px; color: #fff5de; font-family: Cambria, 'Times New Roman', 'Noto Serif', serif; font-size: clamp(38px, 6vw, 66px); font-weight: 500; letter-spacing: -.02em; }
.lesson-lead { max-width: 62ch; margin: 0 auto; color: #dfd2e9; font-family: Cambria, 'Times New Roman', 'Noto Serif', serif; font-size: clamp(16px, 2vw, 20px); line-height: 1.7; }
.lesson-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px 22px; margin-top: 25px; color: var(--gold); font-size: 10px; letter-spacing: .5px; }
.lesson-hero-figure { margin: 8px auto 0; padding: 0 24px; text-align: center; }
.lesson-card-triptych { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 25px); min-height: 285px; padding: 22px; background: radial-gradient(ellipse at 50% 110%, #665077, #27243e 55%, #1c203a); border-block: 1px solid #a78bb482; }
.lesson-card-triptych img { width: clamp(105px, 19vw, 175px); aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 14px 28px #080917af, 0 0 21px #bd91d364; }
.lesson-card-triptych img:nth-child(2) { transform: translateY(-12px); }
.lesson-card-triptych img.is-pixel-deck, .lesson-spread-example img.is-pixel-deck { image-rendering: pixelated; }
.lesson-hero-figure figcaption { margin: 14px 0 0; color: #baaeca; font-size: 10px; line-height: 1.6; }
.lesson-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 18px; max-width: 780px; margin: 36px auto 0; padding: 18px 24px; border-block: 1px solid #8a76ad7d; font-size: 10px; }
.lesson-toc strong { width: 100%; color: var(--gold); letter-spacing: 1px; text-align: center; }
.lesson-toc a { color: #e5d3f3; text-decoration: none; }
.lesson-toc a:is(:hover, :focus-visible) { color: var(--gold); text-decoration: underline; }
.lesson-prose { max-width: 790px; margin: 0 auto; padding: 34px 30px 60px; font-family: Cambria, 'Times New Roman', 'Noto Serif', serif; font-size: 17px; line-height: 1.82; }
.lesson-prose p { margin: 0 0 19px; }
.lesson-prose strong { color: #fff2d6; }
.lesson-prose em { color: #e7d7ef; }
.lesson-chapter { scroll-margin-top: 24px; margin-top: 55px; }
.lesson-chapter .eyebrow, .lesson-takeaway .eyebrow { margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.lesson-chapter h2 { margin: 0 0 21px; color: #fff0d2; font-size: clamp(25px, 3vw, 34px); font-weight: 500; line-height: 1.3; }
.lesson-count-diagram { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 13px; margin: 30px 0; padding: 20px; border: 1px solid #a78bba91; background: #232443; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.lesson-count-diagram span { display: grid; min-width: 110px; }
.lesson-count-diagram span strong { color: var(--gold); font-size: 32px; line-height: 1.15; }
.lesson-count-diagram small { color: #d7c9df; font-size: 9px; letter-spacing: .7px; }
.lesson-count-diagram b { color: #bda5d5; font-size: 20px; }
.lesson-prose blockquote { margin: 29px 0; padding: 19px 24px; border-left: 4px solid var(--gold); background: #302744; color: #fff1d6; font-size: 20px; line-height: 1.55; }
.lesson-spread-example { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 28px 0; padding: 22px; background: #23243f; border: 1px solid #a78bba91; }
.lesson-spread-example figure { min-width: 0; margin: 0; text-align: center; }
.lesson-spread-example img { display: block; width: min(100%, 142px); margin: 0 auto 11px; aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 9px 19px #0809179c; }
.lesson-spread-example figcaption { color: #cbbbd8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; line-height: 1.5; }
.lesson-spread-example figcaption strong { font-size: 11px; }
.lesson-takeaway { margin: 50px 0 28px; padding: 23px 28px; border: 2px solid var(--gold); background: radial-gradient(circle at 0 0, #403253, #24233e 65%); }
.lesson-takeaway p:last-child { margin-bottom: 0; }
.lesson-links { display: flex; flex-wrap: wrap; gap: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.lesson-links a, .lesson-links button { padding: 11px 15px; border: 1px solid var(--gold); background: #3d3051; color: #fff0d2; font-size: 10px; font-weight: 800; text-decoration: none; }
.lesson-links button:hover, .lesson-links a:hover { background: #614777; box-shadow: 0 0 16px #d0a66c88; }
.matrix-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.matrix-legend-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 9px; padding: 13px; border: 1px solid #8a76ad8a; background: #201d3a; }
.matrix-legend-icon { grid-row: span 2; color: var(--gold); font-size: 21px; }
.matrix-legend-item strong { font-size: 10px; }
.matrix-legend-item small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.matrix-scroll { overflow-x: auto; padding: 3px 3px 14px; scrollbar-color: var(--line) var(--face); }
.matrix-grid { display: grid; grid-template-columns: 116px repeat(10, minmax(67px, 1fr)); gap: 5px; min-width: 840px; }
.matrix-corner, .matrix-column-heading, .matrix-row-heading { display: flex; align-items: center; justify-content: center; min-height: 54px; border: 1px solid #8a76ad77; background: #22203b; text-align: center; }
.matrix-corner { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .7px; }
.matrix-column-heading { flex-direction: column; gap: 3px; }
.matrix-column-heading strong { color: var(--gold); font-size: 14px; }
.matrix-column-heading span { color: var(--muted); font-size: 9px; }
.matrix-row-heading { flex-direction: column; gap: 2px; min-height: 71px; }
.matrix-row-heading > span { color: var(--gold); font-size: 17px; }
.matrix-row-heading strong { font-size: 11px; }
.matrix-row-heading small { color: var(--muted); font-size: 9px; }
.matrix-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 71px; border: 1px solid #8a76ad99; background: radial-gradient(circle at 50% 0, var(--matrix-glow), #191a34 70%); color: var(--ink); transition: border-color .18s, box-shadow .18s, transform .18s; }
.matrix-cell[data-suit="wa"], .matrix-row-heading[data-suit="wa"] { --matrix-glow: #584135; }
.matrix-cell[data-suit="cu"], .matrix-row-heading[data-suit="cu"] { --matrix-glow: #2b4661; }
.matrix-cell[data-suit="sw"], .matrix-row-heading[data-suit="sw"] { --matrix-glow: #3e3c5b; }
.matrix-cell[data-suit="pe"], .matrix-row-heading[data-suit="pe"] { --matrix-glow: #3c503c; }
.matrix-cell:hover, .matrix-cell.is-selected { transform: translateY(-3px); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 17px #d0a66c88; }
.matrix-cell-number { color: #fff2d6; font-size: 17px; font-weight: 900; }
.matrix-cell-mark { color: var(--gold); font-size: 12px; }
.matrix-detail { display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: clamp(18px, 4vw, 34px); align-items: center; margin-top: 20px; padding: clamp(16px, 3vw, 27px); border: 2px solid var(--gold); background: radial-gradient(circle at 4% 10%, #3e3156, #1b1d38 46%); box-shadow: 5px 6px 0 #090b1d; }
.matrix-detail-art { display: block; width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 20px #b889d36e; }
.matrix-detail-art.is-pixel-deck { image-rendering: pixelated; }
.matrix-detail-copy h3 { margin: 7px 0 2px; font-size: clamp(22px, 3vw, 33px); }
.matrix-detail-vi { margin: 0 0 16px; color: #d6bbeb; font-size: 12px; }
.matrix-layers { display: grid; gap: 8px; margin: 14px 0 17px; }
.matrix-layer { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 13px; padding: 8px 0; border-top: 1px solid #8a76ad70; }
.matrix-layer span { color: var(--gold); font-size: 10px; font-weight: 800; line-height: 1.6; }
.matrix-layer p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.matrix-note { margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
@media (max-width: 800px) { .explore-hero { grid-template-columns: 1fr 230px; } .explore-hero-art img { width: 155px; } .explore-art-back { left: -3%; top: 75px; } .explore-art-front { left: 21%; top: 67px; } .matrix-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .explore-hero { grid-template-columns: 1fr; } .explore-hero-copy { padding-bottom: 20px; } .explore-hero-art { min-height: 210px; } .explore-hero-art img { width: 125px; } .explore-art-back { left: calc(50% - 108px); top: 0; } .explore-art-front { left: calc(50% - 5px); top: 0; } .explore-section-heading { display: block; } .explore-section-heading > p { max-width: none; margin-top: 10px; } .foundations-grid { grid-template-columns: 1fr; } .explore-jumps { gap: 6px; } .explore-jumps a { padding: 12px 6px; font-size: 9px; } .matrix-detail { grid-template-columns: 120px minmax(0, 1fr); gap: 15px; } .matrix-layer { grid-template-columns: 1fr; gap: 3px; } }
@media (max-width: 650px) { .lesson-card-triptych { min-height: 0; padding: 17px 7px; } .lesson-card-triptych img { width: min(27vw, 135px); } .lesson-prose { padding: 27px 19px 44px; font-size: 16px; } .lesson-spread-example { gap: 8px; padding: 13px 8px; } .lesson-spread-example figcaption strong { font-size: 9px; overflow-wrap: anywhere; } .lesson-toc { margin: 24px 19px 0; justify-content: flex-start; } }
@media (max-width: 430px) { .matrix-detail { grid-template-columns: 1fr; } .matrix-detail-art { width: 130px; margin: 0 auto; } .matrix-detail-copy { text-align: center; } .matrix-layer { text-align: left; } .explore-hero-numbers { gap: 8px 13px; } }
.library-controls { display: grid; grid-template-areas: 'search-label filter-label' 'search filter'; grid-template-columns: minmax(0, 1fr) 230px; gap: 8px 14px; max-width: 880px; margin: 0 auto 14px; }
.library-controls label { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.library-controls label[for="library-search"] { grid-area: search-label; }
.library-controls label[for="library-filter"] { grid-area: filter-label; }
.library-controls input, .library-controls select { min-width: 0; width: 100%; padding: 12px 13px; border: 2px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); font-size: 13px; }
.library-controls input { grid-area: search; }
.library-controls select { grid-area: filter; }
.library-controls input::placeholder { color: var(--muted); }
.library-count { margin: 18px 0 14px; color: var(--muted); font-size: 12px; text-align: right; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.library-card { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 9px 9px 13px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 4px 5px 0 #090b1c; transition: transform .18s ease-out, border-color .18s, box-shadow .18s; }
.library-card:is(:hover, :focus-visible) { transform: translateY(-5px); border-color: var(--gold); box-shadow: 4px 8px 0 #090b1c, 0 0 18px #c293ff88; }
.library-card-art { display: block; width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border: 2px solid var(--gold); image-rendering: auto; background: var(--face); }
.library-card-group { margin-top: 7px; color: var(--gold); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.library-card-name { font-size: 13px; line-height: 1.25; }
.library-card-vi { color: var(--muted); font-size: 11px; line-height: 1.35; }
.library-empty { grid-column: 1 / -1; margin: 0; padding: 42px 20px; border: 2px dashed var(--line); color: var(--muted); text-align: center; font-size: 13px; }
.detail-back { margin: 25px 0 22px; padding: 7px 0; border: 0; background: none; color: var(--gold); font-size: 12px; font-weight: 800; }
.detail-back:hover { text-decoration: underline; }
#card-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(215px, 315px) minmax(0, 1fr); align-items: center; gap: clamp(22px, 5vw, 65px); padding: clamp(18px, 4vw, 42px); border: 2px solid var(--line); background: radial-gradient(circle at 72% 20%, #30284d, var(--paper) 65%); }
.detail-card-art { display: block; width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border: 5px solid var(--gold); background: var(--face); box-shadow: 8px 10px 0 #0a0d21, 0 0 24px #c293ff55; image-rendering: auto; }
.library-card-art.is-pixel-deck, .detail-card-art.is-pixel-deck, .shuffle-stage.is-pixel-deck .shuffle-card { image-rendering: pixelated; }
.shuffle-stage:not(.is-pixel-deck) .shuffle-card { image-rendering: auto; }
.deck:not(.is-pixel-deck) .deck-card { image-rendering: auto; }
.detail-intro h1 { margin: 0; color: var(--ink); font-size: clamp(26px, 4vw, 48px); line-height: 1.1; }
.detail-vietnamese-name { margin: 10px 0 20px; color: var(--gold); font-size: clamp(16px, 2vw, 22px); }
.detail-lead { max-width: 490px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.detail-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.detail-meaning { min-width: 0; padding: clamp(19px, 3vw, 30px); border: 2px solid var(--line); background: var(--paper); }
.detail-meaning h2 { margin: 0 0 20px; color: var(--gold); font-size: 19px; }
.detail-summary { margin: 0 0 16px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.7; }
.detail-explanation { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.detail-meaning .original-meaning { margin-top: 22px; }
.detail-neighbors { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 21px; }
.detail-neighbor { padding: 10px 12px; border: 1px solid var(--line); color: var(--gold); background: var(--paper); text-decoration: none; font-size: 12px; }
.detail-neighbor:is(:hover, :focus-visible) { border-color: var(--gold); background: var(--felt); }
footer { color: var(--muted); border-top: 2px dashed var(--line); text-align: center; padding: 20px 0 26px; font-size: 11px; line-height: 1.5; }
@media (max-width: 760px) {
  .site-shell { padding: 0 14px; }
  .brand { font-size: 17px; }
  .topbar nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .nav-button { font-size: 11px; }
  .question-controls { flex-direction: column; }
  .table-surface { margin: 0 10px; padding: 22px 8px; gap: 0; min-height: 340px; }
  .deck { width: 86px; margin: 0 28px 22px 4px; }
  .deck small { font-size: 8px; bottom: -34px; }
  .table-top, .table-bottom { padding-left: 10px; padding-right: 10px; }
  .table-top { font-size: 10px; }
  .card-slots { width: 100%; }
  .tarot-card { width: clamp(110px, 22vw, 152px); }
  .card-topline { font-size: 7px; }
  .card-nameplate { font-size: 9px; }
  .table-bottom { align-items: stretch; flex-direction: column; }
  .table-actions { justify-content: stretch; }
  .table-actions > button { flex: 1; }
  .clarifier-row { flex-direction: column; }
  .reading-results, .how-it-works > div { grid-template-columns: 1fr; }
  .single-modes { gap: 8px; }
  .library-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .detail-hero { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); }
  #card-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .single-mode { padding: 10px; font-size: 10px; }
  .single-actions { flex-direction: column; align-items: stretch; }
  .single-actions .primary-button { width: 100%; }
  .single-actions .reverse-toggle { align-self: flex-start; }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .topbar nav { width: 100%; justify-content: space-between; gap: 4px; }
  .nav-button { font-size: 10px; }
  .library-controls { grid-template-areas: 'search-label' 'search' 'filter-label' 'filter'; grid-template-columns: 1fr; }
  .detail-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .detail-card-art { max-width: 280px; }
  .detail-keywords { justify-content: center; }
  .table-top { align-items: flex-start; }
  .table-options { max-width: 70%; gap: 7px; }
  .table-options > span { font-size: 9px; }
  .reverse-toggle { font-size: 9px; }
  .table-surface { flex-direction: column; padding: 18px 0 12px; min-height: 475px; }
  .deck { width: 82px; margin: 0 0 43px; }
  .deck small { bottom: -36px; }
  .card-slots { justify-content: flex-start; overflow-x: auto; gap: 16px; padding: 8px 12px 16px; scroll-snap-type: x mandatory; scrollbar-color: var(--line) transparent; }
  .card-slot { flex: 0 0 180px; scroll-snap-align: center; }
  .tarot-card { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}