:root{
  --paper:#faf7f0;
  --ink:#2b2622;
  --muted:#7a6f63;
  --red:#b03a2e;
  --gold:#b98a2f;
  --card:#fffdf9;
  --line:#e8e0d2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman","Songti SC","SimSun",serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px 16px 40px;
}
header{
  width:100%;
  max-width:640px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:10px;
  background:var(--red);color:#fff;
  font-size:26px;font-weight:bold;line-height:1;
  box-shadow:0 2px 6px rgba(176,58,46,.35);
}
h1{font-size:26px;letter-spacing:.02em}
.tagline{color:var(--muted);font-size:14px;margin-top:2px}
#langToggle{
  font-family:inherit;font-size:14px;cursor:pointer;
  background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;
}
#langToggle:hover{border-color:var(--gold);color:var(--gold)}
main{width:100%;max-width:640px;flex:1}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 24px 24px;
  box-shadow:0 4px 18px rgba(43,38,34,.06);
}
.timer-card{text-align:center}
.mode-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.mode-tab{
  font-family:inherit;font-size:15px;cursor:pointer;
  background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 18px;
}
.mode-tab.active{background:var(--red);border-color:var(--red);color:#fff}
.ring-wrap{position:relative;width:280px;height:280px;margin:0 auto 8px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--red);transition:stroke-dashoffset .25s linear}
body[data-mode="short"] .ring-fg,body[data-mode="long"] .ring-fg{stroke:var(--gold)}
.time-box{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.clock{font-size:64px;font-weight:bold;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.status{color:var(--muted);font-size:15px;min-height:20px}
.controls{display:flex;gap:10px;justify-content:center;margin:18px 0 22px;flex-wrap:wrap}
.primary-btn{
  font-family:inherit;font-size:17px;cursor:pointer;
  background:var(--red);color:#fff;border:1px solid var(--red);
  border-radius:999px;padding:10px 34px;
}
.primary-btn:hover:not(:disabled){background:#9c3226}
.primary-btn:disabled{opacity:.55;cursor:default}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .ring-fg{transition:none}
}
.ghost-btn{
  font-family:inherit;font-size:17px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:10px 26px;
}
.ghost-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.ghost-btn:disabled{opacity:.4;cursor:default}
.sessions{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px;
}
.session-count{font-size:16px}
.session-count strong{color:var(--red);font-size:19px}
.dots{display:flex;gap:6px}
.dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--gold);display:inline-block}
.dot.filled{background:var(--gold)}
.sound-toggle{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.note{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:16px}
footer{width:100%;max-width:640px;margin-top:28px;text-align:center}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:baseline}
.foot-label{color:var(--gold);font-size:13px;letter-spacing:.08em}
.foot-links a{color:var(--muted);text-decoration:none;font-size:13.5px}
.foot-links a:hover{color:var(--red);text-decoration:underline}
.credit{color:var(--muted);font-size:13px;margin-top:12px}
@media (max-width:480px){
  .ring-wrap{width:230px;height:230px}
  .clock{font-size:52px}
  h1{font-size:22px}
  .card{padding:22px 14px 20px}
}