:root { color-scheme: dark; --page: #080b13; --page-rgb: 8 11 19; --text: #f1f6f8; --muted: #a4b5bc; --secondary: #c1cfd4; --border: #34444b; --surface: rgb(15 20 24 / 88%); --control: #1d2c33; --soft: #17262c; --selected-text: #07171d; --notice: #ffdb9b; --notice-bg: #292419; --notice-border: #745e39; font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: var(--text); background: var(--page); font-synthesis: none; --brand-primary: #00c0f0; --brand-primary-strong: #008fb3; --brand-primary-mid: #64d8f6; --brand-primary-soft: #17262c; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: var(--page); isolation: isolate; }
#dot-field { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#dot-field > div { position: relative; width: 100%; height: 100%; overflow: hidden; }
#dot-field canvas, #dot-field svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main, footer { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.section-kicker { margin: 0 0 14px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .19em; }
h1 { margin: 0; font-family: "Noto Serif SC", "Songti SC", Georgia, serif; font-weight: 600; letter-spacing: -.035em; }
.catalog { padding-top: 52px; }
.catalog-heading { display: flex; padding-bottom: 28px; align-items: flex-end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--border); }
.section-kicker { margin-bottom: 8px; color: var(--brand-primary); }
h1 { font-size: 32px; }
.catalog-heading p:last-child, .group-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.search-field { display: flex; width: min(340px, 100%); height: 44px; padding: 0 11px 0 15px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.search-field:focus-within { border-color: var(--brand-primary-mid); box-shadow: 0 0 0 3px rgb(38 82 122 / 10%); }
.search-field > span { width: 14px; height: 14px; margin-right: 10px; border: 1.6px solid #78847d; border-radius: 50%; }
.search-field input { min-width: 0; flex: 1; color: inherit; background: transparent; border: 0; outline: 0; }
.search-field kbd { display: grid; width: 24px; height: 24px; place-items: center; color: var(--muted); font-size: 11px; background: var(--control); border: 1px solid var(--border); border-radius: 6px; }
.filters { display: flex; gap: 8px; padding: 22px 0 4px; flex-wrap: wrap; }
.filters button { padding: 9px 14px; color: var(--secondary); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.filters button.active { color: var(--selected-text); background: var(--brand-primary); border-color: var(--brand-primary); }
.result-groups { display: grid; gap: 48px; padding-top: 30px; }
.group-heading { display: flex; margin-bottom: 18px; align-items: flex-start; justify-content: space-between; }
.group-heading h3 { margin: 0; font-size: 18px; }
.group-heading > span { color: var(--muted); font-family: Georgia, serif; font-size: 18px; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.app-card { --accent: var(--brand-primary); position: relative; display: flex; min-height: 338px; padding: 24px; overflow: hidden; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 5px 20px rgb(31 61 73 / 4%); transition: transform .18s, box-shadow .18s; }
.app-card::after { position: absolute; top: 0; right: 0; width: 74px; height: 4px; content: ""; background: var(--accent); }
.app-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgb(31 61 73 / 10%); }
.app-card--copper { --accent: #f1ac7c; } .app-card--blue { --accent: #75c8f6; } .app-card--violet { --accent: #baa3ee; } .app-card--sand { --accent: #dec082; } .app-card--slate { --accent: #a1beca; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.monogram { display: grid; width: 48px; height: 48px; place-items: center; color: var(--accent); font: 700 17px Georgia, serif; background: var(--soft); border: 1px solid var(--border); border-radius: 13px; }
.favorite-action { padding: 8px 10px; color: var(--secondary); font-size: 12px; background: var(--control); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.favorite-action[aria-pressed='true'] { color: var(--brand-primary-mid); border-color: #008fb3; }
.environment-label { display: inline-block; max-width: 100%; margin-top: 12px; padding: 5px 8px; color: var(--secondary); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; overflow-wrap: anywhere; }
.catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; }
.catalog-tools button { padding: 9px 14px; color: var(--secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.catalog-tools button.active { color: var(--selected-text); background: var(--brand-primary); border-color: var(--brand-primary); }
#result-count, .catalog-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.catalog-note { margin: 14px 0 0; }
.preference-notice { padding: 12px; color: var(--notice); font-size: 13px; line-height: 1.7; border: 1px solid var(--notice-border); border-radius: 8px; background: var(--notice-bg); }
.entry-address { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.card-action--disabled { color: var(--muted); }
.card-eyebrow { margin: 24px 0 7px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.app-card h4 { margin: 0; font-size: 21px; }
.card-description { min-height: 66px; margin: 13px 0 14px; color: var(--secondary); font-size: 13px; line-height: 1.7; }
.capabilities { display: flex; min-height: 27px; margin: 0 0 23px; padding: 0; flex-wrap: wrap; gap: 6px; list-style: none; }
.capabilities li { padding: 5px 8px; color: var(--secondary); font-size: 10px; background: var(--control); border-radius: 5px; }
.card-action { display: flex; margin-top: auto; padding-top: 14px; align-items: center; justify-content: space-between; color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; border-top: 1px solid var(--border); }
.card-download-section { margin-top: 18px; }
.download-platform, .download-notice { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.card-download { min-height: 44px; margin-top: 0; padding-bottom: 8px; color: var(--brand-primary-mid); }
.card-download:hover { color: var(--text); text-decoration: underline; }
.card-download.card-action--disabled { color: var(--muted); }
.download-notice { margin: 6px 0 0; }
.download-guide { display: inline-flex; min-height: 44px; margin-top: 2px; padding-block: 8px; align-items: center; color: var(--secondary); font-size: 12px; line-height: 1.6; }
.download-guide[aria-disabled='true'] { color: var(--muted); }
.arrow { display: grid; width: 28px; height: 28px; place-items: center; color: var(--selected-text); background: var(--accent); border-radius: 50%; }
.empty-state { margin: 40px 0; padding: 45px; text-align: center; background: var(--surface); border: 1px dashed #b7c8cf; border-radius: 14px; }
.empty-state p { color: var(--muted); }
.empty-state button { padding: 9px 15px; color: var(--selected-text); background: var(--brand-primary); border: 0; border-radius: 8px; cursor: pointer; }
footer { display: flex; margin-top: 58px; padding: 22px 4px 30px; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { main, footer { width: min(100% - 28px, 1280px); } .catalog-heading { align-items: stretch; flex-direction: column; } .search-field { width: 100%; } .app-grid { grid-template-columns: 1fr; } footer { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* Vue Bits landing composition: dots, screen-blended HeroBand, bottom fade. */
.portal-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#hero-band { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 150%; mix-blend-mode: screen; }
#hero-band > div { width: 100%; height: 100%; }
.portal-background::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgb(var(--page-rgb) / 3%) 60%, rgb(var(--page-rgb) / 10%) 68%, rgb(var(--page-rgb) / 22%) 74%, rgb(var(--page-rgb) / 38%) 80%, rgb(var(--page-rgb) / 55%) 85%, rgb(var(--page-rgb) / 72%) 90%, rgb(var(--page-rgb) / 87%) 94%, rgb(var(--page-rgb) / 95%) 97%, var(--page)); }
.app-card, .search-field { backdrop-filter: blur(24px); }
.search-field input::placeholder { color: var(--muted); }
.filters button { background: var(--surface); }
.filters button.active { background: var(--brand-primary); }
a:focus-visible, button:focus-visible { outline: 2px solid #64d8f6; outline-offset: 4px; }

/* Theme changes keep the catalog geometry and its navigation state intact. */
:root[data-theme='light'] { color-scheme: light; --page: #eef8fa; --page-rgb: 238 248 250; --text: #132e3a; --muted: #48616b; --secondary: #304f5c; --border: #bdd2da; --surface: rgb(255 255 255 / 88%); --control: #e5f0f4; --soft: #e2f0f5; --selected-text: #fff; --brand-primary: #006e8a; --brand-primary-strong: #00566d; --brand-primary-mid: #006e8a; --brand-primary-soft: #e2f0f5; --notice: #654500; --notice-bg: #fff5df; --notice-border: #cfb376; }
:root[data-theme='light'] .app-card--copper { --accent: #975021; }
:root[data-theme='light'] .app-card--blue { --accent: #176b9d; }
:root[data-theme='light'] .app-card--violet { --accent: #7454a4; }
:root[data-theme='light'] .app-card--sand { --accent: #7d601a; }
:root[data-theme='light'] .app-card--slate { --accent: #486571; }
:root[data-theme='light'] #hero-band { mix-blend-mode: multiply; opacity: .55; }
:root[data-theme='dark'] #dot-field, :root[data-theme='dark'] #hero-band,
:root[data-theme='light'] #siri-ribbon { display: none; }
#siri-ribbon { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .35; }
:root[data-theme='dark'] { --muted: #b8cad3; }
#siri-ribbon canvas { display: block; width: 100%; height: 100%; }
#siri-ribbon[data-renderer='fallback'] { background: radial-gradient(ellipse at 65% 72%, rgb(97 148 213 / 20%), transparent 60%); }
.catalog-controls { display: flex; align-items: center; gap: 12px; width: min(468px, 100%); }
.theme-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 12px; color: var(--secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.theme-toggle:hover { color: var(--text); border-color: var(--brand-primary-mid); }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-icon--sun, :root[data-theme='dark'] .theme-icon--moon { display: none; }
:root[data-theme='dark'] .theme-icon--sun { display: block; }
::selection { color: var(--selected-text); background: var(--brand-primary); }
input { caret-color: var(--brand-primary); }
html { scrollbar-color: var(--border) var(--page); }
a { text-underline-offset: .2em; }
@media (max-width: 640px) { .catalog-controls { width: 100%; } .theme-toggle span { display: none; } .theme-toggle { width: 44px; padding: 0; } }