@import url('styles.css?v=2');

/* Shared experience for each stand-alone timing tool. */
.site-header { position:relative; border-bottom:0; height:auto; min-height:76px; gap:16px; }
.tool-nav { display:flex; align-items:center; justify-content:center; flex:1; gap:4px; }
.tool-nav a { border-radius:999px; color:var(--muted); font-size:12px; font-weight:800; padding:8px 11px; transition:color .18s ease, background .18s ease; }
.tool-nav a:hover, .tool-nav a.active { background:var(--surface-2); color:var(--text); }
.header-actions { min-width:34px; justify-content:flex-end; }
.header-link { color:var(--muted); font-size:12px; font-weight:800; padding:8px 0; }
.header-link:hover { color:var(--accent-text); }
.tool-hero { max-width:760px; padding:52px 28px 46px; }
.tool-hero h1 { width:100%; max-width:720px; margin:0 auto 28px; font-size:clamp(30px,4vw,42px); line-height:1.15; letter-spacing:-1.6px; text-align:center; }
.tool-hero>.eyebrow,.tool-hero>.intro { display:none; }
.tool-description { max-width:600px; }
.tool-card { position:relative; isolation:isolate; max-width:700px; margin:0 auto; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow); }
.tool-display { display:block; font:500 clamp(48px,10vw,94px) 'DM Mono', monospace; letter-spacing:-.08em; text-align:center; padding:28px 0 31px; font-variant-numeric:tabular-nums; line-height:1; }
.tool-display small { color:var(--accent-text); font-size:.42em; }
.input-row { display:flex; align-items:end; justify-content:center; gap:10px; margin:6px auto 24px; max-width:510px; }
.field { display:grid; gap:7px; text-align:left; flex:1; }
.field label { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.field input, .field select { width:100%; min-height:46px; appearance:none; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; color:var(--text); font:500 15px 'DM Mono', monospace; padding:12px; outline:none; }
.field input:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.preset-row { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin:-8px 0 25px; }
.preset-row button { border:1px solid var(--line); background:transparent; border-radius:999px; color:var(--muted); padding:8px 13px; font-size:11px; font-weight:800; transition:border-color .18s ease, color .18s ease, background .18s ease; }
.preset-row button:hover, .preset-row button.selected { background:color-mix(in srgb, var(--accent) 11%, transparent); border-color:var(--accent); color:var(--text); }
.tool-card .controls { margin-top:0; }
.tool-card .button { min-width:135px; border-radius:12px; }
.tool-note { color:var(--muted); font-size:11px; line-height:1.5; text-align:center; margin:18px 0 0; }
body[data-tool="timer"] .preset-row,
body[data-tool="timer"] .related-tools { display:none; }
.annual-events { width:min(920px,100%); margin:54px auto 10px; padding:0 28px; }
.annual-events-heading { max-width:560px; margin-bottom:21px; }
.annual-events-heading .eyebrow { margin-bottom:8px; }
.annual-events-heading h2 { margin:0 0 7px; font-size:clamp(24px,3vw,32px); letter-spacing:-1.4px; }
.annual-events-heading p:last-child { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.annual-events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.event-card { display:flex; min-width:0; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--text); text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.event-card:hover,.event-card:focus-visible { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 13px 27px color-mix(in srgb,var(--accent) 12%,transparent); outline:none; }
.event-art { flex:0 0 94px; min-height:106px; background-image:url('assets/annual-events.png'); background-repeat:no-repeat; background-size:333.9% 322%; }
.event-copy { display:grid; align-content:center; gap:5px; min-width:0; padding:15px 13px; }
.event-copy strong { font-size:13px; letter-spacing:-.3px; }
.event-copy small { color:var(--muted); font-size:10px; font-weight:700; line-height:1.35; }
.event-new-year .event-art { background-position:0 0; }
.event-valentine .event-art { background-position:50% 0; }
.event-easter .event-art { background-position:97% 0; }
.event-halloween .event-art { background-position:0 49.5%; }
.event-black-friday .event-art { background-position:50% 49.5%; }
.event-christmas .event-art { background-position:97% 49.5%; }
@media(max-width:700px) { .annual-events { margin-top:42px; padding:0 18px; } .annual-events-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .event-art { flex-basis:76px; min-height:92px; } .event-copy { padding:12px 10px; } }
@media(max-width:420px) { .annual-events-grid { grid-template-columns:1fr; } .event-art { flex-basis:105px; min-height:96px; } }
.tool-content { max-width:920px; margin:auto; padding:24px 28px 82px; }
.tool-content > h2 { font-size:clamp(25px, 3vw, 32px); letter-spacing:-1.5px; margin:0 0 12px; }
.tool-content > p { color:var(--muted); line-height:1.75; max-width:720px; font-size:14px; }
.use-cases { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:30px; }
.use-cases div { min-height:142px; border:1px solid var(--line); border-radius:16px; padding:21px; background:var(--card); }
.use-cases h3 { margin:0 0 8px; font-size:14px; letter-spacing:-.3px; }
.use-cases h3 a { text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset:4px; }
.use-cases h3 a:hover { color:var(--accent-text); }
.use-cases p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.related-tools { margin-top:42px; padding-top:24px; border-top:1px solid var(--line); }
.related-tools h2 { margin:0 0 14px; font-size:16px; letter-spacing:-.5px; }
.related-links { display:flex; flex-wrap:wrap; gap:8px; }
.related-links a { border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; font-weight:800; padding:9px 13px; }
.related-links a:hover { border-color:var(--accent); color:var(--text); }
.pomodoro-status { color:var(--accent-text); font-size:11px; font-weight:800; letter-spacing:1.1px; text-align:center; text-transform:uppercase; }
.alarm-message { min-height:20px; color:var(--accent-text); font-size:12px; font-weight:700; text-align:center; margin-top:15px; }
.alarm-active { color:var(--accent-text)!important; }
.lap-list-wrap { margin-top:28px; }
.site-footer { max-width:1180px; gap:20px; }
.footer-links { display:flex; gap:14px; }
.footer-links a:hover { color:var(--text); }
@media (max-width:760px) { .site-header { min-height:0; padding:14px 18px; align-items:flex-start; flex-wrap:wrap; } .site-header::after { right:18px; left:18px; } .tool-nav { order:3; flex-basis:100%; overflow-x:auto; justify-content:flex-start; padding:2px 0 4px; scrollbar-width:none; } .tool-nav::-webkit-scrollbar { display:none; } .tool-nav a { white-space:nowrap; padding:8px 10px; } .header-actions { margin-left:auto; } .tool-hero { padding:54px 18px 34px; } .tool-card { padding:20px 14px; border-radius:20px; } .tool-display { letter-spacing:-.07em; padding:25px 0 28px; } .tool-content { padding:16px 18px 58px; } .use-cases { grid-template-columns:1fr; } .use-cases div { min-height:0; } .site-footer { align-items:flex-start; flex-direction:column; padding:22px 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }