:root, [data-theme="starry"] {
  --frame: 0px; /* inset reserved for the manuscript border */
  --bg: #05060f; --surface: rgba(14,16,34,.72); --ink: #e9e6f5; --muted: #8f8fb3;
  --edge: rgba(180,190,255,.28); --edge-hi: #cfd6ff; --accent: #b9c4ff;
  --font: "Cormorant Garamond", Georgia, serif; --ease: cubic-bezier(.2,.8,.2,1);
  --glow: 1; --dur: 700ms;
}
[data-theme="manuscript"] {
  --frame: 20px;
  --bg: #ecdcb8; --surface: rgba(243,231,204,.94); --ink: #36210f; --muted: #7a5634;
  --edge: rgba(70,40,16,.5); --edge-hi: #2a1606; --accent: #9b2618;
  --font: "IM Fell English", "Cormorant Garamond", Georgia, serif; --glow: .35; --dur: 900ms;
}
[data-theme="dark"] {
  --bg: #000; --surface: rgba(18,18,20,.9); --ink: #e6e6e6; --muted: #8a8a8a;
  --edge: rgba(255,255,255,.18); --edge-hi: #fff; --accent: #fff;
  --font: "Inter", system-ui, sans-serif; --glow: 1; --dur: 450ms;
  --ease: cubic-bezier(.3,1.4,.5,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); transition: background .6s, color .6s; }
/* Manuscript: vellum grain, foxing stains, darkened worn edges, a ruled double frame. All static, nothing animated is filtered. */
[data-theme="manuscript"] body {
  background-color: #ecdcb8;
  background-image:
    radial-gradient(ellipse at center, transparent 45%, rgba(120,72,28,.18) 75%, rgba(70,38,12,.55) 100%),
    radial-gradient(circle at 14% 22%, rgba(150,95,40,.16) 0 6%, transparent 14%),
    radial-gradient(circle at 83% 71%, rgba(150,95,40,.13) 0 5%, transparent 12%),
    radial-gradient(circle at 62% 12%, rgba(150,95,40,.09) 0 3%, transparent 8%),
    radial-gradient(circle at 30% 88%, rgba(150,95,40,.1) 0 4%, transparent 10%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="manuscript"] body::after { content: ""; position: fixed; inset: 10px; z-index: 4; pointer-events: none;
  border: 3px double rgba(70,40,16,.55); box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(70,40,16,.25); }
[data-theme="manuscript"] h1 { font-family: "IM Fell English SC", serif; font-weight: 400; letter-spacing: .03em; }
[data-theme="manuscript"] h1::first-letter, [data-theme="manuscript"] .content h2::first-letter { color: var(--accent); font-size: 1.35em; }
[data-theme="manuscript"] h2, [data-theme="manuscript"] h3, [data-theme="manuscript"] .cell small { font-family: "IM Fell English SC", serif; letter-spacing: .06em; }
[data-theme="manuscript"] h3 { color: var(--accent); }
[data-theme="manuscript"] .edge { stroke: rgba(54,33,15,.62); stroke-width: .028; }
[data-theme="manuscript"] .node circle.orb { stroke: var(--ink); stroke-width: .022; }
[data-theme="manuscript"] .orb-ring { stroke: var(--ink); }
[data-theme="manuscript"] .panel, [data-theme="manuscript"] #info, [data-theme="manuscript"] .themes, [data-theme="manuscript"] .worlds, [data-theme="manuscript"] .menu {
  backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(70,40,16,.45);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px rgba(70,40,16,.25), 0 2px 10px rgba(70,40,16,.18); }
[data-theme="manuscript"] .panel, [data-theme="manuscript"] #info, [data-theme="manuscript"] .menu, [data-theme="manuscript"] .cell { border-radius: 4px; }
[data-theme="manuscript"] .themes, [data-theme="manuscript"] .worlds, [data-theme="manuscript"] .worlds .thumb, [data-theme="manuscript"] .themes button { border-radius: 4px; }
[data-theme="manuscript"] .worlds .thumb, [data-theme="manuscript"] .themes button[aria-pressed="true"] { background: rgba(155,38,24,.14); }
[data-theme="manuscript"] .cell { border-color: rgba(70,40,16,.3); }
[data-theme="manuscript"] .card img { filter: sepia(.25); }
.he { font-family: "Frank Ruhl Libre", serif; direction: rtl; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; }
#stage { position: fixed; inset: 0; display: grid; place-items: center; }
#tree { width: 100%; height: 100%; }

.edge { stroke: var(--edge); stroke-width: .035; fill: none; transition: stroke .3s; stroke-linecap: round; }
.edge-hit { stroke: transparent; stroke-width: .22; cursor: pointer; }
/* native focus ring scales with the SVG zoom into a giant blob; :focus styles below replace it */
.path-g, .node { outline: none; }
.path-g:hover .edge, .path-g:focus .edge { stroke: var(--edge-hi); stroke-width: .05; }
[data-theme="manuscript"] .edge { stroke-dasharray: 10; stroke-dashoffset: 10; animation: ink 1.6s var(--ease) forwards; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.node { cursor: pointer; outline: none; }
.node circle.orb { stroke: var(--edge-hi); stroke-width: .02; transition: fill var(--dur) var(--ease), transform .35s var(--ease); transform-box: fill-box; transform-origin: center; }
.node:hover circle.orb, .node:focus circle.orb { transform: scale(1.12); }
.node circle.halo { transition: opacity .4s; opacity: calc(.3 + .3 * var(--glow)); pointer-events: none; }
.orb-ring { fill: none; stroke: var(--edge-hi); stroke-width: .02; pointer-events: none; }
.quarters path { transition: fill var(--dur) var(--ease); }
.node.pseudo circle.orb { fill-opacity: .14; stroke-dasharray: .045 .035; stroke-width: .018; }
.node.pseudo circle.halo { opacity: calc(.18 * var(--glow)); }
text { fill: var(--ink); font-family: var(--font); text-anchor: middle; pointer-events: none; transition: opacity .4s; }
.lbl-name { font-size: .1px; font-weight: 600; }
.lbl-sub { font-size: .055px; opacity: .85; }
.lbl-pip { font-size: .1px; fill: var(--muted); }
.lbl-num { font-size: .085px; font-weight: 600; opacity: .85; }
.lbl-letter { font-size: .16px; font-family: "Frank Ruhl Libre", serif; }
.lbl-path { font-size: .085px; fill: var(--muted); }
.off-names .lbl-name, .off-names .lbl-sub, .off-numbers .lbl-num, .off-letters .lbl-letter, .off-letters .lbl-in-he,
.off-paths .path-g, .off-tarot .t-tarot, .off-astro .t-astro { opacity: 0; }
.off-paths .path-g { pointer-events: none; }
.swap { animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(.04px); } }

.bar { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px calc(16px + var(--frame)); pointer-events: none; z-index: 2; }
.bar > * { pointer-events: auto; }
.top { z-index: 3; top: 0; padding-top: max(calc(12px + var(--frame)), env(safe-area-inset-top)); }
.bottom { bottom: 0; flex-direction: column; padding-bottom: max(calc(16px + var(--frame)), env(safe-area-inset-bottom)); }
h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .02em; }
h1 small { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 6px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.themes, .worlds { display: flex; background: var(--surface); border: 1px solid var(--edge); border-radius: 999px; padding: 3px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.themes button { padding: 6px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.themes button[aria-pressed="true"] { background: var(--edge); color: var(--ink); }
.worlds { position: relative; }
.worlds button { position: relative; z-index: 1; padding: 10px 18px; min-width: 96px; font-size: 16px; color: var(--muted); transition: color .3s; }
.worlds button[aria-checked="true"] { color: var(--ink); }
.worlds .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--edge); transition: transform .45s var(--ease), width .45s var(--ease); }
#worldInfo { margin: 0; font-size: 14px; color: var(--muted); }

.panel { position: fixed; right: calc(16px + var(--frame)); top: calc(64px + var(--frame)); z-index: 3; max-height: calc(100vh - 80px); overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 15px; }
.panel .head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.panel .head button { font-size: 12px; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.panel .head button:hover { color: var(--ink); background: var(--edge); }
.panel h2 { flex: 1; margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.panel label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.panel input { accent-color: var(--accent); }

/* Focus mode: one element sharp, rest blurred, details in a side panel on the same screen */
.node, .path-g { transition: opacity .6s var(--ease); }
.focused .node:not(.active):not(.near) { filter: url(#soft); opacity: .3; }
.focused .path-g:not(.active) { opacity: .2; }
.node.active circle.orb { transform: none; }
.path-g.active .edge { stroke: var(--edge-hi); stroke-width: .045; }
stop { transition: stop-color var(--dur) var(--ease); }
.inner { opacity: 0; transition: opacity .5s var(--ease) .25s; }
.node.active .inner { opacity: 1; }
.lbl-num, .lbl-in-he { transition: transform .5s var(--ease), opacity .4s; }
.lbl-in-he { font-size: .14px; font-family: "Frank Ruhl Libre", serif; }
.lbl-in-sm { font-size: .036px; opacity: .8; }
.panel { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.panel.open { opacity: 1; transform: none; pointer-events: auto; }
.panel .themes { margin-bottom: 10px; }

#info { position: fixed; z-index: 1; top: calc(64px + var(--frame)); right: calc(16px + var(--frame)); bottom: calc(16px + var(--frame)); width: min(420px, 40vw); overflow: auto;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
#info.open { opacity: 1; transform: none; pointer-events: auto; }
#info .close { position: sticky; top: 12px; margin: 12px 0 0 12px; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); }
.content { padding: 4px 20px 110px; }
.content h2 { margin: 4px 0 0; font-size: 32px; font-weight: 600; line-height: 1.1; }
.content h2 .he { color: var(--muted); }
.content .lede { margin: 4px 0 0; color: var(--muted); font-size: 17px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
button.cell { text-align: left; }
button.cell:hover { border-color: var(--edge-hi); }
.cell { border: 1px solid var(--edge); border-radius: 12px; padding: 12px 14px; }
.cell.now { border-color: var(--edge-hi); }
.cell small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.cell b { font-size: 19px; font-weight: 600; }
.cell .sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; border: 1px solid var(--edge); }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin: 24px 0 10px; }
.src { color: var(--muted); font-size: 13px; margin-top: 32px; }

@media (max-width: 640px) {
  .worlds button { min-width: 0; padding: 9px 10px; font-size: 14px; }
  h1 small { display: none; }
  #info { top: auto; left: calc(8px + var(--frame)); right: calc(8px + var(--frame)); bottom: var(--frame); width: auto; height: 52vh; border-radius: 18px 18px 0 0; transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation: none !important; } }

/* Project selector */
.project { position: relative; display: flex; align-items: center; gap: 4px; }
.project > button { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-left: -8px; border-radius: 10px; }
.project > button:hover, .project > button[aria-expanded="true"] { background: var(--edge); }
.chev { width: 14px; height: 14px; transition: transform .3s var(--ease); stroke: currentColor; fill: none; stroke-width: 2; }
[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 8px); left: -8px; min-width: 260px; padding: 6px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.menu.open { opacity: 1; transform: none; pointer-events: auto; }
.menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 16px; }
.menu button:hover:not(:disabled) { background: var(--edge); }
.menu button[aria-current="true"] { background: var(--edge); }
.menu button:disabled { color: var(--muted); cursor: default; }
.menu small { display: block; color: var(--muted); font-size: 13px; }

/* Tarot art */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.card { margin: 0; font-size: 14px; }
.card img { display: block; width: 100%; aspect-ratio: 250 / 431; object-fit: cover; border-radius: 6px; border: 1px solid var(--edge); background: var(--edge); }
.card.now img { border-color: var(--edge-hi); box-shadow: 0 0 0 2px var(--edge-hi); }
.card figcaption { margin-top: 6px; line-height: 1.2; }
.card small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

/* Top-right tools: fit-to-screen and the settings menu */
.tools { display: flex; gap: 8px; }
.tools button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tools button[aria-expanded="true"], .tools button:hover { border-color: var(--edge-hi); }
.tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
[data-theme="manuscript"] .tools button { border-radius: 4px; backdrop-filter: none; -webkit-backdrop-filter: none; }
#tree { touch-action: none; cursor: grab; }
#tree.panning { cursor: grabbing; }

/* Projects: the tarot deck replaces the tree */
#deck { display: none; position: fixed; inset: var(--frame); z-index: 1; overflow: auto; padding: 64px 16px 32px; }
[data-project="tarot"] #deck { display: block; }
[data-project="tarot"] #stage, [data-project="tarot"] .bar.bottom, [data-project="tarot"] #info, [data-project="tarot"] #resetView,
[data-project="tarot"] .panel .head, [data-project="tarot"] .panel label { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1100px; margin: 0 auto 16px; }
.chips button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); color: var(--muted); font-size: 15px; }
.chips button[aria-checked="true"] { color: var(--ink); border-color: var(--edge-hi); }
[data-theme="manuscript"] .chips button { border-radius: 4px; }
.deck-grid { max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.card[hidden] { display: none; }
.card { cursor: zoom-in; outline: none; }
.card img { transition: transform .3s var(--ease); }
.card:hover img, .card:focus-visible img { transform: translateY(-3px); }
.card:focus-visible img { box-shadow: 0 0 0 2px var(--edge-hi); }

/* Fullscreen card viewer */
#viewer { position: fixed; inset: 0; z-index: 10; overflow: auto; display: grid; place-items: center; padding: 64px 16px 24px;
  background: rgba(0,0,0,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
[data-theme="manuscript"] #viewer { background: rgba(60,36,14,.78); }
#viewer.open { opacity: 1; }
#viewer[hidden] { display: none; }
#viewer .close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 50%; font-size: 18px;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
#viewer figure { margin: 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; max-width: 900px;
  transform: scale(.96); transition: transform .35s var(--ease); }
#viewer.open figure { transform: none; }
#viewer img { height: min(78vh, 760px); max-width: 100%; aspect-ratio: 250 / 431; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#viewer figcaption { flex: 1 1 260px; max-width: 360px; color: #f1ece2; }
#viewer h2 { margin: 0 0 12px; font-size: 30px; font-weight: 600; }
#viewer p { margin: 0 0 12px; font-size: 18px; line-height: 1.35; }
#viewer small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-bottom: 2px; }
#viewer .to-tree { margin: 8px 0 16px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 15px; }
#viewer .to-tree:hover { background: rgba(255,255,255,.12); }
#viewer .src { font-size: 13px; opacity: .6; }
#viewer .keys { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; }
#viewer .keys li { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); font-size: 14px; }
[data-theme="manuscript"] #viewer .keys li { border-radius: 3px; }
#viewer .symbols ul { margin: 0 0 12px; padding-left: 18px; font-size: 16px; line-height: 1.35; }
#viewer .symbols li { margin-bottom: 4px; }
#viewer .symbols b { font-weight: 600; }
#viewer .note { font-style: italic; }
#viewer figcaption { max-width: 420px; }