/* TRADEX "Fracht": showcases taken over from Horizont, recoloured to the
   Tradex graphite + blue. Everything is CSS keyframes started by `.in`. */
@layer components {
  /* ---- service sections (text + demo) ---- */
  .svc { position: relative; overflow: clip; }
  .svc__grid { display: grid; gap: var(--sp-2xl) var(--sp-xl); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .svc--flip .svc__grid > .svc__text { order: 2; }
  .svc__text { display: grid; gap: var(--sp-s); }
  .svc__text h2 { font-size: var(--s-3); }
  .svc__text .lead { font-size: var(--s-1); font-weight: 500; }
  .svc__text > p:not(.lead):not(.chapter__n) { color: var(--mut); }
  .svc__demo { min-width: 0; }
  @media (max-width: 62rem) { .svc__grid { grid-template-columns: 1fr; } .svc--flip .svc__grid > .svc__text { order: 0; } }
  .dark.svc::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60rem 30rem at 100% 0%, rgb(35 97 141 / .28), transparent 60%); }
  .dark.svc > .wrap { position: relative; }

  /* ---- seals: small badges that sit where they belong ---- */
  .seals { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
  .seal { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .8rem .5rem .55rem; border-radius: .7rem;
    background: var(--surface); border: 1px solid var(--border); font-size: .82rem; line-height: 1.2; box-shadow: var(--shadow); }
  .dark .seal { box-shadow: none; background: oklch(100% 0 0 / .06); }
  .seal__ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--blue); background: rgb(35 97 141 / .1); flex: none; }
  .dark .seal__ico { color: var(--sky); background: oklch(100% 0 0 / .08); }
  .seal__ico svg { width: 1.05rem; height: 1.05rem; }
  .seal b { display: block; font-weight: 700; letter-spacing: -.01em; }
  .seal small { display: block; font-size: .72rem; color: var(--mut); margin-top: .1rem; }
  .seal__ok { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: oklch(72% .18 150); color: #fff; flex: none; margin-left: .2rem; }
  .seal__ok svg { width: .6rem; height: .6rem; }
  .seal--pending { border-style: dashed; box-shadow: none; background: transparent; }
  .seal--pending .seal__ico { color: var(--mut); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
  .seal__tag { font: 500 .58rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; padding: .28rem .4rem; border-radius: .3rem;
    background: oklch(90% 0.16 90); color: oklch(25% .06 80); font-style: normal; margin-left: .2rem; }

  /* ---- generic demo frame ---- */
  .demo { position: relative; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 60px rgb(28 27 27 / .16); overflow: clip; }
  .dark .demo { background: var(--g3); border-color: rgb(255 255 255 / .14); box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
  .demo__bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; border-bottom: 1px solid var(--border); background: var(--surface-2); font: 400 .72rem/1 var(--f-m); color: var(--mut); }
  .dark .demo__bar { background: oklch(100% 0 0 / .05); }
  .demo__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--border); }
  .demo__bar span { margin-left: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo__note { position: absolute; right: .7rem; top: .55rem; font: 500 .6rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
  .paused, .paused * { animation-play-state: paused !important; }

  /* ---- 1 - listing builder ---- */
  .shop { display: grid; gap: var(--sp-s); }
  .shop__body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-m); padding: var(--sp-m); }
  @media (max-width: 36rem) { .shop__body { grid-template-columns: 1fr; } }
  .shop__gallery { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .5rem; align-items: start; }
  .shop__main { align-self: start; min-width: 0; }
  .shop__thumbs { max-height: 100%; }
  .shop__thumbs { display: grid; gap: .35rem; align-content: start; }
  .shop__thumbs li { border: 1px solid var(--border); border-radius: .4rem; overflow: clip; aspect-ratio: 1; background: #fff; }
  .shop__thumbs li.is-on { outline: 2px solid var(--blue); outline-offset: -2px; }
  .shop__thumbs img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
  .shop__main { border: 1px solid var(--border); border-radius: .6rem; overflow: clip; aspect-ratio: 1; background: #fff; }
  .shop__main img { width: 100%; height: 100%; object-fit: cover; }
  .shop__info { display: grid; gap: .55rem; align-content: start; min-width: 0; }
  .shop__brand { font: 500 .68rem/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
  .shop__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 0; }
  .shop__tags { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .7rem; font-weight: 600; }
  .shop__tags span { padding: .25rem .5rem; border-radius: .35rem; background: oklch(93% .05 150); color: oklch(35% .1 150); }
  .shop__bullets { display: grid; gap: .3rem; font-size: .8rem; color: var(--mut); }
  .shop__bullets li { padding-left: 1rem; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shop__bullets li::before { content: "\2022"; position: absolute; left: .2rem; color: var(--blue); }
  .shop__btn { display: inline-block; padding: .6rem 1rem; border-radius: 999px; background: oklch(80% .17 85); color: oklch(25% .06 80); font-weight: 700; font-size: .82rem; justify-self: start; }
  .shop__markets { display: flex; flex-wrap: wrap; gap: .35rem; padding: .7rem var(--sp-m); border-top: 1px solid var(--border); align-items: center; font: 500 .68rem/1 var(--f-m); letter-spacing: .06em; }
  .shop__markets > span:first-child { color: var(--mut); margin-right: .3rem; text-transform: uppercase; }
  .shop__markets i { font-style: normal; padding: .35rem .45rem; border-radius: .35rem; border: 1px solid var(--border); color: var(--mut); opacity: .45; }
  .shop__steps { display: flex; flex-wrap: wrap; gap: .4rem; font: 500 .66rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; }
  .shop__steps li { padding: .45rem .65rem; border-radius: 999px; border: 1px solid var(--border); color: var(--mut); background: var(--surface); }
  .shop.in { animation: shop-cycle 8s linear both; }
  @keyframes shop-cycle { to { opacity: 1; } }
  .shop.in .shop__thumbs li { animation: pop .45s var(--ease) both; }
  .shop.in .shop__thumbs li:nth-child(1) { animation-delay: .2s; } .shop.in .shop__thumbs li:nth-child(2) { animation-delay: .32s; }
  .shop.in .shop__thumbs li:nth-child(3) { animation-delay: .44s; } .shop.in .shop__thumbs li:nth-child(4) { animation-delay: .56s; }
  .shop.in .shop__thumbs li:nth-child(5) { animation-delay: .68s; } .shop.in .shop__thumbs li:nth-child(6) { animation-delay: .8s; }
  .shop.in .shop__thumbs li:nth-child(7) { animation-delay: .92s; }
  .shop.in .shop__main { animation: fade .6s var(--ease) .9s both; }
  .shop.in .shop__brand { animation: fade .4s 1.3s both; }
  .shop.in .shop__title { animation: type 1.3s steps(40) 1.5s both; }
  .shop.in .shop__bullets li { animation: slide .5s var(--ease) both; }
  .shop.in .shop__bullets li:nth-child(1) { animation-delay: 2.9s; } .shop.in .shop__bullets li:nth-child(2) { animation-delay: 3.2s; } .shop.in .shop__bullets li:nth-child(3) { animation-delay: 3.5s; }
  .shop.in .shop__tags { animation: fade .4s 3.9s both; }
  .shop.in .shop__btn { animation: pop .5s var(--ease) 4.2s both; }
  .shop.in .shop__markets i { animation: light .4s both; }
  .shop.in .shop__markets i:nth-of-type(1) { animation-delay: 4.7s; } .shop.in .shop__markets i:nth-of-type(2) { animation-delay: 4.9s; }
  .shop.in .shop__markets i:nth-of-type(3) { animation-delay: 5.1s; } .shop.in .shop__markets i:nth-of-type(4) { animation-delay: 5.3s; }
  .shop.in .shop__markets i:nth-of-type(5) { animation-delay: 5.5s; } .shop.in .shop__markets i:nth-of-type(6) { animation-delay: 5.7s; }
  .shop.in .shop__markets i:nth-of-type(7) { animation-delay: 5.9s; } .shop.in .shop__markets i:nth-of-type(8) { animation-delay: 6.1s; }
  .shop.in .shop__markets i:nth-of-type(9) { animation-delay: 6.3s; } .shop.in .shop__markets i:nth-of-type(10) { animation-delay: 6.5s; }
  .shop.in .shop__steps li { animation: step .4s both; }
  .shop.in .shop__steps li:nth-child(1) { animation-delay: .1s; } .shop.in .shop__steps li:nth-child(2) { animation-delay: .9s; }
  .shop.in .shop__steps li:nth-child(3) { animation-delay: 1.5s; } .shop.in .shop__steps li:nth-child(4) { animation-delay: 4.2s; } .shop.in .shop__steps li:nth-child(5) { animation-delay: 6.8s; }
  @keyframes pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slide { from { opacity: 0; translate: -.5rem 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes light { to { opacity: 1; color: var(--text); border-color: var(--blue); background: rgb(35 97 141 / .08); } }
  @keyframes step { to { color: #fff; background: var(--blue); border-color: var(--blue); } }
  @media (prefers-reduced-motion: reduce) {
    .shop__thumbs li, .shop__main, .shop__brand, .shop__tags, .shop__bullets li, .shop__btn { opacity: 1; scale: 1; translate: 0 0; }
    .shop__title { clip-path: none; } .shop__markets i { opacity: 1; }
  }

  /* ---- 2 - browser + phone ---- */
  .web { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--sp-m); align-items: end; }
  @media (max-width: 36rem) { .web { grid-template-columns: 1fr; } .phone { display: none; } }
  .browser__tabs { display: flex; gap: .25rem; padding: .5rem .6rem 0; background: var(--surface-2); border-bottom: 1px solid var(--border); overflow-x: auto; }
  .dark .browser__tabs { background: oklch(100% 0 0 / .05); }
  .browser__tab { border: 0; background: transparent; color: var(--mut); font: 500 .72rem/1 var(--f-m); padding: .5rem .7rem; border-radius: .5rem .5rem 0 0; cursor: pointer; white-space: nowrap; }
  .browser__tab.is-on { background: var(--surface); color: var(--text); box-shadow: 0 -1px 0 var(--border), 1px 0 0 var(--border), -1px 0 0 var(--border); }
  .dark .browser__tab.is-on { background: var(--g3); }
  .browser__view { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
  .browser__view img, .phone__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .7s var(--ease); }
  .browser__view img.is-on, .phone__view img.is-on { opacity: 1; }
  .phone { border-radius: 1.2rem; padding: .35rem; background: var(--g1); box-shadow: 0 20px 40px rgb(0 0 0 / .4); }
  .phone__view { position: relative; aspect-ratio: 390 / 800; border-radius: .9rem; overflow: clip; background: var(--surface-2); }
  .web__meta { grid-column: 1 / -1; display: grid; gap: var(--sp-m); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  @media (max-width: 48rem) { .web__meta { grid-template-columns: 1fr; } }
  .days { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .days li { position: relative; padding: .6rem 0 0; font-size: .82rem; color: var(--mut); border-top: 3px solid var(--border); }
  .days li b { display: block; color: var(--text); font-size: .9rem; }
  .days li::after { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 0; background: var(--blue); }
  .in .days li::after { animation: grow 1.2s var(--ease) both; }
  .in .days li:nth-child(1)::after { animation-delay: .2s; } .in .days li:nth-child(2)::after { animation-delay: 1.3s; } .in .days li:nth-child(3)::after { animation-delay: 2.4s; }
  @keyframes grow { to { width: 100%; } }
  .scores { display: flex; gap: .9rem; }
  .scores li { display: grid; justify-items: center; gap: .3rem; font: 500 .62rem/1.2 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); text-align: center; width: 4.4rem; }
  .ring { position: relative; width: 3.4rem; height: 3.4rem; }
  .ring svg { width: 100%; height: 100%; rotate: -90deg; }
  .ring circle { fill: none; stroke-width: 5; }
  .ring circle:first-child { stroke: var(--border); }
  .ring circle:last-child { stroke: oklch(72% .18 150); stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; }
  .in .ring circle:last-child { animation: ring 1.4s var(--ease) 1s both; }
  @keyframes ring { to { stroke-dashoffset: 5; } }
  .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .85rem/1 var(--f-s); color: var(--text); letter-spacing: 0; }

  /* ---- 3 - before / after ---- */
  .ba { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: clip; border: 1px solid var(--border); box-shadow: 0 24px 60px rgb(28 27 27 / .16); background: #fff; }
  .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ba__done { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); }
  .in .ba__done { animation: wipe 9s ease-in-out infinite; }
  .ba__bar { position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgb(28 27 27 / .3), 0 0 18px rgb(90 160 214 / .8); translate: -50% 0; }
  .ba__bar::after { content: "\21C4"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff; color: var(--blue); font-weight: 700; box-shadow: var(--shadow); }
  .in .ba__bar { animation: wipe-bar 9s ease-in-out infinite; }
  @keyframes wipe { 0%, 38% { clip-path: inset(0 0 0 100%); } 60%, 78% { clip-path: inset(0 0 0 12%); } 100% { clip-path: inset(0 0 0 100%); } }
  @keyframes wipe-bar { 0%, 38% { left: 100%; } 60%, 78% { left: 12%; } 100% { left: 100%; } }
  .ba__lbl { position: absolute; top: .8rem; font: 500 .65rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .6rem; border-radius: .4rem; background: rgb(28 27 27 / .8); color: var(--on-dark); backdrop-filter: blur(6px); z-index: 1; }
  .ba__lbl--a { left: .8rem; } .ba__lbl--b { right: .8rem; background: var(--blue); }
  .ba__cap { position: absolute; left: .8rem; bottom: .8rem; font-size: .8rem; font-weight: 600; padding: .45rem .7rem; border-radius: .5rem; background: oklch(100% 0 0 / .85); color: var(--text); z-index: 1; }
  .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: var(--sp-s); }
  .strip figure { border-radius: calc(var(--r) / 1.5); overflow: clip; border: 1px solid var(--border); background: #fff; }
  .strip img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
  .strip--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip--wide img { aspect-ratio: 970 / 600; }
  @media (max-width: 36rem) { .strip--wide { grid-template-columns: 1fr; } }
  .strip figcaption { font: 500 .62rem/1.3 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: .5rem .6rem; }

  /* ---- 4 - agent pipeline ---- */
  .auto { display: grid; gap: var(--sp-m); padding: var(--sp-m); }
  .pipe { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .pipe::before { content: ""; position: absolute; left: 12%; right: 12%; top: 1.55rem; height: 2px; background: var(--border); }
  .pipe__dot { position: absolute; top: 1.55rem; left: 12%; width: .8rem; height: .8rem; border-radius: 50%; background: var(--sky); box-shadow: 0 0 14px var(--sky); translate: -50% -50%; opacity: 0; }
  .in .pipe__dot { animation: dot 8s linear infinite; }
  @keyframes dot { 0% { left: 12%; opacity: 0; } 5% { opacity: 1; } 30% { left: 37.3%; } 38% { left: 37.3%; } 60% { left: 62.6%; } 68% { left: 62.6%; } 90% { left: 88%; opacity: 1; } 100% { left: 88%; opacity: 0; } }
  .node { position: relative; display: grid; justify-items: center; gap: .5rem; text-align: center; font-size: .78rem; color: var(--mut); }
  .node i { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); color: var(--mut); z-index: 1; }
  .dark .node i { background: var(--g4); }
  .node i svg { width: 1.3rem; height: 1.3rem; }
  .node b { display: block; color: var(--text); font-size: .82rem; }
  .in .node i { animation: node 8s linear infinite; }
  .in .node:nth-child(2) i { animation-delay: 0s; } .in .node:nth-child(3) i { animation-delay: 2.4s; } .in .node:nth-child(4) i { animation-delay: 4.8s; } .in .node:nth-child(5) i { animation-delay: 7.1s; }
  @keyframes node { 0%, 4% { border-color: var(--border); color: var(--mut); box-shadow: none; } 6%, 26% { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 6px rgb(35 97 141 / .22); } 30%, 100% { border-color: var(--border); color: var(--mut); box-shadow: none; } }
  .dark .node i { --blue: var(--sky); }
  .auto__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .6rem; }
  .acard { padding: .8rem .9rem; border-radius: calc(var(--r) / 1.5); border: 1px solid var(--border); background: var(--surface-2); font-size: .78rem; color: var(--mut); min-height: 6.5rem; opacity: .35; }
  .dark .acard { background: oklch(100% 0 0 / .05); }
  .acard b { display: block; font: 500 .62rem/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; }
  .dark .acard b { color: var(--sky); }
  .acard dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; }
  .acard dd { color: var(--text); font-weight: 600; }
  .acard dd, .acard p, .acard .ok { opacity: 0; }
  .acard .ok { color: oklch(72% .18 150); font-weight: 700; }
  .in .acard { animation: card 8s linear infinite; }
  .in .acard:nth-child(1) { animation-delay: 0s; } .in .acard:nth-child(2) { animation-delay: 2.4s; } .in .acard:nth-child(3) { animation-delay: 4.8s; } .in .acard:nth-child(4) { animation-delay: 7.1s; }
  @keyframes card { 0%, 4% { opacity: .35; } 6%, 100% { opacity: 1; } }
  .in .acard dd, .in .acard p, .in .acard .ok { animation: fade .4s both; }
  .in .acard:nth-child(1) p { animation-delay: .5s; }
  .in .acard:nth-child(2) dd:nth-of-type(1) { animation-delay: 2.9s; } .in .acard:nth-child(2) dd:nth-of-type(2) { animation-delay: 3.2s; } .in .acard:nth-child(2) dd:nth-of-type(3) { animation-delay: 3.5s; } .in .acard:nth-child(2) dd:nth-of-type(4) { animation-delay: 3.8s; }
  .in .acard:nth-child(3) dd:nth-of-type(1) { animation-delay: 5.3s; } .in .acard:nth-child(3) dd:nth-of-type(2) { animation-delay: 5.6s; } .in .acard:nth-child(3) dd:nth-of-type(3) { animation-delay: 5.9s; }
  .in .acard:nth-child(4) .ok { animation-delay: 7.6s; }
  .agents { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); font-size: .82rem; }
  .agents li { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--surface); }
  .dark .agents li { background: oklch(100% 0 0 / .05); }
  .agents i { width: .5rem; height: .5rem; border-radius: 50%; background: oklch(75% .2 145); box-shadow: 0 0 8px oklch(75% .2 145); animation: blink 1.8s infinite; flex: none; }
  .agents li:nth-child(2) i { animation-delay: .4s; } .agents li:nth-child(3) i { animation-delay: .8s; } .agents li:nth-child(4) i { animation-delay: 1.2s; } .agents li:nth-child(5) i { animation-delay: 1.6s; }
  .agents small { margin-left: auto; font: 500 .6rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }

  /* ---- 5 - document fan ---- */
  .docs { position: relative; aspect-ratio: 4 / 3; }
  .docs img { position: absolute; left: 50%; top: 2%; width: 42%; height: auto; border-radius: .4rem; box-shadow: 0 18px 40px rgb(28 27 27 / .25); border: 1px solid var(--border); background: #fff;
    transform-origin: 50% 120%; translate: -50% 0; rotate: 0deg; transition: rotate 1s var(--ease), translate 1s var(--ease), opacity .6s, scale .3s; }
  .docs.in img { opacity: 1; }
  .js .docs:not(.in) img { opacity: 0; }
  .docs.in img:nth-child(1) { rotate: -22deg; translate: -80% 0; transition-delay: .1s; }
  .docs.in img:nth-child(2) { rotate: -11deg; translate: -65% 0; transition-delay: .25s; }
  .docs.in img:nth-child(3) { rotate: 0deg; translate: -50% 0; transition-delay: .4s; }
  .docs.in img:nth-child(4) { rotate: 11deg; translate: -35% 0; transition-delay: .55s; }
  .docs.in img:nth-child(5) { rotate: 22deg; translate: -20% 0; transition-delay: .7s; }
  .docs img:hover { z-index: 2; scale: 1.05; }
  .docs__cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 500 .68rem/1.4 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
}