:root{--bg:#f7f4ee;--fg:#2a2824;--muted:#6b665d;--line:#ddd7ca;--accent:#6b5b3e;--card:#fffdf8;--warn:#efe6cf}
@media (prefers-color-scheme:dark){:root{--bg:#1b1a18;--fg:#e8e4da;--muted:#a39d90;--line:#37342f;--accent:#c9b88f;--card:#232220;--warn:#34301f}}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.85;font-family:"Songti TC","Songti SC","Noto Serif CJK TC","Noto Serif CJK SC","Noto Serif","Iowan Old Style",Georgia,serif;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-underline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:6px 10px;z-index:9}
.site-header{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;padding:1rem 16px;max-width:46rem;margin:0 auto}
.brand{font-size:1.25rem;font-weight:600;color:var(--fg);text-decoration:none;letter-spacing:.08em}
.site-header nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.9rem}
.site-header nav a{color:var(--muted);text-decoration:none}
.site-header nav a[aria-current],.site-header nav a:hover{color:var(--fg);text-decoration:underline}
main{max-width:46rem;margin:0 auto;padding:1rem 16px 3rem}
h1{font-size:1.7rem;font-weight:600;line-height:1.4;margin:1.2rem 0 1.4rem}
h2{font-size:1.2rem;margin:2.2rem 0 .6rem;font-weight:600}
h3{font-size:1.05rem;margin:1.5rem 0 .4rem}
p,li{max-width:40rem}
.muted{color:var(--muted);font-size:.92rem}
.note{border-left:3px solid var(--line);padding:.1rem 1rem;color:var(--muted);margin:1.2rem 0}
.pending{background:var(--warn);padding:0 .3em;border-radius:3px;font-size:.9em}
.banner{background:var(--warn);margin:0;padding:.6rem 16px;text-align:center;font-size:.9rem}
.site-footer{border-top:1px solid var(--line);max-width:46rem;margin:2rem auto 0;padding:1.2rem 16px 3rem;color:var(--muted);font-size:.85rem}
.langs{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.langs a{color:var(--muted)}.langs a[aria-current]{color:var(--fg);font-weight:600}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.8rem;list-style:none;padding:0}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;margin:0}
.cards a{font-weight:600}
.btn{font:inherit;background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-radius:6px;padding:.45rem 1.1rem;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn:focus-visible,.chip:focus-visible,.day:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool,.stepper{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin:1.5rem 0}
.tool h2,.stepper h2{margin-top:.2rem}
.row{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin:.6rem 0}
select,input[type=number]{font:inherit;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:.2rem .4rem}
input[type=number]{width:4.2rem}
.clock{font-size:3.4rem;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-align:center;margin:.4rem 0}
.cue{display:flex;align-items:center;justify-content:center;gap:.8rem;min-height:3rem;font-size:1.3rem}
.ring{width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);opacity:.25;transition:transform .8s ease,opacity .8s ease}
.cue.on .ring{opacity:1}.cue.on.move .ring{transform:scale(1.7)}
.cue:not(.on){visibility:hidden}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.chip{font:inherit;min-width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.step-panel{min-height:4rem;border:1px dashed var(--line);border-radius:8px;padding:.6rem 1rem;margin:.6rem 0}
.demo{margin-top:1rem}
.track{position:relative;height:3.2rem;border-bottom:2px solid var(--line);margin:1rem 0 .4rem}
.dot{position:absolute;bottom:-9px;left:0;width:16px;height:16px;border-radius:50%;background:var(--accent);animation:sweep 8s ease-in-out infinite}
.track.paused .dot{animation-play-state:paused}
.end{position:absolute;top:0;font-size:.85rem;color:var(--muted)}.end-l{left:0}.end-r{right:0}
@keyframes sweep{0%,12%{left:0}44%,56%{left:calc(100% - 16px)}88%,100%{left:0}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin:.8rem 0;max-width:24rem}
.day{font:inherit;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;position:relative}
.day[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.day[aria-pressed=true]::after{content:"\2713";position:absolute;right:4px;top:0;font-size:.7rem}
@media (prefers-reduced-motion:reduce){.dot{animation:none;left:calc(50% - 8px)}.ring{transition:none}}
@media (max-width:480px){html{font-size:16px}.clock{font-size:2.8rem}}
.faq{margin-top:2rem}
details.qa{border:1px solid var(--line);border-radius:8px;padding:.5rem 1rem;margin:.6rem 0;background:var(--card)}
details.qa summary{cursor:pointer;font-weight:600}
details.qa p:last-child{margin-bottom:.3rem}
.src{color:var(--muted);font-size:.85em}
.steps-list{padding-left:1.4rem}
.steps-list li{margin:.35rem 0}
.tiers dt{font-weight:600;margin-top:.5rem}.tiers dd{margin:0 0 .2rem 0;color:var(--muted)}

table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1rem 0}
th,td{border:1px solid var(--line);padding:.4rem .6rem;text-align:left;vertical-align:top}
th{background:var(--card)}
@media(max-width:600px){table{display:block;overflow-x:auto}}