:root{
  /* GitHub-light (Primer) with a RED accent */
  --bg:#ffffff; --surface:#ffffff; --elev:#f6f8fa; --elev2:#eaeef2;
  --ink:#1f2328; --fg:#3d444d; --muted:#59636e; --faint:#818b98;
  --line:#d1d9e0; --line2:#d0d7de;
  --accent:#1f883d; --accent-ink:#1a7f37; --accent-soft:#dafbe1;
  --gs:#1f883d; --ca:#59636e; --so:#8250df; --pr:#1a7f37; --rev:#9a6700; --ok:#1a7f37; --danger:#cf222e;
  --r:6px; --r-sm:6px; --gap:12px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --shadow:0 0 transparent;
  --shadow-lg:0 8px 24px rgba(140,149,159,.2);
  --hi:0 0 transparent; --glass:none; --accent-gloss:var(--accent);
}
html[data-theme="dark"]{
  /* neutral all-black dark with a RED accent */
  --bg:#000000; --surface:#0a0a0a; --elev:#151515; --elev2:#1e1e1e;
  --ink:#ededed; --fg:#c2c2c2; --muted:#8a8a8a; --faint:#666666;
  --line:#242424; --line2:#313131;
  --accent:#2ea043; --accent-ink:#3fb950; --accent-soft:rgba(46,160,67,.16);
  --gs:#2ea043; --ca:#9a9a9a; --so:#bc8cff; --pr:#2ea043; --rev:#d29922; --ok:#3fb950; --danger:#f85149;
  --shadow:0 0 transparent;
  --shadow-lg:0 8px 24px rgba(0,0,0,.6);
  --hi:0 0 transparent; --glass:none; --accent-gloss:var(--accent);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:400 13px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}

/* mobile: single column */
.app{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:544px; min-height:100dvh; margin:0 auto;
  background:var(--bg);
}
/* tablet: bordered frame */
@media(min-width:600px){
  body{background:var(--elev)}
  .app{max-width:680px; min-height:calc(100dvh - 24px); margin:12px auto;
       border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface)}
}

/* ---------- header ---------- */
.hd{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hd .glyph{width:24px;height:24px;border-radius:6px;background:var(--accent);display:grid;place-items:center;flex:none}
.hd .glyph svg{width:14px;height:14px;stroke:#fff}
.hd .ttl{font-weight:600;color:var(--ink);font-size:13.5px;letter-spacing:-.01em;line-height:1.1}
.hd .sub{font:500 10.5px/1 var(--mono);color:var(--muted);margin-top:3px;letter-spacing:.02em}
.hd .day-pill{margin-left:auto;font:600 10.5px/1 var(--mono);color:var(--accent);
  background:var(--accent-soft);border:1px solid transparent;padding:5px 9px;border-radius:2em;white-space:nowrap}
html[data-theme="dark"] .hd .day-pill{border-color:rgba(46,160,67,.35)}

/* ---------- main scroll ---------- */
main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px calc(80px + env(safe-area-inset-bottom));
  scrollbar-width:thin}
main::-webkit-scrollbar{width:8px}main::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.view{animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- typography ---------- */
.eyebrow{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}
h1.big{font-size:20px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);font-weight:600;margin:0 0 6px}
h2.sec{font-size:14px;letter-spacing:-.01em;color:var(--ink);font-weight:600;margin:24px 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
h2.sec:first-child{margin-top:4px}
p.lead{color:var(--fg);margin:0 0 14px}
.dim{color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.flat{background:var(--elev);border-color:var(--line)}
.stack>*+*{margin-top:12px}

/* chips + dots */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:500 11px/1 var(--mono);color:var(--muted);background:var(--elev);border:1px solid var(--line);
  padding:5px 9px;border-radius:2em;white-space:nowrap}
.chip b{color:var(--ink);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.02em;
  text-transform:uppercase;padding:4px 8px;border-radius:2em;background:var(--elev);color:var(--muted);border:1px solid var(--line)}

/* ---------- progress ring ---------- */
.ring{--sz:64px;--sw:6px;position:relative;width:var(--sz);height:var(--sz);flex:none}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .bg{stroke:var(--line2);fill:none}
.ring .fg{fill:none;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)}
.ring .lbl{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .lbl b{font:700 15px/1 var(--sans);color:var(--ink);letter-spacing:-.02em}
.ring .lbl b .u{font-size:9px;color:var(--muted)}
.ring .lbl small{font:600 8px/1.1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:3px}

/* ---------- task rows ---------- */
.tasklist>div:last-child>.task{border-bottom:none}
.task{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.task:last-child{border-bottom:none}
.task .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line2);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:.14s;background:var(--surface)}
.task .box svg{width:11px;height:11px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.5);transition:.14s}
.task.done .box{background:var(--accent);border-color:var(--accent)}
.task.done .box svg{opacity:1;transform:none}
.task .tx{flex:1;min-width:0}
.task .tx .lead-line{color:var(--ink);font-weight:500;font-size:13px}
.task.done .tx .lead-line{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.task .tx .meta{font:500 11px/1.3 var(--mono);color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.trackbar{width:3px;border-radius:3px;flex:none;align-self:stretch;min-height:32px}
.task .expand{margin-left:auto;flex:none;width:26px;height:26px;border-radius:6px;border:1px solid var(--line2);
  background:var(--elev);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.14s;padding:0}
.task .expand svg{width:13px;height:13px;transition:transform .2s}
.task .expand:hover{color:var(--ink);border-color:var(--muted)}
.task .expand.open{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.task .expand.open svg{transform:rotate(180deg)}

/* ---------- segmented control ---------- */
.seg{display:flex;background:var(--elev);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:2px}
.seg button{flex:1;border:1px solid transparent;background:transparent;color:var(--muted);font:500 12px/1 var(--sans);
  padding:8px 6px;border-radius:5px;cursor:pointer;transition:.12s;letter-spacing:-.01em}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);border-color:var(--line2)}
html[data-theme="dark"] .seg button.on{background:var(--elev2);border-color:var(--line2)}
.seg-theme button{display:flex;align-items:center;justify-content:center;gap:6px}
.seg-theme button svg{width:15px;height:15px;flex:none}

/* ---------- accordion (syllabus) ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.acc+.acc{margin-top:8px}
.acc>.head{display:flex;align-items:center;gap:11px;padding:12px 13px;cursor:pointer;user-select:none}
.acc>.head:hover{background:var(--elev)}
.acc>.head .idx{font:700 11px/1 var(--mono);color:var(--accent);flex:none}
.acc>.head .t{font-weight:500;color:var(--ink);font-size:13px;flex:1;letter-spacing:-.01em}
.acc>.head .cnt{font:600 10px/1 var(--mono);color:var(--muted);background:var(--elev);border:1px solid var(--line);padding:3px 7px;border-radius:2em}
.acc>.head .chev{color:var(--faint);transition:.2s;flex:none}
.acc.open>.head .chev{transform:rotate(90deg);color:var(--accent)}
.acc.open>.head{background:var(--elev)}
.acc>.body{padding:2px 13px 6px;border-top:1px solid var(--line)}
.sub{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sub:last-child{border-bottom:none}
.sub .mk{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line2);flex:none;display:grid;place-items:center;transition:.14s}
.sub .mk svg{width:9px;height:9px;stroke:#fff;stroke-width:3;opacity:0;transition:.14s}
.sub.on .mk{background:var(--pr);border-color:var(--pr)}
.sub.on .mk svg{opacity:1}
.sub .st{font-size:12.5px;color:var(--fg);flex:1;line-height:1.4}
.sub.on .st{color:var(--muted)}

/* ---------- week (plan) ---------- */
.wk{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.wk+.wk{margin-top:8px}
.wk.today{border-color:var(--accent)}
.wk>.head{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer}
.wk>.head:hover{background:var(--elev)}
.wk>.head .wn{font:700 11px/1 var(--mono);color:var(--accent);background:var(--accent-soft);padding:4px 7px;border-radius:2em;flex:none}
html[data-theme="dark"] .wk>.head .wn{background:rgba(46,160,67,.14)}
.wk>.head .wt{font-weight:500;color:var(--ink);font-size:13px;flex:1;letter-spacing:-.01em}
.wk>.head .wm{font:600 9.5px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.wk>.head .chev{color:var(--faint);transition:.2s}
.wk.open>.head .chev{transform:rotate(90deg);color:var(--accent)}
.wk.open>.head{background:var(--elev);border-bottom:1px solid var(--line)}
.wk>.body{padding:4px 13px 12px}
.dayrow{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.dayrow:last-child{border-bottom:none}
.dayrow.tap{cursor:pointer}
.dayrow.tap:hover .dt{color:var(--accent)}
.dayrow .dl{font:600 9.5px/1.2 var(--mono);color:var(--muted);text-transform:uppercase;width:30px;flex:none;padding-top:2px}
.dayrow.we .dl{color:var(--accent)}
.dayrow .dc{flex:1;min-width:0}
.dayrow .dc .dt{color:var(--ink);font-size:12.5px;font-weight:500;line-height:1.35}
.dayrow .dc .dx{font:500 10.5px/1.3 var(--mono);color:var(--muted);margin-top:2px}
.dayrow .daychev{margin-left:auto;color:var(--faint);flex:none;align-self:center;transition:transform .2s}
.dayrow .daychev svg{width:15px;height:15px}
.dayrow .daychev.open{transform:rotate(90deg);color:var(--accent)}

/* ---------- topic detail ---------- */
.detail{margin:0 0 10px;padding:12px 13px;background:var(--elev);border:1px solid var(--line);border-radius:var(--r);animation:fade .16s ease}
.wk .detail,.acc .detail{margin:2px 0 8px}
.detail .grp+.grp{margin-top:11px}
.detail .k{font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:6px;margin-bottom:7px}
.detail .k svg{width:12px;height:12px}
.detail ul.pts{list-style:none;margin:0;padding:0}
.detail ul.pts li{position:relative;padding:3px 0 3px 16px;font-size:12.3px;color:var(--fg);line-height:1.45}
.detail ul.pts li::before{content:"";position:absolute;left:3px;top:9px;width:4px;height:4px;border-radius:1px;background:var(--gs)}
.detail .ask{font-size:12.3px;color:var(--fg);line-height:1.45;font-style:italic}
.detail .src{font:500 11px/1.45 var(--mono);color:var(--muted)}

/* mini tables */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th,.tbl td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tbl tr:last-child td{border-bottom:none}

/* callouts */
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--elev);border-radius:var(--r);padding:11px 13px;font-size:12.5px;color:var(--fg)}
.note .l{font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.note.ok{border-left-color:var(--ok)}.note.ok .l{color:var(--ok)}
.note.warn{border-left-color:var(--rev)}.note.warn .l{color:var(--rev)}

/* stepper */
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.stepper button{border:0;background:var(--elev);color:var(--ink);font:600 15px/1 var(--sans);width:36px;height:34px;cursor:pointer;transition:.12s}
.stepper button:hover{background:var(--elev2)}
.stepper .val{min-width:48px;text-align:center;font:700 13px/1 var(--mono);color:var(--ink)}
.stepper.mini{border-radius:var(--r)}
.stepper.mini button{width:30px;height:28px;font-size:15px}
.stepper.mini .val{min-width:32px;font-size:13px}

/* progress bars */
.bar{height:6px;border-radius:2em;background:var(--elev2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:2em;transition:width .7s cubic-bezier(.2,.7,.2,1)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);
  background:var(--elev);color:var(--ink);font:500 12.5px/1 var(--sans);padding:10px 14px;border-radius:var(--r);cursor:pointer;width:100%;transition:.12s}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{background:var(--elev2);border-color:var(--muted)}
.btn.acc{background:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,#000);color:#fff}
.btn.acc:hover{background:var(--accent-ink);filter:brightness(1.03)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--elev);color:var(--ink);border-color:var(--line)}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line));background:transparent}
.btn.danger:hover{background:var(--accent-soft);border-color:var(--danger)}
.btn[disabled]{opacity:.55;pointer-events:none}
.field{width:100%;border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  font:500 13px/1 var(--mono);padding:10px 12px;border-radius:var(--r)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* grid helpers */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
ul.clean{list-style:none;margin:8px 0 0;padding:0}
ul.clean li{position:relative;padding:7px 0 7px 18px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--fg)}
ul.clean li:last-child{border-bottom:none}
ul.clean li::before{content:"";position:absolute;left:2px;top:13px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
ol.steps{margin:8px 0 0;padding-left:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--fg)}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:2em;
  background:var(--accent-soft);color:var(--accent);font:700 10px/20px var(--mono);text-align:center}

/* ---------- bottom tab bar ---------- */
.tabs{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:30;
  width:100%; max-width:544px;
  display:flex; justify-content:space-around; align-items:stretch;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  background:var(--surface);
  border-top:1px solid var(--line);
}
.tabs .brand{display:none}
.tab{flex:1;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--faint);padding:5px 2px;transition:.12s}
.tab svg{width:21px;height:21px;stroke-width:1.9}
.tab span{font:600 9px/1 var(--mono);letter-spacing:.02em}
.tab.on{color:var(--accent)}

footer.cred{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font:500 10px/1.6 var(--mono);color:var(--faint)}
.spacer{height:4px}
.hr{height:1px;background:var(--line);margin:16px 0}

/* ---------- live sync dot ---------- */
.dot.pulse{position:relative}
.dot.pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:inherit;opacity:.35;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.5}70%{transform:scale(2);opacity:0}100%{opacity:0}}

/* ---------- revision tracker ---------- */
.revcard{padding:14px}
.revtop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.revbign{font:700 24px/1 var(--mono);color:var(--ink);letter-spacing:-.02em}
.revbign .dim{font-size:12px}
.revrounds{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.revgrid{margin-top:14px}
.revlabels{display:flex;gap:6px;margin-bottom:7px}
.revlabels>span:first-child{flex:0 0 66px}
.revlabels .rlab{flex:1;text-align:center;font:700 9px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.revrow{display:flex;align-items:center;gap:6px}
.revrow+.revrow{margin-top:6px}
.revrow .rs{flex:0 0 66px;font-size:12px;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.pip{flex:1;min-width:0;height:28px;border-radius:var(--r);border:1px solid var(--line2);background:var(--elev);
  color:var(--faint);font:700 11px/1 var(--mono);cursor:pointer;display:grid;place-items:center;transition:.12s;padding:0}
.pip svg{width:13px;height:13px;stroke:#fff}
.pip:hover{border-color:var(--ok);color:var(--ok)}
.pip.on{background:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,#000);color:#fff}

/* ==================================================================
   LAPTOP / DESKTOP — sidebar shell (rules at end so they win)
   ================================================================== */
@media(min-width:900px){
  body{background:var(--elev)}
  .app{
    max-width:1180px; width:calc(100% - 32px); min-height:calc(100dvh - 32px); margin:16px auto;
    display:grid; grid-template-columns:232px 1fr; grid-template-rows:auto 1fr;
    grid-template-areas:"side head" "side main";
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface);
  }
  .hd{grid-area:head; justify-content:flex-end}
  .hd .glyph,.hd .hd-title{display:none}
  main{grid-area:main; padding:24px 32px 44px}
  .view{max-width:1000px}
  .tabs{
    grid-area:side; position:static; transform:none; left:auto; bottom:auto;
    width:auto; max-width:none; z-index:auto; border-radius:0;
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:2px;
    padding:16px 12px; border-top:0; border-right:1px solid var(--line);
    background:var(--bg);
  }
  .tabs .brand{display:flex; align-items:center; gap:10px; padding:6px 8px 16px; margin-bottom:4px; border-bottom:1px solid var(--line)}
  .tabs .brand .glyph{width:28px;height:28px;border-radius:6px;background:var(--accent);display:grid;place-items:center;flex:none}
  .tabs .brand .glyph svg{width:16px;height:16px;stroke:#fff}
  .tabs .brand .ttl{font-weight:600;color:var(--ink);font-size:13.5px;letter-spacing:-.01em;line-height:1}
  .tabs .brand .sub{font:500 10px/1 var(--mono);color:var(--muted);margin-top:3px;letter-spacing:.02em}
  .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:11px;padding:8px 10px;border-radius:var(--r);color:var(--fg)}
  .tab svg{width:17px;height:17px}
  .tab span{font:500 13px/1 var(--sans);letter-spacing:-.01em}
  .tab:hover{background:var(--elev)}
  .tab.on{background:var(--accent-soft);color:var(--accent);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
  .tab.on svg{transform:none}
}
/* two-column lists on wide screens */
.collist{display:block}
@media(min-width:900px){
  .collist{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .collist>.wk+.wk,.collist>.acc+.acc{margin-top:0}
}

/* ============ TODAY — landing-style hero + animated numbered stepper ============ */
.view.today{max-width:760px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.today-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px;
  background:var(--surface);
  background-image:radial-gradient(135% 150% at 100% -25%, var(--accent-soft), transparent 55%);
  animation:rise .5s both cubic-bezier(.2,.7,.2,1)}
.th-row{display:flex;align-items:center;gap:16px}
.th-head{flex:1;min-width:0}
.th-copy{flex:1;min-width:0}
.th-head .eyebrow,.th-copy .eyebrow{margin-bottom:8px}
.th-ring .ring{max-width:100%}
.th-date{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 5px;line-height:1.15}
.th-sub{font-size:12px;color:var(--muted)}
.th-sub b{color:var(--ink);font-weight:600}
.th-tags{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 15px}
.th-actions{display:flex;gap:8px}
.th-btn{width:auto;padding:8px 13px;font-size:12px}
.th-ring{flex:none;position:relative;z-index:1}
.th-dot{position:absolute;border-radius:50%;background:var(--accent);pointer-events:none}
.th-dot.d1{width:7px;height:7px;top:18px;right:120px;opacity:.35}
.th-dot.d2{width:11px;height:11px;bottom:20px;right:24px;opacity:.15}
.th-dot.d3{width:5px;height:5px;top:46px;right:150px;opacity:.5}
.th-flag{margin-bottom:16px;animation:rise .5s .08s both cubic-bezier(.2,.7,.2,1)}
.th-sec{animation:rise .5s .04s both cubic-bezier(.2,.7,.2,1)}

.today-steps{position:relative;margin-bottom:8px}
.tstep{position:relative;display:flex;gap:12px;padding-bottom:15px;animation:rise .5s both cubic-bezier(.2,.7,.2,1)}
.tstep::before{content:"";position:absolute;left:12px;top:28px;bottom:-2px;width:2px;background:var(--line)}
.tstep:last-child{padding-bottom:0}
.tstep:last-child::before{display:none}
.tstep-badge{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;flex:none;cursor:pointer;
  display:grid;place-items:center;border:1.5px solid var(--line2);background:var(--surface);
  font:700 10.5px/1 var(--mono);color:var(--muted);transition:.16s}
.tstep-badge svg{width:12px;height:12px;stroke:#fff;stroke-width:3}
.tstep:not(.done) .tstep-badge:hover{border-color:var(--accent);color:var(--accent)}
.tstep.done .tstep-badge{background:var(--accent);border-color:var(--accent);color:#fff}
.tstep-body{flex:1;min-width:0;padding-top:2px}
.tstep-head{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.tstep-lead{flex:1;font-size:12.5px;font-weight:550;color:var(--ink);line-height:1.4}
.tstep.done .tstep-lead{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.tstep-meta{display:flex;align-items:center;gap:8px;font:500 10.5px/1.3 var(--mono);color:var(--muted);margin-top:4px}
.tstep-track{width:16px;height:3px;border-radius:2px;flex:none}
.tstep .detail{margin-top:10px}
.tstep .expand{flex:none;width:26px;height:26px;border-radius:6px;border:1px solid var(--line2);
  background:var(--elev);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.14s;padding:0}
.tstep .expand svg{width:13px;height:13px;transition:transform .2s}
.tstep .expand:hover{color:var(--ink);border-color:var(--muted)}
.tstep .expand.open{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.tstep .expand.open svg{transform:rotate(180deg)}

/* evaluation loop — static red numbered steps */
.today-steps.loop .tstep{padding-bottom:11px}
.today-steps.loop .tstep::before{top:26px}
.today-steps.loop .tstep-badge{cursor:default;border-color:transparent;background:var(--accent-soft);color:var(--accent)}
.today-steps.loop .tstep-lead{font-weight:500;color:var(--fg)}

@media(max-width:420px){
  .th-date{font-size:20px}
  .th-ring{align-self:flex-start}
}

/* ============ STUDY ACTIVITY heatmap (GitHub contribution style) ============ */
.heat-card{padding:14px}
.heat-top{display:flex;gap:24px;margin-bottom:14px}
.heat-stat .heat-big{font:700 22px/1 var(--mono);color:var(--ink);letter-spacing:-.02em}
.heat-stat .heat-cap{font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.heat-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.heat-wrap::-webkit-scrollbar{display:none;width:0;height:0}
.heat-grid{display:flex;gap:3px;min-width:max-content;padding-bottom:2px}
.heat-col{display:flex;flex-direction:column;gap:3px}
.heat-cell{width:11px;height:11px;border-radius:3px;background:var(--elev2)}
.heat-cell.l0{background:var(--elev2)}
.heat-cell.l1{background:color-mix(in srgb,var(--accent) 32%,var(--elev2))}
.heat-cell.l2{background:color-mix(in srgb,var(--accent) 56%,var(--elev2))}
.heat-cell.l3{background:color-mix(in srgb,var(--accent) 80%,var(--elev2))}
.heat-cell.l4{background:var(--accent)}
.heat-legend{display:flex;align-items:center;gap:4px;margin-top:11px;font:500 9.5px/1 var(--mono);color:var(--muted)}
.heat-legend .heat-cell{width:10px;height:10px}

/* ============ TIMER / study clock ============ */
.clockface{display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 16px}
.clockface .ring .lbl b{font:700 36px/1 var(--mono);letter-spacing:-.03em}
.clockface .ring .lbl small{margin-top:6px;font-size:9px}
.clockface.done .ring .lbl b{color:var(--rev)}
.clock-adjust{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.clock-adjust .btn{width:auto;padding:7px 12px;font-size:11.5px}
.clock-controls{display:flex;gap:8px;width:100%}
.clock-controls .btn{width:auto;flex:1}
.clock-done{font:600 11px/1.2 var(--mono);color:var(--rev);text-transform:uppercase;letter-spacing:.05em;text-align:center}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line2);
  background:var(--surface);border-radius:var(--r);padding:11px 13px;cursor:pointer;transition:.12s;text-align:left}
.preset:hover{border-color:var(--muted);background:var(--elev)}
.preset.on{border-color:var(--accent);background:var(--accent-soft)}
.preset-t{font:700 15px/1 var(--mono);color:var(--ink);letter-spacing:-.02em}
.preset.on .preset-t{color:var(--accent)}
.preset-l{font:500 10px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
@media(min-width:700px){.preset-grid{grid-template-columns:1fr 1fr 1fr}}

/* evaluation-loop collapsible card (distinct from Today's stepper) */
.acc>.head .idx svg{width:15px;height:15px}
.evalacc>.body{padding:2px 15px 10px}