:root{--bg:#000000;--card:#0b0b0b;--muted:#d1c27a;--accent:#ffb81c}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#fff;background:linear-gradient(180deg,#000000 0%,#071212 60%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.wrap{width:100%;max-width:920px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
h1{margin:0;font-size:20px}
.time-now{color:var(--muted);font-size:13px}
.grid{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.12));border:1px solid rgba(255,255,255,0.03);padding:18px;border-radius:12px;color:#fff;position:relative;overflow:hidden;text-align:center}
.title{font-weight:600;margin:0 0 8px 0}
.count{font-size:20px;font-weight:700;margin:4px 0}
.muted{color:var(--muted);font-size:13px}
.controls{display:flex;gap:8px;margin-top:8px;justify-content:center}
button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit;padding:8px 10px;border-radius:8px;cursor:pointer}
.active{box-shadow:0 8px 30px rgba(255,184,28,0.14);border-color:rgba(255,184,28,0.9)}
.card.active,
.card:focus {
	background: linear-gradient(180deg, rgba(255,184,28,0.10), rgba(0,0,0,0.06));
	box-shadow: 0 8px 30px rgba(255,184,28,0.14);
	border-color: rgba(255,184,28,0.9);
	outline: none;
}
.flash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,184,28,0.10),transparent);opacity:0;pointer-events:none;transition:opacity .35s}
.card.done .flash{opacity:1;animation:fade 1s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.small{font-size:12px;color:var(--muted)}
footer{margin-top:18px;color:var(--muted);font-size:13px;text-align:center}