:root{--bg:#f3f6f4;--fg:#1f2d2a;--ac:#3c7a6b;--soft:#dbe8e3}@media(prefers-color-scheme:dark){:root{--bg:#142019;--fg:#e4eee9;--ac:#7fc4b0;--soft:#24352e}}
*{box-sizing:border-box}body{margin:0;font:17px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px}
.crisis{position:sticky;top:0;z-index:9;background:#7a2e2e;color:#fff;padding:8px 12px;text-align:center;font-size:15px}.crisis a{color:#fff;font-weight:700}
header,main,footer{max-width:680px;margin:auto;padding:12px 16px}h1{margin:.3em 0 0;color:var(--ac)}
nav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}button{font:inherit;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--ac);background:var(--soft);color:var(--fg);cursor:pointer}
button[aria-pressed=true]{background:var(--ac);color:var(--bg)}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #e0a43a;outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.circlewrap{height:240px;display:grid;place-items:center}
.circle{width:80px;height:80px;border-radius:50%;background:radial-gradient(var(--ac),var(--soft));transition:transform 4s ease-in-out}
.phase{font-size:1.3em;text-align:center;min-height:2em}textarea{width:100%;font:inherit;padding:8px;border-radius:10px;background:var(--soft);color:var(--fg);border:1px solid var(--ac)}
canvas{width:100%;height:auto;background:var(--soft);border-radius:10px;margin-top:12px}.alert{background:#7a2e2e;color:#fff;padding:12px;border-radius:10px;margin:8px 0}.alert a{color:#fff;font-weight:700}
.notice{background:var(--soft);padding:12px;border-radius:10px;margin-top:24px}.small{font-size:.85em;opacity:.85}.link{border:0;background:none;text-decoration:underline}
.faithbox{border-left:4px solid var(--ac);padding:8px 12px;margin-top:16px;font-style:italic}.sr{position:absolute;left:-999px}
#log .m{padding:8px 12px;border-radius:10px;margin:6px 0;background:var(--soft)}#log .u{text-align:right}footer a{color:var(--ac)}
@media(prefers-reduced-motion:reduce){.circle{transition:none}}
.topics{margin-top:20px}.topics a,main a{color:var(--ac)}.btn{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--ac);color:var(--bg)!important;text-decoration:none;font-weight:600}