:root {
  --bg: #f6f4ef; --fg: #1d2233; --muted: #5d6478; --card: #fff; --line: #e3dfd5;
  --accent: #3b4cca; --accent-soft: #e7e9fb; --radius: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1324; --fg: #e9ecf7; --muted: #9aa2bd; --card: #181d33; --line: #262c47; --accent: #8f9bff; --accent-soft: #232a52; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--fg); line-height: 1.55;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
}
header, main, footer { max-width: 560px; margin-inline: auto; padding-inline: 16px; }
header { padding-block: 16px; }
.brand { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.15; margin: 8px 0; }
h2 { font-size: 15px; color: var(--muted); font-weight: 600; margin: 0 0 12px; }
.lead { color: var(--muted); margin: 0 0 24px; }
button { font: inherit; cursor: pointer; border: 0; border-radius: var(--radius); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); }
.seg button { padding: 12px 8px; background: none; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
input[type="time"] {
  display: block; width: 100%; margin-block: 16px; padding: 14px; text-align: center;
  font: inherit; font-size: 32px; font-weight: 600; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.card { margin-block: 16px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.times, .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.times li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.times li.best { background: var(--accent-soft); border-color: transparent; }
.times b { font-size: 26px; font-variant-numeric: tabular-nums; }
.times span { color: var(--muted); font-size: 14px; }
.times em { margin-inline-start: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); }
.steps li { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; border-block-end: 1px dashed var(--line); }
.steps li:last-child { border: 0; }
.steps b { font-variant-numeric: tabular-nums; }
.ghost { width: 100%; padding: 14px; background: none; color: var(--accent); border: 1px solid var(--line); }
.note { color: var(--muted); font-size: 14px; margin-block: 24px 8px; }
.fine { color: var(--muted); font-size: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair input, .opts textarea { width: 100%; padding: 12px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.opts { display: grid; gap: 6px; margin-top: 16px; color: var(--muted); font-size: 14px; }
.go { width: 100%; margin-top: 16px; padding: 16px; background: var(--accent); color: #fff; font-size: 18px; font-weight: 700; }
.go:disabled { opacity: .5; cursor: default; }
.coin-wrap { display: grid; place-items: center; padding: 24px 0 8px; perspective: 800px; }
.coin { position: relative; width: 160px; height: 160px; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.coin span {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; border-radius: 50%; text-align: center;
  font-weight: 700; overflow-wrap: anywhere; backface-visibility: hidden; color: #4a3410;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #e0b44c 60%, #b8862a); box-shadow: inset 0 0 0 6px #c99a3b;
}
#fb { transform: rotateY(180deg); }
.wheel-wrap { position: relative; max-width: 320px; margin: 8px auto 0; }
#wheel { display: block; width: 100%; height: auto; border-radius: 50%; transition: transform 4s cubic-bezier(.17, .67, .12, 1); }
.pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 12px solid transparent; border-top: 20px solid var(--fg); }
.pick { margin: 0 0 12px; text-align: center; font-size: 32px; font-weight: 800; overflow-wrap: anywhere; }
.q { margin: 0 0 10px; text-align: center; color: var(--muted); }
.verdict { min-height: 1.5em; text-align: center; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .coin, #wheel { transition-duration: .01s; } }
.tools { list-style: none; padding: 0; display: grid; gap: 12px; }
.tools a { display: grid; gap: 4px; padding: 18px; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tools span { color: var(--muted); font-size: 14px; }
footer { padding-block: 32px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
footer a { color: var(--muted); }
footer a[aria-current] { color: var(--fg); font-weight: 600; text-decoration: none; }