@layer base { color: inherit; border-top-width: 1px } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit } b, strong { font-weight: bolder } code, kbd, pre, samp { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em } small { font-size: 80% } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative } sub { bottom: -.25em } sup { top: -.5em } table { text-indent: 0; border-color: inherit; border-collapse: collapse } :-moz-focusring { outline: auto } progress { vertical-align: baseline } summary { display: list-item } menu, ol, ul { list-style: none } audio, canvas, embed, iframe, img, object, svg, video { vertical-align: middle; display: block } img, video { max-width: 100%; height: auto } button, input, optgroup, select, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0 } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0 } :where(select:is([multiple], [size])) optgroup { font-weight: bolder } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px } ::file-selector-button { margin-inline-end: 4px } ::placeholder { opacity: 1 } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { ::placeholder { color: currentColor } @supports (color:color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent) } } } textarea { resize: vertical } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit } ::-webkit-datetime-edit { display: inline-flex } ::-webkit-datetime-edit-fields-wrapper { padding: 0 } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field { padding-block: 0 } ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field { padding-block: 0 } ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field { padding-block: 0 } ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-second-field { padding-block: 0 } ::-webkit-datetime-edit-meridiem-field { padding-block: 0 } ::-webkit-calendar-picker-indicator { line-height: 1 } :-moz-ui-invalid { box-shadow: none } button, input:where([type=button], [type=reset], [type=submit]) { appearance: button } ::file-selector-button { appearance: button } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } [hidden]:where(:not([hidden=until-found])) { display: none !important } .absolute { position: absolute } .fixed { position: fixed } .relative { position: relative } .static { position: static } .start { inset-inline-start: var(--spacing) } .end { inset-inline-end: var(--spacing) } .block { display: block } .hidden { display: none } .table { display: table } .filter { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) } * { box-sizing: border-box } html { scroll-behavior: smooth } body { background: var(--bg); color: var(--ink); margin: 0; font-family: Inter, Manrope, Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif } a { color: inherit; text-decoration: none } p { color: var(--muted); line-height: 1.65 } h1, h2, h3 { letter-spacing: -.035em; margin: 0 } img { max-width: 100% } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px } .sr-only { clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; position: absolute !important; overflow: hidden !important } .site-header { z-index: 50; border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: #090b16eb; height: 72px; position: sticky; top: 0 } .nav-shell { max-width: var(--max); gap: 28px; height: 72px; margin: auto; padding: 0 24px } .brand, .nav-shell { align-items: center; display: flex } .brand { flex: none; width: 190px; height: 58px; overflow: hidden } .brand img { width: 100%; display: block } .nav-shell nav { align-items: center; gap: 27px; margin-left: auto; display: flex } .language-link, .nav-shell nav a { color: #cbd0df; font-size: 14px; font-weight: 650 } .language-link:hover, .nav-shell nav a:hover { color: var(--gold) } .nav-blog-menu { position: relative } .nav-blog-menu>summary { color: #cbd0df; cursor: pointer; font-size: 14px; font-weight: 650; list-style: none } .nav-blog-menu>summary::-webkit-details-marker { display: none } .nav-blog-menu>summary:after { content: "⌄"; color: var(--gold); margin-left: 6px } .nav-blog-menu>div { border: 1px solid var(--line); background: #15182d; border-radius: 14px; width: 230px; padding: 10px; display: grid; position: absolute; top: 31px; left: 50%; transform: translate(-50%); box-shadow: 0 24px 60px #00000080 } .nav-blog-menu>div a { border-radius: 8px; padding: 11px 12px; font-size: 12px } .nav-blog-menu>div a:hover { background: #ffffff0f } .language-link { border-left: 1px solid var(--line); white-space: nowrap; padding-left: 18px } .mobile-menu { display: none; position: relative } .mobile-menu summary { cursor: pointer; align-content: center; gap: 4px; width: 44px; height: 44px; padding: 10px; list-style: none; display: grid } .mobile-menu summary::-webkit-details-marker { display: none } .mobile-menu summary span { background: var(--ink); border-radius: 2px; height: 2px; display: block } .mobile-menu>div { border: 1px solid var(--line); background: #15182d; border-radius: 16px; width: 230px; padding: 10px; position: absolute; top: 50px; right: 0; box-shadow: 0 24px 60px #00000080 } .mobile-menu>div a { color: #d6d9e6; border-radius: 9px; padding: 13px 14px; font-size: 15px; display: block } .mobile-menu>div a:hover { color: var(--gold); background: #ffffff0f } .mobile-blog-submenu>summary { color: #d6d9e6; cursor: pointer; padding: 13px 14px; font-size: 15px; list-style: none } .mobile-blog-submenu>summary:after { content: "+"; float: right; color: var(--gold) } .mobile-blog-submenu[open]>summary:after { content: "−" } .mobile-blog-submenu>a { color: #9da5ba !important; padding-left: 26px !important; font-size: 13px !important } .button { background: var(--gold); color: #17130a; border: 0; border-radius: 12px; justify-content: center; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; font-weight: 850; transition: transform .2s, box-shadow .2s; display: inline-flex; box-shadow: 0 12px 30px #ffc84a29 } .button:hover { transform: translateY(-2px); box-shadow: 0 16px 38px #ffc84a40 } .button-small { min-height: 42px; padding: 0 18px; font-size: 14px } .button-secondary { color: var(--ink); box-shadow: none; background: 0 0; border: 1px solid #ffffff38 } .button-secondary:hover { border-color: var(--gold); box-shadow: none } .text-link { color: var(--gold); margin-top: 18px; font-weight: 750; display: inline-block } .kicker { color: var(--purple); text-transform: uppercase; letter-spacing: .15em; align-items: center; gap: 9px; font-size: 11px; font-weight: 900; display: inline-flex } .kicker i { background: currentColor; width: 20px; height: 2px } .kicker.light { color: var(--gold) } .hero-banner { background: #080a18; border-bottom: 1px solid #ffc84a47; position: relative; overflow: hidden } .hero-banner-track { aspect-ratio: 5/2; max-height: 768px; position: relative } .hero-banner-slide { opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility .3s; display: block; position: absolute; inset: 0; transform: scale(1.01) } .hero-banner-slide.active { opacity: 1; visibility: visible; animation: banner-in .45s both; transform: scale(1) } .hero-banner-slide img { object-fit: cover; width: 100%; height: 100%; display: block } @keyframes banner-in { 0% { opacity: .35; transform: scale(1.012) } to { opacity: 1; transform: scale(1) } } .hero-banner-arrow { z-index: 4; width: 50px; height: 50px; color: var(--gold); cursor: pointer; background: #070914b3; border: 2px solid #ffc84ad9; border-radius: 50%; margin-top: -25px; font: 500 36px/1 sans-serif; position: absolute; top: 50% } .hero-banner-arrow:hover { background: #6c3bff99 } .hero-banner-arrow.prev { left: 18px } .hero-banner-arrow.next { right: 18px } .hero-banner-dots { z-index: 4; gap: 8px; display: flex; position: absolute; bottom: 18px; left: 50%; transform: translate(-50%) } .hero-banner-dots button { cursor: pointer; background: #00000040; border: 1px solid #fff; border-radius: 50%; width: 10px; height: 10px; padding: 0 } .hero-banner-dots button.active { border-color: var(--gold); background: var(--gold); border-radius: 6px; width: 28px } .new-hero { background: radial-gradient(circle at 77% 48%, #3f7cff3b, #0000 30%), radial-gradient(circle at 62% 70%, #d93ce529, #0000 27%), linear-gradient(118deg, #090b16 10%, #11152d 62%, #0a0c19); align-items: center; min-height: 620px; display: grid; position: relative; overflow: hidden } .new-hero:before { content: ""; opacity: .28; background-image: linear-gradient(#ffffff08 1px, #0000 0), linear-gradient(90deg, #ffffff08 1px, #0000 0); background-size: 44px 44px; position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #0000, #000 65%); mask-image: linear-gradient(90deg, #0000, #000 65%) } .hero-inner { width: 100%; max-width: var(--max); grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; margin: auto; padding: 74px 24px 82px; display: grid; position: relative } .hero-content h1 { max-width: 720px; margin-top: 18px; font: 750 clamp(54px, 6vw, 82px)/.98 Inter, ui-sans-serif, sans-serif } .hero-content h1 em { color: var(--gold); font-style: normal } .hero-content>p { max-width: 650px; margin: 25px 0 0; font-size: 18px } .hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 31px; display: flex } .hero-primary { min-width: 220px } .hero-note { flex-wrap: wrap; gap: 10px; margin-top: 28px; display: flex } .hero-note span { border: 1px solid var(--line); color: #bfc5d8; border-radius: 999px; padding: 8px 11px; font-size: 12px } .hero-product { place-items: center; min-height: 450px; display: grid; position: relative } .hero-orbit { border: 1px solid #ffc84a33; border-radius: 50%; position: absolute } .orbit-one { width: 410px; height: 410px } .orbit-two { border-color: #6c3bff66; width: 310px; height: 310px } .app-logo-card { z-index: 5; background: linear-gradient(145deg, #161b3af0, #371b5be6); border: 1px solid #ffc84a52; border-radius: 28px; place-items: center; width: 360px; height: 230px; display: grid; position: relative; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 35px 80px #00000073 } .app-logo-card img { filter: drop-shadow(0 16px 18px #0000008c); width: 330px } .game-preview { z-index: 7; border: 1px solid var(--line); background: #0d1023eb; border-radius: 16px; min-width: 160px; padding: 16px 18px; position: absolute; box-shadow: 0 18px 45px #00000059 } .game-preview span { color: var(--gold); letter-spacing: .15em; font-size: 10px; font-weight: 900; display: block } .game-preview b { color: #edf0fa; letter-spacing: .08em; margin-top: 8px; display: block } .preview-one { top: 52px; right: 0 } .preview-two { bottom: 48px; left: 18px } .seo-core-section { max-width: var(--max); margin: auto; padding: 78px 24px 34px } .seo-core-heading { text-align: center; max-width: 900px; margin: 0 auto 38px } .seo-core-heading .kicker { justify-content: center } .seo-core-heading h1, .seo-core-heading h2 { color: var(--gold); text-shadow: 0 0 24px #ffc84a2e; margin-top: 15px; font-size: clamp(40px, 4.7vw, 64px); line-height: 1.04 } .seo-core-heading p { max-width: 850px; margin: 18px auto 0; font-size: 16px; line-height: 1.7 } .seo-core-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; display: grid } .seo-core-grid article { background: radial-gradient(circle at 100% 0, #6c3bff2e, #0000 34%), linear-gradient(145deg, #181b37, #111428); border: 1px solid #ffffff1a; border-radius: 20px; flex-direction: column; min-height: 260px; padding: 32px; transition: transform .22s, border-color .22s; display: flex } .seo-core-grid article:hover { border-color: #ffc84a66; transform: translateY(-4px) } .seo-core-grid article>span { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-family: monospace; font-size: 11px; font-weight: 800 } .seo-core-grid h3 { margin-top: 22px; font-size: 28px; line-height: 1.15 } .seo-core-grid p { max-width: 560px; margin-bottom: 26px; font-size: 14px; line-height: 1.65 } .seo-core-grid a { border-top: 1px solid var(--line); color: var(--gold); justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 800; display: flex } .seo-core-grid a b { font-size: 20px } .trust-bar { max-width: var(--max); z-index: 8; background: #15182d; border: 1px solid #ffffff1f; border-radius: 18px; grid-template-columns: repeat(5, 1fr); margin: 26px auto 0; display: grid; position: relative; overflow: hidden; box-shadow: 0 22px 55px #00000057 } .trust-bar div { border-right: 1px solid var(--line); flex-direction: column; justify-content: center; min-height: 90px; padding: 20px 22px; display: flex } .trust-bar div:last-child { border: 0 } .trust-bar span { color: #858ca5; text-transform: uppercase; letter-spacing: .08em; font-size: 11px } .trust-bar strong { margin-top: 7px; font-size: 13px; line-height: 1.35 } .why-section { padding-top: 90px } .why-heading { text-align: center; max-width: 860px; margin: 0 auto 44px } .why-heading .kicker { justify-content: center } .why-heading h2 { color: var(--gold); text-shadow: 0 0 24px #ffc84a33; margin-top: 15px; font-size: clamp(40px, 4.7vw, 64px); line-height: 1.04 } .why-heading p { max-width: 760px; margin: 18px auto 0; font-size: 16px } .why-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; display: grid } .why-grid article { text-align: center; background: linear-gradient(145deg, #1a1d3b, #141731); border: 1px solid #ffffff14; border-radius: 20px; flex-direction: column; justify-content: center; align-items: center; min-height: 250px; padding: 30px 28px; transition: transform .22s, border-color .22s, background .22s; display: flex; box-shadow: inset 0 1px #ffffff06 } .why-grid article:hover { background: linear-gradient(145deg, #20234a, #161932); border-color: #ffc84a59; transform: translateY(-5px) } .why-icon { width: 58px; height: 58px; color: var(--gold); background: #ffc84a14; border: 1px solid #ffc84a52; border-radius: 17px; place-items: center; margin-bottom: 24px; font-size: 29px; font-weight: 900; display: grid; box-shadow: 0 0 24px #ffc84a1f } .why-grid h3 { color: var(--gold); font-size: 23px } .why-grid p { max-width: 310px; margin: 13px 0 0; font-size: 14px; line-height: 1.6 } .section { max-width: var(--max); margin: auto; padding: 104px 24px } .section-heading { justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 42px; display: flex } .faq-heading h2, .install-intro h2, .section-heading h2 { max-width: 730px; margin-top: 15px; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05 } .section-heading>p { max-width: 430px; margin: 0 } .games-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; display: grid } .game-card { border: 1px solid var(--line); background: linear-gradient(160deg, #181c34, #101326); border-radius: 18px; flex-direction: column; min-height: 330px; padding: 26px; transition: transform .22s, border-color .22s; display: flex } .game-card:hover { border-color: #ffc84a73; transform: translateY(-5px) } .game-icon { width: 54px; height: 54px; color: var(--gold); background: #6c3bff2e; border: 1px solid #6c3bff59; border-radius: 15px; place-items: center; font-size: 24px; display: grid } .game-card small { color: #7f87a4; text-transform: uppercase; letter-spacing: .1em; margin-top: 38px; font-size: 10px } .game-card h3 { margin-top: 8px; font-size: 24px } .game-card a, .game-card p { font-size: 14px } .game-card a { color: var(--gold); justify-content: space-between; margin-top: auto; font-weight: 750; display: flex } .benefits-section { background: var(--purple) } .benefits-inner, .benefits-inner .section-heading h2 { color: #fff } .benefits-grid { border-top: 1px solid #fff3; border-left: 1px solid #fff3; grid-template-columns: repeat(4, 1fr); display: grid } .benefits-grid article { border-bottom: 1px solid #fff3; border-right: 1px solid #fff3; min-height: 245px; padding: 27px } .benefits-grid article>span { color: var(--gold); font-family: monospace } .benefits-grid h3 { margin-top: 56px; font-size: 21px } .benefits-grid p { color: #ffffffb8; font-size: 14px } .install-section { grid-template-columns: .86fr 1.14fr; align-items: start; gap: 90px; display: grid } .install-intro { position: sticky; top: 110px } .install-intro>p { max-width: 460px } .steps-list { border-top: 1px solid var(--line) } .steps-list article { border-bottom: 1px solid var(--line); grid-template-columns: 62px 1fr; gap: 24px; min-height: 150px; padding: 30px 0; display: grid } .steps-list article>span { color: #17130a; background: var(--gold); border-radius: 50%; place-items: center; width: 50px; height: 50px; font-weight: 900; display: grid } .steps-list h3 { font-size: 23px } .steps-list p { margin-bottom: 0 } .steps-list>a { color: var(--gold); justify-content: space-between; padding: 22px 0; font-weight: 750; display: flex } .showcase-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d1020 } .showcase-grid { grid-template-columns: 1.35fr .85fr; gap: 16px; display: grid } .showcase-grid figure { border: 1px solid var(--line); background: #080a13; border-radius: 18px; margin: 0; position: relative; overflow: hidden } .showcase-grid figure:first-child { grid-row: span 2 } .showcase-grid img { object-fit: cover; width: 100%; height: 100%; display: block } .showcase-grid figure:not(:first-child) { aspect-ratio: 2.5 } .showcase-grid figcaption { color: #f2f3f8; background: #090b16d1; border-radius: 8px; padding: 7px 10px; font-size: 12px; position: absolute; bottom: 14px; left: 16px } .mode-pills { grid-template-columns: repeat(5, 1fr); gap: 12px; display: grid } .mode-pills a { border: 1px solid var(--line); min-height: 130px; color: var(--gold); background: #12152a; border-radius: 16px; flex-direction: column; justify-content: end; padding: 22px; font-size: 22px; font-weight: 800; display: flex } .mode-pills a span { color: #9299af; margin-top: 7px; font-size: 12px; font-weight: 500 } .home-blog-section { padding-top: 78px } .home-blog-heading { justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 34px; display: flex } .home-blog-heading>div { max-width: 760px } .home-blog-heading h2 { color: var(--gold); margin-top: 14px; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05 } .home-blog-heading p { max-width: 620px; margin-bottom: 0 } .home-blog-heading>a { color: var(--gold); flex: none; padding-bottom: 6px; font-size: 14px; font-weight: 800 } .home-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; display: grid } .home-blog-card { border: 1px solid var(--line); background: #13162b; border-radius: 18px; min-width: 0; transition: transform .22s, border-color .22s; overflow: hidden } .home-blog-card:hover { border-color: #ffc84a6b; transform: translateY(-5px) } .home-blog-image { aspect-ratio: 16/9; background: #070916; overflow: hidden } .home-blog-image img { object-fit: cover; width: 100%; height: 100%; display: block } .home-blog-copy { padding: 22px } .home-blog-copy>div { align-items: center; gap: 10px; display: flex } .home-blog-copy>div span { min-width: 34px; color: var(--gold); text-align: center; background: #ffc84a21; border-radius: 6px; padding: 6px 8px; font-family: monospace; font-size: 10px } .home-blog-copy>div small { color: #aeb5c7; font-size: 11px; font-weight: 750 } .home-blog-copy h3 { margin-top: 15px; font-size: 23px; line-height: 1.18 } .home-blog-copy p { -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.6; display: -webkit-box; overflow: hidden } .home-blog-copy b { color: var(--gold); justify-content: space-between; margin-top: 20px; font-size: 13px; display: flex } .faq-section { grid-template-columns: .75fr 1.25fr; align-items: start; gap: 90px; display: grid } .faq-heading { position: sticky; top: 110px } .faq-heading>p { max-width: 410px } .faq-heading>a { color: var(--purple); font-weight: 800 } .faq-list details { border-top: 1px solid var(--line) } .faq-list summary { cursor: pointer; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding: 20px 0; font-weight: 750; list-style: none; display: flex } .faq-list summary::-webkit-details-marker { display: none } .faq-list summary span { color: var(--gold); font-size: 24px } .faq-list details p { margin-top: 0; padding: 0 38px 20px 0 } .final-download { max-width: var(--max); background: radial-gradient(circle at 88% 25%, #ffc84a33, #0000 25%), linear-gradient(120deg, #20124b, #38185c); border: 1px solid #ffc84a59; border-radius: 22px; justify-content: space-between; align-items: center; gap: 50px; margin: 0 auto 100px; padding: 55px 60px; display: flex; overflow: hidden } .final-download img { object-fit: cover; width: 190px; height: 60px } .final-download span { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 850 } .final-download h2 { max-width: 650px; margin-top: 12px; font-size: 38px } .final-download p { max-width: 640px } .final-download>div:last-child { text-align: center; flex-direction: column; gap: 14px; min-width: 230px; display: flex } .final-download>div:last-child>a:last-child { color: #cbd0de; font-size: 13px } .mobile-download-bar { display: none } .blog-site { background: #090b16 } .blog-crumbs { color: #8d94aa; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; font-size: 12px; display: flex } .blog-crumbs i { color: #5f6578; margin-right: 8px; font-style: normal } .blog-crumbs a { color: var(--gold) } .blog-hero, .blog-simple-hero { background: radial-gradient(circle at 83% 28%, #6c3bff59, #0000 28%), linear-gradient(125deg, #0b0e1c, #151a36 60%, #0d1021) } .blog-hero { min-height: auto; padding: 38px max(24px, calc((100vw - var(--max))/ 2 + 24px)) 48px } .blog-hero .blog-crumbs { margin-bottom: 20px } .blog-simple-hero { padding: 64px max(24px, calc((100vw - var(--max))/ 2 + 24px)) 72px } .blog-hero h1, .blog-simple-hero h1 { max-width: 920px; margin-top: 12px; font-size: clamp(44px, 5vw, 62px); line-height: 1 } .blog-hero>p, .blog-simple-hero>p { max-width: 760px; margin-top: 16px; font-size: 16px } .blog-search { color: #111425; background: #fff; border: 1px solid #ffffff2e; border-radius: 12px; align-items: center; gap: 12px; max-width: 720px; min-height: 54px; margin-top: 22px; padding: 0 16px; display: flex; box-shadow: 0 14px 34px #00000038 } .blog-search>span { font-size: 27px } .blog-search input { color: #111425; background: 0 0; border: 0; outline: 0; width: 100%; font: 600 16px/1.2 inherit } .hot-searches { flex-wrap: wrap; align-items: center; gap: 8px; max-width: 900px; margin-top: 18px; display: flex } .hot-searches b { color: #939ab0; margin-right: 4px; font-size: 11px } .hot-searches button { border: 1px solid var(--line); color: #c5cad9; cursor: pointer; background: #ffffff0a; border-radius: 999px; padding: 8px 11px; font-size: 11px } .hot-searches button:hover { border-color: var(--gold); color: var(--gold) } .blog-section { max-width: var(--max); margin: auto; padding: 96px 24px } .blog-hero+.blog-section { padding-top: 52px } .blog-section.compact-top { padding-top: 20px } .blog-heading { justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 38px; display: flex } .blog-heading h2 { margin-top: 14px; font-size: clamp(38px, 4.5vw, 58px); line-height: 1.04 } .blog-heading>p { max-width: 450px; margin: 0 } .blog-heading>a { color: var(--gold); font-weight: 800 } .blog-heading.light h2 { color: #fff } .featured-grid { grid-template-columns: 1.35fr .65fr; gap: 16px; display: grid } .featured-grid .blog-card:first-child { grid-row: span 2 } .featured-grid .blog-card:first-child .blog-card-image { aspect-ratio: 1.55 } .featured-grid .blog-card:not(:first-child) { grid-template-columns: .8fr 1.2fr; display: grid } .featured-grid .blog-card:not(:first-child) .blog-card-image { height: 100% } .blog-card { border: 1px solid var(--line); background: #13162b; border-radius: 18px; min-width: 0; transition: transform .2s, border-color .2s; overflow: hidden } .blog-card:hover { border-color: #ffc84a6b; transform: translateY(-4px) } .blog-card-image { aspect-ratio: 2.5; background: #070916; position: relative; overflow: hidden } .blog-card-image img { object-fit: cover; width: 100%; height: 100%; display: block } .blog-card-image>b { background: var(--gold); color: #17130a; border-radius: 50%; place-items: center; width: 42px; height: 42px; display: grid; position: absolute; top: 14px; left: 14px } .blog-card-body { padding: 23px } .blog-card-body>div:first-child { color: var(--gold); text-transform: uppercase; letter-spacing: .07em; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 800; display: flex } .blog-card-body>div:first-child small { color: #8991a9 } .blog-card h3 { margin-top: 12px; font-size: 22px; line-height: 1.16 } .blog-card p { font-size: 13px } .blog-card-meta { border-top: 1px solid var(--line); color: #7f879c; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; margin-top: 20px; padding-top: 16px; font-size: 10px; display: flex } .blog-read-more { color: var(--gold); align-items: center; gap: 8px; margin-top: 18px; font-size: 12px; font-weight: 800; display: inline-flex } .blog-read-more span { font-size: 18px } .blog-list-card { border-radius: 20px; display: block } .blog-list-card .blog-card-image { aspect-ratio: 16/9 } .blog-list-card .blog-card-body { aspect-ratio: 16/9; flex-direction: column; min-height: 0; display: flex; overflow: hidden } .blog-list-card .blog-card-tags { flex-wrap: wrap; justify-content: flex-start; gap: 7px } .blog-list-card .blog-card-tags span { color: #bfc5d4; letter-spacing: 0; text-transform: none; background: #20243a; border-radius: 6px; padding: 6px 8px; font-size: 10px; font-weight: 750 } .blog-list-card .blog-card-tags .article-number { min-width: 34px; color: var(--gold); text-align: center; background: #ffc84a21; font-family: monospace } .blog-list-card h3 { margin-top: 14px; font-size: 22px; line-height: 1.2 } .blog-list-card h3, .blog-list-card p { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden } .blog-list-card p { color: #939aaf; margin-top: 9px; font-size: 13px; line-height: 1.45 } .blog-list-card:hover .blog-card-body { overflow-y: auto } .blog-list-card:hover h3, .blog-list-card:hover p { display: block; overflow: visible } .blog-list-card .blog-card-body::-webkit-scrollbar { width: 5px } .blog-list-card .blog-card-body::-webkit-scrollbar-thumb { background: #ffc84a73; border-radius: 5px } .blog-card-footer { color: #747c92; justify-content: space-between; align-items: center; gap: 18px; margin-top: auto; padding-top: 12px; font-size: 11px; display: flex } .blog-card-footer span { color: #aeb5c7; text-align: right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .category-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; display: grid } .category-grid a { border: 1px solid var(--line); background: linear-gradient(155deg, #1a1e38, #111426); border-radius: 17px; flex-direction: column; min-height: 250px; padding: 25px; display: flex } .category-grid a>span { width: 48px; height: 48px; color: var(--gold); background: #6c3bff33; border-radius: 13px; place-items: center; font-size: 23px; display: grid } .category-grid h3 { margin-top: 35px; font-size: 21px } .category-grid p { font-size: 13px } .category-grid small { color: var(--gold); margin-top: auto; font-weight: 750 } .learning-band { background: #5a2bc2 } .learning-grid { border-top: 1px solid #fff3; border-left: 1px solid #fff3; grid-template-columns: repeat(5, 1fr); display: grid } .learning-grid a { border-bottom: 1px solid #fff3; border-right: 1px solid #fff3; min-height: 245px; padding: 24px } .learning-grid a>span { color: var(--gold); font: 800 12px/1 monospace } .learning-grid h3 { margin-top: 57px; font-size: 19px } .learning-grid p { color: #ffffffb8; font-size: 13px } .topic-strip { scrollbar-width: thin; gap: 10px; padding-bottom: 9px; display: flex; overflow-x: auto } .topic-strip a, .topic-strip button { border: 1px solid var(--line); color: #c8cddd; cursor: pointer; background: #12152a; border-radius: 999px; flex: none; align-items: center; min-height: 48px; padding: 0 18px; font: 700 13px/1 inherit; display: inline-flex } .topic-strip a:hover, .topic-strip button.active, .topic-strip button:hover { border-color: var(--gold); color: var(--gold) } .popular-list { border-top: 1px solid var(--line) } .popular-list>a { border-bottom: 1px solid var(--line); grid-template-columns: 55px 180px 1fr 70px; align-items: center; gap: 22px; min-height: 120px; padding: 15px 0; display: grid } .popular-list>a>b { color: var(--gold); font: 800 18px/1 monospace } .popular-list img { object-fit: cover; border-radius: 10px; width: 180px; height: 85px } .popular-list span { color: #7f879f; text-transform: uppercase; font-size: 10px } .popular-list h3 { margin-top: 7px; font-size: 20px } .popular-list small { color: #858da3; text-align: right } .blog-controls { justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 30px; display: flex } .blog-controls>div { flex-wrap: wrap; gap: 8px; display: flex } .blog-controls button, .blog-controls select, .blog-empty button { border: 1px solid var(--line); color: #b9bfd0; cursor: pointer; background: #12152a; border-radius: 10px; min-height: 42px; padding: 0 13px } .blog-controls button.active { border-color: var(--gold); background: var(--gold); color: #17130a; font-weight: 800 } .blog-simple-list { border-top: 1px solid var(--line) } .blog-simple-list>a { border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 30px; min-height: 138px; padding: 24px 4px; display: grid } .blog-simple-list>a:hover h3 { color: var(--gold) } .blog-simple-list>a>div>span { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800 } .blog-simple-list h3 { margin-top: 8px; font-size: 24px; transition: color .2s } .blog-simple-list p { max-width: 760px; margin: 8px 0 0; font-size: 13px } .blog-simple-list aside { color: #8e96aa; text-align: right; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; display: grid } .blog-simple-list aside span { text-transform: uppercase; grid-column: 1/-1; font-size: 10px } .blog-simple-list aside small { font-size: 11px } .blog-simple-list aside b { color: var(--gold); font-size: 22px } .article-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; display: grid } .blog-empty { border: 1px dashed var(--line); text-align: center; border-radius: 17px; padding: 55px } .blog-topic-section { max-width: var(--max); margin: auto; padding: 76px 24px 0 } .blog-topic-strip { padding-bottom: 14px } .blog-pagination { flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; display: flex } .blog-pagination button { border: 1px solid var(--line); color: #c7ccda; cursor: pointer; background: #12152a; border-radius: 10px; width: 44px; height: 44px; font-weight: 800 } .blog-pagination button.active { border-color: var(--gold); background: var(--gold); color: #17130a } .blog-pagination button:disabled { opacity: .35; cursor: not-allowed } .blog-glossary-promo { max-width: var(--max); background: linear-gradient(135deg, #1a2864, #5122a5); border-radius: 22px; justify-content: space-between; align-items: center; gap: 50px; margin: 0 auto 90px; padding: 48px 52px; display: flex } .blog-glossary-promo h2 { margin-top: 13px; font-size: 45px } .blog-glossary-promo p { color: #ffffffbf; max-width: 700px } .blog-glossary-promo>div>div { flex-wrap: wrap; gap: 7px; display: flex } .blog-glossary-promo>div>div span { border: 1px solid #ffffff2e; border-radius: 7px; padding: 6px 8px; font-size: 10px } .blog-glossary-promo>a { flex: none } .blog-safety { max-width: var(--max); border: 1px solid var(--line); background: #15182e; border-radius: 20px; grid-template-columns: 100px 1fr; gap: 36px; margin: 0 auto 90px; padding: 45px; display: grid } .blog-safety>strong { border: 2px solid var(--gold); width: 80px; height: 80px; color: var(--gold); border-radius: 50%; place-items: center; font-size: 23px; display: grid } .blog-safety h2 { margin-top: 12px; font-size: 38px } .blog-safety nav { flex-wrap: wrap; gap: 10px 20px; display: flex } .blog-safety nav a { color: var(--gold); font-size: 13px; font-weight: 750 } .blog-cta { max-width: var(--max); background: radial-gradient(circle at 85% 20%, #ffc84a2e, #0000 28%), #25154d; border: 1px solid #ffc84a57; border-radius: 22px; justify-content: space-between; align-items: center; gap: 50px; margin: 0 auto 96px; padding: 50px 55px; display: flex } .blog-cta>div:first-child { max-width: 700px } .blog-cta>div:first-child>span { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px } .blog-cta h2 { margin-top: 10px; font-size: 40px } .blog-cta>div:last-child { gap: 10px; display: flex } .topic-directory { grid-template-columns: repeat(3, 1fr); gap: 14px; display: grid } .topic-directory article { border: 1px solid var(--line); background: #13162b; border-radius: 17px; flex-direction: column; min-height: 280px; padding: 26px; display: flex } .topic-directory article>span { color: var(--gold); font-size: 28px } .topic-directory h2 { margin-top: 30px; font-size: 25px } .topic-directory p { font-size: 13px } .topic-directory small { color: #838ba1 } .topic-directory a { color: var(--gold); margin-top: auto; padding-top: 20px; font-size: 12px; font-weight: 750 } .alphabet { flex-wrap: wrap; gap: 6px; margin-bottom: 30px; display: flex } .alphabet a { border: 1px solid var(--line); color: #b9c0d1; border-radius: 8px; place-items: center; width: 35px; height: 35px; font-size: 12px; display: grid } .glossary-list { grid-template-columns: 1fr 1fr; gap: 12px; display: grid } .glossary-list article { border: 1px solid var(--line); background: #12152a; border-radius: 15px; grid-template-columns: 50px 1fr; gap: 20px; padding: 25px; scroll-margin-top: 90px; display: grid } .glossary-list article>span { width: 48px; height: 48px; color: var(--gold); background: #6c3bff2e; border-radius: 13px; place-items: center; font-size: 22px; display: grid } .glossary-list h2 { font-size: 23px } .glossary-list p { font-size: 13px } .glossary-list a { color: var(--gold); font-size: 12px } .category-articles { margin-top: 36px } .category-core { border: 1px solid var(--line); background: #171a31; border-radius: 17px; justify-content: space-between; align-items: center; gap: 30px; margin-top: 45px; padding: 35px; display: flex } .category-core span { color: var(--gold); text-transform: uppercase; font-size: 11px } .category-core h2 { margin-top: 8px; font-size: 30px } .article-page { max-width: var(--max); margin: auto; padding: 50px 24px 80px } .article-page>header { max-width: 1050px } .article-labels { flex-wrap: wrap; gap: 8px; display: flex } .article-labels span { border: 1px solid var(--line); color: var(--gold); text-transform: uppercase; border-radius: 999px; padding: 7px 9px; font-size: 10px; font-weight: 800 } .article-page header h1 { margin-top: 22px; font-size: clamp(48px, 6vw, 76px); line-height: 1 } .article-page header>p { max-width: 820px; font-size: 18px } .article-meta { color: #8b93aa; flex-wrap: wrap; gap: 9px 20px; margin: 24px 0; font-size: 11px; display: flex } .article-meta a { color: var(--gold) } .article-page header>img { aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--line); border-radius: 20px; width: 100% } .article-key-takeaways { background: #ffc84a12; border: 1px solid #ffc84a4d; border-radius: 16px; max-width: 1050px; margin-top: 34px; padding: 28px; scroll-margin-top: 90px } .article-key-takeaways>span { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 900 } .article-key-takeaways ul { margin: 16px 0 0; padding-left: 20px } .article-key-takeaways li { color: #d6dae5; margin-top: 9px; line-height: 1.55 } .article-layout { grid-template-columns: minmax(0, 800px) 270px; align-items: start; gap: 64px; margin-top: 45px; display: grid } .article-body { min-width: 0 } .article-toc-desktop { border: 1px solid var(--line); background: #12152a; border-radius: 14px; max-height: calc(100vh - 120px); padding: 20px; position: sticky; top: 100px; overflow-y: auto } .article-toc-desktop>strong { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; font-size: 11px; display: block } .article-toc-desktop nav a, .article-toc-mobile nav a { border-top: 1px solid var(--line); color: #a9b0c2; padding: 10px 0; font-size: 12px; line-height: 1.35; display: block } .article-toc-desktop nav a.active, .article-toc-desktop nav a:hover, .article-toc-mobile nav a.active { color: var(--gold) } .article-toc-mobile { display: none } .article-toc summary { cursor: pointer; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; justify-content: space-between; gap: 15px; font-size: 11px; font-weight: 850; list-style: none; display: flex } .article-toc summary::-webkit-details-marker { display: none } .article-toc summary span { font-size: 17px } .article-toc nav { margin-top: 13px } .article-toc a { border-top: 1px solid var(--line); color: #a9b0c2; padding: 10px 0; font-size: 12px; line-height: 1.35; display: block } .article-toc a:hover { color: var(--gold) } .article-body>section { border: 0; margin: 0 0 42px; padding: 0; scroll-margin-top: 90px } .article-body h2 { margin: 0 0 14px; font-size: 36px } .article-body li, .article-body p { color: #b2b8c9; font-size: 16px; line-height: 1.75 } .article-body p { margin: 0 0 18px } .article-body ul { margin: 16px 0 20px } .article-body li { margin-top: 10px } .quick-answer { background: #ffc84a12; border-radius: 16px; border: 1px solid #ffc84a4d !important; padding: 28px !important } .quick-answer span { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 900 } .quick-answer p { color: #e0e3ec; margin-bottom: 0 } .quick-answer ul { margin: 15px 0 0; padding-left: 20px } .quick-answer li { color: #e0e3ec } .article-note { border-left: 3px solid var(--gold); background: #15182d; margin-top: 24px; padding: 22px } .article-note b { margin-bottom: 8px; display: block } .article-note a { color: var(--gold) } .article-note nav { flex-wrap: wrap; gap: 8px 18px; display: flex } .article-table-wrap { border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 100%; margin-top: 24px; overflow-x: auto } .article-table-wrap table { border-collapse: collapse; background: #12152a; width: 100%; min-width: 560px } .article-table-wrap td, .article-table-wrap th { border-bottom: 1px solid var(--line); text-align: left; padding: 15px 17px; font-size: 13px } .article-table-wrap th { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; background: #1b1f39; font-size: 11px } .article-table-wrap td { color: #c5cad8 } .article-table-wrap tbody tr:last-child td { border-bottom: 0 } .article-steps { gap: 18px; margin: 20px 0 24px; display: grid } .article-steps article { grid-template-columns: 44px 1fr; align-items: start; gap: 16px; padding: 0; display: grid } .article-steps article>span { width: 40px; height: 40px; color: var(--gold); background: #ffc84a1f; border-radius: 10px; place-items: center; font: 850 12px/1 monospace; display: grid } .article-steps h3 { margin: 0; font-size: 17px } .article-steps p { margin: 6px 0 0; font-size: 14px } .article-alert { border-left: 3px solid var(--gold); background: #ffc84a12; border-radius: 0 12px 12px 0; margin: 36px 0 12px; padding: 24px 26px } .article-alert.safety { background: #45cd6912; border-left-color: #61d87f } .article-alert strong { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 12px } .article-alert.safety strong { color: #63dc82 } .article-alert p { margin: 8px 0 0 } .article-inline-download { background: linear-gradient(135deg, #211641, #172657); border: 1px solid #6c3bff73; border-radius: 14px; justify-content: space-between; align-items: center; gap: 24px; margin: 26px 0 12px; padding: 20px 22px; display: flex } .article-inline-download span { color: var(--gold); text-transform: uppercase; font-size: 10px; display: block } .article-inline-download strong { margin-top: 5px; display: block } .article-links nav { grid-template-columns: 1fr 1fr; gap: 9px; display: grid } .article-links nav a { border: 1px solid var(--line); color: #c7ccda; background: #12152a; border-radius: 10px; justify-content: space-between; gap: 12px; padding: 15px 16px; font-size: 13px; display: flex } .article-links nav a span { color: var(--gold) } .takeaways { gap: 9px; display: grid } .takeaways>div { border: 1px solid var(--line); background: #12152a; border-radius: 10px; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 15px; display: grid } .takeaways span { background: var(--gold); color: #17130a; border-radius: 50%; place-items: center; width: 30px; height: 30px; font-weight: 900; display: grid } .takeaways p { margin: 0; font-size: 14px } .article-cta { background: linear-gradient(135deg, #28144e, #182a65); border-radius: 16px; border: 1px solid #6c3bff66 !important; padding: 30px !important } .article-cta>div { flex-wrap: wrap; gap: 10px; display: flex } .article-risk { border: 1px solid var(--line); border-radius: 10px; padding: 18px; font-size: 12px !important } .related-section { padding-top: 20px } .related-section:has(.related-grid:empty) { display: none } .related-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; display: grid } .related-card { border: 1px solid var(--line); background: #13162b; border-radius: 16px; overflow: hidden } .related-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block } .related-card>div { padding: 20px } .related-card span { color: var(--gold); text-transform: uppercase; font-size: 10px; font-weight: 800 } .related-card h3 { margin-top: 10px; font-size: 20px; line-height: 1.25 } .related-card p { -webkit-line-clamp: 2; color: #969db0; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.5; display: -webkit-box; overflow: hidden } .related-card-meta { border-top: 1px solid var(--line); color: #838ba1; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; font-size: 10px; display: flex } .article-author-card, .article-responsible, .detail-cta { max-width: var(--max); border-radius: 20px; margin: 0 auto 30px } .detail-cta { background: radial-gradient(circle at 85% 20%, #ffc84a2e, #0000 28%), #25154d; border: 1px solid #ffc84a57; justify-content: space-between; align-items: center; gap: 45px; padding: 44px 48px; display: flex } .detail-cta>div:first-child>span { color: var(--gold); text-transform: uppercase; font-size: 10px } .detail-cta h2 { max-width: 680px; margin-top: 10px; font-size: 34px } .detail-cta>div:last-child { flex-wrap: wrap; gap: 10px; display: flex } .article-author-card { border: 1px solid var(--line); background: #15182e; grid-template-columns: 110px 1fr; gap: 30px; padding: 38px 42px; display: grid } .article-author-card .author-avatar { width: 110px; height: 110px } .article-author-card>div:last-child>span, .article-responsible span { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 850 } .article-author-card h2 { margin: 7px 0 3px; font-size: 29px } .article-author-card strong { color: #b5bbcc; font-size: 13px } .article-author-card p { max-width: 760px; margin-bottom: 8px } .article-author-card a, .article-responsible a { color: var(--gold); font-size: 13px; font-weight: 800 } .article-responsible { border: 1px solid var(--line); background: #111426; grid-template-columns: 78px 1fr; gap: 30px; margin-bottom: 80px; padding: 38px 42px; display: grid } .article-responsible>strong { border: 2px solid var(--gold); width: 70px; height: 70px; color: var(--gold); border-radius: 50%; place-items: center; font-size: 20px; display: grid } .article-responsible h2 { margin: 8px 0 7px; font-size: 30px } .article-responsible p { max-width: 880px } .article-disclaimer { background: #111426; border-radius: 14px; margin-top: 28px; border: 1px solid var(--line) !important; padding: 28px !important } .article-disclaimer h2 { margin-top: 0; font-size: 24px } .article-disclaimer p { font-size: 14px } .article-disclaimer a { color: var(--gold); font-size: 13px; font-weight: 800 } .article-author-share { grid-template-columns: 82px minmax(0, 1fr) 190px; align-items: start; gap: 24px; display: grid } .article-author-share .author-avatar { border-radius: 20px; width: 82px; height: 82px; font-size: 26px } .article-author-copy>span, .article-share>span { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 850 } .article-author-copy h2 { margin: 5px 0 2px; font-size: 25px } .article-author-copy h2 a { color: #fff } .article-author-copy strong { color: #aeb5c7; font-size: 12px } .article-author-copy p { margin-bottom: 0; font-size: 13px } .article-share nav { flex-wrap: wrap; gap: 7px; margin-top: 10px; display: flex } .article-share a, .article-share button { border: 1px solid var(--line); color: #c8cedd; cursor: pointer; background: #12152a; border-radius: 7px; padding: 8px 9px; font: 700 10px/1 inherit } .article-share a:hover, .article-share button:hover { border-color: var(--gold); color: var(--gold) } .author-hero { padding: 64px max(24px, calc((100vw - var(--max))/ 2 + 24px)) 76px; background: radial-gradient(circle at 82% 26%, #6c3bff61, #0000 30%), linear-gradient(125deg, #0b0e1c, #151a36 60%, #0d1021) } .author-profile { grid-template-columns: 132px 1fr; align-items: start; gap: 38px; max-width: 980px; display: grid } .author-avatar { border: 2px solid var(--gold); width: 132px; height: 132px; color: var(--gold); background: linear-gradient(145deg, #5a28bb, #1b2d70); border-radius: 28px; place-items: center; font-size: 38px; font-weight: 950; display: grid } .author-profile h1 { margin-top: 14px; font-size: clamp(46px, 5.8vw, 72px); line-height: 1 } .author-profile p { max-width: 760px; font-size: 17px } .author-expertise { flex-wrap: wrap; gap: 8px; margin-top: 22px; display: flex } .author-expertise span { color: #cbd0de; border: 1px solid #ffffff26; border-radius: 999px; padding: 8px 11px; font-size: 11px } .language-switch { color: var(--gold); margin-top: 24px; font-weight: 800; display: inline-block } .apk-page { background: #090b16 } .apk-breadcrumb { max-width: var(--max); color: #7f879f; gap: 9px; margin: auto; padding: 24px 24px 0; font-size: 12px; display: flex } .apk-breadcrumb a { color: var(--gold) } .apk-hero { max-width: var(--max); grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; margin: auto; padding: 64px 24px 82px; display: grid } .apk-hero h1 { max-width: 720px; margin-top: 17px; font-size: clamp(48px, 5.8vw, 76px); line-height: .98 } .apk-hero-copy>p { max-width: 680px; margin-top: 23px; font-size: 18px } .apk-hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 29px; display: flex } .apk-main-button { min-width: 210px } .apk-tags { flex-wrap: wrap; gap: 8px; margin-top: 24px; display: flex } .apk-tags span { border: 1px solid var(--line); color: #b8bed1; border-radius: 999px; padding: 8px 11px; font-size: 11px } .apk-product-card { background: linear-gradient(145deg, #392073, #14265a); border: 1px solid #ffc84a59; border-radius: 24px; padding: 24px; box-shadow: 0 28px 70px #00000061 } .apk-brand-art { background: radial-gradient(circle at 50% 35%, #ffc84a29, #0000 50%), #05071159; border-radius: 16px; place-items: center; min-height: 180px; display: grid } .apk-brand-art img { width: min(100%, 430px); height: auto } .apk-product-card dl { grid-template-columns: 1fr 1fr; margin: 18px 0 0; display: grid } .apk-product-card dl div { border-bottom: 1px solid #ffffff1f; padding: 14px 10px } .apk-product-card dt { color: #9ba3bd; text-transform: uppercase; letter-spacing: .09em; font-size: 10px } .apk-product-card dd { margin: 6px 0 0; font-size: 13px; font-weight: 760 } .apk-product-card small { color: #9ca4bc; margin-top: 15px; line-height: 1.5; display: block } .apk-section { max-width: var(--max); margin: auto; padding: 96px 24px } .apk-section-heading { max-width: 800px; margin-bottom: 40px } .apk-section-heading h2 { margin-top: 14px; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.04 } .apk-section-heading p { max-width: 700px; font-size: 16px } .apk-steps { grid-template-columns: repeat(5, 1fr); gap: 12px; display: grid } .apk-steps article { border: 1px solid var(--line); background: var(--surface); border-radius: 17px; min-height: 260px; padding: 25px 22px } .apk-steps article>span { color: var(--gold); font: 800 12px/1 monospace } .apk-steps h3 { margin-top: 58px; font-size: 20px } .apk-steps p { margin-bottom: 0; font-size: 13px } .apk-alert { background: #ffc84a12; border: 1px solid #ffc84a4d; border-radius: 14px; grid-template-columns: 190px 1fr; gap: 24px; margin-top: 18px; padding: 24px 28px; display: grid } .apk-alert b { color: var(--gold) } .apk-alert p { margin: 0 } .apk-info-section { border-top: 1px solid var(--line) } .apk-facts { border: 1px solid var(--line); border-radius: 18px; grid-template-columns: repeat(4, 1fr); display: grid; overflow: hidden } .apk-facts div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #12152a; min-height: 118px; padding: 23px } .apk-facts span { color: #8189a2; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; display: block } .apk-facts strong { margin-top: 12px; font-size: 14px; line-height: 1.45; display: block } .apk-related { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; display: grid } .apk-related a { border: 1px solid var(--line); color: var(--gold); border-radius: 11px; padding: 17px; font-size: 13px; font-weight: 750 } .apk-band { background: linear-gradient(135deg, #5424b5, #30218d) } .apk-band .apk-section-heading h2 { color: #fff } .apk-band .apk-section-heading p { color: #ffffffb8 } .apk-benefits { grid-template-columns: repeat(3, 1fr); gap: 14px; display: grid } .apk-benefits article { background: #07091c30; border: 1px solid #ffffff2e; border-radius: 18px; min-height: 230px; padding: 27px } .apk-benefits article>span { width: 48px; height: 48px; color: var(--gold); background: #ffc84a21; border-radius: 13px; place-items: center; font-size: 24px; font-weight: 900; display: grid } .apk-benefits h3 { margin-top: 35px; font-size: 21px } .apk-benefits p { color: #ffffffb8; font-size: 13px } .apk-games { grid-template-columns: repeat(5, 1fr); gap: 12px; display: grid } .apk-games a { border: 1px solid var(--line); background: linear-gradient(155deg, #191d37, #111326); border-radius: 17px; flex-direction: column; min-height: 255px; padding: 24px; display: flex } .apk-games a>span { color: var(--gold); font-size: 27px } .apk-games h3 { margin-top: 38px; font-size: 20px } .apk-games p { font-size: 13px } .apk-games b { color: var(--gold); margin-top: auto; font-size: 12px } .apk-safety { grid-template-columns: 1.35fr .65fr; gap: 18px; display: grid } .apk-safety>aside, .apk-safety>div { border-radius: 20px } .apk-safety>div { background: linear-gradient(135deg, #1d2d70, #5021a3); padding: 44px } .apk-shield { border: 2px solid var(--gold); width: 66px; height: 78px; color: var(--gold); border-radius: 34px 34px 22px 22px; place-items: center; margin-bottom: 25px; font-size: 28px; display: grid } .apk-safety h2 { margin-top: 14px; font-size: clamp(36px, 4vw, 54px); line-height: 1.04 } .apk-safety li, .apk-safety>div>p { color: #ffffffbf; line-height: 1.65 } .apk-safety ul { padding-left: 20px } .apk-inline-links { flex-wrap: wrap; gap: 10px; margin-top: 24px; display: flex } .apk-inline-links a { color: var(--gold); border: 1px solid #fff3; border-radius: 9px; padding: 10px 12px; font-size: 12px; font-weight: 750 } .apk-safety>aside { border: 1px solid var(--line); background: var(--surface-2); flex-direction: column; justify-content: center; padding: 34px; display: flex } .apk-safety aside strong { border: 2px solid var(--gold); width: 62px; height: 62px; color: var(--gold); border-radius: 50%; place-items: center; font-size: 19px; display: grid } .apk-safety aside h3 { margin-top: 34px; font-size: 26px } .apk-issues { grid-template-columns: repeat(2, 1fr); gap: 12px; display: grid } .apk-issues article { border-left: 3px solid var(--gold); background: #12152a; padding: 26px } .apk-issues h3 { font-size: 20px } .apk-issues p { margin-bottom: 0; font-size: 14px } .apk-text-link { color: var(--gold); margin-top: 24px; font-weight: 800; display: inline-block } .apk-faq { grid-template-columns: .78fr 1.22fr; align-items: start; gap: 80px; display: grid } .apk-faq .apk-section-heading { position: sticky; top: 104px } .apk-bottom-cta { max-width: var(--max); background: radial-gradient(circle at 88% 25%, #ffc84a2e, #0000 28%), linear-gradient(120deg, #25134e, #3d1c68); border: 1px solid #ffc84a59; border-radius: 22px; justify-content: space-between; align-items: center; gap: 50px; margin: 0 auto 38px; padding: 48px 52px; display: flex } .apk-bottom-cta>div:first-child { max-width: 760px } .apk-bottom-cta>div>span { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 850 } .apk-bottom-cta h2 { margin-top: 12px; font-size: 40px } .apk-cta-facts { flex-wrap: wrap; gap: 8px; display: flex } .apk-cta-facts b { border: 1px solid var(--line); color: #c8cede; border-radius: 8px; padding: 7px 9px; font-size: 10px } .apk-bottom-cta>div:last-child { text-align: center; flex-direction: column; gap: 14px; min-width: 215px; display: flex } .apk-bottom-cta>div:last-child>a:last-child { color: #c7ccda; font-size: 12px } .breadcrumb { max-width: var(--max); color: #7f879f; gap: 9px; margin: auto; padding: 28px 24px 0; font-size: 12px; display: flex } .breadcrumb a { color: var(--gold) } .breadcrumb span:last-child { white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .page-hero { max-width: var(--max); grid-template-columns: 1fr 340px; align-items: center; gap: 72px; margin: auto; padding: 80px 24px 70px; display: grid } .page-hero h1 { max-width: 820px; margin-top: 17px; font-size: clamp(48px, 6vw, 76px); line-height: 1 } .page-hero>div>p { max-width: 720px; font-size: 18px } .mini-card { background: linear-gradient(145deg, #46208b, #1c2d70); border: 1px solid #ffc84a73; border-radius: 20px; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 30px; display: flex } .mini-card span { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 850 } .mini-card b { font-size: 31px; line-height: 1.08 } .mini-card small { color: #cbd0de } .content-layout { max-width: var(--max); grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 80px; margin: auto; padding: 20px 24px 110px; display: grid } .prose>section { border-top: 1px solid var(--line); max-width: 760px; padding: 48px 0 } .section-index { color: var(--gold); font-family: monospace; font-size: 12px } .prose h2 { margin-top: 13px; font-size: 35px } .prose p { font-size: 17px } .prose ul { gap: 10px; padding: 0; list-style: none; display: grid } .prose li { border-left: 2px solid var(--purple); color: #cbd0de; background: #ffffff06; padding: 14px 16px } .side-card { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 25px; position: sticky; top: 100px } .side-card h3 { margin: 18px 0 20px; font-size: 23px } .side-card>a { border-top: 1px solid var(--line); color: #c0c6d8; justify-content: space-between; padding: 14px 0; font-size: 13px; display: flex } .side-card>a span { color: var(--gold) } .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; display: grid } .hindi-feature-card { border: 1px solid var(--line); background: linear-gradient(150deg, #1a1e38, #111426); border-radius: 17px; flex-direction: column; min-height: 230px; padding: 26px; transition: transform .2s, border-color .2s; display: flex } .hindi-feature-card:hover { border-color: #ffc84a73; transform: translateY(-4px) } .hindi-feature-card .feature-number { color: var(--gold); font: 800 12px/1 monospace } .hindi-feature-card h3 { margin-top: 42px; font-size: 22px } .hindi-feature-card p { font-size: 14px } .hindi-feature-card b { color: var(--gold); margin-top: auto; font-size: 13px } .hindi-article-layout { grid-template-columns: minmax(0, 860px) } footer { border-top: 1px solid var(--line); background: #070910 } .footer-grid { max-width: var(--max); grid-template-columns: 1.8fr repeat(3, 1fr); gap: 55px; margin: auto; padding: 66px 24px; display: grid } .footer-grid-simple { grid-template-columns: minmax(0, 1fr) auto; align-items: start } .footer-grid p { max-width: 320px; font-size: 13px } .footer-grid h3 { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 12px } .footer-grid>div>a:not(.brand) { color: #9ea5ba; margin-top: 12px; font-size: 13px; display: block } .footer-primary { flex-wrap: wrap; justify-content: flex-end; gap: 14px 32px; padding-top: 10px; display: flex } .footer-primary a { color: #aeb5c8; font-size: 13px; font-weight: 700 } .footer-primary a:hover { color: var(--gold) } .age-chip { border: 1px solid var(--line); color: #aeb4c6; border-radius: 999px; margin-top: 10px; padding: 7px 10px; font-size: 11px; display: inline-block } .footer-bottom { max-width: calc(var(--max) - 48px); border-top: 1px solid var(--line); color: #747b91; justify-content: space-between; gap: 20px; margin: auto; padding: 22px 0; font-size: 11px; display: flex } @media (max-width:1024px) { .nav-shell nav { gap: 18px } .language-link { display: none } .hero-inner { gap: 35px } .app-logo-card { width: 310px } .benefits-grid, .games-grid, .why-grid { grid-template-columns: repeat(2, 1fr) } .apk-games, .apk-steps { grid-template-columns: repeat(3, 1fr) } .apk-facts, .category-grid { grid-template-columns: repeat(2, 1fr) } .learning-grid { grid-template-columns: repeat(3, 1fr) } .article-grid, .topic-directory { grid-template-columns: repeat(2, 1fr) } .mode-pills { grid-template-columns: repeat(3, 1fr) } .feature-grid { grid-template-columns: repeat(2, 1fr) } } @media (max-width:768px) { body { padding-bottom: 66px } .nav-shell, .site-header { height: 66px } .nav-shell { gap: 12px; padding: 0 16px } .brand { width: 142px; height: 54px } .header-download, .language-link, .nav-shell nav { display: none } .mobile-menu { margin-left: auto; display: block } .hero-banner-track { aspect-ratio: 5/2 } .hero-banner-slide img { object-fit: contain; background: #080a18 } .hero-banner-arrow { width: 40px; height: 40px; margin-top: -20px; font-size: 28px } .hero-banner-arrow.prev { left: 8px } .hero-banner-arrow.next { right: 8px } .hero-banner-dots { bottom: 8px } .new-hero { min-height: auto } .hero-inner { text-align: center; grid-template-columns: 1fr; gap: 30px; padding: 54px 20px 70px } .hero-content h1 { font-size: clamp(44px, 10.5vw, 66px) } .hero-content h1, .hero-content>p { margin-left: auto; margin-right: auto } .hero-content>p { font-size: 16px } .hero-actions, .hero-note, .kicker { justify-content: center } .hero-product { min-height: 330px } .app-logo-card { width: min(82vw, 340px); height: 205px } .app-logo-card img { width: 300px } .orbit-one { width: 310px; height: 310px } .orbit-two { width: 240px; height: 240px } .preview-one { top: 18px; right: 2% } .preview-two { bottom: 16px; left: 2% } .trust-bar { border-radius: 0; grid-template-columns: 1fr 1fr; margin: 0 } .trust-bar div { border-bottom: 1px solid var(--line) } .trust-bar div:last-child { grid-column: 1/-1 } .section { padding: 76px 20px } .apk-hero { grid-template-columns: 1fr; gap: 35px; padding: 52px 20px 70px } .apk-hero h1 { font-size: 48px } .apk-section { padding: 72px 20px } .apk-section-heading h2 { font-size: 40px } .apk-benefits, .apk-games, .apk-related, .apk-steps { grid-template-columns: repeat(2, 1fr) } .apk-alert, .apk-faq, .apk-safety { grid-template-columns: 1fr } .apk-faq { gap: 30px } .apk-faq .apk-section-heading { position: static } .apk-bottom-cta { flex-direction: column; align-items: start; margin: 0 20px 32px; padding: 38px 30px } .apk-bottom-cta>div:last-child { width: 100% } .blog-hero { min-height: auto; padding: 22px 20px 26px } .blog-hero .blog-crumbs { margin-bottom: 12px } .blog-hero h1 { margin-top: 8px; font-size: 34px } .blog-hero>p { margin-top: 10px; font-size: 14px } .blog-search { min-height: 48px; margin-top: 16px } .blog-topic-section { padding: 58px 20px 0 } .blog-simple-hero { padding: 54px 20px 64px } .blog-hero h1, .blog-simple-hero h1 { font-size: 42px } .blog-hero+.blog-section { padding-top: 28px } .blog-section { padding: 72px 20px } .blog-heading { flex-direction: column; align-items: start; gap: 10px; margin-bottom: 22px } .blog-heading h2 { font-size: 34px } .blog-controls { gap: 12px; margin-bottom: 20px } .blog-controls>div { flex-wrap: nowrap; width: 100%; padding-bottom: 5px; overflow-x: auto } .blog-controls button { flex: none; min-height: 38px } .featured-grid { grid-template-columns: 1fr } .featured-grid .blog-card:first-child { grid-row: auto } .featured-grid .blog-card:not(:first-child) { display: block } .article-grid, .learning-grid { grid-template-columns: repeat(2, 1fr) } .blog-cta, .blog-glossary-promo { flex-direction: column; align-items: start; margin-left: 20px; margin-right: 20px; padding: 38px 30px } .blog-safety { grid-template-columns: 1fr; margin-left: 20px; margin-right: 20px } .popular-list>a { grid-template-columns: 42px 110px 1fr } .popular-list img { width: 110px; height: 65px } .popular-list>a>small { display: none } .article-layout { grid-template-columns: 1fr; gap: 25px } .article-toc-desktop { display: none } .article-toc-mobile { border: 1px solid var(--line); background: #12152a; border-radius: 12px; padding: 16px 18px; display: block } .article-toc-mobile summary { cursor: pointer; color: var(--gold); text-transform: uppercase; justify-content: space-between; font-size: 12px; font-weight: 850; list-style: none; display: flex } .article-toc-mobile summary::-webkit-details-marker { display: none } .article-toc-mobile nav { margin-top: 12px } .article-page header h1 { font-size: 48px } .related-grid { grid-template-columns: repeat(2, 1fr) } .article-author-card, .article-responsible, .detail-cta { margin-left: 20px; margin-right: 20px } .detail-cta { flex-direction: column; align-items: flex-start; padding: 36px 30px } .author-hero { padding: 54px 20px 64px } .author-profile { grid-template-columns: 100px 1fr; gap: 24px } .author-avatar { width: 100px; height: 100px } .why-section { padding-top: 68px } .seo-core-section { padding-top: 60px } .seo-core-heading { margin-bottom: 30px } .seo-core-heading h1, .seo-core-heading h2 { font-size: 42px } .seo-core-grid { grid-template-columns: 1fr } .why-heading { margin-bottom: 32px } .why-heading h2 { font-size: 40px } .section-heading { flex-direction: column; align-items: start; gap: 18px } .faq-heading h2, .install-intro h2, .section-heading h2 { font-size: 40px } .content-layout, .faq-section, .install-section, .page-hero { grid-template-columns: 1fr } .faq-section, .install-section { gap: 50px } .faq-heading, .install-intro, .side-card { position: static } .showcase-grid { grid-template-columns: 1fr } .showcase-grid figure:first-child { grid-row: auto } .showcase-grid figure { aspect-ratio: 2.5 } .home-blog-heading { flex-direction: column; align-items: start; gap: 16px } .home-blog-grid { grid-template-columns: repeat(2, 1fr) } .final-download { flex-direction: column; align-items: start; margin: 0 20px 76px; padding: 38px 30px } .final-download>div:last-child { width: 100% } .mobile-download-bar { z-index: 60; background: var(--gold); color: #17130a; border-radius: 12px; justify-content: center; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; font-weight: 900; display: flex; position: fixed; bottom: 10px; left: 12px; right: 12px; box-shadow: 0 15px 40px #00000073 } .page-hero { gap: 38px; padding-top: 64px } .content-layout { gap: 28px } .footer-grid { grid-template-columns: 1fr 1fr } .footer-grid-simple { grid-template-columns: 1fr } .footer-primary { justify-content: flex-start; padding-top: 0 } } @media (max-width:480px) { .hero-actions .button { width: 100% } .hero-product { margin: -15px 0; transform: scale(.92) } .game-preview { min-width: 132px; padding: 12px } .benefits-grid, .games-grid, .home-blog-grid, .mode-pills, .seo-core-grid, .why-grid { grid-template-columns: 1fr } .seo-core-section { padding: 48px 20px 24px } .seo-core-heading { text-align: left } .seo-core-heading .kicker { justify-content: flex-start } .seo-core-heading h1, .seo-core-heading h2 { font-size: 38px } .seo-core-heading p { font-size: 15px } .seo-core-grid article { min-height: 240px; padding: 26px 24px } .why-grid article { min-height: 230px; padding: 27px 22px } .apk-hero h1 { font-size: 42px } .apk-hero-actions .button { width: 100% } .apk-benefits, .apk-facts, .apk-games, .apk-issues, .apk-product-card dl, .apk-related, .apk-steps { grid-template-columns: 1fr } .apk-steps article { min-height: 220px } .apk-steps h3 { margin-top: 36px } .apk-alert { gap: 10px } .apk-safety>div { padding: 30px 24px } .apk-bottom-cta h2 { font-size: 32px } .article-grid, .category-grid, .feature-grid, .glossary-list, .learning-grid, .topic-directory { grid-template-columns: 1fr } .category-grid a { min-height: 220px } .blog-controls { flex-direction: column } .blog-controls select { width: 100% } .popular-list>a { grid-template-columns: 36px 1fr } .popular-list img { display: none } .blog-glossary-promo h2 { font-size: 36px } .blog-safety { padding: 30px } .blog-cta>div:last-child { flex-direction: column; width: 100% } .blog-cta .button { width: 100% } .category-core { flex-direction: column; align-items: start } .article-page { padding-left: 20px; padding-right: 20px } .article-page header h1 { font-size: 42px } .article-links nav, .related-grid { grid-template-columns: 1fr } .article-inline-download { flex-direction: column; align-items: flex-start } .article-author-share { grid-template-columns: 70px 1fr } .article-author-share .author-avatar { width: 70px; height: 70px } .article-share { grid-column: 1/-1 } .article-author-card, .article-responsible { grid-template-columns: 1fr; padding: 30px 24px } .article-author-card .author-avatar { width: 88px; height: 88px } .article-responsible>strong { width: 62px; height: 62px } .detail-cta .button, .detail-cta>.button { width: 100% } .blog-simple-list>a { gap: 14px } .author-profile, .blog-simple-list>a { grid-template-columns: 1fr } .blog-simple-list aside { text-align: left; justify-content: space-between; display: flex } .game-card { min-height: 280px } .benefits-grid article { min-height: 205px } .steps-list article { grid-template-columns: 52px 1fr; gap: 14px } .showcase-grid figure { aspect-ratio: 16/9 } .final-download h2 { font-size: 32px } .page-hero h1 { font-size: 45px } .footer-grid { grid-template-columns: 1fr } .footer-bottom { flex-direction: column; margin: 0 20px; padding: 20px 0 } } @media (prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; transition: none !important } } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100% } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } body { overflow-x: clip } .article-review-note { background: linear-gradient(145deg, #171a33, #101327); border: 1px solid #ffc84a45; border-radius: 16px; margin: 30px 0; padding: 26px 28px } .article-review-note>span { color: var(--gold); text-transform: uppercase; letter-spacing: .11em; font-size: 11px; font-weight: 900 } .article-review-note h2 { font-size: 25px; margin-top: 9px } .article-review-note p { font-size: 14px; margin: 10px 0 8px } .article-review-note a { color: var(--gold); font-weight: 800; overflow-wrap: anywhere } footer p { overflow-wrap: anywhere } @media(max-width:600px) { .article-review-note { padding: 22px 20px } .article-review-note h2 { font-size: 22px } } .article-body table { display: block; width: 100% !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch } .article-body td, .article-body th { min-width: 120px } :root { --bg: #07091a; --surface: #0e1430; --surface-2: #101b46; --purple: #4b2ab5; --magenta: #9d3cc6; --blue: #2756c7; --gold: #ffc83d; --ivory: #fff7e6; --ink: #f8f4eb; --muted: #a8afc4; --line: #b7c1e21f; --rail: #ffc83d73; --max: 1280px; --display: "Trebuchet MS", "Avenir Next", Avenir, "Noto Sans Devanagari", sans-serif; --body: "Avenir Next", Avenir, "Noto Sans Devanagari", "Segoe UI", sans-serif; --utility: "Arial Narrow", "Avenir Next Condensed", "Noto Sans Devanagari", sans-serif } html { background: var(--bg) } body { background: radial-gradient(circle at 12% 6%, #1827688c 0, #07091a00 30rem), linear-gradient(180deg, #080a1d 0, #07091a 36rem, #080a18 100%); color: var(--ink); font-family: var(--body); overflow-x: clip } h1, h2, h3 { font-family: var(--display); letter-spacing: -.045em } p { color: var(--muted) } ::selection { color: #100d05; background: var(--gold) } .site-header { height: 76px; background: #07091af2; border-bottom: 1px solid #ffc83d2b; backdrop-filter: blur(18px) } .nav-shell { height: 76px; max-width: var(--max); gap: 24px; padding: 0 30px } .brand { width: 204px; height: 62px } .nav-shell nav { gap: 32px } .language-link, .nav-shell nav a { color: #d2d4df; min-height: 44px; align-items: center; display: inline-flex; font-family: var(--utility); font-size: 13px; font-weight: 800; letter-spacing: .035em } .nav-shell nav a { min-width: 44px; justify-content: center; padding: 0 7px } .language-link { border-color: #ffc83d33 } .language-link:hover, .nav-shell nav a:hover { color: var(--gold) } .button { border: 1px solid #ffe394; background: linear-gradient(180deg, #ffd96a, #ffc236); border-radius: 8px; box-shadow: 0 8px 0 #7b4e06, 0 18px 34px #0007; transition: transform .16s ease, box-shadow .16s ease } .button-small { min-height: 44px } .button:hover { transform: translateY(-2px); box-shadow: 0 10px 0 #7b4e06, 0 22px 40px #0009 } .button:active { transform: translateY(5px); box-shadow: 0 3px 0 #7b4e06, 0 10px 20px #0008 } .hero-banner { isolation: isolate; border-bottom: 0; background: #050617 } .hero-banner:after { content: ""; z-index: 3; pointer-events: none; height: 16px; background: linear-gradient(180deg, #e6a61d, #704506 45%, #120c03 48%, #ffc83d 54%, #5c3503); box-shadow: 0 0 34px #ffc83d80; position: absolute; left: 0; right: 0; bottom: 0 } .hero-banner-track { aspect-ratio: 2.55/1; max-height: 720px } .hero-banner-slide { transition: opacity .55s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), visibility .55s } .hero-banner-slide.active { animation: table-reveal .9s both } .hero-banner-slide img { filter: saturate(.94) contrast(1.04) } @keyframes table-reveal { from { opacity: .2; transform: scale(1.035) } to { opacity: 1; transform: scale(1) } } .hero-banner-arrow { width: 54px; height: 54px; color: var(--ivory); background: #090b22d9; border: 1px solid #ffc83db3; border-radius: 9px; font-size: 34px; box-shadow: 0 8px 24px #0009; transition: background .18s, transform .18s } .hero-banner-arrow:hover { background: #4b2ab5e6; transform: scale(1.05) } .hero-banner-dots { bottom: 8px; gap: 0 } .hero-banner-dots button { position: relative; width: 44px; height: 44px; border: 0; background: 0 0 } .hero-banner-dots button:after { content: ""; position: absolute; width: 22px; height: 4px; border-radius: 2px; background: #fff6; left: 11px; top: 20px } .hero-banner-dots button.active { width: 48px; height: 44px; border: 0; background: 0 0 } .hero-banner-dots button.active:after { width: 34px; left: 7px; background: var(--gold) } .seo-core-section { position: relative; max-width: var(--max); padding: 112px 30px 54px } .seo-core-section:before { content: ""; pointer-events: none; position: absolute; inset: 54px 30px 0; border: 1px solid #ffc83d26; border-radius: 52% 48% 44% 56%/18% 20% 80% 82%; transform: rotate(-1.2deg) } .seo-core-heading { text-align: left; max-width: 850px; margin: 0 0 52px; position: relative } .seo-core-heading .kicker { justify-content: flex-start } .kicker { color: var(--gold); font-family: var(--utility); font-size: 10px; letter-spacing: .2em } .kicker i { width: 38px; height: 1px } .seo-core-heading h1, .seo-core-heading h2 { color: var(--ivory); text-shadow: none; margin-top: 14px; font-size: clamp(48px, 6vw, 80px); line-height: .96 } .seo-core-heading p { max-width: 760px; margin: 22px 0 0; font-size: 17px; line-height: 1.75 } .seo-core-grid { position: relative; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px } .seo-core-grid article { min-height: 270px; padding: 34px 34px 30px; border: 1px solid #8996bc2e; border-radius: 6px; background: #0d1433; box-shadow: inset 0 1px #ffffff08, 0 24px 60px #0004; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) } .seo-core-grid article:nth-child(1), .seo-core-grid article:nth-child(4) { grid-column: span 7 } .seo-core-grid article:nth-child(2), .seo-core-grid article:nth-child(3) { grid-column: span 5 } .seo-core-grid article:nth-child(1) { background: linear-gradient(135deg, #142866, #101842 70%) } .seo-core-grid article:nth-child(2) { background: linear-gradient(145deg, #32197b, #171447 78%) } .seo-core-grid article:nth-child(3) { background: linear-gradient(145deg, #1d1948, #111735) } .seo-core-grid article:nth-child(4) { background: linear-gradient(135deg, #101a40, #1b174a 78%) } .seo-core-grid article:hover { border-color: #ffc83d9c; transform: translateY(-3px) } .seo-core-grid article>span { font-size: 0; font-family: var(--utility) } .seo-core-grid article>span:after { color: var(--gold); font-size: 11px; letter-spacing: .16em; font-weight: 900 } .seo-core-grid article:nth-child(1)>span:after { content: "GAME TABLE" } .seo-core-grid article:nth-child(2)>span:after { content: "ANDROID RELEASE" } .seo-core-grid article:nth-child(3)>span:after { content: "RULE BOOK" } .seo-core-grid article:nth-child(4)>span:after { content: "TABLE VARIATIONS" } .seo-core-grid h3 { max-width: 620px; margin-top: 28px; font-size: clamp(26px, 3vw, 38px); line-height: 1.04 } .seo-core-grid p { max-width: 600px; margin-top: 16px; margin-bottom: 28px; font-size: 14px } .seo-core-grid a { border-color: #ffc83d2b; color: var(--ivory); font-size: 13px; letter-spacing: .02em } .seo-core-grid a b { color: var(--gold) } .trust-bar { max-width: calc(var(--max) - 60px); border: 1px solid #ffc83d30; border-radius: 0; background: #090e28; box-shadow: none } .trust-bar div { min-height: 82px; border-color: #ffc83d1f; padding: 18px 22px } .trust-bar span { color: #7f89a8; font-family: var(--utility); font-size: 9px; letter-spacing: .14em } .trust-bar strong { color: #e8e7ed; font-size: 12px } .home-guide-section { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: 72px; padding-top: 104px; padding-bottom: 86px; display: grid } .home-guide-intro { position: sticky; top: 112px } .android-reference h2, .home-guide-intro h2, .ranking-board-heading h2, .variation-reference h2 { color: var(--ivory); margin-top: 14px; font-size: clamp(38px, 4.6vw, 62px); line-height: 1 } .home-guide-intro>p { max-width: 530px; margin-top: 20px; font-size: 16px } .home-guide-links { flex-wrap: wrap; gap: 10px; margin-top: 28px; margin-bottom: 24px; display: flex } .home-guide-links a, .ranking-board-link, .variation-reference>a { min-height: 44px; color: var(--gold); border: 1px solid #ffc83d52; border-radius: 6px; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; font-size: 13px; font-weight: 850; display: inline-flex } .home-guide-links a:hover, .ranking-board-link:hover, .variation-reference>a:hover { color: #171005; background: var(--gold) } .table-flow { border-top: 1px solid #ffc83d52; counter-reset: round-step; list-style: none } .table-flow li { border-bottom: 1px solid #ffc83d2b; grid-template-columns: 58px 1fr; gap: 24px; min-height: 148px; padding: 28px 6px; display: grid } .table-flow li>span { width: 48px; height: 48px; color: #171005; background: var(--gold); border-radius: 50%; place-items: center; font-family: var(--utility); font-weight: 950; display: grid; box-shadow: 0 6px 0 #755006 } .table-flow h3 { font-size: 25px; line-height: 1.08 } .table-flow p { max-width: 620px; margin: 9px 0 0; font-size: 14px } .home-knowledge-section { border-top: 1px solid #ffc83d26; border-bottom: 1px solid #ffc83d26; background: #080d24; padding: 108px 30px 116px } .home-knowledge-inner { max-width: var(--max); margin: auto } .ranking-board { border: 1px solid #ffc83d42; background: #0c1332; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); padding: 44px } .ranking-board-heading { max-width: 820px } .ranking-board-heading h2 { font-size: clamp(42px, 5vw, 68px) } .ranking-board-heading p { max-width: 720px; margin: 18px 0 0 } .ranking-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #ffc83d3d; border-left: 1px solid #ffc83d24; margin-top: 38px; list-style: none; display: grid } .ranking-strip li { border-right: 1px solid #ffc83d24; border-bottom: 1px solid #ffc83d24; min-width: 0; min-height: 178px; padding: 22px 18px; display: flex; flex-direction: column } .ranking-strip strong { color: var(--ivory); font-size: 16px; line-height: 1.15 } .ranking-strip span { color: var(--gold); white-space: nowrap; margin-top: 24px; font-family: Georgia, serif; font-size: 22px; font-weight: 900; letter-spacing: .02em } .ranking-strip small { color: #8992ac; margin-top: auto; font-size: 11px; line-height: 1.45 } .ranking-board-link { margin-top: 22px } .home-reference-grid { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 18px; margin-top: 18px; display: grid } .android-reference, .variation-reference { border: 1px solid #8693b42e; background: #0c112b; min-width: 0; padding: 38px } .android-reference h2, .variation-reference h2 { font-size: clamp(34px, 3.7vw, 50px) } .variation-reference>p { max-width: 680px } .variation-reference dl { grid-template-columns: 1fr 1fr; border-top: 1px solid #ffc83d31; border-left: 1px solid #ffc83d20; margin: 28px 0; display: grid } .variation-reference dl div { border-right: 1px solid #ffc83d20; border-bottom: 1px solid #ffc83d20; min-height: 112px; padding: 18px } .variation-reference dt { color: var(--gold); font-weight: 900 } .variation-reference dd { color: var(--muted); margin: 8px 0 0; font-size: 13px; line-height: 1.55 } .android-reference { background: linear-gradient(145deg, #27146b, #14275f) } .android-reference ul { gap: 0; margin: 26px 0 30px; padding: 0; list-style: none; display: grid } .android-reference li { border-top: 1px solid #ffffff24; grid-template-columns: 110px 1fr; gap: 16px; padding: 17px 0; display: grid } .android-reference b { color: var(--gold); font-size: 13px } .android-reference li span { color: #c7ccda; font-size: 13px; line-height: 1.55 } .android-reference .button { width: 100%; min-height: 52px } .why-section { position: relative; padding-top: 118px; padding-bottom: 74px } .why-heading { text-align: left; max-width: 860px; margin: 0 0 46px } .why-heading .kicker { justify-content: flex-start } .why-heading h2 { color: var(--ivory); text-shadow: none; font-size: clamp(44px, 5vw, 68px); line-height: .98 } .why-heading p { max-width: 720px; margin: 20px 0 0 } .why-grid { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #ffc83d3b; border-left: 1px solid #ffc83d24 } .why-grid article { align-items: flex-start; text-align: left; justify-content: flex-start; min-height: 250px; border: 0; border-right: 1px solid #ffc83d24; border-bottom: 1px solid #ffc83d24; border-radius: 0; background: #0b1028; padding: 30px; box-shadow: none } .why-grid article:hover { background: #111942; border-color: #ffc83d24; transform: none } .why-icon { width: 42px; height: 42px; margin-bottom: 34px; border: 1px solid #ffc83d80; border-radius: 50%; background: #ffc83d0d; box-shadow: none; font-size: 20px } .why-grid h3 { color: var(--ivory); font-size: 22px } .why-grid p { font-size: 13px } .home-blog-section { padding-top: 72px; padding-bottom: 104px } .home-blog-heading { border-bottom: 1px solid #ffc83d33; padding-bottom: 30px; margin-bottom: 24px } .home-blog-heading h2 { color: var(--ivory); font-size: clamp(44px, 5vw, 68px); line-height: .98 } .home-blog-heading>a { border: 1px solid #ffc83d5c; border-radius: 7px; padding: 13px 16px } .home-blog-heading>a:hover { color: #151005; background: var(--gold) } .home-blog-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); grid-template-rows: 1fr 1fr; gap: 16px } .home-blog-card { border: 1px solid #8490b22b; border-radius: 5px; background: #0c112b; box-shadow: 0 24px 55px #0004 } .home-blog-card:first-child { grid-row: 1/3 } .home-blog-card:not(:first-child) { display: grid; grid-template-columns: 42% 58% } .home-blog-card:hover { border-color: #ffc83d7a; transform: translateY(-3px) } .home-blog-image { aspect-ratio: 16/9; background: linear-gradient(135deg, #101b46, #1a1350) } .home-blog-card:nth-child(1) .home-blog-image { background-image: url(/teen-patti-rules-cover.jpg) } .home-blog-card:nth-child(2) .home-blog-image { background-image: url(/teen-patti-hand-rankings-highest-to-lowest-cover.jpg) } .home-blog-card:nth-child(3) .home-blog-image { background-image: url(/pure-sequence-in-teen-patti-cover.jpg) } .home-blog-card .home-blog-image { background-size: cover; background-position: center } .home-blog-image img { opacity: 1 !important; visibility: visible !important; transition: opacity .35s ease, transform .55s ease } .home-blog-card:hover .home-blog-image img { transform: scale(1.025) } .home-blog-card:first-child .home-blog-image { aspect-ratio: 16/9 } .home-blog-card:not(:first-child) .home-blog-image { height: 100%; aspect-ratio: auto } .home-blog-card:not(:first-child) .home-blog-copy { padding: 18px } .home-blog-card:not(:first-child) .home-blog-copy p { display: none } .home-blog-copy>div span { color: #161005; background: var(--gold); border-radius: 50%; font-family: var(--utility) } .home-blog-copy>div small { color: #9ca6c4; font-family: var(--utility); letter-spacing: .08em; text-transform: uppercase } .home-blog-copy h3 { font-size: 25px; line-height: 1.08 } .home-blog-card:first-child .home-blog-copy h3 { font-size: 34px } .home-blog-copy b { color: var(--gold) } .faq-section { border-top: 1px solid #ffc83d24; grid-template-columns: .72fr 1.28fr; gap: 96px; padding-top: 118px } .faq-heading h2 { color: var(--ivory); font-size: clamp(44px, 5vw, 68px); line-height: .98 } .faq-heading>a { color: var(--gold) } .faq-heading>a, .final-download>div:last-child>a:last-child { min-height: 44px; align-items: center; display: inline-flex } .faq-list { border-top: 1px solid #ffc83d40 } .faq-list details { border-bottom: 1px solid #ffc83d24; background: 0 0 } .faq-list summary { min-height: 78px; padding: 22px 4px; font-family: var(--display); font-size: 20px } .faq-list summary span { color: var(--gold) } .faq-list details p { padding: 0 48px 26px 4px } .final-download { max-width: calc(var(--max) - 60px); border: 1px solid #ffc83d70; border-radius: 6px; background: linear-gradient(112deg, #132968, #28146b 68%, #0b112b); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); padding: 54px 56px } .final-download h2 { color: var(--ivory); font-size: clamp(34px, 4vw, 52px); line-height: 1 } footer { background: #050714; border-top: 1px solid #ffc83d2b } .footer-grid { max-width: var(--max); padding-left: 30px; padding-right: 30px } .footer-bottom { max-width: calc(var(--max) - 60px) } .footer-primary a { min-width: 44px; min-height: 44px; align-items: center; display: inline-flex } footer .footer-grid p { color: #c0c5d3; font-size: 14px; line-height: 1.75 } footer .age-chip { color: var(--ivory); border-color: #ffc83d59; background: #ffc83d0b; font-size: 12px } .footer-bottom { color: #969db3; font-size: 12px; line-height: 1.55 } @media(prefers-reduced-motion:no-preference) { .hero-banner { animation: studio-enter .55s ease both } .seo-core-heading { animation: studio-rise .65s .12s ease both } .seo-core-grid { animation: studio-rise .7s .22s ease both } @keyframes studio-enter { from { opacity: 0 } to { opacity: 1 } } @keyframes studio-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } } } @media(max-width:1024px) { .nav-shell nav { gap: 20px } .seo-core-grid article:nth-child(n) { grid-column: span 6 } .home-guide-section { gap: 48px } .ranking-strip { grid-template-columns: repeat(3, 1fr) } .home-blog-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto } .home-blog-card:first-child { grid-column: 1/-1; grid-row: auto } .home-blog-card:not(:first-child) { display: block } .home-blog-card:not(:first-child) .home-blog-image { height: auto; aspect-ratio: 16/9 } .home-blog-card:not(:first-child) .home-blog-copy p { display: block } } @media(max-width:768px) { .nav-shell, .site-header { height: 66px } .nav-shell { padding: 0 18px } .brand { width: 154px; height: 54px } .mobile-menu summary { border: 1px solid #ffc83d40; border-radius: 7px } .mobile-menu>div { border-color: #ffc83d3d; border-radius: 8px; background: #090d24 } .hero-banner-track { aspect-ratio: 5/2 } .hero-banner:after { height: 10px } .hero-banner-arrow { width: 44px; height: 44px; border-radius: 7px } .seo-core-section { padding: 74px 20px 34px } .seo-core-section:before { display: none } .seo-core-heading h1, .seo-core-heading h2 { font-size: 48px } .seo-core-grid article:nth-child(n) { grid-column: span 12 } .trust-bar { max-width: none } .home-guide-section { grid-template-columns: 1fr; gap: 38px; padding-top: 76px; padding-bottom: 72px } .home-guide-section .site-header, .home-knowledge-section .site-header { display: none !important } .home-guide-intro { position: static } .home-guide-intro h2, .ranking-board-heading h2 { font-size: 44px } .table-flow li { min-height: 130px } .home-knowledge-section { padding: 76px 20px 84px } .ranking-board { padding: 32px 26px } .home-reference-grid { grid-template-columns: 1fr } .android-reference, .variation-reference { padding: 32px 26px } .why-section { padding: 76px 20px 40px } .why-grid { grid-template-columns: 1fr 1fr } .why-grid article { min-height: 210px; padding: 24px } .why-icon { margin-bottom: 24px } .home-blog-section { padding-top: 64px; padding-bottom: 78px } .home-blog-grid { grid-template-columns: 1fr } .home-blog-card:first-child { grid-column: auto } .faq-section { grid-template-columns: 1fr; gap: 42px; padding-top: 86px } .final-download { max-width: none; margin-left: 20px; margin-right: 20px; padding: 40px 30px } } @media(max-width:480px) { .hero-banner-arrow { display: none } .hero-banner-dots { bottom: 17px } .seo-core-heading h1, .seo-core-heading h2 { font-size: 40px } .seo-core-heading p { font-size: 15px } .seo-core-grid article { min-height: 245px; padding: 28px 24px } .seo-core-grid h3 { font-size: 29px } .trust-bar { grid-template-columns: 1fr 1fr } .trust-bar div { padding: 16px; min-width: 0 } .trust-bar strong { overflow-wrap: anywhere } .home-guide-intro h2, .ranking-board-heading h2 { font-size: 36px } .home-guide-links { display: grid } .home-guide-links a { width: 100% } .table-flow li { grid-template-columns: 46px 1fr; gap: 14px; min-height: 126px; padding: 24px 0 } .table-flow li>span { width: 40px; height: 40px } .table-flow h3 { font-size: 21px } .ranking-board { padding: 28px 20px } .ranking-strip { grid-template-columns: 1fr 1fr } .ranking-strip li { min-height: 146px; padding: 18px 14px } .ranking-strip span { font-size: 19px } .ranking-strip small { color: #aab2c9; font-size: 12px; line-height: 1.5 } .home-reference-grid { gap: 14px; margin-top: 14px } .android-reference, .variation-reference { padding: 34px 18px } .ranking-board-link { width: 100% } .android-reference, .variation-reference { padding: 28px 20px } .android-reference h2, .variation-reference h2 { font-size: 34px } .variation-reference dl { grid-template-columns: 1fr } .android-reference li { grid-template-columns: 1fr; gap: 7px } .faq-heading h2, .home-blog-heading h2, .why-heading h2 { font-size: 40px } .why-grid { grid-template-columns: 1fr 1fr } .why-grid article { min-height: 208px; padding: 20px 16px } .why-grid h3 { font-size: 18px } .why-grid p { font-size: 12px; line-height: 1.55 } .why-icon { width: 38px; height: 38px; margin-bottom: 20px; font-size: 18px } .home-blog-heading>a { width: 100%; text-align: center } .home-blog-card:first-child .home-blog-copy h3 { font-size: 28px } .faq-list summary { font-size: 18px } .mobile-download-bar { display: none } } img { max-width: 100%; height: auto } .home-blog-card .home-blog-image { background-image: none !important } .article-cover, .blog-card-image, .hero-banner-track, .home-blog-image { overflow: hidden } .blog-card-image img, .home-blog-image img { aspect-ratio: 16/9; object-fit: cover } .blog-card, .home-blog-card { contain: layout paint; overflow: hidden } .blog-controls>div, .popular-topics, .topic-filter { scrollbar-width: none } .blog-controls>div::-webkit-scrollbar, .popular-topics::-webkit-scrollbar, .topic-filter::-webkit-scrollbar { display: none } @media(max-width:768px) { body { padding-bottom: 0 } main:not(.apk-page)>.mobile-download-bar { display: none !important } main.apk-page>.mobile-download-bar { z-index: 60; display: flex; position: fixed; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; min-height: 52px; border-radius: 12px } .hero-banner-track { aspect-ratio: 16/7; min-height: 0 } .hero-banner-slide img { width: 100%; height: 100%; object-fit: cover } .hero-banner-dots button { width: 34px; height: 34px } .hero-banner-dots button:after { left: 8px; top: 16px; width: 18px } .hero-banner-dots button.active { width: 38px; height: 34px } .hero-banner-dots button.active:after { left: 6px; width: 26px } .blog-hero { padding-top: 18px; padding-bottom: 24px } .blog-hero h1, .blog-simple-hero h1 { font-size: 38px; line-height: 1.06 } .blog-hero>p, .blog-simple-hero>p { font-size: 14px; line-height: 1.55 } .blog-search { margin-top: 14px } .blog-section { padding-top: 48px; padding-bottom: 54px } .article-grid, .featured-grid, .related-grid { gap: 14px } .blog-card { content-visibility: auto; contain-intrinsic-size: 420px } .blog-card-body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 24px; line-height: 1.18 } .blog-card-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .article-page header h1 { font-size: 40px; line-height: 1.08 } .article-page { padding-left: 18px; padding-right: 18px } .article-body p, .prose p { font-size: 16px; line-height: 1.72 } .article-layout, .content-layout { gap: 24px } .apk-hero { padding-top: 44px; padding-bottom: 56px } .apk-hero h1 { font-size: 38px; line-height: 1.05 } .apk-section { padding-top: 58px; padding-bottom: 60px } .apk-benefits article, .apk-games a, .apk-steps article { min-height: 0 } footer .footer-grid { padding-top: 44px; padding-bottom: 44px } } @media(max-width:480px) { .hero-banner-track { aspect-ratio: 16/8.3 } .blog-hero h1, .blog-simple-hero h1 { font-size: 34px } .article-grid, .featured-grid, .related-grid { grid-template-columns: 1fr } .article-page header h1 { font-size: 34px } .apk-hero h1 { font-size: 34px } .apk-bottom-cta, .detail-cta, .final-download { border-radius: 14px } .footer-primary { gap: 8px 18px } } :root { --bg: #2b0c58; --surface: #55158e; --surface-2: #6c22b6; --purple: #7b2bd4; --magenta: #d51aaa; --blue: #5259d8; --gold: #ffd844; --ink: #fff9fb; --muted: #e7d6ef; --line: #ffffff24 } html { background: #2b0c58 } body { background: radial-gradient(circle at 8% 4%, #ff52c466 0, #0000 22rem), linear-gradient(180deg, #d51aaa 0, #8a2bd6 18rem, #4c168d 44rem, #24094f 100%) !important; color: var(--ink) } h1, h2, h3 { letter-spacing: -.022em !important } p { color: var(--muted) } .site-header { background: #35105feb !important; border-bottom: 1px solid #ffffff20 !important; box-shadow: 0 8px 28px #21053c30 } .footer-primary a, .language-link, .nav-shell nav a { color: #f3eaf7 } .footer-primary a:hover, .language-link:hover, .nav-shell nav a:hover { color: var(--gold) } .apk-main-button, .button, .final-button, .header-download, .mobile-download-bar { color: #4b2700 !important; background: linear-gradient(180deg, #ffe86a, #ffc72e) !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 10px 22px #4d105833 !important } .apk-main-button:hover, .button:hover, .final-button:hover, .header-download:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 30px #4d10584a !important } .button-secondary { color: #fff !important; background: #ffffff12 !important; border: 1px solid #ffffff3d !important } .kicker { color: #ffe46c !important } .kicker i { opacity: .9 } .author-hero, .blog-hero, .blog-simple-hero, .hero-banner, .page-hero { background: radial-gradient(circle at 82% 18%, #ff79d455, #0000 24rem), linear-gradient(135deg, #d51aaa 0, #8e2cda 54%, #512098 100%) !important } .hero-banner { padding: 18px 16px 22px; border-bottom: 0 !important } .hero-banner:after { display: none !important } .hero-banner-track { max-width: 1280px; margin: auto; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px #26043e4a } .hero-banner-arrow { color: #4b2700 !important; background: #ffd844e8 !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 10px 24px #3a07593d !important } .hero-banner-dots button:after { background: #ffffff80 !important } .hero-banner-dots button.active:after { background: #ffd844 !important } .seo-core-section:before { display: none !important } .apk-hero h1, .apk-section-heading h2, .article-page header h1, .blog-heading h2, .faq-heading h2, .home-blog-heading h2, .page-hero h1, .section-heading h2, .seo-core-heading h1, .seo-core-heading h2, .why-heading h2 { color: #fff !important; text-shadow: none !important } .android-reference, .apk-benefits article, .apk-bottom-cta, .apk-games a, .apk-product-card, .apk-steps article, .article-author-card, .article-responsible, .blog-card, .blog-cta, .blog-glossary-promo, .blog-safety, .detail-cta, .final-download, .game-card, .home-blog-card, .mini-card, .ranking-board, .seo-core-grid article, .side-card, .variation-reference, .why-grid article { clip-path: none !important; border: 1px solid #ffffff24 !important; border-radius: 22px !important; background: linear-gradient(145deg, #ffffff18, #ffffff0b) !important; box-shadow: 0 16px 36px #24033d24 !important } .blog-card:hover, .game-card:hover, .home-blog-card:hover, .seo-core-grid article:hover, .why-grid article:hover { transform: translateY(-2px) !important; border-color: #ffe46c85 !important } .apk-facts, .article-toc-mobile, .faq-list details, .trust-bar { border-color: #ffffff24 !important; background: #ffffff12 !important; box-shadow: 0 14px 34px #24033d20 !important } .trust-bar { border-radius: 24px !important } .apk-benefits article>span, .game-icon, .why-icon { color: #4b2700 !important; background: #ffd844 !important; border: 0 !important; box-shadow: none !important } .blog-card-image, .home-blog-image { background: #ffffff14 !important } .faq-list summary { color: #fff } footer { background: #24094f !important; border-top: 1px solid #ffffff24 !important } .footer-bottom, footer .footer-grid p { color: #d9c8e4 !important } @media(max-width:768px) { .hero-banner { padding: 10px 10px 14px } .hero-banner-track { border-radius: 18px } .nav-shell, .site-header { height: 64px !important } .brand { width: 150px !important } .apk-section, .blog-section, .section, .seo-core-section { padding-left: 18px !important; padding-right: 18px !important } .apk-hero h1, .blog-hero h1, .blog-simple-hero h1, .page-hero h1, .seo-core-heading h1, .seo-core-heading h2 { font-size: 34px !important } .apk-section-heading h2, .blog-heading h2, .faq-heading h2, .home-blog-heading h2, .section-heading h2, .why-heading h2 { font-size: 32px !important; line-height: 1.08 !important } .blog-card, .home-blog-card, .seo-core-grid article, .why-grid article { border-radius: 18px !important } } @media(max-width:768px) { .hero-banner { padding: 8px 8px 12px !important } .hero-banner-track { aspect-ratio: 2.5/1 !important; min-height: 0 !important; max-height: none !important; border-radius: 14px !important; background: linear-gradient(135deg, #d51aaa 0, #8e2cda 54%, #512098 100%) !important } .hero-banner-slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background: linear-gradient(135deg, #d51aaa 0, #8e2cda 54%, #512098 100%) !important; filter: none !important } .article-cover, .blog-card-image, .home-blog-image, .showcase-grid figure { aspect-ratio: 16/9 !important; height: auto !important; background: #2b0c58 !important } .article-cover img, .article-page header img, .blog-card-image img, .home-blog-image img, .showcase-grid img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background: #2b0c58 !important } .blog-card:hover .blog-card-image img, .home-blog-card:hover .home-blog-image img { transform: none !important } .blog-controls>div { scrollbar-width: none } .blog-controls>div::-webkit-scrollbar { display: none } } @media(max-width:480px) { .hero-banner-track { aspect-ratio: 2.5/1 !important } } :root { --bg: #07091a; --surface: #0e1430; --surface-2: #101b46; --purple: #4b2ab5; --magenta: #9d3cc6; --blue: #2756c7; --gold: #ffc83d; --ivory: #fff7e6; --ink: #f8f4eb; --muted: #a8afc4; --line: #b7c1e21f; --rail: #ffc83d73; --max: 1280px; --display: "Trebuchet MS", "Avenir Next", Avenir, "Noto Sans Devanagari", sans-serif; --body: "Avenir Next", Avenir, "Noto Sans Devanagari", "Segoe UI", sans-serif; --utility: "Arial Narrow", "Avenir Next Condensed", "Noto Sans Devanagari", sans-serif } html { background: var(--bg) } body { background: radial-gradient(circle at 12% 6%, #1827688c 0, #07091a00 30rem), linear-gradient(180deg, #080a1d 0, #07091a 36rem, #080a18 100%); color: var(--ink); font-family: var(--body); overflow-x: clip } h1, h2, h3 { font-family: var(--display); letter-spacing: -.045em } p { color: var(--muted) } ::selection { color: #100d05; background: var(--gold) } .site-header { height: 76px; background: #07091af2; border-bottom: 1px solid #ffc83d2b; backdrop-filter: blur(18px) } .nav-shell { height: 76px; max-width: var(--max); gap: 24px; padding: 0 30px } .brand { width: 204px; height: 62px } .nav-shell nav { gap: 32px } .language-link, .nav-shell nav a { color: #d2d4df; min-height: 44px; align-items: center; display: inline-flex; font-family: var(--utility); font-size: 13px; font-weight: 800; letter-spacing: .035em } .nav-shell nav a { min-width: 44px; justify-content: center; padding: 0 7px } .language-link { border-color: #ffc83d33 } .language-link:hover, .nav-shell nav a:hover { color: var(--gold) } .button { border: 1px solid #ffe394; background: linear-gradient(180deg, #ffd96a, #ffc236); border-radius: 8px; box-shadow: 0 8px 0 #7b4e06, 0 18px 34px #0007; transition: transform .16s ease, box-shadow .16s ease } .button-small { min-height: 44px } .button:hover { transform: translateY(-2px); box-shadow: 0 10px 0 #7b4e06, 0 22px 40px #0009 } .button:active { transform: translateY(5px); box-shadow: 0 3px 0 #7b4e06, 0 10px 20px #0008 } .hero-banner { isolation: isolate; border-bottom: 0; background: #050617 } .hero-banner:after { content: ""; z-index: 3; pointer-events: none; height: 16px; background: linear-gradient(180deg, #e6a61d, #704506 45%, #120c03 48%, #ffc83d 54%, #5c3503); box-shadow: 0 0 34px #ffc83d80; position: absolute; left: 0; right: 0; bottom: 0 } .hero-banner-track { aspect-ratio: 2.55/1; max-height: 720px } .hero-banner-slide { transition: opacity .55s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), visibility .55s } .hero-banner-slide.active { animation: table-reveal .9s both } .hero-banner-slide img { filter: saturate(.94) contrast(1.04) } @keyframes table-reveal { from { opacity: .2; transform: scale(1.035) } to { opacity: 1; transform: scale(1) } } .hero-banner-arrow { width: 54px; height: 54px; color: var(--ivory); background: #090b22d9; border: 1px solid #ffc83db3; border-radius: 9px; font-size: 34px; box-shadow: 0 8px 24px #0009; transition: background .18s, transform .18s } .hero-banner-arrow:hover { background: #4b2ab5e6; transform: scale(1.05) } .hero-banner-dots { bottom: 8px; gap: 0 } .hero-banner-dots button { position: relative; width: 44px; height: 44px; border: 0; background: 0 0 } .hero-banner-dots button:after { content: ""; position: absolute; width: 22px; height: 4px; border-radius: 2px; background: #fff6; left: 11px; top: 20px } .hero-banner-dots button.active { width: 48px; height: 44px; border: 0; background: 0 0 } .hero-banner-dots button.active:after { width: 34px; left: 7px; background: var(--gold) } .seo-core-section { position: relative; max-width: var(--max); padding: 112px 30px 54px } .seo-core-section:before { content: ""; pointer-events: none; position: absolute; inset: 54px 30px 0; border: 1px solid #ffc83d26; border-radius: 52% 48% 44% 56%/18% 20% 80% 82%; transform: rotate(-1.2deg) } .seo-core-heading { text-align: left; max-width: 850px; margin: 0 0 52px; position: relative } .seo-core-heading .kicker { justify-content: flex-start } .kicker { color: var(--gold); font-family: var(--utility); font-size: 10px; letter-spacing: .2em } .kicker i { width: 38px; height: 1px } .seo-core-heading h1, .seo-core-heading h2 { color: var(--ivory); text-shadow: none; margin-top: 14px; font-size: clamp(48px, 6vw, 80px); line-height: .96 } .seo-core-heading p { max-width: 760px; margin: 22px 0 0; font-size: 17px; line-height: 1.75 } .seo-core-grid { position: relative; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px } .seo-core-grid article { min-height: 270px; padding: 34px 34px 30px; border: 1px solid #8996bc2e; border-radius: 6px; background: #0d1433; box-shadow: inset 0 1px #ffffff08, 0 24px 60px #0004; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) } .seo-core-grid article:nth-child(1), .seo-core-grid article:nth-child(4) { grid-column: span 7 } .seo-core-grid article:nth-child(2), .seo-core-grid article:nth-child(3) { grid-column: span 5 } .seo-core-grid article:nth-child(1) { background: linear-gradient(135deg, #142866, #101842 70%) } .seo-core-grid article:nth-child(2) { background: linear-gradient(145deg, #32197b, #171447 78%) } .seo-core-grid article:nth-child(3) { background: linear-gradient(145deg, #1d1948, #111735) } .seo-core-grid article:nth-child(4) { background: linear-gradient(135deg, #101a40, #1b174a 78%) } .seo-core-grid article:hover { border-color: #ffc83d9c; transform: translateY(-3px) } .seo-core-grid article>span { font-size: 0; font-family: var(--utility) } .seo-core-grid article>span:after { color: var(--gold); font-size: 11px; letter-spacing: .16em; font-weight: 900 } .seo-core-grid article:nth-child(1)>span:after { content: "GAME TABLE" } .seo-core-grid article:nth-child(2)>span:after { content: "ANDROID RELEASE" } .seo-core-grid article:nth-child(3)>span:after { content: "RULE BOOK" } .seo-core-grid article:nth-child(4)>span:after { content: "TABLE VARIATIONS" } .seo-core-grid h3 { max-width: 620px; margin-top: 28px; font-size: clamp(26px, 3vw, 38px); line-height: 1.04 } .seo-core-grid p { max-width: 600px; margin-top: 16px; margin-bottom: 28px; font-size: 14px } .seo-core-grid a { border-color: #ffc83d2b; color: var(--ivory); font-size: 13px; letter-spacing: .02em } .seo-core-grid a b { color: var(--gold) } .trust-bar { max-width: calc(var(--max) - 60px); border: 1px solid #ffc83d30; border-radius: 0; background: #090e28; box-shadow: none } .trust-bar div { min-height: 82px; border-color: #ffc83d1f; padding: 18px 22px } .trust-bar span { color: #7f89a8; font-family: var(--utility); font-size: 9px; letter-spacing: .14em } .trust-bar strong { color: #e8e7ed; font-size: 12px } .home-guide-section { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: 72px; padding-top: 104px; padding-bottom: 86px; display: grid } .home-guide-intro { position: sticky; top: 112px } .android-reference h2, .home-guide-intro h2, .ranking-board-heading h2, .variation-reference h2 { color: var(--ivory); margin-top: 14px; font-size: clamp(38px, 4.6vw, 62px); line-height: 1 } .home-guide-intro>p { max-width: 530px; margin-top: 20px; font-size: 16px } .home-guide-links { flex-wrap: wrap; gap: 10px; margin-top: 28px; margin-bottom: 24px; display: flex } .home-guide-links a, .ranking-board-link, .variation-reference>a { min-height: 44px; color: var(--gold); border: 1px solid #ffc83d52; border-radius: 6px; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; font-size: 13px; font-weight: 850; display: inline-flex } .home-guide-links a:hover, .ranking-board-link:hover, .variation-reference>a:hover { color: #171005; background: var(--gold) } .table-flow { border-top: 1px solid #ffc83d52; counter-reset: round-step; list-style: none } .table-flow li { border-bottom: 1px solid #ffc83d2b; grid-template-columns: 58px 1fr; gap: 24px; min-height: 148px; padding: 28px 6px; display: grid } .table-flow li>span { width: 48px; height: 48px; color: #171005; background: var(--gold); border-radius: 50%; place-items: center; font-family: var(--utility); font-weight: 950; display: grid; box-shadow: 0 6px 0 #755006 } .table-flow h3 { font-size: 25px; line-height: 1.08 } .table-flow p { max-width: 620px; margin: 9px 0 0; font-size: 14px } .home-knowledge-section { border-top: 1px solid #ffc83d26; border-bottom: 1px solid #ffc83d26; background: #080d24; padding: 108px 30px 116px } .home-knowledge-inner { max-width: var(--max); margin: auto } .ranking-board { border: 1px solid #ffc83d42; background: #0c1332; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); padding: 44px } .ranking-board-heading { max-width: 820px } .ranking-board-heading h2 { font-size: clamp(42px, 5vw, 68px) } .ranking-board-heading p { max-width: 720px; margin: 18px 0 0 } .ranking-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #ffc83d3d; border-left: 1px solid #ffc83d24; margin-top: 38px; list-style: none; display: grid } .ranking-strip li { border-right: 1px solid #ffc83d24; border-bottom: 1px solid #ffc83d24; min-width: 0; min-height: 178px; padding: 22px 18px; display: flex; flex-direction: column } .ranking-strip strong { color: var(--ivory); font-size: 16px; line-height: 1.15 } .ranking-strip span { color: var(--gold); white-space: nowrap; margin-top: 24px; font-family: Georgia, serif; font-size: 22px; font-weight: 900; letter-spacing: .02em } .ranking-strip small { color: #8992ac; margin-top: auto; font-size: 11px; line-height: 1.45 } .ranking-board-link { margin-top: 22px } .home-reference-grid { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 18px; margin-top: 18px; display: grid } .android-reference, .variation-reference { border: 1px solid #8693b42e; background: #0c112b; min-width: 0; padding: 38px } .android-reference h2, .variation-reference h2 { font-size: clamp(34px, 3.7vw, 50px) } .variation-reference>p { max-width: 680px } .variation-reference dl { grid-template-columns: 1fr 1fr; border-top: 1px solid #ffc83d31; border-left: 1px solid #ffc83d20; margin: 28px 0; display: grid } .variation-reference dl div { border-right: 1px solid #ffc83d20; border-bottom: 1px solid #ffc83d20; min-height: 112px; padding: 18px } .variation-reference dt { color: var(--gold); font-weight: 900 } .variation-reference dd { color: var(--muted); margin: 8px 0 0; font-size: 13px; line-height: 1.55 } .android-reference { background: linear-gradient(145deg, #27146b, #14275f) } .android-reference ul { gap: 0; margin: 26px 0 30px; padding: 0; list-style: none; display: grid } .android-reference li { border-top: 1px solid #ffffff24; grid-template-columns: 110px 1fr; gap: 16px; padding: 17px 0; display: grid } .android-reference b { color: var(--gold); font-size: 13px } .android-reference li span { color: #c7ccda; font-size: 13px; line-height: 1.55 } .android-reference .button { width: 100%; min-height: 52px } .why-section { position: relative; padding-top: 118px; padding-bottom: 74px } .why-heading { text-align: left; max-width: 860px; margin: 0 0 46px } .why-heading .kicker { justify-content: flex-start } .why-heading h2 { color: var(--ivory); text-shadow: none; font-size: clamp(44px, 5vw, 68px); line-height: .98 } .why-heading p { max-width: 720px; margin: 20px 0 0 } .why-grid { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #ffc83d3b; border-left: 1px solid #ffc83d24 } .why-grid article { align-items: flex-start; text-align: left; justify-content: flex-start; min-height: 250px; border: 0; border-right: 1px solid #ffc83d24; border-bottom: 1px solid #ffc83d24; border-radius: 0; background: #0b1028; padding: 30px; box-shadow: none } .why-grid article:hover { background: #111942; border-color: #ffc83d24; transform: none } .why-icon { width: 42px; height: 42px; margin-bottom: 34px; border: 1px solid #ffc83d80; border-radius: 50%; background: #ffc83d0d; box-shadow: none; font-size: 20px } .why-grid h3 { color: var(--ivory); font-size: 22px } .why-grid p { font-size: 13px } .home-blog-section { padding-top: 72px; padding-bottom: 104px } .home-blog-heading { border-bottom: 1px solid #ffc83d33; padding-bottom: 30px; margin-bottom: 24px } .home-blog-heading h2 { color: var(--ivory); font-size: clamp(44px, 5vw, 68px); line-height: .98 } .home-blog-heading>a { border: 1px solid #ffc83d5c; border-radius: 7px; padding: 13px 16px } .home-blog-heading>a:hover { color: #151005; background: var(--gold) } .home-blog-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); grid-template-rows: 1fr 1fr; gap: 16px } .home-blog-card { border: 1px solid #8490b22b; border-radius: 5px; background: #0c112b; box-shadow: 0 24px 55px #0004 } .home-blog-card:first-child { grid-row: 1/3 } .home-blog-card:not(:first-child) { display: grid; grid-template-columns: 42% 58% } .home-blog-card:hover { border-color: #ffc83d7a; transform: translateY(-3px) } .home-blog-image { aspect-ratio: 16/9; background: linear-gradient(135deg, #101b46, #1a1350) } .home-blog-card .home-blog-image { background-size: cover; background-position: center } .home-blog-image img { opacity: 1 !important; visibility: visible !important; transition: opacity .35s ease, transform .55s ease } .home-blog-card:hover .home-blog-image img { transform: scale(1.025) } .home-blog-card:first-child .home-blog-image { aspect-ratio: 16/9 } .home-blog-card:not(:first-child) .home-blog-image { height: 100%; aspect-ratio: auto } .home-blog-card:not(:first-child) .home-blog-copy { padding: 18px } .home-blog-card:not(:first-child) .home-blog-copy p { display: none } .home-blog-copy>div span { color: #161005; background: var(--gold); border-radius: 50%; font-family: var(--utility) } .home-blog-copy>div small { color: #9ca6c4; font-family: var(--utility); letter-spacing: .08em; text-transform: uppercase } .home-blog-copy h3 { font-size: 25px; line-height: 1.08 } .home-blog-card:first-child .home-blog-copy h3 { font-size: 34px } .home-blog-copy b { color: var(--gold) } .faq-section { border-top: 1px solid #ffc83d24; grid-template-columns: .72fr 1.28fr; gap: 96px; padding-top: 118px } .faq-heading h2 { color: var(--ivory); font-size: clamp(44px, 5vw, 68px); line-height: .98 } .faq-heading>a { color: var(--gold) } .faq-heading>a, .final-download>div:last-child>a:last-child { min-height: 44px; align-items: center; display: inline-flex } .faq-list { border-top: 1px solid #ffc83d40 } .faq-list details { border-bottom: 1px solid #ffc83d24; background: 0 0 } .faq-list summary { min-height: 78px; padding: 22px 4px; font-family: var(--display); font-size: 20px } .faq-list summary span { color: var(--gold) } .faq-list details p { padding: 0 48px 26px 4px } .final-download { max-width: calc(var(--max) - 60px); border: 1px solid #ffc83d70; border-radius: 6px; background: linear-gradient(112deg, #132968, #28146b 68%, #0b112b); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); padding: 54px 56px } .final-download h2 { color: var(--ivory); font-size: clamp(34px, 4vw, 52px); line-height: 1 } footer { background: #050714; border-top: 1px solid #ffc83d2b } .footer-grid { max-width: var(--max); padding-left: 30px; padding-right: 30px } .footer-bottom { max-width: calc(var(--max) - 60px) } .footer-primary a { min-width: 44px; min-height: 44px; align-items: center; display: inline-flex } footer .footer-grid p { color: #c0c5d3; font-size: 14px; line-height: 1.75 } footer .age-chip { color: var(--ivory); border-color: #ffc83d59; background: #ffc83d0b; font-size: 12px } .footer-bottom { color: #969db3; font-size: 12px; line-height: 1.55 } @media(prefers-reduced-motion:no-preference) { .hero-banner { animation: studio-enter .55s ease both } .seo-core-heading { animation: studio-rise .65s .12s ease both } .seo-core-grid { animation: studio-rise .7s .22s ease both } @keyframes studio-enter { from { opacity: 0 } to { opacity: 1 } } @keyframes studio-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } } } @media(max-width:1024px) { .nav-shell nav { gap: 20px } .seo-core-grid article:nth-child(n) { grid-column: span 6 } .home-guide-section { gap: 48px } .ranking-strip { grid-template-columns: repeat(3, 1fr) } .home-blog-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto } .home-blog-card:first-child { grid-column: 1/-1; grid-row: auto } .home-blog-card:not(:first-child) { display: block } .home-blog-card:not(:first-child) .home-blog-image { height: auto; aspect-ratio: 16/9 } .home-blog-card:not(:first-child) .home-blog-copy p { display: block } } @media(max-width:768px) { .nav-shell, .site-header { height: 66px } .nav-shell { padding: 0 18px } .brand { width: 154px; height: 54px } .mobile-menu summary { border: 1px solid #ffc83d40; border-radius: 7px } .mobile-menu>div { border-color: #ffc83d3d; border-radius: 8px; background: #090d24 } .hero-banner-track { aspect-ratio: 5/2 } .hero-banner:after { height: 10px } .hero-banner-arrow { width: 44px; height: 44px; border-radius: 7px } .seo-core-section { padding: 74px 20px 34px } .seo-core-section:before { display: none } .seo-core-heading h1, .seo-core-heading h2 { font-size: 48px } .seo-core-grid article:nth-child(n) { grid-column: span 12 } .trust-bar { max-width: none } .home-guide-section { grid-template-columns: 1fr; gap: 38px; padding-top: 76px; padding-bottom: 72px } .home-guide-section .site-header, .home-knowledge-section .site-header { display: none !important } .home-guide-intro { position: static } .home-guide-intro h2, .ranking-board-heading h2 { font-size: 44px } .table-flow li { min-height: 130px } .home-knowledge-section { padding: 76px 20px 84px } .ranking-board { padding: 32px 26px } .home-reference-grid { grid-template-columns: 1fr } .android-reference, .variation-reference { padding: 32px 26px } .why-section { padding: 76px 20px 40px } .why-grid { grid-template-columns: 1fr 1fr } .why-grid article { min-height: 210px; padding: 24px } .why-icon { margin-bottom: 24px } .home-blog-section { padding-top: 64px; padding-bottom: 78px } .home-blog-grid { grid-template-columns: 1fr } .home-blog-card:first-child { grid-column: auto } .faq-section { grid-template-columns: 1fr; gap: 42px; padding-top: 86px } .final-download { max-width: none; margin-left: 20px; margin-right: 20px; padding: 40px 30px } } @media(max-width:480px) { .hero-banner-arrow { display: none } .hero-banner-dots { bottom: 17px } .seo-core-heading h1, .seo-core-heading h2 { font-size: 40px } .seo-core-heading p { font-size: 15px } .seo-core-grid article { min-height: 245px; padding: 28px 24px } .seo-core-grid h3 { font-size: 29px } .trust-bar { grid-template-columns: 1fr 1fr } .trust-bar div { padding: 16px; min-width: 0 } .trust-bar strong { overflow-wrap: anywhere } .home-guide-intro h2, .ranking-board-heading h2 { font-size: 36px } .home-guide-links { display: grid } .home-guide-links a { width: 100% } .table-flow li { grid-template-columns: 46px 1fr; gap: 14px; min-height: 126px; padding: 24px 0 } .table-flow li>span { width: 40px; height: 40px } .table-flow h3 { font-size: 21px } .ranking-board { padding: 28px 20px } .ranking-strip { grid-template-columns: 1fr 1fr } .ranking-strip li { min-height: 146px; padding: 18px 14px } .ranking-strip span { font-size: 19px } .ranking-strip small { color: #aab2c9; font-size: 12px; line-height: 1.5 } .home-reference-grid { gap: 14px; margin-top: 14px } .android-reference, .variation-reference { padding: 34px 18px } .ranking-board-link { width: 100% } .android-reference, .variation-reference { padding: 28px 20px } .android-reference h2, .variation-reference h2 { font-size: 34px } .variation-reference dl { grid-template-columns: 1fr } .android-reference li { grid-template-columns: 1fr; gap: 7px } .faq-heading h2, .home-blog-heading h2, .why-heading h2 { font-size: 40px } .why-grid { grid-template-columns: 1fr 1fr } .why-grid article { min-height: 208px; padding: 20px 16px } .why-grid h3 { font-size: 18px } .why-grid p { font-size: 12px; line-height: 1.55 } .why-icon { width: 38px; height: 38px; margin-bottom: 20px; font-size: 18px } .home-blog-heading>a { width: 100%; text-align: center } .home-blog-card:first-child .home-blog-copy h3 { font-size: 28px } .faq-list summary { font-size: 18px } .mobile-download-bar { display: none } } .home-blog-card .home-blog-image { background-image: none !important } .home-blog-image img { aspect-ratio: 16/9; object-fit: cover } .home-blog-card { overflow: hidden; contain: layout paint } .hero-banner-slide img { width: 100%; height: 100%; object-fit: cover } @media(max-width:768px) { body { padding-bottom: 0 } main>.mobile-download-bar { display: none !important } .hero-banner-track { aspect-ratio: 16/7; min-height: 0 } .hero-banner-dots button { width: 34px; height: 34px } .hero-banner-dots button:after { left: 8px; top: 16px; width: 18px } .hero-banner-dots button.active { width: 38px; height: 34px } .hero-banner-dots button.active:after { left: 6px; width: 26px } .seo-core-section { padding-top: 52px } .seo-core-heading { margin-bottom: 26px } .seo-core-heading h1, .seo-core-heading h2 { font-size: 38px; line-height: 1.02 } .seo-core-grid article { min-height: 0; padding: 24px 20px } .seo-core-grid h3 { margin-top: 20px; font-size: 27px; line-height: 1.1 } .home-guide-section { padding-top: 56px; padding-bottom: 54px } .home-knowledge-section { padding-top: 56px; padding-bottom: 62px } .ranking-board { padding: 26px 18px } .ranking-board-heading h2 { font-size: 34px; line-height: 1.06 } .ranking-strip { grid-template-columns: 1fr 1fr; margin-top: 24px } .ranking-strip li { min-height: 132px } .why-section { padding-top: 58px } .why-grid article { min-height: 178px } .home-blog-section { padding-top: 54px; padding-bottom: 58px } .home-blog-card { content-visibility: auto; contain-intrinsic-size: 420px } .home-blog-card:first-child .home-blog-copy h3, .home-blog-copy h3 { font-size: 24px; line-height: 1.16; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .home-blog-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .faq-section { padding-top: 62px } .final-download { margin-bottom: 42px } } @media(max-width:480px) { .hero-banner-track { aspect-ratio: 16/8.3 } .seo-core-heading h1, .seo-core-heading h2 { font-size: 34px } .trust-bar { grid-template-columns: 1fr } .trust-bar div:last-child { grid-column: auto } .why-grid { grid-template-columns: 1fr } .why-grid article { min-height: 0; padding: 18px 16px } .why-icon { margin-bottom: 14px } .faq-heading h2, .home-blog-heading h2, .why-heading h2 { font-size: 34px; line-height: 1.05 } } :root { --bg: #2b0c58; --surface: #55158e; --surface-2: #6c22b6; --purple: #7b2bd4; --magenta: #d51aaa; --blue: #5259d8; --gold: #ffd844; --ivory: #fff9fb; --ink: #fff9fb; --muted: #ead9f0; --line: #ffffff24 } html { background: #2b0c58 } body { background: radial-gradient(circle at 10% 2%, #ff5bcb66 0, #0000 24rem), linear-gradient(180deg, #d51aaa 0, #8b2bda 20rem, #4d168c 44rem, #260a55 100%) !important } h1, h2, h3 { letter-spacing: -.022em } .site-header { background: #35105fee !important; border-bottom: 1px solid #ffffff20 !important; box-shadow: 0 8px 28px #21053c30 } .button, .final-button, .header-download, .mobile-download-bar { border: 0 !important; border-radius: 999px !important; color: #4b2700 !important; background: linear-gradient(180deg, #ffe86a, #ffc72e) !important; box-shadow: 0 10px 22px #4d105833 !important } .hero-banner { padding: 18px 16px 22px; background: radial-gradient(circle at 82% 18%, #ff79d455, #0000 24rem), linear-gradient(135deg, #d51aaa 0, #8e2cda 54%, #512098 100%) !important } .hero-banner:after { display: none !important } .hero-banner-track { max-width: 1280px; margin: auto; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px #26043e4a } .hero-banner-arrow { color: #4b2700 !important; background: #ffd844e8 !important; border: 0 !important; border-radius: 999px !important } .seo-core-section:before { display: none !important } .android-reference h2, .faq-heading h2, .final-download h2, .home-blog-heading h2, .home-guide-intro h2, .ranking-board-heading h2, .seo-core-heading h1, .seo-core-heading h2, .variation-reference h2, .why-heading h2 { color: #fff !important; text-shadow: none !important } .android-reference, .final-download, .home-blog-card, .ranking-board, .seo-core-grid article, .variation-reference, .why-grid article { clip-path: none !important; border: 1px solid #ffffff24 !important; border-radius: 22px !important; background: linear-gradient(145deg, #ffffff18, #ffffff0b) !important; box-shadow: 0 16px 36px #24033d24 !important } .home-blog-card:hover, .seo-core-grid article:hover, .why-grid article:hover { transform: translateY(-2px) !important; border-color: #ffe46c85 !important } .trust-bar { border-color: #ffffff24 !important; border-radius: 24px !important; background: #ffffff12 !important; box-shadow: 0 14px 34px #24033d20 !important } .home-knowledge-section { background: linear-gradient(180deg, #5d1aa0, #3d1175) !important; border-color: #ffffff24 !important } .ranking-strip, .variation-reference dl { border-color: #ffffff26 !important } .ranking-strip li, .table-flow li, .variation-reference dl div { border-color: #ffffff20 !important } .home-blog-copy>div span, .table-flow li>span, .why-icon { color: #4b2700 !important; background: #ffd844 !important; box-shadow: none !important } .faq-heading>a, .home-blog-copy b, .home-guide-links a, .ranking-board-link, .variation-reference>a { color: #ffe46c !important } .home-blog-heading { border-bottom-color: #ffffff24 !important } .faq-list, .faq-list details, .faq-section { border-color: #ffffff24 !important } footer { background: #24094f !important; border-top: 1px solid #ffffff24 !important } @media(max-width:768px) { .hero-banner { padding: 10px 10px 14px } .hero-banner-track { border-radius: 18px } .seo-core-section { padding-top: 48px } .seo-core-heading h1, .seo-core-heading h2 { font-size: 34px !important; line-height: 1.05 !important } .faq-heading h2, .home-blog-heading h2, .home-guide-intro h2, .ranking-board-heading h2, .why-heading h2 { font-size: 32px !important; line-height: 1.08 !important } .android-reference, .home-blog-card, .ranking-board, .seo-core-grid article, .variation-reference, .why-grid article { border-radius: 18px !important } } @media(max-width:768px) { .hero-banner { padding: 8px 8px 12px !important } .hero-banner-track { aspect-ratio: 2.5/1 !important; min-height: 0 !important; max-height: none !important; border-radius: 14px !important; background: linear-gradient(135deg, #d51aaa 0, #8e2cda 54%, #512098 100%) !important } .hero-banner-slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background: linear-gradient(135deg, #d51aaa 0, #8e2cda 54%, #512098 100%) !important; filter: none !important } .home-blog-image { aspect-ratio: 16/9 !important; height: auto !important; background: #2b0c58 !important } .home-blog-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background: #2b0c58 !important } .home-blog-card:hover .home-blog-image img { transform: none !important } } @media(max-width:480px) { .hero-banner-track { aspect-ratio: 2.5/1 !important } }