/* Umumiy qo'llanma uslublari — bosib chiqarish, animatsiya va yordamchi sinflar. Manba: guides/inline/*.html dan ajratildi. */ /* Pochtam ilovasi ichida ochilganda qo'llanmani ilova dizayniga moslash */ /* Shriftlar dagi orqali bloklamasdan yuklanadi (tools/seo.mjs). */ :root{ --indigo-50:#ECECFC; --indigo-100:#E2E3FA; --indigo-200:#D2D3F6; --indigo-300:#AEB0F3; --indigo-500:#494FE9; --indigo-600:#1A1FB0; --indigo-700:#13189D; --indigo-900:#0C0F62; --slate-50:#F8F8FC; --slate-100:#F1F1F8; --slate-200:#E3E4EE; --slate-300:#CECEDD; --slate-400:#999AAE; --slate-500:#575872; --slate-600:#575872; --slate-700:#282944; --slate-800:#1A1A32; --slate-900:#131429; --green:#0F7B3E; --green-bg:#E9F8EF; --amber:#B45309; --amber-bg:#FDF3E3; --red:#9B1C1C; --red-bg:#FCEAEA; --sky:#2456C8; --sky-bg:#E9EAFD; --radius:22px; --radius-sm:14px; --shadow-sm:0 1px 4px -2px rgba(16,18,45,.08); --shadow:0 2px 8px -4px rgba(16,18,45,.10); --shadow-lg:0 8px 20px -10px rgba(17,21,132,.34); --font:'Onest','XY Flags','Noto Color Emoji',system-ui,-apple-system,sans-serif; /* Sahifaning yon bo'shlig'i. Chetgacha cho'ziladigan bloklar (bo'lim tasmasi) shu qiymatdan foydalanadi — ikki joyda ikki xil son yozilib qolmasin. */ --xy-pad:14px; } /* Xavfsizlik chorasi: qandaydir blok bir-ikki piksel chetga chiqib qolsa ham sahifa yon tomonga surilmaydi (clip — hidden'dan farqli, sticky'ni buzmaydi). */ html{overflow-x:clip} body{background:#F6F7FB;color:#1A1A32;font-size:14.5px;letter-spacing:-.012em} .wrap{max-width:100%;padding:0 var(--xy-pad) 40px} ::-webkit-scrollbar{width:0;height:0} *{scrollbar-width:none} /* Hero — gradient sarlavha o'rniga ilovadagi yengil karta */ header.hero{background:#FFFFFF;color:#131429;padding:16px 0 20px;border-bottom:1px solid #F1F1F8} header.hero::before,header.hero::after{display:none} .hero-in{padding:0 16px} .badge-top{background:#F1F1F8;border:none;color:#575872;font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:5px 11px 5px 8px;backdrop-filter:none} h1{font-family:'Onest',system-ui,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.7px;margin:12px 0 6px;color:#131429} .hero p{color:#575872;font-size:13.5px;opacity:1;line-height:1.55;text-wrap:pretty} .hero-stats{gap:7px;margin-top:14px} .hstat{background:#F1F1F8;border:none;border-radius:14px;padding:9px 12px;backdrop-filter:none} .hstat b{font-family:'Onest',system-ui,sans-serif;font-size:15px;font-weight:800;color:#1A1FB0;letter-spacing:-.3px} .hstat span{font-size:10.5px;color:#575872;font-weight:600} /* Tab qatori — ilovadagi chip uslubi */ nav.tabs{margin-top:0;border-radius:0;box-shadow:none;background:#F6F7FB;border-bottom:1px solid #F1F1F8;backdrop-filter:none} .tabs-scroll{padding:9px 12px;gap:6px} .tab{background:#FFFFFF;border-radius:999px;font-size:12.5px;font-weight:700;color:#131429;padding:8px 14px;box-shadow:var(--shadow-sm)} .tab:hover{background:#F1F1F8;color:#131429} .tab.active{background:linear-gradient(155deg,#494FE9,#13189D);color:#fff;box-shadow:0 4px 14px -6px rgba(26,31,176,.26)} .tab .n{display:none} /* Sarlavhalar */ section.panel{padding-top:20px} h2{font-family:'Onest',system-ui,sans-serif;font-size:21px;font-weight:800;letter-spacing:-.6px;padding-left:0;color:#131429} h2::before{display:none} .sub{padding-left:0;font-size:13.5px;color:#575872;line-height:1.55;margin-bottom:18px} h3{font-family:'Onest',system-ui,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.3px;margin:24px 0 10px} h4{font-weight:800;letter-spacing:-.2px} /* Kartalar */ .card,.method{border:none;border-radius:var(--radius);box-shadow:var(--shadow);background:#FFFFFF} .method:hover{border:none;box-shadow:0 4px 14px -6px rgba(26,31,176,.26);transform:none} .method .tag{border-radius:0 var(--radius) 0 14px;background:#1A1FB0;font-size:10px;letter-spacing:.4px} .method .who{background:#ECECFC;color:#1A1FB0;border-radius:8px;font-size:11.5px;font-weight:700} /* Eslatma bloklari */ .note{border-left:none;border-radius:18px;padding:13px 15px;font-size:13px;line-height:1.55} .note.info{background:#E9EAFD;color:#1E3F91} .note.warn{background:#FDF3E3;color:#8A4308} .note.dang{background:#FDECEE;color:#A50C24} .note.ok{background:#E9F8EF;color:#0B5B2E} /* Bosqichlar */ .wiz-progress i{height:6px;background:#E3E4EE} .wiz-progress i.done{background:#AEB0F3} .wiz-progress i.now{background:#1A1FB0} .step-num{border-radius:14px;background:linear-gradient(155deg,#494FE9,#13189D);box-shadow:0 4px 14px -6px rgba(26,31,176,.26)} .step-title{font-family:'Onest',system-ui,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.4px} .step-meta{font-size:11.5px;color:#575872;font-weight:700} .step-body{font-size:14px;color:#282944} .dot{border:none;border-radius:12px;background:#FFFFFF;color:#575872;box-shadow:var(--shadow-sm);width:32px;height:32px} .dot.active{background:linear-gradient(155deg,#494FE9,#13189D);color:#fff} .dot.seen{background:#ECECFC;color:#1A1FB0} /* Tugmalar */ .btn{border-radius:18px;padding:14px 20px;font-weight:700;font-size:14.5px} .btn.primary{background:linear-gradient(155deg,#494FE9,#13189D);box-shadow:0 18px 38px -18px rgba(17,21,132,.65)} .btn.primary:hover{background:linear-gradient(155deg,#3B41E4,#101489);transform:none} .btn.ghost{background:#FFFFFF;color:#131429;box-shadow:var(--shadow-sm)} .btn.ghost:hover{background:#F1F1F8} /* Maydonlar */ label.f{font-size:11.5px;font-weight:700;color:#575872;letter-spacing:.1px} input[type=text],input[type=number],select{border:1.5px solid #E3E4EE;border-radius:14px;padding:12px 14px;font-size:15px;color:#131429} input:focus,select:focus{border-color:#1A1FB0;box-shadow:0 0 0 3px #ECECFC} .seg{background:#F1F1F8;border-radius:16px;padding:5px} .seg button{border-radius:12px;font-size:12.5px;font-weight:700;color:#575872} .seg button.on{background:#FFFFFF;color:#1A1FB0;box-shadow:var(--shadow-sm)} /* Natija kartasi */ .res{background:linear-gradient(155deg,#494FE9,#13189D);border-radius:26px;padding:20px;box-shadow:var(--shadow-lg)} .res .total{font-family:'Onest',system-ui,sans-serif;font-size:31px;font-weight:800;letter-spacing:-1px} /* Jadvallar. Telefonda jadval odatda ekranga sig'maydi va yon tomonga suriladi — lekin bu haqda hech qanday belgi yo'q edi: foydalanuvchi kesilgan ustunni ko'rib, ma'lumot yo'q deb o'ylardi. Ikki qatlamli fon chetlarda soya chizadi va u faqat surish mumkin bo'lgan tomonda turadi (`local` qatlam jadval bilan birga suriladi va soyani yopadi). */ .tblwrap{border:none;border-radius:var(--radius);box-shadow:var(--shadow); background: linear-gradient(90deg,#FFFFFF 45%,rgba(255,255,255,0)) 0 0 / 34px 100% no-repeat local, linear-gradient(270deg,#FFFFFF 45%,rgba(255,255,255,0)) 100% 0 / 34px 100% no-repeat local, linear-gradient(90deg,rgba(20,19,43,.22),rgba(20,19,43,0)) 0 0 / 20px 100% no-repeat scroll, linear-gradient(270deg,rgba(20,19,43,.22),rgba(20,19,43,0)) 100% 0 / 20px 100% no-repeat scroll, #FFFFFF} table{font-size:13px;min-width:0} /* Sarlavha yarim shaffof: chetdagi surish soyasi uning ustidan ham ko'rinsin, aks holda soya faqat pastki qatorlarda paydo bo'lardi. */ th{background:rgba(248,248,252,.86);color:#575872;font-size:10.5px;letter-spacing:.5px;border-bottom:1px solid #F1F1F8;padding:11px 12px} td{border-bottom:1px solid #F1F1F8;padding:11px 12px} /* Tor ekranda kataklar siqiladi — shunda ustunlar ikki qatorga bo'linmaydi. */ @media (max-width:430px){ table{font-size:12.5px} th{padding:10px 8px;font-size:10px;letter-spacing:.3px} td{padding:10px 8px} } tbody tr:hover{background:#F8F8FC} .pill{border-radius:9px;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:3px 8px} .pill.g{background:#E9F8EF;color:#0F7B3E} .pill.a{background:#FDF3E3;color:#B45309} .pill.r{background:#FDECEE;color:#C8102E} .pill.b{background:#ECECFC;color:#1A1FB0} .pill.s{background:#E9EAFD;color:#2456C8} /* Qidiruv, chiplar, ro'yxatlar */ .search-box input{padding-left:40px;background:#FFFFFF;box-shadow:var(--shadow-sm);border-color:transparent} .chip{border:none;background:#FFFFFF;border-radius:999px;font-size:12px;font-weight:700;color:#131429;box-shadow:var(--shadow-sm);padding:7px 13px} .chip:hover{background:#F1F1F8} .chip.on{background:linear-gradient(155deg,#494FE9,#13189D);color:#fff} .item{border:none;border-radius:18px;box-shadow:var(--shadow);padding:13px 15px} .item.r{border-left:4px solid #C8102E} .item.a{border-left:4px solid #B45309} .item.g{border-left:4px solid #0F7B3E} .item .nm{font-size:14px;font-weight:700;color:#131429} .item .ds{font-size:12.5px;color:#575872} .empty{color:#999AAE;font-size:13px} /* Akkordeon, checklist, lug'at */ .acc{border:none;border-radius:18px;box-shadow:var(--shadow)} .acc button{font-size:14px;font-weight:700;color:#131429;padding:15px 44px 15px 16px} .acc button::after{color:#1A1FB0} .acc.open{border:none;box-shadow:0 4px 14px -6px rgba(26,31,176,.26)} .acc .ans{font-size:13.5px;color:#575872;line-height:1.6} .chk{border:none;border-radius:18px;box-shadow:var(--shadow-sm);padding:13px 15px} .chk:hover{background:#FBFBFE} .chk.done{background:#E9F8EF;box-shadow:none} .box{border-radius:8px;border:2px solid #CECEDD} .chk .t{font-size:13.5px;font-weight:700;color:#131429} .chk .d{font-size:12px;color:#575872} .prog-txt{background:#ECECFC;color:#1A1FB0;font-size:11.5px;font-weight:800;border-radius:999px} .gl{border:none;border-radius:16px;box-shadow:var(--shadow-sm);padding:11px 13px} .gl .zh{color:#1A1FB0;font-weight:800;font-size:15px} .gl .uz{font-size:13px;color:#282944} .gl .cp{border:none;background:#F1F1F8;border-radius:10px;color:#575872;font-weight:700} .gl .cp:hover{background:#ECECFC;color:#1A1FB0} .gl .cp.ok{background:#E9F8EF;color:#0F7B3E} .kbd{background:#F1F1F8;border:none;border-radius:8px;color:#282944;font-weight:600} .mini{font-size:12.5px;color:#575872;line-height:1.55} ul.tick li{font-size:14px} .foot{color:#6B6C85;font-size:11.5px;padding-top:28px} /* ============ Interaktivlik qatlami ============ */ body{padding-bottom:0} .wrap{padding-bottom:96px} /* O'qish progressi */ nav.tabs{position:sticky;top:0} /* O'qish progressi. Kenglik emas, transform o'zgaradi: aylantirishda brauzer sahifani qaytadan o'lchashi shart emas, shuning uchun silliq ketadi. */ .xy-prog{position:absolute;left:0;bottom:-1px;height:2.5px;width:100%;background:linear-gradient(90deg,#494FE9,#13189D);border-radius:0 3px 3px 0;display:block;transform:scaleX(0);transform-origin:left center;will-change:transform} /* Pastdagi bo'lim navigatsiyasi */ .xy-secnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:8px; padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94); backdrop-filter:blur(14px);border-top:1px solid #F1F1F8} .xy-nb{flex:none;width:44px;height:44px;border:none;border-radius:16px;background:#F1F1F8;color:#1A1FB0; display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .12s} .xy-nb:hover{background:#ECECFC} .xy-nb:active{transform:scale(.94)} .xy-nb:disabled{opacity:.32;cursor:not-allowed} .xy-mid{flex:1;min-width:0;border:none;background:#FFFFFF;border-radius:16px;height:44px;cursor:pointer; font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; box-shadow:0 1px 2px rgba(20,19,43,.045),0 6px 16px -10px rgba(20,19,43,.24)} .xy-mid:active{transform:scale(.99)} .xy-mid b{font-size:13px;font-weight:800;color:#131429;letter-spacing:-.2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .xy-mid span{font-size:10px;font-weight:700;color:#575872;letter-spacing:.4px;font-variant-numeric:tabular-nums} /* Kalkulyator: to'liq natija o'z joyida qoladi, ko'z oldida esa faqat summa turadi. Yopishqoq to'liq kartochka telefon ekranining yarmini egallab, og'irlik va tarif maydonlarini to'sib qo'yardi. */ .res-mini{position:fixed;left:var(--xy-pad);right:var(--xy-pad);bottom:96px;z-index:40; display:flex;align-items:baseline;gap:9px;border:none;font-family:inherit;cursor:pointer; background:linear-gradient(155deg,#494FE9,#13189D);color:#fff;border-radius:18px; padding:12px 16px;box-shadow:0 12px 30px -14px rgba(17,21,132,.8); transition:opacity .18s ease,transform .18s ease} .res-mini.off{opacity:0;transform:translateY(10px);pointer-events:none} .res-mini .rm-l{font-size:11px;font-weight:800;letter-spacing:.5px;opacity:.7;text-transform:uppercase} .res-mini .rm-v{flex:1;text-align:right;font-size:19px;font-weight:800;letter-spacing:-.4px; font-variant-numeric:tabular-nums;white-space:nowrap} .res-mini .rm-v small{font-size:11px;font-weight:600;opacity:.75} .res-mini .rm-s{font-size:11.5px;font-weight:600;opacity:.75;white-space:nowrap} html.in-app .res-mini{bottom:14px} @media (prefers-reduced-motion:reduce){.res-mini{transition:none}} /* Tegish maydonlari va aks-sado */ .tab{min-height:36px} .tab:active{transform:scale(.96)} .chip{min-height:34px} .chip:active{transform:scale(.96)} .btn{min-height:50px} .btn:active{transform:scale(.985)} .dot{width:36px;height:36px} .dot:active{transform:scale(.94)} .gl .cp{min-height:40px;padding:8px 12px} .chk{min-height:52px;align-items:center} .acc button{min-height:52px} /* Akkordeon chevroni */ .acc button::after,.acc.open button::after{content:"";width:8px;height:8px;border-right:2.4px solid #1A1FB0; border-bottom:2.4px solid #1A1FB0;border-radius:1px;transform:translateY(-70%) rotate(45deg);transition:transform .22s ease} .acc.open button::after{transform:translateY(-20%) rotate(225deg)} /* Raqamlar tekis ustunda */ table,.res,.hstat b,.step-meta,.prog-txt{font-variant-numeric:tabular-nums} /* Sayt paneli (faqat qo'llanma mustaqil ochilganda ko'rinadi) */ #site-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px; background:var(--indigo-900);color:#fff;font-size:14px;font-family:var(--font)} #site-bar[hidden]{display:none} #site-bar a{color:#fff;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(255,255,255,.45); display:inline-flex;align-items:center;padding:2px 0;min-height:32px} #site-bar a:hover{border-bottom-color:#fff} #site-bar a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px} #site-bar span{opacity:.75} /* ---------- Mobil qulaylik ---------- Qo'llanma ilova ichida ochilganda sarlavha va tavsif ilovaning o'z sarlavhasini takrorlaydi: telefonda ular ekranning yarmidan ko'pini egallab, matn ko'rinmay qolardi. Ilova ichida ular yig'ilib, faqat asosiy raqamlar qoladi. Bo'limlar tasmasi esa yopishib turadi. */ html.in-app header.hero { padding: 12px 0 16px; } html.in-app header.hero .badge-top, html.in-app header.hero .hero-in > p { display: none; } html.in-app header.hero h1 { font-size: 17px; line-height: 1.25; margin: 0 0 10px; } /* Uchta ko'rsatkich bitta qatorda: flex bilan uchinchisi yolg'iz ikkinchi qatorga tushib, yonida bo'sh joy qolardi. */ html.in-app .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; } html.in-app .hstat { min-width: 0; overflow-wrap: anywhere; } html.in-app .hstat { padding: 8px 10px; } html.in-app .hstat b { font-size: 14px; } html.in-app .hstat span { font-size: 11px; } html.in-app .wrap { padding-bottom: 24px; } /* Ilova ichida pastda allaqachon o'z menyusi bor — qo'llanmaning bo'lim paneli ikkinchi qavat bo'lib qolmasin. Bo'limlar tepadagi yopishqoq tasmadan tanlanadi, o'qish progressi esa joyida qoladi. */ html.in-app .xy-secnav { display: none; } /* Bo'lim tasmasi doim qo'l ostida turadi. Chetgacha cho'zilishi uchun .wrap ning yon bo'shlig'i qancha bo'lsa, shuncha manfiy margin oladi — ilgari bu qiymat qo'lda 16px yozilgan, .wrap esa 14px edi va sahifa har doim 2px ga yon tomonga siljib turardi. */ nav.tabs { position: sticky; top: 0; z-index: 30; background: var(--slate-50); padding-top: 6px; margin-left: calc(-1 * var(--xy-pad)); margin-right: calc(-1 * var(--xy-pad)); padding-left: var(--xy-pad); padding-right: var(--xy-pad); } .tabs-scroll { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .tabs-scroll .tab { scroll-snap-align: start; min-height: 44px; } /* Kichik ekranlarda bo'shliqlar ixchamroq */ @media (max-width: 400px) { :root { --xy-pad: 13px; } .card { padding: 14px; } h2 { font-size: 19px; } } /* ---- "Qanday ishlaydi" motion-tushuntirishi (guide-motion.js) ---- Ilovadagi bojxona bo'limlaridagi bilan bir xil ko'rinish. */ .gm-card { background:#FFFFFF; border-radius:20px; box-shadow:0 2px 8px -4px rgba(16,18,45,.10); overflow:hidden; margin:0 0 16px; } .gm-open { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border:none; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; } .gm-open:hover { background:#F6F7FB; } .gm-play { width:44px; height:44px; border-radius:22px; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,#494FE9,#13189D); box-shadow:0 8px 20px -10px rgba(17,21,132,.34); } .gm-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .gm-txt b { font-size:15px; font-weight:700; color:#131429; } .gm-txt span { font-size:13px; font-weight:500; color:#6B6C85; } .gm-stage { position:relative; height:200px; background:linear-gradient(180deg,#F6F7FB,#EEF0FA); overflow:hidden; } .gm-stage svg { position:absolute; top:0; left:50%; width:360px; height:200px; margin-left:-180px; font-family:inherit; } .gm-body { padding:12px 16px 14px; display:flex; flex-direction:column; gap:10px; } .gm-text { display:flex; flex-direction:column; gap:4px; min-height:92px; } .gm-title { font-size:13px; font-weight:700; color:#1A1FB0; } .gm-cap { font-size:15px; color:#282944; line-height:1.5; text-wrap:pretty; } .gm-cta { min-height:44px; border-radius:14px; border:none; background:#E9EAFD; color:#13189D; font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:0 16px; } .gm-cta:hover { background:#DCDDFA; } .gm-ctl { display:flex; align-items:center; gap:8px; } .gm-btn { width:44px; height:44px; border-radius:22px; border:none; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:#E9EAFD; } .gm-btn:hover { background:#DCDDFA; } /* Segmentli vaqt chizig'i: har qadam bitta segment (bosiladi), joriy segment qadam davomiyligida to'ladi. Nuqtalar 11 qadamda tor ekranga sig'mas edi. */ .gm-seg { flex:1; min-width:0; display:flex; gap:4px; } .gm-dot { flex:1; min-width:0; height:44px; padding:0; border:none; background:none; cursor:pointer; display:flex; align-items:center; } .gm-dot span { display:block; width:100%; height:4px; border-radius:2px; background:#E3E4EE; overflow:hidden; } .gm-dot i { display:block; height:100%; width:0; background:#1A1FB0; } @keyframes gm-bar { from { width:0 } to { width:100% } } .gm-n { font-size:11px; font-weight:600; color:#6B6C85; font-variant-numeric:tabular-nums; } .gm-x { width:36px; height:36px; border-radius:18px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; } .gm-x:hover { background:#F1F1F8; } @keyframes gm-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } } @keyframes gm-pop { 0% { opacity:0; transform:scale(.6) } 70% { transform:scale(1.08) } 100% { opacity:1; transform:scale(1) } } @keyframes gm-grow { from { transform:scaleX(0) } to { transform:scaleX(1) } } @keyframes gm-fly { from { transform:translateX(-30px) } to { transform:translateX(56px) } } @keyframes gm-out { from { opacity:0; transform:translateX(-30px) } 40% { opacity:1; transform:none } to { opacity:1; transform:translateX(40px) } } @keyframes gm-tap { 0% { opacity:0; transform:scale(.4) } 50% { opacity:1; transform:scale(1) } 100% { opacity:0; transform:scale(1.5) } } .gm-in, .gm-pop, .gm-grow, .gm-fly, .gm-out, .gm-tap { transform-box:fill-box; animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.9,.3,1); } .gm-in { animation-name:gm-in; animation-duration:.5s; } .gm-pop { animation-name:gm-pop; animation-duration:.45s; } .gm-grow { animation-name:gm-grow; animation-duration:.9s; transform-origin:left center; } .gm-fly { animation-name:gm-fly; animation-duration:2.2s; animation-timing-function:cubic-bezier(.3,.7,.3,1); } .gm-out { animation-name:gm-out; animation-duration:1.6s; } .gm-tap { animation-name:gm-tap; animation-duration:1s; transform-origin:center; } @media (prefers-reduced-motion: reduce) { .gm-in, .gm-pop, .gm-grow, .gm-fly, .gm-out, .gm-tap { animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; } }