/* Living Plan — shared design tokens & components (8px grid, greyscale + one accent) */
:root{
  --ink:#16171a;--ink2:#3f4146;--mute:#83858b;--faint:#a9aaae;
  --line:#e7e6e2;--line2:#d8d7d2;--bg:#f5f4f1;--paper:#fbfbf9;--card:#ffffff;--sunk:#efeeea;
  --acc:#2b5fae;--acc-soft:rgba(43,95,174,.10);--red:#b8432f;
  --r:8px;--r2:12px;--sh1:0 1px 2px rgba(20,20,22,.06),0 1px 1px rgba(20,20,22,.04);--sh2:0 8px 28px rgba(20,20,22,.10),0 2px 6px rgba(20,20,22,.05);
  --sans:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.ic.sm{width:16px;height:16px}.ic.lg{width:20px;height:20px}
/* wordmark */
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;color:inherit}
.brand .mark{width:28px;height:28px;border-radius:7px;background:var(--ink);display:grid;place-items:center}
.brand .mark i{display:block;width:12px;height:12px;border:1.6px solid #fff;border-radius:2px;border-right-color:transparent;transform:rotate(0deg)}
.brand .wm{display:flex;flex-direction:column;line-height:1.15}
.brand .wm b{font-family:"Inter",var(--sans);font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand .wm small{font-family:var(--serif);font-size:11.5px;color:var(--mute);letter-spacing:.14em}
/* segmented nav */
.navseg{display:flex;gap:2px;background:var(--sunk);border-radius:10px;padding:3px}
.navseg a{font-size:13px;color:var(--ink2);text-decoration:none;padding:6px 14px;border-radius:7px;white-space:nowrap;transition:background .2s var(--ease),color .2s}
.navseg a:hover{color:var(--ink)}
.navseg a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh1);font-weight:600}
/* buttons */
button,select,.btn{height:40px;border-radius:var(--r);border:1px solid var(--line2);background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;padding:0 16px;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .18s var(--ease),border-color .18s,box-shadow .18s,transform .12s var(--ease),color .18s;letter-spacing:.01em}
select{appearance:none;-webkit-appearance:none;padding:0 32px 0 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2383858b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
button:hover:not(:disabled),select:hover{border-color:#b9b8b3}
button:active:not(:disabled){transform:translateY(.5px) scale(.985)}
button:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.primary{background:var(--ink);border-color:var(--ink);color:#fff}
button.primary:hover:not(:disabled){background:#2b2d31;border-color:#2b2d31}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover:not(:disabled){background:var(--sunk)}
button.big{width:100%;height:48px;font-size:14.5px;font-weight:600}
button:disabled{opacity:.4;cursor:default}
.hidden{display:none!important}
/* progress / time */
.prog{height:4px;background:var(--line);border-radius:2px;overflow:hidden;cursor:pointer;position:relative}
.prog::after{content:"";position:absolute;inset:-10px 0}
.prog i{display:block;height:100%;width:0;background:var(--ink);border-radius:2px}
.time{font-family:"Inter",var(--sans);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--mute);letter-spacing:.02em}
/* eyebrow / labels */
.eyebrow{font-family:"Inter",var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
/* step list (both pages) */
ol.steplist{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
ol.steplist li.st{display:grid;grid-template-columns:24px 1fr;align-items:start;gap:14px;padding:10px 0;position:relative;transition:opacity .3s var(--ease)}
ol.steplist li.st::before{content:"";position:absolute;left:11.5px;top:34px;bottom:-10px;width:1px;background:var(--line)}
ol.steplist li.st:last-child::before{display:none}
ol.steplist li.st .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:"Inter",var(--sans);font-size:11px;font-weight:600;background:var(--card);border:1px solid var(--line2);color:var(--mute);position:relative;z-index:1;transition:all .3s var(--ease)}
ol.steplist li.st b{display:block;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink2);transition:color .3s}
ol.steplist li.st span{display:block;font-size:12px;color:var(--mute);line-height:1.5}
ol.steplist li.st.on .n{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(22,23,26,.08)}
ol.steplist li.st.on b{color:var(--ink)}
ol.steplist li.st.done .n{background:var(--sunk);border-color:var(--sunk);color:var(--ink2)}
ol.steplist li.st.done b{color:var(--mute);font-weight:500}
/* now-playing card */
.now{padding:16px;border-radius:var(--r2);background:var(--ink);color:#fff;position:relative;overflow:hidden}
.now small{display:block;font-family:"Inter",var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.now strong{display:block;font-size:15.5px;font-weight:600;margin-top:6px;letter-spacing:.01em}
.now strong.flip{animation:fl .35s var(--ease)}
@keyframes fl{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}