.Xpx_7pfduzI5KS4Bizww { --local-surface-background: var(--background-color--background-light, #fdfcfe); --local-surface-card: var(--background-color--background-card-light, #f6f1fa); --local-surface-placeholder: var(--base-color-gray--gray-10, #e0d5e8); --local-surface-brand: var(--base-color-primary--red-100, #ff003c); --local-surface-input: var(--base-color-gray--gray-100-3, rgba(16, 7, 25, 0.03)); --local-border-default: var(--border-color--border-light, rgba(16, 7, 25, 0.12)); --local-border-secondary: var(--base-color-gray--gray-65, #645870); --local-content-accent: var(--base-color-primary--red-100, #ff003c); --local-content-primary: var(--text-color--text-primary, #100719); --local-content-subtle: var(--text-color--text-secondary, #42364e); --local-content-muted: var(--base-color-gray--gray-65, #645870); --local-focus: var(--base-color-system--focus-state, #2d62ff); --local-focus-accent: var(--base-color-secondary--purple-100, #cc82fa); --local-surface-empty: var(--base-color-gray--gray-100-5, rgba(16, 7, 25, 0.05)); --local-font-body: var(--fonts--primary, 'Suisse', -apple-system, 'Helvetica Neue', sans-serif); --local-font-mono: var( --fonts--secondary, 'Suisse mono', ui-monospace, 'SF Mono', Menlo, monospace ); color-scheme: light; display: block; color: var(--local-content-primary); font-family: var(--local-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .Xpx_7pfduzI5KS4Bizww, .Xpx_7pfduzI5KS4Bizww *, .Xpx_7pfduzI5KS4Bizww *::before, .Xpx_7pfduzI5KS4Bizww *::after { box-sizing: border-box; } /* ---- search (matches the real Blog page's .articles_search-field: bg gray-100 @ 3%, border-light, 8px radius, 12px/46px padding for the icon, Suisse 16px/400). Focus uses the same --local-focus ring as every other interactive element in this component (the real field disables its outline with nothing standing in for it — not something worth mirroring). */ .AysEZbYhAASG4LICHRZ3 { position: relative; display: block; margin-bottom: 16px; } .AysEZbYhAASG4LICHRZ3 input { width: 100%; appearance: none; background: var(--local-surface-input); border: 1px solid var(--local-border-default); border-radius: 8px; color: var(--local-content-primary); font-family: var(--local-font-body); font-size: 16px; padding: 12px 40px 12px 46px; } .AysEZbYhAASG4LICHRZ3 input::placeholder { color: var(--local-content-muted); } .AysEZbYhAASG4LICHRZ3 input:focus { outline: none; border-color: var(--local-focus-accent); box-shadow: 0 0 0 1px var(--local-focus-accent); } .BAGe7YLkjMKU5hyad3gH { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; } .c0wVkg7Pm5U20fcnJNX2 { appearance: none; background: none; border: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; cursor: pointer; } .c0wVkg7Pm5U20fcnJNX2:focus-visible { outline: 2px solid var(--local-focus); outline-offset: 2px; } /* ---- type filter — standalone bordered pills (matches .articles_checkbox-field: individual boxes in a wrapping flex row with a 12px gap, not a shared pill-group container) ---- */ .FxOfljzsRoOF9yjRMgIZ { position: relative; margin-bottom: 20px; } .G2ljZbkVXSnOqHQjQ0Iq { display: flex; flex-wrap: wrap; gap: 12px; } /* Qualified with the `button` tag to outrank the site's global tag-styles sheet (its `button,[type=button],[type=reset] { border: 0 }` reset matches our `