/* Soft ceramic surfaces, fine edges and sculpted details. */
:root {
  --bg: #ffffff;
  --sidebar: #fafbfa;
  --panel: #ffffff;
  --surface: #f4f5f4;
  --surface-hover: #f0f2f0;
  --text: #191d1a;
  --secondary: #727873;
  --muted: #7e8580;
  --border: #e6e9e6;
  --mint: #e8f8ed;
  --hero: #f8f9f8;
  --mat-top: #ffffff;
  --mat-bottom: #f5f6f5;
  --mat-edge: #e5e8e5;
  --mat-highlight: rgba(255, 255, 255, .94);
  --mat-shadow: rgba(37, 49, 41, .065);
  --mat-well: #eef1ee;
  --mat-dark-top: #4c524e;
  --mat-dark-bottom: #111613;
  --mat-card-shadow: 0 2px 3px rgba(32, 44, 36, .035), 0 9px 22px rgba(32, 44, 36, .025), inset 0 1px 0 rgba(255, 255, 255, .95);
}

:root[data-theme=dark] {
  --bg: #141715;
  --sidebar: #171b18;
  --panel: #232824;
  --surface: #202521;
  --surface-hover: #2b322d;
  --text: #edf1ed;
  --secondary: #adb6af;
  --muted: #99a39b;
  --border: #363e38;
  --mint: #233e2d;
  --hero: #222823;
  --mat-top: #2a302b;
  --mat-bottom: #202521;
  --mat-edge: #3a433c;
  --mat-highlight: rgba(255, 255, 255, .075);
  --mat-shadow: rgba(0, 0, 0, .22);
  --mat-well: #1a201c;
  --mat-dark-top: #454e47;
  --mat-dark-bottom: #111713;
  --mat-card-shadow: 0 3px 5px rgba(0, 0, 0, .12), 0 12px 24px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .055);
}

body { background: var(--bg); }
.topbar { background: var(--bg); border-bottom-color: var(--border); }
.brand-mark {
  border: 1px solid var(--mat-edge);
  border-radius: 11px;
  background: linear-gradient(155deg, var(--mat-top) 12%, var(--mat-bottom) 90%);
  box-shadow: 0 3px 6px var(--mat-shadow), inset 0 2px 1px var(--mat-highlight), inset 0 -2px 1px var(--mat-shadow);
  color: var(--text);
}
.wordmark { letter-spacing: -1.1px; }
.wordmark i { box-shadow: 0 0 5px #31f99f44; }
.nav-link { font-weight: 500; }
.nav-link.active::after { width: 23px; left: calc(50% - 11.5px); height: 2px; }
.nav-new { border: 1px solid var(--border); background: var(--mat-bottom); border-radius: 5px; }
.header-actions .icon-button {
  border: 1px solid var(--mat-edge);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 2px 3px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}

.sidebar {
  background: linear-gradient(100deg, var(--sidebar), var(--mat-bottom));
  border-right-color: var(--border);
}
.sidebar-top { padding: 23px 15px 17px; }
.sidebar-nav {
  height: 42px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.sidebar-nav.active {
  background: linear-gradient(160deg, var(--mat-top), var(--mat-bottom));
  color: var(--text);
  border-color: var(--mat-edge);
  box-shadow: 0 2px 4px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}
.sidebar-nav.active > [data-icon]:first-child { color: var(--green-deep); }
.sidebar-heading { font-weight: 600; margin-top: 2px; }
.sidebar-search {
  height: 38px;
  border-radius: 10px;
  border-color: var(--mat-edge);
  background: var(--mat-top);
  box-shadow: inset 0 2px 3px var(--mat-shadow), 0 1px 0 var(--mat-highlight);
}
.sidebar-search input { font-size: 14px; }
.collection-group-title { letter-spacing: .7px; color: var(--muted); margin-top: 17px; }
.collection-row { border-radius: 8px; height: 37px; }
.collection-row.active {
  background: var(--mat-well);
  color: var(--text);
  box-shadow: inset 0 1px 3px var(--mat-shadow), 0 1px 0 var(--mat-highlight);
}
.collection-row.active .set-dot { box-shadow: 0 0 0 2px #31f99f33; }
.set-dot { box-shadow: inset 0 1px 1px #ffffff80, 0 1px 2px #202c2408; }

.main { padding-top: 30px; }
.hero {
  min-height: 310px;
  padding: 30px 38px;
  border-radius: 30px;
  border: 1px solid var(--mat-edge);
  background: radial-gradient(ellipse at 80% 45%, var(--mat-top), transparent 53%), linear-gradient(165deg, var(--mat-top), var(--mat-bottom) 82%);
  box-shadow: var(--mat-card-shadow);
}
.hero::after {
  inset: 0;
  background: linear-gradient(180deg, var(--mat-highlight), transparent 22%);
  mask-image: none;
  opacity: .6;
  border-radius: inherit;
}
.hero-copy { max-width: 58%; }
.eyebrow { letter-spacing: 1.25px; font-weight: 500; }
.hero h1 { font-size: 43px; font-weight: 700; line-height: 1.35; letter-spacing: -1.6px; margin-top: 17px; }
.green-word { color: var(--text); }
.green-word::after { height: 5px; background: #31f99f69; bottom: 0; border-radius: 4px; }
.hero p { font-size: 14px; line-height: 1.85; margin-top: 14px; color: var(--secondary); }
.hero-stats { margin-top: 20px; }
.hero-stats i { background: var(--border); }
.hero-art { top: calc(50% - 139px); right: 27px; transform: scale(1.03); }
.art-orbit {
  border-style: solid;
  border-color: rgba(147, 160, 150, .12);
  box-shadow: 0 1px 0 var(--mat-highlight);
}
.orbit-two { border-color: rgba(147, 160, 150, .1); }
.floating-icon {
  border: 1px solid rgba(193, 203, 196, .56);
  background: linear-gradient(155deg, #ffffff 20%, #f1f4f1 100%);
  box-shadow: 0 12px 17px rgba(37, 52, 43, .08), 0 2px 3px rgba(37, 52, 43, .06), inset 0 2px 1px #fff, inset 0 -3px 2px #ccd6cf66;
  color: #65736b;
}
.floating-icon .icon-svg { filter: drop-shadow(0 1px 0 #fff); }
.art-heart { border-radius: 50%; color: #728d7c; }
.art-command { border-radius: 19px; color: #767d74; }
.art-zap { border-radius: 21px; color: #96905d; }
.art-cursor { border-radius: 20px; color: #778d9b; }
.art-smile { border-radius: 50%; color: #949070; }
.art-flower {
  width: 99px;
  height: 99px;
  border-radius: 29px;
  border: 3px solid #e0e5e1;
  background: radial-gradient(circle at 30% 12%, #ffffff2c, transparent 45%), linear-gradient(145deg, #4a534d, #1d2620 60%, #0a100c);
  color: #31f99f;
  box-shadow: 0 16px 24px #1d302328, 0 2px 3px #1d302320, inset 0 2px 1px #ffffff57, inset 0 -4px 3px #0000004a;
}
.art-flower::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 23px;
  background-image: radial-gradient(#fff2 .7px, transparent .7px);
  background-size: 4px 4px;
  pointer-events: none;
  opacity: .4;
}
.art-flower .icon-svg { filter: drop-shadow(0 2px 2px #0008) drop-shadow(0 0 7px #31f99f35); }
.art-spark { color: #a6b9aa; }
.art-note { color: #98a19a; }
.art-squiggle { color: #abb5ad; }

.search-section { margin-top: 26px; }
.main-search {
  min-height: 66px;
  height: 66px;
  padding: 8px 9px 8px 21px;
  border-radius: 20px;
  border-color: var(--mat-edge);
  background: linear-gradient(180deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 5px 13px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight), inset 0 -1px 1px var(--mat-shadow);
}
.main-search:focus-within {
  border-color: #86d9ac;
  box-shadow: 0 0 0 3px #31f99f12, 0 5px 13px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}
.search-symbol { color: #8a9990; }
.main-search input { font-size: 14px; }
.search-key { border-radius: 6px; background: var(--mat-top); box-shadow: inset 0 -1px 0 var(--border); }
.search-submit,.primary-button {
  border: 1px solid #222c25;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mat-dark-top), #242c27 48%, var(--mat-dark-bottom));
  color: #f9fffb;
  box-shadow: 0 3px 5px #15221b1a, inset 0 1px 1px #ffffff3b, inset 0 -2px 1px #0004;
  transition: background 180ms, box-shadow 180ms, transform 180ms;
}
.search-submit:hover,.primary-button:hover {
  background: linear-gradient(180deg, #535e56, #26342b 65%, #142119);
  box-shadow: 0 5px 10px #15221b22, inset 0 1px 1px #ffffff40;
  transform: translateY(-1px);
}
.search-submit:active,.primary-button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px #0006, 0 1px 0 var(--mat-highlight);
}
.search-submit svg,.primary-button svg { color: #31f99f; }
.popular-searches { margin-top: 17px; gap: 8px; }
.popular-searches > button {
  border-radius: 8px;
  border-color: var(--mat-edge);
  background: linear-gradient(180deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 1px 1px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}
.popular-searches > button:hover { border-color: #b8d9c4; background: var(--mint); }
.popular-label svg { color: #899f8c; }

.featured-section { margin-top: 35px; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.heading-label > span { color: var(--muted); }
.text-link { color: var(--secondary); }
.featured-grid { gap: 16px; }
.featured-card,.catalog-card {
  border-radius: 24px;
  border: 1px solid var(--mat-edge);
  background: linear-gradient(155deg, var(--mat-top) 10%, var(--mat-bottom) 100%);
  box-shadow: var(--mat-card-shadow);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.featured-card { padding: 20px 18px 16px; }
.featured-card:hover,.catalog-card:hover {
  border-color: #cbd6ce;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}
.featured-card-top { justify-content: center; padding-bottom: 12px; border-bottom: 1px dotted #c8d0c9; gap: 8px; }
.featured-card h3 { font-size: 15px; font-weight: 650; color: var(--text); }
.set-card-arrow { position: absolute; right: 16px; top: 23px; color: #a7b0a9; }
.featured-card .set-dot { border-radius: 8px; width: 25px; height: 25px; }
.featured-description { text-align: center; text-wrap: balance; font-size: 14px; color: var(--secondary); margin: 12px 0 15px; min-height: 24px; }
.featured-icons {
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 17px;
  color: #576b5e;
  background: radial-gradient(ellipse at 50% 45%, var(--mat-top), transparent 75%);
}
.featured-icons svg { width: 25px; height: 25px; filter: drop-shadow(0 2px 1px #889b8b20); }
.featured-card-foot { font-size: 12px; align-items: center; }
.featured-card-foot > span:last-child { border: 1px solid var(--mat-edge); border-radius: 6px; background: var(--mat-top); padding: 2px 6px; }
.explore-section { margin-top: 35px; }
.view-controls .icon-button { border-radius: 7px; }
.icon-button.active {
  background: linear-gradient(180deg, var(--mat-bottom), var(--mat-top));
  box-shadow: inset 0 1px 3px var(--mat-shadow), 0 1px 0 var(--mat-highlight);
  color: var(--text);
}
.filter-toolbar { padding-bottom: 16px; margin-bottom: 20px; border-bottom-style: dotted; border-bottom-color: #ccd3cd; }
.style-tabs { gap: 6px; }
.style-tab { line-height: 30px; border-radius: 9px; }
.style-tab.active {
  background: linear-gradient(180deg, #e9f6ec, #f7fcf8);
  color: #28583b;
  box-shadow: inset 0 1px 3px #77938025, 0 1px 0 #fff;
}
.icons-grid { gap: 12px; }
.icon-card {
  border-radius: 17px;
  min-height: 108px;
  border-color: var(--mat-edge);
  background: linear-gradient(160deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 2px 3px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}
.open-icon { min-height: 108px; padding-top: 20px; padding-bottom: 14px; gap: 14px; }
.icon-card:hover {
  border-color: #c6d9cd;
  background: linear-gradient(160deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 6px 13px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
  transform: translateY(-3px);
}
.icon-card:active { transform: translateY(1px); box-shadow: inset 0 2px 5px var(--mat-shadow); }
.tile-glyph { color: inherit; }
.tile-glyph svg { filter: drop-shadow(0 1px 1px #446a4c12); }
.icon-label { color: var(--secondary); font-size: 14px; }
.tile-favorite { top: 6px; right: 6px; border-radius: 50%; }
.list-view .icon-card { border-radius: 13px; }
.list-view .open-icon { min-height: 66px; }
.list-view .icon-label { font-size: 14px; }
.secondary-button {
  border-radius: 11px;
  border-color: var(--mat-edge);
  background: linear-gradient(180deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 2px 3px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight);
}
.secondary-button:hover { border-color: #bed0c4; background: var(--mat-top); }
.search-feedback { border: 1px solid var(--mat-edge); border-radius: 12px; background: var(--mat-bottom); }
.grid-end-note { color: var(--muted); }
.main-footer { border-top-style: dotted; padding-top: 25px; padding-bottom: 28px; }

.catalog-intro { padding-top: 26px; padding-bottom: 30px; }
.catalog-intro h1 { font-weight: 650; color: var(--text); }
.catalog-intro h1 span { color: var(--text); text-decoration: underline; text-decoration-color: #31f99f70; text-decoration-thickness: 4px; text-underline-offset: 7px; }
.catalog-search { border-radius: 13px; border-color: var(--mat-edge); background: var(--mat-top); box-shadow: inset 0 2px 4px var(--mat-shadow), 0 1px 0 var(--mat-highlight); }
.catalog-grid { gap: 19px; }
.catalog-card { padding: 23px; }
.catalog-card-title { padding-bottom: 13px; border-bottom: 1px dotted #c8d0c9; }
.catalog-card-title h3 { font-size: 15px; }
.catalog-card > p { margin-top: 13px; color: var(--secondary); }
.catalog-samples { height: 50px; margin-bottom: 20px; }
.catalog-samples img,.catalog-samples svg { filter: drop-shadow(0 2px 2px #758b7a20); }
.context-title .set-dot { border-radius: 14px; border: 1px solid var(--mat-edge); box-shadow: 0 4px 7px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight); }

.icon-dialog,.guide-dialog {
  border-radius: 26px;
  border-color: var(--mat-edge);
  background: linear-gradient(150deg, var(--mat-top), var(--mat-bottom));
  box-shadow: 0 24px 80px #101b1533, 0 2px 5px #101b151a, inset 0 1px 0 var(--mat-highlight);
}
.drawer-header { border-bottom-color: var(--border); }
.drawer-header .icon-button { border-radius: 8px; }
.icon-dialog .detail-preview {
  border-radius: 21px;
  border-color: var(--mat-edge);
  box-shadow: inset 0 3px 7px var(--mat-shadow), inset 0 -1px 0 var(--mat-highlight), 0 1px 0 var(--mat-highlight);
}
.detail-preview.checker {
  background-image: linear-gradient(45deg, #85978a06 25%, transparent 25%), linear-gradient(-45deg, #85978a06 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #85978a06 75%), linear-gradient(-45deg, transparent 75%, #85978a06 75%);
  background-color: var(--mat-top);
}
.detail-title h2 { font-weight: 650; }
.setting-label { font-weight: 500; }
.hex-input,.size-input-wrap { border-radius: 8px; border-color: var(--mat-edge); background: var(--mat-top); box-shadow: inset 0 1px 2px var(--mat-shadow), 0 1px 0 var(--mat-highlight); }
.transform-button { border-radius: 8px; background: linear-gradient(180deg, var(--mat-top), var(--mat-bottom)); box-shadow: 0 1px 2px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight); }
.preview-backgrounds { border-radius: 8px; box-shadow: 0 2px 4px var(--mat-shadow); }
.code-section { border-radius: 14px; border-color: var(--mat-edge); background: var(--mat-well); box-shadow: inset 0 2px 4px var(--mat-shadow), 0 1px 0 var(--mat-highlight); }
.code-tabs { border-bottom-style: dotted; }
.code-section pre { color: var(--secondary); }
.license-note { line-height: 1.6; }
.drawer-footer { background: var(--mat-bottom); }
.guide-star { background: linear-gradient(155deg, var(--mat-top), var(--mat-bottom)); border: 1px solid var(--mat-edge); box-shadow: 0 4px 7px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight); }
.guide-license { border: 1px solid var(--mat-edge); border-radius: 13px; box-shadow: inset 0 1px 4px var(--mat-shadow); }
.empty-state > span { border: 1px solid var(--mat-edge); border-radius: 17px; background: linear-gradient(155deg, var(--mat-top), var(--mat-bottom)); box-shadow: 0 4px 9px var(--mat-shadow), inset 0 1px 0 var(--mat-highlight); }
.toast { border-radius: 13px; background: linear-gradient(155deg, #3a473d, #151f18); box-shadow: 0 8px 20px #17281c26, inset 0 1px 0 #ffffff29; }

:root[data-theme=dark] .style-tab.active { background: linear-gradient(180deg, #263c2e, #304638); color: #b7edc6; box-shadow: inset 0 1px 4px #101d1580, 0 1px 0 #ffffff09; }
:root[data-theme=dark] .featured-card-top,:root[data-theme=dark] .catalog-card-title,:root[data-theme=dark] .filter-toolbar { border-color: #48534b; }
:root[data-theme=dark] .featured-icons { color: #c4d6c8; }
:root[data-theme=dark] .main-search:focus-within { border-color: #428b5b; }
:root[data-theme=dark] .featured-card:hover,:root[data-theme=dark] .catalog-card:hover,:root[data-theme=dark] .icon-card:hover { border-color: #506b58; }

@media (min-width: 1500px) {
  .main { padding-top: 36px; }
  .hero { min-height: 330px; padding: 33px 44px; }
  .hero h1 { font-size: 47px; }
  .hero-art { right: 7%; transform: scale(1.1); }
  .featured-card { padding: 23px 22px 18px; }
  .featured-description { font-size: 14px; }
  .icons-grid { gap: 14px; }
  .icon-card,.open-icon { min-height: 114px; }
}
@media (max-width: 1150px) {
  .hero { padding: 28px; border-radius: 26px; }
  .hero h1 { font-size: 36px; }
  .hero-art { right: -40px; transform: scale(.9); }
  .featured-grid { gap: 13px; }
  .featured-card { padding: 18px 13px 15px; }
  .featured-card-top { justify-content: flex-start; }
  .featured-card h3 { font-size: 14px; }
  .set-card-arrow { right: 12px; top: 21px; }
  .featured-description { font-size: 14px; min-height: 48px; }
  .featured-icons { gap: 12px; }
  .featured-icons svg { width: 22px; height: 22px; }
}
@media (max-width: 1050px) {
  .hero-copy { max-width: 76%; }
  .hero-art { right: -100px; transform: scale(.8); opacity: .45; }
}
@media (max-width: 950px) {
  .featured-card-top { justify-content: center; }
  .featured-description { min-height: 24px; }
  .featured-icons { gap: 20px; }
  .icon-card,.open-icon { min-height: 104px; }
}
@media (max-width: 760px) {
  .main { padding-top: 22px; }
  .hero { padding: 28px; min-height: 300px; }
  .hero-copy { max-width: 80%; }
  .hero h1 { font-size: 36px; }
  .featured-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .featured-card { padding: 19px 16px 16px; }
  .featured-description { font-size: 14px; }
  .featured-card h3 { font-size: 15px; }
  .catalog-card { padding: 19px; border-radius: 21px; }
}
@media (max-width: 560px) {
  .main { padding: 17px 16px 0; }
  .hero { border-radius: 24px; min-height: 282px; padding: 25px 22px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: 30px; line-height: 1.45; letter-spacing: -1.1px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .9px; }
  .hero p { font-size: 14px; line-height: 1.8; max-width: 100%; }
  .hero-stats { font-size: 14px; gap: 9px; margin-top: 19px; }
  .hero-stats strong { font-size: 14px; }
  .hero-art { top: 12px; right: -145px; transform: scale(.7); opacity: .12; }
  .search-section { margin-top: 20px; }
  .main-search { border-radius: 16px; height: 58px; min-height: 58px; padding: 6px 7px 6px 14px; }
  .search-submit { width: 43px; min-width: 43px; height: 43px; border-radius: 12px; }
  .popular-searches { gap: 6px; margin-top: 14px; }
  .popular-searches > button { font-size: 14px; padding: 2px 8px; }
  .featured-section,.explore-section { margin-top: 30px; }
  .section-heading { margin-bottom: 16px; }
  .section-heading h2 { font-size: 14px; }
  .featured-grid { gap: 12px; }
  .featured-card { border-radius: 21px; padding: 17px 12px 13px; }
  .featured-card-top { justify-content: flex-start; gap: 6px; }
  .featured-card h3 { font-size: 14px; }
  .featured-card .set-dot { width: 22px; height: 22px; border-radius: 7px; }
  .set-card-arrow { right: 11px; top: 20px; }
  .featured-description { font-size: 14px; line-height: 1.8; min-height: 50px; margin: 12px 0 8px; }
  .featured-icons { height: 44px; gap: 11px; margin-bottom: 13px; }
  .featured-icons svg { width: 20px; height: 20px; }
  .featured-card-foot { font-size: 12px; gap: 3px; }
  .featured-card-foot > span:last-child { font-size: 12px; padding: 1px 4px; }
  .filter-toolbar { padding-bottom: 14px; margin-bottom: 15px; }
  .style-tabs { gap: 4px; }
  .style-tab { font-size: 14px; padding: 0 9px; line-height: 28px; border-radius: 8px; }
  .icons-grid { gap: 9px; }
  .icon-card { border-radius: 14px; }
  .icon-card,.open-icon { min-height: 99px; }
  .open-icon { padding: 18px 4px 12px; gap: 13px; }
  .icon-label,.list-view .icon-label { font-size: 14px; }
  .catalog-grid { gap: 12px; }
  .catalog-card { padding: 15px 13px; border-radius: 20px; }
  .catalog-card-title { gap: 5px; padding-bottom: 11px; }
  .catalog-card-title h3 { font-size: 14px; }
  .catalog-card > p { font-size: 14px; }
  .catalog-samples { gap: 7px; height: 40px; }
  .catalog-samples img,.catalog-samples svg { width: 20px; height: 20px; }
  .catalog-card-meta { font-size: 12px; }
  .catalog-card-meta span:last-child { font-size: 12px; }
  .icon-dialog,.guide-dialog { border-radius: 22px; }
  .icon-dialog .detail-preview { border-radius: 17px; }
  .drawer-footer .primary-button,.drawer-footer .secondary-button { border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-card,.catalog-card,.icon-card,.search-submit,.primary-button { transition: none; }
}