:root {
  color-scheme: dark;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  color: #eee4d0;
  background: #101310;
  --gold: #c0aa79;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { min-width: 280px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #efd095; outline-offset: 5px; }
h1:focus { outline: none; }
[hidden] { display: none !important; }
.chamber {
  position: fixed; inset: 0; z-index: -2;
  background: #101310 url("./assets/chamber-desktop-1672.webp") center / cover no-repeat;
}
.chamber::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 43%, #08100a12 0%, #070b0866 80%), linear-gradient(180deg, #070b0938, transparent 35%, #070b0947 70%, #070b09c4);
}
.brand-bar {
  position: absolute; inset: calc(25px + var(--safe-top)) 40px auto; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  text-shadow: 0 2px 16px #060906bf;
}
.wordmark { font-size: 17px; letter-spacing: .18em; }
.edition { font-size: 10px; color: #cabd9e; letter-spacing: .21em; }
.ritual-stage {
  min-height: 100svh; padding: calc(95px + var(--safe-top)) 30px calc(35px + var(--safe-bottom));
  display: flex; flex-direction: column; justify-content: center;
  animation: arrival .5s ease both;
}
.ritual-center { width: min(900px, 100%); margin: auto; text-align: center; }
.eyebrow { margin: 0 0 22px; color: #d4c098; font-size: 10px; letter-spacing: .27em; text-transform: uppercase; }
h1 { margin: 0; font-weight: 400; font-size: clamp(25px, 3.4vw, 44px); line-height: 1.25; text-shadow: 0 3px 28px #061009; }
.topic-grid { margin-top: 43px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 22px; }
.topic-grid button {
  position: relative; min-height: 96px; padding: 16px 8px 19px; border: 1px solid #a18b5963;
  border-radius: 3px; background: linear-gradient(135deg, #18302b80, #091713a8);
  box-shadow: inset 0 0 0 4px #10241e50, 0 7px 18px #040a063d;
  text-shadow: 0 2px 10px #060e09; font-size: 16px;
  transition: transform .23s ease, border-color .23s ease, background-color .23s ease, box-shadow .23s ease;
}
.topic-grid button::after { content: ""; position: absolute; inset: 5px; border: 1px solid #bba36d29; pointer-events: none; }
.topic-number { display: block; margin-bottom: 9px; font-size: 10px; color: #bea677; letter-spacing: .16em; }
.topic-grid button:hover, .topic-grid button:focus-visible { transform: translateY(-3px); border-color: #d5ba82; background-color: #2d3e30; box-shadow: inset 0 0 0 4px #10241e50, 0 0 22px #b99a5b2d; }
.topic-grid button:active, .number-grid button:active { transform: translateY(1px) scale(.98); }
.ritual-caption { margin: 26px 0 0; color: #c2b697; font-size: 13px; line-height: 1.6; letter-spacing: .035em; }
.chamber-notes { width: min(1240px, 100%); margin: 45px auto 0; display: flex; justify-content: space-between; gap: 32px; }
.chamber-notes > div { max-width: 285px; }
.chamber-notes > div:last-child { text-align: right; }
.chamber-notes p { margin: 0; color: #b7aa8d; font-size: 12px; line-height: 1.7; }
.chamber-notes .note-title { margin-bottom: 8px; font-size: 9px; color: #cdb68a; letter-spacing: .2em; }
.back-button { border: 0; padding: 10px 0; background: transparent; color: #ded0b0; font-size: 13px; letter-spacing: .025em; }
#numbers-stage > .back-button { position: absolute; top: calc(72px + var(--safe-top)); left: 40px; }
.number-center { max-width: 700px; padding-top: 22px; }
.number-intro { margin: 16px 0 30px; color: #c6b698; font-size: 15px; }
.number-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.number-grid button {
  min-height: 68px; padding: 12px 4px; background: linear-gradient(145deg, #18332b9e, #0b1915b3);
  border: 1px solid #ac925c7a; border-radius: 2px; font-size: 22px; color: #e9d8b4;
  box-shadow: inset 0 0 0 4px #0c1d185a; transition: transform .2s ease, border-color .2s ease;
}
.number-grid button:hover, .number-grid button:focus-visible { transform: translateY(-2px); border-color: #efd09a; }
.preview-note { margin: 12px 0 0; color: #aaa28e; font-size: 11px; line-height: 1.5; letter-spacing: .02em; }
.casket-stage { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.casket-frame { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; display: block; }
.casket-frame.parked { position: fixed; left: -10000px; top: 0; width: 100vw; height: 100dvh; visibility: hidden; }
.full-reading-stage { position: fixed; inset: 0; z-index: 12; width: 100%; height: 100dvh; background: #101310; }
.full-reading-frame { display: block; width: 100%; height: 100%; border: 0; }
body[data-stage="reading"] { overflow: hidden; }
body[data-stage="reading"] > main > .brand-bar { display: none; }
.casket-navigation { position: absolute; z-index: 3; top: calc(18px + var(--safe-top)); left: 25px; right: 25px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; pointer-events: none; }
.casket-navigation button { pointer-events: auto; text-shadow: 0 2px 12px #050c07; }
.continuation-wordmark { display: none; }
body[data-stage="casket"][data-casket-scene="result"] .casket-navigation { display: none; }
body[data-stage="casket"][data-casket-scene="continuation"] .casket-navigation { align-items: center; top: calc(25px + var(--safe-top)); left: 3.25vw; right: 3.25vw; }
body[data-casket-scene="continuation"] .continuation-wordmark { display: inline; }
body[data-casket-scene="continuation"] .casket-navigation > .back-button,
body[data-casket-scene="continuation"] .casket-reading-meta > p,
body[data-casket-scene="continuation"] .casket-navigation .new-reading-button { display: none; }
@media (max-width: 600px) {
  body[data-stage="casket"][data-casket-scene="continuation"] .casket-navigation { top: calc(19px + var(--safe-top)); left: 19px; right: 19px; }
  .continuation-wordmark { font-size: 11px; letter-spacing: .15em; }
}
body[data-card-dialog="true"] .casket-navigation { visibility: hidden; }
body[data-card-dialog="true"] .casket-navigation button { pointer-events: none; }
.casket-navigation p { margin: 7px 0 0; text-align: right; color: #e7dabc; font-size: 12px; line-height: 1.6; text-shadow: 0 2px 12px #050c07; }
.navigation-dot { color: var(--gold); }
.casket-status { position: absolute; z-index: 4; top: calc(91px + var(--safe-top)); left: 20px; right: 20px; margin: 0; text-align: center; color: #d9c8a3; font-size: 13px; pointer-events: none; }
body[data-stage="casket"] > main > .brand-bar { display: none; }
.no-script { position: fixed; left: 20px; right: 20px; bottom: 16px; padding: 16px; background: #07150ee8; text-align: center; }
@keyframes arrival { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 651px) and (max-width: 1100px) and (orientation: portrait) {
  .chamber { background-image: url("./assets/chamber-tablet-portrait-768.webp"); }
}
@media (min-width: 651px) and (max-width: 1100px) and (orientation: landscape) {
  .chamber { background-image: url("./assets/chamber-tablet-landscape-1024.webp"); }
}
@media (max-width: 650px) {
  .chamber { background-image: url("./assets/chamber-mobile-720.webp"); }
  .brand-bar { inset: calc(22px + var(--safe-top)) 20px auto; }
  .wordmark { font-size: 12px; letter-spacing: .17em; }
  .edition { font-size: 8px; letter-spacing: .1em; }
  .ritual-stage { padding: calc(94px + var(--safe-top)) 22px calc(25px + var(--safe-bottom)); }
  h1 { font-size: clamp(22px, 6.1vw, 34px); }
  .eyebrow { margin-bottom: 20px; font-size: 9px; }
  .topic-grid { margin-top: 30px; grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .topic-grid button { min-height: 77px; padding: 10px 7px 13px; font-size: 14px; }
  .topic-number { margin-bottom: 7px; font-size: 9px; }
  .ritual-caption { font-size: 12px; margin-top: 22px; }
  .chamber-notes { margin-top: 35px; gap: 20px; }
  .chamber-notes p { font-size: 10px; }
  .chamber-notes .note-title { font-size: 8px; letter-spacing: .13em; }
  #numbers-stage > .back-button { left: 22px; top: calc(58px + var(--safe-top)); }
  .number-center { padding-top: 15px; }
  .number-grid { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .number-grid button { min-height: 53px; font-size: 18px; }
  .number-intro { font-size: 14px; }
  .casket-navigation { left: 18px; right: 18px; top: calc(12px + var(--safe-top)); }
  .casket-navigation .back-button { font-size: 11px; }
  .casket-navigation p { font-size: 10px; }
  .casket-navigation .preview-note { font-size: 9px; }
}
@media (max-height: 590px) and (orientation: landscape) {
  .ritual-stage { padding-top: calc(79px + var(--safe-top)); }
  .eyebrow { margin-bottom: 10px; }
  .topic-grid { margin-top: 20px; gap: 12px; }
  .topic-grid button { min-height: 66px; padding-top: 9px; padding-bottom: 10px; }
  .topic-number { margin-bottom: 6px; }
  .ritual-caption { margin-top: 15px; }
  .chamber-notes { margin-top: 22px; }
  .number-grid button { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .ritual-stage { animation: none; }
  .topic-grid button, .number-grid button { transition: none; }
  .topic-grid button:hover, .topic-grid button:focus-visible, .number-grid button:hover, .number-grid button:focus-visible { transform: none; }
}
@media (max-width:380px){.number-grid{grid-template-columns:repeat(5,1fr);}}