:root { color-scheme: dark; --bg:#101715; --ink:#ecebda; --muted:#a8b5aa; --accent:#c2d19e; --line:#ffffff24; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; }
.sources-page { max-width:780px; margin:6vh auto; padding:24px; line-height:1.8; }
button,select,input { font:inherit; }
button { color:var(--ink); border:1px solid var(--line); background:transparent; border-radius:999px; padding:.7rem 1.1rem; cursor:pointer; min-height:44px; transition:background .15s; }
button:hover { background:#ffffff12; }
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button:disabled { opacity:.35; cursor:wait; }
button.primary { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:650; }
button.primary:hover { background:#d3e2af; }
[hidden] { display:none !important; }
#app { height:100svh; height:100dvh; min-height:320px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#1d2c2460,transparent 72%); }
#masthead { position:absolute; top:3.2vh; left:4vw; right:4vw; display:flex; align-items:center; justify-content:space-between; gap:1rem; z-index:2; }
.wordmark { font-size:1.65rem; font-weight:650; letter-spacing:-.07em; }
.brand-dot { color:var(--accent); }
.eyebrow { color:var(--muted); font-size:.65rem; letter-spacing:.24em; }
#display { position:absolute; inset:14vh 4vw 17vh; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:3.5vh; }
#quote-space { display:grid; place-items:center; min-height:0; min-width:0; }
#quote { margin:0; width:100%; text-align:center; font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.12; letter-spacing:-.035em; text-wrap:balance; overflow-wrap:break-word; font-size:clamp(40px,8vw,130px); }
#attribution { display:flex; align-items:center; justify-content:center; gap:.7em; color:var(--accent); font-size:clamp(18px,2.8vmin,38px); min-height:1.5em; text-align:center; }
#author { margin:0; line-height:1.3; }
.author-dash { height:1px; width:1.2em; background:currentColor; flex-shrink:0; }
#toolbar { position:absolute; bottom:3.5vh; left:4vw; right:4vw; display:flex; justify-content:space-between; align-items:center; gap:1rem; z-index:2; }
.toolbar-left { display:flex; align-items:center; gap:1.1rem; min-width:0; }
.quiet { color:var(--muted); font-size:.8rem; }
nav { display:flex; gap:.4rem; align-items:center; }
nav button { border-color:transparent; font-size:1.3rem; min-width:44px; padding:.5rem; }
.control-divider { height:20px; width:1px; background:var(--line); margin:0 .4rem; }
#favorite[aria-pressed="true"] { color:var(--accent); }
.chrome { transition:opacity .5s,visibility .5s; }
body.immersed:not(.controls-visible) .chrome { opacity:0; visibility:hidden; pointer-events:none; }
body.immersed #display { inset:5vh 4vw 6vh; gap:4vh; }
body.immersed:not(.controls-visible) { cursor:none; }
#reveal { position:absolute; top:1rem; right:1rem; opacity:0; }
#reveal:focus-visible { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
body.immersed:not(.controls-visible) #reveal:focus-visible { opacity:1; visibility:visible; pointer-events:auto; }
#notice { position:absolute; bottom:1vh; left:5vw; right:5vw; text-align:center; font-size:.85rem; color:var(--accent); pointer-events:none; margin:0; z-index:4; text-shadow:0 1px 4px var(--bg); }
#fatal { position:absolute; inset:0; display:grid; place-content:center; padding:10vw; text-align:center; background:var(--bg); z-index:5; }
#fatal p { max-width:40rem; line-height:1.6; }
dialog { background:#1a2420; color:var(--ink); border:1px solid var(--line); border-radius:22px; max-width:540px; width:calc(100% - 32px); max-height:88dvh; padding:1.6rem; box-shadow:0 24px 100px #0008; }
dialog::backdrop { background:#050a07bb; backdrop-filter:blur(8px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
dialog h1 { font:normal 1.8rem/1.15 Georgia,serif; margin:0; letter-spacing:-.03em; }
.close { font-size:1.7rem; padding:0; border:0; min-width:44px; }
dialog p { font-size:.85rem; line-height:1.65; }
.muted,.library-meta,.version { color:var(--muted); }
dialog label { display:block; margin:1.4rem 0 .5rem; font-size:.85rem; }
select { display:block; width:100%; padding:.9rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
.check-label { display:flex; gap:.6rem; align-items:center; }
input { accent-color:var(--accent); width:18px; height:18px; vertical-align:middle; }
.library-meta { border-top:1px solid var(--line); margin-top:1.2rem; padding-top:.7rem; }
.library-meta p { margin:.35rem 0; }
.settings-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.settings-actions button { font-size:.8rem; }
details { border-top:1px solid var(--line); padding-top:1.2rem; margin-top:1rem; }
summary { font-size:.9rem; cursor:pointer; }
a { color:var(--accent); }
.version { font-size:.65rem; letter-spacing:.08em; margin:1.8rem 0 0; }
#update-box { border-top:1px solid var(--line); margin-top:1rem; }
@media(max-width:700px) { .quiet,.eyebrow { display:none; } #toolbar { flex-wrap:wrap; gap:.3rem; } #toolbar button { padding:.5rem .7rem; } #display { inset:13vh 4vw 19vh; } }
@media(max-height:450px) { #masthead { top:2vh; } #toolbar { bottom:2vh; } #display { inset:15vh 4vw 20vh; gap:2vh; } .wordmark { font-size:1.3rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }