:root {
  color-scheme: light;
  --page: #fbfcfe;
  --surface: #fff;
  --surface-muted: #f4f7fb;
  --surface-accent: #edf3ff;
  --ink: #172033;
  --muted: #657187;
  --subtle: #8994a7;
  --line: #dce4ef;
  --line-strong: #c5d1e2;
  --blue: #2857d8;
  --blue-dark: #1f49bd;
  --blue-soft: #e8efff;
  --green: #2ca67a;
  --coral: #e96b5f;
  --amber: #d8952d;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", "SF Pro Display", ui-sans-serif, system-ui, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, monospace;
  --shadow: 0 1px 2px rgb(23 32 51 / .04);
  --shadow-panel: 0 12px 32px rgb(23 32 51 / .07);
  --shadow-active: 0 10px 26px rgb(40 87 216 / .12);
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgb(40 87 216 / .3); outline-offset: 3px; }
[hidden] { display: none !important; }
.loading-state { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--muted); font-size: .9rem; }
.loading-state.is-access-required { padding: 1.5rem; text-align: center; }
.access-required { display: grid; max-width: 28rem; gap: .55rem; }
.access-required strong { color: var(--ink); font-size: 1.35rem; letter-spacing: -.04em; }
.access-required span { line-height: 1.5; }
.access-required small { color: var(--subtle); line-height: 1.55; }
.loading-mark, .brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 4px; background: var(--blue); color: #fff; font-family: var(--display); font-size: 1.45rem; line-height: 1; }
.loading-mark, .brand-mark, .account-mark { object-fit: cover; }
.app-shell { min-height: 100dvh; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2rem; border-bottom: 1px solid rgb(220 228 239 / .9); background: rgb(251 252 254 / .94); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand-name { display: grid; gap: .08rem; font-size: 1rem; font-weight: 750; letter-spacing: -.03em; }
.brand-name small { color: var(--subtle); font-size: .6rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.topbar-meta { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .76rem; }
.topbar-separator { width: 1px; height: 1.4rem; margin: 0 .45rem; background: var(--line); }
.user-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--blue); font-size: .75rem; font-weight: 750; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: var(--subtle); }
.status-dot-success { background: var(--green); box-shadow: 0 0 0 3px rgb(44 166 122 / .12); }
.status-dot-warning { background: var(--amber); }
.status-dot-danger { background: var(--coral); }
.status-dot-neutral { background: var(--blue); animation: pulse 1.2s ease-in-out infinite; }
.app-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); max-width: 96rem; min-height: calc(100dvh - 4.75rem); margin: 0 auto; }
.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 2rem 1rem 1rem; }
.sidebar-context { display: grid; gap: .25rem; padding: 0 .7rem 2.2rem; }
.eyebrow { margin: 0; color: var(--blue); font-size: .63rem; font-weight: 800; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.sidebar-context strong { font-size: 1rem; letter-spacing: -.03em; }
.sidebar-context small { color: var(--muted); font-size: .72rem; }
.side-nav { display: grid; gap: .25rem; }
.nav-tab { display: flex; min-height: 2.8rem; align-items: center; gap: .75rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; padding: .7rem; color: var(--muted); text-align: left; font-size: .82rem; font-weight: 650; }
.nav-tab span { color: var(--subtle); font-family: var(--mono); font-size: .61rem; }
.nav-tab:hover { border-color: var(--line); color: var(--ink); }
.nav-tab.is-active { border-color: rgb(40 87 216 / .22); background: var(--blue-soft); color: var(--blue); box-shadow: var(--shadow); }
.nav-tab.is-active span { color: var(--blue); }
.sidebar-footer { display: flex; align-items: center; gap: .65rem; margin-top: auto; padding: 1rem .35rem 0; border-top: 1px solid var(--line); }
.runtime-card { display: flex; min-width: 0; flex: 1; align-items: center; gap: .6rem; }
.runtime-card div { display: grid; min-width: 0; gap: .15rem; }
.runtime-card strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.runtime-card small { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.help-button { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--blue); font-weight: 750; }
.main-content { min-width: 0; padding: 2.8rem clamp(1.25rem, 4vw, 4.5rem) 4rem; }
.view { width: min(100%, 72rem); margin: 0 auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.page-heading h1 { max-width: 12ch; margin: .55rem 0 0; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 700; letter-spacing: -.08em; line-height: .92; text-wrap: balance; }
.page-lead { max-width: 35rem; margin: 1rem 0 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .45rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .7rem 1rem; font-size: .78rem; font-weight: 750; transition: transform .14s var(--ease), background-color .14s var(--ease), border-color .14s var(--ease); }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover { background: var(--blue-dark); }
.button-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--blue); }
.button-secondary:hover { border-color: var(--blue); background: var(--blue-soft); }
.button-full { width: 100%; margin-top: 1rem; }
.panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); gap: 1rem; margin-bottom: 1rem; }
.panel { padding: 1.25rem; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.panel-heading h2, .cta-form h2 { margin: .4rem 0 0; font-size: 1.2rem; letter-spacing: -.04em; }
.badge { display: inline-flex; align-items: center; min-height: 1.55rem; border-radius: 999px; padding: .25rem .55rem; font-size: .62rem; font-weight: 750; white-space: nowrap; }
.badge-success { background: rgb(44 166 122 / .12); color: var(--green); }
.badge-warning { background: rgb(216 149 45 / .13); color: #a76e14; }
.badge-error { background: rgb(233 107 95 / .12); color: #b3483d; }
.badge-danger { background: rgb(233 107 95 / .12); color: var(--coral); }
.identity-body { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: 1.15rem; margin-top: 1.35rem; }
.identity-portrait { position: relative; display: grid; min-height: 8.7rem; place-items: center; overflow: hidden; border: 1px solid #c7d8f5; border-radius: .65rem; background: linear-gradient(145deg, #e6efff, #d8e3f7); }
.portrait-head { position: absolute; top: 1.25rem; width: 3.1rem; height: 3.45rem; border-radius: 48% 48% 44% 44%; background: #c98662; box-shadow: inset .55rem -.15rem 0 rgb(91 53 43 / .16); }
.portrait-body { position: absolute; bottom: -.8rem; width: 6.5rem; height: 4.5rem; border-radius: 48% 48% 0 0; background: var(--blue); }
.portrait-glasses { position: absolute; top: 2.45rem; width: 2.9rem; height: .6rem; border-top: 2px solid #27313d; border-bottom: 2px solid #27313d; opacity: .75; }
.identity-body strong { display: block; max-width: 25ch; font-size: .82rem; line-height: 1.35; }
.identity-body p { margin: .45rem 0 .9rem; color: var(--muted); font-size: .7rem; }
.text-button { border: 0; background: transparent; padding: 0; color: var(--blue); font-size: .7rem; font-weight: 750; }
.next-panel { display: flex; flex-direction: column; min-height: 14rem; background: var(--surface-accent); }
.next-panel h2 { max-width: 13ch; margin: .65rem 0 .7rem; font-family: var(--display); font-size: 2rem; font-weight: 400; line-height: .95; }
.next-panel p:not(.eyebrow) { margin: 0 0 1rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.next-panel .button { align-self: start; margin-top: auto; }
.progress-label { display: flex; justify-content: space-between; margin-top: 1.2rem; color: var(--muted); font-size: .64rem; }
.progress-label strong { color: var(--blue); }
.progress-track { height: .35rem; margin-top: .4rem; overflow: hidden; border-radius: 999px; background: rgb(40 87 216 / .13); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.panel-note, .file-limit { color: var(--subtle); font-size: .65rem; line-height: 1.4; }
.materials-layout, .cta-layout { display: grid; grid-template-columns: minmax(15rem, .68fr) minmax(0, 1.32fr); align-items: start; gap: 1rem; }
.upload-panel { position: sticky; top: 6.5rem; }
.dropzone { display: grid; min-height: 12rem; place-content: center; justify-items: center; gap: .45rem; margin-top: 1.15rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 1rem; text-align: center; cursor: pointer; }
.dropzone:hover, .dropzone.is-dragging { border-color: var(--blue); background: var(--blue-soft); }
.drop-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--line-strong); border-radius: .5rem; background: var(--surface); color: var(--blue); font-size: 1.2rem; }
.dropzone strong { font-size: .8rem; }
.dropzone small { color: var(--muted); font-size: .68rem; }
.dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.field-label { display: grid; gap: .4rem; margin-top: 1rem; color: var(--ink); font-size: .7rem; font-weight: 750; }
.field-control { width: 100%; min-height: 2.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: .65rem .75rem; color: var(--ink); font-size: .76rem; }
textarea.field-control { resize: vertical; }
.field-control::placeholder { color: var(--subtle); }
.field-hint { margin: .7rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.form-feedback { margin-top: .8rem; border-radius: var(--radius-sm); background: var(--surface-muted); padding: .65rem .75rem; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.form-feedback.is-error { background: rgb(233 107 95 / .1); color: #b3483d; }
.filter-group { display: flex; flex-wrap: wrap; gap: .25rem; }
.filter-button { border: 1px solid transparent; border-radius: 999px; background: transparent; padding: .35rem .55rem; color: var(--muted); font-size: .64rem; font-weight: 700; }
.filter-button:hover, .filter-button.is-active { border-color: var(--line); background: var(--surface-muted); color: var(--blue); }
.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1.1rem; }
.asset-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.asset-preview { display: grid; min-height: 8rem; place-items: center; background: linear-gradient(145deg, #dce9ff, #b8cdf7); color: var(--blue); font-family: var(--mono); font-size: .7rem; font-weight: 800; }
.asset-preview.tone-coral { background: #ffe5df; color: #b3483d; }
.asset-preview.tone-green { background: #dff4eb; color: #237a5b; }
.asset-preview img { display: block; width: 100%; height: 8rem; object-fit: cover; }
.asset-details { display: grid; gap: .38rem; padding: .7rem; }
.asset-name { overflow: hidden; font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.asset-meta { color: var(--muted); font-size: .62rem; }
.asset-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.asset-kind { color: var(--blue); font-size: .6rem; font-weight: 750; }
.asset-action { border: 0; background: transparent; padding: .1rem 0; color: var(--blue); font-size: .61rem; font-weight: 750; }
.empty-state { display: grid; min-height: 13rem; place-content: center; justify-items: center; gap: .65rem; padding: 1.5rem; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); font-size: .8rem; }
.empty-state p { max-width: 28ch; margin: 0; font-size: .7rem; line-height: 1.45; }
.pixel-mark { width: 2.6rem; height: 2.6rem; border: .35rem solid var(--blue); background: var(--amber); box-shadow: .3rem .3rem 0 var(--ink); image-rendering: pixelated; }
.cta-form { min-width: 0; }
.cta-form h2 { margin-bottom: 1rem; }
.cta-library { min-width: 0; }
.cta-list { display: grid; gap: .65rem; margin-top: 1rem; }
.cta-card { display: grid; gap: .6rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); padding: .85rem .9rem; }
.cta-card.is-inactive { border-left-color: var(--line-strong); opacity: .72; }
.cta-card-head { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.cta-card-head strong { font-size: .8rem; }
.cta-card-copy { margin: 0; color: var(--ink); font-size: .78rem; line-height: 1.45; }
.cta-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .62rem; }
.cta-toggle { border: 0; border-radius: 999px; background: var(--blue-soft); padding: .3rem .5rem; color: var(--blue); font-size: .61rem; font-weight: 750; }
.cta-card.is-inactive .cta-toggle { background: var(--surface-muted); color: var(--muted); }
.formats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.format-card { display: flex; min-height: 14rem; flex-direction: column; gap: .8rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 1.1rem; box-shadow: var(--shadow); }
.format-card.is-ready { border-top: 3px solid var(--blue); }
.format-card.is-blocked { border-top: 3px solid var(--amber); }
.format-card-head { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.format-card h2 { max-width: 17ch; margin: 0; font-size: 1rem; letter-spacing: -.035em; }
.format-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.format-requirement { display: grid; gap: .25rem; margin-top: auto; border-top: 1px solid var(--line); padding-top: .75rem; color: var(--muted); font-size: .63rem; }
.format-requirement strong { color: var(--ink); font-size: .66rem; }
.format-action { align-self: start; border: 0; background: transparent; padding: .15rem 0; color: var(--blue); font-size: .68rem; font-weight: 750; }
.providers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.provider-card { display: grid; gap: .65rem; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius-md); background: var(--surface); padding: 1.1rem; box-shadow: var(--shadow); }
.provider-card-head { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.provider-card h2 { margin: 0; font-size: 1rem; letter-spacing: -.035em; }
.provider-card > p { min-height: 2.2rem; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.brand-form { max-width: 52rem; }
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.brand-grid input[type="color"] { min-height: 2.65rem; padding: .25rem; cursor: pointer; }
.global-message { margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-accent); padding: .7rem .85rem; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.global-message.is-error { border-color: rgb(233 107 95 / .35); background: rgb(233 107 95 / .1); color: #a9443a; }
.account-gate { display: grid; width: min(31rem, calc(100% - 2rem)); min-height: min(42rem, calc(100vh - 2rem)); align-content: center; justify-items: start; gap: 1rem; margin: 1rem auto; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius-md); background: var(--surface); padding: clamp(1.5rem, 5vw, 4rem); box-shadow: var(--shadow-panel); }
.account-mark { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: .55rem; background: var(--blue); color: #fff; font-family: var(--display); font-size: 1.6rem; box-shadow: .35rem .35rem 0 var(--blue-soft); }
.account-gate h1 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 7vw, 4.8rem); font-weight: 400; letter-spacing: -.065em; line-height: .88; }
.account-gate > p:not(.eyebrow):not(.form-feedback) { max-width: 42ch; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.account-gate > small { max-width: 45ch; color: var(--subtle); font-size: .66rem; line-height: 1.5; }
.account-form, .telegram-login, .subscription-actions { width: 100%; }
.subscription-actions { display: grid; gap: .75rem; }
.account-divider { display: flex; width: 100%; align-items: center; gap: .75rem; color: var(--subtle); font-size: .68rem; }
.account-divider::before, .account-divider::after { height: 1px; flex: 1; background: var(--line); content: ''; }
.inline-command { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; margin: .15rem 0; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface-muted); padding: .18rem .25rem .18rem .45rem; vertical-align: middle; }
.inline-command code { overflow-wrap: anywhere; color: var(--ink); }
.inline-command button { flex: 0 0 auto; border: 0; border-radius: .25rem; background: var(--blue-soft); padding: .23rem .38rem; color: var(--blue); font-size: .61rem; font-weight: 750; }
.inline-command button:hover { background: var(--blue); color: #fff; }
.workspace-config-panel, .installation-panel { margin-bottom: .9rem; }
.setup-sequence { display: grid; gap: 1.15rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.setup-sequence-item { display: grid; gap: .75rem; border-top: 1px solid var(--line); padding-top: 1.15rem; }
.setup-sequence-heading { display: flex; align-items: start; gap: .7rem; }
.setup-sequence-heading > span { display: grid; width: 1.45rem; height: 1.45rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-family: var(--mono); font-size: .62rem; font-weight: 800; }
.setup-sequence-heading h3 { margin: .05rem 0 .25rem; font-size: .82rem; letter-spacing: -.02em; }
.setup-sequence-heading p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.setup-sequence-item .field-hint, .setup-sequence-item .form-feedback { margin: 0; }
.setup-flow .setup-follow-up { margin-top: 0; }
.codex-connect-steps { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.35rem; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.codex-connect-steps li::marker { color: var(--blue); font-family: var(--mono); font-weight: 800; }
.workspace-config-panel form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.workspace-config-panel .button, .workspace-config-panel .form-feedback { grid-column: 1 / -1; justify-self: start; }
.installation-panel > p { max-width: 60ch; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.install-command { overflow: auto; margin: 1rem 0 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ink); padding: .8rem; color: #fff; font-family: var(--mono); font-size: .66rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.toast { position: fixed; z-index: 10; right: 1.25rem; bottom: 1.25rem; max-width: min(22rem, calc(100vw - 2.5rem)); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ink); padding: .8rem 1rem; color: #fff; font-size: .72rem; line-height: 1.4; box-shadow: var(--shadow-panel); }
.noscript { margin: 2rem auto; max-width: 30rem; border: 1px solid var(--coral); border-radius: var(--radius-sm); padding: 1rem; color: var(--ink); font-family: var(--sans); }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 900px) { .app-layout { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: .75rem 1rem; } .sidebar-context { display: none; } .side-nav { display: flex; overflow-x: auto; gap: .35rem; } .nav-tab { min-height: 2.5rem; flex: 0 0 auto; } .sidebar-footer { display: none; } .main-content { padding-top: 2rem; } .formats-grid, .providers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .topbar { min-height: 4.25rem; padding: 0 1rem; } .topbar-meta > :not(.user-avatar):not(.status-dot) { display: none; } .main-content { padding: 1.5rem 1rem 3rem; } .page-heading { align-items: start; flex-direction: column; gap: 1.25rem; margin-bottom: 1.6rem; } .page-heading h1 { max-width: 10ch; font-size: clamp(2.45rem, 12vw, 3.8rem); } .heading-actions { justify-content: start; width: 100%; } .heading-actions .button { flex: 1; } .home-grid, .materials-layout, .cta-layout, .brand-grid, .workspace-config-panel form { grid-template-columns: 1fr; } .upload-panel { position: static; } .identity-body { grid-template-columns: 6rem minmax(0, 1fr); } .identity-portrait, .asset-preview { min-height: 6rem; } .asset-preview img { height: 6rem; } .asset-grid, .formats-grid, .providers-grid { grid-template-columns: 1fr; } .filter-group { margin-top: .65rem; } .panel-heading { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }