/* ficklestudio26 · Online timers */
:root { --ink:#1d1d22; --ink2:#5b5b66; --line:#e8e8ec; --bg:#fafafb; --accent:#e8590c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wrap { max-width:900px; margin:0 auto; padding:0 16px 40px; }
h1 { font-size:clamp(26px,4vw,38px); line-height:1.2; margin:28px 0 8px; letter-spacing:-.02em; }
.lead { color:var(--ink2); margin:0 0 20px; max-width:720px; }

.timer { background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(16px,4vw,32px); text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.timer__display { font:700 clamp(64px,19vw,176px)/1.05 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:4px 0 2px; color:var(--ink); }
.timer__status { min-height:1.6em; color:var(--ink2); font-weight:600; margin:0 0 10px; }
.timer__controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.btn { padding:12px 22px; border-radius:12px; border:1px solid var(--line); background:#fff; font:600 17px system-ui,sans-serif; cursor:pointer; min-width:104px; color:var(--ink); }
.btn:hover { background:#f4f4f6; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; min-width:140px; }
.btn.primary:hover { background:#d9480f; }
.btn.small { padding:7px 12px; font-size:14px; min-width:0; }
.timer__set { display:flex; gap:8px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin:16px 0 4px; }
.timer__set label { display:grid; gap:2px; font-size:12px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.04em; }
.timer__set input, .timer__set select { width:84px; padding:9px 8px; border:1px solid var(--line); border-radius:10px; font:600 18px system-ui,sans-serif; text-align:center; background:#fff; }
.timer__presets { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0 4px; }
.timer__tools { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.timer__hint { font-size:13px; color:var(--ink2); margin:10px 0 0; }
.timer.is-done { animation:flash 1s steps(2) infinite; }
.timer.is-done .timer__display { color:#c92a2a; }
@keyframes flash { 50% { background:#fff3bf; } }
@media (prefers-reduced-motion:reduce) { .timer.is-done { animation:none; background:#fff3bf; } }
#t-stopalarm { background:#c92a2a; border-color:#c92a2a; color:#fff; }
.timer[data-phase="short"], .timer[data-phase="long"] { background:#ebfbee; }
.timer[data-phase="short"] .timer__display, .timer[data-phase="long"] .timer__display { color:#2b8a3e; }
.timer:fullscreen { display:flex; flex-direction:column; justify-content:center; border-radius:0; border:0; }
.timer:fullscreen .timer__display { font-size:min(30vw,42vh); }

.laps { list-style:none; padding:0; margin:14px auto 0; max-width:420px; max-height:260px; overflow:auto; text-align:left; font-variant-numeric:tabular-nums; }
.laps li { display:grid; grid-template-columns:1fr 1fr 1fr; padding:6px 4px; border-bottom:1px solid var(--line); font-size:15px; }
.laps li span:nth-child(n+2) { text-align:right; font-family:ui-monospace,Menlo,monospace; }
.pomo-count { font-size:15px; color:var(--ink2); margin:0 0 6px; }

.seo { margin-top:32px; }
.seo h2 { font-size:22px; margin:28px 0 8px; }
.seo li { margin:4px 0; }
.seo details { border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 14px; margin:8px 0; }
.seo summary { font-weight:600; cursor:pointer; }
.seo details p { margin:8px 0 0; color:var(--ink2); }
.related a { display:inline-block; margin:2px 8px 2px 0; }
.ad-slot { margin:20px 0; }
@media print { .timer__controls, .timer__tools { display:none; } }