:root { --bg:#f4efe6; --ink:#2b241c; --muted:#6e6458; --card:#fffaf3; --line:#e4d8c8; --accent:#b4532a; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 "Iowan Old Style", Palatino, Georgia, serif; }
body { max-width:40rem; margin:0 auto; padding:2.5rem 1.25rem 5rem; }
a { color:inherit; }
header { margin-bottom:2rem; }
.kicker { font:12px/1.3 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
h1 { font-size:2.1rem; font-weight:600; margin:.2rem 0 .4rem; }
.grid { display:grid; gap:1rem; }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; text-decoration:none; }
.card:hover { border-color:var(--accent); }
.meta { color:var(--muted); font-size:.95rem; }
.steps { list-style: decimal; padding-left:1.3rem; margin:0; }
.steps > li { margin:0 0 1.15rem; }
.steps p { margin:0 0 .45rem; }
.timer {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; min-height:3.75rem; gap:.15rem;
  font: 15px/1.2 ui-monospace, Menlo, monospace;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  padding:.85rem 1rem; cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.timer .time { font-size:1.65rem; font-weight:600; letter-spacing:.02em; }
.timer .hint { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.timer.is-on { background:#2b241c; color:#fffaf3; border-color:#2b241c; }
.timer.is-on .hint { color:#cfc6ba; }
.timer.is-done { background:var(--accent); color:#fffaf3; border-color:var(--accent); }
.timer.is-done .hint { color:#f3e4d8; }
.back { display:inline-block; margin-bottom:1rem; color:var(--muted); font-size:.9rem; }
@media print {
  .timer { border:1px solid #ccc; }
  .timer .hint { display:none; }
  body { background:white; }
}