/* The style catalog page (styles.html, 2026-10-14). The header, menu, sticky bar and footer rules are the subpages'
   own (faq.html), copied so this page owns its sheet; everything from "the catalog" down is this page's.
   Source: loomwest/planning/style-catalog-2026-10-14/assets/styles-catalog.css; build_catalog.py copies it into the site,
   so edit it here, never the copy. */
:root{--btn:#b25f2a; --btn-shadow:#8e4c22; --dim:#6b6a62; --ink:#1e222a; --paper:#f8f7f3; --cream:#f1efe8; --line:#e3dfd6; --panel:#ffffff;
  --pine:#2e5941; --pine-d:#2b3440; --terra:#bf6a33; --terra-d:#9c5426; --amber:#8a6420; --gold:#b08536; --ease:cubic-bezier(.33,.02,.2,1);
  /* this page's motion, on lw-motion's curves (the kit defines them in the first paint; these are the fallbacks) */
  --sc-land:var(--lwm-ease-land,cubic-bezier(.2,.7,.1,1)); --sc-snap:var(--lwm-ease-snap,cubic-bezier(.7,0,.2,1)); --sc-k:var(--lwm-k,1);}
*{box-sizing:border-box; margin:0; padding:0;}
a{color:var(--terra-d);}
html{scroll-behavior:smooth;} html,body{overflow-x:clip;}
body{font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; font-size:16.5px;}
h1,h2,h3{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif; letter-spacing:-.3px; text-wrap:balance;}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}
.eyebrow{font:700 12px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:2.4px; text-transform:uppercase; color:var(--amber);}
section{padding:72px 0;}
.top{position:sticky; top:0; z-index:50; background:rgba(248,247,243,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px);}
.top .wrap{display:flex; align-items:center; gap:14px; height:72px; max-width:none; padding:0 clamp(16px,4vw,30px);}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; letter-spacing:.3px; color:var(--ink); text-decoration:none; font-family:'Space Grotesk',sans-serif; margin-right:auto;}
.nav a{font:600 .92rem/1 'Space Grotesk',sans-serif; text-decoration:none; color:var(--ink); margin-left:24px;}
.nav .cta{margin-left:10px;}
.nav a:not(.cta) + .cta{margin-left:22px;}
.nav a.on, .nav a:hover{color:var(--terra-d);}
@media(max-width:1260px){ .nav .cta.ghost{display:none;} }
@media(max-width:1020px){ .nav a:not(.cta){display:none;} }
@media(max-width:820px){ header a.cta{display:none;} }
@media(max-width:420px){ .logo{font-size:.95rem;} }
.nav-toggle{display:block; background:none; border:none; cursor:pointer; padding:7px 8px 13px; margin-right:8px; line-height:0; -webkit-appearance:none; appearance:none;}
.nav-toggle svg{display:block;}
.nav-toggle .l{stroke:var(--ink); stroke-width:2; stroke-linecap:round; transition:transform .3s var(--ease), opacity .3s var(--ease); transform-origin:13px 12px;}
.nav-toggle .l2{stroke:var(--terra);}
.nav-toggle[aria-expanded="true"] .l1{transform:rotate(45deg) translateY(7px);}
.nav-toggle[aria-expanded="true"] .l2{opacity:0; transform:scaleX(.2);}
.nav-toggle[aria-expanded="true"] .l3{transform:rotate(-45deg) translateY(-7px);}
.nav-toggle:focus-visible{outline:3px solid var(--terra); outline-offset:2px; border-radius:8px;}
#menu-scrim{position:fixed; inset:0; background:rgba(30,36,48,.34); z-index:65; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);}
#menu-scrim.open{opacity:1; pointer-events:auto;}
#menu-panel{position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw); background:var(--paper); border-right:1px solid var(--line); box-shadow:18px 0 50px rgba(24,32,43,.18); z-index:70; padding:84px 28px 28px; transform:translateX(-103%); transition:transform .45s var(--ease), visibility 0s linear .45s; visibility:hidden; overflow-y:auto;}
#menu-panel.open{transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s;}
#menu-panel a{display:block; padding:13px 2px; font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif; font-weight:600; font-size:1.02rem; color:var(--pine-d); text-decoration:none; border-bottom:1px solid var(--line); opacity:0; transform:translateX(-16px); transition:opacity .4s var(--ease), transform .4s var(--ease);}
#menu-panel.open a{opacity:1; transform:none;}
.menu-sep{display:flex; align-items:center; gap:10px; margin:14px 0 6px; font:700 .68rem 'IBM Plex Sans','Segoe UI',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); opacity:0; transition:opacity .4s var(--ease) .2s;}
.menu-sep::after{content:""; flex:1; height:1px; background:var(--line);}
#menu-panel.open .menu-sep{opacity:.85;}
#menu-panel a:hover{color:var(--terra-d);}
#menu-panel a.here{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;}
#menu-panel a.here::after{white-space:nowrap; margin-left:auto; content:"you're here"; display:inline-block; font:700 .62rem 'IBM Plex Sans','Segoe UI',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pine); border:1px solid var(--pine); border-radius:8px; padding:4px 9px;}
#menu-panel .mh{margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dim);}
#menu-panel .mh b{display:block; font:700 11px/1 'IBM Plex Sans',sans-serif; letter-spacing:2.2px; text-transform:uppercase; color:var(--terra-d); margin-bottom:8px;}
#menu-panel .mh span{display:block; padding:2px 0;}
body.menu-open{overflow:hidden;}
@media(max-width:1020px){
  .nav-toggle{order:1; margin-left:2px; margin-right:0; padding-left:8px; padding-right:0;}
  #menu-panel{left:auto; right:0; border-right:0; border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(24,32,43,.18); transform:translateX(103%);}
  #menu-panel.open{transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s;} #menu-panel a{transform:translateX(16px);} #menu-panel.open a{transform:none;}
}
@media(prefers-reduced-motion:reduce){ .nav-toggle .l, #menu-panel, #menu-panel a, #menu-scrim{transition:none;} }
.cta-final{background:var(--pine-d); color:#f1efe8; text-align:center;}
.cta-final h2{font-size:clamp(26px,3.6vw,40px); max-width:24ch; margin:0 auto 14px;}
.cta-final p{color:#c9cfd6; max-width:54ch; margin:0 auto 24px;}
.btn{margin:4px;}
footer{background:#171b22; color:#9aa3af; padding:36px 0; font-size:14px;}
footer a{color:#d4a445; text-decoration:underline; text-underline-offset:3px;}
#stickybar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(248,247,243,.97); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(30,34,42,.10);}
#stickybar a{flex:1 1 0; min-height:44px; display:flex; align-items:center; justify-content:center; font:700 16px 'Space Grotesk','Segoe UI',system-ui,sans-serif; border-radius:8px; text-decoration:none;}
#stickybar .sb-buy{background:var(--btn); color:#fff;}
#stickybar .sb-call{color:var(--terra-d); border:2px solid var(--terra-d);}
@media (max-width:820px){ #stickybar{display:flex;} body{padding-bottom:74px;} }
/* loomwest.com's own text highlight (the 10/14 standard: 6.0:1 for the selected text) */
::selection{background:#9c5426; color:#fff6f0;}

/* ---------------------------------------------------------------- the catalog */
/* Rhythm (Andre 2026-10-14, "consistent alternation of colors between sections"): dark hero, paper list, cream
   how-we-use band, dark close. The motion (2026-10-14 evening, "motion fx based from stuff we learned from baunfire"):
   things arrive in order, colour sweeps in instead of cutting, and the index holds still while the specimens flow.
   Transform and opacity only; reduced motion turns every move off; phones get the short versions (--sc-k). */

/* the hero: the headline rises word by word on load (lw-motion, written in), the line under it follows, and the
   spectrum of the 22 styles' palettes rises one style at a time */
.sc-hero{background:var(--pine-d); color:#f1efe8; padding:84px 0 0; overflow:hidden;}
.sc-hero .eyebrow{color:#d4a445;}
.sc-hero h1{font-size:clamp(34px,5vw,58px); line-height:1.06; max-width:15ch; margin-top:14px;}
.sc-lede{color:#c9cfd6; max-width:60ch; margin-top:18px; font-size:clamp(16px,1.7vw,18.5px);}
.sc-spectrum{display:flex; gap:3px; height:84px; margin-top:52px;}
.sc-sp{flex:1 1 0; min-width:0; display:flex; flex-direction:column; border-radius:6px 6px 0 0; overflow:hidden; transform-origin:50% 100%;}
.sc-sp i{flex:1 1 0;}
@keyframes sc-rise{from{transform:scaleY(0)}}
@keyframes sc-up{from{opacity:0; transform:translate3d(0,16px,0)}}
/* on a phone the first screen is painted still (what Google times as Speed Index), as lw-motion does for headlines */
@media (prefers-reduced-motion:no-preference) and (min-width:761px){
  .sc-sp{animation:sc-rise calc(1s * var(--sc-k)) var(--sc-land) calc(.5s + var(--i,0) * 34ms * var(--sc-k)) both;}
}
/* the line under the headline follows it on larger screens (on a phone it is painted still: it can be the largest
   thing on the first screen, which Google times) */
@media (prefers-reduced-motion:no-preference) and (min-width:761px){
  .sc-lede{animation:sc-up .9s var(--sc-land) .62s both;}
}
@media (max-width:760px){ .sc-hero{padding-top:60px;} .sc-spectrum{height:56px; gap:2px; margin-top:38px;} .sc-sp{border-radius:4px 4px 0 0;} }

/* the list and its filter */
.sc-list{padding:60px 0 96px;}
.sc-wrap{max-width:1320px;}
.sc-head{max-width:900px;}
.sc-h2{font-size:clamp(22px,2.8vw,30px); padding-bottom:10px; border-bottom:2px solid var(--ink);}
.sc-filter{margin:22px 0 34px;}
.sc-filter-label{font:700 12px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:2px; text-transform:uppercase; color:var(--amber); margin-bottom:12px;}
.sc-chips{display:flex; flex-wrap:wrap; gap:8px;}
/* a chip's dark fill sweeps in from the left when it is chosen and drains away to the right when it is not */
.sc-chip{position:relative; isolation:isolate; overflow:hidden; font:600 14.5px/1.2 'Space Grotesk','Segoe UI',system-ui,sans-serif; min-height:44px; padding:10px 16px; border-radius:8px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
  transition:border-color .3s var(--sc-land), color .3s var(--sc-land) .06s;}
.sc-chip::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--pine-d); transform:scaleX(0); transform-origin:100% 50%; transition:transform .42s var(--sc-land);}
.sc-chip:hover{border-color:var(--terra-d); color:var(--terra-d);}
.sc-chip[aria-pressed="true"]{border-color:var(--pine-d); color:#f8f7f3;}
.sc-chip[aria-pressed="true"]::before{transform:none; transform-origin:0 50%; transition:transform .55s var(--sc-snap);}
.sc-chip:focus-visible{outline:3px solid var(--terra); outline-offset:2px;}
.sc-count{margin-top:14px; font-size:14px; color:var(--dim);}
@keyframes sc-tick{from{opacity:.15; transform:translate3d(0,.5em,0)}}
.sc-count.sc-tick{animation:sc-tick .5s var(--sc-land);}
.sc-hint{margin-top:2px; font-size:14px; color:var(--dim);}
.sc-hint-touch{display:none;}
@media (hover:none), (pointer:coarse){ .sc-hint-hover{display:none;} .sc-hint-touch{display:inline;} }
/* on a phone the chips run in one row that scrolls sideways, instead of seven rows of buttons */
@media (max-width:600px){
  .sc-chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -22px; padding:2px 22px 10px; scroll-padding:0 22px; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain;}
  .sc-chips::-webkit-scrollbar{display:none;}
  .sc-chip{flex:none; scroll-snap-align:start;}
}
/* without a script the filter cannot work, so it is not offered */
.nojs .sc-filter-label, .nojs .sc-chips, .nojs .sc-count{display:none;}

/* the board: the index holds still on the left (desktop) while the specimens pass */
.sc-board{--lwm-pin-top:96px; display:grid; grid-template-columns:minmax(0,1fr);}
.sc-rail{display:none;}
@media (min-width:1100px){
  .sc-board{grid-template-columns:200px minmax(0,1fr); column-gap:48px; align-items:start;}
  .sc-rail{display:block; position:sticky; top:96px; align-self:start;}
}
@media (min-width:1100px) and (max-height:660px){ .sc-board .sc-rail{position:static;} }
.sc-rail-count{display:flex; align-items:baseline; gap:8px; font:700 2.75rem/1 'Space Grotesk','Segoe UI',system-ui,sans-serif; color:var(--pine-d); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.sc-rail-count small{font:500 .78rem/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.12em; color:var(--dim);}
.sc-rail-name{min-height:2.7em; margin:10px 0 8px; font:700 1rem/1.3 'Space Grotesk','Segoe UI',system-ui,sans-serif; color:var(--terra-d);}
.sc-index{list-style:none; border-left:1px solid #cdc6b6;}
.sc-index li{position:relative;}
.sc-index li::before{content:""; position:absolute; left:-1px; top:4px; bottom:4px; width:2px; background:var(--gold); transform:scaleY(0); transform-origin:50% 0; transition:transform .45s var(--sc-land);}
.sc-index a{display:flex; gap:8px; padding:4px 0 4px 14px; font:500 .74rem/1.4 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); text-decoration:none;
  transition:color .4s var(--sc-land), transform .45s var(--sc-land), opacity .4s var(--sc-land);}
.sc-index a b{font-weight:500;}   /* full --dim, no opacity: at .7 the numbers measured 2.83:1 on paper (axe, 2026-10-14) */
.sc-index a:hover{color:var(--terra-d);}
.sc-index a:focus-visible{outline:2px solid var(--terra); outline-offset:1px; border-radius:4px;}
.sc-index li.is-on a{color:var(--pine-d); transform:translate3d(4px,0,0);}
.sc-index li.is-on::before{transform:none;}
/* under a filter the matching styles darken in the index (the others keep the quiet grey, which still reads at 4.5:1) */
.sc-index li.is-in a{color:var(--ink);}
.sc-index li.is-in a b{opacity:1;}

/* the specimens: two columns (one on a phone); the second column drifts against the first as the page scrolls
   (lw-motion's column travel: the script marks which tiles are in the second column, the rate lives here) */
.sc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 30px; --lwm-travel:0;}
.sc-tile{--lwm-travel:0;}
@media (min-width:700px){ .sc-tile.sc-even{--lwm-travel:.03;} }
@media (min-width:1100px){ .sc-tile.sc-even{--lwm-travel:.04;} .sc-grid{padding-bottom:60px;} }
@media (max-width:699px){ .sc-grid{grid-template-columns:minmax(0,1fr); gap:26px;} }
.sc-tile{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; min-width:0; scroll-margin-top:96px;
  transition:transform .5s var(--sc-land), box-shadow .5s var(--sc-land), border-color .3s var(--sc-land);}
.sc-tile[hidden]{display:none;}
.sc-tile:focus-within{border-color:var(--terra-d);}
.sc-fig{position:relative; overflow:hidden; background:#e9e6de; border-bottom:1px solid var(--line); cursor:zoom-in;}
.sc-shot{overflow:hidden;}
.sc-fig img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 2.6s var(--sc-land);}
/* a specimen arrives behind a sweep of its own key colour, which pulls away to the right as the tile rises */
.sc-fig::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--k,#2b3440); transform:scaleX(0); transform-origin:100% 50%;}
.lwm-pre .sc-fig::after{transform:none;}
.lwm-in .sc-fig::after{transition:transform calc(.9s * var(--sc-k)) var(--sc-land) calc(var(--lwm-delay,0s) + .12s);}
.sc-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1;}
.sc-num{font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:1.5px; color:var(--amber);}
.sc-body h3{font-size:1.4rem; line-height:1.2;}
.sc-line{color:#3c4048;}
.sc-label{font:700 11px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:1.8px; text-transform:uppercase; color:var(--dim); margin-top:4px;}
.sc-has{list-style:none; display:grid; gap:4px; font-size:15px;}
.sc-has li{padding-left:16px; position:relative;}
.sc-has li::before{content:""; position:absolute; left:0; top:.68em; width:7px; height:2px; background:var(--terra);}
.sc-suits{font-size:15px; color:#3c4048;}
.sc-fit{font-size:13px; color:var(--dim);}
.sc-note{font-size:14px; background:var(--cream); border-radius:6px; padding:9px 12px; color:#3c4048;}
.sc-ex{font-size:14.5px;}
.sc-ex a{display:inline-flex; flex-direction:column; margin:4px 12px 0 0; font-weight:600; text-underline-offset:3px;}
.sc-ex .sc-card{font-weight:400; font-size:13px; color:var(--dim);}
.sc-exnote{color:var(--dim); font-size:13.5px;}
.sc-ex .sc-exn{display:inline-flex;flex-direction:column;margin:4px 12px 0 0;font-weight:600;color:var(--ink)}
.sc-soon{font-size:14px; color:var(--dim); font-style:italic;}
.sc-ask{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 2px; font:700 15px 'Space Grotesk','Segoe UI',system-ui,sans-serif; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px;}
.sc-ask::after{content:"\2192"; display:inline-block; text-decoration:none; transition:transform .4s var(--sc-land);}
.sc-ask:hover{color:var(--terra);}
.sc-ask:hover::after, .sc-ask:focus-visible::after{transform:translate3d(4px,0,0);}
.sc-ask:focus-visible, .sc-ex a:focus-visible{outline:3px solid var(--terra); outline-offset:3px; border-radius:4px;}

/* palette and type: on a desktop pointer the panel turns up from the foot of the specimen, its swatches arriving one at a
   time, and the picture zooms slowly; on touch screens the same panel sits under the picture, always shown */
.sc-kit{display:grid; gap:9px; padding:13px 16px 15px; background:rgba(23,27,34,.95); color:#f1efe8;}
.sc-kit-row{display:grid; grid-template-columns:62px minmax(0,1fr); align-items:start; gap:8px;}
.sc-kit-l{font:500 10.5px/22px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#d4a445;}
.sc-sw{list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px;}
.sc-sw li{display:grid; gap:4px; font:500 10.5px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.02em; color:#c9cfd6;}
.sc-sw i{display:block; width:44px; height:22px; border-radius:4px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
.sc-type{font:600 14px/22px 'Space Grotesk','Segoe UI',system-ui,sans-serif; color:#f1efe8;}
@media (hover:hover) and (pointer:fine){
  .sc-tile:hover{transform:translate3d(0,-4px,0); box-shadow:0 18px 40px rgba(30,34,42,.13); border-color:#d6d0c2;}
  .sc-kit{position:absolute; left:0; right:0; bottom:0; z-index:2; transform-origin:50% 100%; transform:perspective(800px) rotateX(-84deg); opacity:0;
    transition:transform .55s var(--sc-land), opacity .25s var(--sc-land) .05s;}
  .sc-sw li, .sc-type{opacity:0; transform:translate3d(0,8px,0); transition:opacity .4s var(--sc-land), transform .45s var(--sc-land);}
  .sc-tile:hover .sc-kit, .sc-tile:focus-within .sc-kit{transform:none; opacity:1; transition:transform .65s var(--sc-land), opacity .2s var(--sc-land);}
  .sc-tile:hover .sc-sw li, .sc-tile:focus-within .sc-sw li, .sc-tile:hover .sc-type, .sc-tile:focus-within .sc-type{opacity:1; transform:none; transition-delay:calc(.16s + var(--j,0) * 45ms);}
  .sc-tile:hover .sc-fig img, .sc-tile:focus-within .sc-fig img{transform:scale(1.05);}
}
@media (max-width:520px){ .sc-kit-row{grid-template-columns:minmax(0,1fr); gap:6px;} .sc-kit-l{line-height:1;} .sc-sw{gap:6px;} }
@media (hover:none), (pointer:coarse){
  .sc-kit{background:var(--cream); color:var(--ink); border-bottom:1px solid var(--line);}
  .sc-kit-l{color:var(--amber);} .sc-sw li{color:#4a4d55;} .sc-type{color:var(--ink);}
  .sc-sw i{box-shadow:inset 0 0 0 1px rgba(30,34,42,.18);}
}

.sc-how{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sc-how-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px; align-items:start;}
.sc-how h2{font-size:clamp(24px,3vw,34px); margin-top:12px;}
.sc-how-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.sc-how-cols h3{font-size:1.08rem; margin-bottom:6px;}
.sc-how-cols p{color:#3c4048; font-size:15.5px;}
@media (max-width:900px){ .sc-how-in{grid-template-columns:minmax(0,1fr);} .sc-how-cols{grid-template-columns:minmax(0,1fr);} }

/* the ghost pill on the dark close: pill.css says a dark section sets only the ghost's colour */
.cta-final a.pill.ghost{color:#f1efe8;}
.cta-final a.pill.ghost:hover{background:rgba(241,239,232,.12);}

/* reduced motion: nothing moves, every state is shown */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .sc-sp, .sc-lede, .sc-count.sc-tick{animation:none;}
  .sc-tile, .sc-tile:hover, .sc-chip, .sc-chip::before, .sc-index li::before, .sc-index a, .sc-ask::after, .sc-fig img{transition:none; transform:none;}
  .sc-chip[aria-pressed="true"]::before{transform:none;}
  .sc-chip:not([aria-pressed="true"])::before{transform:scaleX(0);}
  .sc-fig::after{display:none;}
  .sc-kit, .sc-sw li, .sc-type{transition:none !important;}
}