@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');
:root{--ink:#382c46;--muted:#6f6272;--paper:#fffdf8;--bg:#f1ede8;--line:#d8cfd7;--accent:#694b66;--quote:clamp(1.8rem,3.1vw,2.85rem)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.55 'DM Sans',Arial,sans-serif;background-image:radial-gradient(ellipse at 90% 5%,#dfd5e180,transparent 50%)}button,input,textarea,select{font:inherit}button,select{cursor:pointer}button{min-height:64px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);padding:14px 23px;font-weight:600}button:hover{background:#e8dfe8;border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid #a75f20;outline-offset:5px}a{color:inherit;text-underline-offset:5px}.skip{position:absolute;top:-100px;left:20px;padding:15px;background:white;z-index:5}.skip:focus{top:10px}header{max-width:1440px;margin:auto;padding:28px 5%;display:flex;justify-content:space-between;gap:24px;align-items:center}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;font:1.65rem 'Lora',Georgia,serif}.mark{font-size:3rem;color:var(--accent)}.brand small{display:block;font:600 .65rem/2 'DM Sans',Arial,sans-serif;letter-spacing:.19em;margin-top:4px}.header-actions{display:flex;gap:16px}.header-actions button{background:transparent;font-size:.95rem}main{max-width:1120px;margin:0 auto;padding:16px 32px 24px}.intro{text-align:center;margin:12px 0 28px}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.16em}.intro h1{font:400 clamp(2.2rem,4.5vw,3.5rem)/1.2 'Lora',Georgia,serif;margin:12px 0}.intro p{color:var(--muted);margin:12px 0}nav{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 22px}nav button{padding:12px 8px;font-size:.875rem;background:transparent;border-color:transparent;line-height:1.3}nav button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.quote-card{background:var(--paper);border:1px solid #e4dce3;border-radius:24px;padding:25px 52px 20px;box-shadow:0 16px 55px #382c4609;min-height:375px;display:flex;flex-direction:column}.card-top{display:flex;align-items:center;justify-content:space-between;color:var(--accent)}.ornament{font-size:1.8rem}#quote-content{text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0 25px}blockquote{font:400 var(--quote)/1.4 'Lora',Georgia,serif;max-width:900px;margin:12px 0 20px;white-space:pre-wrap;overflow-wrap:anywhere}.author{margin:0;font-size:1rem;font-weight:500}#quote-source{font-size:.875rem;padding:8px;min-height:44px;color:var(--muted)}.shared{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}.shared-icon{height:42px;width:42px;display:grid;place-items:center;border-radius:50%;background:#eee5ec;font-size:1.4rem}.shared span:last-child{text-align:left}.shared small{display:block;font-size:.65rem;letter-spacing:.12em;color:var(--muted)}.shared strong{font-weight:500;font-size:.95rem}.card-bottom{border-top:1px solid #e8e1e5;padding-top:16px;display:flex;justify-content:space-between;gap:16px;font-size:.8rem;color:var(--muted)}.reading-controls{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:18px;margin-top:22px}.reading-controls button{min-height:80px;font-size:1.08rem}.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.primary:hover{background:#503b5f;color:white}.reading-controls .primary{display:flex;justify-content:space-between;align-items:center;padding:20px 30px}footer{text-align:center;color:var(--muted);font-size:.8rem;margin:24px 0 0}footer span{margin-right:10px;color:var(--accent)}.status{text-align:center;min-height:25px;font-size:.875rem;margin:12px 0 0}dialog{max-width:650px;width:calc(100% - 32px);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#211a2fcc;backdrop-filter:blur(4px)}h2{font:400 1.7rem/1.3 'Lora',Georgia,serif;margin:0}h3{font-size:1.1rem}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-heading button{padding:12px 18px}label{display:block;font-weight:500;margin:18px 0}input,textarea,select{display:block;width:100%;border:1px solid #98899c;background:var(--paper);color:var(--ink);border-radius:10px;padding:16px;margin-top:8px;min-height:60px}textarea{resize:vertical}input[type=checkbox]{width:32px;height:32px;min-height:32px;accent-color:var(--ink)}.setting{padding:15px 0;border-bottom:1px solid var(--line)}.hint{font-size:.9rem;color:var(--muted)}#family-status{white-space:pre-wrap}.pending-item{border-top:1px solid var(--line);padding:18px 0;overflow-wrap:anywhere}.pending-item button{margin:8px 12px 0 0}.pending-item p{white-space:pre-wrap}body[data-size=large]{--quote:clamp(2.2rem,4vw,3.4rem)}body[data-size=largest]{--quote:clamp(2.7rem,4.7vw,4rem)}body[data-contrast=high]{--ink:#170e21;--muted:#33243d;--paper:#fff;--bg:#eae7ed;--line:#69566f;--accent:#442750;background-image:none}body.simple .intro,body.simple footer{display:none}body.simple main{padding-top:20px}body.simple .quote-card{min-height:430px}[hidden]{display:none!important}@media(max-width:800px){header{padding:20px 24px}.brand{font-size:1.25rem}.brand small{font-size:.55rem}.header-actions{gap:10px}.header-actions button{padding:10px;font-size:.8rem}main{padding:10px 20px 24px}nav{grid-template-columns:repeat(3,1fr)}.quote-card{padding:20px 24px}.reading-controls{gap:12px;grid-template-columns:repeat(2,1fr)}.reading-controls .primary{padding:16px}.card-bottom span:last-child{display:none}}@media(max-width:430px){header{flex-wrap:wrap}.header-actions{width:100%}.header-actions button{flex:1}.intro{margin-top:0}.intro p{font-size:.95rem}.dialog-heading{align-items:flex-start}dialog{padding:22px}.brand small{font-size:.65rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Theme colors apply to the reading surface, dialogs, and controls together. */
:root{--hover:#e8dfe8;--primary:#382c46;--on-primary:#fff;--primary-hover:#503b5f;--card-line:#e4dce3;--divider:#e8e1e5;--chip:#eee5ec;--input-line:#98899c;--glow:#dfd5e180;--focus:#a75f20}
body[data-theme=rose]{--ink:#602d40;--muted:#765364;--paper:#fffafc;--bg:#f7e9ed;--line:#d6b4c0;--accent:#853e58;--hover:#f0d6e0;--primary:#6a3045;--primary-hover:#842e51;--card-line:#e9ccd7;--divider:#ead3dc;--chip:#f4dfe7;--input-line:#a17687;--glow:#e8bdce70;--focus:#9c4c16}
body[data-theme=ocean]{--ink:#173f5a;--muted:#4f687a;--paper:#fafdff;--bg:#e5f0f5;--line:#aecbd9;--accent:#266680;--hover:#d2e7f0;--primary:#173f5a;--primary-hover:#235777;--card-line:#c8dfe9;--divider:#d1e2ea;--chip:#dcecf4;--input-line:#668ba0;--glow:#accddb70;--focus:#a15412}
body[data-theme=forest]{--ink:#264936;--muted:#506858;--paper:#fcfff9;--bg:#e8f0e8;--line:#b4cbb8;--accent:#37694b;--hover:#d5e5d5;--primary:#264936;--primary-hover:#365e44;--card-line:#ceddcd;--divider:#d5e1d1;--chip:#e0ecdc;--input-line:#6e8b75;--glow:#b6cbb770;--focus:#96400d}
body[data-theme=lavender]{--ink:#493469;--muted:#6d6080;--paper:#fefbff;--bg:#eeeafa;--line:#c8bcdd;--accent:#71518f;--hover:#e3d9f2;--primary:#4e3b76;--primary-hover:#64498f;--card-line:#ddd3ed;--divider:#e1d8ec;--chip:#eae0f4;--input-line:#9280a9;--glow:#cdbbea70;--focus:#a5570c}
body[data-theme=sunshine]{--ink:#604214;--muted:#776339;--paper:#fffef6;--bg:#faf1d7;--line:#d7c58b;--accent:#846015;--hover:#f2e3b5;--primary:#654411;--primary-hover:#79561c;--card-line:#e9dab0;--divider:#ebdfbf;--chip:#f7edc8;--input-line:#9a8448;--glow:#efce6970;--focus:#354eb0}
body[data-theme=terracotta]{--ink:#653828;--muted:#7b5d50;--paper:#fffaf6;--bg:#f4e6df;--line:#d5b3a4;--accent:#944f35;--hover:#edcfc0;--primary:#723d2d;--primary-hover:#8c4c32;--card-line:#e7cfc2;--divider:#ead7ce;--chip:#f2ded2;--input-line:#a97b65;--glow:#dfa98660;--focus:#275e99}
body[data-theme=teal]{--ink:#194b4d;--muted:#4f6a68;--paper:#f9fffc;--bg:#e3f1ee;--line:#acd0c8;--accent:#286d69;--hover:#cee9e2;--primary:#195254;--primary-hover:#286a68;--card-line:#c3e0d7;--divider:#cde4dd;--chip:#dbf0e7;--input-line:#67938a;--glow:#9ecec070;--focus:#a24b1d}
body[data-theme=parchment]{--ink:#53412d;--muted:#756249;--paper:#fff8e9;--bg:#eee5d4;--line:#cabb9b;--accent:#7c5f34;--hover:#e7d8ba;--primary:#53412d;--primary-hover:#70563b;--card-line:#dfcfb3;--divider:#e1d3b9;--chip:#eee2c9;--input-line:#958260;--glow:#cebb9470;--focus:#386789}
body[data-theme=midnight]{color-scheme:dark;--ink:#e0ecfa;--muted:#b2c7df;--paper:#1b2d45;--bg:#111e32;--line:#526d8b;--accent:#b4d5f7;--hover:#2b425e;--primary:#c4dcf5;--on-primary:#12263f;--primary-hover:#e0efff;--card-line:#3c536e;--divider:#3d5470;--chip:#2c435d;--input-line:#748da8;--glow:#36587550;--focus:#ffd08b}
body[data-theme=starlight]{color-scheme:dark;--ink:#f3e8fa;--muted:#ccb7da;--paper:#352740;--bg:#231a30;--line:#80658f;--accent:#e5c5f3;--hover:#4a3658;--primary:#e5d2f2;--on-primary:#30203f;--primary-hover:#f4e7fc;--card-line:#654d77;--divider:#634b72;--chip:#4a3658;--input-line:#a287b0;--glow:#75518450;--focus:#ffd28a}
body{background-image:radial-gradient(ellipse at 90% 5%,var(--glow),transparent 50%)}
button:hover{background:var(--hover)}.quote-card{border-color:var(--card-line)}.card-bottom{border-color:var(--divider)}.shared-icon{background:var(--chip)}input,textarea,select{border-color:var(--input-line)}
.primary,nav button[aria-pressed=true]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.primary:hover{background:var(--primary-hover);color:var(--on-primary)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--focus)}
/* High contrast takes priority without erasing the chosen theme preference. */
body[data-contrast=high]{color-scheme:light;--ink:#170e21;--muted:#33243d;--paper:#fff;--bg:#eae7ed;--line:#69566f;--accent:#442750;--hover:#e0d8e7;--primary:#170e21;--on-primary:#fff;--primary-hover:#33243d;--card-line:#69566f;--divider:#69566f;--chip:#e0d8e7;--input-line:#69566f;--focus:#a75f20;background-image:none}
.people-filter{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px}.people-filter>span{font-size:.9rem;color:var(--muted)}.people-filter button{min-width:260px;max-width:100%;overflow-wrap:anywhere}
.people-grid,.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.people-grid button{min-height:88px;text-align:left;overflow-wrap:anywhere}.people-grid strong,.people-grid span{display:block}.people-grid span{font-size:.9rem;font-weight:400;margin-top:4px}.people-grid button[aria-pressed=true]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.theme-settings{padding:0;border:0;margin:26px 0}.theme-settings legend{font-weight:600;margin-bottom:16px}.theme-grid button{display:flex;align-items:center;gap:12px;text-align:left;min-height:84px;padding:12px;font-size:.95rem}.theme-swatch{width:36px;height:36px;flex:0 0 36px;border:6px solid;border-radius:50%}.theme-grid button[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px;background:var(--hover)}
.watch-button{min-height:80px;min-width:240px;align-self:center;font-size:1.15rem;margin:0 0 24px}
#video{max-width:1000px;width:calc(100% - 24px);padding:24px}#video-close{min-height:80px;min-width:150px}#video-sharer{overflow-wrap:anywhere;color:var(--muted)}.video-frame{width:100%;min-height:200px;aspect-ratio:16/9;background:#080a0f;border-radius:14px;overflow:hidden}.video-frame iframe{display:block;border:0;width:100%;height:100%;min-height:200px}#video-status{min-height:26px;margin:16px 0}.video-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.video-controls button{min-height:96px;font-size:1.25rem;padding:14px}.video-controls button[aria-pressed=true]{border:3px solid var(--accent)}
@media(max-width:600px){.people-filter{align-items:stretch;flex-direction:column;gap:10px}.people-filter button{min-width:0;width:100%}.theme-grid,.people-grid{grid-template-columns:1fr}.video-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#video{padding:16px}#video .dialog-heading{flex-wrap:wrap}#video-close{width:100%}.video-controls button{font-size:1.05rem}.watch-button{min-width:0;width:100%}}


/* Fixed reading window: long quotes scroll without stretching the card. */
#quote-content{width:100%;min-width:0}
.quote-reading-area{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:22px;width:100%;align-items:center;margin:12px 0 22px}
#quote-scroll{height:clamp(250px,32vh,340px);min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) var(--paper);scrollbar-gutter:stable;padding:0 12px;scroll-behavior:auto}
.quote-scroll-inner{min-height:100%;display:flex;flex-direction:column;justify-content:center}
#quote-text{flex:none;margin:0;padding:8px 0;width:100%;max-width:none}
#quote-scroll:focus-visible{outline:4px solid var(--focus);outline-offset:4px;border-radius:8px}
.quote-scroll-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.quote-scroll-controls button{min-height:88px;padding:10px 8px;font-size:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.quote-scroll-controls button span{font-size:1.8rem;line-height:1.1}
.quote-position{font-size:.8rem;color:var(--muted);line-height:1.4;min-height:36px;display:grid;place-items:center;text-align:center}
@media(max-width:600px){.quote-reading-area{grid-template-columns:minmax(0,1fr) 80px;gap:12px}#quote-scroll{height:300px;padding:0 6px}.quote-scroll-controls button{min-height:84px}}


/* The reading screen is a viewport-sized workspace. Only quote text scrolls. */
html{height:100%;overflow:hidden}
body{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
header{flex:0 0 auto;width:100%;padding:12px 3%;gap:16px;min-height:0}
header .mark{font-size:2.2rem}.brand{font-size:1.4rem}.brand small{display:none}
.header-actions button{min-height:56px;padding:10px 18px}
main,body.simple main{flex:1 1 0;min-height:0;width:100%;max-width:1240px;padding:0 24px 12px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:12px;overflow:hidden}
main>footer{display:none}
.page-heading{margin:0;text-align:center;font:400 clamp(1.1rem,2.3vw,1.7rem)/1.3 'Lora',Georgia,serif;color:var(--ink);padding:0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;justify-self:center}
.people-filter{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.people-filter button{min-width:0;min-height:60px;padding:10px 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote-card,body.simple .quote-card{min-height:0;padding:12px 28px;overflow:hidden;border-radius:20px}
.card-top{flex:0 0 auto;min-height:24px}.card-top .ornament{font-size:1.3rem}
#quote-content{flex:1 1 0;min-height:0;padding:0;justify-content:flex-start}
.quote-reading-area{flex:1 1 0;min-height:0;grid-template-columns:minmax(0,1fr) 88px;align-items:stretch;margin:6px 0 8px;gap:16px}
#quote-scroll{height:100%;min-height:0;padding:0 10px}
.quote-scroll-controls{justify-content:center;gap:8px;min-height:0}
.quote-scroll-controls button{min-height:54px;flex:0 1 76px;padding:6px;flex-direction:row;gap:8px}
.quote-position{min-height:20px;font-size:.75rem}
.author{flex:0 0 auto;font-size:.95rem;line-height:1.3;margin:0;max-width:100%;overflow-wrap:anywhere}
#quote-source{min-height:0;padding:3px 8px;font-size:.8rem}
.shared{flex:0 0 auto;margin-top:6px;gap:8px;max-width:100%;overflow-wrap:anywhere}
.shared-icon{width:30px;height:30px;font-size:1.15rem}.shared small{font-size:.6rem}.shared strong{font-size:.9rem}
.watch-button{flex:0 0 auto;min-height:48px;font-size:1rem;margin:8px 0 0;padding:8px 24px}
.card-bottom{flex:0 0 auto;padding-top:6px;margin-top:8px;font-size:.75rem}
.reading-controls{margin:0;gap:16px;grid-template-columns:1fr 1fr 1fr 1.6fr}
.reading-controls button{min-height:64px;padding:12px;font-size:1rem}.reading-controls .primary{padding:12px 24px}
.status{font-size:.75rem;line-height:1.3;margin:0;min-height:16px;max-height:32px;overflow:auto}
#empty{flex:1;min-height:0;overflow:auto}
#categories-dialog nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 0}
#categories-dialog nav button{min-height:80px;border-color:var(--line);font-size:1rem}
dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
@media(max-width:800px){header{padding:10px 20px}.header-actions{gap:10px}main,body.simple main{padding:0 16px 10px;gap:10px}.quote-card,body.simple .quote-card{padding:10px 18px}.reading-controls{gap:10px}.reading-controls .primary{padding:10px 16px}.page-heading{font-size:1.05rem}}
@media(max-width:500px){header{flex-wrap:nowrap;padding:8px 12px;gap:10px}.brand{font-size:1rem;gap:4px}.brand .mark{font-size:1.5rem}.header-actions{width:auto;gap:8px}.header-actions button{min-height:48px;padding:8px;font-size:.75rem}.people-filter{gap:10px}.people-filter button{font-size:.85rem;min-height:52px;padding:8px}.page-heading{font-size:.95rem;-webkit-line-clamp:2}.quote-reading-area{grid-template-columns:minmax(0,1fr) 68px;gap:8px}.quote-scroll-controls button{font-size:.85rem;flex-direction:column;gap:0}.quote-scroll-controls button span{font-size:1.3rem}.reading-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.reading-controls button{min-height:60px;font-size:.8rem;padding:8px}.reading-controls .primary{padding:8px;justify-content:center}.reading-controls .primary span{display:none}.author{font-size:.85rem}.shared strong{font-size:.85rem}.quote-position{font-size:.7rem}}
@media(max-height:650px){header{padding-top:6px;padding-bottom:6px}main,body.simple main{gap:8px;padding-bottom:8px}.header-actions button{min-height:48px}.people-filter button{min-height:48px}.page-heading{font-size:.95rem;-webkit-line-clamp:1}.reading-controls button{min-height:52px}.quote-card,body.simple .quote-card{padding-top:8px;padding-bottom:8px}.card-top{display:none}.card-bottom{display:none}.shared{margin-top:4px}.shared small{display:none}.quote-position{display:none}.quote-scroll-controls button{flex-basis:54px;min-height:44px}.watch-button{min-height:44px;margin-top:4px}}
@media(max-height:480px){.page-heading{height:0;min-height:0;margin:0;padding:0;overflow:hidden;visibility:hidden}}

/* Four direct choices; no extra category-selection step. */
.people-filter{grid-template-columns:repeat(4,minmax(0,1fr))}
.people-filter button[aria-pressed=true]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.quote-reading-area{grid-template-columns:minmax(0,1fr)}
.quote-reading-area.needs-scroll{grid-template-columns:minmax(0,1fr) 88px}
#quote-content>.watch-button{min-height:80px;width:min(100%,520px);font-size:1.3rem;background:var(--primary);color:var(--on-primary);border-color:var(--primary);margin:0 0 12px;padding:16px 28px}
#quote-content>.watch-button:hover{background:var(--primary-hover)}
.has-video .quote-reading-area{flex:0 1 auto;max-height:100%;height:clamp(110px,24vh,260px)}
.has-video #quote-content{justify-content:center}
#settings[open]{display:flex;flex-direction:column;height:min(780px,calc(100dvh - 32px));max-width:800px;overflow:hidden}
#settings>.dialog-heading{flex:none;margin-bottom:16px}
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:20px;min-height:0;flex:1}
#settings-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 10px;scrollbar-width:thin}
.settings-scroll-controls{display:flex;flex-direction:column;justify-content:center;gap:20px}.settings-scroll-controls button{min-height:88px;padding:12px}
.admin-link{display:inline-block;padding:16px 4px;min-height:56px}
@media(max-width:600px){.people-filter{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quote-reading-area.needs-scroll{grid-template-columns:minmax(0,1fr) 68px}.settings-layout{grid-template-columns:minmax(0,1fr) 72px;gap:8px}.settings-scroll-controls button{min-height:76px;padding:8px}#settings{padding:18px}.theme-grid{grid-template-columns:1fr}#quote-content>.watch-button{min-height:72px;font-size:1.15rem;margin-bottom:8px}}
@media(max-height:650px){#quote-content>.watch-button{min-height:64px;font-size:1.1rem;padding:10px;margin-bottom:6px}.has-video .quote-reading-area{height:clamp(60px,18vh,160px)}}