/* IH Bloom interface kit. Deliberately scoped to the home selector. */
@font-face { font-family: 'IH Inter'; src: url('selector/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IH Newsreader'; src: url('selector/newsreader.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'IH Mono'; src: url('selector/ibm-plex-mono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
body.selecting { background: #F5F7F6; color-scheme: light; }
.chooser { color: #0E1726; background: #F5F7F6; font-family: 'IH Inter', Arial, sans-serif; min-height: 100svh; }
.chooser .ih-selector-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; font-family: 'IH Newsreader', Georgia, serif; font-size: 23px; }
.chooser .ih-selector-brand img { flex: 0 0 40px; }
.chooser h1 { font-family: 'IH Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(38px, 8vw, 56px); letter-spacing: -.01em; }
.chooser .eyebrow { font-family: 'IH Mono', monospace; font-size: 11px; color: #0B3A7E; letter-spacing: .08em; }
.chooser .intro, .chooser .hint { color: #4c5866; font-size: 14px; }
.chooser .demo-card { background: #fff; border: 1px solid #DDE3E6; border-radius: 8px; padding: 0 0 16px; color: #0E1726; overflow: hidden; box-shadow: none; }
.chooser .demo-card[aria-pressed='true'] { border: 2px solid #0F52BA; background: #D4F1EC; box-shadow: none; }
.chooser .demo-card span, .chooser .demo-card strong { margin-left: 16px; margin-right: 16px; }
.chooser .demo-card span { color: #4c5866; font-family: 'IH Mono', monospace; font-size: 10px; }
.chooser .demo-card strong { font-family: 'IH Inter', Arial, sans-serif; font-weight: 600; font-size: 18px; margin-top: 8px; margin-bottom: 8px; }
.chooser .demo-thumbnail { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 14px; }
.chooser .show { background: #0F52BA; color: white; border-radius: 4px; font-size: 16px; font-weight: 600; }
.chooser .show:hover { background: #0B3A7E; }
.chooser .utility a { color: #0F52BA; font-size: 13px; }
.chooser button:focus-visible, .chooser a:focus-visible { outline: 3px solid #0F52BA; }
@media (max-width: 400px) { .chooser { padding-left: 18px; padding-right: 18px; } .chooser .demo-card strong { font-size: 16px; } }