/* Tarot Atelier: a clean, bright site theme. Deck artwork is selected separately. */
.theme-toggle { flex: none; min-height: 38px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--gold); font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--gold); }

html[data-theme="atelier"] {
  color-scheme: light;
  --page: #f6f7fb;
  --paper: #fff;
  --felt: #f0f1fb;
  --card: #fff;
  --face: #f5f6fc;
  --ink: #242842;
  --muted: #637089;
  --line: #d4d9ea;
  --gold: #6557cb;
  --focus: #7165e7;
  --shadow: 0 15px 38px #39427114, 0 3px 9px #3942710b;
}
html[data-theme="atelier"] body {
  background: radial-gradient(ellipse 44rem 27rem at 3% -8%, #e1e5ff 0%, transparent 72%),
              radial-gradient(ellipse 34rem 30rem at 100% 18%, #ffe8e5 0%, transparent 74%),
              #f6f7fb;
  color: var(--ink);
  font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
html[data-theme="atelier"] .site-shell { max-width: 1220px; }
html[data-theme="atelier"] .topbar { padding: 20px 0 18px; border-bottom: 1px solid #dce1ef; }
html[data-theme="atelier"] .brand { color: #252a48; font-family: 'Segoe UI', Arial, sans-serif; font-weight: 850; font-size: 22px; letter-spacing: .04em; }
html[data-theme="atelier"] .nav-button { color: #59647c; font-size: 12px; font-weight: 600; }
html[data-theme="atelier"] .nav-button:is(:hover, :focus-visible), html[data-theme="atelier"] .nav-button.is-current { color: #5145b9; }
html[data-theme="atelier"] .nav-button.is-current { border-color: #6557cb; }
html[data-theme="atelier"] .nav-button span { background: #ebeafe; border-radius: 6px; color: #5145b9; }
html[data-theme="atelier"] .theme-toggle { border: 1px solid #d9dcf3; border-radius: 999px; background: #fff; color: #5145b9; box-shadow: 0 5px 14px #494bb218; }
html[data-theme="atelier"] .theme-toggle:hover { box-shadow: 0 8px 20px #5655c72b; }
html[data-theme="atelier"] h1,
html[data-theme="atelier"] h2,
html[data-theme="atelier"] h3 { font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; }
html[data-theme="atelier"] h1 { font-size: clamp(30px, 4vw, 46px); }
html[data-theme="atelier"] .eyebrow { color: #6758cc; font-family: 'Segoe UI', Arial, sans-serif; letter-spacing: .13em; }
html[data-theme="atelier"] .intro { margin-top: 46px; }
html[data-theme="atelier"] .intro > p:last-child { font-size: 14px; line-height: 1.7; }

html[data-theme="atelier"] .spread-picker { max-width: 920px; margin: 54px auto 65px; }
html[data-theme="atelier"] .spread-picker h1 { margin-bottom: 28px; font-size: clamp(30px, 4vw, 43px); }
html[data-theme="atelier"] .spread-picker-grid { gap: 16px; }
html[data-theme="atelier"] .spread-choice {
  overflow: hidden; min-height: 178px; border: 1px solid #dee1ef; border-radius: 20px;
  background: linear-gradient(145deg, #fff 25%, #f7f7ff);
  box-shadow: var(--shadow); transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}
html[data-theme="atelier"] .spread-choice::before { content: ''; position: absolute; top: -44px; right: -32px; width: 136px; height: 136px; border-radius: 50%; background: radial-gradient(circle, #dedaff88, #eeeaff25 64%, transparent 72%); pointer-events: none; }
html[data-theme="atelier"] .spread-choice:nth-child(2n)::before { background: radial-gradient(circle, #ffded98c, #ffedea25 64%, transparent 72%); }
html[data-theme="atelier"] .spread-choice:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-6px); border-color: #aea7ec; box-shadow: 0 22px 38px #4e50a72b, 0 5px 12px #4e50a717; }
html[data-theme="atelier"] .spread-choice-number { color: #6252d4; font-size: 34px; font-weight: 800; letter-spacing: -.05em; }
html[data-theme="atelier"] .spread-choice strong { font-size: 17px; font-weight: 750; letter-spacing: .045em; }
html[data-theme="atelier"] .spread-choice > span:last-of-type { color: #69738a; font-size: 12px; }
html[data-theme="atelier"] .spread-choice-wide { min-height: 130px; }
html[data-theme="atelier"] .home-deck-preview { width: min(100%, 475px); margin-bottom: 29px; padding: 10px 14px; border: 1px solid #dadcf0; border-radius: 14px; background: #fff; box-shadow: 0 12px 27px #46528a17; }
html[data-theme="atelier"] .home-deck-preview:is(:hover, :focus-visible) { box-shadow: 0 16px 30px #514db22b; transform: translateY(-3px); }
html[data-theme="atelier"] .home-deck-preview img { border: 0; border-radius: 5px; box-shadow: 0 3px 8px #27325930; }
html[data-theme="atelier"] .home-deck-preview small { color: #6557cb; }
html[data-theme="atelier"] .home-deck-preview strong { color: #252a48; font-size: 13px; }

html[data-theme="atelier"] :is(.table-wrap, .deck-option, .reading-item, .library-card, .detail-meaning, .history-entry, .journal-detail, .journal-list-entry, .stats-card, .stats-metric, .foundation-card, .single-controls, .single-mode, .clarifier-controls, .additional-stage) {
  border: 1px solid #dce1ee; border-radius: 16px; background: #fff; box-shadow: var(--shadow);
}
html[data-theme="atelier"] .table-wrap { border-radius: 20px; }
html[data-theme="atelier"] .table-top { padding: 17px 23px; color: #5547b5; }
html[data-theme="atelier"] .table-top #reading-deck-name { color: #65718a; }
html[data-theme="atelier"] .table-surface,
html[data-theme="atelier"] .five-surface { border: 1px solid #e2e4f5; border-radius: 18px; background: radial-gradient(circle at 50% 16%, #fff 0, #f0f1ff 54%, #e9ecf9 100%); box-shadow: inset 0 2px 16px #6562a00c; }
html[data-theme="atelier"] .five-surface { margin: 0 18px; }
html[data-theme="atelier"] .table-bottom { border-top: 1px solid #e6e9f3; }
html[data-theme="atelier"] .deck-card { border-radius: 5px; box-shadow: 3px 7px 11px #27275433; }
html[data-theme="atelier"] .deck { filter: drop-shadow(0 9px 10px #262b6540); }
html[data-theme="atelier"] .tarot-card { filter: drop-shadow(0 8px 8px #25245d38); }
html[data-theme="atelier"] .tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #aba8fb) drop-shadow(0 13px 12px #4f539366); }
html[data-theme="atelier"] .tarot-card.is-empty { border: 2px dashed #afb7d6; border-radius: 8px; background: #f2f3fc; box-shadow: none; }
html[data-theme="atelier"] .position-label { color: #374060; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; letter-spacing: .055em; }
html[data-theme="atelier"] .card-orientation { border-radius: 8px; background: #fff; }
html[data-theme="atelier"] :is(.card-orientation.is-reversed, .orientation.is-reversed) { border-color: #c49278; border-radius: 8px; background: #fff1ec; color: #965943; box-shadow: 0 2px 10px #b9775333; text-shadow: none; }
html[data-theme="atelier"] :is(.setting-tooltip, .reverse-help, .orientation-tooltip) { border-radius: 10px; background: #fff; color: #2b3048; box-shadow: 0 8px 20px #2c33663b; }
html[data-theme="atelier"] .reverse-toggle[aria-pressed="true"] { background: #eeebff; color: #5545b8; box-shadow: 0 4px 12px #6657cc24; }
html[data-theme="atelier"] .card-front { box-shadow: inset 0 0 0 4px #171a36; }
html[data-theme="atelier"] .card-nameplate { color: #f8e8c5; background: #0c1028; }
html[data-theme="atelier"] .reading-item.is-reversed { border-color: #e0bcae; background: #fff9f6; box-shadow: 0 12px 25px #ad6a5618, inset 3px 0 #cb8e72; }
html[data-theme="atelier"] .reading-item.is-reversed h3 { color: #814934; }
html[data-theme="atelier"] :is(.reading-item.is-reversed .meaning, .single-result.is-reversed .single-ai > p:not(.ai-error):not(.ai-loading)) { border-color: #cf9b80; background: #fff0e9; color: #734b3c; }
html[data-theme="atelier"] .reading-keyword { border-radius: 6px; background: #f2f0ff; }
html[data-theme="atelier"] .orientation { border-radius: 7px; }

html[data-theme="atelier"] :is(.ai-panel, .single-result, .five-clarifier-picker, .five-clarifier-result) { border: 1px solid #dcd8f8; border-radius: 18px; background: linear-gradient(140deg, #fff 20%, #f3f1ff); box-shadow: 0 18px 35px #4945ae1d; }
html[data-theme="atelier"] .single-result.is-reversed { background: linear-gradient(140deg, #fff, #fff1ea); }
html[data-theme="atelier"] .ai-content { color: #303754; font-size: 15px; line-height: 1.85; }
html[data-theme="atelier"] .single-empty { border-radius: 16px; background: radial-gradient(circle, #e9e7ff, transparent 70%); }
html[data-theme="atelier"] .single-mode.is-current { background: #f6f4ff; box-shadow: 0 8px 18px #574bc71c; }
html[data-theme="atelier"] .clarifier-controls,
html[data-theme="atelier"] .additional-stage { border-radius: 16px; }
html[data-theme="atelier"] #five-clarifier-open { border: 1px solid #7164de; border-radius: 12px; background: linear-gradient(110deg, #6457cb, #8577e6); color: #fff; box-shadow: 0 9px 23px #6457cb37; }
html[data-theme="atelier"] #five-clarifier-open:is(:hover, :focus-visible) { border-color: #9c90f0; background: radial-gradient(circle 80px at var(--spark-x, 50%) var(--spark-y, 50%), #b1aaff, #7c6fe0 68%, #6253c5); color: #fff; box-shadow: 0 0 15px #aaa0ff, 0 12px 28px #6457cb77; }
html[data-theme="atelier"] .five-clarifier-position.is-selected,
html[data-theme="atelier"] .five-clarifier-position:is(:hover, :focus-visible) { box-shadow: 0 0 14px #7265d554; }
html[data-theme="atelier"] :is(.primary-button, .followup-button) { border: 1px solid #6758d3; border-radius: 10px; background: linear-gradient(115deg, #6051c7, #8273e1); color: #fff; box-shadow: 0 8px 17px #6255c53d; }
html[data-theme="atelier"] :is(.primary-button, .followup-button):not(:disabled):hover { background: linear-gradient(115deg, #5444ba, #7164db); box-shadow: 0 11px 24px #6255c55c; }
html[data-theme="atelier"] .secondary-button { border: 1px solid #c5c9e4; border-radius: 10px; background: #fff; box-shadow: 0 5px 13px #43467715; }
html[data-theme="atelier"] :is(.question-controls input, .clarifier-row input, .single-controls input, .library-controls input, .library-controls select, .journal-form select, .journal-form textarea, .stats-toolbar select, #five-question, #love-question, #celtic-question, #five-clarifier-question) { border: 1px solid #cdd3e7; border-radius: 10px; background: #fff; color: #242842; }
html[data-theme="atelier"] input::placeholder, html[data-theme="atelier"] textarea::placeholder { color: #8189a1; }

html[data-theme="atelier"] .deck-option.is-selected { border-color: #9e94e9; box-shadow: 0 14px 30px #6e62c133; }
html[data-theme="atelier"] .deck-option-images { border-radius: 10px; background: #f0f1fb; }
html[data-theme="atelier"] .library-card:is(:hover, :focus-visible), html[data-theme="atelier"] .journal-list-entry:is(:hover, :focus-visible) { box-shadow: 0 17px 27px #5356a92b; }
html[data-theme="atelier"] .detail-hero,
html[data-theme="atelier"] .matrix-detail { border: 1px solid #dee1f0; border-radius: 18px; background: linear-gradient(125deg, #fff 25%, #f4f2ff); box-shadow: var(--shadow); }
html[data-theme="atelier"] .detail-card-art { box-shadow: 0 15px 30px #30366a3b; }
html[data-theme="atelier"] .explore-hero { border: 1px solid #dce0ef; border-radius: 22px; background: radial-gradient(circle at 82% 25%, #e5e0ff, transparent 45%), linear-gradient(125deg, #fff, #f5f4ff); box-shadow: var(--shadow); }
html[data-theme="atelier"] .explore-hero h2 { color: #252a48; }
html[data-theme="atelier"] .explore-hero-link,
html[data-theme="atelier"] .matrix-card-link { border: 1px solid #6557cb; border-radius: 10px; background: #6557cb; color: #fff; box-shadow: 0 7px 15px #6557cb38; }
html[data-theme="atelier"] :is(.explore-hero-link, .matrix-card-link):is(:hover, :focus-visible) { border-color: #5548b8; background: #5548b8; box-shadow: 0 10px 22px #6557cb55; }
html[data-theme="atelier"] .explore-jumps a { border-radius: 11px; }
html[data-theme="atelier"] .explore-jumps a:hover { background: #f1efff; box-shadow: 0 8px 18px #6c63c627; }
html[data-theme="atelier"] .foundation-card[open], html[data-theme="atelier"] .foundation-article-link { border-radius: 16px; background: #fff; }
html[data-theme="atelier"] .foundation-summary small, html[data-theme="atelier"] .foundation-example-link { color: #6557cb; }
html[data-theme="atelier"] .foundation-article-link:is(:hover, :focus-visible) { box-shadow: 0 10px 24px #685bc42d; }
html[data-theme="atelier"] .lesson-article { border: 1px solid #dce0ef; border-radius: 19px; background: linear-gradient(180deg, #fff 0, #f8f8ff 330px, #fff 100%); box-shadow: var(--shadow); }
html[data-theme="atelier"] :is(.lesson-header h1, .lesson-prose strong) { color: #252a48; font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; }
html[data-theme="atelier"] :is(.lesson-lead, .lesson-prose) { color: #46516a; font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; }
html[data-theme="atelier"] .lesson-hero-figure figcaption, html[data-theme="atelier"] .lesson-spread-example figcaption, html[data-theme="atelier"] .lesson-count-diagram small { color: #65718a; }
html[data-theme="atelier"] .lesson-card-triptych { background: radial-gradient(ellipse at 50% 110%, #d4d1f9, #f2f2ff 72%); }
html[data-theme="atelier"] .lesson-toc a { color: #5548b8; }
html[data-theme="atelier"] .lesson-prose blockquote { border-radius: 0 10px 10px 0; background: #efedff; color: #373866; }
html[data-theme="atelier"] .lesson-prose em { color: #5d53a6; }
html[data-theme="atelier"] .lesson-chapter h2 { color: #252a48; font-weight: 700; }
html[data-theme="atelier"] .lesson-count-diagram { border-color: #dce0ef; border-radius: 12px; background: #f3f3fd; }
html[data-theme="atelier"] .lesson-count-diagram b { color: #7568ce; }
html[data-theme="atelier"] :is(.lesson-chapter .eyebrow, .lesson-takeaway .eyebrow, .lesson-count-diagram, .lesson-spread-example figcaption, .lesson-links) { font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; }
html[data-theme="atelier"] .lesson-spread-example { border-radius: 12px; background: #f1f2fb; }
html[data-theme="atelier"] .lesson-spread-example { border-color: #dce0ef; }
html[data-theme="atelier"] .lesson-takeaway { border-radius: 12px; background: #f2f0ff; }
html[data-theme="atelier"] .lesson-links a, html[data-theme="atelier"] .lesson-links button { border-radius: 8px; background: #6557cb; color: #fff; }
html[data-theme="atelier"] :is(.matrix-legend-item, .matrix-corner, .matrix-column-heading, .matrix-row-heading) { border-radius: 8px; background: #f1f2fb; }
html[data-theme="atelier"] .matrix-cell { border-radius: 8px; background: radial-gradient(circle at 50% 0, var(--matrix-glow), #f5f6fc 78%); }
html[data-theme="atelier"] .matrix-cell[data-suit="wa"], html[data-theme="atelier"] .matrix-row-heading[data-suit="wa"] { --matrix-glow: #ffe7d4; }
html[data-theme="atelier"] .matrix-cell[data-suit="cu"], html[data-theme="atelier"] .matrix-row-heading[data-suit="cu"] { --matrix-glow: #d8eef8; }
html[data-theme="atelier"] .matrix-cell[data-suit="sw"], html[data-theme="atelier"] .matrix-row-heading[data-suit="sw"] { --matrix-glow: #e1e0fa; }
html[data-theme="atelier"] .matrix-cell[data-suit="pe"], html[data-theme="atelier"] .matrix-row-heading[data-suit="pe"] { --matrix-glow: #ddf1e1; }
html[data-theme="atelier"] .matrix-cell-number { color: #303656; }
html[data-theme="atelier"] .matrix-detail { border-color: #dad7f3; }
html[data-theme="atelier"] .matrix-detail-vi { color: #6557a9; }
html[data-theme="atelier"] .matrix-layer { border-top-color: #dce0ef; }
html[data-theme="atelier"] .foundation-card[open] { background: #fff; }
html[data-theme="atelier"] .foundation-body { border-top-color: #e0e3f0; }
html[data-theme="atelier"] .foundation-example-link { border-color: #c6c0e9; color: #5548b8; }
html[data-theme="atelier"] .explore-jumps a { border-color: #dde1ef; background: #fff; color: #5548b8; }
html[data-theme="atelier"] .archetype-profile,
html[data-theme="atelier"] .archetype-hero { border: 1px solid #dce0ef; border-radius: 18px; background: linear-gradient(130deg, #fff, #f4f2ff); box-shadow: var(--shadow); }
html[data-theme="atelier"] .archetype-story h3, html[data-theme="atelier"] :is(.archetype-detail, .archetype-reflection) > strong { color: #2c3150; }
html[data-theme="atelier"] .archetype-translation, html[data-theme="atelier"] .archetype-footnote { color: #637089; }
html[data-theme="atelier"] .archetype-preview-toggle { border-radius: 8px; background: #fff; }
html[data-theme="atelier"] .archetype-preview-toggle:hover { background: #f0eeff; }
html[data-theme="atelier"] .archetype-detail, html[data-theme="atelier"] .archetype-reflection { border: 1px solid #e1e3f1; border-radius: 12px; background: #fff; }
html[data-theme="atelier"] .archetype-list li, html[data-theme="atelier"] .stats-top-card { border-bottom-color: #e4e7f1; }
html[data-theme="atelier"] :is(.journal-tab, .archetype-preview-toggle) { border-radius: 9px; }
html[data-theme="atelier"] .stats-bar-fill { background: linear-gradient(90deg, #8d80e5, #5b4ec3); }
html[data-theme="atelier"] footer { border-top: 1px solid #dce1ef; }

@media (max-width: 1000px) {
  html[data-theme="atelier"] .topbar { flex-wrap: wrap; }
  html[data-theme="atelier"] .topbar nav { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  html[data-theme="atelier"] .topbar { flex-direction: row; align-items: center; }
  html[data-theme="atelier"] .topbar nav { justify-content: space-between; }
  html[data-theme="atelier"] .theme-toggle { margin-left: auto; }
  html[data-theme="atelier"] .brand { font-size: 19px; }
  html[data-theme="atelier"] .spread-picker { margin-top: 38px; }
  html[data-theme="atelier"] .spread-choice { min-height: 145px; }
}
