@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--serif:"Crimson Pro",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--ease:cubic-bezier(.22,.8,.2,1)}
[data-appearance="dark"]{color-scheme:dark;--bg:#000;--ink:#efe8da;--ink-2:#c6bfb2;--muted:#9ea49e;--rule:rgba(239,232,218,.16);--accent:#8dc7aa;--copper:#dca690;--lamp:#f0d9a8;--card:rgba(10,12,11,.72);--mark:rgba(214,160,130,.34);--btn:#f0d9a8;--btn-ink:#1a140a}
[data-appearance="light"]{color-scheme:light;--bg:#f2ece0;--ink:#1b1814;--ink-2:#40392f;--muted:#655e54;--rule:rgba(27,24,20,.16);--accent:#245a47;--copper:#8c4e39;--lamp:#8a5a1f;--card:rgba(251,248,241,.82);--mark:rgba(196,128,98,.26);--btn:#1f3a30;--btn-ink:#f6f1e6}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
canvas.scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.layer{position:fixed;inset:0;pointer-events:none}
.layer>*{pointer-events:auto}
.study-ribbon{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.4rem 1rem;background:#d9d6cf;color:#1b1814;font:500 11px/1.4 var(--sans)}
.topbar{position:fixed;top:1.9rem;left:0;right:0;z-index:40;display:flex;align-items:center;gap:1rem;padding:.8rem clamp(1rem,3vw,2.4rem);pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{font:400 1.2rem var(--serif);color:var(--ink);text-decoration:none;margin-right:auto;display:flex;gap:.5rem;align-items:center}
.brand img{width:24px;height:24px;border-radius:5px}
.chip{font:600 .8rem/1 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:.55rem .85rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.q{font:400 clamp(2rem,4.4vw,4rem)/1.04 var(--serif);letter-spacing:-.014em;margin:0;text-wrap:balance}
.overline{font:italic 400 1.05rem/1.3 var(--serif);color:var(--accent);margin:0 0 .8rem}
.promise{font:400 clamp(1rem,1.25vw,1.12rem)/1.55 var(--sans);color:var(--ink-2);max-width:32rem;margin:1rem 0 0}
.honesty{font-size:.78rem;color:var(--muted);max-width:30rem;margin:.9rem 0 0;padding-left:.7rem;border-left:1px solid var(--copper)}
.passage{position:absolute;left:0;top:0;width:min(22rem,78vw);transform-origin:0 0;will-change:transform;font:400 1.12rem/1.45 var(--serif);color:var(--ink);transition:opacity .45s var(--ease)}
.passage cite{display:block;margin-top:.45rem;font:400 .74rem/1.3 var(--sans);font-style:normal;color:var(--muted)}
.passage cite b{font-weight:600;color:var(--ink-2)}
mark{background:linear-gradient(transparent 58%,var(--mark) 58%);color:inherit;padding:0 .04em}
.steps{position:fixed;left:50%;bottom:clamp(.8rem,3vh,1.6rem);transform:translateX(-50%);z-index:40;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 2rem)}
.btn{font:600 .92rem/1 var(--sans);padding:.9rem 1.3rem;border-radius:999px;background:var(--btn);color:var(--btn-ink);border:0;cursor:pointer}
.btn[disabled]{opacity:.45;cursor:default}
.readings{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.reading{font:400 1.05rem/1.25 var(--serif);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.65rem .9rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left;max-width:17rem}
.reading small{display:block;font:italic 400 .85rem var(--serif);color:var(--muted)}
.reading[aria-pressed="true"]{border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
.caption{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(clamp(.8rem,3vh,1.6rem) + 3.6rem);z-index:39;max-width:min(40rem,calc(100% - 2rem));text-align:center;font:italic 400 clamp(1.1rem,1.7vw,1.4rem)/1.35 var(--serif);color:var(--ink);text-wrap:balance;transition:opacity .4s var(--ease)}
.caption small{display:block;font:400 .8rem/1.4 var(--sans);font-style:normal;color:var(--muted);margin-top:.35rem}
/* Text view is a native modal <dialog>: focus stays inside, the page behind is inert, Escape closes it */
/* r6.6: the dialog itself never scrolls (clip; hidden is the fallback), so no reveal of the text can move the return bar
   out of view; only .tv-body scrolls */
dialog.textview{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;z-index:60;overflow:hidden;overflow:clip;background:var(--bg);color:var(--ink);padding:0}
dialog.textview[open]{display:flex;flex-direction:column}
/* the way back stays in view: a bar above the scrolling text (never over it), aligned with the text; the same control ends the text */
.textview .tv-bar{flex:0 0 auto;display:flex;align-items:center;padding:.6rem max(clamp(1rem,6vw,5rem),calc((100% - 40rem) / 2));border-bottom:1px solid var(--rule);background:var(--bg)}
.textview .tv-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;contain:paint;padding:2.2rem clamp(1rem,6vw,5rem) 4rem} /* r6.6: its content no longer extends the dialog's scroll range */
.textview .tv-back{min-height:44px;min-width:44px;font-size:.9rem;line-height:1.2;padding:.6rem 1rem;white-space:normal;text-align:left}
.textview .tv-back::before{content:"";display:inline-block;width:.42em;height:.42em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 .55em .08em .1em}
dialog.textview::backdrop{background:var(--bg)}
.textview h3{font:400 1.4rem/1.2 var(--serif);margin:2.2rem 0 .4rem}.textview h4{font:italic 400 1.2rem/1.3 var(--serif);margin:1.6rem 0 .3rem}.textview .tv-role{font:600 .72rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.8rem 0 0}
.textview article{max-width:40rem;margin:0 auto}
.textview blockquote{font:400 1.2rem/1.5 var(--serif);margin:1.2rem 0}
.textview cite{display:block;font:400 .8rem var(--sans);font-style:normal;color:var(--muted);margin-top:.2rem}
.fallback{position:fixed;inset:auto 1rem 5.5rem;z-index:45;margin:0 auto;max-width:34rem;padding:.8rem 1rem;border-radius:12px;background:var(--card);border:1px solid var(--rule);font-size:.9rem;display:none}
.fallback.show{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:720px){.study-ribbon{font-size:10px}.q{font-size:1.75rem}.passage{font-size:1rem;width:min(18rem,84vw)}.reading{font-size:.98rem;max-width:100%}.caption{font-size:1.05rem;bottom:calc(clamp(.8rem,3vh,1.6rem) + 7.2rem)}}
/* phones: the honesty ribbon wraps; keep the brand and controls visible beneath it */
@media (max-width:720px){.study-ribbon{font-size:9px;line-height:1.3;padding:.3rem .7rem;gap:.1rem .6rem}.topbar{top:3.1rem;padding:.35rem 1rem}.brand{font-size:1rem}.chip{padding:.45rem .7rem}}