:root{
  --bg:#0e1621; --surface:#172234; --surface2:#1f2d44; --line:#2a3a55;
  --text:#e7ebf2; --muted:#93a0b5; --accent:#7fb8b0; --accent-ink:#0b1a1a;
  --warm:#c9a87c; --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
main{min-height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px)}
h1{font-size:30px;font-weight:600;margin:8px 0 6px;letter-spacing:-.01em;line-height:1.2}
h2{font-size:22px;font-weight:600;margin:0 0 6px}
p{color:var(--muted);font-size:18px;line-height:1.5;margin:0 0 12px}
.small{font-size:15px}
.grow{flex:1}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.stack{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
button,.btn{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);min-height:76px;padding:16px 18px;font-size:20px;font-weight:600;
  text-align:left;cursor:pointer;width:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;
  transition:transform .08s ease,background .2s}
button:active{transform:scale(.98);background:var(--surface2)}
button .sub{font-size:15px;font-weight:400;color:var(--muted)}
.primary{background:var(--accent);color:var(--accent-ink);border:none;min-height:150px;font-size:26px;padding:22px 24px}
.primary .sub{color:#1d3b39;font-size:17px}
.tall{min-height:110px}
.ghost{background:transparent;border:none;color:var(--muted);min-height:56px;font-size:17px;font-weight:500;text-align:center;align-items:center}
.back{position:relative;align-self:flex-start;width:auto;min-height:56px;min-width:96px;padding:0 20px;font-size:18px;text-align:center;align-items:center;background:transparent}
.kicker{color:var(--accent);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.progress{height:8px;background:var(--surface);border-radius:8px;overflow:hidden;margin:6px 0 4px}
.progress>i{display:block;height:100%;background:var(--accent);width:0}
.dots{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.dots i{width:16px;height:16px;border-radius:50%;background:var(--surface);border:1px solid #3a4c6a}
.dots i.on{background:var(--accent);border-color:var(--accent)}
.dots i.today{border:2px solid var(--warm)}
.play{width:180px;height:180px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  border:none;align-items:center;justify-content:center;font-size:24px;text-align:center;margin:24px auto}
.play svg{width:64px;height:64px}
.time{font-size:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.pacer-wrap{position:relative;width:min(78vw,340px);height:min(78vw,340px);margin:10px auto 22px;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line)}
.orb{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#9fd3ca 0%,#5d9a92 55%,#2f5c5c 100%);
  transform:scale(.35);opacity:.9;will-change:transform}
.orb.box{border-radius:28px}
.cue{font-size:28px;font-weight:600;min-height:40px;margin:0 0 6px;color:var(--text)}
.count{font-size:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.big-num{font-size:96px;font-weight:300;line-height:1;margin:10px 0;color:var(--accent)}
.scale button{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;min-height:72px}
.scale b{display:inline-flex;width:44px;height:44px;border-radius:50%;background:var(--surface2);align-items:center;justify-content:center;font-size:20px}
input[type=text]{font:inherit;font-size:20px;color:var(--text);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:18px;width:100%;min-height:64px}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
.history{list-style:none;margin:0;padding:0}
.history li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.history .d{color:var(--muted);min-width:84px}
.note{font-size:15px;color:var(--muted);line-height:1.55}
.note h3{color:var(--text);font-size:17px;margin:18px 0 6px}
.footer-link{margin-top:auto;padding-top:18px}
#dim{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 20s linear;z-index:10}
#dim.on{opacity:.88;pointer-events:auto}
#dim.on.peek{transition:opacity .4s;opacity:.25;pointer-events:none}
.fade-in{animation:fi .35s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lens{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.lens button{min-height:56px;padding:0;font-size:18px;text-align:center;align-items:center;border-radius:16px}
.lens button.on{background:var(--surface2);border:2px solid var(--accent);color:var(--accent)}
.row{display:flex;flex-direction:column;gap:8px}
.save{min-height:52px;font-size:16px;font-weight:500;color:var(--muted);background:transparent;text-align:center;align-items:center;border-radius:14px}
.save:disabled{opacity:.7;border-color:transparent}
.lr{display:flex;flex-direction:column;gap:10px;margin-top:14px;width:100%}
.lr-toggle{min-height:72px;text-align:center;align-items:center}
.lr-toggle.on{border:2px solid var(--accent);color:var(--accent)}
.lr-speed{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lr-speed button{min-height:56px;font-size:18px;text-align:center;align-items:center;border-radius:16px}
.lr-speed button.on{background:var(--surface2);border:2px solid var(--accent);color:var(--accent)}