:root{color-scheme:light;
 --ground:#fffdf8;--paper:#ffffff;--sunk:#eef6f4;--ink:#1d3638;--soft:#48625f;--muted:#7a918e;--line:#d9e9e5;
 --mint:#34b996;--sky:#4ea3e3;--peach:#ff956a;--lav:#9486ee;--sun:#ffc24d;--rose:#ee6a8c;
 --mintbg:#dcf5ec;--skybg:#e2f0fc;--peachbg:#ffeadf;--lavbg:#ece9fd;--sunbg:#fff3d6;--rosebg:#fde4eb;
 --accent:var(--mint);--onaccent:#ffffff;
 --good:#1f9a78;--goodbg:var(--mintbg);--warn:#c77a1c;--warnbg:var(--sunbg);--bad:#d4486b;--badbg:var(--rosebg);--info:#2f7fc1;--infobg:var(--skybg);
 --sh:0 12px 34px rgba(40,110,100,.10);
 --disp:"Baloo 2","Nunito",ui-rounded,system-ui,sans-serif;--body:"Nunito",ui-rounded,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;padding-inline:16px;padding-block:0 90px}
.wrap{max-width:560px;margin:0 auto}
h1,h2,h3{font-family:var(--disp);font-weight:800;text-wrap:balance;margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.soft{color:var(--soft)}.sm{font-size:14px}
/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.mark{width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--mint),var(--sky),var(--lav),var(--peach),var(--sun),var(--mint));display:grid;place-items:center}
.mark::after{content:"AG";width:28px;height:28px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--ink)}
.demo-tag{display:inline-block;font-size:12px;font-weight:800;background:var(--sunbg);color:var(--warn);border-radius:999px;padding:3px 10px}
/* hero (onboarding) */
.hero{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--mintbg),var(--skybg) 60%,var(--lavbg));border-radius:28px;padding:26px 22px}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{width:170px;height:170px;right:-50px;top:-60px;background:color-mix(in srgb,var(--sun) 45%,transparent)}
.hero::after{width:90px;height:90px;right:60px;bottom:-40px;background:color-mix(in srgb,var(--peach) 35%,transparent)}
.hero>*{position:relative}
.hero h1{font-size:clamp(25px,6.4vw,32px);line-height:1.15;max-width:15ch}
.hero p{margin:.6em 0 0;color:var(--soft);max-width:40ch}
.kick{font-size:13px;font-weight:800;color:var(--good);margin-bottom:6px}
/* cards & controls */
.card{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:20px;margin-top:14px;box-shadow:var(--sh)}
.card h2{font-size:21px}.card h3{font-size:17px}
.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:800;background:var(--accent);color:var(--onaccent);display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}
.btn.ghost{background:var(--sunk);color:var(--ink)}
.btn.dark{background:var(--sky);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.full{width:100%}.btn.sm{padding:8px 16px;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:grid;gap:6px;margin-top:16px}
.field label{font-weight:800;font-size:15px}
.field .hint{font-size:13.5px;color:var(--muted)}
.inp{width:100%;border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:11px 18px}
.inp:focus{border-color:var(--mint);outline:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 16px;font-weight:700}
.seg button[aria-pressed="true"]{border-color:var(--mint);background:var(--mintbg)}
.seg button:disabled{opacity:.5}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:13px;font-weight:800}
.chooser{display:grid;gap:8px;margin-top:10px}
.chooser button{display:flex;gap:12px;align-items:center;width:100%;border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px 8px 8px;text-align:left}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex:none}
.video{aspect-ratio:16/9;max-width:100%;border-radius:24px;background:linear-gradient(140deg,var(--skybg),var(--lavbg));display:grid;place-items:center;text-align:center;padding:16px;margin-top:6px}
.play{width:72px;height:72px;border-radius:50%;background:var(--peach);display:grid;place-items:center;margin:0 auto 10px;box-shadow:0 0 0 12px color-mix(in srgb,var(--peach) 22%,transparent)}
/* home */
.hello{padding-block:10px 4px;text-align:center}
.hello h1{font-size:clamp(26px,7vw,34px);line-height:1.15}
.line{display:inline-block;margin:10px 0 0;padding:7px 16px;border-radius:999px;font-weight:800;font-size:15px}
.ringbtn{display:block;margin:24px auto 0;width:min(260px,72vw);aspect-ratio:1;border:0;border-radius:50%;padding:0;background:conic-gradient(var(--mint) calc(var(--p)*1%),var(--sunk) 0);position:relative;box-shadow:var(--sh)}
.ringbtn .in{position:absolute;inset:16px;border-radius:50%;background:var(--paper);display:grid;place-content:center;gap:2px;text-align:center;padding:16px}
.ringbtn .t{font-weight:900;font-size:22px}
.ringbtn .s{color:var(--muted);font-size:14.5px}
.ringbtn .d{margin-top:6px;font-weight:800;color:var(--good)}
.ringbtn .go{justify-self:center;margin-top:8px;width:38px;height:38px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;font-size:20px}
.duo{display:flex;justify-content:center;gap:clamp(18px,8vw,44px);margin-top:26px}
.circ{width:min(142px,38vw);aspect-ratio:1;border-radius:50%;border:0;display:grid;place-content:center;gap:4px;text-align:center;box-shadow:var(--sh);padding:10px}
.circ b{font-size:17px;font-weight:900}
.circ small{font-size:13px;color:var(--soft)}
.circ .ic{width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid;place-items:center;justify-self:center;margin-bottom:2px}
.c-sky{background:var(--skybg)}.c-lav{background:var(--lavbg)}
.tag-red{display:inline-block;margin-top:6px;background:var(--rose);color:#fff;border-radius:999px;padding:1px 10px;font-size:12.5px;font-weight:800}
/* inner pages */
.pagehead{display:flex;align-items:center;gap:12px;padding-block:6px 4px}
.backb{width:44px;height:44px;border-radius:50%;border:0;background:var(--paper);box-shadow:var(--sh);font-size:20px;flex:none}
.ptitle{font-size:25px}
.status{border-radius:24px;padding:16px 18px;margin-top:14px}
.status p{margin:0}
.sig{font-weight:800;margin-top:8px;font-size:14.5px}
.s-good{background:var(--goodbg)}.s-info{background:var(--infobg)}.s-warn{background:var(--warnbg)}.s-bad{background:var(--badbg)}
.line.s-good{color:var(--good)}.line.s-info{color:var(--info)}.line.s-warn{color:var(--warn)}.line.s-bad{color:var(--bad)}
.task{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
.task:first-of-type{border-top:0}
.stripe{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none;margin-top:6px;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent)}
.task>div:last-child{flex:1}
.task .t1{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.task .nm{font-weight:800;line-height:1.3;margin-top:2px}
.chip{display:inline-block;font-size:12.5px;font-weight:800;border-radius:999px;padding:1px 10px;background:color-mix(in srgb,var(--c) 16%,var(--paper));color:color-mix(in srgb,var(--c) 75%,var(--ink))}
.mins{font-size:14px;font-weight:700;color:var(--soft);white-space:nowrap;background:var(--sunk);border-radius:999px;padding:2px 10px}
.ticks{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.tk{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 14px 6px 7px;font-weight:800;font-size:14.5px;display:inline-flex;gap:8px;align-items:center}
.tk .bx{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;font-size:12px;line-height:1}
.tk[aria-pressed="true"]{border-color:var(--mint);background:var(--mintbg)}
.tk[aria-pressed="true"] .bx{background:var(--mint);border-color:var(--mint);color:#fff}
.event{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:999px;padding:8px 8px 8px 18px;margin-top:12px;background:var(--rosebg)}
.big{font-size:23px;font-weight:900;margin:0}
.phase{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:9px 0;position:relative}
.phase:not(:last-child)::before{content:"";position:absolute;left:17px;top:44px;bottom:-9px;width:2px;background:var(--line)}
.rtag{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;position:relative}
.r1{background:var(--lav)}.r2{background:var(--sky)}.r3{background:var(--peach)}.rb{background:var(--muted)}
details.more{cursor:pointer}
details.more summary{display:flex;justify-content:space-between;align-items:baseline;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{margin-bottom:6px}
details.day{border-top:1px solid var(--line);padding:10px 0}
details.day summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;list-style:none}
details.day summary::-webkit-details-marker{display:none}
.dl{font-size:14.5px;padding:4px 0 0 4px;color:var(--soft)}
.today-mark{background:var(--sun);color:#3a2a00;border-radius:999px;padding:0 9px;font-size:12px;font-weight:800}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:18px 10px;margin-top:14px}
.sring{display:grid;justify-items:center;gap:6px;text-align:center}
.sring .r{width:96px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--sunk) 0);display:grid;place-items:center}
.sring .r span{width:74px;aspect-ratio:1;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:900;font-size:19px}
.sring b{font-size:14px;line-height:1.25}
.bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--c,var(--mint))}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl th{font-size:12.5px;color:var(--muted)}
.scroll{overflow-x:auto}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{background:var(--paper);border-radius:999px;padding:4px 13px;font-size:14px}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;border:2px dashed var(--muted);border-radius:999px;padding:7px 15px;background:var(--paper);color:var(--muted);font-weight:800;font-size:13px}
.sheet{position:fixed;inset:auto 0 0 0;z-index:30;background:var(--paper);border-radius:30px 30px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto}
.sheet .wrap{display:grid;gap:10px}
.sheet .btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.sheet .btn{justify-content:flex-start;text-align:left;font-weight:700}
.rules li{margin:6px 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;z-index:40;font-weight:700;max-width:90vw}
@media (prefers-reduced-motion:no-preference){.ringbtn,.circ,.backb,.tk{transition:transform .15s}.ringbtn:active,.circ:active,.backb:active{transform:scale(.97)}}

.tk.pc{padding:6px 12px;min-width:44px;justify-content:center}
.tk.pc[aria-pressed="true"]{border-color:var(--sky);background:var(--skybg)}
.pcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pcs button{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--paper);font-weight:800;font-size:13.5px;padding:0}
.pcs button:last-child{width:auto;padding:0 14px;border-radius:999px}
.pcs button[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:#fff}
.duo2{display:flex;justify-content:center;gap:28px;margin-top:22px}
.rb2{width:118px;aspect-ratio:1;border-radius:50%;border:0;display:grid;place-content:center;gap:4px;font-weight:800;font-size:14.5px;box-shadow:var(--sh);padding:8px;text-align:center}
.rb2.more{background:var(--mintbg)}.rb2.light{background:var(--peachbg)}
.rb2[aria-pressed="true"]{outline:3px solid var(--peach)}
.ic2{width:36px;height:36px;border-radius:50%;background:var(--paper);display:grid;place-items:center;justify-self:center;font-size:18px}
.center{text-align:center}
.linkb{border:0;background:none;color:var(--info);font-weight:700;text-decoration:underline;padding:8px}
.lightnote{background:var(--peachbg);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;display:inline-block;margin:6px 0 4px}
.dates{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 4px}
.dc{flex:none;width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:var(--paper);display:grid;place-content:center;line-height:1.1;text-align:center}
.dc b{font-size:17px}.dc span{font-size:11.5px;color:var(--muted)}
.dc[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#fff}.dc[aria-pressed="true"] span{color:#fff}
a{color:var(--info);font-weight:700}

/* ===== Look C: Colour Pebbles ===== */
body{background-color:var(--ground);background-image:radial-gradient(#efe3d1 1.2px,transparent 1.3px);background-size:18px 18px}
.hello h1,.ptitle,.big,.card h2,.card h3,.hero h1{font-family:var(--disp);font-weight:800;letter-spacing:0}
.hello{padding-top:14px}
.line{background:#fff1c9!important;color:#9a6a00!important}
.peb{border:0;display:grid;place-content:center;text-align:center;color:#fff;box-shadow:0 16px 32px rgba(60,40,20,.14);font-family:var(--body)}
.peb:active{transform:scale(.97)}
.p1{width:min(250px,70vw);aspect-ratio:1.08;margin:26px auto 0;border-radius:58% 42% 50% 50% / 52% 48% 52% 48%;background:linear-gradient(140deg,#ff9a62,#f25f8a);gap:4px;padding:18px}
.p1 .pt{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.1}
.p1 .ps{font-size:14.5px;opacity:.95;font-weight:700}
.p1 .pd{margin-top:6px;justify-self:center;background:rgba(255,255,255,.25);border-radius:999px;padding:3px 12px;font-weight:800;font-size:14px}
.p1 .tag-red{justify-self:center;background:#fff;color:#d4486b}
.pr{display:flex;justify-content:center;gap:clamp(16px,6vw,30px);margin-top:26px;align-items:flex-end}
.p2{width:min(134px,40vw);aspect-ratio:1.1;border-radius:45% 55% 40% 60% / 55% 45% 55% 45%;background:linear-gradient(140deg,#35c3a2,#2b8fd6);gap:2px}
.p3{width:min(128px,38vw);aspect-ratio:.93;border-radius:60% 40% 55% 45% / 45% 55% 45% 55%;background:linear-gradient(140deg,#b18cff,#6a73f0);gap:2px}
.pt2{font-family:var(--disp);font-weight:800;font-size:18px}
.peb i{font-style:normal;font-size:12.5px;font-weight:700;opacity:.95}
/* inner pages */
.card{border-radius:30px 26px 32px 24px;border:0;box-shadow:0 10px 30px rgba(60,40,20,.08)}
.backb{border-radius:45% 55% 50% 50% / 55% 45% 55% 45%;background:linear-gradient(140deg,#ff9a62,#f25f8a);color:#fff;box-shadow:0 8px 18px rgba(242,95,138,.3)}
.status{border-radius:28px 22px 30px 24px}
.s-good{background:linear-gradient(135deg,#e2f7ef,#e5f1fd)}
.s-info{background:linear-gradient(135deg,#fff1e4,#fde8f0)}
.tk[aria-pressed="true"]{background:linear-gradient(135deg,#35c3a2,#2b8fd6);border-color:transparent;color:#fff}
.tk[aria-pressed="true"] .bx{background:#fff;border-color:#fff;color:#2b8fd6}
.tk.pc[aria-pressed="true"]{background:linear-gradient(135deg,#b18cff,#6a73f0);color:#fff;border-color:transparent}
.pcs button[aria-pressed="true"]{background:linear-gradient(135deg,#b18cff,#6a73f0);border-color:transparent}
.rb2{color:#fff;box-shadow:0 14px 28px rgba(60,40,20,.14)}
.rb2.more{background:linear-gradient(140deg,#35c3a2,#2b8fd6);border-radius:45% 55% 40% 60% / 55% 45% 55% 45%}
.rb2.light{background:linear-gradient(140deg,#ffb36b,#ff8a7a);border-radius:60% 40% 55% 45% / 45% 55% 45% 55%}
.rb2[aria-pressed="true"]{outline:3px solid #ffd6c4}
.ic2{background:rgba(255,255,255,.3);color:#fff}
.btn{background:linear-gradient(135deg,#ff9a62,#f25f8a)}
.btn.ghost{background:var(--sunk)}
.btn.dark{background:linear-gradient(135deg,#35c3a2,#2b8fd6)}
.hero{background:linear-gradient(140deg,#fff1e4,#fde8f0 55%,#ece9fd);border-radius:36px 28px 40px 30px}
.rtag{border-radius:45% 55% 50% 50% / 55% 45% 55% 45%}
.r1{background:linear-gradient(140deg,#b18cff,#6a73f0)}.r2{background:linear-gradient(140deg,#35c3a2,#2b8fd6)}.r3{background:linear-gradient(140deg,#ff9a62,#f25f8a)}
.sring .r{border-radius:50%}
.dc[aria-pressed="true"]{background:linear-gradient(140deg,#ff9a62,#f25f8a);border-color:transparent}
.mark{background:conic-gradient(#ff9a62,#f25f8a,#b18cff,#6a73f0,#35c3a2,#ff9a62);border-radius:45% 55% 50% 50% / 55% 45% 55% 45%}

/* laptop / desktop */
@media (min-width:900px){
 .wrap:has(.hgrid){max-width:980px}
 .hello{padding-top:30px}.hello h1{font-size:40px}
 .hgrid{display:flex;align-items:center;justify-content:center;gap:56px;margin-top:30px}
 .p1{width:330px;margin:0}.p1 .pt{font-size:30px}
 .hgrid .pr{flex-direction:column;margin:0;gap:28px;align-items:center}
 .p2,.p3{width:170px}.pt2{font-size:21px}
 .wrap{max-width:680px}
 .rb2{width:132px}
}
.hdr{display:flex;align-items:center;gap:10px}
.savedot{font-size:12.5px;color:var(--muted);font-weight:700}
.gbtn svg{flex:none}
.stale{color:var(--bad);font-weight:800}