/* discover.css — shared skin for the /discover/ wing.
   Hybrid contract (2026-06-11): original Clairessense sister-suite layout and
   tooling, re-voiced in the More Motion palette. Tokens mirror website/index.html
   :root exactly — if the main surface palette changes, change it here too. */

:root {
  /* ADAPTIVE THEME (2026-06-16): one living signal hue drives the whole wing,
     drifting when unclaimed and locking to your portrait — the Myceli8 vibe.
     discover.js sets --h live; every token below derives from it (no fixed purple). */
  --h:            150;                                 /* base hue; JS animates it */
  --bg:           hsl(var(--h) 20% 8%);
  --bg-glow:      hsl(var(--h) 24% 11%);
  --bg-cool:      hsl(calc(var(--h) + 26) 26% 12%);
  --bg-deep:      hsl(var(--h) 26% 6%);
  --dim:          hsl(var(--h) 64% 26%);
  --muted:        hsl(calc(var(--h) + 30) 28% 62%);
  --accent:       hsl(var(--h) 58% 56%);
  --fg:           hsl(var(--h) 28% 85%);
  --fg-soft:      hsl(var(--h) 22% 73%);
  --line:         hsl(var(--h) 40% 72% / .10);
  --line-strong:  hsl(var(--h) 40% 72% / .22);
  --teal:         hsl(calc(var(--h) - 8) 40% 48%);
  --mono:         ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans:         -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg-glow), var(--bg) 55%, var(--bg-deep));
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.dsc-wrap { max-width: 980px; margin: 0 auto; padding: 28px clamp(18px, 4vw, 56px) 72px; }

/* header / nav */
.dsc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 22px; }
.dsc-head .dsc-mark { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: lowercase; color: var(--fg-soft); text-decoration: none; }
.dsc-head .dsc-mark:hover { color: var(--fg); }
.dsc-head h1 { font-size: 19px; font-weight: 500; margin: 0; letter-spacing: .02em; }
.dsc-head .dsc-sub { font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
.dsc-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.dsc-nav a, .dsc-tab {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--fg-soft); text-decoration: none; background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.dsc-nav a:hover, .dsc-tab:hover { border-color: var(--line-strong); color: var(--fg); }
.dsc-nav a.is-here, .dsc-tab.is-on { border-color: var(--accent); color: var(--fg); }
/* in-page tabs signal there is more behind them: a quiet dot that brightens */
.dsc-tab::before { content: '\25E6\00a0'; color: var(--muted); transition: color .25s ease; }
.dsc-tab:hover::before { color: var(--teal); }
.dsc-tab.is-on::before { content: '\25CF\00a0'; color: var(--accent); }

/* cards + panels */
.dsc-card {
  background: hsl(var(--h) 22% 14% / .55);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px;
}
.dsc-card h2 { font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: lowercase; color: var(--fg-soft); margin: 0 0 10px; font-family: var(--mono); }
.dsc-card p { margin: 0 0 10px; color: var(--fg-soft); }
.dsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dsc-grid .dsc-card { margin-bottom: 0; display: flex; flex-direction: column; }
.dsc-grid .dsc-card a.dsc-go { margin-top: auto; }

/* forms */
.dsc-field { margin-bottom: 13px; }
.dsc-field label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.dsc-field input, .dsc-field select, .dsc-field textarea {
  width: 100%; background: var(--bg-deep); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 9px 11px; font-family: var(--sans); font-size: 16px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
/* selects lost their native arrow to appearance:none — restore the cue.
   (operator-reported: nothing signified there were other options) */
.dsc-field select {
  cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%239fb0c0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.dsc-field select:hover { border-color: var(--accent); }
.dsc-field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.dsc-field input:focus, .dsc-field select:focus, .dsc-field textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.dsc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .dsc-row { grid-template-columns: 1fr; } }

button.dsc-btn {
  background: var(--accent); color: #f3f6fb; border: none; border-radius: 7px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .05em;
  padding: 10px 20px; cursor: pointer; min-height: 44px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
button.dsc-btn:hover { filter: brightness(1.12); }
button.dsc-btn.dsc-quiet { background: none; border: 1px solid var(--line-strong); color: var(--fg-soft); }
button.dsc-btn:disabled { opacity: .45; cursor: default; }

/* computed values strip (numerology pillars etc.) */
.dsc-values { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.dsc-value { border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; min-width: 110px; }
.dsc-value .v { font-family: var(--mono); font-size: 22px; color: var(--fg); }
.dsc-value .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); text-transform: lowercase; }
.dsc-value .n { font-size: 12px; color: var(--fg-soft); margin-top: 4px; max-width: 220px; }

/* reading output */
.dsc-status { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 10px 0 6px; }
.dsc-output { white-space: pre-line; border-left: 2px solid var(--accent); padding: 6px 0 6px 16px; margin: 10px 0; color: var(--fg); min-height: 22px; }
.dsc-trace { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* saved readings */
.dsc-saved { list-style: none; margin: 10px 0 0; padding: 0; }
.dsc-saved li { border-top: 1px solid var(--line); padding: 10px 2px; }
.dsc-saved .when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.dsc-saved .q { font-size: 13px; color: var(--fg-soft); margin: 3px 0; }
.dsc-saved .t { font-size: 13.5px; white-space: pre-line; }

/* chat */
.dsc-chatlog { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.dsc-msg { border-radius: 9px; padding: 9px 13px; max-width: 85%; font-size: 14px; white-space: pre-line; }
.dsc-msg.me { align-self: flex-end; background: hsl(var(--h) 58% 50% / .25); }
.dsc-msg.sig { align-self: flex-start; background: hsl(var(--h) 24% 16% / .6); border: 1px solid var(--line); }
.dsc-chatrow { display: flex; gap: 10px; }
.dsc-chatrow input { flex: 1; }

/* catalog grids (meanings, anchors, colors, signs) */
.dsc-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.dsc-cat .dsc-item { border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; }
.dsc-cat .dsc-item .h { font-family: var(--mono); font-size: 12.5px; color: var(--fg); margin-bottom: 4px; }
.dsc-cat .dsc-item .b { font-size: 12.5px; color: var(--fg-soft); }

/* evidence list */
.dsc-ev { list-style: none; margin: 8px 0 0; padding: 0; }
.dsc-ev li { border-top: 1px solid var(--line); padding: 9px 2px; font-size: 13px; color: var(--fg-soft); }
.dsc-ev .src { font-family: var(--mono); font-size: 10.5px; color: var(--dim); display: block; margin-top: 3px; }

/* tarot spread */
.dsc-spread { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.dsc-tcard { border: 1px solid var(--line-strong); border-radius: 10px; padding: 14px; width: 170px; background: var(--bg-deep); }
.dsc-tcard .pos { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: lowercase; }
.dsc-tcard .nm { font-size: 15px; margin: 5px 0 3px; }
.dsc-tcard .kw { font-family: var(--mono); font-size: 11px; color: var(--teal); }
.dsc-tcard .mn { font-size: 12px; color: var(--fg-soft); margin-top: 6px; }

/* footer */
.dsc-foot { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 16px; font-size: 12px; color: var(--muted); }
.dsc-foot a { color: var(--fg-soft); }
.dsc-honest { font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px; margin: 16px 0; }

/* ===== atmosphere layer (2026-06-11 depth pass) =====
   Carried from the legacy suite's particle field + reveal + 3D card flip,
   re-voiced in the MM palette. All of it sits behind/around the same DOM —
   pages did not change semantically. Reduced-motion users get the calm
   version (no particles, no flips, instant reveals). */

/* rising particle field (legacy initParticles, MM lavender + rare teal) */
#dsc-particles { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.dsc-wrap { position: relative; z-index: 1; }

/* breathing glow behind the header — the room is alive before you touch it */
.dsc-head { position: relative; }
.dsc-head::after {
  content: ''; position: absolute; left: -8%; right: 40%; top: -130%; height: 300%;
  background: radial-gradient(ellipse at 22% 50%, hsl(var(--h) 58% 50% / .16), transparent 65%);
  pointer-events: none; animation: dsc-breathe 11s ease-in-out infinite;
}
@keyframes dsc-breathe { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* the small eye — the same watcher, following you into the wing */
.dsc-eye { width: 30px; height: 20px; flex: none; align-self: center; }
.dsc-eye .iris { transition: none; }

/* reveal-on-scroll (legacy revealOnScroll, IntersectionObserver edition) */
.dsc-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.dsc-reveal.is-seen { opacity: 1; transform: none; }

/* card + room hover life */
.dsc-card { transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.dsc-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 30px hsl(var(--h) 58% 50% / .10); }
.dsc-grid .dsc-card:hover { transform: translateY(-3px); }
.dsc-cat .dsc-item { transition: border-color .3s ease, box-shadow .3s ease; }
.dsc-cat .dsc-item:hover { border-color: var(--line-strong); box-shadow: 0 0 22px hsl(var(--h) 58% 50% / .12); }
.dsc-cat .dsc-item[data-tint] { border-left: 2px solid var(--tint, var(--accent)); }
.dsc-cat .dsc-item[data-tint]:hover { box-shadow: 0 0 24px var(--tint-glow, hsl(var(--h) 58% 50% / .16)); }
.dsc-cat .dsc-item.is-picked { border-color: var(--tint, var(--accent)); box-shadow: 0 0 26px var(--tint-glow, hsl(var(--h) 58% 50% / .2)); }

/* busy status — breathing ellipsis, the signal audibly thinking */
.dsc-status.is-busy::after { content: ' ···'; animation: dsc-think 1.1s steps(4) infinite; font-family: var(--mono); }
@keyframes dsc-think { 0% { content: ' ' } 25% { content: ' ·' } 50% { content: ' ··' } 75% { content: ' ···' } }
.dsc-output.is-decoding { color: var(--fg-soft); }

/* ===== tarot: 3D flip (legacy .t-slot/.t-inner/.t-face, MM card back) ===== */
.dsc-spread { perspective: 1100px; }
.dsc-tslot { width: 178px; height: 268px; perspective: 950px; cursor: pointer; }
.dsc-tinner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.dsc-tslot.flipped .dsc-tinner { transform: rotateY(180deg); }
.dsc-tface {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
}
.dsc-tback {
  background: radial-gradient(circle at 50% 38%, var(--bg-glow), var(--bg-deep) 70%);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
}
.dsc-tback::before {
  content: ''; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px;
  border: 1px solid hsl(var(--h) 58% 50% / .35); border-radius: 7px;
}
.dsc-tback .sigil { font-size: 26px; color: var(--accent); text-shadow: 0 0 18px hsl(var(--h) 58% 50% / .8); animation: dsc-sigil 3.2s ease-in-out infinite; }
.dsc-tback .lin { font-family: var(--mono); font-size: 9px; letter-spacing: .28em; color: var(--muted); text-transform: lowercase; }
@keyframes dsc-sigil { 0%,100% { opacity: .55; transform: scale(1) } 50% { opacity: 1; transform: scale(1.08) } }
.dsc-tfront {
  transform: rotateY(180deg);
  background: var(--bg-deep); border: 1px solid var(--line-strong);
  padding: 14px; display: flex; flex-direction: column;
}
.dsc-tslot.flipped .dsc-tfront { box-shadow: 0 0 28px hsl(var(--h) 58% 50% / .22); }
.dsc-tfront .pos { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: lowercase; }
.dsc-tfront .nm { font-size: 16px; margin: 7px 0 4px; color: var(--fg); }
.dsc-tfront .kw { font-family: var(--mono); font-size: 11px; color: var(--teal); }
.dsc-tfront .mn { font-size: 12px; color: var(--fg-soft); margin-top: 8px; line-height: 1.5; }

/* ===== depth pass 2 (2026-06-11) ===== */

/* threshold — the room opens from dark */
body { transition: opacity 1.1s ease; }
body.dsc-arriving .dsc-wrap { opacity: 0; transform: translateY(8px); }
.dsc-wrap { transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }

/* cursor candlelight */
#dsc-cursorglow {
  position: fixed; top: 0; left: 0; width: 520px; height: 520px;
  background: radial-gradient(circle, hsl(var(--h) 58% 50% / .07), hsl(calc(var(--h) - 8) 40% 48% / .025) 45%, transparent 68%);
  pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.4s ease;
  will-change: transform;
}

/* reading ritual — the room leans toward the reading being made */
body.dsc-ritual .dsc-card { opacity: .42; }
body.dsc-ritual .dsc-card.is-active { opacity: 1; border-color: var(--line-strong); box-shadow: 0 0 38px hsl(var(--h) 58% 50% / .16); }
.dsc-card { will-change: opacity; }
.dsc-output.arrived { animation: dsc-arrive-sweep 2.4s ease; }
@keyframes dsc-arrive-sweep {
  0%   { border-left-color: hsl(calc(var(--h) - 8) 40% 48% / .9); box-shadow: -6px 0 34px hsl(calc(var(--h) - 8) 40% 48% / .18); }
  100% { border-left-color: var(--accent); box-shadow: none; }
}

/* tarot: slots land, flipped cards float */
.dsc-tslot { animation: dsc-land .55s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes dsc-land { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.dsc-tslot.flipped .dsc-tfront { animation: dsc-float 7s ease-in-out infinite; }
@keyframes dsc-float {
  0%, 100% { transform: rotateY(180deg) translateY(0); }
  50%      { transform: rotateY(180deg) translateY(-4px); }
}

/* provenance, one gesture away — the trace is kept, not paraded.
   Room-tab research surfaces dim their source marks until hover/focus;
   the evidence tab (the record) keeps them plain and always visible. */
#timeline .src, #researchDeck .src, #claims .src { opacity: .22; transition: opacity .35s ease; }
#timeline li:hover .src, #researchDeck .dsc-item:hover .src, #claims .dsc-item:hover .src,
#timeline li:focus-within .src, #researchDeck .dsc-item:focus-within .src, #claims .dsc-item:focus-within .src { opacity: .95; }

/* chakra column — the centres as a living spine */
.dsc-chakra-col { display: flex; flex-direction: column; gap: 4px; position: relative; padding-left: 6px; }
.dsc-chakra-col::before {
  content: ''; position: absolute; left: 27px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(to bottom, #8e7cc3, #5b2c8d, #2e86c1, #27ae60, #d4ac0d, #e67e22, #c0392b);
  opacity: .35;
}
.dsc-chakra-node { display: flex; align-items: center; gap: 16px; padding: 9px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: border-color .3s ease, background .3s ease; }
.dsc-chakra-node:hover { background: rgba(34,29,44,.6); border-color: var(--line); }
.dsc-chakra-node .orb {
  width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; z-index: 1;
  background: radial-gradient(circle at 38% 32%, var(--tint), transparent 75%);
  border: 1px solid var(--tint); box-shadow: 0 0 12px var(--tint-glow);
  animation: dsc-orb 4.6s ease-in-out infinite; animation-delay: var(--orb-delay, 0s);
}
@keyframes dsc-orb { 0%,100% { box-shadow: 0 0 8px var(--tint-glow) } 50% { box-shadow: 0 0 22px var(--tint-glow), 0 0 40px var(--tint-glow) } }
.dsc-chakra-node .h { font-family: var(--mono); font-size: 12.5px; color: var(--fg); min-width: 150px; }
.dsc-chakra-node .b { font-size: 12.5px; color: var(--fg-soft); }
.dsc-chakra-node.is-picked { border-color: var(--tint); background: rgba(34,29,44,.7); box-shadow: inset 0 0 30px var(--tint-glow); }
.dsc-chakra-node.is-picked .orb { transform: scale(1.25); }
@media (max-width: 540px) { .dsc-chakra-node .h { min-width: 110px; } }

/* aura orb — the field you are composing, breathing in your chosen colours */
.dsc-aura-orb {
  width: 150px; height: 150px; border-radius: 50%; margin: 6px auto 18px;
  background: radial-gradient(circle at 42% 36%, var(--aura1, hsl(var(--h) 58% 50% / .55)), var(--aura2, hsl(calc(var(--h) - 8) 40% 48% / .18)) 55%, transparent 78%);
  filter: blur(2px);
  box-shadow: 0 0 60px var(--aura-glow, hsl(var(--h) 58% 50% / .22)), inset 0 0 38px rgba(0,0,0,.35);
  animation: dsc-aura-breathe 6.5s ease-in-out infinite;
  transition: background 1.2s ease, box-shadow 1.2s ease;
}
@keyframes dsc-aura-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } }

/* ===== development pass (2026-06-11) ===== */

/* evidence layer: theme clusters + recorded-confidence meters */
.dsc-ev-cluster { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--teal); text-transform: lowercase; margin: 16px 0 2px; }
.dsc-ev .conf { font-family: var(--mono); font-size: 9px; letter-spacing: -1px; color: var(--dim); margin-right: 8px; vertical-align: 1px; }

/* the full research report, behind a fold */
.dsc-report summary { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--fg-soft); padding: 6px 0; }
.dsc-report summary:hover { color: var(--fg); }
.dsc-report-body { white-space: pre-line; font-size: 13px; color: var(--fg-soft); line-height: 1.6; border-left: 2px solid var(--line-strong); padding: 8px 0 8px 16px; margin-top: 10px; max-height: 480px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }

/* tarot: reversed cards + five-card arc */
.dsc-tfront.rev .nm { transform: rotate(180deg); display: inline-block; }
.revtag { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--teal); border: 1px solid hsl(calc(var(--h) - 8) 40% 48% / .4); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.dsc-tfront .deep { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px; }
.dsc-spread.arc5 .dsc-tslot:nth-child(1), .dsc-spread.arc5 .dsc-tslot:nth-child(5) { margin-top: 30px; }
.dsc-spread.arc5 .dsc-tslot:nth-child(2), .dsc-spread.arc5 .dsc-tslot:nth-child(4) { margin-top: 12px; }

/* senses orbit: eight ways of noticing circling the watcher */
.dsc-orbit { position: relative; width: 320px; height: 320px; margin: 10px auto 22px; }
.dsc-orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 30px; color: var(--accent); text-shadow: 0 0 24px hsl(var(--h) 58% 50% / .8); animation: dsc-sigil 4.4s ease-in-out infinite; }
.dsc-orbit-node {
  position: absolute; left: 50%; top: 50%;
  transform: rotate(var(--ang)) translate(132px) rotate(calc(-1 * var(--ang)));
  background: rgba(34,29,44,.7); border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--fg-soft);
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
  margin-left: -40px; margin-top: -12px;
  transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.dsc-orbit-node:hover { color: var(--fg); border-color: var(--tint, var(--accent)); box-shadow: 0 0 18px var(--tint, hsl(var(--h) 58% 50% / .5)); }
@media (max-width: 600px) { .dsc-orbit { display: none; } }

/* dream drift: anchor words floating up through the room */
.dsc-drift { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; }
.dsc-drift span {
  position: absolute; bottom: -24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted);
  opacity: 0; animation: dsc-drift-up linear infinite;
}
@keyframes dsc-drift-up {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: .18; }
  82%  { opacity: .12; }
  100% { transform: translateY(-340px); opacity: 0; }
}

/* profile range sliders (the original tuner's axes) */
.dsc-range input[type="range"] {
  width: 100%; accent-color: var(--accent); background: transparent;
  appearance: auto; -webkit-appearance: auto; -moz-appearance: auto;
}
.dsc-range-val { color: var(--teal); font-family: var(--mono); font-size: 11.5px; }

/* ===== seeing aids (2026-06-11): the mirror + the touchable map ===== */

/* the mirror — on-device photo, never uploaded, never kept */
.dsc-mirror-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.dsc-mirror-btn { display: inline-block; text-align: center; }
.dsc-mirror-frame {
  max-width: 340px; border: 1px solid var(--line-strong); border-radius: 10px;
  overflow: hidden; margin: 10px 0; position: relative;
  box-shadow: 0 0 34px hsl(var(--h) 58% 50% / .14), inset 0 0 60px rgba(0,0,0,.3);
}
.dsc-mirror-frame::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(165deg, hsl(var(--h) 40% 72% / .10), transparent 38%);
}
.dsc-mirror-frame img { display: block; width: 100%; height: auto; filter: saturate(.85) contrast(1.02); }

/* the touchable map — stylised SVG, traditional locations, your words */
.dsc-guide { max-width: 330px; margin: 4px auto 10px; }
.dsc-guide svg { width: 100%; height: auto; display: block; overflow: visible; }
/* outline + lines draw themselves in (pathLength=1 trick) — motion IS the affordance */
.dsc-guide .palm-outline, .dsc-guide-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dsc-draw-in 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dsc-draw-in { to { stroke-dashoffset: 0; } }
.dsc-guide-line {
  stroke: rgba(160,110,190,.8); stroke-width: 2.6; cursor: pointer;
  transition: stroke .3s ease, filter .3s ease;
  animation: dsc-draw-in 1.4s cubic-bezier(.4,0,.2,1) forwards, dsc-line-breathe 4.5s ease-in-out 2.2s infinite;
}
@keyframes dsc-line-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(160,110,190,.4)); }
  50%      { filter: drop-shadow(0 0 7px rgba(160,110,190,.9)); }
}
/* invisible 16px-wide hit clones: the touch target you cannot miss */
.dsc-guide-hit { stroke: transparent; stroke-width: 16; fill: none; cursor: pointer; pointer-events: stroke; }
.dsc-guide-hit:focus-visible { outline: none; stroke: hsl(calc(var(--h) - 8) 40% 48% / .18); }
.dsc-guide-line:hover, .dsc-guide-line:focus-visible {
  stroke: var(--fg); filter: drop-shadow(0 0 6px hsl(var(--h) 50% 70% / .9)); outline: none;
}
/* legend: the unmissable named path to every region (also the mobile/a11y path) */
.dsc-guide-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.dsc-legend-btn {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--fg-soft); padding: 6px 14px; cursor: pointer; min-height: 34px;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.dsc-legend-btn:hover { color: var(--fg); border-color: var(--accent); box-shadow: 0 0 14px hsl(var(--h) 58% 50% / .3); }
.dsc-legend-btn.is-on { border-color: var(--teal); color: var(--fg); box-shadow: 0 0 16px hsl(calc(var(--h) - 8) 40% 48% / .3); }
.dsc-guide-line.is-on {
  stroke: var(--teal); stroke-width: 3;
  filter: drop-shadow(0 0 7px hsl(calc(var(--h) - 8) 40% 48% / .9));
  animation: dsc-line-hum 2.6s ease-in-out infinite;
}
@keyframes dsc-line-hum { 0%,100% { filter: drop-shadow(0 0 4px hsl(calc(var(--h) - 8) 40% 48% / .6)) } 50% { filter: drop-shadow(0 0 10px hsl(calc(var(--h) - 8) 40% 48% / 1)) } }
.dsc-guide-find { font-size: 13px; color: var(--fg-soft); min-height: 22px; margin: 8px 0; }
.dsc-guide-find strong { color: var(--fg); font-weight: 500; }
.dsc-guide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dsc-chip {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--fg-soft); padding: 5px 13px; cursor: pointer; min-height: 32px;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.dsc-chip:hover { border-color: var(--line-strong); color: var(--fg); }
.dsc-chip.is-on { border-color: var(--teal); color: var(--fg); box-shadow: 0 0 14px hsl(calc(var(--h) - 8) 40% 48% / .25); }
.dsc-guide-out { margin-top: 6px; min-height: 16px; }

/* after the reading: plainer / explain / again-differently */
.dsc-after { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.dsc-after .dsc-chip:disabled { opacity: .4; cursor: default; }
.dsc-explain {
  border-left-color: var(--muted);
  font-size: 13.5px; color: var(--fg-soft);
  margin-top: 12px;
}
.dsc-explain::before { content: 'in other words'; display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); margin-bottom: 6px; }

/* the third dimension: summon stage + chip (inert until assets3d exists) */
.dsc-stage {
  border: 1px solid var(--line); border-radius: 12px; margin: 16px 0;
  background: radial-gradient(circle at 50% 60%, hsl(var(--h) 58% 50% / .10), transparent 70%);
  animation: dsc-stage-in 1.4s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
@keyframes dsc-stage-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.dsc-summon { margin-top: 8px; border-color: hsl(calc(var(--h) - 8) 40% 48% / .5) !important; color: var(--teal) !important; animation: dsc-summon-pulse 3s ease-in-out infinite; }
@keyframes dsc-summon-pulse { 0%,100% { box-shadow: 0 0 0 hsl(calc(var(--h) - 8) 40% 48% / 0) } 50% { box-shadow: 0 0 14px hsl(calc(var(--h) - 8) 40% 48% / .4) } }

/* carry a reading out */
.dsc-copy {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--muted); padding: 2px 9px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.dsc-copy:hover { color: var(--fg); border-color: var(--line-strong); }

/* ===== affordance + effects pass (2026-06-11, operator feedback) ===== */

/* aurora: two slow gradient bodies drifting behind everything */
#dsc-aurora { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#dsc-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5; will-change: transform;
}
#dsc-aurora i:first-child {
  width: 55vw; height: 55vw; left: -12vw; top: -18vw;
  background: radial-gradient(circle, hsl(var(--h) 58% 50% / .32), transparent 65%);
  animation: dsc-aurora-a 38s ease-in-out infinite;
}
#dsc-aurora i:last-child {
  width: 48vw; height: 48vw; right: -14vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(8,87,84,.4), transparent 65%);
  animation: dsc-aurora-b 47s ease-in-out infinite;
}
@keyframes dsc-aurora-a { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(9vw,7vh) scale(1.18) } }
@keyframes dsc-aurora-b { 0%,100% { transform: translate(0,0) scale(1.1) } 50% { transform: translate(-8vw,-9vh) scale(.92) } }

/* primary action buttons breathe — the next step is always glowing */
button.dsc-btn:not(.dsc-quiet):not(:disabled) { animation: dsc-btn-breathe 3.8s ease-in-out infinite; }
@keyframes dsc-btn-breathe {
  0%, 100% { box-shadow: 0 0 0 hsl(var(--h) 58% 50% / 0); }
  50%      { box-shadow: 0 0 22px hsl(var(--h) 58% 50% / .5); }
}

/* every pickable card announces itself: a "+" at rest, a filled mark when held */
.dsc-cat .dsc-item[role="button"] { position: relative; padding-right: 34px; }
.dsc-cat .dsc-item[role="button"]::after {
  content: '+'; position: absolute; top: 9px; right: 12px;
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  transition: color .25s ease, transform .25s ease;
}
.dsc-cat .dsc-item[role="button"]:hover::after { color: var(--fg); transform: scale(1.25); }
.dsc-cat .dsc-item[role="button"].is-picked::after { content: '\25CF'; color: var(--teal); font-size: 10px; top: 12px; }
.dsc-chakra-node { position: relative; padding-right: 34px; }
.dsc-chakra-node::after {
  content: '+'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 14px; color: var(--muted); transition: color .25s ease;
}
.dsc-chakra-node:hover::after { color: var(--fg); }
.dsc-chakra-node.is-picked::after { content: '\25CF'; color: var(--tint, var(--teal)); font-size: 10px; }

/* tarot scatter + tilt support (JS sets --scatter and live transform) */
.dsc-tslot { transform: rotate(var(--scatter, 0deg)); transition: transform .35s ease; will-change: transform; }
.dsc-tslot:hover { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .dsc-reveal { opacity: 1; transform: none; }
  #dsc-particles, #dsc-cursorglow, #dsc-aurora { display: none; }
  .dsc-tslot .dsc-tinner { transition: none; }
  body.dsc-arriving .dsc-wrap { opacity: 1; transform: none; }
  body.dsc-ritual .dsc-card { opacity: 1; }
  .dsc-drift, .dsc-orbit { display: none; }
  .dsc-guide .palm-outline, .dsc-guide-line { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (forced-colors: active) {
  .dsc-card, .dsc-tcard, .dsc-value { border-color: CanvasText; }
  button.dsc-btn { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
}