/* Smartloop: one column, mobile first. The page follows the clock:
   light during the day, warm and dark from 7 pm to 6 am (no blue light at night). */
:root{
  --bg:#F4F3F1; --surface:#FFFFFF; --ink:#1F1A17; --text:#3A322C; --body:#4F463F; --muted:#6E655E;
  --accent:#B4561F; --accent-hover:#8F4115; --on-accent:#FFFFFF;
  --line:rgba(60,50,44,.10); --line-accent:rgba(180,86,31,.28); --dot:180,86,31; --nav:#FFFFFF;
  --display:"Spectral","Noto Serif Devanagari",Georgia,"Times New Roman",serif;
  --body-font:"Karla","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-time="night"]{
  --bg:#120D0A; --surface:#1C1511; --ink:#F1E3D3; --text:#DCC6AE; --body:#C7B29C; --muted:#A58D78;
  --accent:#E8954F; --accent-hover:#F2B27A; --on-accent:#120D0A;
  --line:rgba(220,198,174,.12); --line-accent:rgba(232,149,79,.25); --dot:232,149,79; --nav:#0F0B08;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--body-font);-webkit-tap-highlight-color:transparent}
a{color:var(--accent)} a:hover{color:var(--accent-hover)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.page{max-width:560px;margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(110px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:20px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:21px}
.brand svg{flex-shrink:0;color:var(--accent)}
.choice svg,.pause svg{color:var(--accent);flex-shrink:0}
.pill-btn{border:1px solid var(--line);background:transparent;border-radius:999px;min-width:52px;min-height:44px;padding:0 14px;font-weight:600;font-size:14px;color:var(--text)}
.pill-btn:hover{border-color:var(--line-accent)}

h1,.h1{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(30px,8.5vw,40px);line-height:1.12;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.card.accent{border-color:var(--line-accent)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:12px}

.choice{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:10px 16px 10px 18px;
  background:var(--surface);border:1px solid var(--line-accent);border-radius:16px;text-decoration:none;color:var(--ink)}
.choice:hover{border-color:var(--accent);color:var(--ink)}
.choice b{display:block;font-size:17px;font-weight:600}
.choice span{display:block;font-size:13px;color:var(--muted)}
.choice[aria-disabled="true"]{border-style:dashed;border-color:var(--line);cursor:default}
.choice[aria-disabled="true"] svg{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15px;text-decoration:none}
.btn:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line-accent)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-hover)}
.btn.quiet{background:transparent;color:var(--muted);border:1px solid var(--line)}

.sleep-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sleep-opts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:86px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--text);padding:6px 2px}
.sleep-opts button i{width:22px;height:22px;border-radius:50%;background:rgba(var(--dot),var(--a))}
.sleep-opts button:hover{border-color:var(--line-accent)}

.orb-wrap{width:96px;height:96px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.orb{width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,178,122,.9) 0,rgba(232,149,79,.55) 35%,rgba(122,46,31,.25) 62%,rgba(122,46,31,0) 72%);
  box-shadow:inset 0 0 0 1.5px rgba(232,149,79,.55);animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.62);opacity:.7}40%{transform:scale(1);opacity:1}100%{transform:scale(.62);opacity:.7}}

.dots{display:flex;gap:8px;align-items:center}
.dots i{width:12px;height:12px;border-radius:50%;background:rgba(var(--dot),var(--a,.15))}
.dots i.open{background:transparent;border:1.5px dashed rgba(var(--dot),.7)}

.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--nav);border-top:1px solid var(--line);
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.nav ul{list-style:none;margin:0 auto;padding:0;max-width:560px;display:flex;justify-content:space-around}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:72px;padding:6px 0;text-decoration:none;color:var(--muted);font-size:12px;font-weight:600}
.nav a[aria-current="page"]{color:var(--accent)}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:999px;font-size:14px;z-index:30;max-width:calc(100% - 32px)}

@media (max-width:340px){.ring{transform:scale(.9);transform-origin:top center;margin-bottom:-28px}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}