/* speeb.org: the living temple. Motion, the rites and the tools. Every colour comes from tokens.css. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html:not(.js) .sp-jsonly { display: none !important; }
body.has-dialog { overflow: hidden; }
::selection { background: var(--brass); color: var(--on-ink); }

/* ---------- header tools and the small-screen menu ---------- */
.sp-header { position: relative; }
.sp-header__tools { display: flex; align-items: center; gap: var(--space-2); order: 3; }
.sp-header nav { order: 2; }
.sp-iconbtn { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 40px; height: 40px; padding: 0 var(--space-2); justify-content: center; background: transparent; color: var(--ink-muted); border: 1px solid var(--stone-rule); border-radius: var(--radius-chisel); cursor: pointer; font-family: var(--font-ledger); font-size: 11px; letter-spacing: .14em; }
.sp-iconbtn:hover { color: var(--ink); border-color: var(--ink); }
.sp-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-themebtn svg { fill: currentColor; stroke: none; }
.sp-menubtn { display: none; }
html:not(.js) .sp-header__tools { display: none; }
@media (min-width: 1081px) { .sp-header { flex-wrap: nowrap; gap: var(--space-4); } .sp-header nav { margin-left: auto; } .sp-header .sp-nav { flex-wrap: nowrap; gap: var(--space-3); } .sp-header__mark { flex: none; } }
@media (max-width: 1080px) {
  .js .sp-menubtn { display: inline-flex; }
  .js .sp-header nav { order: 4; flex-basis: 100%; display: none; }
  .js .sp-header.is-open nav { display: block; animation: sp-drop .22s ease-out; }
  .js .sp-header .sp-nav { flex-direction: column; gap: 0; border-top: 1px solid var(--stone-rule); }
  .js .sp-header .sp-nav a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--stone-rule); font-size: 13px; }
  .js .sp-header .sp-nav a[aria-current="page"] { color: var(--brass); }
  .sp-header__mark { flex: 1; min-width: 0; }
  .sp-themebtn__label { display: none; }
}
@media (max-width: 380px) { .sp-header__name { font-size: 17px; } }
@keyframes sp-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- progress, the way up, toasts ---------- */
.sp-progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); z-index: 40; pointer-events: none; }
.sp-up { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; height: 44px; display: grid; place-items: center; background: var(--stone); color: var(--ink); border: 1px solid var(--stone-rule); border-radius: var(--radius-seal); cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; pointer-events: none; z-index: 30; }
.sp-up.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.sp-up svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html:not(.js) .sp-up { display: none; }
.sp-toasts { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: var(--space-2); z-index: 100; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.sp-toast { background: var(--ink); color: var(--on-ink); font-family: var(--font-ledger); font-size: 12px; letter-spacing: .14em; padding: var(--space-2) var(--space-4); border-radius: var(--radius-chisel); text-align: center; animation: sp-toast-in .3s ease-out; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.sp-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
@keyframes sp-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- things rise into place ---------- */
.js .sp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .sp-reveal.is-shown { opacity: 1; transform: none; }
.sp-tiles .sp-reveal:nth-child(2), .sp-obslist .sp-reveal:nth-child(2n) { transition-delay: .06s; }
.sp-tiles .sp-reveal:nth-child(3) { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .js .sp-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- chips, fields, search ---------- */
.sp-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--space-3); background: transparent; color: var(--ink-muted); border: 1px solid var(--stone-rule); border-radius: var(--radius-seal); font-family: var(--font-ledger); font-size: 11px; letter-spacing: .14em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sp-chip:hover { color: var(--ink); border-color: var(--ink); }
.sp-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sp-chip--solid { border-color: var(--brass); color: var(--brass); }
.sp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-search, .sp-field { display: grid; gap: var(--space-2); min-width: 0; }
.sp-search__row { display: flex; gap: var(--space-2); align-items: stretch; }
.sp-search input, .sp-field input, .sp-field textarea, .sp-field select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: var(--space-2) var(--space-3); background: var(--stone); color: var(--ink); border: 1px solid var(--stone-rule); border-radius: var(--radius-chisel); font: inherit; font-size: 17px; }
.sp-field textarea { resize: vertical; line-height: 27px; }
.sp-search input:focus, .sp-field input:focus, .sp-field textarea:focus, .sp-field select:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
.sp-search--wide { max-width: 640px; }
.sp-noscript { color: var(--doom); }

/* ---------- the living hero ---------- */
.sp-hero--living { position: relative; isolation: isolate; }
.sp-drift { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%); }
.sp-drift__item { position: absolute; opacity: .16; animation: sp-drift linear infinite; filter: grayscale(.4); }
@keyframes sp-drift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(28px, -40px) rotate(8deg); } 100% { transform: translate(0, 0) rotate(0); } }
.sp-rise { display: inline-block; animation: sp-rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d) * .14s + .1s); }
@keyframes sp-rise { from { opacity: 0; transform: translateY(.4em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .sp-rise { animation: none; } }
.sp-gaze--hero { box-shadow: 0 0 0 1px var(--stone-rule), 0 30px 80px -30px rgba(0,0,0,.45); cursor: pointer; }
.sp-gaze--hero img { transform: translate(var(--lean-x, 0), var(--lean-y, 0)) scale(1.04); transition: transform .6s ease-out; }
.sp-gaze--hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.18) 100%); }
.sp-gaze.is-driven .sp-gaze__lid { animation: none; transition: transform 90ms ease-in; }
.sp-gaze.is-driven.is-blinking .sp-gaze__lid { transform: scaleY(1); }
.sp-watch { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
html:not(.js) .sp-watch { display: none; }
.sp-watch__time { font-family: var(--font-ledger); font-size: 15px; color: var(--brass); font-variant-numeric: tabular-nums; }

/* ---------- the marquee of forms ---------- */
.sp-marquee { margin-top: var(--space-5); overflow: hidden; border-block: 1px solid var(--stone-rule); padding-block: var(--space-3); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sp-marquee__track { display: flex; gap: var(--space-3); width: max-content; animation: sp-marquee 160s linear infinite; }
.sp-marquee:hover .sp-marquee__track { animation-play-state: paused; }
.sp-marquee img { width: 56px; height: 56px; flex: none; }
@keyframes sp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sp-marquee__track { animation: none; } }

/* ---------- the Daily Decree ---------- */
.sp-decree { border: 1px solid var(--stone-rule); background: linear-gradient(135deg, var(--stone-recess), var(--stone) 60%); padding: var(--space-4); display: grid; gap: var(--space-4); position: relative; overflow: hidden; }
.sp-decree::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brass); }
.sp-decree__head, .sp-decree__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.sp-decree__date { color: var(--brass); }
.sp-decree__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.sp-decree__art { width: 160px; height: 160px; display: grid; place-items: center; background: var(--stone); border: 1px solid var(--stone-rule); position: relative; }
.sp-decree__art::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--brass); opacity: 0; animation: sp-halo 4s ease-in-out infinite; }
@keyframes sp-halo { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: .7; transform: scale(1.04); } }
.sp-decree__art img { width: 128px; height: 128px; }
.sp-decree__words { display: grid; gap: var(--space-3); }
.sp-decree__who { margin: 0; font-size: 20px; line-height: 30px; }
.sp-decree__who .sp-code { font-size: 17px; color: var(--brass); }
.sp-decree.is-sealed .sp-decree__art img { animation: sp-seal .8s cubic-bezier(.2,.7,.2,1); }
@keyframes sp-seal { from { opacity: 0; transform: scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .sp-decree__body { grid-template-columns: 1fr; gap: var(--space-4); } .sp-decree__art { width: 128px; height: 128px; } .sp-decree__art img { width: 96px; height: 96px; } }

/* ---------- numbers ---------- */
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--stone-rule); }
.sp-stats > div { display: grid; gap: var(--space-1); padding: var(--space-4); border-left: 1px solid var(--stone-rule); text-align: center; justify-items: center; }
.sp-stats > div:first-child { border-left: 0; }
.sp-stats__n { font-family: var(--font-carved); font-size: clamp(32px, 5vw, 48px); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-stats > div:nth-child(3) { border-left: 0; } .sp-stats > div:nth-child(n+3) { border-top: 1px solid var(--stone-rule); } }

/* ---------- the Nine: cards that open ---------- */
.sp-card { transition: background .25s; position: relative; }
.sp-card.is-openable { cursor: pointer; }
.sp-card.is-openable:hover { background: var(--stone-recess); }
.sp-card__art img { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sp-card:hover .sp-card__art img { transform: scale(1.12); }
.sp-form__obs { margin: 0; }
.sp-form__obs a { text-decoration: none; }
body.is-purring .sp-ninebox__art img, body.is-purring #chillspeeb .sp-niche__well img { animation: sp-purr .08s linear infinite alternate; }
@keyframes sp-purr { to { transform: translateX(1px) scale(1.01); } }

/* ---------- dialogs ---------- */
.sp-dialog { padding: 0; border: 1px solid var(--stone-rule); background: var(--stone); color: var(--ink); max-width: min(760px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); border-radius: var(--radius-chisel); }
.sp-dialog::backdrop { background: rgba(10,10,9,.72); backdrop-filter: blur(4px); }
.sp-dialog[open] { animation: sp-open .28s cubic-bezier(.2,.7,.2,1); }
@keyframes sp-open { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sp-dialog__inner { position: relative; padding: var(--space-5) var(--space-4) var(--space-4); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.sp-dialog__x { position: absolute; top: var(--space-2); right: var(--space-2); width: 40px; height: 40px; background: transparent; border: 0; color: var(--ink-muted); font-size: 28px; line-height: 1; cursor: pointer; }
.sp-dialog__x:hover { color: var(--ink); }
.sp-ninebox__art, .sp-lightbox__stage { width: 224px; height: 224px; display: grid; place-items: center; background: var(--stone-recess); border: 1px solid var(--stone-rule); }
.sp-ninebox__art img { width: 192px; height: 192px; }
.sp-ninebox__words, .sp-lightbox__words { display: grid; gap: var(--space-3); min-width: 0; }
.sp-ninebox__words > *, .sp-lightbox__words > * { margin: 0; }
.sp-ninebox__decree { color: var(--ink-muted); }
.sp-ninebox .sp-numeral { font-size: 28px; }
.sp-ninebox .sp-title, .sp-lightbox .sp-chapter { font-size: clamp(28px, 5vw, 38px); }
@media (max-width: 640px) { .sp-dialog__inner { grid-template-columns: 1fr; padding-top: var(--space-6); } .sp-ninebox__art, .sp-lightbox__stage { width: 100%; height: auto; aspect-ratio: 1; max-width: 260px; justify-self: center; } }
.sp-lightbox__stage img { width: 192px; height: 192px; }
.sp-lightbox__stage.is-new img { animation: sp-seal .45s cubic-bezier(.2,.7,.2,1); }
.sp-lightbox__code { color: var(--brass); }
.sp-lightbox__decree { font-style: italic; color: var(--ink-muted); }
.sp-lightbox__nav { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--stone-rule); padding-top: var(--space-3); }

/* ---------- the Reliquary ---------- */
.sp-relbar { display: grid; gap: var(--space-3); position: sticky; top: 0; z-index: 5; background: var(--stone); padding-block: var(--space-3); border-bottom: 1px solid var(--stone-rule); margin-top: var(--space-5); }
.sp-relbar .sp-search { max-width: 420px; }
.sp-relbar__count { margin: 0; color: var(--brass); }
.sp-relgroup__h { margin: 0 0 var(--space-4); color: var(--brass); }
.sp-relgroup { margin-top: var(--space-5); }
.sp-relic { color: inherit; text-decoration: none; display: block; }
.sp-relic .sp-niche__well { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; }
.sp-relic:hover .sp-niche__well, .sp-relic:focus-visible .sp-niche__well { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 12px 24px -16px rgba(0,0,0,.5); }
.sp-relic[data-group="new"] .sp-niche__tag { color: var(--brass); border-color: var(--brass); }
.sp-relempty { font-style: italic; color: var(--ink-muted); }
.sp-lost img { width: 96px; height: 96px; animation: sp-yeet 2.6s ease-in-out infinite; }
@keyframes sp-yeet { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(40px, -24px) rotate(30deg); } }

/* ---------- hymn players ---------- */
.sp-player__ui { display: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "play bars time" "play seek seek"; gap: var(--space-2) var(--space-3); align-items: center; }
.js .sp-player__ui { display: grid; }
.js .sp-player audio { display: none; }
.sp-player__play { grid-area: play; width: 56px; height: 56px; border-radius: var(--radius-seal); border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); display: grid; place-items: center; cursor: pointer; }
.sp-player__play:hover { background: transparent; color: var(--ink); }
.sp-player__play svg { width: 22px; height: 22px; fill: currentColor; }
.sp-player__play .i-pause, .sp-player.is-playing .i-play { display: none; }
.sp-player.is-playing .i-pause { display: inline; }
.sp-player__bars { grid-area: bars; display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.sp-player__bars i { flex: 1; background: var(--stone-rule); height: calc(20% + (var(--i) * 37 % 60) * 1%); border-radius: 1px; transform-origin: bottom; }
.sp-player.is-playing .sp-player__bars i { background: var(--brass); animation: sp-bar .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes sp-bar { from { transform: scaleY(.3); } to { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { .sp-player.is-playing .sp-player__bars i { animation: none; } }
.sp-player__time { grid-area: time; font-family: var(--font-ledger); font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sp-player__seek { grid-area: seek; width: 100%; accent-color: var(--brass); margin: 0; }

/* ---------- the next observance ---------- */
.sp-nextobs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--stone-rule); }
.sp-nextobs.is-today { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.sp-nextobs__art { width: 96px; height: 96px; display: grid; place-items: center; background: var(--stone-recess); }
.sp-nextobs__art img { width: 72px; height: 72px; }
.sp-nextobs__words { display: grid; gap: var(--space-1); }
.sp-nextobs__words > * { margin: 0; }
.sp-nextobs .sp-chapter a { color: inherit; text-decoration: none; }
.sp-nextobs__when { font-family: var(--font-ledger); font-size: 12px; letter-spacing: .14em; color: var(--brass); }
.sp-nextobs__text { color: var(--ink-muted); }
@media (max-width: 640px) { .sp-nextobs { grid-template-columns: auto minmax(0, 1fr); } .sp-nextobs > .sp-button { grid-column: 1 / -1; justify-self: start; } }

/* ---------- the calendar ---------- */
.sp-obslist { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-obs { display: grid; grid-template-columns: 72px 80px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-4); border-top: 1px solid var(--stone-rule); scroll-margin-top: var(--space-5); }
.sp-obs:target, .sp-obs.is-today { background: linear-gradient(90deg, var(--stone-recess), transparent); }
.sp-obs__date { display: grid; justify-items: center; gap: 2px; padding-top: var(--space-1); }
.sp-obs__day { font-family: var(--font-carved); font-size: 40px; line-height: 1; color: var(--brass); }
.sp-obs__art { width: 80px; height: 80px; display: grid; place-items: center; background: var(--stone-recess); }
.sp-obs__art img { width: 64px; height: 64px; }
.sp-obs__words { display: grid; gap: var(--space-2); max-width: var(--measure-scripture); }
.sp-obs__words > * { margin: 0; }
.sp-obs__tag { display: flex; gap: var(--space-2); align-items: center; }
.sp-obs__count { color: var(--brass); }
.sp-obs__help { align-self: center; }
@media (max-width: 560px) { .sp-obs { grid-template-columns: 56px minmax(0, 1fr); } .sp-obs__art { display: none; } .sp-obs__day { font-size: 32px; } }

/* ---------- the rites ---------- */
.sp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); margin-top: var(--space-5); }
@media (max-width: 820px) { .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sp-tiles { grid-template-columns: 1fr; } }
.sp-tile { background: var(--stone); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; color: var(--ink); text-decoration: none; position: relative; overflow: hidden; transition: background .25s; }
.sp-tile img { width: 64px; height: 64px; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sp-tile:hover { background: var(--stone-recess); }
.sp-tile:hover img { transform: scale(1.1) rotate(-3deg); }
.sp-tile__title { font-family: var(--font-carved); font-size: 24px; line-height: 30px; }
.sp-tile__line { color: var(--ink-muted); font-size: 15px; line-height: 23px; }
.sp-tile__go { color: var(--brass); margin-top: var(--space-2); }
.sp-tile__go::after { content: " →"; transition: margin .25s; }
.sp-tile:hover .sp-tile__go::after { margin-left: 6px; }
.sp-hubmore { display: grid; gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
.sp-tile--wide { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
.sp-tile--wide img { width: 48px; height: 48px; grid-row: span 2; }
.sp-tile--wide .sp-tile__title { font-size: 21px; }

.sp-rite { display: grid; gap: var(--space-5); justify-items: start; }
.sp-verdict { display: grid; gap: var(--space-3); justify-items: center; text-align: center; width: 100%; max-width: 640px; justify-self: center; padding: var(--space-5) var(--space-4); border: 1px solid var(--stone-rule); background: radial-gradient(circle at 50% 0%, var(--stone-recess), var(--stone) 70%); box-sizing: border-box; }
.sp-verdict > * { margin: 0; }
.sp-verdict .sp-actions { justify-content: center; }
.sp-verdict__art { width: 176px; height: 176px; display: grid; place-items: center; background: var(--stone); border: 1px solid var(--brass); border-radius: var(--radius-seal); }
.sp-verdict__art img { width: 128px; height: 128px; border-radius: var(--radius-seal); }
.sp-verdict__words { font-size: 20px; line-height: 31px; font-style: italic; max-width: 46ch; }
.sp-verdict.is-new, .sp-oracle__answer.is-new, .sp-ledger__cert.is-new, .sp-randverse .is-new { animation: sp-verdict .9s cubic-bezier(.2,.7,.2,1); }
@keyframes sp-verdict { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.sp-verdict.is-new .sp-verdict__art { animation: sp-seal 1s cubic-bezier(.2,.7,.2,1); }

/* Oracle */
.sp-oracle { justify-items: center; text-align: center; }
.sp-oracle__eye { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.sp-oracle__eye img { width: 160px; height: 160px; border-radius: var(--radius-seal); position: relative; }
.sp-oracle__ring { position: absolute; inset: 0; border-radius: var(--radius-seal); border: 1px solid var(--brass); }
.sp-oracle__ring::before, .sp-oracle__ring::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; border: 1px dashed var(--stone-rule); animation: sp-turn 40s linear infinite; }
.sp-oracle__ring::after { inset: 12px; border-style: solid; border-color: var(--stone-rule); animation-direction: reverse; animation-duration: 60s; }
.sp-oracle.is-gazing .sp-oracle__ring::before { animation-duration: 2s; border-color: var(--brass); }
.sp-oracle.is-gazing .sp-oracle__eye img { filter: blur(1px) contrast(1.2); }
@keyframes sp-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-oracle__ring::before, .sp-oracle__ring::after { animation: none; } }
.sp-oracle__form { width: 100%; max-width: 640px; }
.sp-oracle__form .sp-search { text-align: left; }
.sp-oracle__answer { display: grid; gap: var(--space-3); justify-items: center; max-width: 640px; }
.sp-oracle__words { font-family: var(--font-carved); font-size: clamp(26px, 4.4vw, 36px); line-height: 1.25; margin: 0; text-wrap: balance; }
.sp-oracle__words .sp-code { font-size: .6em; }

/* Judgment */
.sp-quiz { width: 100%; max-width: 680px; }
.sp-quiz form { width: 100%; display: grid; gap: var(--space-4); }
.sp-quiz__bar { width: 100%; height: 3px; background: var(--stone-rule); }
.sp-quiz__bar i { display: block; height: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); transition: transform .4s ease-out; }
.sp-question { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); min-width: 0; }
.sp-quiz.is-stepped .sp-question:not([hidden]) { animation: sp-verdict .45s ease-out; }
.sp-question legend { display: grid; gap: var(--space-2); padding: 0; margin-bottom: var(--space-4); }
.sp-question__q { font-family: var(--font-carved); font-size: clamp(26px, 4vw, 34px); line-height: 1.2; }
.sp-options { display: grid; gap: var(--space-2); }
.sp-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--stone-rule); cursor: pointer; transition: border-color .2s, background .2s; }
.sp-option:hover { border-color: var(--ink); }
.sp-option input { accent-color: var(--brass); width: 18px; height: 18px; margin: 0; flex: none; }
.sp-option:has(input:checked) { border-color: var(--brass); background: var(--stone-recess); }
html:not(.js) .sp-quiz__nav { display: none; }

/* Scales */
.sp-scales { width: 100%; }
.sp-beams { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); position: sticky; top: 0; z-index: 4; background: var(--stone); padding-block: var(--space-3); border-bottom: 1px solid var(--stone-rule); }
.sp-beam { display: grid; justify-items: center; gap: var(--space-2); position: relative; }
.sp-beam__post { width: 2px; height: 46px; background: var(--ink-muted); position: absolute; top: 14px; }
.sp-beam__bar { position: relative; width: 86%; height: 2px; margin-top: 12px; background: var(--ink); transform: rotate(var(--tilt, 0deg)); transition: transform .8s cubic-bezier(.3,1.5,.5,1); display: flex; justify-content: space-between; }
.sp-beam__pan { width: 26px; height: 12px; margin-top: 10px; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 26px 26px; position: relative; left: -12px; }
.sp-beam__pan:last-child { left: 12px; }
.sp-beam__pan::before { content: ""; position: absolute; left: 50%; top: -10px; height: 10px; width: 1px; background: var(--ink-muted); }
.sp-beam .sp-label { margin-top: 40px; font-size: 10px; text-align: center; }
.sp-beam.is-level .sp-beam__bar { background: var(--brass); }
@media (max-width: 560px) { .sp-beams { gap: var(--space-1); } .sp-beam .sp-label { font-size: 9px; letter-spacing: .06em; } .sp-beam__pan { width: 16px; left: -6px; } .sp-beam__pan:last-child { left: 6px; } }
.sp-likerts { display: grid; gap: var(--space-4); width: 100%; max-width: 760px; }
.sp-likert { border: 0; padding: 0 0 var(--space-4); margin: 0; border-bottom: 1px solid var(--stone-rule); min-width: 0; }
.sp-likert legend { font-size: 20px; line-height: 30px; margin-bottom: var(--space-3); padding: 0; }
.sp-likert__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.sp-likert__row label { cursor: pointer; }
.sp-likert__row input { position: absolute; opacity: 0; pointer-events: none; }
.sp-likert__row span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--stone-rule); font-family: var(--font-ledger); font-size: 10px; letter-spacing: .1em; color: var(--ink-muted); text-align: center; padding: 0 2px; transition: background .2s, color .2s, border-color .2s; }
.sp-likert__row label:hover span { border-color: var(--ink); color: var(--ink); }
.sp-likert__row input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sp-likert__row input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (max-width: 480px) { .sp-likert__row span { font-size: 8.5px; letter-spacing: .02em; } }

/* Confessional */
.sp-confess { width: 100%; max-width: 680px; position: relative; }
.sp-confess form { width: 100%; display: grid; gap: var(--space-3); }
.sp-confess__grille { width: 100%; height: 150px; display: grid; place-items: center; background: repeating-linear-gradient(90deg, var(--stone-recess) 0 10px, var(--stone) 10px 14px); border: 1px solid var(--stone-rule); }
.sp-confess__grille img { width: 120px; height: 120px; border-radius: var(--radius-seal); box-shadow: 0 0 0 8px var(--stone), 0 0 0 9px var(--stone-rule); }
.sp-confess__note { align-self: center; }
.sp-ash { min-height: 160px; font-size: 20px; line-height: 32px; width: 100%; }
.sp-ash span { display: inline-block; }
.sp-ash.is-burning span { animation: sp-ash 1.6s ease-in forwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes sp-ash { 0% { color: var(--ink); } 30% { color: var(--doom); text-shadow: 0 0 8px var(--brass); } 100% { color: transparent; text-shadow: 0 0 2px var(--ink-muted); transform: translate(var(--dx), -60px) rotate(12deg); opacity: 0; filter: blur(3px); } }
.sp-penance { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px dashed var(--brass); }
.sp-penance p { margin: 0; font-weight: 600; }
.sp-confess__stare { color: var(--doom); }
.sp-care { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--stone-rule); background: var(--stone-recess); }
.sp-care > * { margin: 0; }

/* Forge */
.sp-forge { justify-items: stretch; grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: var(--space-5); align-items: start; width: 100%; }
@media (max-width: 820px) { .sp-forge { grid-template-columns: 1fr; } }
.sp-forge__stage { display: grid; gap: var(--space-3); position: sticky; top: var(--space-3); width: 100%; }
@media (max-width: 820px) { .sp-forge__stage { position: static; } }
.sp-forge__stage canvas { width: 100%; max-width: 384px; aspect-ratio: 1; height: auto; background: repeating-conic-gradient(var(--stone-recess) 0 25%, var(--stone) 0 50%) 0 0 / 24px 24px; border: 1px solid var(--stone-rule); }
.sp-forge__stage canvas.is-struck { animation: sp-strike .35s ease-out; }
@keyframes sp-strike { 0% { transform: scale(.97); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.sp-forge__name { align-items: center; }
.sp-forge__name input { font-family: var(--font-ledger); font-size: 15px; }
.sp-forge__note { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.sp-forge__pick { display: grid; gap: var(--space-4); min-width: 0; }
.sp-forge__pick fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
.sp-forgeopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--space-2); }
.sp-forgeopt { display: grid; justify-items: center; gap: 4px; padding: var(--space-2) 2px; background: var(--stone); border: 1px solid var(--stone-rule); cursor: pointer; color: var(--ink-muted); }
.sp-forgeopt:hover { border-color: var(--ink); }
.sp-forgeopt[aria-pressed="true"] { border-color: var(--brass); background: var(--stone-recess); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brass); }
.sp-forgeopt img { width: 48px; height: 48px; display: block; }
.sp-forgeopt__part { position: relative; width: 48px; height: 48px; }
.sp-forgeopt__part img { position: absolute; inset: 0; }
.sp-forgeopt__part img:first-child { opacity: .35; }
.sp-forgeopt__none { width: 48px; height: 48px; display: grid; place-items: center; font-size: 22px; color: var(--stone-rule); }
.sp-forgeopt__l { font-family: var(--font-ledger); font-size: 9px; letter-spacing: .08em; text-align: center; }
.sp-swatch { width: 48px; height: 48px; border: 1px solid var(--stone-rule); display: block; }
.sp-swatch--none { background: repeating-conic-gradient(var(--stone-recess) 0 25%, var(--stone) 0 50%) 0 0 / 12px 12px; }
.sp-swatch--stone { background: #f4f3ef; } .sp-swatch--night { background: #141413; } .sp-swatch--brass { background: #8a5a2b; }
.sp-swatch--doom { background: #8f2a22; } .sp-swatch--void { background: #000; }
.sp-swatch--rays { background: repeating-conic-gradient(from 0deg at 50% 60%, #e3c27a 0 11.25deg, #f4f3ef 0 22.5deg); }

/* Ledger */
.sp-ledger { width: 100%; }
.sp-ledger__form { display: grid; gap: var(--space-3); width: 100%; max-width: 560px; }
.sp-ledger__cert { display: grid; gap: var(--space-3); width: 100%; }
.sp-ledger__cert canvas { width: 100%; max-width: 900px; height: auto; border: 1px solid var(--stone-rule); box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); }
.sp-ledger__book { display: grid; gap: var(--space-3); width: 100%; }
.sp-ledger__empty { margin: 0; font-style: italic; color: var(--ink-muted); }
.sp-vows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
.sp-vows:empty { display: none; }
.sp-vow { background: var(--stone); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.sp-vow__text { margin: 0; font-style: italic; font-size: 19px; }
.sp-vow.is-kept .sp-vow__text { color: var(--brass); }
.sp-vow.is-broken .sp-vow__text { text-decoration: line-through; text-decoration-color: var(--doom); color: var(--ink-muted); }
.sp-vow__tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- relics ---------- */
.sp-relicgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.sp-relicgrid--tall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sp-relicfile { margin: 0; display: grid; gap: var(--space-2); }
.sp-relicfile img { width: 100%; height: auto; display: block; border: 1px solid var(--stone-rule); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.sp-relicfile a:hover img { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.sp-relicfile figcaption { display: grid; gap: var(--space-1); justify-items: start; }
.sp-packs { display: grid; gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
.sp-pack { background: var(--stone); padding: var(--space-4); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.sp-pack__art { display: grid; grid-template-columns: repeat(4, 40px); gap: var(--space-2); }
.sp-pack__art img { width: 40px; height: 40px; }
@media (max-width: 600px) { .sp-pack { grid-template-columns: 1fr; gap: var(--space-3); } .sp-pack__art { grid-template-columns: repeat(6, 40px); } }

/* ---------- scripture tools ---------- */
.sp-scripture, .sp-chapterblock { font-size: calc(17px * var(--scripture-scale, 1)); line-height: calc(27px * var(--scripture-scale, 1)); }
.sp-readtools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
html:not(.js) .sp-readtools { display: none; }
.sp-readtools__hint { font-family: var(--font-ledger); font-size: 10px; letter-spacing: .12em; color: var(--ink-muted); margin-left: var(--space-2); }
.js .sp-vn { cursor: pointer; padding: 0 2px; border-radius: 2px; transition: background .2s; }
.js .sp-vn:hover { background: var(--stone-recess); }
.sp-vn.is-marked { background: var(--brass); color: var(--on-ink); }
.sp-speeblebar { display: grid; gap: var(--space-4); }
.sp-randverse { display: grid; gap: var(--space-3); justify-items: start; }
.sp-randverse cite a { color: inherit; text-decoration: none; }
.sp-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
.sp-results:empty { display: none; }
.sp-results a { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--stone); color: var(--ink); text-decoration: none; }
.sp-results a:hover { background: var(--stone-recess); }
.sp-results .sp-label { color: var(--brass); }
.sp-results mark { background: color-mix(in srgb, var(--brass) 30%, transparent); color: inherit; padding: 0 1px; }
.sp-ssearch { display: grid; gap: var(--space-4); }

/* ---------- footer glyphs ---------- */
.sp-glyphs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px dashed var(--stone-rule); }
.sp-glyph { width: 32px; height: 32px; padding: 4px; background: transparent; border: 0; color: var(--stone-rule); cursor: pointer; transition: color .3s, transform .3s; }
.sp-glyph .sp-sigil { width: 24px; height: 24px; color: inherit; }
.sp-glyph:hover { color: var(--ink-muted); }
.sp-glyph.is-lit { color: var(--brass); transform: scale(1.15); }
html:not(.js) .sp-glyphs { display: none; }

/* ---------- the Silent Temple ---------- */
.sp-silence { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0b0a; color: #ecebe5; }
.sp-silence::backdrop { background: #0b0b0a; }
.sp-silence[open] { animation: sp-fade 1.6s ease-out; }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-silence__inner { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-3) var(--space-5); box-sizing: border-box; }
.sp-silence__gaze { width: min(68vmin, 560px); border-radius: var(--radius-seal); box-shadow: 0 0 120px 10px rgba(209,159,114,.08); animation: sp-breathe 11s ease-in-out infinite; }
.sp-silence__gaze img { filter: brightness(.86) contrast(1.05); }
.sp-silence__gaze .sp-gaze__lid, .sp-silencepage__gaze .sp-gaze__lid { animation: sp-slowblink 26s ease-in-out infinite; animation-delay: 8s; }
@keyframes sp-slowblink { 0%, 88% { transform: scaleY(0); } 93%, 95% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes sp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .sp-silence__gaze, .sp-silence__gaze .sp-gaze__lid, .sp-silencepage__gaze .sp-gaze__lid { animation: none; } }
.sp-silence__phrase { font-family: var(--font-carved); font-size: clamp(26px, 4vw, 40px); margin: 0; opacity: 0; transition: opacity .9s ease; letter-spacing: .02em; }
.sp-silence__phrase.is-shown { opacity: 1; }
.sp-silence__tools { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; opacity: .5; transition: opacity .4s; }
.sp-silence__tools:hover, .sp-silence__tools:focus-within { opacity: 1; }
.sp-silence .sp-button--quiet { color: #ecebe5; border-color: #3a3834; }
.sp-silence .sp-button--quiet:hover { border-color: #ecebe5; color: #ecebe5; }
.sp-silencepage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; padding-top: var(--space-6); }
.sp-silencepage__gaze { border-radius: var(--radius-seal); }
@media (max-width: 720px) { .sp-silencepage { grid-template-columns: 1fr; } }

/* ---------- the raining of forms ---------- */
.sp-rain { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.sp-rain img { position: absolute; top: -60px; animation: sp-fall linear forwards; }
@keyframes sp-fall { to { transform: translateY(calc(100vh + 120px)) rotate(var(--spin)); } }

/* ---------- Brelm's Cave ---------- */
html.in-cave { --stone: #0d0c0b; --stone-recess: #171513; --stone-rule: #2f2a24; --ink: #e6dccb; --ink-muted: #a69a86; --brass: #d19f72; --on-ink: #0d0c0b; color-scheme: dark; }
.sp-cave { position: relative; padding-block: var(--space-6); }
.sp-cave__dark { position: fixed; inset: 0; pointer-events: none; z-index: 20; background: radial-gradient(circle calc(300px * var(--flick, 1)) at var(--tx, 50%) var(--ty, 30%), transparent 0, rgba(5,4,3,.4) 50%, rgba(5,4,3,.93) 100%); transition: opacity .8s; }
.sp-cave.is-lit .sp-cave__dark { opacity: 0; }
html:not(.js) .sp-cave__dark { display: none; }
.sp-cave__wall { display: grid; gap: var(--space-4); max-width: var(--measure-scripture); margin-inline: auto; text-align: center; justify-items: center; background: radial-gradient(ellipse at 50% 20%, #1d1a16, transparent 70%); padding: var(--space-5) var(--space-3); }
.sp-cave__wall > * { margin: 0; }
.sp-cave .sp-title { font-size: clamp(44px, 9vw, 72px); color: #e6dccb; text-shadow: 0 0 30px rgba(209,159,114,.25); }
.sp-cave__sigils { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); color: var(--brass); }
.sp-cave__sigils .sp-sigil { width: 36px; height: 36px; color: var(--brass); opacity: .8; }
.sp-cave__line { font-family: var(--font-carved); font-size: 20px; line-height: 32px; color: #cdbfa8; transform: rotate(var(--r)); letter-spacing: .02em; text-shadow: 1px 1px 0 #000; }
.sp-cave__testament p { font-size: 22px; line-height: 34px; color: #e6dccb; }
.sp-cave__stare { display: grid; gap: var(--space-2); justify-items: center; }
.sp-cave__stare img { width: 192px; height: 192px; border-radius: var(--radius-seal); box-shadow: 0 0 60px rgba(209,159,114,.35); }
.sp-cave__secret { font-style: italic; color: var(--ink-muted); }
.in-cave .sp-glyph { color: #4a4238; }

/* ---------- the Forge, second casting ---------- */
.sp-forge { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-areas: "stage pick" "shelf shelf"; }
.sp-forge__stage { grid-area: stage; }
.sp-forge__pick { grid-area: pick; }
.sp-forge__shelf { grid-area: shelf; display: grid; gap: var(--space-3); }
@media (max-width: 820px) { .sp-forge { grid-template-areas: "stage" "pick" "shelf"; } }
.sp-forge__canvaswrap { position: relative; width: 100%; max-width: 400px; }
.sp-forge__canvaswrap canvas { width: 100%; max-width: 400px; aspect-ratio: 1; height: auto; display: block; touch-action: none; cursor: grab; background: repeating-conic-gradient(var(--stone-recess) 0 25%, var(--stone) 0 50%) 0 0 / 24px 24px; border: 1px solid var(--stone-rule); }
.sp-forge__canvaswrap canvas.is-dragging { cursor: grabbing; outline: 2px dashed var(--brass); outline-offset: 3px; }
@media (max-width: 820px) { .sp-forge__stage { position: static; } .sp-forge__canvaswrap { max-width: 320px; } }
.sp-forge__mini { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: 96px; height: 96px; z-index: 30; border: 1px solid var(--brass); background: repeating-conic-gradient(var(--stone-recess) 0 25%, var(--stone) 0 50%) 0 0 / 12px 12px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; pointer-events: none; }
.sp-forge__mini.is-shown { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.sp-forge__named { display: grid; gap: var(--space-1); }
.sp-forge__title { margin: 0; font-family: var(--font-carved); font-size: 26px; line-height: 32px; }
.sp-forge__decree { margin: 0; font-style: italic; color: var(--ink-muted); font-size: 15px; line-height: 23px; min-height: 46px; }
.sp-forge__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-forge__hint { margin: 0 0 var(--space-2); font-family: var(--font-ledger); font-size: 10px; letter-spacing: .12em; color: var(--ink-muted); }
.sp-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--stone-rule); margin-bottom: var(--space-3); }
.sp-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3); font-family: var(--font-ledger); font-size: 11px; letter-spacing: .14em; color: var(--ink-muted); cursor: pointer; margin-bottom: -1px; }
.sp-tab:hover { color: var(--ink); }
.sp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.sp-tabpanel { display: grid; gap: var(--space-3); animation: sp-drop .2s ease-out; }
.sp-tabpanel .sp-forgeopts { max-height: 420px; overflow-y: auto; padding: 2px; }
.sp-tints { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--stone-rule); }
.sp-tints label { display: grid; grid-template-columns: 72px minmax(0, 1fr) 48px; gap: var(--space-3); align-items: center; }
.sp-tints input { accent-color: var(--brass); width: 100%; }
.sp-tints output { font-family: var(--font-ledger); font-size: 12px; color: var(--ink-muted); text-align: right; }
.sp-adjust { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--stone-rule); }
.sp-adjust__pad { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sp-adjust__pad .sp-chip { min-width: 40px; font-size: 15px; }
.sp-adjust__pad .sp-chip:last-child { font-size: 11px; }
.sp-adjust__info { margin: 0; color: var(--brass); }
.sp-chip[disabled] { opacity: .4; cursor: default; }
.sp-swatch--sky { background: radial-gradient(#cfe6f7, #7fb0d9); } .sp-swatch--mint { background: radial-gradient(#d8f3e4, #7cc7a0); }
.sp-swatch--blush { background: radial-gradient(#fde3ea, #f19ab3); } .sp-swatch--gold { background: radial-gradient(#fff0b8, #d9a62e); }
.sp-swatch--starfield { background: radial-gradient(circle at 30% 30%, #ffe08a 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), #0e1022; }
.sp-shape { width: 40px; height: 40px; margin: 4px; background: var(--ink-muted); display: block; }
.sp-shape--rounded { border-radius: 10px; } .sp-shape--circle { border-radius: 50%; }
.sp-shape--seal { border-radius: 50%; box-shadow: inset 0 0 0 3px #8a5a2b, inset 0 0 0 5px #d19f72; background: var(--stone-rule); }
.sp-shape--diamond { transform: rotate(45deg) scale(.75); }
.sp-motion { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; }
.sp-motion img { width: 40px; height: 40px; }
.sp-forgeopt:hover .sp-motion--breathe img { animation: sp-m-breathe 1.2s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--bob img { animation: sp-m-bob .8s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--sway img { animation: sp-m-sway 1.1s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--tremble img { animation: sp-m-tremble .2s steps(2) infinite; }
.sp-forgeopt:hover .sp-motion--spin img { animation: sp-turn 1.2s linear infinite; }
.sp-forgeopt:hover .sp-motion--rainbow img { animation: sp-m-rainbow 1.2s linear infinite; }
.sp-forgeopt:hover .sp-motion--yeet img { animation: sp-yeet 1s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--glitch img { animation: sp-m-tremble .15s steps(2) infinite; filter: drop-shadow(2px 0 #f0f) drop-shadow(-2px 0 #0ff); }
.sp-forgeopt:hover .sp-motion--blink img { animation: sp-m-blink 1.2s steps(1) infinite; }
@keyframes sp-m-breathe { 50% { transform: scale(1.1); } }
@keyframes sp-m-bob { 50% { transform: translateY(-5px); } }
@keyframes sp-m-sway { 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } }
@keyframes sp-m-tremble { 50% { transform: translate(1px, -1px); } }
@keyframes sp-m-rainbow { to { filter: hue-rotate(360deg); } }
@keyframes sp-m-blink { 80% { transform: scaleY(1); } 85% { transform: scaleY(.85); } 90% { transform: scaleY(1); } }
.sp-shelfgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); }
.sp-shelfgrid:empty { display: none; }
.sp-shelfitem { position: relative; }
.sp-shelfitem__open { width: 100%; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); background: var(--stone-recess); border: 1px solid var(--stone-rule); cursor: pointer; color: var(--ink); }
.sp-shelfitem__open:hover { border-color: var(--brass); }
.sp-shelfitem__open img { width: 64px; height: 64px; }
.sp-shelfitem__open .sp-code { font-size: 11px; overflow-wrap: anywhere; text-align: center; }
.sp-shelfitem__del { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-muted); font-size: 18px; cursor: pointer; }
.sp-shelfitem__del:hover { color: var(--doom); }
@media (min-width: 821px) { .sp-forge__stage { position: static; } }
.sp-speed { width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; color: var(--brass); }
.sp-forgeopts--speeds { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: none !important; }
.sp-forgeopt:hover .sp-motion--wobble img { animation: sp-m-wobble .6s ease-in-out infinite; transform-origin: bottom; }
.sp-forgeopt:hover .sp-motion--bounce img { animation: sp-m-bob .5s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--heartbeat img { animation: sp-m-heart 1s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--nope img { animation: sp-m-sway .3s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--dance img { animation: sp-m-sway .8s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--float img { animation: sp-m-bob 2s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--orbit img { animation: sp-m-orbit 1s linear infinite; }
.sp-forgeopt:hover .sp-motion--zoom img { animation: sp-m-zoom 1.4s ease-in infinite; }
.sp-forgeopt:hover .sp-motion--flip img { animation: sp-m-flip .9s linear infinite; }
.sp-forgeopt:hover .sp-motion--fade img, .sp-forgeopt:hover .sp-motion--vanish img { animation: sp-m-fade 1.2s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--melt img { animation: sp-m-melt 1.4s ease-in-out infinite; transform-origin: bottom; }
.sp-forgeopt:hover .sp-motion--peek img { animation: sp-m-peek 1.4s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--flash img { animation: sp-m-flash .8s steps(2) infinite; }
.sp-forgeopt:hover .sp-motion--rave img { animation: sp-m-rainbow .4s steps(4) infinite; }
.sp-forgeopt:hover .sp-motion--shiver img { animation: sp-m-tremble .08s steps(2) infinite; }
.sp-forgeopt:hover .sp-motion--tumble img { animation: sp-turn .8s linear infinite; }
.sp-forgeopt:hover .sp-motion--pendulum img { animation: sp-m-sway 1s ease-in-out infinite; transform-origin: top; }
@keyframes sp-m-wobble { 50% { transform: scale(1.12, .88); } }
@keyframes sp-m-heart { 10%, 30% { transform: scale(1.12); } 20%, 40% { transform: scale(1); } }
@keyframes sp-m-orbit { from { transform: rotate(0) translateX(4px) rotate(0); } to { transform: rotate(360deg) translateX(4px) rotate(-360deg); } }
@keyframes sp-m-zoom { 70% { transform: scale(1.6); } }
@keyframes sp-m-flip { 50% { transform: scaleX(-1); } }
@keyframes sp-m-fade { 50% { opacity: 0; } }
@keyframes sp-m-melt { 60% { transform: scale(1.2, .6); } }
@keyframes sp-m-peek { 30%, 70% { transform: translateY(26px); } }
@keyframes sp-m-flash { 50% { filter: brightness(2.2); } }

/* ---- Forge, third casting: more grounds, the effects, more motions ---- */
.sp-tabs { flex-wrap: wrap; }
.sp-swatch--sunset { background: radial-gradient(#ffd27a, #d9486b); } .sp-swatch--ocean { background: radial-gradient(#7fd6e8, #1b4f8a); }
.sp-swatch--forest { background: radial-gradient(#b9d99a, #2f6b3a); } .sp-swatch--lilac { background: radial-gradient(#efe3ff, #9b7fd1); }
.sp-swatch--ember { background: radial-gradient(#ffb35c, #5a1208); } .sp-swatch--slate { background: radial-gradient(#9aa4b1, #3a4350); }
.sp-swatch--cave { background: radial-gradient(#4a4038, #120e0b); } .sp-swatch--candy { background: radial-gradient(#fff1f7, #ff9fd0); }
.sp-swatch--checker { background: repeating-conic-gradient(#e3c27a 0 25%, #f4f3ef 0 50%) 0 0 / 12px 12px; }
.sp-swatch--stripes { background: repeating-linear-gradient(45deg, #f7b9cc 0 5px, #fde3ea 5px 10px); }
.sp-swatch--hearts { background: radial-gradient(circle at 30% 35%, #f58fb0 0 4px, transparent 5px), radial-gradient(circle at 70% 70%, #f58fb0 0 4px, transparent 5px), #fff0f4; }
.sp-swatch--grid { background: linear-gradient(transparent 60%, #ff4fd8 60% 62%, transparent 62% 75%, #ff4fd8 75% 77%, transparent 77%), radial-gradient(circle at 50% 62%, #ffd27a 0 12px, transparent 13px), #0e1430; }
.sp-fxprev { display: grid; place-items: center; width: 48px; height: 48px; }
.sp-fxprev img { width: 40px; height: 40px; }
.sp-fxprev--sepia img { filter: sepia(1); } .sp-fxprev--noir img { filter: grayscale(1) contrast(1.35); }
.sp-fxprev--invert img { filter: invert(1); } .sp-fxprev--posterize img { filter: contrast(1.8) saturate(1.6); }
.sp-fxprev--pixel img { image-rendering: pixelated; width: 12px; height: 12px; transform: scale(3.34); }
.sp-fxprev--deepfry img { filter: saturate(4) contrast(2.2) brightness(1.1) hue-rotate(-12deg); }
.sp-fxprev--thermal img { filter: invert(1) hue-rotate(180deg) saturate(5) contrast(1.4); }
.sp-fxprev--vapor img { filter: sepia(1) hue-rotate(250deg) saturate(3); }
.sp-fxprev--gilded img { filter: sepia(1) saturate(3) brightness(1.1); }
.sp-fxprev--ghostly img { filter: grayscale(1) brightness(1.6) sepia(.3) hue-rotate(170deg); opacity: .55; }
.sp-fxprev--sticker img { filter: drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff) drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.sp-fxprev--neon img { filter: drop-shadow(0 0 3px #3ff0ff) drop-shadow(0 0 1px #ff4fd8); }
.sp-fxprev--shadow img { filter: drop-shadow(2px 3px 2px rgba(0,0,0,.55)); }
.sp-fxprev--inked img { filter: drop-shadow(1px 0 #1c1714) drop-shadow(-1px 0 #1c1714) drop-shadow(0 1px #1c1714) drop-shadow(0 -1px #1c1714); }
.sp-fxprev--chroma img { filter: drop-shadow(2px 0 rgba(255,0,80,.7)) drop-shadow(-2px 0 rgba(0,200,255,.7)); }
.sp-fxprev--bloom img { filter: brightness(1.25) drop-shadow(0 0 4px rgba(255,240,200,.9)); }
.sp-fxprev--handheld img { filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(2.4) brightness(.8); }
.sp-fxprev--cursed img { filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(6) contrast(1.4) brightness(.8); }
.sp-fxprev--frozen img { filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(2.5) brightness(1.15); }
.sp-fxprev--toxic img { filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(6); }
.sp-fxprev--blueprint img { filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(4) brightness(.9); }
.sp-fxprev--silhouette img { filter: brightness(0); opacity: .9; }
.sp-fxprev--mirror img { -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.35) 50%); mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.35) 50%); }
.sp-fxprev--scanlines { background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.25) 2px 3px); }
.sp-forgeopt:hover .sp-motion--jelly img { animation: sp-m-wobble .5s ease-in-out infinite; transform-origin: bottom; }
.sp-forgeopt:hover .sp-motion--hop img, .sp-forgeopt:hover .sp-motion--ascend img { animation: sp-m-bob .6s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--nod img { animation: sp-m-nod .7s ease-in-out infinite; }
.sp-forgeopt:hover .sp-motion--shake img, .sp-forgeopt:hover .sp-motion--earthquake img { animation: sp-m-shake .25s linear infinite; }
.sp-forgeopt:hover .sp-motion--drift img, .sp-forgeopt:hover .sp-motion--roll img { animation: sp-m-drift 1.4s linear infinite; }
.sp-forgeopt:hover .sp-motion--squish img, .sp-forgeopt:hover .sp-motion--slam img { animation: sp-m-melt .7s ease-in-out infinite; transform-origin: bottom; }
.sp-forgeopt:hover .sp-motion--pop img { animation: sp-m-zoom .8s ease-out infinite; }
.sp-forgeopt:hover .sp-motion--dizzy img { animation: sp-m-orbit .8s linear infinite; }
.sp-forgeopt:hover .sp-motion--boil img { animation: sp-m-tremble .3s steps(2) infinite; }
.sp-forgeopt:hover .sp-motion--sink img { animation: sp-m-peek 1.4s ease-in infinite; }
.sp-forgeopt:hover .sp-motion--strobe img { animation: sp-m-strobe .3s steps(1) infinite; }
.sp-forgeopt:hover .sp-motion--disco img { animation: sp-m-rainbow .6s steps(6) infinite; }
@keyframes sp-m-nod { 50% { transform: translateY(3px) rotate(5deg); } }
@keyframes sp-m-shake { 25% { transform: translateX(-3px) rotate(-4deg); } 75% { transform: translateX(3px) rotate(4deg); } }
@keyframes sp-m-drift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes sp-m-strobe { 50% { filter: invert(1); } }
@media (prefers-reduced-motion: reduce) { .sp-forgeopt:hover [class*="sp-motion--"] img { animation: none !important; } }
.sp-forgeopt__sprite { position: absolute; inset: 0; background-image: url("/forge/thumbs.png"); background-repeat: no-repeat; }
.sp-relic figcaption, .sp-relic .sp-code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; text-align: center; }

/* ================= the later rites ================= */
.sp-rite [hidden] { display: none !important; }

/* the Judgment Wheel */
.sp-wheel__stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: center; }
.sp-wheel__stage canvas { width: 100%; height: 100%; display: block; will-change: transform; }
.sp-wheel__pointer { position: absolute; top: -6px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid var(--doom); z-index: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.sp-wheel .sp-actions { justify-self: center; justify-content: center; }

/* Tarot */
.sp-tarot__spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: 100%; max-width: 640px; justify-self: center; }
.sp-tcard { display: grid; gap: var(--space-2); justify-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; perspective: 900px; }
.sp-tcard:disabled { cursor: default; }
.sp-tcard__inner { position: relative; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sp-tcard.is-turned .sp-tcard__inner { transform: rotateY(180deg); }
.sp-tcard__back, .sp-tcard__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--brass); border-radius: var(--radius-chisel); display: grid; place-items: center; box-sizing: border-box; }
.sp-tcard__back { background: repeating-linear-gradient(45deg, var(--stone-recess) 0 6px, var(--stone) 6px 12px); box-shadow: inset 0 0 0 6px var(--stone), inset 0 0 0 7px var(--stone-rule); }
.sp-tcard__sigil { font-family: var(--font-carved); font-size: 30px; color: var(--brass); background: var(--stone); padding: 4px 12px; border: 1px solid var(--brass); }
.sp-tcard__face { transform: rotateY(180deg); background: radial-gradient(circle at 50% 30%, var(--stone), var(--stone-recess)); align-content: center; gap: var(--space-2); padding: var(--space-2); }
.sp-tcard__face img { width: 70%; height: auto; max-width: 120px; border-radius: var(--radius-seal); }
.sp-tcard__name { font-family: var(--font-carved); font-size: clamp(13px, 3.4vw, 18px); line-height: 1.2; text-align: center; }
.sp-tcard:not(:disabled):hover .sp-tcard__inner { transform: translateY(-4px); }
.sp-tarot__reading { display: grid; gap: var(--space-3); max-width: 640px; justify-self: center; width: 100%; }
.sp-tarot__line { display: grid; gap: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--brass); animation: sp-verdict .7s cubic-bezier(.2,.7,.2,1); }
.sp-tarot__line p { margin: 0; font-size: 18px; line-height: 28px; }
.sp-tarot__reading > .sp-verdict__words { margin: var(--space-2) 0 0; text-align: center; }
.sp-tarot .sp-actions { justify-self: center; justify-content: center; }

/* the Pilgrimage */
.sp-pilg__path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: 100%; position: relative; }
.sp-pilg__path li { display: grid; justify-items: center; gap: 4px; opacity: .35; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.sp-pilg__path li img { width: 100%; max-width: 44px; height: auto; border-radius: var(--radius-seal); }
.sp-pilg__path li .sp-label { font-family: var(--font-carved); font-size: 12px; letter-spacing: .04em; color: var(--brass); }
.sp-pilg__path li.is-done { opacity: 1; filter: none; }
.sp-pilg__path li.is-here { opacity: 1; filter: none; }
.sp-pilg__path li.is-here img { outline: 2px solid var(--brass); outline-offset: 2px; animation: sp-pilgpulse 2.4s ease-in-out infinite; }
@keyframes sp-pilgpulse { 50% { outline-offset: 5px; } }
.sp-pilg__station { display: grid; gap: var(--space-3); justify-items: center; text-align: center; width: 100%; max-width: 640px; justify-self: center; padding: var(--space-5) var(--space-4); border: 1px solid var(--stone-rule); box-sizing: border-box; }
.sp-pilg__station > * { margin: 0; }
.sp-pilg__station.is-new { animation: sp-verdict .8s cubic-bezier(.2,.7,.2,1); }
.sp-pilg__station.is-wrong { animation: sp-shake .45s; }
@keyframes sp-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.sp-pilg__form { width: 100%; text-align: left; }
.sp-pilg__hint { color: var(--brass); min-height: 16px; }
.sp-pilg__nine { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* the Sacred Name */
.sp-sname__cert { border: 3px double var(--brass); }

/* the Unblinking Contest */
.sp-unblink { justify-items: center; text-align: center; }
.sp-unblink__arena { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); width: 100%; max-width: 560px; }
.sp-unblink__him, .sp-unblink__you { position: relative; display: grid; gap: var(--space-2); justify-items: center; }
.sp-unblink__him img, .sp-unblink__you video { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--brass); border-radius: var(--radius-seal); background: var(--stone-recess); }
.sp-unblink__you video { transform: scaleX(-1); }
.sp-unblink:not(.has-camera) .sp-unblink__you video { background: radial-gradient(circle, var(--stone-recess), var(--stone-rule)); }
.sp-unblink__eye { position: absolute; top: 8px; right: 8px; width: 26px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--stone); transform: scaleY(calc(1 - var(--shut, 0) * .9)); transition: transform .08s; }
.sp-unblink:not(.has-camera) .sp-unblink__eye { display: none; }
.sp-unblink__time { font-family: var(--font-carved); font-size: clamp(54px, 14vw, 96px); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.sp-unblink .sp-actions { justify-content: center; }

/* Memory */
.sp-memory__bar { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; width: 100%; }
.sp-memory__bar .sp-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-memory__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: 620px; justify-self: center; }
@media (max-width: 520px) { .sp-memory__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-mtile { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.sp-mtile__back, .sp-mtile__face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--stone-rule); border-radius: var(--radius-chisel); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.sp-mtile__back { background: repeating-linear-gradient(45deg, var(--stone-recess) 0 5px, var(--stone) 5px 10px); }
.sp-mtile__back::after { content: "✦"; color: var(--brass); font-size: 20px; }
.sp-mtile__face { background: var(--stone); transform: rotateY(180deg); }
.sp-mtile__face img { width: 78%; height: auto; border-radius: var(--radius-seal); }
.sp-mtile.is-up .sp-mtile__back { transform: rotateY(-180deg); }
.sp-mtile.is-up .sp-mtile__face { transform: rotateY(0); }
.sp-mtile.is-found .sp-mtile__face { border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--brass); }
.sp-memory__stare { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; z-index: 30; }
.sp-memory__stare img { width: min(60vw, 280px); height: auto; border-radius: var(--radius-seal); box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
.sp-memory__stare.is-staring { animation: sp-stare 1.1s ease-out; }
@keyframes sp-stare { 0% { opacity: 0; transform: scale(1.4); } 18% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }

/* Sightings */
.sp-sight__map { width: 100%; height: min(70vh, 520px); border: 1px solid var(--stone-rule); background: var(--stone-recess); z-index: 0; }
.sp-sight__pin { background: none; border: 0; }
.sp-sight__pin img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--brass); background: var(--stone); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.sp-sight__form { display: grid; gap: var(--space-3); width: 100%; max-width: 560px; padding: var(--space-4); border: 1px solid var(--brass); box-sizing: border-box; }
.sp-sight__list { width: 100%; display: grid; gap: var(--space-3); }
.sp-sight__list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sp-sight__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--stone-rule); }
.sp-sight__list li p { margin: 0; }
.sp-sight__list li img { border-radius: 50%; }
.sp-sight__acts { display: flex; gap: var(--space-2); }
@media (max-width: 560px) { .sp-sight__list li { grid-template-columns: 40px minmax(0, 1fr); } .sp-sight__acts { grid-column: 2; } }
.leaflet-container { font: inherit; }

/* the Collection */
.sp-coll__rank { display: grid; gap: var(--space-2); width: 100%; max-width: 640px; }
.sp-coll__rank > * { margin: 0; }
.sp-coll__meter { height: 8px; background: var(--stone-recess); border: 1px solid var(--stone-rule); }
.sp-coll__meter i { display: block; height: 100%; background: var(--brass); transition: width 1s cubic-bezier(.2,.7,.2,1); }
.sp-coll__ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-coll__ranks li { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--stone-rule); opacity: .5; }
.sp-coll__ranks li.is-reached { opacity: 1; }
.sp-coll__ranks li.is-current { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.sp-coll__ranks li span:last-child { font-family: var(--font-carved); }
.sp-coll__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--space-2); width: 100%; }
.sp-coll__item { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--stone-rule); background: var(--stone); }
.sp-coll__item img { width: 80%; height: auto; border-radius: var(--radius-seal); }
.sp-coll__item.is-locked img { filter: brightness(0); opacity: .18; }
.sp-coll__item:hover { border-color: var(--brass); }

/* Sticker Sheets */
.sp-stick__opts { display: grid; gap: var(--space-3); width: 100%; }
.sp-stick__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sp-stick__row > .sp-label { min-width: 64px; }
.sp-stick__row input[type="checkbox"] { margin: 0 6px 0 0; }
.sp-stick__pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; width: 100%; max-height: 260px; overflow-y: auto; padding: var(--space-2); border: 1px solid var(--stone-rule); box-sizing: border-box; }
.sp-stick__opt { position: relative; display: grid; place-items: center; cursor: pointer; border: 1px solid transparent; }
.sp-stick__opt input { position: absolute; opacity: 0; }
.sp-stick__opt img { width: 40px; height: 40px; opacity: .45; }
.sp-stick__opt:has(input:checked) { border-color: var(--brass); }
.sp-stick__opt:has(input:checked) img { opacity: 1; }
.sp-stick__opt:has(input:focus-visible) { outline: 2px solid var(--brass); }
.sp-stick__preview { width: 100%; overflow: hidden; }
.sp-sheet { background: #fff; color: #1c1b19; box-sizing: border-box; padding: 10mm; display: grid; gap: 4mm; align-content: start; justify-content: center; transform-origin: top left; box-shadow: 0 2px 14px rgba(0,0,0,.18); }
.sp-sticker { margin: 0; display: grid; justify-items: center; gap: 1mm; width: var(--st); }
.sp-sticker__cut { width: var(--st); height: var(--st); display: grid; place-items: center; box-sizing: border-box; overflow: hidden; }
.sp-sticker__cut img { width: 100%; height: 100%; object-fit: cover; }
.sp-sheet--circle .sp-sticker__cut { border-radius: 50%; border: .3mm dashed #bbb; }
.sp-sheet--square .sp-sticker__cut { border-radius: 2mm; border: .3mm dashed #bbb; }
.sp-sheet--die .sp-sticker__cut img { object-fit: contain; width: 88%; height: 88%; filter: drop-shadow(0 0 .6mm #fff) drop-shadow(0 0 .6mm #fff) drop-shadow(0 0 .25mm #999); }
.sp-sticker figcaption { font-family: var(--font-ledger); font-size: 2.2mm; line-height: 1; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media print {
  body.is-printing-sheet * { visibility: hidden !important; }
  body.is-printing-sheet .sp-sheet, body.is-printing-sheet .sp-sheet * { visibility: visible !important; }
  body.is-printing-sheet .sp-sheet { position: fixed; left: 0; top: 0; transform: none !important; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.is-printing-sheet { background: #fff !important; }
}

/* the Tome */
.sp-tome { display: grid; gap: var(--space-4); }
.sp-tome__hour { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); border: 1px solid var(--brass); background: radial-gradient(circle at 0 0, var(--stone-recess), var(--stone) 70%); }
.sp-tome__hour p { margin: 0; font-size: 20px; line-height: 31px; font-style: italic; }
.sp-tome__tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .sp-tome__tools { grid-template-columns: 1fr; } }
.sp-tome__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 340px; overflow-y: auto; border: 1px solid var(--stone-rule); background: var(--stone-rule); }
.sp-tome__results li { background: var(--stone); }
.sp-tome__results li.sp-label { padding: var(--space-3); }
.sp-tome__results button { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--space-3); background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.sp-tome__results button:hover { background: var(--stone-recess); }
.sp-tome__snip { font-size: 16px; line-height: 24px; }
.sp-tome__results mark { background: none; color: var(--brass); font-weight: 600; }
.sp-tome__book { position: relative; display: grid; grid-template-columns: 1fr; background: var(--stone); border: 1px solid var(--stone-rule); box-shadow: 0 1px 0 var(--stone-rule), 0 3px 0 -1px var(--stone), 0 4px 0 -1px var(--stone-rule), 0 12px 30px rgba(0,0,0,.12); cursor: pointer; perspective: 2000px; user-select: none; -webkit-user-select: none; }
.sp-tome__book.is-spread { grid-template-columns: 1fr 1fr; }
.sp-tome__book:not(.is-spread) .sp-tome__page--r { display: none; }
.sp-tome__page { position: relative; height: min(72vh, 620px); padding: var(--space-5) var(--space-5) var(--space-6); box-sizing: border-box; overflow: hidden; font-size: 18px; line-height: 29px; }
.sp-tome__page p { margin: 0 0 var(--space-3); text-indent: 1.4em; }
.sp-tome__page p.sp-tome__cont { text-indent: 0; }
.sp-tome__page p.is-found { background: color-mix(in srgb, var(--brass) 18%, transparent); transition: background .4s; }
.sp-tome__head { display: grid; gap: var(--space-2); justify-items: center; text-align: center; margin: var(--space-4) 0 var(--space-5); }
.sp-tome__head + p { text-indent: 0; }
.sp-tome__head + p::first-letter { font-family: var(--font-carved); font-size: 3.2em; float: left; line-height: .9; margin: 4px 8px 0 0; color: var(--brass); }
.sp-tome__book.is-spread .sp-tome__page--l { border-right: 1px solid var(--stone-rule); box-shadow: inset -18px 0 24px -20px rgba(0,0,0,.25); }
.sp-tome__book.is-spread .sp-tome__page--r { box-shadow: inset 18px 0 24px -20px rgba(0,0,0,.25); }
.sp-tome__folio { position: absolute; bottom: var(--space-3); left: 0; right: 0; text-align: center; font-family: var(--font-ledger); font-size: 11px; letter-spacing: .14em; color: var(--ink-muted); }
.sp-tome__blank { height: 100%; display: grid; place-items: center; color: var(--stone-rule); font-size: 28px; }
.sp-tome__measure { position: absolute; visibility: hidden; left: -9999px; top: 0; }
.sp-tome__leaf { position: absolute; top: 0; bottom: 0; width: 50%; right: 0; pointer-events: none; transform-origin: left center; background: linear-gradient(90deg, var(--stone-recess), var(--stone)); opacity: 0; }
.sp-tome__book:not(.is-spread) .sp-tome__leaf { width: 100%; }
.sp-tome__leaf.is-turning-on { animation: sp-leaf-on .6s cubic-bezier(.4,.1,.3,1); }
.sp-tome__leaf.is-turning-back { animation: sp-leaf-back .6s cubic-bezier(.4,.1,.3,1); }
@keyframes sp-leaf-on { 0% { opacity: .95; transform: rotateY(0); } 100% { opacity: 0; transform: rotateY(-178deg); } }
@keyframes sp-leaf-back { 0% { opacity: 0; transform: rotateY(-178deg); } 100% { opacity: .0; transform: rotateY(0); } 50% { opacity: .9; } }
.sp-tome__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.sp-tome__nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 560px) { .sp-tome__page { padding: var(--space-4) var(--space-4) var(--space-6); font-size: 17px; line-height: 27px; } }

/* ================= seasonal vestments ================= */
.sp-holyday { display: grid; gap: 2px; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--brass); background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 14%, var(--stone)), var(--stone)); color: var(--ink); text-decoration: none; }
.sp-holyday .sp-label { color: var(--brass); }
.sp-holyday__name { font-family: var(--font-carved); font-size: 22px; line-height: 28px; }
.sp-holyday__do { color: var(--ink-muted); }
:root[data-season="holy"] .sp-header { box-shadow: inset 0 -2px 0 var(--brass); }
:root[data-season="hallow"] { --brass: #b4561c; --doom: #7a1f14; }
@media (prefers-color-scheme: dark) { :root[data-season="hallow"]:not([data-theme="light"]) { --brass: #f08a3c; --stone: #12100e; --stone-recess: #1d1814; } }
:root[data-season="hallow"][data-theme="dark"] { --brass: #f08a3c; --stone: #12100e; --stone-recess: #1d1814; }
:root[data-season="hallow"] body { background-image: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 55%); background-attachment: fixed; }
.sp-bats { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.sp-bats i { position: absolute; left: -40px; font-style: normal; color: var(--brass); opacity: .5; font-size: 18px; animation: sp-bat linear infinite; }
@keyframes sp-bat { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, -4vh); } 50% { transform: translate(56vw, 3vh); } 75% { transform: translate(84vw, -3vh); } 100% { transform: translate(112vw, 0); } }
:root[data-season="winter"] { --brass: #4d6f8a; }
@media (prefers-color-scheme: dark) { :root[data-season="winter"]:not([data-theme="light"]) { --brass: #9cc3de; } }
:root[data-season="winter"][data-theme="dark"] { --brass: #9cc3de; }
.sp-snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.sp-snow i { position: absolute; top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.25); opacity: .85; animation: sp-snow linear infinite; }
@keyframes sp-snow { to { transform: translate(var(--drift), 105vh); } }

/* ================= consent ================= */
.sp-consent { position: fixed; left: 50%; bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); box-sizing: border-box; z-index: 40; display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--stone); color: var(--ink); border: 1px solid var(--brass); box-shadow: 0 10px 40px rgba(0,0,0,.22); }
.sp-consent p { margin: 0; font-size: 16px; line-height: 25px; }
.sp-consent .sp-label { display: inline; color: var(--brass); }
.sp-consent__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 420px) { .sp-consent__acts { grid-template-columns: 1fr; } }
.sp-footer__btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ledger); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; color: var(--ink-muted); }
.sp-footer__btn:hover { color: var(--ink); text-decoration: underline; }
.sp-offer__note { margin-top: var(--space-3); line-height: 20px; }
.sp-gate { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4); border: 1px dashed var(--brass); width: 100%; box-sizing: border-box; }
.sp-gate p { margin: 0; }
.sp-privacy h2 { margin-top: var(--space-4); }
.sp-privacy code { font-family: var(--font-ledger); font-size: .85em; }
.sp-privacy__table { overflow-x: auto; }
.sp-privacy table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 22px; }
.sp-privacy th, .sp-privacy td { text-align: left; vertical-align: top; padding: var(--space-2); border-bottom: 1px solid var(--stone-rule); }
.sp-privacy th { font-family: var(--font-ledger); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
.sp-inlinebtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brass); text-decoration: underline; cursor: pointer; }

/* the Unblinking Eye: a clipped copy of each eye whose picture shifts toward the pointer */
.sp-gaze__eye { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position: var(--look-x, 0) var(--look-y, 0); transform: translate(var(--lean-x, 0), var(--lean-y, 0)) scale(1.04); transition: transform .6s ease-out, background-position .25s ease-out; pointer-events: none; }
.sp-gaze__eye--left { -webkit-mask-image: radial-gradient(6.4% 5.6% at 37.7% 58.4%, #000 72%, transparent 100%); mask-image: radial-gradient(6.4% 5.6% at 37.7% 58.4%, #000 72%, transparent 100%); }
.sp-gaze__eye--right { -webkit-mask-image: radial-gradient(6.4% 5.6% at 65.6% 58.4%, #000 72%, transparent 100%); mask-image: radial-gradient(6.4% 5.6% at 65.6% 58.4%, #000 72%, transparent 100%); }

/* ================= the third casting ================= */
/* the Golden One */
.sp-golden { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: var(--space-3); text-align: center; padding: var(--space-4); background: radial-gradient(circle at 50% 42%, rgba(240,196,70,.55), rgba(20,18,10,.94) 62%); color: #fff6dc; animation: sp-golden-in 1.4s cubic-bezier(.2,.7,.2,1); overflow: hidden; }
.sp-golden.is-leaving { animation: sp-golden-out .6s ease-in forwards; }
.sp-golden img { width: min(56vw, 300px); height: auto; border-radius: 50%; box-shadow: 0 0 80px 20px rgba(255,214,102,.65); animation: sp-golden-float 4s ease-in-out infinite; position: relative; }
.sp-golden__rays { position: absolute; width: 180vmax; height: 180vmax; left: 50%; top: 42%; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255,220,120,.18) 0 6deg, transparent 6deg 18deg); animation: sp-rays 30s linear infinite; }
.sp-golden__words { position: relative; font-family: var(--font-carved); font-size: clamp(28px, 6vw, 48px); letter-spacing: .08em; margin: 0; color: #ffe08a; }
.sp-golden__sub { position: relative; margin: 0; font-style: italic; }
.sp-golden .sp-button { position: relative; background: #ffe08a; color: #1c1b19; border-color: #ffe08a; }
@keyframes sp-golden-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-golden-out { to { opacity: 0; } }
@keyframes sp-golden-float { 50% { transform: translateY(-12px); } }
@keyframes sp-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-golden, .sp-golden img, .sp-golden__rays { animation: none; } }

/* Speeb Speaks */
.sp-speaks { border-top: 1px solid var(--stone-rule); padding-top: var(--space-5); }
.sp-speaks > p { margin: 0; }

/* the Ninefold Trial */
.sp-trial { justify-items: center; text-align: center; }
.sp-trial__locked, .sp-trial__open { display: grid; gap: var(--space-4); justify-items: center; width: 100%; max-width: 640px; }
.sp-trial__locked > *, .sp-trial__open > * { margin: 0; }
.sp-trial__open.is-new { animation: sp-verdict .6s cubic-bezier(.2,.7,.2,1); }
.sp-trial__nine { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sp-trial__nine img.is-locked { filter: brightness(0); opacity: .2; }
.sp-trial__open .sp-quiz__bar { width: 100%; }
.sp-trial__decree { font-family: var(--font-carved); font-size: clamp(22px, 4.6vw, 30px); line-height: 1.3; }
.sp-trial__time { width: 100%; height: 3px; background: var(--stone-recess); }
.sp-trial__time i { display: block; height: 100%; background: var(--doom); }
.sp-trial__choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
@media (max-width: 520px) { .sp-trial__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-trial__choice { display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-3); background: var(--stone); border: 1px solid var(--stone-rule); cursor: pointer; color: inherit; }
.sp-trial__choice:hover { border-color: var(--brass); }
.sp-trial__choice img { width: 72px; height: 72px; border-radius: var(--radius-seal); }
.sp-trial__choice .sp-label { font-size: 10px; letter-spacing: .06em; word-break: break-all; }

/* the Paw-glyph Cipher */
.sp-cipher__write, .sp-cipher__recv { display: grid; gap: var(--space-4); width: 100%; }
.sp-cipher__glyphs { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); min-height: 48px; padding: var(--space-4); border: 1px solid var(--stone-rule); background: var(--stone-recess); color: var(--ink); }
.sp-glyph-word { display: inline-flex; gap: 4px; }
.sp-glyph-paw { display: block; }
.sp-cipher__keybox summary { cursor: pointer; }
.sp-cipher__key { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.sp-cipher__k { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 0; border: 1px solid var(--stone-rule); }

/* the Screensaver */
.sp-saver__opt input { margin-right: 6px; }
.sp-saver__stage { position: fixed; inset: 0; z-index: 70; background: #0c0c0b; overflow: hidden; cursor: none; }
.sp-saver__field { position: absolute; inset: 0; }
.sp-saver__form { position: absolute; border-radius: 50%; animation: sp-saver-drift linear infinite alternate; }
@keyframes sp-saver-drift { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(var(--dx), var(--dy)) rotate(6deg); } }
.sp-saver__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-4); text-align: center; padding: var(--space-5); }
.sp-saver__face { width: min(40vmin, 340px); height: auto; border-radius: 50%; opacity: .9; box-shadow: 0 0 120px 10px rgba(209,159,114,.18); animation: sp-saver-breathe 12s ease-in-out infinite; }
@keyframes sp-saver-breathe { 50% { transform: scale(1.03); opacity: .75; } }
.sp-saver__verse { max-width: 46ch; margin: 0; color: #ecebe5; font-size: clamp(18px, 2.6vw, 26px); line-height: 1.5; font-style: italic; opacity: 0; transition: opacity 1.5s; }
.sp-saver__verse.is-shown { opacity: .85; }
.sp-saver__clock { margin: 0; color: #d19f72; font-family: var(--font-ledger); letter-spacing: .3em; font-size: 14px; }
body.is-saving { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sp-saver__form, .sp-saver__face { animation: none; } }

/* the Collection: devotion and badges */
.sp-coll__streak { display: grid; gap: var(--space-1); }
.sp-coll__streak p { margin: 0; }
.sp-coll__days { font-family: var(--font-carved); font-size: 56px; line-height: 1; color: var(--brass); }
.sp-coll__note { margin: 0; color: var(--ink-muted); max-width: 60ch; }
.sp-coll__devotion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
@media (max-width: 640px) { .sp-coll__devotion { grid-template-columns: 1fr; } }
.sp-coll__dev { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--stone-rule); }
.sp-coll__dev img { width: 96px; height: 96px; }
.sp-coll__dev.is-locked img { filter: brightness(0); opacity: .2; }
.sp-coll__dev figcaption { display: grid; gap: 4px; justify-items: start; }
.sp-coll__dev strong { font-family: var(--font-carved); font-weight: 400; font-size: 20px; }
.sp-coll__badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); width: 100%; }
.sp-badge { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--stone-rule); opacity: .5; }
.sp-badge.is-earned { opacity: 1; border-color: var(--brass); }
.sp-badge__seal { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--stone-rule); color: var(--ink-muted); }
.sp-badge.is-earned .sp-badge__seal { background: var(--brass); color: var(--stone); border-color: var(--brass); }
.sp-badge strong { font-family: var(--font-carved); font-weight: 400; }
.sp-badge span:last-child { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- 中文 ---------- */
html.zh-wait body { opacity: 0; }
.sp-langbtn { font-size: 13px; letter-spacing: .04em; }
html.zh body { word-break: normal; overflow-wrap: anywhere; line-break: strict; }
html.zh .sp-label, html.zh .sp-button, html.zh .sp-chip, html.zh .sp-nav a { letter-spacing: .06em; }
html.zh .sp-scripture p, html.zh .sp-prose p { line-height: 1.9; }