/* Material 3 / Pixel tokens — light = porcelain, dark = obsidian. Everything below reads only from these. */
:root{--f:'Figtree','Google Sans',Inter,system-ui,sans-serif;--bg:#F8F9FD;--s1:#F1F3FA;--s2:#EAEDF6;--s3:#DFE3F0;--ink:#1A1C24;--ink2:#575C70;--line:#D9DDEB;
--p:#4355C6;--onp:#fff;--pc:#DDE1FF;--onpc:#0B1766;--ok:#1F7A52;--okc:#C6F0D8;--glow:rgba(67,85,198,.30);--grad:linear-gradient(90deg,#4355C6,#8A7CF0);
--sh:0 1px 2px rgba(26,28,36,.06),0 4px 12px rgba(26,28,36,.06),0 12px 32px rgba(26,28,36,.06);--shh:0 2px 4px rgba(26,28,36,.06),0 14px 28px rgba(26,28,36,.10),0 32px 64px rgba(26,28,36,.12);--ease:cubic-bezier(.2,0,0,1)}
[data-theme=dark]{--bg:#111318;--s1:#1A1D25;--s2:#212530;--s3:#2B3040;--ink:#E4E6F0;--ink2:#A6ABC0;--line:#323648;--p:#B8C2FF;--onp:#1B2A78;--pc:#2F3F8F;--onpc:#DDE1FF;--ok:#8FDDB3;--okc:#0F4D33;--glow:rgba(184,194,255,.35);--grad:linear-gradient(90deg,#8E9CFF,#C3A6FF);
--sh:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);--shh:0 2px 4px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(184,194,255,.12)}
*{box-sizing:border-box}html{color-scheme:light dark}[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}a{color:inherit;text-decoration:none}
.page{animation:in .45s var(--ease) both}@keyframes in{from{opacity:0;transform:translateY(8px)}}
:focus-visible{outline:3px solid var(--p);outline-offset:2px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border:0;border-radius:999px;font:600 15px var(--f);cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s,background .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.95)}.btn:hover{box-shadow:var(--sh)}
.btn.filled{background:var(--p);color:var(--onp)}.btn.tonal{background:var(--pc);color:var(--onpc)}.btn.ghost{background:var(--s2);color:var(--ink)}
.btn.icon{width:44px;padding:0}.btn.fab{height:56px;padding:0 24px;border-radius:20px;box-shadow:var(--sh)}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s var(--ease) forwards;pointer-events:none}@keyframes rip{to{transform:scale(1);opacity:0}}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--pc);color:var(--onpc);font:600 12.5px var(--f)}
.pill.ok{background:var(--okc);color:var(--ok)}
.cap{height:10px;border-radius:999px;background:var(--s3);overflow:hidden}.cap i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);box-shadow:0 0 12px var(--glow);transition:width .8s var(--ease)}
.cap.done i{background:linear-gradient(90deg,var(--ok),#6FD9A5)}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 20px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px)}
.logo{font:800 20px var(--f);display:flex;align-items:center;gap:10px;margin-right:auto}.logo b{width:36px;height:36px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- brand logo (image) in the top bar: rounded surface container ---- */
.logo b{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;flex:none}
.logo b img{width:100%;height:100%;object-fit:cover;display:block}
.logo .lname{font:800 19px var(--f);letter-spacing:-.01em}
@media(max-width:420px){.logo .lname{display:none}}