:root { --ink:#241d2c; --plum:#28113f; --purple:#603287; --teal:#0f716f; --gold:#c99228; --gold-light:#f3df9c; --paper:#fffaf2; --mist:#f2ebf7; --line:#dfd3e6; --shadow:0 18px 46px rgba(35,18,57,.16); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 7%,#f5d98066,transparent 20rem),radial-gradient(circle at 93% 0%,#6a328642,transparent 27rem),linear-gradient(145deg,#f8f1fa,#eef9f7); font:16px/1.55 Georgia, "Times New Roman", serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.shell { min-height:100vh; max-width:760px; margin:auto; padding:20px 16px 52px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; padding:10px 13px; border:1px solid #fff7de; border-radius:17px; background:linear-gradient(105deg,#fffdf8d9,#f7f0dfd9); box-shadow:0 8px 25px rgba(47,23,73,.08); }
.brand { display:flex; align-items:center; gap:9px; font:700 1.08rem/1.15 Georgia,serif; color:var(--plum); letter-spacing:.055em; text-decoration:none; }.brand::before { content:'♛'; display:grid; place-items:center; width:29px; height:29px; border:1px solid #d8ae48; border-radius:50%; color:#704812; background:radial-gradient(circle at 35% 28%,#fff7c4,#e9c464); font-size:1rem; box-shadow:inset 0 1px 1px #fff8d2; }.brand small { display:block; color:var(--teal); font:600 .7rem/1.2 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }
.nav { position:relative; display:flex; gap:8px; overflow:visible; padding:0 1px 16px; margin-bottom:8px; scrollbar-width:none; }.nav a,.top-menu summary { flex:0 0 auto; padding:7px 10px; border-radius:999px; color:#5d5262; text-decoration:none; font:600 .76rem system-ui,sans-serif; }.nav a:hover,.top-menu summary:hover { color:var(--plum); background:#ffffff9c; }.top-menu { position:static; flex:0 0 auto; }.top-menu summary { list-style:none; cursor:pointer; }.top-menu summary::-webkit-details-marker { display:none; }.top-menu summary::after { content:'⌄'; margin-left:5px; color:var(--gold); }.top-menu[open] summary { color:var(--plum); background:#fff7df; }.top-menu-panel { position:absolute; z-index:20; right:0; top:calc(100% + 9px); width:min(350px,calc(100vw - 30px)); max-height:75vh; overflow:auto; padding:14px; border:1px solid #d8bd70; border-radius:17px; background:linear-gradient(145deg,#fffefa,#f8f2e4); box-shadow:0 18px 46px rgba(35,18,57,.23); }.top-menu-panel section { padding:12px 8px; border-bottom:1px solid #eadfc5; }.top-menu-panel section:last-child { border-bottom:0; }.top-menu-panel strong { display:block; color:var(--plum); font:700 .84rem Georgia,serif; }.top-menu-panel p { margin:4px 0 9px; color:#635b60; font:.76rem/1.42 system-ui,sans-serif; }.top-menu-panel a { display:inline-block; padding:5px 0; margin-right:12px; color:var(--purple); font:700 .76rem/1.35 system-ui,sans-serif; text-decoration:none; }.top-menu-panel a:hover { color:var(--teal); background:transparent; }.top-menu-panel .secondary,.menu-backup button { width:auto; margin:2px 7px 0 0; padding:8px 11px; font:.75rem system-ui,sans-serif; }.menu-backup { padding:12px 8px 5px; }.menu-backup button { border:1px solid #d7c48b; border-radius:9px; color:#5a3510; background:#fff9e8; }
.quiet { color:#635c68; font: .86rem/1.35 system-ui,sans-serif; }
.card { position:relative; overflow:hidden; background:linear-gradient(145deg,#fffefb,#fffbf3); border:1px solid #fff; border-radius:24px; box-shadow:var(--shadow); padding:clamp(22px,5vw,44px); }.card::before { content:''; position:absolute; top:0; left:11%; right:11%; height:3px; border-radius:99px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent); }.card > * { position:relative; }
.eyebrow { color:var(--teal); font:700 .74rem/1.1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.14em; }
h1,h2,h3 { color:var(--plum); line-height:1.12; margin:0 0 14px; } h1 { font-size:clamp(2.05rem,7vw,3.75rem); } h2 { font-size:clamp(1.6rem,5vw,2.4rem); } h3 { font-size:1.25rem; }
p { margin:0 0 16px; }.lede { font-size:1.14rem; color:#463d4e; }
.cta,.secondary { border:1px solid #3d1d5d; border-radius:999px; padding:13px 20px; font-weight:700; color:white; background:linear-gradient(135deg,#241037,var(--purple)); box-shadow:0 8px 18px #3a1a6233,inset 0 1px 0 #ffffff2e; }.cta:hover { transform:translateY(-1px); box-shadow:0 11px 22px #3a1a6240,inset 0 1px 0 #ffffff34; }.secondary { border-color:#ddc783; color:#5a3510; background:linear-gradient(135deg,#fff6d9,#efdc9d); box-shadow:inset 0 1px 0 #fffde8; }
.choices { display:grid; gap:12px; margin:24px 0; }.choice { text-align:left; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); }.choice strong { display:block; color:var(--plum); }.choice span { display:block; color:#635c68; font: .88rem system-ui,sans-serif; margin-top:2px; }.choice.selected { border:2px solid var(--teal); background:#effaf8; }
.progress { height:9px; background:#ebe3ed; border-radius:99px; overflow:hidden; margin:10px 0 4px; }.progress > i { display:block; height:100%; background:linear-gradient(90deg,var(--teal),#57b7a9,var(--gold)); border-radius:inherit; }
.next-step { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:18px; margin:24px 0; background:linear-gradient(120deg,#f5fbf9,#fff4d8); border:1px solid #d8c078; border-radius:18px; box-shadow:inset 0 1px 0 #fff; }.next-step h2 { font-size:1.35rem; margin:4px 0; }.next-step p { margin:0; color:#5d6765; font:.84rem system-ui,sans-serif; }.next-step .cta { flex:0 0 auto; }
.journey { display:grid; gap:12px; margin:24px 0; }.key { width:100%; display:flex; align-items:center; gap:14px; padding:15px; background:#fff; border:1px solid var(--line); border-radius:16px; color:var(--ink); text-align:left; }.key:not(:disabled) { cursor:pointer; }.key:not(:disabled):hover,.key:not(:disabled):focus-visible { border-color:var(--teal); box-shadow:0 6px 18px #0f716f16; outline:none; }.key small { display:block; margin-top:3px; }.key-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border:1px solid #dec171; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff5be,#e9c15a); color:#60400b; font-size:1.25rem; box-shadow:inset 0 1px 0 #fff9d8; }.key.active { border-color:#c69a35; background:linear-gradient(100deg,#fff5d5,#fff); }.key.active .key-icon { background:radial-gradient(circle at 35% 28%,#fff6c8,#d7a43a); }.key.coming { opacity:.72; }.key .meta { margin-left:auto; font:.76rem system-ui,sans-serif; color:#736a79; }
.lesson-list { display:grid; gap:10px; margin:22px 0; }.lesson { width:100%; border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px; text-align:left; display:flex; gap:12px; align-items:center; }.lesson:hover { border-color:var(--teal); }.lesson-num { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--mist); color:var(--purple); font:bold .8rem system-ui,sans-serif; }.lesson.done .lesson-num { background:var(--teal); color:white; }.lesson small { display:block; color:#716979; font:.78rem system-ui,sans-serif; }
.callout,.theme-panel { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px; margin:26px 0 0; border-radius:16px; background:#fff8e9; border:1px solid #f0dba7; }.callout p,.theme-panel p { margin:5px 0 0; color:#645d58; font:.88rem system-ui,sans-serif; }.text-link { color:var(--purple); font:700 .85rem system-ui,sans-serif; text-decoration:none; white-space:nowrap; }.theme-panel { display:block; background:#f3f9f7; border-color:#cbe6df; }.theme-panel h2 { font-size:1.35rem; margin:4px 0; }
.key-path { margin-top:30px; padding-top:28px; border-top:1px solid var(--line); scroll-margin-top:16px; }.path-heading { display:flex; justify-content:space-between; align-items:end; gap:15px; }.path-heading h2 { margin:3px 0 0; }.path-heading span { padding:5px 9px; border-radius:999px; background:#edf8f6; color:#28635f; font:.75rem system-ui,sans-serif; white-space:nowrap; }.tool-prompt { display:block; margin-top:-6px; color:var(--purple); font:700 .84rem system-ui,sans-serif; text-decoration:none; }.practice-next { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px; border:1px solid #d9bc6d; border-radius:16px; background:#fff9e7; }.practice-next p { margin:4px 0 0; color:#645c55; font:.84rem/1.4 system-ui,sans-serif; }
.companion-links { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 10px; }.companion-links a { padding:8px 10px; border-radius:10px; border:1px solid #d8c7e3; color:var(--purple); background:#faf6fc; text-decoration:none; font:600 .78rem system-ui,sans-serif; }.companion-links a:hover { border-color:var(--teal); background:#f0faf8; }.foundation-card { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:18px; margin:26px 0 0; border-radius:16px; background:#f3f1fc; border:1px solid #d8d0ef; }.foundation-card p { margin:5px 0 0; color:#625d6c; font:.85rem system-ui,sans-serif; }.foundation-card .companion-links { margin:0; }.question-stack { display:grid; gap:15px; margin-top:26px; }.book-question { padding:17px; border:1px solid #d4e7e2; border-radius:16px; background:#f4faf8; }.book-question label { display:block; color:#214f4d; font-weight:700; line-height:1.42; }.book-question textarea { width:100%; min-height:112px; resize:vertical; padding:11px; margin-top:11px; border:1px solid #a5ccc4; border-radius:10px; background:#fff; color:var(--ink); }
.practice-panel { margin:24px 0; padding:19px; border:1px solid #eadcb8; border-radius:17px; background:#fffaf0; }.practice-panel h2 { font-size:1.45rem; }.practice-panel label { display:block; margin-top:15px; color:#5b4518; font-weight:700; }.practice-panel textarea { width:100%; min-height:105px; resize:vertical; padding:11px; margin-top:8px; border:1px solid #d8c899; border-radius:10px; background:#fff; color:var(--ink); }
.inventory { display:grid; gap:14px; margin:24px 0; }.inventory-gift { padding:17px; border:1px solid #d8d0ed; border-radius:16px; background:#f9f7fd; }.inventory-gift .path-heading { align-items:center; }.inventory-gift h2 { font-size:1.22rem; margin:0; }.score-row { padding-top:12px; border-top:1px solid #e5dff0; margin-top:12px; }.score-row p { margin:0 0 9px; }.scores { display:flex; gap:8px; }.score { width:34px; height:31px; border:1px solid #cfc2df; border-radius:9px; background:#fff; color:var(--purple); font:700 .82rem system-ui,sans-serif; }.score.selected { border-color:var(--teal); background:var(--teal); color:#fff; }
.scripture { border-left:4px solid var(--gold); padding:12px 16px; background:#fff7df; border-radius:0 12px 12px 0; margin:22px 0; }.scripture cite { display:block; margin-top:7px; color:#71531a; font: .8rem system-ui,sans-serif; }
.word-study { margin:18px 0; padding:14px 16px; border:1px solid #d8c9e4; border-radius:13px; background:#faf7fd; }.word-study summary { cursor:pointer; color:var(--purple); font:700 .9rem system-ui,sans-serif; }.word-study p { margin:10px 0 0; color:#51465a; }
.prayer-space { background:linear-gradient(155deg,#fffcf7,#f4f7fb); }.prayer-card { margin:26px 0; padding:20px; border-radius:18px; color:#493b52; background:#f4eef8; border:1px solid #d9cce4; }.prayer-card p:last-child { margin-bottom:0; }
.reflect { margin:26px 0; padding:18px; background:#f3f9f7; border:1px solid #cbe6df; border-radius:16px; }.reflect label { display:block; font-weight:700; color:#194f4e; margin-bottom:8px; }.reflect textarea { width:100%; min-height:155px; resize:vertical; padding:12px; border:1px solid #a5ccc4; border-radius:12px; background:white; color:var(--ink); }
.journal-log { margin:24px 0; padding:18px; border:1px solid #dfd0a1; border-radius:17px; background:linear-gradient(145deg,#fffdf7,#fbf3df); }.journal-log h2 { margin:0 0 14px; font-size:1.22rem; }.journal-log-empty { margin:18px 0; }.journal-log-entry { padding:14px 0; border-top:1px solid #ebdfc2; }.journal-log-entry:first-of-type { border-top:0; padding-top:0; }.journal-log-entry > div { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px; }.journal-log-entry strong { color:#5a3510; font:.82rem system-ui,sans-serif; }.journal-log-entry small { color:#756a62; font:.74rem system-ui,sans-serif; }.journal-log-entry textarea { width:100%; min-height:92px; resize:vertical; padding:10px; border:1px solid #d8c899; border-radius:10px; background:#fffefa; color:var(--ink); }.journal-log-entry .log-save { margin-top:9px; padding:8px 11px; font:.76rem system-ui,sans-serif; }
.david-log-entry label { display:block; margin:11px 0 5px; color:#5a3510; font:700 .76rem system-ui,sans-serif; }.david-log-entry textarea { min-height:72px; }.text-button { margin:9px 0 0 9px; padding:7px 0; border:0; background:transparent; font:700 .76rem system-ui,sans-serif; text-decoration:underline; }.danger { color:#9c3641; }
.journal-list { display:grid; gap:10px; margin:22px 0; }.journal-list-entry { display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid var(--line); border-radius:14px; background:#fff; }.journal-open { min-width:0; flex:1; display:flex; align-items:center; gap:12px; border:0; background:transparent; color:var(--ink); text-align:left; }.journal-open:hover strong { color:var(--purple); }.journal-open small { display:block; color:#716979; font:.78rem system-ui,sans-serif; }.journal-list-entry .text-button { flex:0 0 auto; margin:0; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }.tag { border:1px solid #c1dad4; border-radius:999px; background:#fff; color:#225b59; padding:7px 11px; font:.82rem system-ui,sans-serif; }.tag.selected { background:var(--teal); border-color:var(--teal); color:#fff; }
.tag.static { cursor:default; background:#edf8f6; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }.actions { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }.notice { margin-top:12px; color:#36706c; font:.83rem system-ui,sans-serif; }.back { background:none; color:var(--purple); padding:0; border:0; text-decoration:underline; margin-bottom:16px; }.privacy { margin-top:26px; color:#665e6c; font:.8rem/1.45 system-ui,sans-serif; }
.toolbox { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }.toolbox summary { cursor:pointer; color:var(--purple); font-weight:700; }.toolbox button { margin:12px 8px 0 0; border:1px solid var(--line); color:var(--plum); background:white; border-radius:9px; padding:9px 11px; font:.8rem system-ui,sans-serif; }
.install-card { margin-top:24px; padding:16px 18px; border:1px solid #dec67f; border-radius:16px; background:linear-gradient(135deg,#fffdf7,#f8f2e2); }.install-card summary { cursor:pointer; color:var(--plum); font:700 .9rem system-ui,sans-serif; }.install-card > div { padding-top:14px; }.install-card p { color:#574d5e; font:.88rem/1.45 system-ui,sans-serif; }.install-card .secondary { margin:2px 0 12px; }
.tool-cards { display:grid; gap:11px; margin:22px 0; }.tool-card { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); text-decoration:none; }.tool-card:hover { border-color:var(--teal); }.tool-card > span { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#efe5f5; color:var(--purple); flex:0 0 auto; }.tool-card small { display:block; color:#716979; font:.82rem/1.4 system-ui,sans-serif; margin-top:3px; }.tool-card.muted { background:#fffcf7; }
.guided-steps { display:grid; gap:16px; margin:26px 0 16px; }.guided-steps > div { position:relative; padding:17px 17px 17px 56px; border:1px solid #cbe6df; background:#f4faf8; border-radius:16px; }.guided-steps span { position:absolute; left:16px; top:16px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--teal); color:#fff; font:bold .78rem system-ui,sans-serif; }.guided-steps label { display:block; color:#1d5452; font-weight:700; margin-bottom:9px; }.guided-steps textarea { width:100%; min-height:90px; resize:vertical; padding:10px; color:var(--ink); border:1px solid #a5ccc4; border-radius:10px; background:#fff; }
.needs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:24px 0; }.needs button { padding:14px; color:var(--plum); border:1px solid var(--line); border-radius:13px; background:#fff; text-align:left; font:600 .9rem system-ui,sans-serif; }.needs button:hover { border-color:var(--teal); background:#effaf8; }.need-result { min-height:116px; padding:18px; border:1px solid #f0dba7; border-radius:16px; background:#fff9e9; }.need-result h2 { font-size:1.4rem; }.need-result p { color:#534b4c; }.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
@media (max-width:450px){ .topbar .quiet{display:none}.card{border-radius:19px}.shell{padding:14px 12px 36px}.cta,.secondary{width:100%;}.actions{display:grid}.actions button,.actions a{width:100%}.next-step,.practice-next,.foundation-card{display:block}.next-step .cta,.practice-next .button-link{margin-top:12px;width:100%}.foundation-card .companion-links{margin-top:12px}.callout{display:block}.text-link{display:inline-block;margin-top:12px}.needs{grid-template-columns:1fr}.guided-steps > div{padding-left:52px} }