:root{
  --bg:#0E0E10; --card:#17171A; --border:#2A2A2E; --track:#26262A;
  --text:#F2EFEA; --muted:#9A978F; --accent:#5B9DFF; --chip:rgba(91,157,255,.16);
  --nav:rgba(23,23,26,.72); --nav-border:rgba(255,255,255,.1); --nav-text:#B5B2AA;
  --pill:rgba(255,255,255,.14); --shadow:0 8px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#F5F4F2; --card:#ECEAE6; --border:#DEDBD5; --track:#DCD9D3;
    --text:#17171A; --muted:#57544E; --accent:#2563EB; --chip:rgba(37,99,235,.12);
    --nav:rgba(236,234,230,.78); --nav-border:rgba(23,23,26,.08); --nav-text:#57544E;
    --pill:rgba(23,23,26,.09); --shadow:0 8px 24px rgba(23,23,26,.12);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
main{max-width:480px;margin:0 auto}
.screen{display:flex;flex-direction:column;gap:28px;
  padding:calc(56px + env(safe-area-inset-top,0px)) 24px calc(120px + env(safe-area-inset-bottom,0px))}
.screen[hidden]{display:none}
.stack{display:flex;flex-direction:column;gap:10px}
.label{font-size:13px;color:var(--muted);font-weight:400;margin:0}
.muted{color:var(--muted)}
.hero{display:flex;flex-direction:column;gap:4px}
.hero-num{font-size:clamp(96px,38vw,148px);line-height:1;font-weight:800;letter-spacing:-.04em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.hero-sub{font-size:20px;font-weight:300}
.title{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:0}
.bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:3px;background:var(--accent)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card{padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--border)}
.card.accent{border-color:var(--accent)}
.stats{display:flex;gap:10px}
.stats .card{flex:1;min-width:0}
.stat-num{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.learning{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px}
.learning b{font-size:32px;font-weight:600;color:var(--accent)}
.learning b small{font-size:14px;font-weight:300;color:var(--muted)}
.milestones{display:flex;flex-direction:column;gap:14px}
.ms{display:flex;align-items:center;gap:14px;font-size:16px}
.ms i{width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);flex:none}
.ms i.fill{background:var(--accent)}
.ms span:first-of-type{flex:1}
.ms em{font-style:normal;font-size:14px;color:var(--muted)}
.ms.final span:first-of-type{font-weight:600}
textarea{width:100%;height:96px;padding:14px;border-radius:14px;background:var(--card);
  border:1px solid var(--border);color:var(--text);font:inherit;font-size:16px;resize:none}
.skill{display:flex;flex-direction:column;gap:8px}
.skill .name{font-size:16px}
.skill small{font-size:13px;color:var(--muted)}
.skill .row span:last-child{font-size:14px;color:var(--muted)}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.item div{display:flex;flex-direction:column;gap:2px}
.item strong{font-weight:400;font-size:16px}
.item small{font-size:13px;color:var(--muted)}
.chip{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--chip);color:var(--accent);white-space:nowrap}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(calc(100% - 24px),456px);
  display:flex;gap:6px;padding:6px;border-radius:24px;border:1px solid var(--nav-border);
  background:var(--nav);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--shadow)}
.tabbar a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border-radius:18px;color:var(--nav-text);text-decoration:none;
  font-size:12px;letter-spacing:.02em;
  transition:background-color 200ms,color 200ms,transform 200ms cubic-bezier(.3,1.4,.5,1)}
.tabbar a:active{transform:scale(.96)}
.tabbar a[aria-current="page"]{background:var(--pill);color:var(--text);font-weight:600}
a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}