:root{--count-accent:#8fe2da;--count-line:#29373e}.count-shell{max-width:1080px;margin:0 auto;padding:64px 28px 28px}.count-intro{margin-bottom:38px}.count-eyebrow{display:flex;align-items:center;gap:9px;color:#c2cfd3;font:600 12px var(--mono);letter-spacing:1.35px}.count-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--count-accent);box-shadow:0 0 12px #8fe2da88}.count-intro h1{font-size:53px;line-height:1.15;letter-spacing:-2px;margin:20px 0 12px}.count-intro h1 em{font-style:normal;color:var(--count-accent)}.count-intro p{font-size:16px;color:#bec9ce}.count-editor{padding:25px;border:1px solid var(--count-line);border-radius:16px;background:linear-gradient(145deg,#141e25,#10171d);box-shadow:0 15px 40px #0003}.editor-heading,.section-heading{display:flex;justify-content:space-between;align-items:flex-end}.editor-heading h2,.section-heading h2{font-size:23px;margin:8px 0 0}.local-badge{border:1px solid #35504e;border-radius:999px;padding:7px 11px;color:#b7d9d6;font-size:11px}.count-form{display:grid;grid-template-columns:1.05fr 1.3fr .95fr auto;gap:12px;align-items:end;margin-top:22px}.count-form label{display:block;color:#c2cdd1;font-size:13px}.count-form input,.count-form select{display:block;width:100%;height:46px;margin-top:7px;border:1px solid #37464e;border-radius:8px;background:#0b1318;color:#eff4f5;padding:0 11px;font:14px var(--sans);outline:none}.count-form input:focus,.count-form select:focus{border-color:var(--count-accent)}.add-event{height:46px;padding:0 15px;border:1px solid #92dbd0;border-radius:8px;background:var(--count-accent);color:#0d2423;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}.add-event:hover{filter:brightness(1.08);transform:translateY(-1px)}.add-event b{font-size:17px;margin-left:5px}.active-countdowns,.holiday-section{margin-top:46px}.section-heading p{margin:8px 0 0;color:#aebdc2;font-size:13px}.event-total{font-size:13px;color:#b6c5ca}.count-list{display:grid;gap:13px;margin-top:17px}.count-card{display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto;gap:20px;align-items:center;padding:19px 21px;border:1px solid #2e3c43;border-radius:13px;background:#111920;animation:count-in .3s ease both}.count-card.running{border-color:#4f807a;box-shadow:inset 0 0 0 1px #8fe2da14}.count-title{font-size:17px;font-weight:800;color:#f0f5f6;overflow-wrap:anywhere}.count-target{font:12px var(--mono);color:#b4c4c8;margin-top:7px}.count-zone{font:11px var(--mono);color:#94aaa9;margin-top:4px}.count-clock{display:grid;grid-template-columns:repeat(4,minmax(52px,1fr));gap:7px}.time-unit{padding:10px 5px;border:1px solid #28383c;border-radius:9px;background:#0b1318;text-align:center}.time-number{display:block;font:700 clamp(19px,3vw,30px) var(--mono);color:#eaf7f4;font-variant-numeric:tabular-nums;transition:transform .2s,color .2s}.time-number.tick-change{animation:digit-tick .35s ease}.time-label{display:block;margin-top:5px;color:#aabbbd;font-size:10px}.past-time .time-number{color:#ffb6a7}.past-label{color:#ffc0b2;font-size:11px;margin-top:7px}.count-actions{display:flex;gap:8px;justify-content:flex-end}.count-actions button{height:37px;padding:0 11px;border:1px solid #3d4c50;border-radius:8px;background:#151f23;color:#d8e3e5;font-size:12px;font-weight:700;cursor:pointer}.count-actions .start-count{border-color:#5e9289;background:#203832;color:#cbf4eb}.count-actions button:hover{border-color:var(--count-accent);color:#e6fffa}.holiday-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}.holiday-button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:12px 14px;border:1px solid #2e3b42;border-radius:10px;background:#11191f;color:#edf2f3;text-align:left;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.holiday-button:hover{transform:translateY(-2px);border-color:#75b9ae;background:#172722}.holiday-name{font-size:13px;font-weight:700}.holiday-date{font:11px var(--mono);color:#aebfc1;white-space:nowrap}.count-guide{margin-top:54px;padding-top:30px;border-top:1px solid #29373e}.count-guide h2{font-size:28px;margin:11px 0 22px}.count-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.count-guide-grid article{min-height:155px;padding:18px;border:1px solid #29373e;border-radius:12px;background:#111920}.count-guide-grid article>b{color:var(--count-accent);font:600 13px var(--mono)}.count-guide-grid h3{font-size:16px;margin:13px 0 7px}.count-guide-grid p{margin:0;color:#bdc9cd;font-size:13px;line-height:1.7}.count-note{text-align:center;color:#9eafb4;font-size:13px;margin:26px 0 0}@keyframes count-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes digit-tick{0%{transform:translateY(8px);opacity:.55}100%{transform:translateY(0);opacity:1}}@media(max-width:900px){.count-form{grid-template-columns:1fr 1fr}.add-event{width:100%}.count-card{grid-template-columns:1fr;gap:13px}.count-actions{justify-content:flex-start}.holiday-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.count-shell{padding:46px 18px 22px}.count-intro h1{font-size:43px}.count-editor{padding:18px}.count-form{grid-template-columns:1fr}.count-card{padding:15px}.count-clock{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr))}.time-unit{padding:9px 3px}.time-label{font-size:9px}.count-actions{flex-wrap:wrap}.holiday-list,.count-guide-grid{grid-template-columns:1fr}.count-guide-grid article{min-height:0}.count-guide h2{font-size:24px}}
/* Odometer-style rolling transition for changing countdown digits */
.time-number{perspective:320px;transform-origin:50% 65%;will-change:transform,opacity}.time-number.tick-change{animation:digit-roll .42s cubic-bezier(.2,.75,.25,1) both}.time-unit{perspective:500px;overflow:hidden}.time-number.tick-change{backface-visibility:hidden}@keyframes digit-roll{0%{opacity:.2;transform:translateY(18px) rotateX(-65deg) scale(.92);filter:blur(2px)}55%{opacity:1;transform:translateY(-2px) rotateX(8deg) scale(1.02);filter:blur(0)}100%{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}}
/* Quiet clock-like digit change */
.time-number{perspective:none;will-change:opacity,transform;backface-visibility:visible}.time-unit{perspective:none}.time-number.tick-change{animation:digit-soft .18s ease-out both}@keyframes digit-soft{0%{opacity:.45;transform:translateY(3px)}100%{opacity:1;transform:translateY(0)}}
/* Move only the glyphs; keep brightness constant to prevent flicker */
.time-number.tick-change{animation:digit-nudge .16s ease-out both;opacity:1!important;filter:none!important}@keyframes digit-nudge{0%{transform:translateY(3px)}100%{transform:translateY(0)}}