/* Mantra for Exams: one tool. Saraswati in a glowing orb, the clock under her, one button for everything. */
:root{--bg:#0d0417;--ink:#fbf6ff;--soft:#c0b0d4;--acc:#f0a6dd;--line:rgba(240,215,255,.14);--orb:min(58vw,31svh,330px);--tone:#ffcf8a;--bloom:rgba(236,92,170,.55);--glow:rgba(240,150,220,.42)}
body.rest{--tone:#9fe3ff;--bloom:rgba(90,120,255,.5);--glow:rgba(130,170,255,.42)}
.stage{background:radial-gradient(90% 58% at 50% 20%,#6a1f78 0,#3a1058 42%,#180626 72%,var(--bg) 100%);align-items:center;text-align:center}
.grain{opacity:.24}
.in{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:max(62px,calc(env(safe-area-inset-top) + 54px)) 20px max(22px,env(safe-area-inset-bottom))}
h1{font-size:20px}
#tool{flex:1;width:min(100%,520px);display:flex;flex-direction:column;align-items:center;padding-top:clamp(10px,2svh,22px)}
.orb{position:relative;width:var(--orb);aspect-ratio:1;flex:none}
.bloom{position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,var(--bloom),transparent 66%);transition:background 1.2s;z-index:-1}
.go-on .bloom{animation:breath 8s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.13);opacity:.72}}
.orb img{position:absolute;inset:5.500%;width:89%;height:89%;border-radius:50%;object-fit:cover;box-shadow:0 18px 70px rgba(10,0,30,.55)}
.orb svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.orb circle{fill:none;stroke-width:1.5}
.orb .bg{stroke:rgba(255,255,255,.14)}
.orb .arc{stroke:var(--tone);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--tone));transition:stroke 1s}
.mode{margin-top:clamp(10px,2svh,18px);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--tone);transition:color 1s}
.clock{font-size:clamp(68px,20vw,92px);line-height:1;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:#fff;margin-top:2px}
/* The whole sitting, on one line: four studies, the rests between them, and where you are. */
.path{display:flex;gap:4px;width:min(100%,380px);margin-top:clamp(12px,2.2svh,20px)}
.path i{position:relative;display:block;height:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.14)}
.path i::after{content:'';position:absolute;inset:0;width:var(--f,0);background:#ffcf8a;border-radius:6px}
.path i.r::after{background:#9fe3ff}
.pathnote{font-size:16px;line-height:1.35;color:var(--soft);margin-top:8px;min-height:22px;font-variant-numeric:tabular-nums}
.ctrl{margin-top:auto;padding-top:clamp(10px,1.8svh,18px)}
.foot{min-height:52px;margin-top:clamp(8px,1.4svh,14px);display:flex;align-items:center;justify-content:center}
.pills button{color:#fff}
.pills button small{font-size:15px;font-weight:400;opacity:.7;margin-left:5px}
.pills button[aria-pressed=true] small{opacity:.65}
.linkbtn{min-height:44px;padding:0 14px;font-size:16px;font-weight:500;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.words{display:grid;gap:14px}
.blessbox{display:grid;gap:14px;margin-top:18px}
.field{width:100%;min-height:56px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);font:inherit}
.field::placeholder{color:var(--soft)}
.bless{padding:24px;border-radius:24px;background:linear-gradient(160deg,rgba(236,92,170,.2),rgba(120,70,220,.18));border:1px solid var(--line);font-size:20px;line-height:1.45;font-weight:500;letter-spacing:-.01em}
.send{min-height:58px;border-radius:999px;background:#fffaf0;color:#14060a;font-weight:600;font-size:18px}
@media (max-height:680px){:root{--orb:min(48vw,26svh,240px)}.clock{font-size:60px}.go{width:70px;height:70px}.mini{width:50px;height:50px}.in{padding-top:54px}h1{font-size:18px}.foot{min-height:46px}.pills button{min-height:40px}}