:root { color-scheme: light dark; --color-canvas: #0D0D0D; --color-surface: #131313; --color-ink: #FAFAFA; --color-muted-ink: #A3A3A3; --color-accent: #F04C4C; --color-signal: #F04C4C; --color-secondary: #C52020; --color-highlight: #C52020; --color-on-accent: #000000; --font-display: "Inter"; --font-body: "Inter"; --font-mono: "IBM Plex Mono"; --radius: 12px; --border-width: 1px; } :root[data-theme="light"] { --color-canvas: #FAFAFA; --color-surface: #FFFFFF; --color-ink: #1F1F1F; --color-muted-ink: #666666; --color-accent: #C52020; --color-signal: #C52020; --color-secondary: #C52020; --color-highlight: #C52020; --color-on-accent: #FFFFFF; } :root[data-theme="dark"] { --color-canvas: #0D0D0D; --color-surface: #131313; --color-ink: #FAFAFA; --color-muted-ink: #A3A3A3; --color-accent: #F04C4C; --color-signal: #F04C4C; --color-secondary: #C52020; --color-highlight: #C52020; --color-on-accent: #000000; } .theme-toggle { display: inline-grid; min-width: 2.5rem; min-height: 2.5rem; margin-left: auto; place-items: center; border: var(--border-width) solid color-mix(in srgb, var(--color-ink) 24%, transparent); border-radius: 999px; padding: .35rem; color: var(--color-ink); background: var(--color-surface); font: inherit; cursor: pointer; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } .theme-toggle:focus-visible { outline: 3px solid var(--color-signal); outline-offset: 3px; }   :root body[data-presentation] .home-composition > .home-hero { background: radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--color-secondary) 18%,transparent),transparent 29rem),radial-gradient(circle at 8% 92%,color-mix(in srgb,var(--color-highlight) 10%,transparent),transparent 24rem),linear-gradient(135deg,var(--color-surface),var(--color-canvas)); } :root body[data-presentation] .home-hero .home-stats > li { border-color: color-mix(in srgb,var(--color-secondary) 32%,var(--ref-border)); } :root body[data-presentation] .home-module-header { background: color-mix(in srgb,var(--color-highlight) 7%,var(--color-surface)); } :root body[data-presentation] .home-carousel-card { border-top-color: color-mix(in srgb,var(--color-secondary) 65%,var(--ref-border)); } :root body[data-presentation] .home-actions a.home-cta:first-child, :root body[data-presentation] a.home-cta--primary { color: var(--color-on-accent); }
* { box-sizing: border-box; } .factory-mobile-ad-host { display: none; } html { color-scheme: dark; scroll-behavior: smooth; } body { margin: 0; color: var(--color-ink); background: radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 36rem), radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--color-signal) 12%, transparent), transparent 30rem), var(--color-canvas); font-family: var(--font-body), sans-serif; line-height: 1.65; } a { color: inherit; text-decoration-color: var(--color-accent); text-underline-offset: .2em; } a:hover { color: var(--color-accent); } .skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .65rem .9rem; color: var(--color-canvas); background: var(--color-ink); transform: translateY(-180%); } .skip-link:focus { transform: translateY(0); } .masthead { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); background: color-mix(in srgb, var(--color-canvas) 88%, transparent); backdrop-filter: blur(16px); } .masthead__inner, .site-shell, .site-footer > div { width: min(calc(100% - 32px), 1216px); margin-inline: auto; } .masthead__inner { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display), serif; font-weight: 850; text-decoration: none; } .brand__mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--color-canvas); background: linear-gradient(135deg, var(--color-accent), var(--color-signal)); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent) 35%, transparent); } .site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1rem; font-size: .92rem; font-weight: 700; } .site-nav a { text-decoration: none; } .nav-toggle { display: none; border: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent); border-radius: 10px; padding: .5rem .75rem; color: var(--color-ink); background: var(--color-surface); font: inherit; font-weight: 800; } .site-shell { max-width: 1216px; padding-block: clamp(2rem, 5vw, 5rem); } .page-grid { display: grid; grid-template-columns: minmax(0, 1fr); } .main-content { min-width: 0; } .main-content > :first-child { margin-top: 0; } .main-content article > header { padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); border-radius: calc(var(--radius) + 8px); background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 92%, var(--color-accent)), var(--color-surface)); box-shadow: 0 24px 70px color-mix(in srgb, var(--color-canvas) 70%, transparent); } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0 0 1.1rem; color: var(--color-muted-ink); font-size: .9rem; } .breadcrumbs a { color: inherit; text-decoration: none; } .breadcrumbs > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 700; } h1, h2, h3 { font-family: var(--font-display), serif; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } h1 { max-width: 17ch; margin: .3rem 0 1rem; font-size: clamp(2.5rem, 6vw, 5.5rem); } h2 { margin-top: 2.35em; font-size: clamp(1.55rem, 3vw, 2.4rem); } .eyebrow { margin: 0; color: var(--color-accent); font-family: var(--font-mono), monospace; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .lede { max-width: 68ch; color: var(--color-muted-ink); font-size: 1.08rem; } .field-card { position: relative; margin-top: 2rem; border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); border-radius: var(--radius); padding: clamp(1rem, 3vw, 2rem); background: var(--color-surface); box-shadow: 0 18px 50px color-mix(in srgb, var(--color-canvas) 45%, transparent); } .field-card::before { position: absolute; top: -.75rem; left: 1.1rem; padding: .16rem .52rem; border-radius: 999px; color: var(--color-canvas); background: var(--color-accent); content: attr(data-label); font-family: var(--font-mono), monospace; font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; } .field-card:not([data-label])::before { content: none; } .field-card > h2:first-child { margin-top: 0; } .home-hero-detail > ul { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0; list-style: none; } .home-stat { display: flex; flex-direction: column-reverse; margin: .5rem 0; } .home-stat dt { color: var(--color-muted-ink); font-size: .85rem; } .home-stat dd { margin: 0; font-size: 1.5rem; font-weight: 800; } .home-module { box-shadow: none; } .wiki-nav { display: none; width: 316px; } .wiki-nav__scroll { width: 316px; max-height: calc(100vh - var(--masthead-height, 68px) - 36px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 24px; } .wiki-nav__panel { width: 268px; margin-inline: auto; padding-block: 18px; border-radius: var(--radius); background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 14%, transparent); } .wiki-nav__label { padding-inline: 12px; } .wiki-nav__label { margin-bottom: .8rem; color: var(--color-muted-ink); font-family: var(--font-mono), monospace; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .wiki-nav__links { display: grid; width: 268px; max-width: 100%; gap: .28rem; } .wiki-nav__links a { padding: .38rem .55rem; border-left: 2px solid transparent; color: var(--color-muted-ink); text-decoration: none; } .wiki-nav__links a:hover, .wiki-nav__links a[aria-current="true"] { border-left-color: var(--color-accent); color: var(--color-ink); background: color-mix(in srgb, var(--color-accent) 8%, transparent); } .site-footer { border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); padding-block: 2rem 6rem; color: var(--color-muted-ink); font-size: .9rem; } [hidden] { display: none !important; } @media (max-width: 767px) { .nav-toggle { display: inline-flex; } .site-nav { position: absolute; top: calc(100% + 1px); right: 16px; left: 16px; display: none; padding: 1rem; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 20px 55px color-mix(in srgb, var(--color-canvas) 60%, transparent); } .site-nav[data-open="true"] { display: grid; } } @media (min-width: 1280px) { .page-grid { grid-template-columns: minmax(0, 868px) 316px; gap: 32px; } .wiki-nav { position: sticky; top: calc(var(--masthead-height, 68px) + 20px); display: block; align-self: start; } } @media (min-width: 1440px) and (max-width: 1679px) { body[data-ad-rail-left="true"] .site-shell { margin-right: auto; margin-left: calc((100vw - 1396px) / 2 + 180px); } } @media (min-width: 1680px) { .ad-rail--left { left: calc((100vw - 1216px) / 2 - 180px); } .ad-rail--right { right: calc((100vw - 1216px) / 2 - 180px); } } @media (prefers-reduced-motion: no-preference) { .field-card, .brand__mark, .wiki-nav__links a { transition: translate 180ms ease, box-shadow 180ms ease, background 180ms ease; } .field-card:hover { translate: 0 -2px; } } .wiki-nav__links details { min-width: 0; } .wiki-nav__links summary { cursor: pointer; font-weight: 700; padding-block: .5rem; } .wiki-nav__links details a { display: block; overflow-wrap: anywhere; } .factory-ad { border: 0; padding: 0; background: transparent; } .factory-ad iframe { display: block; border: 0; max-width: none; } .factory-ad--bannerResponsive { display: block; position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); margin: 0; } .factory-ad--nativeContent { margin: 2rem 0; max-width: 100%; } .main-content { container-type: inline-size; } [data-factory-sticky-host] { display: none; position: sticky; top: calc(var(--masthead-height, 68px) + 12px); z-index: 20; height: 98px; padding: 40px 0 8px; margin-bottom: 16px; } .factory-ad--sticky320x50 { position: relative; margin-inline: auto; } .factory-ad--sticky320x50 button { position: absolute; right: 0; top: -32px; width: 28px; height: 28px; border: 1px solid var(--color-muted-ink); border-radius: 50%; color: var(--color-ink); background: var(--color-surface); cursor: pointer; } @container (min-width: 320px) { [data-factory-sticky-host] { display: block; } } @container (min-width: 400px) { [data-factory-sticky-host] { height: 66px; padding-top: 8px; } .factory-ad--sticky320x50 button { right: -36px; top: 11px; } } .factory-ad--rail160x600, .factory-ad--rail160x300 { position: fixed; top: calc(var(--masthead-height, 68px) + 28px); z-index: 20; overflow: hidden; } .factory-ad--rail160x600 { left: calc((100vw - 1396px) / 2); } .factory-ad--rail160x300 { right: 0; } @media (min-width: 1680px) { .factory-ad--rail160x600 { left: calc((100vw - 1216px) / 2 - 180px); } .factory-ad--rail160x300 { right: calc((100vw - 1216px) / 2 - 180px); } } .language-switcher { display: inline-flex; flex-wrap: wrap; gap: .6rem; border-left: 1px solid currentColor; padding-left: .8rem; font-size: .8rem; } .language-switcher [aria-current="true"] { color: var(--color-accent); text-decoration: underline; } li.factory-ad { list-style: none; }   [data-factory-banner-reservation] { position: relative; container-type: inline-size; } [data-factory-banner-reservation]::after { content: none; } @container (min-width: 300px) { [data-factory-banner-reservation~="small"]::after { content: ""; display: block; height: 250px; margin-block: 2.5rem; } } @container (min-width: 728px) { [data-factory-banner-reservation~="wide"]::after { content: ""; display: block; height: 90px; margin-block: 2.5rem; } }   .home-composition { overflow-wrap: anywhere; } .home-composition .home-block { margin-block: 3rem; } .home-block > h2 { margin: .4rem 0 1rem; } .home-actions, .home-quick-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; } .home-actions a, .home-quick-link { padding: .6rem 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); text-decoration: none; font-weight: 700; } .home-actions span { color: var(--color-muted-ink); } .home-stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; list-style: none; padding: 0; margin-block: 1.5rem; } .home-steps { display: grid; gap: 1.5rem; padding: 0; list-style: none; } .home-steps > li { display: flex; align-items: baseline; gap: 1.2rem; padding-bottom: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); } .home-step-number { flex: 0 0 2rem; font: 700 1rem var(--font-mono), monospace; color: var(--color-accent); } .home-steps h3 { margin: .5rem 0; font-size: 1.3rem; } .home-steps p { margin: 0; color: var(--color-muted-ink); } .home-module-grid, .home-popular-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 1.25rem; } .home-module { min-width: 0; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); border-radius: var(--radius); background: var(--color-surface); } .home-module h3 { margin: 0 0 .8rem; font-size: 1.3rem; } .home-highlights { padding-left: 1.2rem; } .home-highlights li { margin-block: .8rem; } .home-highlights strong, .home-highlights span { display: block; } .home-highlights span { color: var(--color-muted-ink); font-size: .93rem; } .home-module--tier-grid .home-highlights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; padding: 0; list-style: none; } .home-module--tier-grid .home-highlights li { padding: .65rem; background: var(--color-canvas); } .home-module--code-cards .home-highlights strong { font-family: var(--font-mono),monospace; } .home-module--step-by-step li::marker { color: var(--color-accent); font-weight: 800; } .home-module-link { display: inline-block; margin-block: .5rem; color: var(--color-accent); font-weight: 700; } span.home-module-link { color: var(--color-muted-ink); font-weight: 400; } .home-references { display: flex; flex-wrap: wrap; gap: .8rem; padding: 0; list-style: none; font-size: .8rem; color: var(--color-muted-ink); } .home-about-copy { max-width: 70ch; } .home-faq-item { padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent); } .home-faq-item summary { cursor: pointer; font-weight: 700; } .home-faq-item p { color: var(--color-muted-ink); } .home-updates { padding: 0; list-style: none; } .home-updates li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: .6rem; } .home-updates time { font-size: .85rem; color: var(--color-muted-ink); } .home-block--finalCta { padding: 2rem; border-left: 4px solid var(--color-accent); background: var(--color-surface); } .home-discovery-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-block: 2rem 3rem; } .home-discovery-row .home-block { margin: 0; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent); border-radius: var(--radius); background: color-mix(in srgb,var(--color-surface) 60%,transparent); } .home-discovery-row h2 { font-size: 1.5rem; } .home-updates li { display: grid; gap: .5rem; padding: 1.2rem 0; border-bottom: 1px solid color-mix(in srgb,var(--color-ink) 10%,transparent); } .home-updates li:last-child { border-bottom: 0; } .home-update-link { font-size: 1.05rem; font-weight: 650; text-decoration: none; } .home-updates time { text-align: right; } .home-browse { display: inline-block; margin-top: 1rem; color: var(--color-accent); } .home-popular-cards { padding: 0; margin: 1.5rem 0; list-style: none; grid-template-columns: repeat(2,minmax(0,1fr)); } .home-trending-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb,var(--color-ink) 16%,transparent); border-radius: var(--radius); background: var(--color-surface); } .home-trending-card > a { display: block; height: 100%; text-decoration: none; } .home-trending-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .home-trending-copy { padding: 1.25rem; } .home-trending-copy h3 { font-size: 1.4rem; margin: .5rem 0; } .home-trending-copy p { color: var(--color-muted-ink); margin: .7rem 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-card-category { font-size: .75rem; font-weight: 750; color: var(--color-accent); text-transform: uppercase; letter-spacing: .05em; } .home-trending-card:hover { border-color: var(--color-accent); } .home-module--category-card .home-highlights { display: none; } @media (max-width: 699px) { .home-discovery-row, .home-popular-cards { grid-template-columns: minmax(0,1fr); } .home-discovery-row .home-block { padding: 1.15rem; } } .home-discovery-row[data-factory-banner-reservation]::after { grid-column: 1 / -1; }   [data-factory-bottom-reservation] { position: relative; container-type: inline-size; } [data-factory-bottom-reservation]::after { content: none; } .factory-ad--bottom { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); margin: 0; } @container (min-width: 300px) { [data-factory-bottom-reservation~="small"]::after { content: ""; display: block; height: 250px; margin-block: 2.5rem; } } @container (min-width: 468px) { [data-factory-bottom-reservation~="medium"]::after { content: ""; display: block; height: 60px; margin-block: 2.5rem; } } @container (min-width: 728px) { [data-factory-bottom-reservation~="wide"]::after { content: ""; display: block; height: 90px; margin-block: 2.5rem; } } @media (min-width: 1680px) { body[data-ad-rail-left]:not([data-ad-rail-right]) .site-shell { margin-left: calc((100vw - 1396px) / 2 + 180px); margin-right: auto; } body[data-ad-rail-left]:not([data-ad-rail-right]) .factory-ad--rail160x600 { left: calc((100vw - 1396px) / 2); } body[data-ad-rail-right]:not([data-ad-rail-left]) .site-shell { margin-left: calc((100vw - 1396px) / 2); margin-right: auto; } body[data-ad-rail-right]:not([data-ad-rail-left]) .factory-ad--rail160x300 { right: calc((100vw - 1396px) / 2); } }   @media (max-width: 767px) { [data-factory-banner-reservation]::after, [data-factory-bottom-reservation]::after { content: none !important; } [data-factory-sticky-host] { display: block; width: 100vw; max-width: none; margin: 0 calc((100% - 100vw) / 2) 32px; position: sticky; top: var(--masthead-height, 68px); z-index: 20; height: 66px; padding: 8px 40px 8px 0; } body[data-page-type="home"] [data-factory-sticky-host] { margin-bottom: 0; height: 67px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); } .factory-ad iframe { border-radius: 12px; } .factory-ad--sticky320x50 { position: static; } .factory-ad--sticky320x50 button { display: grid; place-items: center; width: 44px; height: 44px; top: 11px; right: 0; padding: 0; border: 0; background: transparent; color: var(--color-muted-ink); } .factory-ad--sticky320x50 button::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); background: color-mix(in srgb, var(--color-canvas) 95%, transparent); } .factory-ad--sticky320x50 button svg { position: relative; width: 16px; height: 16px; } .factory-ad--sticky320x50 button:hover { color: var(--color-ink); } .factory-ad--sticky320x50 button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .factory-mobile-ad-host { display: block; margin: 32px 0; } .factory-ad--mobileInline { margin: 0 auto; } [data-factory-bottom-reservation] {   width: calc(100% + 32px); margin: 0 -16px; padding: 32px 0; } [data-factory-bottom-reservation] .factory-ad--bottom { position: static; transform: none; margin: 0 auto; } [data-factory-bottom-reservation][data-mobile-empty="true"] { padding: 0; } } @media (max-width: 383px) { body:not([data-page-type="home"]) [data-factory-sticky-host] { padding: 40px 0 8px; height: 98px; } body[data-page-type="home"] [data-factory-sticky-host] { padding: 44px 0 8px; height: 103px; } .factory-ad--sticky320x50 button { top: 0; right: 0; } .factory-mobile-ad-host { width: 100vw; margin-inline: calc((100% - 100vw) / 2); } body[data-page-type="home"] .factory-mobile-ad-host { width: calc(100% + 32px); margin-inline: -16px; } } @media (max-width: 319px) { [data-factory-sticky-host] { display: none !important; } }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --font-display: Inter; --font-body: Inter; --font-mono: ui-monospace; --radius: 12px; --border-width: 1px; --ref-border: color-mix(in srgb,var(--color-ink) 13%,transparent); --ref-muted: color-mix(in srgb,var(--color-ink) 5%,var(--color-surface)); } html { color-scheme: light dark; } html[data-theme='light'] { color-scheme: light; } html[data-theme='dark'] { color-scheme: dark; } body { font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; background: var(--color-canvas); } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 32rem),radial-gradient(circle at 85% 8%,color-mix(in srgb,var(--color-accent) 8%,transparent),transparent 28rem); } a { text-decoration: none; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } .masthead { border-color: var(--ref-border); background: color-mix(in srgb,var(--color-canvas) 90%,transparent); backdrop-filter: blur(24px); } .masthead__inner { min-height: 65px; gap: 16px; } .brand { flex-shrink: 0; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .025em; } .brand__icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } .brand > span { max-width: 24ch; line-height: 1.3; } .site-nav { align-items: center; gap: 4px; font-size: 14px; font-weight: 500; } .site-nav > a { border-radius: 8px; padding: 8px 10px; color: var(--color-muted-ink); } .site-nav > a:hover { background: var(--ref-muted); color: var(--color-ink); } .language-switcher { align-items: center; border: 0; gap: 8px; padding-left: 8px; font-size: 12px; } .theme-toggle { flex-shrink: 0; border-radius: 8px; border: 1px solid var(--ref-border); margin-left: 8px; } .site-shell { padding-block: 40px; } h1,h2,h3 { font-family: Inter, sans-serif; line-height: 1.2; letter-spacing: -.035em; font-weight: 750; } h1 { max-width: none; font-size: clamp(2.1rem,3.4vw,3rem); font-weight: 800; letter-spacing: -.045em; } h2 { font-size: 30px; margin: 0 0 16px; } h3 { font-size: 20px; } .lede { color: var(--color-muted-ink); font-size: 16px; line-height: 1.75; } .eyebrow { font-family: inherit; font-size: 11px; line-height: 1.6; letter-spacing: .18em; font-weight: 650; color: var(--color-accent); } .main-content article > header { padding: 28px 32px; border: 1px solid var(--ref-border); border-radius: 24px; background: var(--color-surface); box-shadow: none; } .main-content .home-composition > .home-hero { position: relative; isolation: isolate; overflow: hidden; padding: 32px; border-radius: 32px; background: radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--color-accent) 22%,transparent),transparent 29rem),radial-gradient(circle at 8% 92%,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 24rem),linear-gradient(135deg,var(--color-surface),var(--color-canvas)); box-shadow: 0 25px 50px -12px rgb(0 0 0 / .18); } .home-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: linear-gradient(color-mix(in srgb,var(--color-ink) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-ink) 3.5%,transparent) 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(115deg,transparent 4%,black 60%,transparent 100%); } .home-hero-grid { display: grid; align-items: center; gap: 28px; } .home-hero-copy { min-width: 0; text-align: left; } .home-hero h1 { margin: 16px 0; font-size: 48px; line-height: 1; overflow-wrap: normal; } .home-hero .eyebrow { display: inline-block; border: 1px solid color-mix(in srgb,var(--color-accent) 35%,transparent); border-radius: 999px; padding: 4px 12px; background: color-mix(in srgb,var(--color-accent) 12%,transparent); letter-spacing: .08em; font-size: 12px; } #hero .eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--color-ink); } #hero .eyebrow::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background-color: var(--color-accent); -webkit-mask: url("hero-sparkles.svg") center / contain no-repeat; mask: url("hero-sparkles.svg") center / contain no-repeat; } .home-hero .lede { margin: 16px 0; color: color-mix(in srgb,var(--color-ink) 80%,var(--color-canvas)); } .home-actions { align-items: center; gap: 12px; margin: 24px 0 0; } .home-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--ref-border); border-radius: 8px; background: color-mix(in srgb,var(--color-canvas) 55%,transparent); color: var(--color-ink); font-size: 14px; line-height: 1.5; font-weight: 600; } .home-actions a:first-child { background: var(--color-accent); color: var(--color-surface); border-color: var(--color-accent); } :root[data-theme='dark'] .home-actions a:first-child { color: var(--color-canvas); } .home-actions a:first-child::after { content: '→'; margin-left: 10px; } .home-actions a:hover { filter: brightness(1.1); } .home-hero-visual { min-width: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--ref-border); padding: 8px; background: rgb(0 0 0 / .25); transform: rotate(.6deg); box-shadow: 0 24px 60px -28px color-mix(in srgb,var(--color-accent) 75%,transparent); } .home-hero-visual > img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; } .home-hero-visual .video-card, .home-hero-visual [data-video-card] { margin: 0; width: 100%; } .home-hero .home-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 8px; border-top: 1px solid var(--ref-border); margin: 28px 0 0; padding-top: 20px; } .home-hero .home-stats > li { border: 1px solid var(--ref-border); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb,var(--color-canvas) 55%,transparent); font-size: 12px; font-weight: 600; line-height: 1.65; } .home-stat { margin: 0; } .home-stat dt { font-size: 11px; } .home-stat dd { font-size: 16px; } .home-composition .home-block { margin-block: 64px; } .home-discovery-row { display: grid; align-items: stretch; gap: 20px; margin-block: 64px; } .home-composition .home-discovery-row .home-block { margin: 0; border: 1px solid var(--ref-border); border-radius: 24px; padding: 24px; background: color-mix(in srgb,var(--color-surface) 65%,transparent); } .home-discovery-row h2 { margin: 0 0 16px; font-family: inherit; font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--color-ink); } .home-discovery-row .lede { font-size: 14px; } .home-updates li { padding: 18px 0; border-bottom: 1px solid var(--ref-border); } .home-updates li:last-child { border: 0; } .home-update-link { font-size: 15px; line-height: 1.5; font-weight: 600; } .home-updates time { color: var(--color-muted-ink); font-size: 12px; } .home-steps { position: relative; gap: 0; margin: 16px 0; } .home-steps > li { position: relative; align-items: start; gap: 16px; border: 0; padding-bottom: 16px; } .home-steps > li:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 36px; bottom: 0; width: 1px; background: var(--ref-border); } .home-step-number { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--color-accent) 50%,transparent); font: 700 14px Inter,sans-serif; color: var(--color-ink); background: var(--color-canvas); } .home-steps h3 { margin: 2px 0 8px; font-size: 16px; letter-spacing: 0; } .home-steps p { font-size: 14px; line-height: 1.6; } .home-discovery-row .home-steps > li { display: block; padding: 0; } .home-discovery-row .home-steps > li::before { display: none; } .home-step-card { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) 14px; gap: 12px; padding: 14px 10px; border-radius: 12px; color: var(--color-ink); text-decoration: none; background: transparent; } .home-step-arrow { color: var(--color-muted-ink); opacity: .6; } .home-discovery-row .home-updates li { padding: 0; } .home-discovery-row .home-block--updates { display: flex; flex-direction: column; } .home-discovery-row .home-updates { flex: 1; display: grid; grid-auto-rows: 1fr; margin: 0; } .home-discovery-row .home-updates li { align-content: stretch; } .home-discovery-row .home-update-row { align-content: center; } .home-discovery-row .home-update-row { padding: 16px 10px; border-radius: 12px; color: var(--color-ink); background: transparent; text-decoration: none; } .home-step-card, .home-discovery-row .home-update-row { transition: background-color .16s ease, color .16s ease; } a.home-step-card:hover, .home-discovery-row .home-update-row:hover { background: color-mix(in srgb,var(--color-ink) 7%,transparent); text-decoration: none; } a.home-step-card:focus-visible, .home-discovery-row .home-update-row:focus-visible { background: color-mix(in srgb,var(--color-ink) 7%,transparent); outline: 2px solid var(--color-accent); outline-offset: 2px; } a.home-step-card:hover .home-step-arrow { opacity: 1; color: var(--color-ink); } @media (prefers-reduced-motion: reduce) { .home-step-card, .home-discovery-row .home-update-row { transition: none; } } .home-browse, .home-module-link { color: var(--color-accent); font-size: 14px; font-weight: 600; } .home-browse::after, a.home-module-link::after { content: ' →'; } .home-popular-cards, .home-module-grid { gap: 24px; } .home-trending-card { display: flex; position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--ref-border); background: var(--color-surface); min-height: 240px; } .home-trending-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .home-trending-card > a { display: flex; position: relative; width: 100%; min-height: 240px; color: inherit; } .home-trending-card > a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .home-trending-card > a:hover > img { transform: scale(1.035); } .home-trending-card > a:has(> img) .home-trending-copy { padding-top: 100px; color: white; background: linear-gradient(transparent, rgb(0 0 0 / .88)); } .home-trending-card > a:has(> img) .home-trending-copy p { color: rgb(255 255 255 / .8); } .home-trending-card > a:has(> img) .home-card-category { color: white; } .home-trending-card:hover > img { transform: scale(1.035); } .home-trending-copy { position: relative; align-self: flex-end; width: 100%; padding: 24px; } .home-trending-card:has(> img) .home-trending-copy { padding-top: 100px; color: white; background: linear-gradient(transparent, rgb(0 0 0 / .88)); } .home-trending-card:has(> img) .home-trending-copy p { color: rgb(255 255 255 / .8); } .home-trending-card:has(> img) .home-card-category { color: white; } .home-trending-copy h3 { margin: 12px 0; font-size: 22px; line-height: 1.3; } .home-trending-copy p { font-size: 14px; } .home-card-category { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb,var(--color-accent) 35%,transparent); font-size: 10px; letter-spacing: .08em; } .home-module { padding: 24px; border-radius: 24px; border-color: var(--ref-border); background: color-mix(in srgb,var(--color-surface) 70%,transparent); } .home-module h3 { font-size: 18px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ref-border); } .home-module p, .home-highlights { font-size: 14px; line-height: 1.7; } .home-module--category-card > .home-module-link { margin-top: 16px; } .home-about-grid { display: grid; align-items: center; gap: 32px; } .home-about-copy { font-size: 16px; line-height: 1.85; } .home-about-visual { overflow: hidden; border: 1px solid var(--ref-border); border-radius: 24px; } .home-about-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; } .home-block--faq { border: 1px solid var(--ref-border); border-radius: 24px; padding: 28px; background: color-mix(in srgb,var(--color-surface) 70%,transparent); } .home-faq-item { padding: 16px 0; border-color: var(--ref-border); } .home-faq-item:last-child { border: 0; } .home-faq-item summary { display: flex; justify-content: space-between; gap: 16px; list-style: none; font-size: 15px; } .home-faq-item summary::-webkit-details-marker { display: none; } .home-faq-item summary::after { content: ''; box-sizing:border-box; width:9px; height:9px; margin:5px 5px 0; flex:0 0 9px; border-right:1.75px solid currentColor; border-bottom:1.75px solid currentColor; color:var(--color-muted-ink); transform:rotate(45deg); transition:transform .18s,color .18s; } .home-faq-item[open] summary::after { transform:translateY(4px) rotate(225deg); color:var(--color-accent); } .home-faq-item summary:focus-visible { outline:2px solid var(--color-accent); outline-offset:5px; border-radius:4px; } @media(prefers-reduced-motion:reduce) { .home-faq-item summary::after { transition:none; } } .home-faq-item p { font-size: 14px; line-height: 1.85; } .home-composition .home-block--finalCta { text-align: center; padding: 32px; border: 1px solid var(--ref-border); border-radius: 24px; background: linear-gradient(135deg,var(--ref-muted),var(--color-surface)); } .home-block--finalCta .lede { max-width: 42rem; margin-inline: auto; } .home-block--finalCta .home-actions { justify-content: center; } .wiki-nav__scroll { scrollbar-width: none; -ms-overflow-style: none; } .wiki-nav__scroll::-webkit-scrollbar { display: none; } .wiki-nav__panel { border-radius: 16px; padding: 16px; background: color-mix(in srgb,var(--color-surface) 55%,transparent); box-shadow: inset 0 0 0 1px var(--ref-border); } .wiki-nav__links { width: auto; font-size: 14px; } .wiki-nav__label { padding-inline: 4px; font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .22em; } .wiki-nav__links summary { display: flex; align-items: center; gap: 8px; list-style: none; border-radius: 8px; padding: 8px 4px; font-size: 13px; } .wiki-nav__links summary::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='1.5'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ref-border); border-radius: 8px; background-color: var(--ref-muted); color: var(--color-muted-ink); flex-shrink: 0; } .wiki-nav__links summary::after { content: '›'; margin-left: auto; transition: transform .15s; } .wiki-nav__links details[open] > summary::after { transform: rotate(90deg); } .wiki-nav__links a { min-height: 36px; padding: 8px 10px; border: 0; border-radius: 8px; line-height: 1.45; } .wiki-nav__links a:hover, .wiki-nav__links a[aria-current='true'] { color: var(--color-ink); background: var(--ref-muted); } .field-card { padding: 24px; border: 1px solid var(--ref-border); border-radius: 16px; background: color-mix(in srgb,var(--color-surface) 70%,transparent); box-shadow: none; } .field-card:hover { translate: none; } .field-card h2 { font-size: 26px; margin-top: 0; } .field-card h3 { font-size: 20px; margin-top: 28px; } .field-card p,.field-card li { line-height: 1.85; } .field-card a, .main-content article > p a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; } .field-card table { border-collapse: collapse; width: 100%; font-size: 14px; } .field-card th,.field-card td { border-bottom: 1px solid var(--ref-border); padding: 12px; text-align: left; } .field-card th { background: var(--ref-muted); font-weight: 650; } .breadcrumbs { margin-bottom: 28px; font-size: 14px; } .site-footer { margin-top: 64px; padding: 48px 0; border-color: var(--ref-border); background: color-mix(in srgb,var(--color-surface) 25%,transparent); font-size: 14px; } .site-footer .footer-title { color: var(--color-ink); font-size: 20px; font-weight: 700; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 24px; } .footer-link:hover { color: var(--color-accent); } @media (min-width: 1024px) { .home-hero-grid:has(.home-hero-visual) { grid-template-columns: minmax(0,.9fr) minmax(320px,1.1fr); } .home-discovery-row { grid-template-columns: 1.05fr .95fr; } .home-about-grid:has(.home-about-visual) { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .masthead__inner { flex-wrap: wrap; gap: 8px; padding-block: 10px; } .brand { font-size: 12px; margin-right: auto; } .brand > span { max-width: 21ch; } .brand__icon { width: 30px; height: 30px; } .language-switcher { font-size: 11px; gap: 7px; } .nav-toggle { border-radius: 8px; font-size: 12px; padding: 6px 8px; } .site-shell { padding-block: 24px; } .main-content .home-composition > .home-hero { padding: 20px; border-radius: 24px; } .home-hero h1 { font-size: 36px; } .home-hero-visual { transform: none; } h2 { font-size: 26px; } .home-actions { align-items: stretch; } .home-actions a { flex-grow: 1; } .home-composition .home-block,.home-discovery-row { margin-block: 40px; } .home-composition .home-discovery-row .home-block { margin: 0; padding: 20px; } .home-module { padding: 20px; } .field-card { padding: 20px; } .main-content article > header { padding: 24px; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } } .footer-grid { display: grid; gap: 40px; } .footer-intro { max-width: 42rem; } .footer-brand { font-size: 14px; font-weight: 750; letter-spacing: .06em; } .footer-intro h3 { margin-top: 20px; font-size: 20px; } .footer-about { font-size: 14px; line-height: 2; color: var(--color-muted-ink); } .footer-column h4 { margin: 0 0 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .footer-column ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .footer-play { display: inline-flex; padding: 8px 16px; border: 1px solid var(--ref-border); border-radius: 999px; margin-top: 16px; } .footer-legal { border-top: 1px solid var(--ref-border); padding-top: 24px; margin-top: 48px; font-size: 12px; } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.35fr .65fr .65fr; } }   .home-module-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .home-module:not(.home-module--category-card) { padding: 28px; } .home-module::before { content: attr(data-order); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: color-mix(in srgb,var(--color-accent) 12%,transparent); color: var(--color-accent); font-weight: 750; } .home-module .home-highlights { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0; } .home-module .home-highlights li { padding: 14px 16px; border: 1px solid var(--ref-border); border-radius: 12px; background: var(--color-canvas); } .home-module--step-by-step .home-highlights { counter-reset: step; list-style: none; } .home-module--step-by-step .home-highlights li { counter-increment: step; } .home-module--step-by-step .home-highlights li::before { content: counter(step); color: var(--color-accent); font-weight: 750; margin-right: 12px; } .home-module--tier-grid .home-highlights,.home-module--code-cards .home-highlights { grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); } .home-hero .home-actions a:nth-child(3) { border: 0; background: transparent; padding-inline: 4px; color: var(--color-muted-ink); } .home-trending-card, .home-trending-card > a { min-height: 330px; } .home-block--aboutGame { border: 1px solid var(--ref-border); border-radius: 32px; padding: 32px; background: color-mix(in srgb,var(--color-surface) 55%,transparent); } .home-about-data .home-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .home-about-data .home-stats > li { padding: 14px; border: 1px solid var(--ref-border); border-radius: 12px; background: var(--color-canvas); } .home-about-visual img { aspect-ratio: 16/9; } body[data-page-type='content'] .main-content article > header,body[data-page-type='translation'] .main-content article > header,body[data-page-type='category'] .main-content article > header { background: transparent; border: 0; padding: 0; border-radius: 0; } body[data-page-type='content'] .main-content article > header .eyebrow,body[data-page-type='translation'] .main-content article > header .eyebrow,body[data-page-type='category'] .main-content article > header .eyebrow { display: none; } .main-content .mdx-content { margin-top: 40px; line-height: 1.85; } @media (min-width: 1024px) { .home-about-grid:has(.home-about-visual) { grid-template-columns: .92fr 1.08fr; } } @media (max-width: 639px) { .home-hero .home-stats { grid-template-columns: 1fr 1fr; } .home-hero .home-stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .home-block--aboutGame { padding: 20px; } } .category-card-grid { display: grid; gap: 16px; margin-top: 40px; } .category-card { display: block; border: 1px solid var(--ref-border); border-radius: 16px; background: color-mix(in srgb,var(--color-surface) 70%,transparent); padding: 20px; color: var(--color-ink); transition: border-color .15s,transform .15s; } .category-card:hover { transform: translateY(-2px); border-color: var(--color-accent); } .category-card h2 { font-size: 18px; line-height: 1.4; margin: 16px 0 8px; } .category-card p { min-height: 48px; font-size: 14px; line-height: 1.7; color: var(--color-muted-ink); } .category-read-more { display: inline-flex; margin-top: 16px; font-size: 14px; font-weight: 650; color: var(--color-accent); } .category-card-icon { display: block; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb,var(--color-accent) 12%,var(--color-canvas)); } body[data-page-type='content'] .field-card,body[data-page-type='translation'] .field-card { border: 0; border-radius: 0; padding: 0; margin: 40px 0; background: transparent; } body[data-page-type='content'] .field-card::before,body[data-page-type='translation'] .field-card::before { display: none; } @media (min-width: 640px) { .category-card-grid { grid-template-columns: 1fr 1fr; } } .header-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; } .header-controls .theme-toggle { margin-left: 0; } .language-menu { position: relative; font-size: 13px; } .language-menu > summary { list-style: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; } .language-menu > summary::-webkit-details-marker { display: none; } .language-menu > summary::after { content: '⌄'; margin-left: 8px; } .language-menu > .language-switcher { position: absolute; right: 0; top: 100%; z-index: 60; display: grid; min-width: 180px; padding: 8px; border: 1px solid var(--ref-border); border-radius: 12px; background: var(--color-surface); box-shadow: 0 12px 28px rgb(0 0 0 / .16); } .language-menu:not([open]) > .language-switcher { display: none; } .language-menu .language-switcher a { padding: 8px; border-radius: 6px; } .language-menu .language-switcher a:hover { background: var(--ref-muted); } .wiki-nav-count { margin-left: auto; color: var(--color-muted-ink); font-size: 11px; } .wiki-nav__links summary::after { margin-left: 0; } .wiki-nav__links details > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } @media (min-width: 768px) { .site-nav { margin-left: auto; flex-wrap: nowrap; } } @media (max-width: 1100px) { .brand > span { max-width: 18ch; } .site-nav > a { padding-inline: 6px; font-size: 12px; } } @media (max-width: 767px) { .header-controls { margin-left: 0; } .site-nav[data-open='true'] { order: 5; width: 100%; } } .category-card-grid { list-style: none; padding: 0; } .category-card-grid > li { min-width: 0; } .category-card-grid > li > .category-card { height: 100%; } .category-card-grid > [data-ad-anchor], .category-card-grid > [data-ad-slot] { grid-column: 1 / -1; } .category-card-grid > li[data-factory-banner-reservation], .category-card-grid > li[data-pending-factory-banner-reservation] { grid-column: 1 / -1; } .category-card-grid > li[data-factory-banner-reservation] > .category-card, .category-card-grid > li[data-pending-factory-banner-reservation] > .category-card { height: auto; } .home-update-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; } .home-update-row strong { display: block; font-size: 15px; line-height: 1.6; } .home-update-row time { display: block; margin-top: 8px; } .home-update-category { font-size: 10px; padding: 3px 7px; border-radius: 6px; border: 1px solid color-mix(in srgb,var(--color-accent) 35%,transparent); background: color-mix(in srgb,var(--color-accent) 8%,transparent); color: var(--color-accent); } .home-update-row:hover strong { color: var(--color-accent); } .home-about-copy > h2 { font-size: 30px; } .home-about-copy > p { margin-top: 20px; } .home-about-grid { align-items: start; } @media (max-width: 639px) { .home-update-row { grid-template-columns: 1fr; } .home-update-category { width: fit-content; } .home-update-row > span:last-child { display: none; } } @media (max-width: 767px) { .masthead__inner > .brand { flex: 1 1 0; min-width: 0; margin-right: 0; } .brand > span { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-controls { flex: 0 0 auto; } } @media (max-width: 767px) { .site-nav[data-open='true'] { width: auto; justify-content: stretch; max-height: calc(100dvh - var(--masthead-height,65px) - 24px); overflow-y: auto; } .site-nav > a { text-align: left; font-size: 14px; } } .home-stat { flex-direction: column; } .field-card table { display: block; max-width: 100%; overflow-x: auto; } .field-card pre { max-width: 100%; overflow-x: auto; } .field-card img { max-width: 100%; height: auto; } .field-card a { overflow-wrap: anywhere; } .category-card-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='1.5'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; } .mobile-nav-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(360px,90vw); height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--ref-border); border-radius: 0; padding: 24px; background: var(--color-canvas); color: var(--color-ink); } .mobile-nav-panel::backdrop { background: rgb(0 0 0 / .65); } .mobile-nav-panel .site-nav { position: static; display: grid; width: 100%; border: 0; padding: 0; margin-top: 48px; box-shadow: none; background: transparent; justify-content: stretch; gap: 8px; max-height: none; } .mobile-nav-panel .site-nav a { padding: 12px; text-align: left; font-size: 14px; } .mobile-nav-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--color-ink); font-size: 28px; cursor: pointer; }   .home-section-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px; } .home-section-heading h2 { margin-bottom:0; } .home-section-heading .home-quick-links { margin:0; display:flex; flex-wrap:wrap; gap:8px; } .home-quick-link { display:inline-flex; padding:6px 14px; border:1px solid var(--ref-border); border-radius:999px; color:var(--color-muted-ink); font-size:13px; text-decoration:none; background:color-mix(in srgb,var(--color-surface) 70%,transparent); } a.home-quick-link:hover { border-color:var(--color-accent); color:var(--color-accent); } .home-carousel { overflow-x:auto; max-width:100%; margin-top:24px; scrollbar-width:thin; scrollbar-color:var(--ref-border) transparent; overscroll-behavior-x:contain; } .home-carousel-track { position:relative; display:flex; gap:16px; width:max-content; padding:0 0 16px; margin:0; list-style:none; } .home-carousel-card { flex:0 0 280px; width:280px; border:1px solid var(--ref-border); border-radius:16px; background:color-mix(in srgb,var(--color-surface) 70%,transparent); } .home-carousel-card > a { display:flex; height:100%; color:inherit; text-decoration:none; } .home-carousel-card .home-trending-copy { padding:20px; align-self:stretch; display:flex; flex-direction:column; } .home-trending-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; } .home-module-icon { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent); border-radius:12px; background:color-mix(in srgb,var(--color-accent) 10%,transparent); color:var(--color-accent); } .home-module-icon svg { width:21px; height:21px; } .home-carousel-card h3 { font-size:18px; line-height:1.45; margin:16px 0 0; } .home-carousel-card p { font-size:14px; line-height:1.7; margin-top:8px; } .home-carousel-card:hover { border-color:var(--color-accent); } .home-carousel-card:hover h3 { color:var(--color-accent); } .home-card-read { margin-top:auto; padding-top:20px; font-size:13px; font-weight:650; color:var(--color-accent); } .home-carousel-pause { display:block; margin:12px 0 -12px auto; border:0; background:transparent; color:var(--color-muted-ink); font:inherit; font-size:12px; cursor:pointer; } .home-carousel-pause[hidden] { display:none; } .home-slide-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .home-slide-viewport::-webkit-scrollbar { display: none; } .home-slide-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; list-style: none; margin: 0; padding: 0; } .home-slide-track > li { scroll-snap-align: start; min-width: 0; } .home-slide-track .home-trending-card > a { min-height: 300px; text-decoration: none; } .home-slide-track .home-trending-copy { padding: 20px; } .home-slide-track .home-trending-copy h3 { font-size: 21px; font-weight: 600; } .home-slide-track .home-card-read { display: none; } .home-slideshow .home-section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 24px; } .home-slide-controls { display: flex; gap: 8px; } .home-slide-controls[hidden], .home-slide-dots[hidden] { display: none; } .home-slide-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ref-border); border-radius: 50%; color: var(--color-muted-ink); background: transparent; font-size: 20px; cursor: pointer; } .home-slide-controls button:hover { color: var(--color-ink); background: color-mix(in srgb,var(--color-ink) 8%,transparent); } .home-slide-controls button { width: 40px; height: 40px; border-color: color-mix(in srgb,var(--color-ink) 18%,transparent); background: color-mix(in srgb,var(--color-surface) 40%,transparent); } .home-slide-controls button svg { display: block; flex: none; } .home-slide-controls button:hover { border-color: color-mix(in srgb,var(--color-accent) 60%,transparent); } .home-slide-controls button:focus-visible, .home-slide-dots button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .home-slide-dots { display: flex; align-items: center; gap: 4px; margin-top: 20px; } .home-slide-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; } .home-slide-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 8px; background: var(--color-muted-ink); opacity: .4; } .home-slide-dots button[aria-current="true"]::before { width: 22px; opacity: 1; background: var(--color-ink); } .home-slideshow > .home-quick-links { margin-top: 20px; } @media (max-width: 767px) { .home-slide-track { grid-auto-columns: 100%; gap: 16px; } .home-slideshow .home-section-heading h2 { font-size: 28px; } .home-slide-controls { gap: 4px; } .home-slide-controls button { width: 32px; height: 32px; } } .home-trending-card:has(img) .home-card-read { color:white; } .home-trending-card:has(img) .home-trending-meta .home-module-icon { display:none; } .home-module-nav { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 32px; } .home-module-grid { grid-template-columns:minmax(0,1fr); align-items:start; gap:20px; } .home-module-grid .home-module { padding:0; overflow:hidden; border-radius:24px; transition:transform .2s,border-color .2s; } .home-module-grid .home-module::before { content:none; } .home-module-grid .home-module:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--color-accent) 35%,var(--ref-border)); } .home-module-header { padding:20px 24px; border-bottom:1px solid var(--ref-border); background:linear-gradient(135deg,var(--ref-muted),transparent); } .home-module-header > div { display:flex; align-items:start; gap:16px; } .home-module-order { font-size:10px; letter-spacing:.18em; color:var(--color-muted-ink); } .home-module-grid .home-module h3 { margin:4px 0 0; padding:0; border:0; font-size:18px; line-height:1.45; } .home-module-header p { margin:12px 0 0; font-size:14px; line-height:1.9; } .home-module-body { padding:20px 24px; } .home-module-body .home-highlights { margin:0; padding:0; list-style:none; gap:12px; } .home-module-body .home-highlights li { margin:0; overflow-wrap:anywhere; } .home-module-body .home-highlights li strong,.home-module-body .home-highlights li > span { display:block; } .home-module-body .home-highlights li > span { margin-top:8px; } .home-module--step-by-step .home-module-body li { display:flex; align-items:start; gap:12px; padding:0; background:transparent; border:0; } .home-module--step-by-step .home-module-body li::before { content:none; } .home-module--step-by-step .home-module-body li strong { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:999px; color:var(--color-surface); background:var(--color-accent); font-size:12px; } :root[data-theme='dark'] .home-module--step-by-step .home-module-body li strong { color:var(--color-canvas); } .home-module--step-by-step .home-module-body li > span { margin:0; } .home-module--tier-grid .home-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-module--tier-grid li[data-tier='S'] { border-color:#d4a22b66; background:#d4a22b19; } .home-module--tier-grid li[data-tier='A'] { border-color:#05966966; background:#05966919; } .home-module--tier-grid li[data-tier='B'] { border-color:#3b82f666; background:#3b82f619; } .home-module--code-cards .home-highlights { grid-template-columns:minmax(0,1fr); } .home-module--code-cards code { display:inline-block; padding:6px 10px; background:var(--color-surface); border-radius:8px; font-size:13px; } .home-module-body .home-module-link { display:inline-flex; margin-top:20px; color:var(--color-accent); font-size:14px; font-weight:650; } .home-module-link::after { content:'›'; margin-left:8px; } .home-references { margin-bottom:0; } .home-category-card { display:block; padding:24px; color:inherit; text-decoration:none; } .home-module-grid .home-category-card h3 { margin-top:16px; } .home-category-card p { margin:8px 0; } .home-category-count { display:flex; justify-content:space-between; color:var(--color-muted-ink); margin-top:18px; font-size:13px; } .home-module-grid > [data-factory-banner-reservation], .home-module-grid > [data-pending-factory-banner-reservation] { grid-column:1/-1; } .home-composition .home-block--finalCta { padding:32px; } .home-block--finalCta h2 { font-size:30px; line-height:1.2; margin:0; letter-spacing:-.035em; } .home-block--finalCta .lede { font-size:16px; line-height:1.7; margin-top:12px; max-width:42rem; } .home-block--finalCta .home-actions { margin-top:24px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .home-block--finalCta a.home-cta { min-height:44px; padding:10px 32px; border-radius:10px; font-size:14px; } .home-block--finalCta a.home-cta--secondary { background:var(--color-canvas); color:var(--color-ink); border:1px solid var(--ref-border); } .home-block--finalCta a.home-cta--secondary::after { content:none; } .home-block--finalCta span.home-cta { font-size:14px; color:var(--color-muted-ink); } @media(min-width:1024px) { .home-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-module--card-list .home-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:639px) { .home-carousel-card { flex-basis:260px; width:260px; } .home-module-header,.home-module-body { padding:20px; } .home-composition .home-block--finalCta { padding:28px 20px; } .home-block--finalCta h2 { font-size:26px; } .home-block--finalCta a.home-cta { width:100%; padding-inline:16px; } } @media(prefers-reduced-motion:reduce) { .home-module-grid .home-module:hover { transform:none; } } .footer-brand { display:inline-flex; align-items:center; gap:12px; } .footer-brand img { flex:0 0 40px; object-fit:contain; } .home-module[id] { scroll-margin-top:calc(var(--masthead-height,68px) + 20px); } .home-composition .home-block--faq { border:0; padding:0; background:transparent; } .home-faq-list { margin-top:24px; padding:0 20px; border:1px solid var(--ref-border); border-radius:16px; background:color-mix(in srgb,var(--color-surface) 70%,transparent); } .home-about-copy > a.home-cta { display:inline-flex; align-items:center; gap:8px; border-radius:8px; padding:10px 20px; margin-top:24px; background:var(--color-accent); color:var(--color-surface); font-weight:650; font-size:14px; } .home-about-copy > a.home-cta::after { content:'→'; } :root[data-theme='dark'] .home-about-copy > a.home-cta { color:var(--color-canvas); }   body[data-video-presentation='howtofish-v1'] .home-hero-visual { transform: none; } body[data-video-presentation='howtofish-v1'] .factory-video { margin: 32px 0; max-width: 100%; } body[data-video-presentation='howtofish-v1'] .home-hero-visual .factory-video { margin: 0; } body[data-video-presentation='howtofish-v1'] .factory-video--article { overflow: hidden; border: 1px solid var(--ref-border); border-radius: 16px; background: color-mix(in srgb,var(--color-surface) 70%,transparent); } body[data-video-presentation='howtofish-v1'] .factory-video__heading { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--ref-border); background: var(--ref-muted); color: var(--color-ink); font-size: 14px; font-weight: 600; line-height: 20px; } body[data-video-presentation='howtofish-v1'] .factory-video__heading svg { width: 20px; height: 20px; color: var(--color-accent); border: 1.5px solid currentColor; border-radius: 50%; } body[data-video-presentation='howtofish-v1'] .factory-video__trigger { display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; border-radius: 0; background: #000; } body[data-video-presentation='howtofish-v1'] .factory-video--hero .factory-video__trigger { border: 1px solid var(--ref-border); border-radius: 16px; box-shadow: 0 10px 15px -3px #0002; } body[data-video-presentation='howtofish-v1'] .factory-video__trigger img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: filter .2s; } body[data-video-presentation='howtofish-v1'] .factory-video__trigger:hover img { filter: brightness(.8); } body[data-video-presentation='howtofish-v1'] .factory-video__play { width: 80px; height: 80px; color: #fff; background: color-mix(in srgb,var(--color-accent) 10%,transparent); backdrop-filter: blur(12px); transition: transform .2s; } body[data-video-presentation='howtofish-v1'] .factory-video__play > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(color-mix(in srgb,var(--color-accent) 30%,transparent),var(--color-accent)); box-shadow: 0 4px 6px #0002; } body[data-video-presentation='howtofish-v1'] .factory-video__play svg { width: 24px; height: 24px; filter: drop-shadow(0 4px 3px #0001); } body[data-video-presentation='howtofish-v1'] .factory-video__trigger:hover .factory-video__play { transform: translate(-50%,-50%) scale(1.05); } body[data-video-presentation='howtofish-v1'] .factory-video__platform { position: absolute; bottom: 10px; right: 10px; padding: 2px 8px; border-radius: 6px; color: #fff; background: #000b; font-size: 11px; line-height: 18px; } body[data-video-presentation='howtofish-v1'] .factory-video figcaption { margin: 0; padding: 16px 20px; color: var(--color-muted-ink); font-size: 14px; line-height: 24px; } body[data-video-presentation='howtofish-v1'] .factory-video-dialog { padding: 0; border: 1px solid #ffffff26; border-radius: 12px; background: #000; overflow: hidden; } body[data-video-presentation='howtofish-v1'] .factory-video-dialog::backdrop { background: #000c; backdrop-filter: blur(4px); } body[data-video-presentation='howtofish-v1'] .factory-video-dialog__close { z-index: 1; top: 8px; right: 8px; width: 40px; height: 40px; border: 1px solid #fff3; border-radius: 50%; background: #000b; } @media (min-width: 640px) { body[data-video-presentation='howtofish-v1'] .factory-video__play { width: 96px; height: 96px; } body[data-video-presentation='howtofish-v1'] .factory-video__play > span { width: 64px; height: 64px; } body[data-video-presentation='howtofish-v1'] .factory-video__play svg { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { body[data-video-presentation='howtofish-v1'] .factory-video__play, body[data-video-presentation='howtofish-v1'] .factory-video__trigger img { transition: none; } }   body[data-explore-presentation="categories-v1"] .home-explore-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } body[data-explore-presentation="categories-v1"] .home-explore-card { display:flex; flex-direction:column; align-items:flex-start; height:100%; min-width:0; padding:32px; border:1px solid var(--ref-border); border-radius:24px; background:var(--color-surface); color:var(--color-ink); text-decoration:none; transition:border-color .2s,background-color .2s; } body[data-explore-presentation="categories-v1"] a.home-explore-card:hover { border-color:var(--color-accent); } body[data-explore-presentation="categories-v1"] .home-explore-card .home-module-icon { width:48px; height:48px; margin-bottom:24px; border:0; background:color-mix(in srgb,var(--color-ink) 8%,transparent); color:var(--color-ink); } body[data-explore-presentation="categories-v1"] .home-explore-card h3 { margin:0 0 16px; font-size:20px; line-height:1.4; font-weight:600; } body[data-explore-presentation="categories-v1"] .home-explore-card p { margin:0; font-size:16px; line-height:1.65; color:var(--color-muted-ink); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } @media(max-width:1100px) { body[data-explore-presentation="categories-v1"] .home-explore-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:640px) { body[data-explore-presentation="categories-v1"] .home-explore-cards { grid-template-columns:1fr; gap:16px; } body[data-explore-presentation="categories-v1"] .home-explore-card { padding:24px; } } @media(prefers-reduced-motion:reduce) { body[data-explore-presentation="categories-v1"] .home-explore-card { transition:none; } } body[data-explore-presentation="categories-v1"] #explore { scroll-margin-top:calc(var(--masthead-height,68px) + 20px); }   body[data-category-presentation="overview-v1"] .category-overview .lede { max-width:72ch; margin-bottom:24px; } .category-intro { max-width:76ch; color:var(--color-muted-ink); font-size:17px; line-height:1.8; margin:24px 0 40px; } .category-intro p + p { margin-top:16px; } .category-guides > h2 { margin-bottom:24px; font-size:26px; } .category-guides .category-card-grid { margin-top:0; } .category-card h3 { font-size:18px; line-height:1.4; margin:16px 0 8px; } .category-guides .category-card { display:flex; flex-direction:column; text-decoration:none; } .category-guides .category-card p { flex:1; } .category-guides .category-card:focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; } @media(max-width:767px) { .category-intro { font-size:16px; margin-bottom:28px; } } .category-card-grid > .category-ad-reservation { grid-column:1/-1; list-style:none; } .category-ad-reservation[data-pending-factory-banner-reservation] { display:none; }   [data-article-presentation="howtofish-v1"] .article-reader { min-width: 0; } [data-article-presentation="howtofish-v1"] .article-reader > header h1 { font-size: clamp(2.25rem, 3.5vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; } [data-article-presentation="howtofish-v1"] .article-reader > header .lede { margin: 20px 0 0; color: var(--color-muted-ink); font-size: 18px; line-height: 1.8; max-width: none; } [data-article-presentation="howtofish-v1"] .article-toc { margin: 32px 0; padding: 20px 24px; border: 1px solid var(--ref-border); border-radius: 12px; background: var(--color-surface); } [data-article-presentation="howtofish-v1"] .article-toc summary { cursor: pointer; font-size: 16px; font-weight: 700; } [data-article-presentation="howtofish-v1"] .article-toc nav { display: grid; gap: 10px; margin-top: 16px; } [data-article-presentation="howtofish-v1"] .article-toc a { width: fit-content; font-size: 14px; line-height: 1.6; color: var(--color-muted-ink); text-decoration: none; } [data-article-presentation="howtofish-v1"] .article-toc a:hover { color: var(--color-accent); text-decoration: underline; } [data-article-presentation="howtofish-v1"] .article-reader .article-body-section { margin: 32px 0; } [data-article-presentation="howtofish-v1"] .article-reader .article-body-section h2, [data-article-presentation="howtofish-v1"] .article-sources h2 { margin: 40px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ref-border); font-size: 24px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; } [data-article-presentation="howtofish-v1"] .article-body-section h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.4; font-weight: 650; } [data-article-presentation="howtofish-v1"] .article-body-section h4 { margin: 24px 0 10px; font-size: 18px; line-height: 1.5; font-weight: 650; } [data-article-presentation="howtofish-v1"] .article-reader :is(h2,h3,h4,h5,h6)[id] { scroll-margin-top: 100px; } [data-article-presentation="howtofish-v1"] .article-body-section p { margin: 20px 0; font-size: 16px; line-height: 2; color: var(--color-muted-ink); } [data-article-presentation="howtofish-v1"] .article-body-section :is(ul,ol) { margin: 20px 0; padding-left: 24px; color: var(--color-muted-ink); line-height: 1.9; } [data-article-presentation="howtofish-v1"] .article-body-section li + li { margin-top: 8px; } [data-article-presentation="howtofish-v1"] .article-body-section li::marker { color: var(--color-accent); } [data-article-presentation="howtofish-v1"] .article-body-section strong { color: var(--color-ink); font-weight: 650; } [data-article-presentation="howtofish-v1"] .article-body-section a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } [data-article-presentation="howtofish-v1"] .article-body-section blockquote { margin: 24px 0; padding: 4px 24px; border: 0; border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; background: var(--color-surface); } [data-article-presentation="howtofish-v1"] .article-body-section .article-callout { --callout-color: var(--color-accent); padding: 4px 24px; margin: 28px 0; border: 1px solid var(--ref-border); border-left: 4px solid var(--callout-color); border-radius: 12px; background: color-mix(in srgb, var(--callout-color) 7%, var(--color-surface)); overflow-wrap: anywhere; } [data-article-presentation="howtofish-v1"] .article-body-section .article-callout--summary { --callout-color: #428bd4; } [data-article-presentation="howtofish-v1"] .article-body-section .article-callout--tip { --callout-color: #329970; } [data-article-presentation="howtofish-v1"] .article-body-section .article-callout--warning { --callout-color: #c18b27; } [data-article-presentation="howtofish-v1"] .article-callout > p:first-child > strong:first-child { display: block; margin-bottom: 6px; color: var(--color-ink); font-size: 1.05em; } [data-article-presentation="howtofish-v1"] .article-callout :is(ol,ul) { padding-left: 24px; } [data-article-presentation="howtofish-v1"] .article-callout li + li { margin-top: 12px; } [data-article-presentation="howtofish-v1"] .article-callout li::marker { color: var(--color-ink); font-weight: 650; } @media (max-width: 600px) { [data-article-presentation="howtofish-v1"] .article-body-section .article-callout { padding: 2px 16px; margin: 24px 0; } } [data-article-presentation="howtofish-v1"] .article-table { margin: 24px 0; width: 100%; overflow-x: auto; border: 1px solid var(--ref-border); border-radius: 12px; } [data-article-presentation="howtofish-v1"] .article-table table { display: table; width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; line-height: 1.65; } [data-article-presentation="howtofish-v1"] .article-table :is(th,td) { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--ref-border); text-align: left; vertical-align: top; min-width: 160px; } [data-article-presentation="howtofish-v1"] .article-table th { background: var(--color-surface); color: var(--color-muted-ink); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; } [data-article-presentation="howtofish-v1"] .article-table td { color: var(--color-muted-ink); } [data-article-presentation="howtofish-v1"] .article-table tr:last-child td { border-bottom: 0; } [data-article-presentation="howtofish-v1"] .article-body-section pre { max-width: 100%; overflow-x: auto; padding: 20px; border: 1px solid var(--ref-border); border-radius: 12px; background: var(--color-surface); font-size: 14px; line-height: 1.7; } [data-article-presentation="howtofish-v1"] .article-body-section :not(pre) > code { padding: 2px 5px; border-radius: 4px; background: var(--color-surface); font-size: .875em; overflow-wrap: anywhere; } [data-article-presentation="howtofish-v1"] .article-body-section img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 24px auto; } [data-article-presentation="howtofish-v1"] .article-body-section hr { margin: 32px 0; border: 0; border-top: 1px solid var(--ref-border); } [data-article-presentation="howtofish-v1"] .article-sources { margin-top: 40px; font-size: 14px; color: var(--color-muted-ink); overflow-wrap: anywhere; line-height: 1.8; } [data-article-presentation="howtofish-v1"] .article-related { margin: 48px 0 24px; } [data-article-presentation="howtofish-v1"] .article-related > h2 { margin: 0 0 20px; font-size: 20px; font-weight: 700; } [data-article-presentation="howtofish-v1"] .article-related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } [data-article-presentation="howtofish-v1"] .article-related-card { display: block; padding: 24px; border: 1px solid var(--ref-border); border-radius: 12px; background: var(--color-surface); text-decoration: none; transition: border-color .15s; } [data-article-presentation="howtofish-v1"] .article-related-card:hover { border-color: var(--color-accent); } [data-article-presentation="howtofish-v1"] .article-related-card h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.5; } [data-article-presentation="howtofish-v1"] .article-related-card p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-muted-ink); } [data-article-presentation="howtofish-v1"] :is(.article-toc summary,.article-toc a,.article-table,.article-related-card):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } @media(max-width: 640px) { [data-article-presentation="howtofish-v1"] .article-toc { padding: 20px; } [data-article-presentation="howtofish-v1"] .article-reader > header .lede { font-size: 17px; } [data-article-presentation="howtofish-v1"] .article-related-grid { grid-template-columns: 1fr; } }   .home-composition .home-block { margin-block: 56px; } .home-composition :is(.home-block > h2,.home-section-heading h2,.home-about-copy > h2) { font-size: clamp(24px,2.4vw,30px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; } .home-composition .eyebrow { font-weight: 500; font-size: 11px; letter-spacing: .16em; } .home-composition .home-discovery-row .home-block { margin: 0; padding: 20px; border-radius: 16px; } .home-composition .home-discovery-row h2 { margin: 0 0 16px; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: .02em; color: var(--color-muted-ink); } .home-discovery-row { gap: 20px; margin-block: 48px 56px; } .home-discovery-row .home-steps { margin: 0; } .home-step-card { grid-template-columns: 28px minmax(0,1fr) 14px; gap: 10px; padding: 12px 8px; border-radius: 10px; } .home-step-number { width: 28px; height: 28px; font-size: 12px; font-weight: 500; } .home-steps h3 { margin: 2px 0 6px; font-size: 15px; font-weight: 600; line-height: 1.4; } .home-steps p { font-size: 13px; line-height: 1.6; font-weight: 400; } .home-discovery-row .home-update-row { padding: 14px 8px; gap: 8px; border-radius: 10px; } .home-update-row strong { font-size: 14px; font-weight: 550; line-height: 1.5; } .home-update-row time { font-size: 11px; margin-top: 8px; } .home-update-category { font-size: 9px; padding: 2px 5px; font-weight: 500; } .home-discovery-row .home-browse { margin-top: 16px; font-size: 13px; font-weight: 500; } .home-slide-track .home-trending-card, .home-slide-track .home-trending-card > a { min-height: 250px; border-radius: 16px; } .home-slide-track .home-trending-copy { padding: 18px; } .home-slide-track .home-trending-copy h3 { font-size: 19px; line-height: 1.35; font-weight: 600; margin-block: 10px 0; } .home-slide-track .home-trending-copy p { font-size: 13px; line-height: 1.6; } .home-slide-track .home-card-category { font-size: 10px; font-weight: 500; } body[data-explore-presentation="categories-v1"] .home-explore-cards { gap: 16px; } body[data-explore-presentation="categories-v1"] .home-explore-card { padding: 20px; border-radius: 14px; } body[data-explore-presentation="categories-v1"] .home-explore-card .home-module-icon { width: 40px; height: 40px; flex: 0 0 40px; margin-bottom: 16px; border-radius: 12px; color: color-mix(in srgb,var(--color-ink) 80%,transparent); transition: background-color .2s,color .2s; } body[data-explore-presentation="categories-v1"] .home-explore-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; } body[data-explore-presentation="categories-v1"] .home-explore-card p { font-size: 13px; line-height: 1.6; font-weight: 400; } body[data-explore-presentation="categories-v1"] a.home-explore-card:is(:hover,:focus-visible) { border-color: var(--color-accent); background: var(--ref-muted); box-shadow: 0 4px 16px color-mix(in srgb,var(--color-accent) 8%,transparent); } body[data-explore-presentation="categories-v1"] a.home-explore-card:is(:hover,:focus-visible) .home-module-icon { background: var(--color-accent); color: var(--color-canvas); } body[data-explore-presentation="categories-v1"] a.home-explore-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } @media(prefers-reduced-motion:reduce) { body[data-explore-presentation="categories-v1"] .home-explore-card .home-module-icon { transition:none; } } .home-block--aboutGame { padding: 24px; border-radius: 18px; } .home-about-grid { gap: 28px; } .home-about-copy { font-size: 14px; line-height: 1.75; font-weight: 400; color: var(--color-muted-ink); } .home-about-copy > h2 { color: var(--color-ink); } .home-about-copy > p { margin-top: 16px; } .home-about-visual { border-radius: 12px; } .home-about-data .home-stats { gap: 8px; margin-block: 12px 0; } .home-about-data .home-stats > li { padding: 10px 12px; border-radius: 8px; } .home-about-data .home-stat dt { font-size: 11px; font-weight: 400; } .home-about-data .home-stat dd { font-size: 15px; font-weight: 600; } .home-faq-list { margin-top: 20px; padding: 0 18px; border-radius: 12px; } .home-faq-item { padding: 13px 0; } .home-faq-item summary { font-size: 14px; font-weight: 500; line-height: 1.6; } .home-faq-item summary:hover { color: var(--color-accent); } .home-faq-item p { font-size: 13px; line-height: 1.75; max-width: 70ch; } @media(max-width: 767px) { .home-composition .home-block,.home-discovery-row { margin-block: 40px; } .home-composition .home-discovery-row .home-block { padding: 18px; } .home-block--aboutGame { padding: 20px; } }   [data-related-guides="intent-v2"] .article-related-card {display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px;} [data-related-guides="intent-v2"] .article-related-card h3 {margin:0;overflow-wrap:anywhere;} [data-related-guides="intent-v2"] .article-related-card p {margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} [data-related-guides="intent-v2"] .article-related-cta {display:block;margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--color-accent);} [data-related-guides="intent-v2"] .article-related-card:hover .article-related-cta {text-decoration:underline;} @media(max-width:767px){[data-related-guides="intent-v2"] .article-related-card{padding:16px;}} [data-related-guides="intent-v2"] .article-related-kind {font-size:12px;line-height:1.5;font-weight:600;color:var(--color-muted-ink);}   [data-source-presentation="editorial-v1"] .home-fact-references{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-size:13px;line-height:1.6;color:var(--color-muted-ink);text-align:left} [data-source-presentation="editorial-v1"] .home-fact-reference{color:inherit;text-decoration:underline;text-decoration-color:var(--ref-border);text-underline-offset:4px;overflow-wrap:anywhere} [data-source-presentation="editorial-v1"] .home-fact-reference:hover,[data-source-presentation="editorial-v1"] .home-fact-reference:focus-visible{color:var(--color-accent);text-decoration-color:currentColor} [data-source-presentation="editorial-v1"] .article-sources{border-top:1px solid var(--ref-border);padding-top:24px;overflow-wrap:anywhere} [data-source-presentation="editorial-v1"] .article-sources h2{margin:0 0 12px;padding:0;border:0;font-size:20px;line-height:1.4} [data-source-presentation="editorial-v1"] .article-reader .article-sources h2[id]{scroll-margin-top:calc(var(--masthead-height,68px) + 100px)} [data-source-presentation="editorial-v1"] .article-sources h3{margin:20px 0 8px;font-size:14px;line-height:1.6} [data-source-presentation="editorial-v1"] .article-sources ul{margin:0;padding-left:20px} [data-source-presentation="editorial-v1"] .article-sources li+li{margin-top:8px} [data-source-presentation="editorial-v1"] .article-sources a{text-decoration:underline;text-decoration-color:var(--ref-border);text-underline-offset:3px} [data-source-presentation="editorial-v1"] .article-sources a:hover,[data-source-presentation="editorial-v1"] .article-sources a:focus-visible{text-decoration-color:currentColor} [data-faq-presentation="game-title-v1"] .home-block--faq > h2{margin:0 0 20px;text-align:center;font-size:clamp(30px,3.2vw,48px);font-weight:800;line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance;color:var(--color-ink)} [data-faq-presentation="game-title-v1"] .home-faq-game{color:var(--color-ink)} [data-faq-presentation="game-title-v1"] .home-faq-accent{color:var(--color-accent);white-space:nowrap} [data-faq-presentation="game-title-v1"] .home-block--faq > .lede{max-width:64ch;margin:0 auto;color:var(--color-muted-ink);text-align:center;font-size:clamp(16px,1.4vw,18px);line-height:1.75} [data-faq-presentation="game-title-v1"] .home-faq-list{margin-top:36px}   [data-faq-presentation="game-title-v1"] .home-faq-item{padding:0} [data-faq-presentation="game-title-v1"] .home-faq-item summary{padding:22px 0} [data-faq-presentation="game-title-v1"] .home-faq-item p{margin:0;padding:0 0 22px} @media(max-width:767px){[data-faq-presentation="game-title-v1"] .home-faq-item summary{padding:18px 0}[data-faq-presentation="game-title-v1"] .home-faq-item p{padding-bottom:18px}} @media(max-width:767px){[data-faq-presentation="game-title-v1"] .home-block--faq > h2{margin-bottom:16px}[data-faq-presentation="game-title-v1"] .home-faq-list{margin-top:28px}}   .wiki-nav__links summary:has(> .wiki-category-icon)::before { display:none; } .wiki-category-icon { display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;border:1px solid var(--ref-border);border-radius:8px;background:var(--ref-muted);color:var(--color-muted-ink); } .wiki-category-icon svg,.wiki-category-icon img { width:16px;height:16px;object-fit:contain; } .wiki-nav__links .wiki-codes-link { display:flex;align-items:center;gap:8px;margin-top:0;padding:8px 4px;min-height:0;font-size:13px;font-weight:700;line-height:inherit;color:var(--color-ink); } .wiki-nav__links summary:hover,.wiki-nav__links summary:focus-visible { color:var(--color-ink);background:var(--ref-muted); } .wiki-nav__links summary:focus-visible,.wiki-nav__links .wiki-codes-link:focus-visible { outline:2px solid var(--color-accent);outline-offset:2px;background:var(--ref-muted); } .home-module-icon img { width:24px;height:24px;object-fit:contain; }   body[data-presentation] .home-carousel-card { position: relative; overflow: hidden; } body[data-presentation] .home-carousel-card > a { width: 100%; min-width: 0; flex-direction: column; } body[data-presentation] .home-carousel-card > img, body[data-presentation] .home-carousel-card > a > img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; flex: none; } body[data-presentation] .home-carousel-card .home-trending-copy { box-sizing: border-box; width: 100%; min-width: 0; overflow-wrap: anywhere; }
.experience-stage { position: relative; isolation: isolate; } .wiki-nav__panel { background: var(--color-surface); } .game-backdrop { position: absolute; inset: 0 0 auto; height: clamp(360px,46vw,660px); overflow: hidden; z-index: -1; pointer-events: none; background: var(--color-canvas); } .game-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .game-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,color-mix(in srgb,var(--color-canvas) 70%,transparent),color-mix(in srgb,var(--color-canvas) 78%,transparent) 66%,var(--color-canvas)),linear-gradient(120deg,color-mix(in srgb,var(--color-accent) 22%,transparent),transparent); } .main-content .home-composition > .home-hero--backdrop { padding: 12px 28px 32px; border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; isolation: auto; } .home-hero--backdrop::before { display: none; } .home-hero--backdrop .home-hero-copy { text-align: center; } .home-hero--backdrop h1 { margin: 20px 0 28px; overflow-wrap: anywhere; } .home-hero-badge { display: inline-block; margin: 0 0 0 10px; padding: 4px 10px; border: 1px solid var(--ref-border); border-radius: 999px; background: var(--ref-muted); color: var(--color-muted-ink); font-size: 12px; font-weight: 600; } .home-hero--backdrop .home-hero-visual { width: min(100%,700px); aspect-ratio: 16 / 9; max-height: 400px; margin: 0 auto; padding: 0; border: 1px solid var(--ref-border); border-radius: 12px; transform: none; background: var(--color-canvas); box-shadow: none; } .home-hero--backdrop .home-hero-visual > img { width: 100%; height: 100%; object-fit: contain; } .home-hero--backdrop .home-hero-visual img { border-radius: 0; } body[data-video-presentation='howtofish-v1'] .home-hero--backdrop .factory-video__trigger { border: 0; border-radius: 0; } .home-hero--backdrop > .lede { margin: 28px -12px 0; font-size: 18px; line-height: 1.85; text-align: center; } .home-hero--backdrop .home-actions { justify-content: center; } .home-hero--backdrop .home-stats { border-top: 0; margin-top: 16px; padding-top: 0; } .side-codes,.side-play { width: 268px; max-width: 100%; margin: 16px auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--ref-border); } .side-codes { background: var(--color-surface); } .side-codes > header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 14px 4px; } .side-codes h2,.side-play h2 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.4; letter-spacing: normal; } .side-codes__date { font-size: 9px; font-weight: 500; line-height: 1.4; border: 1px solid var(--ref-border); border-radius: 999px; padding: 2px 6px; color: var(--color-muted-ink); background: var(--ref-muted); } .code-list { margin: 0; padding: 0 16px; list-style: none; } .code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ref-border); } .code-row:last-child { border-bottom: 0; } .code-row code { display: block; line-height: 1.4; padding: 0; color: var(--color-ink); background: none; border: 0; font-size: 13px; font-weight: 600; letter-spacing: .025em; overflow-wrap: anywhere; user-select: all; } .code-row p { margin: 3px 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--color-muted-ink); overflow-wrap: anywhere; } .side-codes .code-row > div {min-width:0;} .side-codes .code-row p {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .side-codes > header {padding:14px 14px 6px;} .side-codes h2 {font-size:13px;font-weight:600;} .side-codes .code-list {padding:0 14px;} .side-codes .code-row {padding:10px 0;border:0;} .side-codes .code-row code {font-size:12px;font-weight:500;} .side-codes .code-row p {font-size:11px;line-height:16px;margin:2px 0 0;} .side-codes .side-codes__all {font-size:12px;font-weight:500;padding:10px 14px;text-decoration:none;transition:background-color .16s,color .16s;} .side-codes .side-codes__all:is(:hover,:focus-visible),.side-codes .code-copy:focus-visible {background:var(--ref-muted);color:var(--color-accent);} .side-codes :is(.side-codes__all,.code-copy):focus-visible {outline:2px solid var(--color-accent);outline-offset:-2px;} .code-status { display: block; line-height: 1.4; color: var(--color-muted-ink); font-size: 10px; } .code-source { margin-inline-start: 8px; font-size: 12px; overflow-wrap: anywhere; } .code-copy { display: grid; place-items: center; width: 28px; height: 32px; flex-shrink: 0; padding: 0; color: var(--color-muted-ink); border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; } .code-copy svg { width: 16px; height: 16px; } .code-copy:hover { background: var(--ref-muted); color: var(--color-ink); } .code-copy[data-copy-state='copied'] {color:#22c55e;} .side-codes .code-copy[data-copy-state='copied']:focus-visible {color:#22c55e;} .code-copy .code-copy-check {display:none;} .code-copy[data-copy-state='copied'] > svg:not(.code-copy-check) {display:none;} .code-copy[data-copy-state='copied'] > .code-copy-check {display:block;} .side-codes .code-copy svg {width:14px;height:14px;} .side-codes .code-row {border-radius:8px;transition:background-color .16s;} .side-codes .code-row:hover {background:var(--ref-muted);} .code-feedback { margin: 0; padding-inline: 16px; font-size: 12px; overflow-wrap: anywhere; } .code-feedback:empty { display: none; } .side-codes .code-feedback[data-copy-state='copied'] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wiki-codes-link { display: block; margin-top: 8px; padding: 10px 14px; border-top: 1px solid var(--ref-border); color: var(--color-ink); font-size: 13px; font-weight: 600; } .wiki-codes-link:hover { background: var(--ref-muted); } .side-codes__all { display: block; padding: 10px 14px; margin-top: 0; border-top: 1px solid var(--ref-border); text-align: center; color: var(--color-ink); font-size: 12px; font-weight: 600; } .side-play { position: relative; isolation: isolate; background: var(--color-surface); border-color: var(--ref-border); } .side-play__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition:transform 300ms ease; } .side-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.48) 65%,rgba(0,0,0,.12)); z-index: -1; pointer-events:none; } .side-play__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 170px; padding: 16px 14px; } .side-play__label { display: inline-block; border-radius: 999px; padding: 2px 6px; margin: 0 0 8px; background: var(--color-surface); color: var(--color-muted-ink); font-size: 9px; font-weight: 500; } .side-play__content > p:not(.side-play__label) { font-size: 12px; font-weight: 400; line-height: 1.5; margin: 6px 0 10px; } .side-play__button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; min-height: 32px; border: 1px solid var(--ref-border); border-radius: 999px; background: var(--color-ink); color: var(--color-canvas); font-size: 11px; font-weight: 600; text-align: center; } .side-play {transition:border-color .2s,box-shadow .2s;} .side-play__link {display:block;color:#fff;text-decoration:none;} .side-play__content {min-height:210px;padding:18px 16px;} .side-play__content h2 {color:#fff;font-size:16px;font-weight:700;} .side-play__content > p:not(.side-play__label) {color:rgba(255,255,255,.85);margin:6px 0 14px;} .side-play__button {background:#fff;color:#151515;border-color:transparent;font-size:12px;transition:background-color .18s,color .18s;} .side-play__button svg {width:12px;height:12px;flex:none;} .side-play:is(:hover,:focus-within) {border-color:var(--color-accent);box-shadow:0 6px 20px rgba(0,0,0,.18);} .side-play:is(:hover,:focus-within) .side-play__image {transform:scale(1.05);} .side-play__button:hover,.side-play__link:focus-visible .side-play__button {background:var(--color-accent);color:var(--color-canvas);} .side-play__link:focus-visible {outline:2px solid var(--color-accent);outline-offset:-3px;border-radius:inherit;} @media(prefers-reduced-motion:reduce) {.side-play,.side-play__image,.side-play__button {transition:none;}.side-play:is(:hover,:focus-within) .side-play__image {transform:none;}} .page-title-hero { position: relative; isolation: isolate; padding: clamp(36px,6vw,88px) 24px; } .page-title-hero > .game-backdrop { height: 100%; } .page-title-hero__inner { max-width: 980px; margin: auto; } .page-title-hero .breadcrumbs { margin: 0 0 24px; } .page-title-hero__category { display: inline-block; border: 1px solid color-mix(in srgb,var(--color-accent) 45%,transparent); border-radius: 999px; padding: 8px 16px; margin: 0 0 20px; background: color-mix(in srgb,var(--color-accent) 12%,transparent); color: var(--color-accent); font-weight: 750; } .page-title-hero h1 { margin: 0; font-size: clamp(32px,4.5vw,56px); line-height: 1.12; overflow-wrap: anywhere; } .page-title-hero .lede { margin: 24px 0 0; font-size: 19px; line-height: 1.75; max-width: none; } .page-title-hero__meta { display: inline-block; padding: 8px 12px; border: 1px solid var(--ref-border); border-radius: 6px; background: var(--color-canvas); margin: 24px 0 0; color: var(--color-muted-ink); font-size: 14px; } .main-content .article-reader > .article-title-anchor { display: none; } .codes-directory { border: 1px solid var(--ref-border); border-radius: 12px; padding: 24px 16px; margin-block: 24px; background: var(--color-surface); } .codes-directory h2 { padding-inline: 16px; } .mobile-game-extras { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 40px; align-items: start; } .mobile-game-extras > :is(.side-codes,.side-play) { width: 100%; margin: 0; } @media (max-width: 767px) { .mobile-game-extras { grid-template-columns: 1fr; } .main-content .home-composition > .home-hero--backdrop { padding: 8px 0 16px; } .home-hero--backdrop h1 { margin-block: 18px 24px; } .home-hero--backdrop > .lede { margin: 20px 0 0; text-align: left; font-size: 16px; } .game-backdrop { height: 460px; } .page-title-hero { padding: 32px 20px; } .page-title-hero .lede { font-size: 16px; } .side-codes,.side-play { width: 100%; } }
.nav-toggle { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; } .nav-toggle svg, .mobile-nav-close svg { flex-shrink: 0; } .mobile-nav-panel { inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain; } .mobile-nav-panel[open] { display: flex; flex-direction: column; } .mobile-nav-header { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 76px; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); border-bottom: 1px solid var(--ref-border); } .mobile-nav-header .brand { flex: 1 1 0; min-width: 0; margin: 0; } .mobile-nav-controls { display: flex; align-items: center; gap: 4px; } .mobile-nav-controls .theme-toggle { margin: 0; } .mobile-nav-close { position: static; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; } .mobile-nav-links { flex: 1 1 auto; min-height: 0; padding: 16px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .mobile-nav-links a { text-decoration: none; overflow-wrap: anywhere; } .mobile-nav-links > a, .mobile-nav-groups summary, .mobile-nav-groups > a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px; border-radius: 8px; color: var(--color-ink); font-size: 16px; font-weight: 500; line-height: 1.5; } .mobile-nav-groups details { margin: 4px 0; } .mobile-nav-groups summary { list-style: none; cursor: pointer; } .mobile-nav-groups summary::-webkit-details-marker { display: none; } .mobile-nav-groups summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; margin-right: 4px; flex-shrink: 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .mobile-nav-groups details[open] > summary { color: var(--color-accent); background: var(--ref-muted); } .mobile-nav-groups details[open] > summary::after { transform: rotate(225deg); } .mobile-nav-groups .wiki-category-icon { width: 24px; height: 24px; border: 0; border-radius: 0; background: transparent; color: inherit; } .mobile-nav-groups .wiki-category-icon :is(svg,img) { width: 22px; height: 22px; } .mobile-nav-groups details > a { display: flex; align-items: baseline; gap: 12px; min-height: 44px; margin-left: 24px; padding: 12px 8px 12px 16px; border-left: 2px solid var(--ref-border); color: var(--color-muted-ink); font-size: 14px; line-height: 1.6; } .mobile-nav-groups details > a::before { content: '›'; color: var(--color-accent); flex-shrink: 0; } .mobile-nav-groups details > a.mobile-nav-overview { color: var(--color-accent); } .mobile-nav-links a:hover, .mobile-nav-links a[aria-current='page'] { color: var(--color-accent); background: var(--ref-muted); } .mobile-nav-panel :is(a,button,summary):focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.header-controls, .mobile-nav-controls { gap: 12px; } .header-controls { flex-shrink: 0; } .masthead__inner > .brand { flex-shrink: 0; min-width: 0; max-width: calc(100% - 210px); } .masthead__inner > .brand > span { min-width: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } .theme-toggle, .language-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; height: 40px; border: 1px solid var(--ref-border); border-radius: 10px; background: var(--color-surface); color: var(--color-ink); cursor: pointer; } .theme-toggle { width: 44px; padding: 8px; } .language-menu > summary { gap: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500; line-height: 1; } .language-menu > summary::after { content: none; } .theme-icon, .language-icon { display: block; width: 16px; height: 16px; flex-shrink: 0; } .language-chevron { width: 12px; height: 12px; flex-shrink: 0; } .theme-icon--sun { display: none; } html[data-theme='dark'] .theme-icon--sun { display: block; } html[data-theme='dark'] .theme-icon--moon { display: none; } .theme-toggle:hover, .language-menu > summary:hover { background: var(--ref-muted); } .theme-toggle:focus-visible, .language-menu > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } @media (max-width: 767px) { .masthead__inner > .brand { flex: 1 1 auto; max-width: none; } .header-controls, .mobile-nav-controls { gap: 8px; } .language-code { display: none; } .language-menu > summary { padding-inline: 12px; } }
[data-factory-desktop-lower] { display: none; } @media (min-width: 768px) { [data-factory-desktop-lower] { display: flex; justify-content: center; min-height: 250px; margin-block: 2.5rem; } .factory-ad--desktopLower { margin: 0; border-radius: 12px; } [data-factory-desktop-rectangle]::after { content: none; } @container (min-width: 300px) { [data-factory-desktop-rectangle='ready']::after { content: ''; display: block; height: 250px; margin-block: 2.5rem; } } } @media (max-width: 767px) {   [data-factory-sticky-host][data-ad-empty='true'] { height: 0; padding-block: 0; margin-block: 0; } } @media (min-width: 768px) { body[data-template-layout]:is([data-page-type='category'],[data-page-type='content'],[data-page-type='translation']) .site-shell { width: min(100%,896px); max-width: 896px; padding-inline: 16px; margin-inline: auto; } body[data-desktop-directory] .page-grid { grid-template-columns: minmax(0,1fr); gap: 0; } body[data-desktop-directory] .page-title-hero__inner { max-width: 864px; } body[data-desktop-directory] .nav-toggle { display: inline-flex; flex-shrink: 0; } body[data-desktop-directory] .mobile-nav-panel { inset: calc(var(--masthead-height,68px) + 12px) max(16px,calc((100% - 896px)/2)) auto auto; margin: 0; width: min(480px,calc(100% - 32px)); max-width: 480px; height: auto; max-height: calc(100dvh - var(--masthead-height,68px) - 28px); border: 1px solid var(--ref-border); border-radius: 16px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 64px #0004; } body[data-desktop-directory] .mobile-nav-panel::backdrop { background: #0002; } body[data-desktop-directory] .mobile-nav-header { min-height: 68px; padding: 12px 16px; } body[data-desktop-directory] .mobile-nav-header .brand { font-size: 15px; } body[data-desktop-directory] .mobile-nav-links { padding: 8px 12px 16px; } body[data-desktop-directory] .mobile-nav-groups summary { min-height: 48px; font-size: 15px; } body[data-desktop-directory] .mobile-nav-groups details > a { padding-block: 10px; } .factory-ad iframe { border-radius: 12px; } [data-factory-sticky-host] { display: block; width: 100%; max-width: 896px; height: 82px; padding: 16px 40px 16px 0; margin: 16px auto; top: var(--masthead-height,68px); }   .factory-ad--sticky320x50 { position: static; } .factory-ad--sticky320x50 button { display: grid; place-items: center; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 4px; border: 1px solid color-mix(in srgb,var(--color-ink) 14%,transparent); color: var(--color-muted-ink); background: var(--color-canvas); box-shadow: 0 1px 2px #0001; } .factory-ad--sticky320x50 button:hover { color: var(--color-ink); } .factory-ad--sticky320x50 button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } body [data-factory-sticky-host][data-ad-empty='true'] { height: 0; padding: 0; margin-block: 0; } body[data-desktop-directory] :is(.factory-ad--rail160x600,.factory-ad--rail160x300) { top: calc(var(--masthead-height,68px) + 12px); border-radius: 12px; } body[data-template-layout][data-desktop-directory] .factory-ad--rail160x600 { left: calc((100% - 896px)/2 - 180px); } body[data-template-layout][data-desktop-directory] .factory-ad--rail160x300 { right: calc((100% - 896px)/2 - 180px); } }   @media (min-width: 768px) { body[data-page-type='category'] .category-ad-reservation { display: none; } }   body[data-page-type='home'] [data-factory-sticky-host] { width: 100%; max-width: none; height: 67px; margin: 0; padding: 8px 0; top: calc(var(--masthead-height,68px) + 8px); border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); } body[data-page-type='home'] [data-factory-sticky-host][data-ad-empty='true'] { height: 0; margin: 0; padding: 0; border: 0; } @media (min-width:768px) { body[data-page-type='home'] [data-factory-sticky-host] .factory-ad--sticky320x50 { transform:translateX(var(--home-sticky-offset,0px)); } }   body[data-page-type='home'] [data-factory-sticky-host] {border-bottom:0;pointer-events:none;} body[data-page-type='home'] [data-factory-sticky-host] .factory-ad--sticky320x50 {pointer-events:auto;}
.top-nav-group { position: relative; flex: 0 0 auto; } .top-nav-group[hidden] { display: none; } .top-nav-group > summary { display: flex; align-items: center; gap: 8px; list-style: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--color-muted-ink); white-space: nowrap; } .top-nav-group > summary::-webkit-details-marker { display: none; } .top-nav-group > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; } .top-nav-group[open] > summary::after { transform: rotate(225deg); margin-top: 3px; } .top-nav-group:is([open],.is-current) > summary,.top-nav-group > summary:hover { color: var(--color-accent); } .top-nav-group > summary:focus-visible,.top-nav-panel a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .top-nav-panel { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(calc(-50% + var(--panel-shift,0px))); width: 288px; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--masthead-height,68px) - 28px); overflow-y: auto; overscroll-behavior: contain; z-index: 50; border: 1px solid var(--ref-border); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 10px 24px #0002; } .top-nav-articles { padding-block: 8px; } .top-nav-panel a { display: block; padding: 10px 16px; font-size: 14px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; } .top-nav-panel a:hover,.top-nav-panel a[aria-current='page'] { background: var(--ref-muted); color: var(--color-accent); } .top-nav-panel .top-nav-more { border-top: 1px solid var(--ref-border); text-align: center; color: var(--color-accent); padding-block: 12px; } @media (min-width: 768px) { .masthead[data-compact-nav='true'] #site-nav { display: none; } .masthead[data-overflow-nav='true'] .nav-toggle { display: inline-flex; } body:has(.masthead[data-overflow-nav='true']) .mobile-nav-panel { inset: calc(var(--masthead-height,68px) + 12px) 16px auto auto; margin: 0; width: min(480px,calc(100% - 32px)); max-width: 480px; height: auto; max-height: calc(100dvh - var(--masthead-height,68px) - 28px); border: 1px solid var(--ref-border); border-radius: 16px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 64px #0004; } } @media (min-width:768px) and (max-width:1100px) { .top-nav-group > summary { padding-inline: 6px; font-size: 12px; gap: 6px; } } @media (max-width:767px) { .top-nav-group { display: none; } }
body[data-ad-reference][data-page-type] .reference-ad-host { width:100%; min-width:0; margin:32px 0; padding:0; display:flex; justify-content:center; } body[data-ad-reference][data-page-type] .reference-ad-host:empty {margin-block:0;} body[data-ad-reference][data-page-type] .reference-ad-host[hidden], body[data-ad-reference][data-page-type] [data-factory-bottom-reservation][hidden] {display:none;} body[data-ad-reference][data-page-type] .reference-ad-host > .factory-ad { position:static; inset:auto; transform:none; margin:0; border-radius:12px; } body[data-ad-reference][data-page-type] [data-factory-bottom-reservation] { position:static; width:100%; margin:32px 0; padding:0; min-height:0; display:flex; flex-direction:column; align-items:center; gap:0; } body[data-ad-reference][data-page-type] [data-factory-bottom-reservation]::before, body[data-ad-reference][data-page-type] [data-factory-bottom-reservation]::after {content:none;} body[data-ad-reference][data-page-type] [data-factory-bottom-reservation] > .reference-ad-host {margin:0;} body[data-ad-reference][data-page-type] [data-factory-bottom-reservation] > .reference-ad-host:has(.factory-ad) ~ .reference-ad-host:has(.factory-ad) {margin-top:32px;} body[data-ad-reference][data-page-type] [data-factory-bottom-reservation] .factory-ad { position:static; inset:auto; transform:none; margin:0; } body[data-ad-reference][data-page-type] [data-factory-bottom-reservation][data-ad-empty='true'] {margin:0;padding:0;border:0;} body[data-ad-reference]:is([data-page-type='content'],[data-page-type='translation']) [data-factory-bottom-reservation]:has(.factory-ad) { border-top:1px solid var(--ref-border); padding-top:32px; } @media(max-width:767px) { body[data-ad-reference][data-page-type] [data-factory-sticky-host] {width:calc(100% + 32px);margin-inline:-16px;} body[data-ad-reference][data-page-type] .experience-stage > [data-factory-sticky-host] {width:100%;margin-inline:0;} body[data-ad-reference][data-page-type] [data-factory-bottom-reservation], body[data-ad-reference][data-page-type] .reference-ad-host { width:calc(100% + 32px); margin-inline:-16px; } body[data-ad-reference][data-page-type] [data-factory-bottom-reservation] > .reference-ad-host {width:100%;margin:0;} } body[data-ad-reference][data-page-type] .reference-ad-page-top {width:100%;max-width:896px;margin-inline:auto;}   @media(min-width:1680px) { body[data-page-type='home'][data-home-ad-layout='trending-v1'] .site-shell {margin-inline:auto;} body[data-page-type='home'][data-home-ad-layout='trending-v1'] .factory-ad--rail160x600 {left:calc((100% - 1216px)/2 - 180px);top:calc(var(--masthead-height,68px) + 12px);} body[data-page-type='home'][data-home-ad-layout='trending-v1'] .factory-ad--rail160x300 {right:calc((100% - 1216px)/2 - 180px);top:calc(var(--masthead-height,68px) + 12px);} }
body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-categories {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;} body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-category {min-width:0;padding:24px;border:1px solid var(--ref-border);border-radius:16px;background:var(--color-surface);} body[data-footer-navigation='research-v1'] .html-sitemap :is(.sitemap-category,.sitemap-site-pages) h2 {margin:0 0 16px;font-size:22px;font-weight:750;} body[data-footer-navigation='research-v1'] .html-sitemap ul {margin:0;padding-left:20px;} body[data-footer-navigation='research-v1'] .html-sitemap li {margin:8px 0;overflow-wrap:anywhere;} body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-link {display:inline-block;padding:6px 0;line-height:1.6;text-underline-offset:4px;} body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-link:is(:hover,:focus-visible) {color:var(--color-accent);} body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-site-pages {margin-top:32px;} @media(max-width:639px) { body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-categories {grid-template-columns:minmax(0,1fr);} body[data-footer-navigation='research-v1'] .html-sitemap .sitemap-category {padding:20px;} }   html body[data-footer-presentation][data-page-type] .site-footer {margin:0;padding:0;border:0;} html body[data-footer-presentation][data-page-type] .site-footer > div {width:100%;max-width:none;margin:0;padding:0;} html body[data-footer-presentation][data-page-type] .site-footer .footer-disclosure { border-block:1px solid var(--ref-border);   background: radial-gradient(circle at top,color-mix(in srgb,var(--color-accent) 18%,transparent),transparent 48%), linear-gradient(135deg,rgb(255 255 255 / .05),rgb(255 255 255 / 0)), var(--color-canvas); padding:16px 24px;text-align:center; } html[data-theme='dark'] body[data-footer-presentation][data-page-type] .site-footer .footer-disclosure {background-color:#0a0a0a;} html body[data-footer-presentation][data-page-type] .site-footer .footer-disclosure p {max-width:1200px;margin:0 auto;color:var(--color-ink);font-size:13px;font-weight:500;letter-spacing:.16em;line-height:1.5;text-transform:uppercase;overflow-wrap:anywhere;} @media(max-width:767px) { html body[data-footer-presentation][data-page-type] .site-footer .footer-disclosure p {font-size:10px;font-weight:400;letter-spacing:.08em;color:var(--color-muted-ink);} } html body[data-footer-presentation][data-page-type] .site-footer .footer-content {width:min(100% - 48px,1200px);margin:auto;padding:44px 0 24px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-grid {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);gap:40px;align-items:start;} html body[data-footer-presentation][data-page-type] .site-footer .footer-grid:not(:has(> :nth-child(3))) {grid-template-columns:repeat(2,minmax(0,1fr));} html body[data-footer-presentation][data-page-type] .site-footer .footer-grid:not(:has(> :nth-child(2))) {grid-template-columns:minmax(0,1fr);} html body[data-footer-presentation][data-page-type] .site-footer .footer-brand {color:var(--color-ink);font-size:17px;letter-spacing:.01em;line-height:1.5;} html body[data-footer-presentation][data-page-type] .site-footer .footer-intro p {font-size:14px;line-height:1.85;margin:20px 0 0;max-width:54ch;} html body[data-footer-presentation][data-page-type] .site-footer .footer-column h4 {color:var(--color-ink);font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1.6;margin:8px 0 18px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-column ul {display:grid;gap:2px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-column:last-child ul {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-column li {margin:0;min-width:0;} html body[data-footer-presentation][data-page-type] .site-footer .footer-link {display:inline-flex;align-items:center;min-height:36px;font-size:14px;line-height:1.6;text-underline-offset:4px;overflow-wrap:anywhere;transition:color .16s;} html body[data-footer-presentation][data-page-type] .site-footer a:is(:hover,:focus-visible) {color:var(--color-accent);text-decoration:underline;} html body[data-footer-presentation][data-page-type] .site-footer a:focus-visible {outline:2px solid var(--color-accent);outline-offset:4px;border-radius:3px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-bottom {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;border-top:1px solid var(--ref-border);margin-top:32px;padding-top:16px;font-size:12px;line-height:1.8;} html body[data-footer-presentation][data-page-type] .site-footer .footer-bottom p {margin:0;} html body[data-footer-presentation][data-page-type] .site-footer .footer-bottom nav {display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:flex-start;} html body[data-footer-presentation][data-page-type] .site-footer .footer-bottom a {font-size:12px;}   html body[data-footer-presentation][data-page-type='home'] .site-shell {--home-footer-gap:128px;padding-bottom:0;} html body[data-footer-presentation][data-page-type='home'] .site-shell > .page-grid {margin-bottom:var(--home-footer-gap);} @media(min-width:640px) { html body[data-footer-presentation][data-page-type='home'] .site-shell {--home-footer-gap:160px;} } @media(min-width:1024px) { html body[data-footer-presentation][data-page-type='home'] .site-shell {--home-footer-gap:192px;} } html body[data-footer-presentation][data-page-type='home'] [data-factory-bottom-reservation] {margin-block:0;} @media(max-width:900px) { html body[data-footer-presentation][data-page-type] .site-footer .footer-grid {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-intro {grid-column:1/-1;max-width:640px;} } @media(max-width:540px) { html body[data-footer-presentation][data-page-type] .site-footer .footer-content {width:calc(100% - 32px);padding-top:32px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-disclosure {padding:14px 16px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-grid, html body[data-footer-presentation][data-page-type] .site-footer .footer-grid:not(:has(> :nth-child(3))) {grid-template-columns:minmax(0,1fr);gap:28px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-link {min-height:44px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-column h4 {margin:0 0 10px;} html body[data-footer-presentation][data-page-type] .site-footer .footer-bottom {margin-top:24px;} } @media(prefers-reduced-motion:reduce) {html body[data-footer-presentation][data-page-type] .site-footer .footer-link {transition:none;}}
@media (max-width:767px) { html body { --mobile-gutter:24px; } .masthead .masthead__inner { width:100%;padding:12px 16px;min-height:72px;gap:8px;flex-wrap:nowrap; } .masthead__inner > .brand { flex:1 1 0;min-width:0;max-width:none;gap:8px;margin:0; } .masthead__inner > .brand > span { min-width:0;max-width:none;white-space:normal;overflow-wrap:anywhere; font-size:13px;line-height:1.35; } .masthead .brand__icon {width:28px;height:28px;flex:0 0 28px;} .masthead .header-controls {flex:0 0 auto;gap:2px;margin-left:auto;} .masthead :is(.theme-toggle,.language-menu > summary,.nav-toggle) { width:44px;height:44px;min-height:44px;padding:10px;flex-shrink:0; } .masthead .language-chevron {display:none;} .language-menu > .language-switcher { width:200px;min-width:0;max-width:calc(100vw - 32px); max-height:calc(100dvh - var(--masthead-height,72px) - 24px);overflow-y:auto; } .language-menu .language-switcher a {min-height:44px;display:flex;align-items:center;} .mobile-nav-header .brand {min-width:0;gap:8px;} .mobile-nav-header .brand > span {font-size:13px;white-space:normal;line-height:1.35;overflow-wrap:anywhere;} .mobile-nav-controls {gap:2px;flex:none;} .mobile-nav-controls .language-menu > summary {width:44px;height:44px;padding:10px;} .mobile-nav-controls .language-chevron {display:none;} .mobile-nav-panel .language-switcher {right:0;} body[data-template-layout] .site-shell { width:100%;max-width:100%;margin-inline:auto;padding-inline:var(--mobile-gutter);padding-top:32px; } .page-grid,.main-content,.main-content > article {min-width:0;max-width:100%;} .page-grid {gap:0;} .page-title-hero {padding:40px var(--mobile-gutter) 32px;} .page-title-hero h1 {font-size:32px;line-height:1.18;} .page-title-hero .lede {line-height:1.8;} .main-content :is(img,video) {max-width:100%;} .main-content :is(p,li,a) {overflow-wrap:anywhere;} body[data-desktop-home] .home-composition > .home-hero--backdrop { padding:16px 0 24px;max-width:100%;overflow:hidden; } .home-hero--backdrop h1 {font-size:clamp(30px,8.2vw,36px);line-height:1.12;margin:20px 0 28px;} .home-hero--backdrop .home-hero-visual {width:90%;max-width:300px;height:auto;aspect-ratio:16/9;margin:0 auto;} .home-hero--backdrop .home-hero-visual > img.home-desktop-poster {display:block;width:100%;height:100%;object-fit:cover;} .home-hero--backdrop > .lede {margin:24px 0 0;text-align:center;line-height:1.85;} .home-hero .home-stats {margin:24px 0;gap:12px;} .home-hero .home-stats > li {min-width:0;padding:14px 12px;line-height:1.65;} body[data-home-defaults] .home-actions {display:flex;flex-direction:column;gap:12px;margin-top:24px;} :root body[data-home-defaults][data-presentation] .home-actions a.home-cta {width:100%;min-height:48px;padding:12px 16px;text-align:center;} .home-actions svg {width:16px;height:16px;flex:none;} .home-inline-video {display:block;width:100%;max-width:100%;margin:48px auto 64px;text-align:center;} .home-inline-video .factory-video {position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:12px;} .home-inline-video .factory-video__trigger {width:100%;height:100%;border:0;border-radius:12px;} .home-inline-video img {width:100%;height:100%;object-fit:cover;} .home-inline-video iframe {display:block;width:100%;height:100%;aspect-ratio:16/9;border:0;} .home-inline-video [hidden] {display:none!important;} .home-video-youtube {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;margin-top:16px;padding:6px 12px;border:1px solid var(--ref-border);border-radius:8px;color:var(--color-muted-ink);font-size:12px;text-decoration:none;} .home-video-youtube svg {width:14px;height:14px;} .home-topic-index {display:block;margin:64px 0;text-align:center;} .home-topic-index h2 {font-size:30px;line-height:1.2;margin:0 0 20px;text-wrap:balance;} .home-topic-index > p {color:var(--color-muted-ink);line-height:1.8;} .home-index-title {color:var(--color-accent);} html body[data-desktop-home][data-page-type='home'] .home-topic-index nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left;} .home-topic-index a {display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:16px;border:1px solid var(--ref-border);border-radius:12px;background:var(--color-surface);color:var(--color-ink);text-decoration:none;} .home-index-icon {display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent);} .home-index-icon svg {width:22px;height:22px;} html body[data-desktop-home][data-page-type='home'] .home-index-icon {flex:none;margin:0 0 16px;} .home-topic-index a :is(h3,p) {max-width:100%;overflow-wrap:anywhere;} .home-topic-index a h3 {font-size:14px;line-height:1.5;margin:0 0 8px;} .home-topic-index a p {font-size:14px;line-height:1.5;color:var(--color-muted-ink);margin:0;} body[data-explore-presentation='categories-v1'] .home-explore-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} body[data-explore-presentation='categories-v1'] .home-explore-card {padding:16px;} body[data-explore-presentation='categories-v1'] .home-explore-card h3 {font-size:14px;overflow-wrap:anywhere;max-width:100%;} body[data-explore-presentation='categories-v1'] .home-explore-card p {display:block;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere;max-width:100%;} .home-topic-index a:focus-visible,.home-video-youtube:focus-visible {outline:2px solid var(--color-accent);outline-offset:3px;} body .home-composition .home-block {margin-block:64px;} body .home-composition .home-discovery-row .home-block {margin:0;} .home-about-grid,.home-grid {gap:24px;} .home-composition .home-module {padding:24px 20px;} .home-faq-list {padding-inline:18px;} body[data-article-presentation] .article-reader .article-body-section {margin:40px 0;} body[data-article-presentation] .article-reader .article-body-section p {line-height:1.85;margin-block:22px;} body[data-article-presentation] .article-body-section :is(ul,ol) {line-height:1.85;} .category-cards {gap:24px;} .footer-content {padding-inline:var(--mobile-gutter);}   [data-factory-sticky-host] {max-width:100%;} } @media(max-width:359px) { html body {--mobile-gutter:16px;} .masthead .masthead__inner {padding-inline:12px;gap:6px;} .masthead .brand__icon {width:24px;height:24px;flex-basis:24px;} .masthead__inner > .brand {gap:6px;} .masthead__inner > .brand > span {font-size:12px;} }   @media(max-width:767px) { html body[data-page-type='home'] .home-composition .home-block {margin-block:48px;} html body[data-page-type='home'] .home-hero--backdrop > .lede {font-size:15px;line-height:1.65;} html body[data-desktop-home][data-page-type='home'] .home-topic-index {margin-block:48px;} html body[data-desktop-home][data-page-type='home'] .home-topic-index > p {font-size:15px;line-height:1.6;margin-bottom:24px;} html body[data-desktop-home][data-page-type='home'] .home-topic-index h2 {margin-bottom:16px;} html body[data-desktop-home][data-page-type='home'] .home-topics {gap:48px;margin-block:48px;} html body[data-desktop-home][data-page-type='home'] .home-topic {padding:0;border:0;border-radius:0;background:none;} html body[data-desktop-home][data-page-type='home'] .home-topic h2 {font-size:26px;line-height:1.25;margin:0 0 16px;} html body[data-desktop-home][data-page-type='home'] .home-topic > .lede {font-size:15px;line-height:1.65;margin:0 0 24px;} html body[data-page-type='home'] .home-topic :is(.topic-layout-items,.topic-panels,.topic-table-wrap) {margin:24px 0;gap:12px;} html body[data-page-type='home'] .home-topic .topic-item {display:block;position:relative;padding:16px;border-radius:12px;} html body[data-page-type='home'] .topic-item > .topic-marker {position:absolute;inset:16px auto auto 16px;width:32px;height:32px;} html body[data-page-type='home'] .topic-item > .topic-marker svg {width:18px;height:18px;} html body[data-page-type='home'] .topic-item:has(> .topic-marker) .home-topic-label {min-height:32px;padding-left:44px;align-items:center;} html body[data-page-type='home'] .home-topic .topic-item-copy {display:block;min-width:0;} html body[data-page-type='home'] .home-topic .topic-item h3 {font-size:16px;line-height:1.4;} html body[data-page-type='home'] .home-topic :is(.topic-item p,.topic-panel-body p) {font-size:14px;line-height:1.6;margin:10px 0 0;} html body[data-page-type='home'] .home-topic .topic-points {margin:12px 0 0;} html body[data-page-type='home'] .home-topic .topic-points li {font-size:14px;line-height:1.6;padding-left:16px;margin:6px 0;} html body[data-page-type='home'] .home-topic .topic-tags {margin-top:10px;} html body[data-page-type='home'] .home-topic .topic-note {font-size:13px;line-height:1.6;padding:10px 12px;} html body[data-page-type='home'] .home-topic[data-topic-layout='feature-list'] .topic-item {border-radius:0;padding-block:16px;} html body[data-page-type='home'] .home-topic .topic-panel summary {padding:16px;gap:10px;font-size:16px;} html body[data-page-type='home'] .home-topic .topic-summary-text {font-size:14px;line-height:1.6;margin-top:6px;} html body[data-page-type='home'] .home-topic .topic-panel-body {padding:0 16px 16px;} html body[data-page-type='home'] .home-topic .topic-table tbody tr {padding:16px;} html body[data-page-type='home'] .home-topic .topic-table {line-height:1.6;} html body[data-page-type='home'] .home-topic .home-module-link {display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:14px;} html body[data-page-type='home'][data-home-defaults] .home-composition .home-block--finalCta {padding:28px 20px;border-radius:16px;} html body[data-page-type='home'][data-home-defaults] .home-block--finalCta h2 {font-size:30px;line-height:1.15;} html body[data-page-type='home'][data-home-defaults] .home-block--finalCta .lede {font-size:15px;line-height:1.6;margin-top:16px;} html body[data-page-type='home'][data-home-defaults] .home-block--finalCta .home-actions {margin-top:20px;gap:12px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-content {width:calc(100% - 40px);padding:24px 0 20px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-grid, html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-grid:not(:has(> :nth-child(3))) {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-intro {grid-column:1/-1;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-brand {font-size:16px;gap:10px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-brand img {width:32px;height:32px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-intro p {font-size:13px;line-height:1.65;margin-top:12px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-column h4 {font-size:11px;line-height:1.5;letter-spacing:.08em;margin:0 0 8px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-column ul, html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-column:last-child ul {grid-template-columns:minmax(0,1fr);gap:0;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-link {font-size:13px;line-height:1.5;min-height:44px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-bottom {margin-top:20px;padding-top:12px;gap:8px;} html body[data-footer-presentation][data-page-type='home'] .site-footer .footer-bottom nav {gap:0 16px;} }
body[data-category-hub='research-v1'][data-page-type='category'] .site-shell {width:min(100%,1152px);max-width:1152px;} body[data-category-hub='research-v1'][data-page-type='category'] .page-title-hero__inner {max-width:1000px;} .category-hub {min-width:0;} .category-hub .category-context {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;margin:40px 0 64px;} .category-hub .category-context:not(:has(.category-benefits)) {grid-template-columns:1fr;} .category-hub .category-context > section {padding:28px;border:1px solid var(--ref-border);border-radius:14px;background:var(--color-surface);min-width:0;} .category-hub .category-context h2 {font-size:20px;line-height:1.4;margin:0 0 20px;font-weight:700;} .category-hub .category-intro {margin:0;font-size:15px;line-height:1.75;max-width:none;} .category-hub .category-intro p {margin:0;} .category-hub .category-intro p+p {margin-top:16px;} .category-benefits ol {list-style:none;counter-reset:benefit;padding:0;margin:0;display:grid;gap:20px;} .category-benefits li {counter-increment:benefit;position:relative;padding-left:42px;min-width:0;} .category-benefits li::before {content:counter(benefit);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));font-size:14px;font-weight:700;} .category-benefits h3 {font-size:16px;line-height:1.5;margin:0 0 6px;} .category-benefits p {font-size:14px;line-height:1.65;color:var(--color-muted-ink);margin:0;} .category-hub .category-featured {margin:0 0 40px;} .category-hub :is(.category-featured,.category-guides) h2 {font-size:28px;line-height:1.3;margin:0;font-weight:750;} .category-hub .category-featured > h2 {margin-bottom:24px;} .category-featured-grid,.category-hub .category-card-grid {list-style:none;padding:0;display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;} .category-hub .category-card-grid {grid-template-columns:repeat(3,minmax(0,1fr));} .category-hub :is(.category-card,.category-featured-card) {display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden;border:1px solid var(--ref-border);border-radius:14px;background:var(--color-surface);color:var(--color-ink);text-decoration:none;transition:border-color .15s,background-color .15s;} .category-hub :is(.category-card,.category-featured-card):is(:hover,:focus-visible) {border-color:var(--color-accent);transform:none;} .category-hub :is(.category-card,.category-featured-card):focus-visible {outline:2px solid var(--color-accent);outline-offset:4px;} .category-cover {aspect-ratio:2/1;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--color-accent) 15%,var(--color-surface)),var(--color-surface));} .category-cover img {width:100%;height:100%;aspect-ratio:2/1;object-fit:cover;display:block;} .category-cover-title {padding:24px;text-align:center;font-size:18px;line-height:1.35;font-weight:650;color:var(--color-muted-ink);overflow-wrap:anywhere;} .category-featured-card .category-cover-title {font-size:24px;} .category-card-copy {display:flex;flex:1;flex-direction:column;padding:20px;min-width:0;} .category-hub :is(.category-card,.category-featured-card) h3 {margin:12px 0 8px;font-size:17px;line-height:1.45;overflow-wrap:anywhere;} .category-hub .category-featured-card h3 {font-size:20px;} .category-hub :is(.category-card,.category-featured-card) p {font-size:14px;line-height:1.65;min-height:0;margin:0 0 16px;flex:1;color:var(--color-muted-ink);} .category-badge {align-self:flex-start;border-radius:99px;padding:3px 9px;font-size:12px;line-height:1.5;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 10%,var(--color-surface));} .category-card-meta {display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;line-height:1.5;color:var(--color-muted-ink);margin-bottom:12px;} .category-card-meta time {white-space:nowrap;} .category-card-meta span {overflow-wrap:anywhere;} .category-hub .category-read-more {color:var(--color-accent);font-size:13px;font-weight:600;} .category-section-heading {display:flex;align-items:baseline;gap:12px;margin:0 0 24px;} .category-count {font-size:14px;color:var(--color-muted-ink);} .category-hub .category-guides {margin:56px 0 0;scroll-margin-top:100px;} #category-guides-title {scroll-margin-top:100px;} .category-browse {display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--color-accent);} @media(min-width:768px) and (max-width:1023px) { .category-hub .category-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:767px) { .category-hub .category-context {grid-template-columns:1fr;gap:16px;margin:24px 0 40px;} .category-hub .category-context > section {padding:20px;} .category-hub .category-context h2 {font-size:18px;margin-bottom:16px;} .category-hub .category-intro {font-size:14px;line-height:1.7;} .category-featured-grid,.category-hub .category-card-grid {grid-template-columns:1fr;gap:20px;} .category-hub :is(.category-featured,.category-guides) h2 {font-size:24px;} .category-hub .category-guides {margin-top:40px;} .category-featured-card .category-cover-title {font-size:20px;} .category-hub .category-featured-card h3 {font-size:18px;} .category-card-copy {padding:18px;} } @media(prefers-reduced-motion:reduce) {.category-hub :is(.category-card,.category-featured-card) {transition:none;}}
body[data-article-reader="rich-v1"] .article-reader { --reader-line:color-mix(in srgb,var(--color-accent) 30%,var(--ref-border)); } body[data-article-reader="rich-v1"] .article-reader .article-body-section { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; margin:40px 0; } body[data-article-reader="rich-v1"] .article-body-section:empty { display:none; } body[data-article-reader="rich-v1"] .article-reader :is(p,li) { overflow-wrap:anywhere; } body[data-article-reader="rich-v1"] .article-reader .article-body-section > h2 { border:0; border-left:4px solid var(--color-accent); padding:0 0 0 16px; margin:0 0 24px; font-size:28px; line-height:1.3; } body[data-article-reader="rich-v1"] .article-body-section p { line-height:1.8; margin:16px 0; } body[data-article-reader="rich-v1"] .article-reader :is(h2,h3,h4,h5,h6)[id] { scroll-margin-top:calc(var(--masthead-height,72px) + 24px); } body[data-article-reader="rich-v1"]:has([data-factory-sticky-host]:not([data-ad-empty="true"])) .article-reader :is(h2,h3,h4,h5,h6)[id] { scroll-margin-top:calc(var(--masthead-height,72px) + 126px); } body[data-article-reader="rich-v1"] .article-related-card p { display:block; -webkit-line-clamp:unset; overflow:visible; } body[data-article-reader="rich-v1"] .article-related-card:is(:hover,:focus-visible) { background:color-mix(in srgb,var(--color-accent) 5%,var(--color-surface)); border-color:var(--color-accent); } .article-quick-guide { margin:0 0 28px; padding:24px 28px; border:1px solid var(--reader-line); border-radius:16px; background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)); color:var(--color-ink); } .article-quick-guide__title { font-size:20px; line-height:1.4; font-weight:750; margin:0 0 12px; } .article-quick-guide ul { padding-left:22px; margin:0; line-height:1.8; } .article-quick-guide li + li { margin-top:8px; } .article-quick-guide li::marker { color:var(--color-accent); } body[data-article-reader="rich-v1"] .article-reader .article-callout { margin:24px 0; border-radius:12px; font-style:normal; padding:20px 24px; } body[data-article-reader="rich-v1"] .article-reader .article-callout--tip { border-left:4px solid var(--color-accent); background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)); } body[data-article-reader="rich-v1"] .article-reader .article-callout--warning { border-left:4px solid #bf7a13; background:color-mix(in srgb,#bf7a13 9%,var(--color-surface)); } body[data-article-reader="rich-v1"] .article-reader :is(.article-callout--cards,.article-callout--faq) { padding:0; border:0; background:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } body[data-article-reader="rich-v1"] .article-reader .article-callout--faq { grid-template-columns:1fr; gap:12px; } .article-detail-card,.article-faq-item { min-width:0; padding:22px; border:1px solid var(--ref-border); border-radius:12px; background:var(--color-surface); } .article-detail-card { border-top:3px solid var(--reader-line); } .article-faq-item { padding:0; } .article-faq-item > summary { list-style:none; display:flex; align-items:center; gap:16px; padding:20px 22px; cursor:pointer; border-radius:inherit; min-height:56px; } .article-faq-item > summary::-webkit-details-marker { display:none; } .article-faq-item > summary::after { content:'+'; margin-left:auto; flex:none; color:var(--color-accent); font-size:24px; } .article-faq-item[open] > summary::after { content:'−'; } body[data-article-reader="rich-v1"] .article-body-section .article-faq-item > summary > h3 { margin:0; font-size:18px; line-height:1.5; } .article-faq-answer { padding:0 22px 22px; } body[data-article-reader="rich-v1"] .article-reader .article-faq-answer > :first-child { margin-top:0; } body[data-article-reader="rich-v1"] .article-reader .article-faq-answer > :last-child { margin-bottom:0; } .article-detail-card,.article-faq-item,.article-quick-guide,.article-reader .article-callout,.article-reader .article-table tr { transition:border-color .18s,background-color .18s,box-shadow .18s; } body[data-article-reader="rich-v1"] .article-reader :is(a,summary) { transition:color .18s,background-color .18s; } body[data-article-reader="rich-v1"] .article-reader a { text-underline-offset:4px; } body[data-article-reader="rich-v1"] .article-reader a:is(:hover,:focus-visible) { color:var(--color-accent); text-decoration:underline; } body[data-article-reader="rich-v1"] .article-reader :is(a,summary,[tabindex="0"]):focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; border-radius:4px; } body[data-article-reader="rich-v1"] .article-reader :is(.article-detail-card,.article-faq-item,.article-table):focus-within { border-color:var(--color-accent); } body[data-article-reader="rich-v1"] .article-toc summary { min-height:44px; display:list-item; align-content:center; } body[data-article-reader="rich-v1"] .article-toc a { min-height:44px; display:flex; align-items:center; padding:6px 10px; border-radius:6px; width:100%; } body[data-article-reader="rich-v1"] .article-toc a:is(:hover,:focus-visible),body[data-article-reader="rich-v1"] .article-toc summary:is(:hover,:focus-visible) { background:color-mix(in srgb,var(--color-accent) 7%,transparent); color:var(--color-accent); } @media(hover:hover) { body[data-article-reader="rich-v1"] .article-reader :is(.article-detail-card,.article-faq-item,.article-quick-guide,.article-callout):hover { border-color:color-mix(in srgb,var(--color-accent) 65%,var(--ref-border)); box-shadow:0 4px 16px color-mix(in srgb,var(--color-accent) 5%,transparent); } body[data-article-reader="rich-v1"] .article-reader :is(.article-detail-card,.article-faq-item):hover { background:color-mix(in srgb,var(--color-accent) 4%,var(--color-surface)); } body[data-article-reader="rich-v1"] .article-table tbody tr:hover { background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)); } } @media(prefers-reduced-motion:reduce) { body[data-article-reader="rich-v1"] .article-reader * { transition:none!important; scroll-behavior:auto; } } body[data-article-reader="rich-v1"] .article-body-section :is(.article-detail-card,.article-faq-item) > h3 { margin:0 0 12px; font-size:19px; line-height:1.45; color:var(--color-ink); } body[data-article-reader="rich-v1"] .article-body-section :is(.article-detail-card,.article-faq-item,.article-callout) > :last-child { margin-bottom:0; } body[data-article-reader="rich-v1"] .article-reader .article-callout--steps { border:1px solid var(--ref-border); background:var(--color-surface); } body[data-article-reader="rich-v1"] .article-callout--steps > ol { margin:0; padding-left:30px; } body[data-article-reader="rich-v1"] .article-callout--steps > ol > li { padding:8px 0 8px 8px; } body[data-article-reader="rich-v1"] .article-callout--steps > ol > li::marker { font-size:20px; font-weight:800; color:var(--color-accent); } body[data-article-reader="rich-v1"] .article-reader .article-table { border:1px solid var(--ref-border); border-radius:12px; margin:24px 0; } body[data-article-reader="rich-v1"] .article-table th { background:color-mix(in srgb,var(--color-accent) 10%,var(--color-surface)); } body[data-article-reader="rich-v1"] .article-table :is(td,th) { padding:14px 16px; line-height:1.65; } body[data-article-reader="rich-v1"] .article-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--color-ink) 3%,transparent); } @media(min-width:768px) { body[data-article-reader="rich-v1"] .article-toc nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; } body[data-article-reader="rich-v1"]:is([data-page-type="content"],[data-page-type="translation"]) [data-factory-sticky-host] { padding-inline:0; } body[data-article-reader="rich-v1"]:is([data-page-type="content"],[data-page-type="translation"]) .factory-ad--sticky320x50 button { width:44px;height:44px;padding:9px;border:0;background:transparent;box-shadow:none; } body[data-article-reader="rich-v1"] .factory-ad--sticky320x50 button::before { content:'';position:absolute;inset:9px;border:1px solid var(--ref-border);border-radius:50%;background:var(--color-canvas); } body[data-article-reader="rich-v1"] .factory-ad--sticky320x50 button svg { position:relative; } } @container (min-width:740px) { body[data-article-reader="rich-v1"] .article-reader .article-callout--cards:has(> .article-detail-card:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:767px) { body[data-article-reader="rich-v1"] .article-reader .article-body-section { margin:28px 0; } body[data-article-reader="rich-v1"] .article-reader .article-body-section > h2 { font-size:25px; margin-bottom:18px; padding-left:12px; } body[data-article-reader="rich-v1"] .article-reader .article-body-section p { font-size:15.5px; line-height:1.8; } body[data-article-reader="rich-v1"] .article-reader .article-callout--cards { grid-template-columns:1fr; gap:12px; } .article-quick-guide { padding:20px; border-radius:12px; } .article-detail-card,.article-faq-item { padding:18px; } .article-faq-item { padding:0; } .article-faq-item > summary { padding:18px; } .article-faq-answer { padding:0 18px 18px; } body[data-article-reader="rich-v1"] .article-reader .article-callout { padding:18px; } body[data-article-reader="rich-v1"] .article-reader :is(.article-callout--cards,.article-callout--faq) { padding:0; } body[data-article-reader="rich-v1"] .article-toc { padding:18px; margin:24px 0; }   body[data-article-reader="rich-v1"]:is([data-page-type="content"],[data-page-type="translation"]) [data-factory-sticky-host] { padding:8px 48px 8px 0; height:66px; }   body[data-article-reader="rich-v1"]:is([data-page-type="content"],[data-page-type="translation"]) [data-factory-sticky-host][data-ad-empty="true"] { height:0; padding-block:0; margin-block:0; } body[data-article-reader="rich-v1"]:is([data-page-type="content"],[data-page-type="translation"]) .factory-ad--sticky320x50 { position:relative; margin-inline:auto; } body[data-article-reader="rich-v1"]:is([data-page-type="content"],[data-page-type="translation"]) .factory-ad--sticky320x50 button { top:3px; right:-48px; } }   body[data-article-details="v1"] [data-article-icon] { width:24px; height:24px; flex:none; vertical-align:middle; } body[data-article-details="v1"] .article-byline { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:20px; color:var(--color-muted-ink); font-size:14px; line-height:1.6; } body[data-article-details="v1"] .article-byline > span { display:flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere; } body[data-article-details="v1"] .article-byline svg { width:19px; height:19px; } body[data-article-details="v1"] .article-reader .article-icon-heading { display:flex; align-items:baseline; gap:12px; } body[data-article-details="v1"] :is(.article-icon-heading,.article-callout-title) > span { min-width:0; } body[data-article-details="v1"] .article-icon-heading > svg { align-self:flex-start; margin-top:.15em; color:var(--color-accent); } body[data-article-details="v1"] .article-reader .article-toc { padding:18px 22px; } body[data-article-details="v1"] .article-reader .article-toc nav { grid-template-columns:minmax(0,1fr); gap:4px; margin-top:10px; } body[data-article-details="v1"] .article-reader .article-toc summary { display:flex; align-items:center; gap:12px; list-style:none; border-radius:6px; padding:0 8px; cursor:pointer; } body[data-article-details="v1"] .article-toc summary::-webkit-details-marker { display:none; } body[data-article-details="v1"] .article-toc summary::before { content:''; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); flex:none; } body[data-article-details="v1"] .article-toc[open] summary::before { transform:rotate(45deg); } body[data-article-details="v1"] .article-reader .article-toc a { border-left:3px solid transparent; padding:8px 12px; line-height:1.5; } body[data-article-details="v1"] .article-toc a[aria-current="location"] { color:var(--color-ink); border-left-color:var(--color-accent); background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface)); font-weight:650; } body[data-article-details="v1"] .article-reader .article-table { border-color:var(--reader-line); overscroll-behavior-x:contain; } body[data-article-details="v1"] .article-table :is(th,td) { border-right:1px solid var(--reader-line); border-bottom:1px solid var(--reader-line); color:var(--color-ink); } body[data-article-details="v1"] .article-table tr > :last-child { border-right:0; } body[data-article-details="v1"] .article-table tbody tr:last-child > * { border-bottom:0; } body[data-article-details="v1"] .article-reader .article-table th { font-size:14px; font-weight:750; text-transform:none; letter-spacing:normal; background:color-mix(in srgb,var(--color-accent) 20%,var(--color-surface)); border-bottom-width:2px; } body[data-article-details="v1"] .article-table tbody td:first-child { font-weight:600; } body[data-article-details="v1"] .article-reader :is(.article-callout--tip,.article-callout--warning) { border:1px solid var(--reader-line); border-left-width:4px; } body[data-article-details="v1"] .article-reader .article-callout--warning { border-color:color-mix(in srgb,#bf7a13 65%,var(--ref-border)); } body[data-article-details="v1"] .article-reader .article-callout-title { display:flex; align-items:center; gap:12px; font-weight:750; font-size:19px; line-height:1.5; margin:0 0 14px; color:var(--color-ink); } body[data-article-details="v1"] .article-callout--tip .article-callout-title svg { color:var(--color-accent); } body[data-article-details="v1"] .article-callout--warning .article-callout-title svg { color:#bf7a13; } body[data-article-details="v1"] .article-reader .article-callout--checklist { background:var(--color-surface); border:1px solid var(--reader-line); } body[data-article-details="v1"] .article-checklist { list-style:none; padding:0; margin:12px 0 0; } body[data-article-details="v1"] .article-reader .article-check-item { display:flex; align-items:flex-start; gap:12px; padding:10px; margin:4px 0; min-height:44px; border-radius:8px; } body[data-article-details="v1"] .article-check-item > input { flex:none; width:24px; height:24px; margin:3px 0 0; accent-color:var(--color-accent); cursor:pointer; } body[data-article-details="v1"] .article-check-item:has(> input:checked) { background:color-mix(in srgb,var(--color-accent) 10%,var(--color-surface)); } body[data-article-details="v1"] .article-check-item > input:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; } body[data-article-details="v1"] .article-check-text { min-width:0; flex:1; cursor:pointer; } body[data-article-details="v1"] .article-reader .article-check-text > :first-child { margin-top:0; } body[data-article-details="v1"] .article-reader .article-check-text > :last-child { margin-bottom:0; } body[data-article-details="v1"] .article-callout--steps > ol { list-style:none; padding:0; } body[data-article-details="v1"] .article-callout--steps > ol > li { position:relative; padding:4px 0 24px 56px; min-height:48px; } body[data-article-details="v1"] .article-callout--steps > ol > li::before { content:attr(data-step-number); position:absolute; left:0; top:0; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--color-accent); color:var(--color-canvas); font-size:17px; font-weight:800; } body[data-article-details="v1"] .article-callout--steps > ol > li:last-child { padding-bottom:0; } body[data-article-details="v1"] .article-callout--steps > ol > li > strong:first-child, body[data-article-details="v1"] .article-callout--steps > ol > li > p:first-child > strong:only-child { display:block; color:var(--color-ink); margin-bottom:8px; font-size:18px; } body[data-article-details="v1"] .article-reader .article-callout--steps li > p:first-child { margin-top:0; } @media(hover:hover) { body[data-article-details="v1"] .article-check-item:hover { background:color-mix(in srgb,var(--color-accent) 6%,var(--color-surface)); } } @media(max-width:767px) { body[data-article-details="v1"] .article-reader .article-toc { padding:14px; } body[data-article-details="v1"] .article-byline { gap:8px 16px; } body[data-article-details="v1"] .article-table :is(th,td) { padding:12px; } body[data-article-details="v1"] .article-callout--steps > ol > li { padding-left:44px; } body[data-article-details="v1"] .article-callout--steps > ol > li::before { width:30px; height:30px; font-size:15px; } }