@layer components{@property --ring-progress{syntax: "<number>"; inherits: false; initial-value: 0;}.countdown-rings{display:flex;justify-content:center;align-items:center;gap:clamp(.75rem,2.5vw,2rem);perspective:800px;width:min(100%,960px);margin-inline:auto}.countdown-rings--compact{--countdown-ring-size: clamp(72px, 16vw, 120px)}.countdown-rings--default{--countdown-ring-size: clamp(86px, 18vw, 152px)}.countdown-rings--large{--countdown-ring-size: clamp(100px, 20vw, 182px)}.countdown-ring{position:relative;width:var(--countdown-ring-size, clamp(86px, 18vw, 152px));aspect-ratio:1;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.countdown-ring:hover{transform:scale(1.05) translateZ(10px)}.countdown-ring__dial{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -90deg,var(--ring-fill-secondary, var(--ring-fill, var(--tk-accent))) 0deg,var(--ring-fill, var(--tk-accent)) calc(var(--ring-progress) * 360deg),var(--ring-track, color-mix(in srgb, var(--tk-text) 12%, transparent)) calc(var(--ring-progress) * 360deg));transition:--ring-progress .8s var(--tk-ease, ease)}.countdown-ring--seconds .countdown-ring__dial{transition:--ring-progress 1s linear}.countdown-ring--days .countdown-ring__dial{animation:countdown-ring-glow 4s ease-in-out infinite}.countdown-ring__dial:after{content:"";position:absolute;inset:12%;border-radius:50%;background:var(--tk-bg);border:1px solid color-mix(in srgb,var(--tk-border, #000) 45%,transparent)}.countdown-ring__value{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.countdown-ring__value strong{font-family:var(--tk-font-mono);font-size:clamp(1.25rem,3.8vw,2.7rem);font-weight:700;line-height:1;color:var(--tk-text)}.countdown-ring__label{margin-top:.25rem;font-family:var(--tk-font-sans);font-size:clamp(.62rem,1.4vw,.82rem);font-weight:600;color:var(--tk-text-muted);text-transform:capitalize;letter-spacing:.02em}.countdown-rings--complete .countdown-ring__dial{--ring-progress: 1;animation:countdown-ring-celebrate .6s cubic-bezier(.34,1.56,.64,1)}@keyframes countdown-ring-glow{0%,to{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 22px -6px var(--ring-fill, var(--tk-accent))}}@keyframes countdown-ring-celebrate{0%{transform:scale(1)}50%{transform:scale(1.13)}to{transform:scale(1)}}@media(max-width:480px){.countdown-rings{display:grid;grid-template-columns:1fr 1fr;gap:1rem;justify-items:center}}@media(prefers-reduced-motion:reduce){.countdown-ring,.countdown-ring__dial,.countdown-ring:hover,.countdown-ring--days .countdown-ring__dial,.countdown-rings--complete .countdown-ring__dial{animation:none!important;transition:none!important;transform:none!important}}}@layer components{.event-countdown-page{--event-accent: var(--tk-accent)}.event-countdown-hero{max-width:960px;margin:0 auto;padding:2rem 1.5rem .5rem;text-align:center}.event-countdown-hero h1{font-size:clamp(1.8rem,4.8vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}.event-countdown-hero p{max-width:70ch;margin:0 auto;color:var(--tk-text-secondary);line-height:1.7}.event-countdown-shell{max-width:960px;margin:0 auto;padding:1rem 1.5rem 0}.event-countdown-shell__meta{margin-top:1rem;text-align:center;color:var(--tk-text-secondary);font-weight:600}.event-countdown-shell__actions{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.event-countdown-shell__button{border:1px solid color-mix(in srgb,var(--event-accent, var(--tk-accent)) 45%,var(--tk-border));background:color-mix(in srgb,var(--event-accent, var(--tk-accent)) 16%,var(--tk-surface));color:var(--tk-text);border-radius:var(--tk-radius-full);padding:.65rem 1.1rem;font-weight:600;transition:transform var(--tk-duration) var(--tk-ease),box-shadow var(--tk-duration) var(--tk-ease)}.event-countdown-shell__button:hover{transform:translateY(-1px);box-shadow:0 8px 22px -14px color-mix(in srgb,var(--event-accent, var(--tk-accent)) 62%,transparent)}.event-countdown-shell__button--ghost{background:var(--tk-surface)}.event-countdown-shell__status{width:100%;text-align:center;color:var(--tk-text-muted);font-size:.875rem}.event-countdown-shell__complete{margin-top:1rem;text-align:center;font-weight:700}.event-countdown-shell__next{margin-top:.4rem;color:var(--tk-text-secondary);font-weight:500}.event-countdown-content{max-width:760px;margin:2.25rem auto;padding:0 1.5rem;line-height:1.78}.event-countdown-content h2{margin-top:1.5rem;margin-bottom:.6rem;font-size:clamp(1.1rem,2.3vw,1.4rem)}.event-countdown-content p{color:var(--tk-text-secondary)}.event-countdown-faq{max-width:760px;margin:0 auto 2rem;padding:0 1.5rem}.event-countdown-faq h2{margin-bottom:.85rem}.event-countdown-faq details{border:1px solid var(--tk-border);border-radius:10px;padding:.8rem .9rem;margin-bottom:.65rem;background:var(--tk-surface)}.event-countdown-faq summary{font-weight:600;cursor:pointer}.event-countdown-faq p{margin-top:.55rem;color:var(--tk-text-secondary)}.event-countdown-related{max-width:960px;margin:0 auto 2rem;padding:0 1.5rem}.event-countdown-related h2{margin-bottom:.85rem;text-align:center}.event-countdown-related__grid,.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem}.event-card{border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:var(--tk-surface);text-decoration:none;color:var(--tk-text);padding:1rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;transition:transform var(--tk-duration) var(--tk-ease),box-shadow var(--tk-duration) var(--tk-ease)}.event-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px -12px color-mix(in srgb,var(--card-accent, var(--tk-accent)) 52%,transparent)}.event-card__emoji{font-size:1.5rem}.event-card__name{font-weight:700}.event-card__days{font-family:var(--tk-font-mono);color:var(--tk-text-muted);font-size:.85rem}.countdown-builder,.custom-countdown-display{max-width:780px;margin:0 auto;padding:0 1.5rem}.countdown-builder__form{display:grid;gap:.9rem;margin-bottom:1rem}.countdown-builder__field{display:grid;gap:.35rem}.countdown-builder__field span{font-weight:600;font-size:.9rem}.countdown-builder__field input{border:1px solid var(--tk-border);border-radius:10px;background:var(--tk-surface);color:var(--tk-text);padding:.7rem .8rem}.countdown-builder__start,.countdown-builder__share,.custom-countdown-display__actions button{width:fit-content;border:1px solid var(--tk-border);border-radius:var(--tk-radius-full);background:var(--tk-accent);color:#fff;padding:.65rem 1.1rem;font-weight:600}.countdown-builder__error{color:var(--tk-danger);margin-bottom:.5rem}.countdown-builder__result,.custom-countdown-display{display:grid;justify-items:center;gap:.9rem;margin-bottom:1.5rem}.custom-countdown-display h1,.countdown-builder__result h2{text-align:center}.custom-countdown-display__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;align-items:center}.custom-countdown-display__actions a{color:var(--tk-text-secondary);text-decoration:underline}.custom-countdown-display__status,.countdown-builder__status{color:var(--tk-text-muted);font-size:.875rem}}
