:root{--bg: #f7f5f1;--surface: #ffffff;--ink: #2b2b2b;--ink-soft: #6f6a61;--green: #3f6b5b;--green-ink: #ffffff;--line: #e7e3da;--highlight: #bfe0cd;--highlight-ink: #103a29;--done: #8fc9ac;--done-ink: #0e3b28;--radius: 14px;--maxw: 560px;font-size:18px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.55;-webkit-text-size-adjust:100%}#app{max-width:var(--maxw);margin:0 auto;min-height:100dvh}.screen{padding:20px 18px calc(88px + env(safe-area-inset-bottom))}h1{font-size:1.7rem;line-height:1.2;margin:0 0 .4em}h2{font-size:1.25rem;margin:1.4em 0 .5em}p{margin:0 0 1em}.muted{color:var(--ink-soft)}.small{font-size:.9rem}.center{text-align:center}button,.btn{font:inherit;border:0;border-radius:var(--radius);padding:15px 20px;background:var(--green);color:var(--green-ink);cursor:pointer;width:100%;min-height:52px}button.secondary,.btn.secondary{background:transparent;color:var(--green);border:1.5px solid var(--line)}button.ghost{background:transparent;color:var(--ink-soft);width:auto;padding:8px 10px;min-height:0}button:disabled{opacity:.5}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 14px}input[type=text],input[type=email],input[type=time],input[type=search],textarea{font:inherit;width:100%;padding:14px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}textarea{min-height:120px;resize:vertical}.tabbar{position:fixed;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}.tabbar a{flex:1;text-align:center;color:var(--ink-soft);text-decoration:none;font-size:.8rem;padding:4px}.tabbar a.active{color:var(--green);font-weight:600}.trail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.trail .dot{aspect-ratio:1;border-radius:50%;width:100%;min-width:0;min-height:0;padding:0;display:grid;place-items:center;font-size:.8rem;font-weight:600;border:1.5px solid var(--line);color:var(--ink-soft);background:var(--surface);transition:background-color .16s ease,transform .16s ease}.trail .dot.done{background:var(--done);color:var(--done-ink);border-color:var(--done)}.trail .dot.today{border-color:var(--green);box-shadow:0 0 0 3px #3f6b5b2e;font-weight:700;color:var(--green)}.trail .dot.locked{opacity:.4}.stages{display:flex;gap:6px;margin:4px 0 16px}.stages .stage{flex:1;height:6px;border-radius:3px;background:var(--line)}.stages .stage.active{background:var(--green)}.reading{font-size:1.12rem}.reading .phrase{border-radius:8px;padding:2px 4px;margin:0 -4px;transition:background-color .18s ease,color .18s ease;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}.reading .phrase:not(.active){color:var(--ink-soft)}.reading .phrase.active{background:var(--highlight);color:var(--highlight-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--green)}.player-bar{position:fixed;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:30;box-shadow:0 -6px 18px #0000000f}.player-bar .play-btn{width:auto;min-height:46px;padding:10px 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}.listen-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;margin:4px 0 10px}.listen-cta svg{flex:none}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player-bar .time{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--ink-soft)}.player-bar input[type=range]{flex:1;width:auto}input[type=range]{width:100%}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--highlight);color:var(--highlight-ink);font-size:.8rem}.day-badge{display:inline-block;background:var(--green);color:var(--green-ink);font-weight:700;font-size:.95rem;letter-spacing:.3px;padding:6px 16px;border-radius:999px;white-space:nowrap}.banner{background:#fff7e6;border:1px solid #f0e2c0;color:#6b5a1f;padding:10px 14px;border-radius:var(--radius);margin:0 0 14px;font-size:.9rem}.toggle-chip{width:auto;min-height:0;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;background:var(--surface);color:var(--ink-soft);border:1.5px solid var(--line)}.toggle-chip .cc{font-size:.72rem;font-weight:800;letter-spacing:.5px;border:1.5px solid currentColor;border-radius:4px;padding:0 3px;line-height:1.3}.toggle-chip.on{background:var(--highlight);color:var(--highlight-ink);border-color:var(--green)}.seg{display:flex;gap:6px}.seg button{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line)}.seg button.on{background:var(--highlight);color:var(--highlight-ink);border-color:var(--green)}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}.reading .phrase{transition:none}}